create-interview-cockpit 0.24.0 → 0.26.0

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

@@ -5,8 +5,14 @@ import {
   Eye,
   X,
   Check,
+  CheckSquare,
   ChevronDown,
   ChevronRight,
+  File,
+  Folder,
+  FolderOpen,
+  MinusSquare,
+  Square,
 } from "lucide-react";
 import { useStore } from "../store";
 import {
@@ -30,12 +36,265 @@ const STATUS_META: Record<string, { color: string; label: string }> = {
   "?": { color: "text-slate-400", label: "untracked" },
 };
 
+const DIFF_ROOT_SEPARATOR = "::";
+
+type DiffFileEntry = GitDiffTreeResponse["files"][number];
+
+interface DiffTreeNode {
+  name: string;
+  path: string;
+  children: DiffTreeNode[];
+  files: DiffFileEntry[];
+}
+
+function diffFileId(rootId: string | undefined, filePath: string): string {
+  return rootId ? `${rootId}${DIFF_ROOT_SEPARATOR}${filePath}` : filePath;
+}
+
+function parseDiffFileId(fileId: string) {
+  const idx = fileId.indexOf(DIFF_ROOT_SEPARATOR);
+  if (idx === -1) return { rootId: null, relativePath: fileId };
+  return {
+    rootId: fileId.slice(0, idx),
+    relativePath: fileId.slice(idx + DIFF_ROOT_SEPARATOR.length),
+  };
+}
+
+function normalizeDiffSelection(files: string[], rootId?: string): string[] {
+  if (!rootId) return files;
+  return files.map((file) => {
+    const parsed = parseDiffFileId(file);
+    return parsed.rootId ? file : diffFileId(rootId, file);
+  });
+}
+
+function buildDiffTree(files: DiffFileEntry[]): DiffTreeNode {
+  const root: DiffTreeNode = { name: "", path: "", children: [], files: [] };
+  for (const file of files) {
+    const parts = file.path.split("/");
+    let current = root;
+    let currentPath = "";
+    for (let i = 0; i < parts.length; i += 1) {
+      const part = parts[i];
+      const isFile = i === parts.length - 1;
+      currentPath = currentPath ? `${currentPath}/${part}` : part;
+      if (isFile) {
+        current.files.push(file);
+      } else {
+        let child = current.children.find(
+          (candidate) => candidate.name === part,
+        );
+        if (!child) {
+          child = { name: part, path: currentPath, children: [], files: [] };
+          current.children.push(child);
+        }
+        current = child;
+      }
+    }
+  }
+  return root;
+}
+
+function getAllDiffFilePaths(node: DiffTreeNode): string[] {
+  return [
+    ...node.files.map((file) => file.path),
+    ...node.children.flatMap(getAllDiffFilePaths),
+  ];
+}
+
+function DiffFileRow({
+  file,
+  rootId,
+  selected,
+  onToggleFile,
+  onViewFile,
+  depth,
+}: {
+  file: DiffFileEntry;
+  rootId?: string;
+  selected: string[];
+  onToggleFile: (path: string) => void;
+  onViewFile: (path: string) => void;
+  depth: number;
+}) {
+  const meta = STATUS_META[file.status] ?? STATUS_META.M;
+  const fileId = diffFileId(rootId, file.path);
+  const legacySelected = selected.includes(file.path);
+  const isSelected = selected.includes(fileId) || legacySelected;
+  return (
+    <div
+      className={`flex items-center gap-1 text-xs group rounded px-1 py-0.5 ${
+        isSelected ? "bg-cyan-500/10" : ""
+      }`}
+      style={{ paddingLeft: depth * 12 + 4 }}
+    >
+      <button
+        onClick={() => onToggleFile(file.path)}
+        className="shrink-0"
+        title={meta.label}
+      >
+        {isSelected ? (
+          <Check className="w-3 h-3 text-cyan-400" />
+        ) : (
+          <span
+            className={`w-3 h-3 inline-flex items-center justify-center text-[10px] font-mono ${meta.color}`}
+          >
+            {file.status}
+          </span>
+        )}
+      </button>
+      <button
+        onClick={() => onToggleFile(file.path)}
+        className={`flex items-center gap-1 flex-1 min-w-0 text-left truncate ${
+          isSelected ? "text-cyan-300" : "text-slate-400"
+        } hover:text-slate-200`}
+        title={file.oldPath ? `${file.oldPath} → ${file.path}` : file.path}
+      >
+        <File className="w-3 h-3 shrink-0 text-slate-600" />
+        <span className="truncate">{file.path.split("/").pop()}</span>
+      </button>
+      <span
+        className={`shrink-0 text-[10px] font-mono ${
+          file.binary ? "text-slate-600" : "text-slate-500"
+        }`}
+      >
+        {file.binary ? "bin" : `+${file.additions}/-${file.deletions}`}
+      </span>
+      <button
+        onClick={() => onViewFile(file.path)}
+        className="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-cyan-400 transition-all"
+        title="View diff"
+      >
+        <Eye className="w-3 h-3" />
+      </button>
+    </div>
+  );
+}
+
+function DiffFolderNode({
+  node,
+  rootId,
+  selected,
+  expandedFolders,
+  onToggleExpand,
+  onToggleFile,
+  onToggleFolder,
+  onViewFile,
+  depth,
+}: {
+  node: DiffTreeNode;
+  rootId?: string;
+  selected: string[];
+  expandedFolders: Set<string>;
+  onToggleExpand: (path: string) => void;
+  onToggleFile: (path: string) => void;
+  onToggleFolder: (paths: string[]) => void;
+  onViewFile: (path: string) => void;
+  depth: number;
+}) {
+  const folderKey = diffFileId(rootId, node.path);
+  const isExpanded = expandedFolders.has(folderKey);
+  const allPaths = getAllDiffFilePaths(node);
+  const allIds = allPaths.map((path) => diffFileId(rootId, path));
+  const selectedCount = allIds.filter((id) => selected.includes(id)).length;
+  const checkState: "none" | "some" | "all" =
+    selectedCount === 0
+      ? "none"
+      : selectedCount === allIds.length
+        ? "all"
+        : "some";
+  const CheckIcon =
+    checkState === "all"
+      ? CheckSquare
+      : checkState === "some"
+        ? MinusSquare
+        : Square;
+  const checkColor = checkState === "none" ? "text-slate-600" : "text-cyan-400";
+
+  return (
+    <div>
+      <div
+        className="flex items-center gap-1 text-xs group rounded px-1 py-0.5"
+        style={{ paddingLeft: depth * 12 + 4 }}
+      >
+        <button
+          onClick={() => onToggleExpand(folderKey)}
+          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(allPaths)}
+          className={`shrink-0 ${checkColor} hover:text-cyan-300`}
+          title="Select folder changes"
+        >
+          <CheckIcon className="w-3.5 h-3.5" />
+        </button>
+        {isExpanded ? (
+          <FolderOpen className="w-3 h-3 text-amber-500/70 shrink-0" />
+        ) : (
+          <Folder className="w-3 h-3 text-amber-500/70 shrink-0" />
+        )}
+        <button
+          onClick={() => onToggleExpand(folderKey)}
+          className="text-slate-400 hover:text-slate-200 truncate text-left flex-1"
+          title={node.path}
+        >
+          {node.name}
+        </button>
+        <span className="text-[10px] text-slate-600 shrink-0">
+          {selectedCount > 0 ? `${selectedCount}/` : ""}
+          {allIds.length}
+        </span>
+      </div>
+      {isExpanded && (
+        <div>
+          {node.children
+            .sort((a, b) => a.name.localeCompare(b.name))
+            .map((child) => (
+              <DiffFolderNode
+                key={child.path}
+                node={child}
+                rootId={rootId}
+                selected={selected}
+                expandedFolders={expandedFolders}
+                onToggleExpand={onToggleExpand}
+                onToggleFile={onToggleFile}
+                onToggleFolder={onToggleFolder}
+                onViewFile={onViewFile}
+                depth={depth + 1}
+              />
+            ))}
+          {node.files
+            .sort((a, b) => a.path.localeCompare(b.path))
+            .map((file) => (
+              <DiffFileRow
+                key={file.path}
+                file={file}
+                rootId={rootId}
+                selected={selected}
+                onToggleFile={onToggleFile}
+                onViewFile={onViewFile}
+                depth={depth + 1}
+              />
+            ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
 export default function GitDiffPanel() {
   const { currentQuestion, updateGitDiffContext } = useStore();
   const existing = currentQuestion?.gitDiffContext;
 
   const [expanded, setExpanded] = useState<boolean>(Boolean(existing));
   const [branches, setBranches] = useState<GitBranchesResponse | null>(null);
+  const [rootId, setRootId] = useState<string>(existing?.rootId || "");
   const [baseRef, setBaseRef] = useState<string>(existing?.baseRef || "");
   const [headRef, setHeadRef] = useState<string>(existing?.headRef || "");
   const [mode, setMode] = useState<GitDiffMode>(existing?.mode || "three-dot");
@@ -43,17 +302,25 @@ export default function GitDiffPanel() {
   const [loadingTree, setLoadingTree] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [selected, setSelected] = useState<string[]>(
-    existing?.selectedFiles || [],
+    normalizeDiffSelection(existing?.selectedFiles || [], existing?.rootId),
+  );
+  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(
+    () => new Set(),
   );
   const [viewingFile, setViewingFile] = useState<string | null>(null);
 
   // Reload selection when switching questions.
   useEffect(() => {
+    setRootId(existing?.rootId || "");
     setBaseRef(existing?.baseRef || "");
     setHeadRef(existing?.headRef || "");
     setMode(existing?.mode || "three-dot");
-    setSelected(existing?.selectedFiles || []);
+    setSelected(
+      normalizeDiffSelection(existing?.selectedFiles || [], existing?.rootId),
+    );
+    setBranches(null);
     setTree(null);
+    setExpandedFolders(new Set());
   }, [currentQuestion?.id]);
 
   const applyBranchDefaults = useCallback(
@@ -84,20 +351,17 @@ export default function GitDiffPanel() {
     [selected.length],
   );
 
-  // Lazy-load branches the first time the section is opened.
+  // Lazy-load branches for the active diff source root.
   useEffect(() => {
-    if (!expanded) return;
-    if (branches) {
-      applyBranchDefaults(branches);
-      return;
-    }
-    fetchGitBranches()
+    if (!expanded || !currentQuestion) return;
+    fetchGitBranches({ rootId: rootId || undefined })
       .then((b) => {
         setBranches(b);
+        setRootId((prev) => prev || b.rootId || b.roots?.[0]?.id || "");
         applyBranchDefaults(b);
       })
       .catch((e) => setError(e?.message || "Failed to load branches"));
-  }, [expanded, branches, applyBranchDefaults]);
+  }, [expanded, currentQuestion?.id, rootId]);
 
   const loadTree = useCallback(async () => {
     if (!baseRef) return;
@@ -105,18 +369,22 @@ export default function GitDiffPanel() {
     setError(null);
     try {
       const data = await fetchGitDiffTree({
+        rootId: rootId || branches?.rootId,
         base: baseRef,
         head: mode === "working-tree" ? "" : headRef,
         mode,
       });
       setTree(data);
+      const nextRootId = data.rootId || rootId || branches?.rootId;
+      setSelected((prev) => normalizeDiffSelection(prev, nextRootId));
+      setExpandedFolders(new Set());
     } catch (e: any) {
       setTree(null);
       setError(e?.message || "Failed to load diff");
     } finally {
       setLoadingTree(false);
     }
-  }, [baseRef, headRef, mode]);
+  }, [rootId, branches?.rootId, baseRef, headRef, mode]);
 
   // Auto-load when refs/mode change and the section is open.
   useEffect(() => {
@@ -124,12 +392,15 @@ export default function GitDiffPanel() {
     if (!baseRef) return;
     if (mode !== "working-tree" && !headRef) return;
     loadTree();
-  }, [expanded, baseRef, headRef, mode]);
+  }, [expanded, baseRef, headRef, mode, loadTree]);
+
+  const activeRootId = tree?.rootId || rootId || branches?.rootId || "";
 
   const persist = useCallback(
     (next: Partial<GitDiffContext>) => {
       if (!currentQuestion) return;
       const ctx: GitDiffContext = {
+        rootId: activeRootId,
         baseRef,
         headRef: mode === "working-tree" ? "" : headRef,
         mode,
@@ -143,20 +414,68 @@ export default function GitDiffPanel() {
         updateGitDiffContext(currentQuestion.id, ctx);
       }
     },
-    [currentQuestion, baseRef, headRef, mode, selected, updateGitDiffContext],
+    [
+      currentQuestion,
+      activeRootId,
+      baseRef,
+      headRef,
+      mode,
+      selected,
+      updateGitDiffContext,
+    ],
   );
 
   const toggleFile = useCallback(
     (filePath: string) => {
+      const id = diffFileId(activeRootId, filePath);
+      setSelected((prev) => {
+        const isSelected = prev.includes(id) || prev.includes(filePath);
+        const next = isSelected
+          ? prev.filter((f) => f !== id && f !== filePath)
+          : [...prev, id];
+        persist({ rootId: activeRootId, selectedFiles: next });
+        return next;
+      });
+    },
+    [activeRootId, persist],
+  );
+
+  const toggleFolder = useCallback(
+    (paths: string[]) => {
+      const ids = paths.map((path) => diffFileId(activeRootId, path));
       setSelected((prev) => {
-        const next = prev.includes(filePath)
-          ? prev.filter((f) => f !== filePath)
-          : [...prev, filePath];
-        persist({ selectedFiles: next });
+        const allSelected = ids.every((id) => prev.includes(id));
+        const next = allSelected
+          ? prev.filter((file) => !ids.includes(file) && !paths.includes(file))
+          : Array.from(new Set([...prev, ...ids]));
+        persist({ rootId: activeRootId, selectedFiles: next });
         return next;
       });
     },
-    [persist],
+    [activeRootId, persist],
+  );
+
+  const toggleExpand = useCallback((path: string) => {
+    setExpandedFolders((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) next.delete(path);
+      else next.add(path);
+      return next;
+    });
+  }, []);
+
+  const changeRoot = useCallback(
+    (nextRootId: string) => {
+      setRootId(nextRootId);
+      setBranches(null);
+      setBaseRef("");
+      setHeadRef("");
+      setTree(null);
+      setSelected([]);
+      setExpandedFolders(new Set());
+      if (currentQuestion) updateGitDiffContext(currentQuestion.id, null);
+    },
+    [currentQuestion, updateGitDiffContext],
   );
 
   const clearSelection = useCallback(() => {
@@ -166,6 +485,8 @@ export default function GitDiffPanel() {
 
   const branchOptions = branches?.branches ?? [];
   const tagOptions = branches?.tags ?? [];
+  const rootOptions = branches?.roots ?? [];
+  const diffTree = tree ? buildDiffTree(tree.files) : null;
 
   return (
     <div className="border-t border-slate-800">
@@ -192,10 +513,29 @@ export default function GitDiffPanel() {
             </p>
           )}
 
+          {currentQuestion && rootOptions.length > 1 && (
+            <div className="space-y-1">
+              <label className="block text-[10px] uppercase tracking-wider text-slate-600">
+                Source
+              </label>
+              <select
+                value={activeRootId}
+                onChange={(e) => changeRoot(e.target.value)}
+                className="w-full bg-slate-800 border border-slate-700 rounded px-2 py-1 text-xs text-slate-300"
+              >
+                {rootOptions.map((root) => (
+                  <option key={root.id} value={root.id}>
+                    {root.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+
           {currentQuestion && branches && !branches.enabled && (
             <p className="text-[10px] text-slate-600 italic">
-              Set <code>GIT_DIFF_DIR</code> (or <code>CODE_CONTEXT_DIR</code>)
-              to a git repo to enable diffs.
+              Set <code>GIT_DIFF_DIR</code>, <code>GIT_DIFF_DIRS</code>, or a
+              git-backed <code>CODE_CONTEXT_DIR</code> to enable diffs.
               {branches.error ? ` (${branches.error})` : ""}
             </p>
           )}
@@ -272,64 +612,53 @@ export default function GitDiffPanel() {
 
               {tree && (
                 <div className="space-y-0.5 max-h-72 overflow-y-auto border-t border-slate-800 pt-2">
+                  {tree.rootName && (
+                    <div className="text-[10px] text-slate-600 px-1 pb-1 truncate">
+                      {tree.rootName} · {tree.base}{" "}
+                      {tree.mode === "two-dot"
+                        ? ".."
+                        : tree.mode === "working-tree"
+                          ? "→"
+                          : "..."}{" "}
+                      {tree.mode === "working-tree"
+                        ? "working tree"
+                        : tree.head}
+                    </div>
+                  )}
                   {tree.files.length === 0 && (
                     <p className="text-[10px] text-slate-600 italic">
                       No changes between these refs.
                     </p>
                   )}
-                  {tree.files.map((f) => {
-                    const meta = STATUS_META[f.status] ?? STATUS_META["M"];
-                    const isSelected = selected.includes(f.path);
-                    return (
-                      <div
-                        key={f.path}
-                        className={`flex items-center gap-1 text-xs group rounded px-1 py-0.5 ${
-                          isSelected ? "bg-cyan-500/10" : ""
-                        }`}
-                      >
-                        <button
-                          onClick={() => toggleFile(f.path)}
-                          className="shrink-0"
-                          title={meta.label}
-                        >
-                          {isSelected ? (
-                            <Check className="w-3 h-3 text-cyan-400" />
-                          ) : (
-                            <span
-                              className={`w-3 h-3 inline-flex items-center justify-center text-[10px] font-mono ${meta.color}`}
-                            >
-                              {f.status}
-                            </span>
-                          )}
-                        </button>
-                        <button
-                          onClick={() => toggleFile(f.path)}
-                          className={`flex-1 min-w-0 text-left truncate ${
-                            isSelected ? "text-cyan-300" : "text-slate-400"
-                          } hover:text-slate-200`}
-                          title={
-                            f.oldPath ? `${f.oldPath} → ${f.path}` : f.path
-                          }
-                        >
-                          {f.path}
-                        </button>
-                        <span
-                          className={`shrink-0 text-[10px] font-mono ${
-                            f.binary ? "text-slate-600" : "text-slate-500"
-                          }`}
-                        >
-                          {f.binary ? "bin" : `+${f.additions}/-${f.deletions}`}
-                        </span>
-                        <button
-                          onClick={() => setViewingFile(f.path)}
-                          className="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-cyan-400 transition-all"
-                          title="View diff"
-                        >
-                          <Eye className="w-3 h-3" />
-                        </button>
-                      </div>
-                    );
-                  })}
+                  {diffTree?.children
+                    .sort((a, b) => a.name.localeCompare(b.name))
+                    .map((child) => (
+                      <DiffFolderNode
+                        key={child.path}
+                        node={child}
+                        rootId={tree.rootId || activeRootId}
+                        selected={selected}
+                        expandedFolders={expandedFolders}
+                        onToggleExpand={toggleExpand}
+                        onToggleFile={toggleFile}
+                        onToggleFolder={toggleFolder}
+                        onViewFile={setViewingFile}
+                        depth={0}
+                      />
+                    ))}
+                  {diffTree?.files
+                    .sort((a, b) => a.path.localeCompare(b.path))
+                    .map((file) => (
+                      <DiffFileRow
+                        key={file.path}
+                        file={file}
+                        rootId={tree.rootId || activeRootId}
+                        selected={selected}
+                        onToggleFile={toggleFile}
+                        onViewFile={setViewingFile}
+                        depth={0}
+                      />
+                    ))}
                   {tree.truncated && (
                     <p className="text-[10px] text-amber-400/70 mt-1">
                       Truncated — too many changed files.
@@ -345,6 +674,7 @@ export default function GitDiffPanel() {
       {viewingFile && baseRef && (mode === "working-tree" || headRef) && (
         <GitDiffViewerModal
           ctx={{
+            rootId: activeRootId,
             baseRef,
             headRef: mode === "working-tree" ? "" : headRef,
             mode,

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

@@ -25,6 +25,7 @@ export default function GitDiffViewerModal({ ctx, filePath, onClose }: Props) {
     setLoading(true);
     setError(null);
     fetchGitDiffFile({
+      rootId: ctx.rootId,
       base: ctx.baseRef,
       head: ctx.headRef,
       mode: ctx.mode,
@@ -43,7 +44,7 @@ export default function GitDiffViewerModal({ ctx, filePath, onClose }: Props) {
     return () => {
       cancelled = true;
     };
-  }, [ctx.baseRef, ctx.headRef, ctx.mode, filePath, view]);
+  }, [ctx.rootId, ctx.baseRef, ctx.headRef, ctx.mode, filePath, view]);
 
   const language =
     view === "patch"

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

@@ -489,7 +489,14 @@ export default function MarkdownRenderer({
           );
         }
         if (href?.startsWith("coderef://")) {
-          const filePath = href.slice("coderef://".length);
+          const rawFilePath = href.slice("coderef://".length);
+          const filePath = (() => {
+            try {
+              return decodeURIComponent(rawFilePath);
+            } catch {
+              return rawFilePath;
+            }
+          })();
           return (
             <button
               type="button"

package/template/client/src/store.ts

@@ -8,6 +8,7 @@ import type {
   FrontendLabWorkspace,
   GithubActionsLabWorkspace,
   ContextFileOrigin,
+  CodeContextRoot,
 } from "./types";
 import type { AiSettings } from "./api";
 import * as api from "./api";
@@ -99,6 +100,12 @@ const DEFAULT_AI_SETTINGS: AiSettings = {
   },
 };
 
+const CODE_CONTEXT_ROOT_SEPARATOR = "::";
+
+function codeContextFileId(rootId: string, filePath: string): string {
+  return `${rootId}${CODE_CONTEXT_ROOT_SEPARATOR}${filePath}`;
+}
+
 interface Store {
   topics: Topic[];
   questionsByTopic: Record<string, Question[]>;
@@ -106,6 +113,7 @@ interface Store {
   selectedQuestionId: string | null;
   currentQuestion: Question | null;
   expandedTopics: string[];
+  codeContextRoots: CodeContextRoot[];
   availableFiles: string[];
   showCodePanel: boolean;
   showLabsPanel: boolean;
@@ -388,6 +396,7 @@ export const useStore = create<Store>((set, get) => ({
   selectedQuestionId: null,
   currentQuestion: null,
   expandedTopics: [],
+  codeContextRoots: [],
   availableFiles: [],
   showCodePanel: false,
   showLabsPanel: false,
@@ -821,8 +830,14 @@ export const useStore = create<Store>((set, get) => ({
   },
 
   fetchAvailableFiles: async () => {
-    const files = await api.fetchCodeContextTree();
-    set({ availableFiles: files });
+    const tree = await api.fetchCodeContextTree();
+    const roots = tree.roots || [];
+    set({
+      codeContextRoots: roots,
+      availableFiles: roots.flatMap((root) =>
+        root.files.map((file) => codeContextFileId(root.id, file)),
+      ),
+    });
   },
 
   updateCodeContext: async (questionId, files) => {