create-interview-cockpit 0.19.0 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-interview-cockpit",
-  "version": "0.19.0",
+  "version": "0.21.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,
@@ -635,6 +636,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>
+  );
+}

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

@@ -0,0 +1,124 @@
+import { useEffect, useState } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { X, GitBranch } from "lucide-react";
+import { fetchGitDiffFile } from "../api";
+import type { GitDiffContext } from "../types";
+
+interface Props {
+  ctx: GitDiffContext;
+  filePath: string;
+  onClose: () => void;
+}
+
+type View = "patch" | "before" | "after";
+
+// Lightweight viewer — fetches the same patch/blob the LLM would lazy-load via readFile.
+export default function GitDiffViewerModal({ ctx, filePath, onClose }: Props) {
+  const [view, setView] = useState<View>("patch");
+  const [content, setContent] = useState<string>("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    fetchGitDiffFile({
+      base: ctx.baseRef,
+      head: ctx.headRef,
+      mode: ctx.mode,
+      path: filePath,
+      view,
+    })
+      .then((d) => {
+        if (cancelled) return;
+        setContent(d.content || "");
+      })
+      .catch((e) => {
+        if (cancelled) return;
+        setError(e?.message || "Failed to load diff");
+      })
+      .finally(() => !cancelled && setLoading(false));
+    return () => {
+      cancelled = true;
+    };
+  }, [ctx.baseRef, ctx.headRef, ctx.mode, filePath, view]);
+
+  const language =
+    view === "patch"
+      ? "diff"
+      : (filePath.split(".").pop() || "text").toLowerCase();
+
+  const headLabel = ctx.mode === "working-tree" ? "working tree" : ctx.headRef;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 bg-black/70 flex items-center justify-center p-4"
+      onClick={onClose}
+    >
+      <div
+        className="bg-slate-900 border border-slate-700 rounded-lg w-full max-w-5xl max-h-[90vh] flex flex-col overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center gap-2 border-b border-slate-800 px-3 py-2">
+          <GitBranch className="w-4 h-4 text-cyan-400/70" />
+          <div className="flex-1 min-w-0">
+            <div className="text-sm text-slate-200 truncate">{filePath}</div>
+            <div className="text-[10px] text-slate-500 truncate">
+              {ctx.baseRef}{" "}
+              {ctx.mode === "two-dot"
+                ? ".."
+                : ctx.mode === "working-tree"
+                  ? "→"
+                  : "..."}{" "}
+              {headLabel}
+            </div>
+          </div>
+          <div className="flex bg-slate-800 rounded overflow-hidden text-xs">
+            {(["patch", "before", "after"] as View[]).map((v) => (
+              <button
+                key={v}
+                onClick={() => setView(v)}
+                className={`px-2 py-1 ${
+                  view === v
+                    ? "bg-cyan-500/20 text-cyan-300"
+                    : "text-slate-400 hover:text-slate-200"
+                }`}
+              >
+                {v}
+              </button>
+            ))}
+          </div>
+          <button
+            onClick={onClose}
+            className="text-slate-500 hover:text-slate-200 p-1"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+        <div className="flex-1 min-h-0 overflow-auto">
+          {loading && (
+            <div className="p-4 text-xs text-slate-500">Loading…</div>
+          )}
+          {error && <div className="p-4 text-xs text-red-400">{error}</div>}
+          {!loading && !error && (
+            <SyntaxHighlighter
+              language={language}
+              style={oneDark}
+              customStyle={{
+                margin: 0,
+                background: "transparent",
+                fontSize: "12px",
+                padding: "12px",
+              }}
+              showLineNumbers={view !== "patch"}
+            >
+              {content || "(empty)"}
+            </SyntaxHighlighter>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}