create-interview-cockpit 0.20.0 → 0.22.0

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>
+  );
+}

package/template/client/src/store.ts

@@ -200,6 +200,10 @@ interface Store {
   toggleSidebar: () => void;
   fetchAvailableFiles: () => Promise<void>;
   updateCodeContext: (questionId: string, files: string[]) => Promise<void>;
+  updateGitDiffContext: (
+    questionId: string,
+    ctx: import("./types").GitDiffContext | null,
+  ) => Promise<void>;
   refreshCurrentQuestion: () => Promise<void>;
   uploadTopicFiles: (
     topicId: string,
@@ -830,6 +834,16 @@ export const useStore = create<Store>((set, get) => ({
     }));
   },
 
+  updateGitDiffContext: async (questionId, ctx) => {
+    // Send null explicitly so the server can clear the field; PATCH ignores undefined.
+    await api.updateQuestion(questionId, { gitDiffContext: ctx } as any);
+    set((s) => ({
+      currentQuestion: s.currentQuestion
+        ? { ...s.currentQuestion, gitDiffContext: ctx ?? undefined }
+        : null,
+    }));
+  },
+
   refreshCurrentQuestion: async () => {
     const { selectedQuestionId } = get();
     if (selectedQuestionId) {

package/template/client/src/types.ts

@@ -151,6 +151,8 @@ export interface Question {
   title: string;
   systemContext: string;
   codeContextFiles: string[];
+  /** Optional git diff selection that the chat LLM can lazy-fetch via readFile. */
+  gitDiffContext?: GitDiffContext;
   contextFiles: ContextFile[];
   messages: Message[];
   annotations?: Annotation[];
@@ -161,3 +163,24 @@ export interface Question {
   linkedConversationIds?: string[];
   createdAt: string;
 }
+
+export type GitDiffMode = "two-dot" | "three-dot" | "working-tree";
+
+export interface GitDiffContext {
+  baseRef: string;
+  /** Branch / ref / tag. Empty when mode is working-tree. */
+  headRef: string;
+  mode: GitDiffMode;
+  selectedFiles: string[];
+}
+
+export type GitDiffStatus = "A" | "M" | "D" | "R" | "C" | "T" | "U" | "?";
+
+export interface GitDiffFileEntry {
+  path: string;
+  oldPath?: string;
+  status: GitDiffStatus;
+  additions: number;
+  deletions: number;
+  binary: boolean;
+}

package/template/client/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/api.ts","./src/browsersecuritytemplates.ts","./src/enterpriselocallab.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/docrefmodal.tsx","./src/components/fileattachments.tsx","./src/components/filepickermodal.tsx","./src/components/fileviewermodal.tsx","./src/components/ghahistorypanel.tsx","./src/components/ghajobspanel.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/browsersecuritytemplates.ts","./src/enterpriselocallab.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/docrefmodal.tsx","./src/components/fileattachments.tsx","./src/components/filepickermodal.tsx","./src/components/fileviewermodal.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"}

package/template/cockpit.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.18.0"
+  "version": "0.20.0"
 }