create-interview-cockpit 0.21.0 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-interview-cockpit",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "description": "Scaffold a personal AI-powered interview prep cockpit",
   "type": "module",
   "bin": {

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

@@ -295,6 +295,13 @@ export default function CodeContextPanel() {
     [currentQuestion, updateCodeContext],
   );
 
+  const selectAllFiles = useCallback(() => {
+    if (!currentQuestion || availableFiles.length === 0) return;
+    const next = [...availableFiles];
+    setSelectedFiles(next);
+    updateCodeContext(currentQuestion.id, next);
+  }, [availableFiles, currentQuestion, updateCodeContext]);
+
   const toggleExpand = useCallback((path: string) => {
     setExpandedFolders((prev) => {
       const next = new Set(prev);
@@ -308,6 +315,10 @@ export default function CodeContextPanel() {
   }, []);
 
   const filter = search.toLowerCase();
+  const selectedSet = new Set(selectedFiles);
+  const allFilesSelected =
+    availableFiles.length > 0 &&
+    availableFiles.every((filePath) => selectedSet.has(filePath));
 
   return (
     <div className="w-72 h-full min-h-0 border-l border-slate-800 flex flex-col bg-slate-900/30 shrink-0 overflow-hidden">
@@ -317,7 +328,19 @@ export default function CodeContextPanel() {
           <span className="text-xs font-bold uppercase tracking-wider text-slate-500">
             Code Context
           </span>
-          <FolderOpen className="w-3.5 h-3.5 text-slate-600" />
+          <div className="flex items-center gap-2">
+            {currentQuestion && availableFiles.length > 0 && (
+              <button
+                onClick={selectAllFiles}
+                disabled={allFilesSelected}
+                className="text-[10px] text-cyan-400/70 hover:text-cyan-300 disabled:text-slate-600 disabled:cursor-not-allowed"
+                title="Select all code-context files"
+              >
+                Select all
+              </button>
+            )}
+            <FolderOpen className="w-3.5 h-3.5 text-slate-600" />
+          </div>
         </div>
         <div className="relative">
           <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-slate-600" />

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

@@ -2,8 +2,10 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   ChevronDown,
   ChevronRight,
+  Copy,
   FilePlus,
   Folder,
+  ListChecks,
   Loader2,
   Maximize2,
   Minimize2,
@@ -11,6 +13,7 @@ import {
   PanelLeftOpen,
   PanelRightClose,
   PanelRightOpen,
+  Pencil,
   Play,
   Save,
   StopCircle,
@@ -66,6 +69,120 @@ function baseName(filePath: string): string {
   return filePath.split("/").pop() || filePath;
 }
 
+function folderName(filePath: string): string {
+  const idx = filePath.lastIndexOf("/");
+  return idx === -1 ? "" : filePath.slice(0, idx);
+}
+
+function joinLabPath(folder: string, name: string): string {
+  return folder ? `${folder}/${name}` : name;
+}
+
+function getKnownFolders(paths: string[]): Set<string> {
+  const folders = new Set<string>([""]);
+  for (const filePath of paths) {
+    const parts = folderName(filePath).split("/").filter(Boolean);
+    for (let i = 1; i <= parts.length; i += 1) {
+      folders.add(parts.slice(0, i).join("/"));
+    }
+  }
+  return folders;
+}
+
+function normalizeDestinationInput(input: string): {
+  path: string;
+  isDirectoryHint: boolean;
+  error?: string;
+} {
+  const raw = input.trim().replace(/\\/g, "/");
+  if (!raw) {
+    return {
+      path: "",
+      isDirectoryHint: false,
+      error: "Enter a destination path.",
+    };
+  }
+  if (raw.startsWith("/") || /^[a-zA-Z]:\//.test(raw)) {
+    return {
+      path: "",
+      isDirectoryHint: false,
+      error: "Use a relative path inside the lab workspace.",
+    };
+  }
+
+  const isDirectoryHint = raw === "." || raw.endsWith("/");
+  let value = raw;
+  while (value.startsWith("./")) value = value.slice(2);
+  value = value.replace(/\/+/g, "/");
+  if (value === ".") value = "";
+  value = value.replace(/\/+$/, "");
+
+  const segments = value ? value.split("/") : [];
+  if (
+    segments.some(
+      (segment) =>
+        !segment ||
+        segment === "." ||
+        segment === ".." ||
+        segment.includes("\0"),
+    )
+  ) {
+    return {
+      path: "",
+      isDirectoryHint: false,
+      error: "Destination paths cannot contain empty, '.', or '..' segments.",
+    };
+  }
+
+  return { path: segments.join("/"), isDirectoryHint };
+}
+
+function resolveDestinationPath(
+  input: string,
+  sourceFile: string,
+  knownFolders: Set<string>,
+): string | null {
+  const normalized = normalizeDestinationInput(input);
+  if (normalized.error) {
+    window.alert(normalized.error);
+    return null;
+  }
+
+  let target = normalized.path;
+  if (normalized.isDirectoryHint || knownFolders.has(target)) {
+    target = joinLabPath(target, baseName(sourceFile));
+  }
+
+  if (!target) {
+    window.alert("Destination file path is required.");
+    return null;
+  }
+  return target;
+}
+
+function getCopyCandidatePath(
+  sourceFile: string,
+  existingPaths: Set<string>,
+  targetFolder = folderName(sourceFile),
+): string {
+  const sourceName = baseName(sourceFile);
+  const dot = sourceName.lastIndexOf(".");
+  const hasExtension = dot > 0;
+  const stem = hasExtension ? sourceName.slice(0, dot) : sourceName;
+  const ext = hasExtension ? sourceName.slice(dot) : "";
+  let count = 1;
+
+  while (true) {
+    const marker = count === 1 ? "copy" : `copy-${count}`;
+    const nextName = hasExtension
+      ? `${stem}.${marker}${ext}`
+      : `${sourceName}.${marker}`;
+    const candidate = joinLabPath(targetFolder, nextName);
+    if (!existingPaths.has(candidate)) return candidate;
+    count += 1;
+  }
+}
+
 function getEditorLanguage(filePath: string): string {
   const lower = filePath.toLowerCase();
   if (lower.endsWith(".yml") || lower.endsWith(".yaml")) return "yaml";
@@ -305,6 +422,32 @@ export default function GithubActionsLabModal() {
   const [collapsedFolders, setCollapsedFolders] = useState<Set<string>>(
     () => new Set(),
   );
+  const [selectedFiles, setSelectedFiles] = useState<Set<string>>(
+    () => new Set(),
+  );
+  const [draggingFile, setDraggingFile] = useState<string | null>(null);
+  const [dragOverFolder, setDragOverFolder] = useState<string | null>(null);
+  const [openFileMenu, setOpenFileMenu] = useState<string | null>(null);
+  const [bulkMenuOpen, setBulkMenuOpen] = useState(false);
+  // When false the row checkboxes stay hidden so the tree reads like a
+  // normal file list; flipped on by the toolbar toggle, by checking a
+  // single row via its hover affordance, or whenever something is selected.
+  const [selectMode, setSelectMode] = useState(false);
+  const selectedFileList = useMemo(
+    () => fileOrder.filter((filePath) => selectedFiles.has(filePath)),
+    [fileOrder, selectedFiles],
+  );
+
+  useEffect(() => {
+    setSelectedFiles((prev) => {
+      const known = new Set(fileOrder);
+      const next = new Set(
+        Array.from(prev).filter((filePath) => known.has(filePath)),
+      );
+      return next.size === prev.size ? prev : next;
+    });
+  }, [fileOrder]);
+
   const toggleFolder = (folder: string) => {
     setCollapsedFolders((prev) => {
       const next = new Set(prev);
@@ -314,6 +457,27 @@ export default function GithubActionsLabModal() {
     });
   };
 
+  const toggleFileSelection = (fileName: string) => {
+    setSelectedFiles((prev) => {
+      const next = new Set(prev);
+      if (next.has(fileName)) next.delete(fileName);
+      else next.add(fileName);
+      if (next.size > 0) setSelectMode(true);
+      return next;
+    });
+  };
+
+  const toggleSelectAllFiles = () => {
+    setSelectedFiles((prev) => {
+      if (prev.size === fileOrder.length) {
+        setSelectMode(false);
+        return new Set();
+      }
+      setSelectMode(true);
+      return new Set(fileOrder);
+    });
+  };
+
   const updateFile = (fileName: string, content: string) => {
     setWorkspace((prev) => ({
       ...prev,
@@ -322,6 +486,325 @@ export default function GithubActionsLabModal() {
     }));
   };
 
+  const applyFilePathOperation = useCallback(
+    (
+      sourceFile: string,
+      requestedTarget: string,
+      operation: "move" | "copy",
+      collisionStrategy: "prompt" | "unique" = "prompt",
+    ) => {
+      const sourceContent = workspace.files[sourceFile];
+      if (sourceContent === undefined) return;
+
+      const existingPaths = new Set(Object.keys(workspace.files));
+      let targetFile = requestedTarget;
+      if (
+        operation === "copy" &&
+        (targetFile === sourceFile ||
+          (collisionStrategy === "unique" && existingPaths.has(targetFile)))
+      ) {
+        targetFile = getCopyCandidatePath(
+          sourceFile,
+          existingPaths,
+          folderName(targetFile),
+        );
+      }
+
+      if (operation === "move" && targetFile === sourceFile) return;
+
+      const overwrites =
+        Object.prototype.hasOwnProperty.call(workspace.files, targetFile) &&
+        targetFile !== sourceFile;
+      if (
+        overwrites &&
+        !window.confirm(`Overwrite ${targetFile} with ${sourceFile}?`)
+      ) {
+        return;
+      }
+
+      setWorkspace((prev) => {
+        const content = prev.files[sourceFile];
+        if (content === undefined) return prev;
+
+        const files = { ...prev.files };
+        if (operation === "move") {
+          delete files[sourceFile];
+        }
+        files[targetFile] = content;
+
+        const nextActiveFile =
+          operation === "copy" || prev.activeFile === sourceFile
+            ? targetFile
+            : prev.activeFile;
+
+        return {
+          ...prev,
+          activeFile: nextActiveFile,
+          defaultWorkflow:
+            operation === "move" && prev.defaultWorkflow === sourceFile
+              ? targetFile
+              : prev.defaultWorkflow,
+          files,
+        };
+      });
+
+      if (operation === "copy" || activeFile === sourceFile) {
+        setActiveFile(targetFile);
+      }
+      if (operation === "move" && workflow === sourceFile) {
+        setWorkflow(targetFile);
+      }
+      setSelectedFiles((prev) => {
+        if (!prev.has(sourceFile)) return prev;
+        const next = new Set(prev);
+        if (operation === "move") next.delete(sourceFile);
+        next.add(targetFile);
+        return next;
+      });
+    },
+    [activeFile, workflow, workspace.files],
+  );
+
+  const applyBulkFolderOperation = useCallback(
+    (
+      sourceFiles: string[],
+      targetFolder: string,
+      operation: "move" | "copy",
+    ) => {
+      const uniqueSources = Array.from(new Set(sourceFiles)).filter(
+        (fileName) => workspace.files[fileName] !== undefined,
+      );
+      if (uniqueSources.length === 0) return;
+
+      const existingPaths = new Set(Object.keys(workspace.files));
+      const plannedTargets = new Set<string>();
+      const pairs: Array<{ source: string; target: string }> = [];
+
+      for (const source of uniqueSources) {
+        let target = joinLabPath(targetFolder, baseName(source));
+
+        if (operation === "move" && target === source) {
+          continue;
+        }
+
+        if (operation === "copy") {
+          if (
+            target === source ||
+            existingPaths.has(target) ||
+            plannedTargets.has(target)
+          ) {
+            target = getCopyCandidatePath(
+              source,
+              new Set([...existingPaths, ...plannedTargets]),
+              targetFolder,
+            );
+          }
+        } else if (plannedTargets.has(target)) {
+          window.alert(
+            `Multiple selected files would become ${target}. Rename one first, or move them separately.`,
+          );
+          return;
+        }
+
+        pairs.push({ source, target });
+        plannedTargets.add(target);
+        if (operation === "copy") existingPaths.add(target);
+      }
+
+      if (pairs.length === 0) return;
+
+      const conflicts =
+        operation === "move"
+          ? pairs.filter(
+              ({ source, target }) =>
+                source !== target && workspace.files[target] !== undefined,
+            )
+          : [];
+      if (conflicts.length > 0) {
+        const preview = conflicts
+          .slice(0, 4)
+          .map(({ target }) => target)
+          .join("\n");
+        const suffix = conflicts.length > 4 ? "\n…" : "";
+        if (
+          !window.confirm(
+            `Overwrite existing file${conflicts.length === 1 ? "" : "s"}?\n${preview}${suffix}`,
+          )
+        ) {
+          return;
+        }
+      }
+
+      setWorkspace((prev) => {
+        const files = { ...prev.files };
+        const materialized = pairs
+          .map(({ source, target }) => ({
+            source,
+            target,
+            content: prev.files[source],
+          }))
+          .filter(
+            (
+              entry,
+            ): entry is { source: string; target: string; content: string } =>
+              entry.content !== undefined,
+          );
+
+        if (operation === "move") {
+          for (const { source } of materialized) delete files[source];
+        }
+        for (const { target, content } of materialized) files[target] = content;
+
+        const activeMapping = materialized.find(
+          ({ source }) => source === prev.activeFile,
+        );
+        const defaultWorkflowMapping = materialized.find(
+          ({ source }) => source === prev.defaultWorkflow,
+        );
+
+        return {
+          ...prev,
+          activeFile:
+            operation === "copy"
+              ? (materialized[0]?.target ?? prev.activeFile)
+              : (activeMapping?.target ?? prev.activeFile),
+          defaultWorkflow:
+            operation === "move" && defaultWorkflowMapping
+              ? defaultWorkflowMapping.target
+              : prev.defaultWorkflow,
+          files,
+        };
+      });
+
+      const activePair = pairs.find(({ source }) => source === activeFile);
+      if (operation === "copy") {
+        setActiveFile(pairs[0]?.target ?? activeFile);
+      } else if (activePair) {
+        setActiveFile(activePair.target);
+      }
+
+      const workflowPair = pairs.find(({ source }) => source === workflow);
+      if (operation === "move" && workflowPair) {
+        setWorkflow(workflowPair.target);
+      }
+
+      setSelectedFiles(new Set(pairs.map(({ target }) => target)));
+    },
+    [activeFile, workflow, workspace.files],
+  );
+
+  const resolveBulkFolderPath = (input: string): string | null => {
+    const normalized = normalizeDestinationInput(input);
+    if (normalized.error) {
+      window.alert(normalized.error);
+      return null;
+    }
+    return normalized.path;
+  };
+
+  const moveFilesToFolder = (fileNames: string[]) => {
+    if (fileNames.length === 0) return;
+    const next = window.prompt(
+      `Move ${fileNames.length} file${fileNames.length === 1 ? "" : "s"} into folder path. Use . for the workspace root.`,
+      folderName(fileNames[0]) || ".",
+    );
+    if (!next) return;
+    const targetFolder = resolveBulkFolderPath(next);
+    if (targetFolder === null) return;
+    applyBulkFolderOperation(fileNames, targetFolder, "move");
+  };
+
+  const copyFilesToFolder = (fileNames: string[]) => {
+    if (fileNames.length === 0) return;
+    const next = window.prompt(
+      `Copy ${fileNames.length} file${fileNames.length === 1 ? "" : "s"} into folder path. Use . for the workspace root.`,
+      folderName(fileNames[0]) || ".",
+    );
+    if (!next) return;
+    const targetFolder = resolveBulkFolderPath(next);
+    if (targetFolder === null) return;
+    applyBulkFolderOperation(fileNames, targetFolder, "copy");
+  };
+
+  const moveFile = (fileName: string) => {
+    const next = window.prompt(
+      "Move or rename file. Enter a destination path, or an existing folder / folder ending in / to keep the same file name.",
+      fileName,
+    );
+    if (!next) return;
+    const target = resolveDestinationPath(
+      next,
+      fileName,
+      getKnownFolders(Object.keys(workspace.files)),
+    );
+    if (!target) return;
+    applyFilePathOperation(fileName, target, "move");
+    setOpenFileMenu(null);
+  };
+
+  const copyFile = (fileName: string) => {
+    const next = window.prompt(
+      "Copy file. Enter a destination path, or an existing folder / folder ending in / to keep the same file name.",
+      getCopyCandidatePath(fileName, new Set(Object.keys(workspace.files))),
+    );
+    if (!next) return;
+    const target = resolveDestinationPath(
+      next,
+      fileName,
+      getKnownFolders(Object.keys(workspace.files)),
+    );
+    if (!target) return;
+    applyFilePathOperation(fileName, target, "copy");
+    setOpenFileMenu(null);
+  };
+
+  const handleFileDragStart = (
+    e: React.DragEvent<HTMLDivElement>,
+    fileName: string,
+  ) => {
+    setDraggingFile(fileName);
+    e.dataTransfer.effectAllowed = "copyMove";
+    e.dataTransfer.setData("text/x-gha-lab-file", fileName);
+    e.dataTransfer.setData("text/plain", fileName);
+  };
+
+  const handleFolderDragOver = (
+    e: React.DragEvent<HTMLElement>,
+    folder: string,
+  ) => {
+    if (!draggingFile) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = e.altKey ? "copy" : "move";
+    setDragOverFolder(folder);
+  };
+
+  const handleFolderDrop = (
+    e: React.DragEvent<HTMLElement>,
+    folder: string,
+  ) => {
+    e.preventDefault();
+    const sourceFile =
+      e.dataTransfer.getData("text/x-gha-lab-file") || draggingFile;
+    setDraggingFile(null);
+    setDragOverFolder(null);
+    if (!sourceFile) return;
+
+    const operation = e.altKey ? "copy" : "move";
+    const sourceGroup = selectedFiles.has(sourceFile)
+      ? selectedFileList
+      : [sourceFile];
+    if (sourceGroup.length > 1) {
+      applyBulkFolderOperation(sourceGroup, folder, operation);
+    } else {
+      applyFilePathOperation(
+        sourceFile,
+        joinLabPath(folder, baseName(sourceFile)),
+        operation,
+        operation === "copy" ? "unique" : "prompt",
+      );
+    }
+  };
+
   const addFile = () => {
     const name = window.prompt(
       "New file path (e.g. .github/workflows/release.yml)",
@@ -354,6 +837,41 @@ export default function GithubActionsLabModal() {
       );
       setActiveFile(remaining[0] ?? "");
     }
+    setSelectedFiles((prev) => {
+      if (!prev.has(fileName)) return prev;
+      const next = new Set(prev);
+      next.delete(fileName);
+      return next;
+    });
+    setOpenFileMenu(null);
+  };
+
+  const deleteSelectedFiles = () => {
+    if (selectedFileList.length === 0) return;
+    if (
+      !window.confirm(
+        `Delete ${selectedFileList.length} selected file${selectedFileList.length === 1 ? "" : "s"}?`,
+      )
+    ) {
+      return;
+    }
+    const selected = new Set(selectedFileList);
+    setWorkspace((prev) => {
+      const files = { ...prev.files };
+      for (const fileName of selected) delete files[fileName];
+      const nextActive = selected.has(prev.activeFile)
+        ? (Object.keys(files)[0] ?? "")
+        : prev.activeFile;
+      return { ...prev, activeFile: nextActive, files };
+    });
+    if (selected.has(activeFile)) {
+      const remaining = Object.keys(workspace.files).filter(
+        (fileName) => !selected.has(fileName),
+      );
+      setActiveFile(remaining[0] ?? "");
+    }
+    setSelectedFiles(new Set());
+    setBulkMenuOpen(false);
   };
 
   // ── Save lab as context file ──────────────────────────────────────
@@ -966,18 +1484,132 @@ interface ImportMeta {
             }}
           >
             <div className="flex items-center justify-between px-2 py-1.5 border-b border-slate-800/60">
-              <span className="text-[10px] font-semibold tracking-widest text-slate-500">
-                FILES
-              </span>
-              <button
-                onClick={addFile}
-                className="p-1 rounded text-slate-400 hover:text-amber-300 hover:bg-slate-800/60"
-                title="Add file"
-              >
-                <FilePlus className="w-3.5 h-3.5" />
-              </button>
+              <div className="flex items-center gap-1 min-w-0">
+                <span className="text-[10px] font-semibold tracking-widest text-slate-500">
+                  FILES
+                </span>
+                {selectedFileList.length > 0 && (
+                  <span className="rounded bg-amber-500/15 px-1.5 py-0.5 text-[10px] font-medium text-amber-200">
+                    {selectedFileList.length}
+                  </span>
+                )}
+              </div>
+              <div className="relative flex items-center gap-1">
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setSelectMode((prev) => {
+                      const next = !prev;
+                      if (!next) setSelectedFiles(new Set());
+                      return next;
+                    });
+                    setBulkMenuOpen(false);
+                    setOpenFileMenu(null);
+                  }}
+                  className={`p-1 rounded hover:bg-slate-800/60 ${
+                    selectMode
+                      ? "text-amber-300"
+                      : "text-slate-400 hover:text-amber-300"
+                  }`}
+                  title={selectMode ? "Exit selection mode" : "Select files"}
+                >
+                  <ListChecks className="w-3.5 h-3.5" />
+                </button>
+                {selectedFileList.length > 0 && (
+                  <>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setBulkMenuOpen((v) => !v);
+                        setOpenFileMenu(null);
+                      }}
+                      className="rounded px-1.5 py-0.5 text-[11px] text-slate-400 hover:bg-slate-800/60 hover:text-amber-200"
+                      title="Selected file actions"
+                    >
+                      Selected ▾
+                    </button>
+                    {bulkMenuOpen && (
+                      <div
+                        onClick={(e) => e.stopPropagation()}
+                        className="absolute right-6 top-6 z-40 w-44 overflow-hidden rounded-lg border border-slate-700 bg-slate-950 py-1 text-[11px] shadow-xl"
+                      >
+                        <button
+                          onClick={() => {
+                            moveFilesToFolder(selectedFileList);
+                            setBulkMenuOpen(false);
+                          }}
+                          className="flex w-full items-center gap-2 px-2 py-1.5 text-left text-slate-200 hover:bg-slate-800/70"
+                        >
+                          <Pencil className="w-3 h-3 text-amber-300" />
+                          Move to folder…
+                        </button>
+                        <button
+                          onClick={() => {
+                            copyFilesToFolder(selectedFileList);
+                            setBulkMenuOpen(false);
+                          }}
+                          className="flex w-full items-center gap-2 px-2 py-1.5 text-left text-slate-200 hover:bg-slate-800/70"
+                        >
+                          <Copy className="w-3 h-3 text-sky-300" />
+                          Copy to folder…
+                        </button>
+                        <button
+                          onClick={() => {
+                            setSelectedFiles(new Set());
+                            setSelectMode(false);
+                            setBulkMenuOpen(false);
+                          }}
+                          className="flex w-full items-center gap-2 px-2 py-1.5 text-left text-slate-400 hover:bg-slate-800/70"
+                        >
+                          Clear selection
+                        </button>
+                        <button
+                          onClick={deleteSelectedFiles}
+                          className="flex w-full items-center gap-2 border-t border-slate-800 px-2 py-1.5 text-left text-red-300 hover:bg-red-500/10"
+                        >
+                          <Trash2 className="w-3 h-3" />
+                          Delete selected
+                        </button>
+                      </div>
+                    )}
+                  </>
+                )}
+                <button
+                  onClick={addFile}
+                  className="p-1 rounded text-slate-400 hover:text-amber-300 hover:bg-slate-800/60"
+                  title="Add file"
+                >
+                  <FilePlus className="w-3.5 h-3.5" />
+                </button>
+              </div>
             </div>
-            <div className="flex-1 overflow-auto p-1 text-xs">
+            <div
+              className="flex-1 overflow-auto p-1 text-xs"
+              onClick={() => {
+                setOpenFileMenu(null);
+                setBulkMenuOpen(false);
+              }}
+            >
+              {draggingFile && (
+                <div
+                  onDragOver={(e) => handleFolderDragOver(e, "")}
+                  onDragLeave={() =>
+                    setDragOverFolder((current) =>
+                      current === "" ? null : current,
+                    )
+                  }
+                  onDrop={(e) => handleFolderDrop(e, "")}
+                  className={`mb-1 rounded border border-dashed px-2 py-1 text-[11px] ${
+                    dragOverFolder === ""
+                      ? "border-amber-400/70 bg-amber-500/10 text-amber-200"
+                      : "border-slate-700 text-slate-500"
+                  }`}
+                >
+                  Drop{" "}
+                  {selectedFiles.has(draggingFile) ? "selected files" : "file"}{" "}
+                  in workspace root • hold Option/Alt to copy
+                </div>
+              )}
               {grouped.map(({ folder, files }) => {
                 const collapsed = collapsedFolders.has(folder);
                 return (
@@ -985,7 +1617,15 @@ interface ImportMeta {
                     {folder && (
                       <button
                         onClick={() => toggleFolder(folder)}
+                        onDragOver={(e) => handleFolderDragOver(e, folder)}
+                        onDragLeave={() =>
+                          setDragOverFolder((current) =>
+                            current === folder ? null : current,
+                          )
+                        }
+                        onDrop={(e) => handleFolderDrop(e, folder)}
                         className="flex items-center gap-1 w-full px-1 py-0.5 text-slate-400 hover:text-slate-200"
+                        title="Drop a file here to move it. Hold Option/Alt while dropping to copy."
                       >
                         {collapsed ? (
                           <ChevronRight className="w-3 h-3" />
@@ -993,34 +1633,127 @@ interface ImportMeta {
                           <ChevronDown className="w-3 h-3" />
                         )}
                         <Folder className="w-3 h-3" />
-                        <span className="truncate">{folder}/</span>
+                        <span
+                          className={`truncate rounded px-1 ${
+                            dragOverFolder === folder
+                              ? "bg-amber-500/15 text-amber-200"
+                              : ""
+                          }`}
+                        >
+                          {folder}/
+                        </span>
                       </button>
                     )}
                     {!collapsed &&
                       files.map((filePath) => (
                         <div
                           key={filePath}
-                          className={`group flex items-center gap-1 pl-${folder ? 5 : 1} pr-1 py-0.5 rounded cursor-pointer ${
+                          data-selected={selectedFiles.has(filePath)}
+                          draggable
+                          onDragStart={(e) => handleFileDragStart(e, filePath)}
+                          onDragEnd={() => {
+                            setDraggingFile(null);
+                            setDragOverFolder(null);
+                          }}
+                          className={`group relative flex items-center gap-1 pl-${folder ? 5 : 1} pr-1 py-0.5 rounded cursor-pointer ${
                             activeFile === filePath
                               ? "bg-amber-500/15 text-amber-200"
-                              : "text-slate-300 hover:bg-slate-800/40"
+                              : selectedFiles.has(filePath)
+                                ? "bg-sky-500/10 text-sky-100 hover:bg-sky-500/15"
+                                : "text-slate-300 hover:bg-slate-800/40"
                           }`}
                           onClick={() => setActiveFile(filePath)}
                           style={{ paddingLeft: folder ? 20 : 6 }}
                         >
+                          {(selectMode || selectedFiles.has(filePath)) && (
+                            <input
+                              type="checkbox"
+                              checked={selectedFiles.has(filePath)}
+                              onClick={(e) => e.stopPropagation()}
+                              onChange={() => toggleFileSelection(filePath)}
+                              className="h-3 w-3 shrink-0 accent-amber-400"
+                              title="Select file"
+                            />
+                          )}
                           <span className="truncate flex-1">
                             {baseName(filePath)}
                           </span>
                           <button
                             onClick={(e) => {
                               e.stopPropagation();
-                              deleteFile(filePath);
+                              setOpenFileMenu((current) =>
+                                current === filePath ? null : filePath,
+                              );
+                              setBulkMenuOpen(false);
                             }}
-                            className="opacity-0 group-hover:opacity-100 p-0.5 text-slate-500 hover:text-red-400"
-                            title="Delete"
+                            className="rounded px-1 text-slate-500 opacity-70 hover:bg-slate-800/70 hover:text-amber-200 group-hover:opacity-100"
+                            title="File actions"
                           >
-                            <Trash2 className="w-3 h-3" />
+                            ⋯
                           </button>
+                          {openFileMenu === filePath && (
+                            <div
+                              onClick={(e) => e.stopPropagation()}
+                              className="absolute right-1 top-6 z-40 w-40 overflow-hidden rounded-lg border border-slate-700 bg-slate-950 py-1 text-[11px] shadow-xl"
+                            >
+                              <button
+                                onClick={() => moveFile(filePath)}
+                                className="flex w-full items-center gap-2 px-2 py-1.5 text-left text-slate-200 hover:bg-slate-800/70"
+                              >
+                                <Pencil className="w-3 h-3 text-amber-300" />
+                                Move / rename…
+                              </button>
+                              <button
+                                onClick={() => copyFile(filePath)}
+                                className="flex w-full items-center gap-2 px-2 py-1.5 text-left text-slate-200 hover:bg-slate-800/70"
+                              >
+                                <Copy className="w-3 h-3 text-sky-300" />
+                                Copy to path…
+                              </button>
+                              <button
+                                onClick={() => {
+                                  toggleFileSelection(filePath);
+                                  setOpenFileMenu(null);
+                                }}
+                                className="flex w-full items-center gap-2 border-t border-slate-800 px-2 py-1.5 text-left text-slate-200 hover:bg-slate-800/70"
+                              >
+                                <ListChecks className="w-3 h-3 text-amber-300" />
+                                {selectedFiles.has(filePath)
+                                  ? "Deselect"
+                                  : "Select"}
+                              </button>
+                              {selectedFileList.length > 1 &&
+                                selectedFiles.has(filePath) && (
+                                  <>
+                                    <button
+                                      onClick={() => {
+                                        moveFilesToFolder(selectedFileList);
+                                        setOpenFileMenu(null);
+                                      }}
+                                      className="flex w-full items-center gap-2 border-t border-slate-800 px-2 py-1.5 text-left text-slate-200 hover:bg-slate-800/70"
+                                    >
+                                      Move selected…
+                                    </button>
+                                    <button
+                                      onClick={() => {
+                                        copyFilesToFolder(selectedFileList);
+                                        setOpenFileMenu(null);
+                                      }}
+                                      className="flex w-full items-center gap-2 px-2 py-1.5 text-left text-slate-200 hover:bg-slate-800/70"
+                                    >
+                                      Copy selected…
+                                    </button>
+                                  </>
+                                )}
+                              <button
+                                onClick={() => deleteFile(filePath)}
+                                className="flex w-full items-center gap-2 border-t border-slate-800 px-2 py-1.5 text-left text-red-300 hover:bg-red-500/10"
+                              >
+                                <Trash2 className="w-3 h-3" />
+                                Delete
+                              </button>
+                            </div>
+                          )}
                         </div>
                       ))}
                   </div>

package/template/cockpit.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.19.0"
+  "version": "0.21.0"
 }

package/template/server/src/gha-runner.ts

@@ -105,6 +105,21 @@ const ALLOWED_ACT_FLAGS = new Set([
   "-v",
 ]);
 
+// act asks an interactive first-run question for runner image size unless it
+// already has platform mappings. The lab console cannot answer arrow-key
+// prompts cleanly, so we inject the Medium image mappings by default. Users can
+// still override with -P / --platform in the command.
+const DEFAULT_ACT_PLATFORM_ARGS = [
+  "-P",
+  "ubuntu-latest=catthehacker/ubuntu:act-latest",
+  "-P",
+  "ubuntu-24.04=catthehacker/ubuntu:act-24.04",
+  "-P",
+  "ubuntu-22.04=catthehacker/ubuntu:act-22.04",
+  "-P",
+  "ubuntu-20.04=catthehacker/ubuntu:act-20.04",
+];
+
 // ─── Utilities ───────────────────────────────────────────────────────────
 
 function getGhaRunsDir(): string {
@@ -304,6 +319,24 @@ interface ParsedActCommand {
   displayCommand: string;
 }
 
+function hasPlatformOverride(args: string[]): boolean {
+  return args.some(
+    (arg) =>
+      arg === "-P" ||
+      arg === "--platform" ||
+      arg.startsWith("-P=") ||
+      arg.startsWith("--platform="),
+  );
+}
+
+function withDefaultActPlatforms(args: string[]): {
+  args: string[];
+  injected: boolean;
+} {
+  if (hasPlatformOverride(args)) return { args, injected: false };
+  return { args: [...args, ...DEFAULT_ACT_PLATFORM_ARGS], injected: true };
+}
+
 function parseActCommand(command: string): ParsedActCommand {
   const tokens = splitCommand(command);
   if (tokens.length === 0) throw new Error("Type a command to run");
@@ -681,6 +714,7 @@ export async function streamGhaCommand(
   const workspace = parseWorkspace(input.workspace);
 
   const parsed = parseActCommand(input.command);
+  const platformArgs = withDefaultActPlatforms(parsed.args);
   const sessionKey =
     input.fileId ?? input.questionId ?? `draft-${randomUUID()}`;
   const runId = randomUUID();
@@ -696,12 +730,19 @@ export async function streamGhaCommand(
 
   const emit = (msg: GhaStreamMessage) => input.onMessage?.(msg);
   emit({ type: "output", kind: "info", text: parsed.displayCommand });
+  if (platformArgs.injected) {
+    emit({
+      type: "output",
+      kind: "info",
+      text: "[info] Using default Medium act runner image mappings. Pass -P/--platform to override.\n",
+    });
+  }
 
   // Track per-job status from act's prefixed stdout/stderr lines so the
   // client can render a live DAG in addition to the raw console.
   const tracker = new JobTracker((job) => emit({ type: "job", job }));
 
-  const child = spawn("act", parsed.args, {
+  const child = spawn("act", platformArgs.args, {
     cwd: workspaceDir,
     env: {
       ...process.env,

package/template/server/src/index.ts

@@ -2240,7 +2240,6 @@ const DEFAULT_IGNORE_DIRS = [
   "bin",
   "obj",
   ".vs",
-  "packages",
   "TestResults",
   "publish",
   // Python / misc