create-interview-cockpit 0.20.0 → 0.22.0

package/package.json

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

package/template/client/src/api.ts

@@ -743,6 +743,73 @@ export async function fetchCodeContextTree(): Promise<string[]> {
   return res.json();
 }
 
+// --- Git Diff Context ---
+
+export interface GitBranchesResponse {
+  enabled: boolean;
+  head?: string;
+  defaultBranch?: string;
+  branches: string[];
+  tags?: string[];
+  error?: string;
+}
+
+export interface GitDiffTreeResponse {
+  base: string;
+  baseSha?: string;
+  head: string;
+  headSha?: string | null;
+  mode: "two-dot" | "three-dot" | "working-tree";
+  truncated: boolean;
+  files: Array<{
+    path: string;
+    oldPath?: string;
+    status: "A" | "M" | "D" | "R" | "C" | "T" | "U" | "?";
+    additions: number;
+    deletions: number;
+    binary: boolean;
+  }>;
+}
+
+export async function fetchGitBranches(): Promise<GitBranchesResponse> {
+  const res = await fetch(`${BASE}/code-context/git/branches`);
+  return res.json();
+}
+
+export async function fetchGitDiffTree(params: {
+  base: string;
+  head: string;
+  mode: "two-dot" | "three-dot" | "working-tree";
+}): Promise<GitDiffTreeResponse> {
+  const qs = new URLSearchParams({
+    base: params.base,
+    head: params.head,
+    mode: params.mode,
+  });
+  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: {
+  base: string;
+  head: string;
+  mode: "two-dot" | "three-dot" | "working-tree";
+  path: string;
+  view: "patch" | "before" | "after";
+}): Promise<{ path: string; view: string; content: string }> {
+  const qs = new URLSearchParams({
+    base: params.base,
+    head: params.head,
+    mode: params.mode,
+    path: params.path,
+    view: params.view,
+  });
+  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();
+}
+
 // --- Workspaces ---
 
 export async function fetchWorkspaces(): Promise<WorkspacesRegistry> {

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

@@ -411,6 +411,7 @@ export default function ChatView({ question }: Props) {
     topicTitle: "",
     questionTitle: question.title,
     codeContextFiles: question.codeContextFiles,
+    gitDiffContext: question.gitDiffContext,
     systemContext,
     responseLength: "normal" as string,
     groupSelections,
@@ -429,6 +430,7 @@ export default function ChatView({ question }: Props) {
     topicTitle: currentTopic?.name || "",
     questionTitle: question.title,
     codeContextFiles: question.codeContextFiles,
+    gitDiffContext: question.gitDiffContext,
     systemContext,
     responseLength: groupSelections["length"] ?? "normal",
     groupSelections,

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

@@ -2,6 +2,7 @@ import { useEffect, useState, useCallback } from "react";
 import { useStore } from "../store";
 import FileViewerModal from "./FileViewerModal";
 import NotesModal, { notesKey } from "./NotesModal";
+import GitDiffPanel from "./GitDiffPanel";
 import {
   File,
   Search,
@@ -294,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);
@@ -307,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">
@@ -316,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" />
@@ -635,6 +659,9 @@ export default function CodeContextPanel() {
           </div>
         )}
 
+        {/* ── Git Diff section ───────────────────────────────── */}
+        <GitDiffPanel />
+
         {/* ── Notes section ────────────────────────────────────── */}
         <div className="border-t border-slate-800 px-3 py-2">
           <button

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

@@ -320,6 +320,7 @@ export default function FileViewerModal({ filePath, onClose }: Props) {
           questionId: currentQuestion?.id,
           topicId: currentQuestion?.topicId ?? selectedTopicId,
           codeContextFiles: currentQuestion?.codeContextFiles,
+          gitDiffContext: currentQuestion?.gitDiffContext,
           codeSnippets,
           preferenceSuffix: livePreferenceSuffix,
         }),

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

@@ -0,0 +1,403 @@
+import { useEffect, useState, useCallback } from "react";
+import {
+  GitBranch,
+  RefreshCcw,
+  Eye,
+  X,
+  Check,
+  ChevronDown,
+  ChevronRight,
+} from "lucide-react";
+import { useStore } from "../store";
+import {
+  fetchGitBranches,
+  fetchGitDiffTree,
+  type GitBranchesResponse,
+  type GitDiffTreeResponse,
+} from "../api";
+import type { GitDiffContext, GitDiffMode } from "../types";
+import GitDiffViewerModal from "./GitDiffViewerModal";
+
+// Status letter → color/label for the changed-files list.
+const STATUS_META: Record<string, { color: string; label: string }> = {
+  A: { color: "text-emerald-400", label: "added" },
+  M: { color: "text-amber-400", label: "modified" },
+  D: { color: "text-red-400", label: "deleted" },
+  R: { color: "text-sky-400", label: "renamed" },
+  C: { color: "text-sky-400", label: "copied" },
+  T: { color: "text-violet-400", label: "type" },
+  U: { color: "text-orange-400", label: "unmerged" },
+  "?": { color: "text-slate-400", label: "untracked" },
+};
+
+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 [baseRef, setBaseRef] = useState<string>(existing?.baseRef || "");
+  const [headRef, setHeadRef] = useState<string>(existing?.headRef || "");
+  const [mode, setMode] = useState<GitDiffMode>(existing?.mode || "three-dot");
+  const [tree, setTree] = useState<GitDiffTreeResponse | null>(null);
+  const [loadingTree, setLoadingTree] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selected, setSelected] = useState<string[]>(
+    existing?.selectedFiles || [],
+  );
+  const [viewingFile, setViewingFile] = useState<string | null>(null);
+
+  // Reload selection when switching questions.
+  useEffect(() => {
+    setBaseRef(existing?.baseRef || "");
+    setHeadRef(existing?.headRef || "");
+    setMode(existing?.mode || "three-dot");
+    setSelected(existing?.selectedFiles || []);
+    setTree(null);
+  }, [currentQuestion?.id]);
+
+  const applyBranchDefaults = useCallback(
+    (b: GitBranchesResponse) => {
+      const currentHead = b.head || "";
+      const recommendedBase =
+        b.defaultBranch ||
+        b.branches.find((branch) => branch !== currentHead) ||
+        currentHead ||
+        b.branches[0] ||
+        "";
+      setHeadRef((prev) => prev || currentHead);
+      setBaseRef((prev) => {
+        // On first open (or after the old bug saved base=head with no files),
+        // prefer main/master/origin default as the base and keep current branch as head.
+        if (!prev) return recommendedBase;
+        if (
+          prev === currentHead &&
+          recommendedBase &&
+          recommendedBase !== currentHead &&
+          selected.length === 0
+        ) {
+          return recommendedBase;
+        }
+        return prev;
+      });
+    },
+    [selected.length],
+  );
+
+  // Lazy-load branches the first time the section is opened.
+  useEffect(() => {
+    if (!expanded) return;
+    if (branches) {
+      applyBranchDefaults(branches);
+      return;
+    }
+    fetchGitBranches()
+      .then((b) => {
+        setBranches(b);
+        applyBranchDefaults(b);
+      })
+      .catch((e) => setError(e?.message || "Failed to load branches"));
+  }, [expanded, branches, applyBranchDefaults]);
+
+  const loadTree = useCallback(async () => {
+    if (!baseRef) return;
+    setLoadingTree(true);
+    setError(null);
+    try {
+      const data = await fetchGitDiffTree({
+        base: baseRef,
+        head: mode === "working-tree" ? "" : headRef,
+        mode,
+      });
+      setTree(data);
+    } catch (e: any) {
+      setTree(null);
+      setError(e?.message || "Failed to load diff");
+    } finally {
+      setLoadingTree(false);
+    }
+  }, [baseRef, headRef, mode]);
+
+  // Auto-load when refs/mode change and the section is open.
+  useEffect(() => {
+    if (!expanded) return;
+    if (!baseRef) return;
+    if (mode !== "working-tree" && !headRef) return;
+    loadTree();
+  }, [expanded, baseRef, headRef, mode]);
+
+  const persist = useCallback(
+    (next: Partial<GitDiffContext>) => {
+      if (!currentQuestion) return;
+      const ctx: GitDiffContext = {
+        baseRef,
+        headRef: mode === "working-tree" ? "" : headRef,
+        mode,
+        selectedFiles: selected,
+        ...next,
+      };
+      // Treat empty selection as "clear" so we don't waste prompt tokens.
+      if (!ctx.baseRef || ctx.selectedFiles.length === 0) {
+        updateGitDiffContext(currentQuestion.id, null);
+      } else {
+        updateGitDiffContext(currentQuestion.id, ctx);
+      }
+    },
+    [currentQuestion, baseRef, headRef, mode, selected, updateGitDiffContext],
+  );
+
+  const toggleFile = useCallback(
+    (filePath: string) => {
+      setSelected((prev) => {
+        const next = prev.includes(filePath)
+          ? prev.filter((f) => f !== filePath)
+          : [...prev, filePath];
+        persist({ selectedFiles: next });
+        return next;
+      });
+    },
+    [persist],
+  );
+
+  const clearSelection = useCallback(() => {
+    setSelected([]);
+    if (currentQuestion) updateGitDiffContext(currentQuestion.id, null);
+  }, [currentQuestion, updateGitDiffContext]);
+
+  const branchOptions = branches?.branches ?? [];
+  const tagOptions = branches?.tags ?? [];
+
+  return (
+    <div className="border-t border-slate-800">
+      <button
+        onClick={() => setExpanded((v) => !v)}
+        className="w-full flex items-center gap-2 px-3 py-2 group"
+      >
+        {expanded ? (
+          <ChevronDown className="w-3 h-3 text-slate-600" />
+        ) : (
+          <ChevronRight className="w-3 h-3 text-slate-600" />
+        )}
+        <GitBranch className="w-3 h-3 text-cyan-400/70 shrink-0" />
+        <span className="text-[10px] uppercase tracking-wider text-slate-600 flex-1 text-left">
+          Git Diff{selected.length > 0 ? ` (${selected.length})` : ""}
+        </span>
+      </button>
+
+      {expanded && (
+        <div className="px-3 pb-3 space-y-2">
+          {!currentQuestion && (
+            <p className="text-[10px] text-slate-600 italic">
+              Select a question first
+            </p>
+          )}
+
+          {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.
+              {branches.error ? ` (${branches.error})` : ""}
+            </p>
+          )}
+
+          {currentQuestion && branches?.enabled && (
+            <>
+              <div className="space-y-1">
+                <label className="block text-[10px] uppercase tracking-wider text-slate-600">
+                  Mode
+                </label>
+                <select
+                  value={mode}
+                  onChange={(e) => setMode(e.target.value as GitDiffMode)}
+                  className="w-full bg-slate-800 border border-slate-700 rounded px-2 py-1 text-xs text-slate-300"
+                >
+                  <option value="three-dot">
+                    three-dot (base...head, since common ancestor)
+                  </option>
+                  <option value="two-dot">two-dot (base..head)</option>
+                  <option value="working-tree">working tree vs base</option>
+                </select>
+              </div>
+
+              <div className="space-y-1">
+                <label className="block text-[10px] uppercase tracking-wider text-slate-600">
+                  Base
+                </label>
+                <RefInput
+                  value={baseRef}
+                  onChange={setBaseRef}
+                  branches={branchOptions}
+                  tags={tagOptions}
+                />
+              </div>
+
+              {mode !== "working-tree" && (
+                <div className="space-y-1">
+                  <label className="block text-[10px] uppercase tracking-wider text-slate-600">
+                    Head
+                  </label>
+                  <RefInput
+                    value={headRef}
+                    onChange={setHeadRef}
+                    branches={branchOptions}
+                    tags={tagOptions}
+                  />
+                </div>
+              )}
+
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={loadTree}
+                  disabled={
+                    loadingTree ||
+                    !baseRef ||
+                    (mode !== "working-tree" && !headRef)
+                  }
+                  className="flex items-center gap-1 px-2 py-1 text-xs bg-cyan-500/10 border border-cyan-500/30 text-cyan-300 rounded hover:bg-cyan-500/20 disabled:opacity-40"
+                >
+                  <RefreshCcw className="w-3 h-3" />
+                  {loadingTree ? "Loading…" : "Load diff"}
+                </button>
+                {selected.length > 0 && (
+                  <button
+                    onClick={clearSelection}
+                    className="text-[10px] text-red-400/60 hover:text-red-400"
+                  >
+                    Clear selection
+                  </button>
+                )}
+              </div>
+
+              {error && <p className="text-[10px] text-red-400">{error}</p>}
+
+              {tree && (
+                <div className="space-y-0.5 max-h-72 overflow-y-auto border-t border-slate-800 pt-2">
+                  {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>
+                    );
+                  })}
+                  {tree.truncated && (
+                    <p className="text-[10px] text-amber-400/70 mt-1">
+                      Truncated — too many changed files.
+                    </p>
+                  )}
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      )}
+
+      {viewingFile && baseRef && (mode === "working-tree" || headRef) && (
+        <GitDiffViewerModal
+          ctx={{
+            baseRef,
+            headRef: mode === "working-tree" ? "" : headRef,
+            mode,
+            selectedFiles: selected,
+          }}
+          filePath={viewingFile}
+          onClose={() => setViewingFile(null)}
+        />
+      )}
+    </div>
+  );
+}
+
+// Small free-text + datalist combo so the user can either pick a known branch
+// or type any commit-ish (sha, tag, HEAD~3, etc.).
+function RefInput({
+  value,
+  onChange,
+  branches,
+  tags,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  branches: string[];
+  tags: string[];
+}) {
+  const listId = `git-refs-${Math.random().toString(36).slice(2, 8)}`;
+  return (
+    <div className="flex gap-1">
+      <input
+        list={listId}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder="branch, tag, sha, HEAD~1…"
+        className="flex-1 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-xs text-slate-300 placeholder-slate-600 focus:outline-none focus:border-cyan-500 font-mono"
+      />
+      {value && (
+        <button
+          onClick={() => onChange("")}
+          className="px-1 text-slate-600 hover:text-red-400"
+          title="Clear"
+        >
+          <X className="w-3 h-3" />
+        </button>
+      )}
+      <datalist id={listId}>
+        {branches.map((b) => (
+          <option key={b} value={b} />
+        ))}
+        {tags.map((t) => (
+          <option key={t} value={t} />
+        ))}
+      </datalist>
+    </div>
+  );
+}