create-interview-cockpit 0.4.0 → 0.5.0

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

@@ -9,9 +9,15 @@ import {
   Loader2,
   Plus,
   Check,
+  MessageCircle,
+  Send,
+  Play,
 } from "lucide-react";
 import { useStore } from "../store";
 import type { CodeSnippet } from "../types";
+import CodeLineAnnotationPopup, {
+  type CodeAnnotation,
+} from "./CodeLineAnnotationPopup";
 
 interface Props {
   filePath: string;
@@ -70,7 +76,18 @@ const DEFAULT_H = 520;
 type ResizeDir = "e" | "s" | "se" | "sw" | "w" | "ne" | "nw" | "n" | null;
 
 export default function FileViewerModal({ filePath, onClose }: Props) {
-  const { addSnippet } = useStore();
+  const {
+    addSnippet,
+    currentQuestion,
+    selectedTopicId,
+    codeSnippets,
+    livePreferenceSuffix,
+    inlineCodeSnippets,
+    openCodeRunner,
+  } = useStore();
+  // stable ref so callbacks can read the latest question id without re-creating
+  const currentQuestionIdRef = useRef<string | undefined>(undefined);
+  currentQuestionIdRef.current = currentQuestion?.id;
   const [content, setContent] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -79,6 +96,19 @@ export default function FileViewerModal({ filePath, onClose }: Props) {
   const [addedFeedback, setAddedFeedback] = useState(false);
   const lastClickedLineRef = useRef<number | null>(null);
 
+  // ── Code chat ─────────────────────────────────────────────
+  const [chatPanelOpen, setChatPanelOpen] = useState(false);
+  const [chatContextLines, setChatContextLines] = useState<Set<number>>(
+    new Set(),
+  );
+  const [chatInput, setChatInput] = useState("");
+  const [chatLoading, setChatLoading] = useState(false);
+  const [codeAnnotations, setCodeAnnotations] = useState<CodeAnnotation[]>([]);
+  const [openAnnotationId, setOpenAnnotationId] = useState<string | null>(null);
+  const chatInputRef = useRef<HTMLTextAreaElement>(null);
+  const codeAnnotationsRef = useRef<CodeAnnotation[]>([]);
+  const chatPanelOpenRef = useRef(false);
+
   // Position & size (pre-maximise)
   const [pos, setPos] = useState(() => ({
     x: Math.max(0, (window.innerWidth - DEFAULT_W) / 2),
@@ -104,15 +134,55 @@ export default function FileViewerModal({ filePath, onClose }: Props) {
   const savedPos = useRef(pos);
   const savedSize = useRef(size);
 
-  const fileName = filePath.split("/").pop() ?? filePath;
+  const isInline = filePath.startsWith("inline:");
+  const inlineEntry = isInline ? inlineCodeSnippets[filePath] : undefined;
+  const fileName = isInline
+    ? (inlineEntry?.label ?? filePath.slice("inline:".length))
+    : (filePath.split("/").pop() ?? filePath);
 
-  // Fetch file content
+  // Fetch file content + load persisted annotations
   useEffect(() => {
     setLoading(true);
     setError(null);
     setSelectedLines(new Set());
     lastClickedLineRef.current = null;
-    fetch(`/api/code-context/file?path=${encodeURIComponent(filePath)}`)
+    setChatContextLines(new Set());
+    setChatInput("");
+    setCodeAnnotations([]);
+    setOpenAnnotationId(null);
+
+    // Inline AI-written code: read from the in-memory registry — no server fetch
+    if (filePath.startsWith("inline:")) {
+      const entry = useStore.getState().inlineCodeSnippets[filePath];
+      if (entry) {
+        setContent(entry.content);
+      } else {
+        setError("Inline snippet not available yet.");
+      }
+      setLoading(false);
+
+      // Still load persisted annotations for inline blocks
+      const qId = currentQuestionIdRef.current;
+      if (qId) {
+        fetch(
+          `/api/questions/${qId}/code-annotations?filePath=${encodeURIComponent(filePath)}`,
+        )
+          .then((r) => r.json())
+          .then((d) => {
+            if (Array.isArray(d.annotations) && d.annotations.length > 0) {
+              setCodeAnnotations(d.annotations);
+            }
+          })
+          .catch(() => {
+            /* non-fatal */
+          });
+      }
+      return;
+    }
+
+    const fetchFile = fetch(
+      `/api/code-context/file?path=${encodeURIComponent(filePath)}`,
+    )
       .then((r) => r.json())
       .then((d) => {
         if (d.error) setError(d.error);
@@ -120,22 +190,80 @@ export default function FileViewerModal({ filePath, onClose }: Props) {
       })
       .catch(() => setError("Failed to load file."))
       .finally(() => setLoading(false));
+
+    // load persisted annotations for this file if we have a question context
+    const qId = currentQuestionIdRef.current;
+    if (qId) {
+      fetch(
+        `/api/questions/${qId}/code-annotations?filePath=${encodeURIComponent(filePath)}`,
+      )
+        .then((r) => r.json())
+        .then((d) => {
+          if (Array.isArray(d.annotations) && d.annotations.length > 0) {
+            setCodeAnnotations(d.annotations);
+          }
+        })
+        .catch(() => {
+          /* non-fatal */
+        });
+    }
+
+    return () => {
+      void fetchFile;
+    };
   }, [filePath]);
 
   const handleLineClick = useCallback(
     (e: React.MouseEvent, lineNumber: number) => {
-      // Don't toggle if user was drag-selecting text
       if (window.getSelection()?.toString()) return;
+
+      // 1. Chat panel open → always add/remove from chat context (even annotated lines)
+      if (chatPanelOpenRef.current) {
+        setChatContextLines((prev) => {
+          const next = new Set(prev);
+          if (e.shiftKey && lastClickedLineRef.current !== null) {
+            const lo = Math.min(lastClickedLineRef.current, lineNumber);
+            const hi = Math.max(lastClickedLineRef.current, lineNumber);
+            for (let i = lo; i <= hi; i++) next.add(i);
+          } else {
+            if (next.has(lineNumber)) next.delete(lineNumber);
+            else next.add(lineNumber);
+          }
+          return next;
+        });
+        lastClickedLineRef.current = lineNumber;
+        return;
+      }
+
+      // 2. Shift+click → extend snippet selection on any line, including annotated ones
+      if (e.shiftKey && lastClickedLineRef.current !== null) {
+        setSelectedLines((prev) => {
+          const next = new Set(prev);
+          const lo = Math.min(lastClickedLineRef.current!, lineNumber);
+          const hi = Math.max(lastClickedLineRef.current!, lineNumber);
+          for (let i = lo; i <= hi; i++) next.add(i);
+          return next;
+        });
+        lastClickedLineRef.current = lineNumber;
+        return;
+      }
+
+      // 3. Normal click on annotated line → toggle popup
+      const annotation = codeAnnotationsRef.current.find(
+        (a) => a.lineNumber === lineNumber,
+      );
+      if (annotation) {
+        setOpenAnnotationId((prev) =>
+          prev === annotation.id ? null : annotation.id,
+        );
+        return;
+      }
+
+      // 4. Default: toggle snippet selection
       setSelectedLines((prev) => {
         const next = new Set(prev);
-        if (e.shiftKey && lastClickedLineRef.current !== null) {
-          const lo = Math.min(lastClickedLineRef.current, lineNumber);
-          const hi = Math.max(lastClickedLineRef.current, lineNumber);
-          for (let i = lo; i <= hi; i++) next.add(i);
-        } else {
-          if (next.has(lineNumber)) next.delete(lineNumber);
-          else next.add(lineNumber);
-        }
+        if (next.has(lineNumber)) next.delete(lineNumber);
+        else next.add(lineNumber);
         return next;
       });
       lastClickedLineRef.current = lineNumber;
@@ -163,6 +291,84 @@ export default function FileViewerModal({ filePath, onClose }: Props) {
     setTimeout(() => setAddedFeedback(false), 1500);
   }, [content, selectedLines, filePath, fileName, addSnippet]);
 
+  const handleChatSend = useCallback(async () => {
+    if (
+      !chatInput.trim() ||
+      chatLoading ||
+      !content ||
+      chatContextLines.size === 0
+    )
+      return;
+    const lines = content.split("\n");
+    const sortedNums = [...chatContextLines].sort((a, b) => a - b);
+    const selectedCode = sortedNums
+      .map((n) => `${n}: ${lines[n - 1] ?? ""}`)
+      .join("\n");
+    const firstLine = sortedNums[0];
+    const firstLineContent = lines[firstLine - 1] ?? "";
+    const promptText = chatInput.trim();
+    setChatInput("");
+    setChatLoading(true);
+    try {
+      const res = await fetch("/api/code-line-ask", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          filePath,
+          selectedCode,
+          prompt: promptText,
+          questionId: currentQuestion?.id,
+          topicId: currentQuestion?.topicId ?? selectedTopicId,
+          codeContextFiles: currentQuestion?.codeContextFiles,
+          codeSnippets,
+          preferenceSuffix: livePreferenceSuffix,
+        }),
+      });
+      const data = await res.json();
+      const annotation: CodeAnnotation = {
+        id: crypto.randomUUID(),
+        lineNumber: firstLine,
+        lineContent: firstLineContent,
+        prompt: promptText,
+        response: data.response ?? "No response.",
+        filePath,
+      };
+      const nextAnnotations = [
+        ...codeAnnotationsRef.current.filter((a) => a.lineNumber !== firstLine),
+        annotation,
+      ];
+      setCodeAnnotations(nextAnnotations);
+      setOpenAnnotationId(annotation.id);
+      setChatContextLines(new Set());
+
+      // persist to server if we have a question context
+      const qId = currentQuestionIdRef.current;
+      if (qId) {
+        fetch(`/api/questions/${qId}/code-annotations`, {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ filePath, annotations: nextAnnotations }),
+        }).catch(() => {
+          /* non-fatal */
+        });
+      }
+    } catch (err) {
+      console.error("code-line-ask error:", err);
+    } finally {
+      setChatLoading(false);
+    }
+  }, [
+    chatInput,
+    chatLoading,
+    content,
+    chatContextLines,
+    filePath,
+    currentQuestion,
+    selectedTopicId,
+    codeSnippets,
+    livePreferenceSuffix,
+  ]);
+
   // ─── Drag ────────────────────────────────────────────
 
   const onTitleMouseDown = useCallback(
@@ -280,7 +486,14 @@ export default function FileViewerModal({ filePath, onClose }: Props) {
     return () => document.removeEventListener("keydown", handler);
   }, [onClose]);
 
-  const lang = getLang(filePath);
+  // Keep refs in sync with state for use inside [] dep callbacks
+  codeAnnotationsRef.current = codeAnnotations;
+  chatPanelOpenRef.current = chatPanelOpen;
+  const openAnnotation = openAnnotationId
+    ? (codeAnnotations.find((a) => a.id === openAnnotationId) ?? null)
+    : null;
+
+  const lang = isInline ? (inlineEntry?.language ?? "text") : getLang(filePath);
 
   const style: React.CSSProperties = maximized
     ? {
@@ -334,6 +547,46 @@ export default function FileViewerModal({ filePath, onClose }: Props) {
               <Maximize2 className="w-3.5 h-3.5" />
             )}
           </button>
+          <button
+            onMouseDown={(e) => e.stopPropagation()}
+            onClick={() => {
+              if (!content) return;
+              let runCode: string;
+              if (selectedLines.size > 0) {
+                const lines = content.split("\n");
+                const sorted = [...selectedLines].sort((a, b) => a - b);
+                runCode = sorted.map((n) => lines[n - 1] ?? "").join("\n");
+              } else {
+                runCode = content;
+              }
+              const runLang =
+                lang === "typescript" || lang === "tsx"
+                  ? "typescript"
+                  : "javascript";
+              openCodeRunner(runCode, runLang);
+            }}
+            className="p-1 rounded transition-colors shrink-0 text-slate-500 hover:bg-slate-700 hover:text-emerald-400"
+            title={selectedLines.size > 0 ? "Run selected lines" : "Run file"}
+          >
+            <Play className="w-3.5 h-3.5" />
+          </button>
+          <button
+            onMouseDown={(e) => e.stopPropagation()}
+            onClick={() =>
+              setChatPanelOpen((v) => {
+                if (!v) setTimeout(() => chatInputRef.current?.focus(), 50);
+                return !v;
+              })
+            }
+            className={`p-1 rounded transition-colors shrink-0 ${
+              chatPanelOpen
+                ? "text-amber-400 bg-amber-500/10 hover:bg-amber-500/20"
+                : "text-slate-500 hover:bg-slate-700 hover:text-slate-300"
+            }`}
+            title="Code chat"
+          >
+            <MessageCircle className="w-3.5 h-3.5" />
+          </button>
           <button
             onClick={onClose}
             className="p-1 rounded hover:bg-slate-700 text-slate-500 hover:text-red-400 transition-colors shrink-0"
@@ -362,20 +615,35 @@ export default function FileViewerModal({ filePath, onClose }: Props) {
               showLineNumbers
               wrapLines
               wrapLongLines={false}
-              lineProps={(lineNumber) => ({
-                onClick: (e: React.MouseEvent) =>
-                  lineNumber !== undefined && handleLineClick(e, lineNumber),
-                style: {
-                  display: "block",
-                  cursor: "pointer",
-                  backgroundColor: selectedLines.has(lineNumber)
-                    ? "rgba(6, 182, 212, 0.15)"
-                    : undefined,
-                  outline: selectedLines.has(lineNumber)
-                    ? "1px solid rgba(6, 182, 212, 0.3)"
-                    : undefined,
-                },
-              })}
+              lineProps={(lineNumber) => {
+                const hasAnnotation = codeAnnotations.some(
+                  (a) => a.lineNumber === lineNumber,
+                );
+                const isChatCtx = chatContextLines.has(lineNumber);
+                const isSelected = selectedLines.has(lineNumber);
+                let bg: string | undefined;
+                let outline: string | undefined;
+                if (hasAnnotation) {
+                  bg = "rgba(139, 92, 246, 0.2)";
+                  outline = "1px solid rgba(139, 92, 246, 0.35)";
+                } else if (isChatCtx) {
+                  bg = "rgba(245, 158, 11, 0.15)";
+                  outline = "1px solid rgba(245, 158, 11, 0.3)";
+                } else if (isSelected) {
+                  bg = "rgba(6, 182, 212, 0.15)";
+                  outline = "1px solid rgba(6, 182, 212, 0.3)";
+                }
+                return {
+                  onClick: (e: React.MouseEvent) =>
+                    lineNumber !== undefined && handleLineClick(e, lineNumber),
+                  style: {
+                    display: "block",
+                    cursor: "pointer",
+                    backgroundColor: bg,
+                    outline,
+                  },
+                };
+              }}
               customStyle={{
                 margin: 0,
                 borderRadius: 0,
@@ -391,6 +659,108 @@ export default function FileViewerModal({ filePath, onClose }: Props) {
           )}
         </div>
 
+        {/* ── Code chat panel ── */}
+        {chatPanelOpen && (
+          <div className="shrink-0 border-t border-amber-900/30 bg-slate-900/80">
+            {chatContextLines.size > 0 ? (
+              <div className="flex items-center gap-1 px-3 pt-2 pb-0.5 flex-wrap">
+                <span className="text-[10px] text-slate-500 shrink-0">
+                  Context:
+                </span>
+                {[...chatContextLines]
+                  .sort((a, b) => a - b)
+                  .map((ln) => (
+                    <span
+                      key={ln}
+                      className="inline-flex items-center gap-0.5 text-[10px] bg-amber-500/15 text-amber-400 px-1.5 py-0.5 rounded font-mono"
+                    >
+                      L{ln}
+                      <button
+                        onClick={() =>
+                          setChatContextLines((prev) => {
+                            const next = new Set(prev);
+                            next.delete(ln);
+                            return next;
+                          })
+                        }
+                        className="hover:text-red-400 ml-0.5 leading-none"
+                      >
+                        ×
+                      </button>
+                    </span>
+                  ))}
+                <button
+                  onClick={() => setChatContextLines(new Set())}
+                  className="text-[10px] text-slate-600 hover:text-slate-400 ml-1"
+                >
+                  clear
+                </button>
+              </div>
+            ) : (
+              <p className="px-3 pt-2 pb-0 text-[10px] text-slate-600">
+                Click lines above to add them as context
+              </p>
+            )}
+            <div className="flex items-end gap-2 px-3 py-2">
+              <textarea
+                ref={chatInputRef}
+                value={chatInput}
+                onChange={(e) => setChatInput(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && !e.shiftKey) {
+                    e.preventDefault();
+                    handleChatSend();
+                  }
+                }}
+                placeholder="Ask about the selected lines…"
+                rows={2}
+                disabled={chatLoading}
+                className="flex-1 bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-200 placeholder-slate-600 focus:outline-none focus:border-amber-500/60 resize-none disabled:opacity-50 transition-colors"
+              />
+              <button
+                onClick={handleChatSend}
+                disabled={
+                  chatLoading ||
+                  !chatInput.trim() ||
+                  chatContextLines.size === 0
+                }
+                className="shrink-0 self-end bg-amber-600 hover:bg-amber-500 disabled:bg-slate-700 disabled:text-slate-500 text-white rounded-lg p-2 transition-colors"
+                title="Send (Enter)"
+              >
+                {chatLoading ? (
+                  <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                ) : (
+                  <Send className="w-3.5 h-3.5" />
+                )}
+              </button>
+            </div>
+            {codeAnnotations.length > 0 && (
+              <div className="px-3 pb-2 flex flex-wrap gap-1">
+                {codeAnnotations.map((ann) => (
+                  <button
+                    key={ann.id}
+                    onClick={() =>
+                      setOpenAnnotationId((prev) =>
+                        prev === ann.id ? null : ann.id,
+                      )
+                    }
+                    className={`text-[10px] px-2 py-0.5 rounded-full border transition-colors ${
+                      openAnnotationId === ann.id
+                        ? "bg-violet-500/20 text-violet-300 border-violet-500/40"
+                        : "bg-violet-500/10 text-violet-400 border-violet-500/20 hover:border-violet-500/40"
+                    }`}
+                  >
+                    L{ann.lineNumber}:{" "}
+                    {ann.prompt.length > 30
+                      ? ann.prompt.slice(0, 30) + "…"
+                      : ann.prompt}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
         {/* ── Snippet selection toolbar ── */}
         {selectedLines.size > 0 && (
           <div className="shrink-0 border-t border-cyan-900/50 bg-slate-800 px-3 py-2 flex items-center gap-2">
@@ -465,6 +835,14 @@ export default function FileViewerModal({ filePath, onClose }: Props) {
           </>
         )}
       </div>
+
+      {/* ── Code annotation popup ── */}
+      {openAnnotation && (
+        <CodeLineAnnotationPopup
+          annotation={openAnnotation}
+          onClose={() => setOpenAnnotationId(null)}
+        />
+      )}
     </>
   );
 }