create-interview-cockpit 0.3.0 → 0.5.0

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

@@ -15,6 +15,13 @@ import {
   MinusSquare,
   Eye,
   Scissors,
+  Terminal,
+  Sparkles,
+  Plus,
+  Play,
+  Trash2,
+  Server,
+  Pencil,
 } from "lucide-react";
 
 // ─── Tree data structure ─────────────────────────────────
@@ -219,8 +226,15 @@ export default function CodeContextPanel() {
     codeSnippets,
     removeSnippet,
     clearSnippets,
+    openCodeRunner,
+    openSandbox,
+    removeQuestionFile,
+    renameContextFile,
   } = useStore();
 
+  const [renamingId, setRenamingId] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState("");
+
   const [search, setSearch] = useState("");
   const [selectedFiles, setSelectedFiles] = useState<string[]>(
     currentQuestion?.codeContextFiles || [],
@@ -459,6 +473,289 @@ export default function CodeContextPanel() {
           })}
       </div>
 
+      {/* ── My Code section ─────────────────────────────────── */}
+      {currentQuestion && (
+        <div className="border-t border-slate-800 px-3 py-2">
+          <div className="flex items-center justify-between mb-1">
+            <div className="flex items-center gap-1">
+              <Terminal className="w-3 h-3 text-emerald-400/70" />
+              <span className="text-[10px] uppercase tracking-wider text-slate-600">
+                My Code (
+                {
+                  (currentQuestion.contextFiles || []).filter(
+                    (f) => f.origin === "user",
+                  ).length
+                }
+                )
+              </span>
+            </div>
+            <button
+              onClick={() => openCodeRunner()}
+              className="p-0.5 rounded text-slate-600 hover:text-emerald-400 hover:bg-slate-700 transition-colors"
+              title="Open Code Runner"
+            >
+              <Plus className="w-3.5 h-3.5" />
+            </button>
+          </div>
+          <div className="space-y-0.5 max-h-32 overflow-y-auto">
+            {(currentQuestion.contextFiles || [])
+              .filter((f) => f.origin === "user")
+              .map((cf) => (
+                <div
+                  key={cf.id}
+                  className="flex items-center gap-1 text-xs bg-emerald-500/10 border border-emerald-500/20 rounded px-1.5 py-1 group"
+                >
+                  <span
+                    className="text-emerald-400 font-medium truncate flex-1"
+                    title={cf.label || cf.originalName}
+                  >
+                    {cf.label || cf.originalName}
+                  </span>
+                  <button
+                    onClick={async () => {
+                      const content = await fetch(
+                        `/api/context-files/${cf.id}/content`,
+                      )
+                        .then((r) => r.json())
+                        .then((d) => d.content);
+                      openCodeRunner(content, cf.language ?? "typescript");
+                    }}
+                    className="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-emerald-400 transition-all"
+                    title="Open in Code Runner"
+                  >
+                    <Play className="w-3 h-3" />
+                  </button>
+                  <button
+                    onClick={() =>
+                      removeQuestionFile(currentQuestion.id, cf.id)
+                    }
+                    className="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-red-400 transition-all"
+                    title="Remove"
+                  >
+                    <Trash2 className="w-3 h-3" />
+                  </button>
+                </div>
+              ))}
+            {(currentQuestion.contextFiles || []).filter(
+              (f) => f.origin === "user",
+            ).length === 0 && (
+              <p className="text-[10px] text-slate-700 italic">
+                Save code from the runner to see it here
+              </p>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* ── AI Generated section ──────────────────────────── */}
+      {currentQuestion && (
+        <div className="border-t border-slate-800 px-3 py-2">
+          <div className="flex items-center gap-1 mb-1">
+            <Sparkles className="w-3 h-3 text-violet-400/70" />
+            <span className="text-[10px] uppercase tracking-wider text-slate-600">
+              AI Generated (
+              {
+                (currentQuestion.contextFiles || []).filter(
+                  (f) => f.origin === "ai",
+                ).length
+              }
+              )
+            </span>
+          </div>
+          <div className="space-y-0.5 max-h-32 overflow-y-auto">
+            {(currentQuestion.contextFiles || [])
+              .filter((f) => f.origin === "ai")
+              .map((cf) => (
+                <div
+                  key={cf.id}
+                  className="flex items-center gap-1 text-xs bg-violet-500/10 border border-violet-500/20 rounded px-1.5 py-1 group"
+                >
+                  <span
+                    className="text-violet-300 font-medium truncate flex-1"
+                    title={cf.label || cf.originalName}
+                  >
+                    {cf.label || cf.originalName}
+                  </span>
+                  <button
+                    onClick={async () => {
+                      const content = await fetch(
+                        `/api/context-files/${cf.id}/content`,
+                      )
+                        .then((r) => r.json())
+                        .then((d) => d.content);
+                      openCodeRunner(content, cf.language ?? "typescript");
+                    }}
+                    className="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-violet-400 transition-all"
+                    title="Open in Code Runner"
+                  >
+                    <Play className="w-3 h-3" />
+                  </button>
+                  <button
+                    onClick={() =>
+                      removeQuestionFile(currentQuestion.id, cf.id)
+                    }
+                    className="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-red-400 transition-all"
+                    title="Remove"
+                  >
+                    <Trash2 className="w-3 h-3" />
+                  </button>
+                </div>
+              ))}
+            {(currentQuestion.contextFiles || []).filter(
+              (f) => f.origin === "ai",
+            ).length === 0 && (
+              <p className="text-[10px] text-slate-700 italic">
+                Save AI code blocks to see them here
+              </p>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* ── Sandboxes section ───────────────────────── */}
+      {currentQuestion && (
+        <div className="border-t border-slate-800 px-3 py-2">
+          <div className="flex items-center gap-1 mb-1">
+            <Server className="w-3 h-3 text-slate-500/70" />
+            <span className="text-[10px] uppercase tracking-wider text-slate-600">
+              Sandboxes (
+              {
+                (currentQuestion.contextFiles || []).filter(
+                  (f) => f.origin === "sandbox",
+                ).length
+              }
+              )
+            </span>
+          </div>
+          <div className="space-y-0.5 max-h-32 overflow-y-auto">
+            {(currentQuestion.contextFiles || [])
+              .filter((f) => f.origin === "sandbox")
+              .map((cf) => (
+                <div
+                  key={cf.id}
+                  className="flex items-center gap-1 text-xs bg-slate-500/10 border border-slate-500/20 rounded px-1.5 py-1 group"
+                >
+                  {renamingId !== cf.id && (
+                    <span
+                      className="text-slate-300 font-medium truncate flex-1"
+                      title={cf.label || cf.originalName}
+                    >
+                      {cf.label || cf.originalName}
+                    </span>
+                  )}
+                  {renamingId === cf.id ? (
+                    <>
+                      <input
+                        autoFocus
+                        value={renameValue}
+                        onChange={(e) => setRenameValue(e.target.value)}
+                        onKeyDown={async (e) => {
+                          if (e.key === "Enter") {
+                            e.preventDefault();
+                            if (renameValue.trim()) {
+                              await renameContextFile(
+                                currentQuestion.id,
+                                cf.id,
+                                renameValue.trim(),
+                              );
+                            }
+                            setRenamingId(null);
+                          } else if (e.key === "Escape") {
+                            setRenamingId(null);
+                          }
+                        }}
+                        className="w-28 bg-slate-900 border border-violet-600/50 rounded px-1.5 py-0.5 text-[11px] text-slate-200 outline-none focus:border-violet-500 shrink-0"
+                      />
+                      <button
+                        onClick={async () => {
+                          if (renameValue.trim()) {
+                            await renameContextFile(
+                              currentQuestion.id,
+                              cf.id,
+                              renameValue.trim(),
+                            );
+                          }
+                          setRenamingId(null);
+                        }}
+                        className="shrink-0 p-0.5 rounded text-violet-400 hover:bg-violet-600/20 transition-colors"
+                        title="Confirm"
+                      >
+                        <Check className="w-3 h-3" />
+                      </button>
+                      <button
+                        onClick={() => setRenamingId(null)}
+                        className="shrink-0 p-0.5 rounded text-slate-500 hover:text-slate-300 transition-colors"
+                        title="Cancel"
+                      >
+                        <X className="w-3 h-3" />
+                      </button>
+                    </>
+                  ) : (
+                    <>
+                      <button
+                        onClick={() => {
+                          setRenamingId(cf.id);
+                          setRenameValue(cf.label || cf.originalName);
+                        }}
+                        className="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-violet-300 transition-all"
+                        title="Rename"
+                      >
+                        <Pencil className="w-3 h-3" />
+                      </button>
+                      <button
+                        onClick={async () => {
+                          try {
+                            const raw = await fetch(
+                              `/api/context-files/${cf.id}/content`,
+                            )
+                              .then((r) => r.json())
+                              .then((d) => d.content as string);
+                            const parsed = JSON.parse(raw) as {
+                              serverCode: string;
+                              serverLang: string;
+                              clientCode: string;
+                              clientLang: string;
+                            };
+                            openSandbox(
+                              parsed.serverCode,
+                              parsed.serverLang,
+                              parsed.clientCode,
+                              parsed.clientLang,
+                              cf.id,
+                            );
+                          } catch {
+                            /* malformed — ignore */
+                          }
+                        }}
+                        className="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-violet-400 transition-all"
+                        title="Open in Sandbox"
+                      >
+                        <Play className="w-3 h-3" />
+                      </button>
+                      <button
+                        onClick={() =>
+                          removeQuestionFile(currentQuestion.id, cf.id)
+                        }
+                        className="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-red-400 transition-all"
+                        title="Remove"
+                      >
+                        <Trash2 className="w-3 h-3" />
+                      </button>
+                    </>
+                  )}
+                </div>
+              ))}
+            {(currentQuestion.contextFiles || []).filter(
+              (f) => f.origin === "sandbox",
+            ).length === 0 && (
+              <p className="text-[10px] text-slate-700 italic">
+                Save a sandbox to see it here
+              </p>
+            )}
+          </div>
+        </div>
+      )}
+
       {viewingFile && (
         <FileViewerModal
           filePath={viewingFile}

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

@@ -0,0 +1,179 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+import { X, Code2 } from "lucide-react";
+import MarkdownRenderer from "./MarkdownRenderer";
+
+export interface CodeAnnotation {
+  id: string;
+  lineNumber: number;
+  lineContent: string;
+  prompt: string;
+  response: string;
+  filePath: string;
+}
+
+interface Props {
+  annotation: CodeAnnotation;
+  onClose: () => void;
+  initialPos?: { x: number; y: number };
+}
+
+const DEFAULT_W = 400;
+const DEFAULT_H = 300;
+const MIN_W = 280;
+const MIN_H = 160;
+
+export default function CodeLineAnnotationPopup({
+  annotation,
+  onClose,
+  initialPos,
+}: Props) {
+  const [pos, setPos] = useState(() => ({
+    x:
+      initialPos?.x ??
+      Math.min(window.innerWidth - DEFAULT_W - 16, window.innerWidth * 0.6),
+    y: initialPos?.y ?? Math.max(8, window.innerHeight * 0.3),
+  }));
+  const [size, setSize] = useState({ w: DEFAULT_W, h: DEFAULT_H });
+
+  const dragStart = useRef<{
+    mx: number;
+    my: number;
+    ox: number;
+    oy: number;
+  } | null>(null);
+  const resizeStart = useRef<{
+    mx: number;
+    my: number;
+    ox: number;
+    oy: number;
+    ow: number;
+    oh: number;
+  } | null>(null);
+  const resizeDir = useRef<"e" | "s" | "se" | null>(null);
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      if (dragStart.current) {
+        setPos({
+          x: Math.max(
+            0,
+            dragStart.current.ox + (e.clientX - dragStart.current.mx),
+          ),
+          y: Math.max(
+            0,
+            dragStart.current.oy + (e.clientY - dragStart.current.my),
+          ),
+        });
+      }
+      if (resizeStart.current && resizeDir.current) {
+        const dx = e.clientX - resizeStart.current.mx;
+        const dy = e.clientY - resizeStart.current.my;
+        setSize((prev) => ({
+          w: resizeDir.current?.includes("e")
+            ? Math.max(MIN_W, resizeStart.current!.ow + dx)
+            : prev.w,
+          h: resizeDir.current?.includes("s")
+            ? Math.max(MIN_H, resizeStart.current!.oh + dy)
+            : prev.h,
+        }));
+      }
+    };
+    const onUp = () => {
+      dragStart.current = null;
+      resizeStart.current = null;
+      resizeDir.current = null;
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+    return () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+  }, []);
+
+  const onTitleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      dragStart.current = {
+        mx: e.clientX,
+        my: e.clientY,
+        ox: pos.x,
+        oy: pos.y,
+      };
+    },
+    [pos],
+  );
+
+  const startResize = (dir: "e" | "s" | "se") => (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    resizeDir.current = dir;
+    resizeStart.current = {
+      mx: e.clientX,
+      my: e.clientY,
+      ox: pos.x,
+      oy: pos.y,
+      ow: size.w,
+      oh: size.h,
+    };
+  };
+
+  const fileName = annotation.filePath.split("/").pop() ?? annotation.filePath;
+  const linePreview =
+    annotation.lineContent.trim().length > 55
+      ? annotation.lineContent.trim().slice(0, 55) + "…"
+      : annotation.lineContent.trim();
+
+  return (
+    <div
+      className="fixed z-[65] flex flex-col bg-slate-900 border border-violet-500/40 rounded-xl shadow-2xl overflow-hidden"
+      style={{ left: pos.x, top: pos.y, width: size.w, height: size.h }}
+    >
+      {/* Title bar */}
+      <div
+        className="flex items-start gap-2 px-3 py-2 bg-slate-800/90 border-b border-violet-700/30 cursor-move select-none shrink-0"
+        onMouseDown={onTitleMouseDown}
+      >
+        <Code2 className="w-3.5 h-3.5 text-violet-400 shrink-0 mt-0.5" />
+        <div className="flex-1 min-w-0">
+          <p className="text-xs font-medium text-slate-200 truncate">
+            {annotation.prompt}
+          </p>
+          <p className="text-[10px] text-slate-500 font-mono truncate mt-0.5">
+            {fileName}
+            <span className="text-violet-500/70">:{annotation.lineNumber}</span>
+            {linePreview && (
+              <span className="text-slate-600"> — {linePreview}</span>
+            )}
+          </p>
+        </div>
+        <button
+          onMouseDown={(e) => e.stopPropagation()}
+          onClick={onClose}
+          className="p-1 rounded hover:bg-slate-700 text-slate-500 hover:text-slate-300 transition-colors shrink-0"
+        >
+          <X className="w-3.5 h-3.5" />
+        </button>
+      </div>
+
+      {/* Body */}
+      <div className="flex-1 overflow-y-auto px-4 py-3 text-sm min-h-0">
+        <MarkdownRenderer content={annotation.response} />
+      </div>
+
+      {/* Resize handles */}
+      <div
+        className="absolute inset-y-0 right-0 w-1.5 cursor-ew-resize"
+        onMouseDown={startResize("e")}
+      />
+      <div
+        className="absolute inset-x-0 bottom-0 h-1.5 cursor-ns-resize"
+        onMouseDown={startResize("s")}
+      />
+      <div
+        className="absolute bottom-0 right-0 w-3 h-3 cursor-se-resize z-10"
+        onMouseDown={startResize("se")}
+      />
+    </div>
+  );
+}