create-interview-cockpit 0.24.0 → 0.26.0

package/package.json

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

package/template/client/src/api.ts

@@ -740,15 +740,26 @@ export async function streamFrontendLabAsk(
 
 // --- Code Context ---
 
-export async function fetchCodeContextTree(): Promise<string[]> {
+export interface CodeContextTreeResponse {
+  roots: import("./types").CodeContextRoot[];
+}
+
+export async function fetchCodeContextTree(): Promise<CodeContextTreeResponse> {
   const res = await fetch(`${BASE}/code-context/tree`);
-  return res.json();
+  const data = await res.json();
+  if (Array.isArray(data)) {
+    return { roots: [{ id: "default", name: "Code Context", files: data }] };
+  }
+  return { roots: Array.isArray(data?.roots) ? data.roots : [] };
 }
 
 // --- Git Diff Context ---
 
 export interface GitBranchesResponse {
   enabled: boolean;
+  rootId?: string;
+  rootName?: string;
+  roots?: Array<{ id: string; name: string; path?: string }>;
   head?: string;
   defaultBranch?: string;
   branches: string[];
@@ -757,6 +768,8 @@ export interface GitBranchesResponse {
 }
 
 export interface GitDiffTreeResponse {
+  rootId?: string;
+  rootName?: string;
   base: string;
   baseSha?: string;
   head: string;
@@ -773,12 +786,18 @@ export interface GitDiffTreeResponse {
   }>;
 }
 
-export async function fetchGitBranches(): Promise<GitBranchesResponse> {
-  const res = await fetch(`${BASE}/code-context/git/branches`);
+export async function fetchGitBranches(params?: {
+  rootId?: string;
+}): Promise<GitBranchesResponse> {
+  const qs = new URLSearchParams();
+  if (params?.rootId) qs.set("root", params.rootId);
+  const suffix = qs.toString() ? `?${qs}` : "";
+  const res = await fetch(`${BASE}/code-context/git/branches${suffix}`);
   return res.json();
 }
 
 export async function fetchGitDiffTree(params: {
+  rootId?: string;
   base: string;
   head: string;
   mode: "two-dot" | "three-dot" | "working-tree";
@@ -788,12 +807,14 @@ export async function fetchGitDiffTree(params: {
     head: params.head,
     mode: params.mode,
   });
+  if (params.rootId) qs.set("root", params.rootId);
   const res = await fetch(`${BASE}/code-context/git/diff-tree?${qs}`);
   if (!res.ok) throw new Error((await res.json()).error || "diff-tree failed");
   return res.json();
 }
 
 export async function fetchGitDiffFile(params: {
+  rootId?: string;
   base: string;
   head: string;
   mode: "two-dot" | "three-dot" | "working-tree";
@@ -807,6 +828,7 @@ export async function fetchGitDiffFile(params: {
     path: params.path,
     view: params.view,
   });
+  if (params.rootId) qs.set("root", params.rootId);
   const res = await fetch(`${BASE}/code-context/git/diff-file?${qs}`);
   if (!res.ok) throw new Error((await res.json()).error || "diff-file failed");
   return res.json();

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

@@ -1103,8 +1103,29 @@ function ContextSummary({
   questionFileCount: number;
   codeContextFiles: string[];
 }) {
-  const { openFileViewer } = useStore();
+  const { openFileViewer, codeContextRoots } = useStore();
   const [expanded, setExpanded] = useState(false);
+  const formatCodeFileLabel = (fileId: string) => {
+    const sep = "::";
+    const idx = fileId.indexOf(sep);
+    const rootId = idx === -1 ? null : fileId.slice(0, idx);
+    const relativePath = idx === -1 ? fileId : fileId.slice(idx + sep.length);
+    const root = rootId
+      ? codeContextRoots.find((candidate) => candidate.id === rootId)
+      : codeContextRoots[0];
+    const fileName = relativePath.split("/").pop() ?? relativePath;
+    return root ? `${root.name} › ${fileName}` : fileName;
+  };
+  const formatCodeFileTitle = (fileId: string) => {
+    const sep = "::";
+    const idx = fileId.indexOf(sep);
+    const rootId = idx === -1 ? null : fileId.slice(0, idx);
+    const relativePath = idx === -1 ? fileId : fileId.slice(idx + sep.length);
+    const root = rootId
+      ? codeContextRoots.find((candidate) => candidate.id === rootId)
+      : codeContextRoots[0];
+    return root ? `${root.name}/${relativePath}` : relativePath;
+  };
   const VISIBLE_COUNT = 2;
   const visibleFiles = expanded
     ? codeContextFiles
@@ -1128,10 +1149,10 @@ function ContextSummary({
         <button
           key={f}
           onClick={() => openFileViewer(f)}
-          title={f}
+          title={formatCodeFileTitle(f)}
           className="bg-slate-800 hover:bg-slate-700 hover:text-slate-300 px-1.5 py-0.5 rounded transition-colors cursor-pointer"
         >
-          {f.split("/").pop()}
+          {formatCodeFileLabel(f)}
         </button>
       ))}
       {!expanded && hiddenCount > 0 && (

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

@@ -1,5 +1,6 @@
 import { useEffect, useState, useCallback } from "react";
 import { useStore } from "../store";
+import type { CodeContextRoot } from "../types";
 import FileViewerModal from "./FileViewerModal";
 import NotesModal, { notesKey } from "./NotesModal";
 import GitDiffPanel from "./GitDiffPanel";
@@ -35,6 +36,55 @@ interface TreeNode {
   files: string[]; // full file paths that are direct children
 }
 
+const CODE_CONTEXT_ROOT_SEPARATOR = "::";
+
+function codeContextFileId(rootId: string, filePath: string): string {
+  return `${rootId}${CODE_CONTEXT_ROOT_SEPARATOR}${filePath}`;
+}
+
+function parseCodeContextFileId(fileId: string) {
+  const idx = fileId.indexOf(CODE_CONTEXT_ROOT_SEPARATOR);
+  if (idx === -1) return { rootId: null, relativePath: fileId };
+  return {
+    rootId: fileId.slice(0, idx),
+    relativePath: fileId.slice(idx + CODE_CONTEXT_ROOT_SEPARATOR.length),
+  };
+}
+
+function normalizeSelectedCodeFiles(
+  files: string[],
+  roots: CodeContextRoot[],
+): string[] {
+  if (roots.length === 0) return files;
+  const rootIds = new Set(roots.map((root) => root.id));
+  const primaryRoot = roots[0];
+  return files.map((file) => {
+    const parsed = parseCodeContextFileId(file);
+    if (parsed.rootId && rootIds.has(parsed.rootId)) return file;
+    if (primaryRoot?.files.includes(file)) {
+      return codeContextFileId(primaryRoot.id, file);
+    }
+    return file;
+  });
+}
+
+function codeContextDisplayPath(fileId: string, roots: CodeContextRoot[]) {
+  const parsed = parseCodeContextFileId(fileId);
+  const root = parsed.rootId
+    ? roots.find((candidate) => candidate.id === parsed.rootId)
+    : roots[0];
+  return root ? `${root.name}/${parsed.relativePath}` : parsed.relativePath;
+}
+
+function codeContextShortLabel(fileId: string, roots: CodeContextRoot[]) {
+  const parsed = parseCodeContextFileId(fileId);
+  const root = parsed.rootId
+    ? roots.find((candidate) => candidate.id === parsed.rootId)
+    : roots[0];
+  const fileName = parsed.relativePath.split("/").pop() ?? parsed.relativePath;
+  return root ? `${root.name} › ${fileName}` : fileName;
+}
+
 function buildTree(paths: string[]): TreeNode {
   const root: TreeNode = { name: "", path: "", children: [], files: [] };
 
@@ -70,6 +120,7 @@ function getAllFiles(node: TreeNode): string[] {
 // ─── Folder node component ──────────────────────────────
 
 interface FolderNodeProps {
+  rootId: string;
   node: TreeNode;
   selectedFiles: string[];
   onToggleFile: (path: string) => void;
@@ -82,6 +133,7 @@ interface FolderNodeProps {
 }
 
 function FolderNode({
+  rootId,
   node,
   selectedFiles,
   onToggleFile,
@@ -93,10 +145,12 @@ function FolderNode({
   onOpenFile,
 }: FolderNodeProps) {
   const allFiles = getAllFiles(node);
+  const allFileIds = allFiles.map((file) => codeContextFileId(rootId, file));
   const selectedCount = allFiles.filter((f) =>
-    selectedFiles.includes(f),
+    selectedFiles.includes(codeContextFileId(rootId, f)),
   ).length;
-  const isExpanded = expandedFolders.has(node.path);
+  const folderKey = codeContextFileId(rootId, node.path);
+  const isExpanded = expandedFolders.has(folderKey);
 
   // Filter: if searching, only show nodes that have matching files
   const matchingFiles = filter
@@ -130,7 +184,7 @@ function FolderNode({
         style={{ paddingLeft: `${depth * 12 + 4}px` }}
       >
         <button
-          onClick={() => onToggleExpand(node.path)}
+          onClick={() => onToggleExpand(folderKey)}
           className="shrink-0 text-slate-500 hover:text-slate-300"
         >
           {isExpanded ? (
@@ -140,7 +194,7 @@ function FolderNode({
           )}
         </button>
         <button
-          onClick={() => onToggleFolder(allFiles)}
+          onClick={() => onToggleFolder(allFileIds)}
           className={`shrink-0 ${checkColor} hover:text-cyan-300`}
         >
           <CheckIcon className="w-3.5 h-3.5" />
@@ -151,7 +205,7 @@ function FolderNode({
           <Folder className="w-3 h-3 text-amber-500/70 shrink-0" />
         )}
         <button
-          onClick={() => onToggleExpand(node.path)}
+          onClick={() => onToggleExpand(folderKey)}
           className="text-xs text-slate-400 hover:text-slate-200 truncate text-left flex-1"
         >
           {node.name}
@@ -170,6 +224,7 @@ function FolderNode({
             .map((child) => (
               <FolderNode
                 key={child.path}
+                rootId={rootId}
                 node={child}
                 selectedFiles={selectedFiles}
                 onToggleFile={onToggleFile}
@@ -184,7 +239,8 @@ function FolderNode({
           {matchingFiles
             .sort((a, b) => a.localeCompare(b))
             .map((filePath) => {
-              const isSelected = selectedFiles.includes(filePath);
+              const fileId = codeContextFileId(rootId, filePath);
+              const isSelected = selectedFiles.includes(fileId);
               const fileName = filePath.split("/").pop()!;
               return (
                 <div
@@ -195,14 +251,164 @@ function FolderNode({
                   style={{ paddingLeft: `${(depth + 1) * 12 + 4 + 14}px` }}
                 >
                   <button
-                    onClick={() => onToggleFile(filePath)}
+                    onClick={() => onToggleFile(fileId)}
                     className="flex items-center gap-1 flex-1 min-w-0 hover:text-slate-300 transition-colors text-xs text-left"
                   >
                     <File className="w-3 h-3 shrink-0" />
                     <span className="truncate">{fileName}</span>
                   </button>
                   <button
-                    onClick={() => onOpenFile(filePath)}
+                    onClick={() => onOpenFile(fileId)}
+                    className="shrink-0 mr-1 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-cyan-400 transition-all"
+                    title="View file"
+                  >
+                    <Eye className="w-3 h-3" />
+                  </button>
+                </div>
+              );
+            })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface CodeContextRootNodeProps {
+  root: CodeContextRoot;
+  selectedFiles: string[];
+  onToggleFile: (path: string) => void;
+  onToggleFolder: (paths: string[]) => void;
+  expandedFolders: Set<string>;
+  onToggleExpand: (path: string) => void;
+  filter: string;
+  onOpenFile: (path: string) => void;
+}
+
+function CodeContextRootNode({
+  root,
+  selectedFiles,
+  onToggleFile,
+  onToggleFolder,
+  expandedFolders,
+  onToggleExpand,
+  filter,
+  onOpenFile,
+}: CodeContextRootNodeProps) {
+  const tree = buildTree(root.files);
+  const rootKey = `root${CODE_CONTEXT_ROOT_SEPARATOR}${root.id}`;
+  const rootFileIds = root.files.map((file) =>
+    codeContextFileId(root.id, file),
+  );
+  const selectedCount = rootFileIds.filter((fileId) =>
+    selectedFiles.includes(fileId),
+  ).length;
+  const rootMatches = filter ? root.name.toLowerCase().includes(filter) : false;
+  const effectiveFilter = rootMatches ? "" : filter;
+  const hasMatchingDescendants = filter
+    ? rootMatches ||
+      root.files.some((file) => file.toLowerCase().includes(filter))
+    : true;
+  if (filter && !hasMatchingDescendants) return null;
+
+  const isExpanded = rootMatches || expandedFolders.has(rootKey);
+  const checkState: "none" | "some" | "all" =
+    selectedCount === 0 || rootFileIds.length === 0
+      ? "none"
+      : selectedCount === rootFileIds.length
+        ? "all"
+        : "some";
+  const CheckIcon =
+    checkState === "all"
+      ? CheckSquare
+      : checkState === "some"
+        ? MinusSquare
+        : Square;
+  const checkColor = checkState === "none" ? "text-slate-600" : "text-cyan-400";
+
+  return (
+    <div className="border-b border-slate-800/60 last:border-b-0">
+      <div className="flex items-center gap-0.5 py-1 cursor-pointer group px-1">
+        <button
+          onClick={() => onToggleExpand(rootKey)}
+          className="shrink-0 text-slate-500 hover:text-slate-300"
+        >
+          {isExpanded ? (
+            <ChevronDown className="w-3 h-3" />
+          ) : (
+            <ChevronRight className="w-3 h-3" />
+          )}
+        </button>
+        <button
+          onClick={() => onToggleFolder(rootFileIds)}
+          className={`shrink-0 ${checkColor} hover:text-cyan-300`}
+          title={`Select all files in ${root.name}`}
+        >
+          <CheckIcon className="w-3.5 h-3.5" />
+        </button>
+        {isExpanded ? (
+          <FolderOpen className="w-3 h-3 text-cyan-500/70 shrink-0" />
+        ) : (
+          <Folder className="w-3 h-3 text-cyan-500/70 shrink-0" />
+        )}
+        <button
+          onClick={() => onToggleExpand(rootKey)}
+          className="text-xs font-semibold text-slate-300 hover:text-slate-100 truncate text-left flex-1"
+          title={root.name}
+        >
+          {root.name}
+        </button>
+        <span className="text-[10px] text-slate-600 shrink-0 mr-1">
+          {selectedCount > 0 ? `${selectedCount}/` : ""}
+          {root.files.length}
+        </span>
+      </div>
+
+      {isExpanded && (
+        <div className="pb-1">
+          {tree.children
+            .sort((a, b) => a.name.localeCompare(b.name))
+            .map((child) => (
+              <FolderNode
+                key={`${root.id}:${child.path}`}
+                rootId={root.id}
+                node={child}
+                selectedFiles={selectedFiles}
+                onToggleFile={onToggleFile}
+                onToggleFolder={onToggleFolder}
+                expandedFolders={expandedFolders}
+                onToggleExpand={onToggleExpand}
+                depth={1}
+                filter={effectiveFilter}
+                onOpenFile={onOpenFile}
+              />
+            ))}
+          {tree.files
+            .filter(
+              (file) =>
+                !effectiveFilter ||
+                file.toLowerCase().includes(effectiveFilter),
+            )
+            .sort((a, b) => a.localeCompare(b))
+            .map((filePath) => {
+              const fileId = codeContextFileId(root.id, filePath);
+              const isSelected = selectedFiles.includes(fileId);
+              return (
+                <div
+                  key={fileId}
+                  className={`flex items-center py-0.5 group ${
+                    isSelected ? "text-cyan-400" : "text-slate-500"
+                  }`}
+                  style={{ paddingLeft: 30 }}
+                >
+                  <button
+                    onClick={() => onToggleFile(fileId)}
+                    className="flex items-center gap-1.5 flex-1 min-w-0 hover:text-slate-300 transition-colors text-xs text-left"
+                  >
+                    <File className="w-3 h-3 shrink-0" />
+                    <span className="truncate">{filePath}</span>
+                  </button>
+                  <button
+                    onClick={() => onOpenFile(fileId)}
                     className="shrink-0 mr-1 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-cyan-400 transition-all"
                     title="View file"
                   >
@@ -222,6 +428,7 @@ function FolderNode({
 export default function CodeContextPanel() {
   const {
     availableFiles,
+    codeContextRoots,
     currentQuestion,
     fetchAvailableFiles,
     updateCodeContext,
@@ -263,10 +470,17 @@ export default function CodeContextPanel() {
   }, []);
 
   useEffect(() => {
-    setSelectedFiles(currentQuestion?.codeContextFiles || []);
-  }, [currentQuestion?.id]);
-
-  const tree = buildTree(availableFiles);
+    setSelectedFiles(
+      normalizeSelectedCodeFiles(
+        currentQuestion?.codeContextFiles || [],
+        codeContextRoots,
+      ),
+    );
+  }, [
+    currentQuestion?.id,
+    currentQuestion?.codeContextFiles,
+    codeContextRoots,
+  ]);
 
   const toggleFile = useCallback(
     (filePath: string) => {
@@ -432,9 +646,9 @@ export default function CodeContextPanel() {
                   <button
                     onClick={() => setViewingFile(f)}
                     className="truncate flex-1 text-left hover:underline"
-                    title="View file"
+                    title={codeContextDisplayPath(f, codeContextRoots)}
                   >
-                    {f.split("/").pop()}
+                    {codeContextShortLabel(f, codeContextRoots)}
                   </button>
                   <button
                     onClick={() => toggleFile(f)}
@@ -457,59 +671,27 @@ export default function CodeContextPanel() {
           ) : availableFiles.length === 0 ? (
             <div className="p-3 text-center">
               <p className="text-xs text-slate-600">
-                Set CODE_CONTEXT_DIR in .env
+                Set CODE_CONTEXT_DIR or CODE_CONTEXT_DIRS in .env
               </p>
               <p className="text-xs text-slate-700 mt-1">
                 to browse project files
               </p>
             </div>
           ) : (
-            tree.children
-              .sort((a, b) => a.name.localeCompare(b.name))
-              .map((child) => (
-                <FolderNode
-                  key={child.path}
-                  node={child}
-                  selectedFiles={selectedFiles}
-                  onToggleFile={toggleFile}
-                  onToggleFolder={toggleFolder}
-                  expandedFolders={expandedFolders}
-                  onToggleExpand={toggleExpand}
-                  depth={0}
-                  filter={filter}
-                  onOpenFile={setViewingFile}
-                />
-              ))
+            codeContextRoots.map((root) => (
+              <CodeContextRootNode
+                key={root.id}
+                root={root}
+                selectedFiles={selectedFiles}
+                onToggleFile={toggleFile}
+                onToggleFolder={toggleFolder}
+                expandedFolders={expandedFolders}
+                onToggleExpand={toggleExpand}
+                filter={filter}
+                onOpenFile={setViewingFile}
+              />
+            ))
           )}
-          {/* Root-level files (if any) */}
-          {tree.files
-            .filter((f) => !filter || f.toLowerCase().includes(filter))
-            .map((filePath) => {
-              const isSelected = selectedFiles.includes(filePath);
-              return (
-                <div
-                  key={filePath}
-                  className={`flex items-center px-4 py-0.5 group ${
-                    isSelected ? "text-cyan-400" : "text-slate-500"
-                  }`}
-                >
-                  <button
-                    onClick={() => toggleFile(filePath)}
-                    className="flex items-center gap-1.5 flex-1 min-w-0 hover:text-slate-300 transition-colors text-xs text-left"
-                  >
-                    <File className="w-3 h-3 shrink-0" />
-                    <span className="truncate">{filePath}</span>
-                  </button>
-                  <button
-                    onClick={() => setViewingFile(filePath)}
-                    className="shrink-0 mr-1 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-cyan-400 transition-all"
-                    title="View file"
-                  >
-                    <Eye className="w-3 h-3" />
-                  </button>
-                </div>
-              );
-            })}
         </div>
 
         {/* ── My Code section ─────────────────────────────────── */}