create-interview-cockpit 0.30.0 → 0.31.0

package/package.json

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

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

@@ -236,18 +236,105 @@ function mapJobStatusToCheck(
   return s;
 }
 
-// Tiny grouped-by-folder list to keep the modal lean.
-function groupByFolder(paths: string[]): { folder: string; files: string[] }[] {
-  const map = new Map<string, string[]>();
-  for (const p of paths) {
-    const idx = p.lastIndexOf("/");
-    const folder = idx === -1 ? "" : p.slice(0, idx);
-    if (!map.has(folder)) map.set(folder, []);
-    map.get(folder)!.push(p);
+interface FileTreeFileNode {
+  type: "file";
+  name: string;
+  path: string;
+}
+
+interface FileTreeFolderNode {
+  type: "folder";
+  displayName: string;
+  path: string;
+  children: FileTreeNode[];
+}
+
+type FileTreeNode = FileTreeFileNode | FileTreeFolderNode;
+
+interface MutableFileTreeFolder {
+  name: string;
+  path: string;
+  files: FileTreeFileNode[];
+  folders: Map<string, MutableFileTreeFolder>;
+}
+
+function sortFileTreeNodes<T extends { name?: string; displayName?: string }>(
+  a: T,
+  b: T,
+) {
+  return (a.displayName ?? a.name ?? "").localeCompare(
+    b.displayName ?? b.name ?? "",
+  );
+}
+
+function getMutableFolderChildren(
+  folder: MutableFileTreeFolder,
+): FileTreeNode[] {
+  const files = [...folder.files].sort(sortFileTreeNodes);
+  const folders = Array.from(folder.folders.values())
+    .map(compactFileTreeFolder)
+    .sort(sortFileTreeNodes);
+  return [...files, ...folders];
+}
+
+function compactFileTreeFolder(
+  folder: MutableFileTreeFolder,
+): FileTreeFolderNode {
+  const names = [folder.name];
+  let current = folder;
+
+  while (current.files.length === 0 && current.folders.size === 1) {
+    const next = Array.from(current.folders.values())[0];
+    names.push(next.name);
+    current = next;
   }
-  return Array.from(map.entries())
-    .sort(([a], [b]) => a.localeCompare(b))
-    .map(([folder, files]) => ({ folder, files: files.sort() }));
+
+  return {
+    type: "folder",
+    displayName: names.join("/"),
+    path: current.path,
+    children: getMutableFolderChildren(current),
+  };
+}
+
+function buildCompactFileTree(paths: string[]): FileTreeNode[] {
+  const root: MutableFileTreeFolder = {
+    name: "",
+    path: "",
+    files: [],
+    folders: new Map(),
+  };
+
+  for (const filePath of paths) {
+    const parts = filePath.split("/").filter(Boolean);
+    if (parts.length === 0) continue;
+
+    let current = root;
+    let currentPath = "";
+    for (let i = 0; i < parts.length - 1; i += 1) {
+      const name = parts[i];
+      currentPath = currentPath ? `${currentPath}/${name}` : name;
+      let next = current.folders.get(name);
+      if (!next) {
+        next = {
+          name,
+          path: currentPath,
+          files: [],
+          folders: new Map(),
+        };
+        current.folders.set(name, next);
+      }
+      current = next;
+    }
+
+    current.files.push({
+      type: "file",
+      name: parts[parts.length - 1],
+      path: filePath,
+    });
+  }
+
+  return getMutableFolderChildren(root);
 }
 
 // ─── Component ───────────────────────────────────────────────────────────
@@ -514,7 +601,7 @@ export default function GithubActionsLabModal() {
 
   // ── File operations ───────────────────────────────────────────────
   const fileOrder = useMemo(() => getGhaLabFileOrder(workspace), [workspace]);
-  const grouped = useMemo(() => groupByFolder(fileOrder), [fileOrder]);
+  const fileTree = useMemo(() => buildCompactFileTree(fileOrder), [fileOrder]);
   const [collapsedFolders, setCollapsedFolders] = useState<Set<string>>(
     () => new Set(),
   );
@@ -1706,10 +1793,161 @@ interface ImportMeta {
         minHeight: MIN_H,
       };
 
+  const renderFileTreeNode = (node: FileTreeNode, depth: number) => {
+    const paddingLeft = 6 + depth * 14;
+
+    if (node.type === "folder") {
+      const collapsed = collapsedFolders.has(node.path);
+      return (
+        <div key={`folder:${node.path || node.displayName}`}>
+          <button
+            onClick={() => toggleFolder(node.path)}
+            onDragOver={(e) => handleFolderDragOver(e, node.path)}
+            onDragLeave={() =>
+              setDragOverFolder((current) =>
+                current === node.path ? null : current,
+              )
+            }
+            onDrop={(e) => handleFolderDrop(e, node.path)}
+            className="flex items-center gap-1 w-full pr-1 py-0.5 text-slate-400 hover:text-slate-200"
+            style={{ paddingLeft }}
+            title="Drop a file here to move it. Hold Option/Alt while dropping to copy."
+          >
+            {collapsed ? (
+              <ChevronRight className="w-3 h-3 shrink-0" />
+            ) : (
+              <ChevronDown className="w-3 h-3 shrink-0" />
+            )}
+            <Folder className="w-3 h-3 shrink-0" />
+            <span
+              className={`truncate rounded px-1 ${
+                dragOverFolder === node.path
+                  ? "bg-amber-500/15 text-amber-200"
+                  : ""
+              }`}
+            >
+              {node.displayName}/
+            </span>
+          </button>
+          {!collapsed &&
+            node.children.map((child) => renderFileTreeNode(child, depth + 1))}
+        </div>
+      );
+    }
+
+    const filePath = node.path;
+    return (
+      <div
+        key={`file:${filePath}`}
+        data-selected={selectedFiles.has(filePath)}
+        draggable
+        onDragStart={(e) => handleFileDragStart(e, filePath)}
+        onDragEnd={() => {
+          setDraggingFile(null);
+          setDragOverFolder(null);
+        }}
+        className={`group relative flex items-center gap-1 pr-1 py-0.5 rounded cursor-pointer ${
+          activeFile === filePath
+            ? "bg-amber-500/15 text-amber-200"
+            : 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 }}
+      >
+        {(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">{node.name}</span>
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            setOpenFileMenu((current) =>
+              current === filePath ? null : filePath,
+            );
+            setBulkMenuOpen(false);
+          }}
+          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"
+        >
+          ⋯
+        </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>
+    );
+  };
+
   return (
-    <div className="fixed inset-0 z-40 bg-black/40">
+    <div className="fixed inset-0 z-40 pointer-events-none">
       <div
-        className="absolute flex flex-col rounded-2xl border border-slate-800 bg-slate-950 shadow-2xl overflow-hidden"
+        className="absolute pointer-events-auto flex flex-col rounded-2xl border border-slate-800 bg-slate-950 shadow-2xl overflow-hidden"
         style={containerStyle}
       >
         {/* Resize handles */}
@@ -2021,155 +2259,7 @@ interface ImportMeta {
                   in workspace root • hold Option/Alt to copy
                 </div>
               )}
-              {grouped.map(({ folder, files }) => {
-                const collapsed = collapsedFolders.has(folder);
-                return (
-                  <div key={folder || "root"} className="mb-1">
-                    {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" />
-                        ) : (
-                          <ChevronDown className="w-3 h-3" />
-                        )}
-                        <Folder className="w-3 h-3" />
-                        <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}
-                          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"
-                              : 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();
-                              setOpenFileMenu((current) =>
-                                current === filePath ? null : filePath,
-                              );
-                              setBulkMenuOpen(false);
-                            }}
-                            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"
-                          >
-                            ⋯
-                          </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>
-                );
-              })}
+              {fileTree.map((node) => renderFileTreeNode(node, 0))}
             </div>
           </div>
 

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

@@ -10,6 +10,7 @@ import {
 import {
   AWS_GOVERNANCE_GHA_LAB,
   DEFAULT_GHA_LAB,
+  EMPTY_GITHUB_GHA_LAB,
   GOVERNANCE_GHA_LAB,
   parseGhaLabWorkspace,
   REACT_VITE_TYPESCRIPT_GHA_LAB,
@@ -693,6 +694,12 @@ export default function LabsPanel() {
             origin="github-actions"
             emptyText="Save a GitHub lab to reopen it here"
             newLabMenu={[
+              {
+                label: "Empty GitHub Template",
+                description:
+                  "Minimal repo with blank .github/workflows/ci.yml and CODEOWNERS files",
+                onClick: () => openGhaLab(EMPTY_GITHUB_GHA_LAB),
+              },
               {
                 label: "React Vite TypeScript Starter",
                 description:

package/template/client/src/githubActionsLab.ts

@@ -513,6 +513,11 @@ li {
 `,
 };
 
+const EMPTY_GITHUB_LAB_FILES: Record<string, string> = {
+  ".github/workflows/ci.yml": "",
+  ".github/CODEOWNERS": "",
+};
+
 // ─── Platform Governance Template ────────────────────────────────────────
 //
 // Mirrors a real-world "PLF-governance" mono-repo: one repo that owns
@@ -2435,6 +2440,15 @@ export const REACT_VITE_TYPESCRIPT_GHA_LAB: GithubActionsLabWorkspace = {
   files: REACT_VITE_TYPESCRIPT_FILES,
 };
 
+export const EMPTY_GITHUB_GHA_LAB: GithubActionsLabWorkspace = {
+  version: 1,
+  label: "Empty GitHub Lab Template",
+  activeFile: ".github/workflows/ci.yml",
+  defaultEvent: "push",
+  defaultWorkflow: ".github/workflows/ci.yml",
+  files: EMPTY_GITHUB_LAB_FILES,
+};
+
 // ─── Helpers (mirror infraLab.ts API surface) ────────────────────────────
 
 function cloneGhaLabEnvironment(

package/template/client/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/api.ts","./src/browsersecuritytemplates.ts","./src/enterpriselocallab.ts","./src/ghaconcurrency.ts","./src/githubactionslab.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/canvaslabmodal.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/diagramsmodal.tsx","./src/components/docrefmodal.tsx","./src/components/fileattachments.tsx","./src/components/filepickermodal.tsx","./src/components/fileviewermodal.tsx","./src/components/ghaconcurrencypanel.tsx","./src/components/ghahistorypanel.tsx","./src/components/ghajobspanel.tsx","./src/components/gitdiffpanel.tsx","./src/components/gitdiffviewermodal.tsx","./src/components/githubactionslabmodal.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"],"version":"5.9.3"}
+{"root":["./src/app.tsx","./src/api.ts","./src/awsgovernanceiamlab.ts","./src/browsersecuritytemplates.ts","./src/codeowners.ts","./src/enterpriselocallab.ts","./src/ghaconcurrency.ts","./src/githubactionslab.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/canvaslabmodal.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/diagramsmodal.tsx","./src/components/docrefmodal.tsx","./src/components/fileattachments.tsx","./src/components/filepickermodal.tsx","./src/components/fileviewermodal.tsx","./src/components/ghaconcurrencypanel.tsx","./src/components/ghahistorypanel.tsx","./src/components/ghajobspanel.tsx","./src/components/gitdiffpanel.tsx","./src/components/gitdiffviewermodal.tsx","./src/components/githubactionslabmodal.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/pullrequestpanel.tsx","./src/components/settingspanel.tsx","./src/components/sidebar.tsx","./src/components/textannotator.tsx","./src/components/vizcraftembed.tsx","./src/components/workspaceswitcher.tsx"],"version":"5.9.3"}

package/template/cockpit.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.29.0"
+  "version": "0.30.1"
 }