create-interview-cockpit 0.1.0

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

@@ -0,0 +1,470 @@
+import { useEffect, useState, useCallback } from "react";
+import { useStore } from "../store";
+import FileViewerModal from "./FileViewerModal";
+import {
+  File,
+  Search,
+  FolderOpen,
+  Folder,
+  Check,
+  X,
+  ChevronRight,
+  ChevronDown,
+  Square,
+  CheckSquare,
+  MinusSquare,
+  Eye,
+  Scissors,
+} from "lucide-react";
+
+// ─── Tree data structure ─────────────────────────────────
+
+interface TreeNode {
+  name: string;
+  path: string; // full relative path for folders (e.g. "client/src/app")
+  children: TreeNode[];
+  files: string[]; // full file paths that are direct children
+}
+
+function buildTree(paths: string[]): TreeNode {
+  const root: TreeNode = { name: "", path: "", children: [], files: [] };
+
+  for (const filePath of paths) {
+    const parts = filePath.split("/");
+    let node = root;
+
+    for (let i = 0; i < parts.length - 1; i++) {
+      const folderName = parts[i];
+      const folderPath = parts.slice(0, i + 1).join("/");
+      let child = node.children.find((c) => c.name === folderName);
+      if (!child) {
+        child = { name: folderName, path: folderPath, children: [], files: [] };
+        node.children.push(child);
+      }
+      node = child;
+    }
+    node.files.push(filePath);
+  }
+
+  return root;
+}
+
+/** Get all file paths under a tree node recursively */
+function getAllFiles(node: TreeNode): string[] {
+  const result = [...node.files];
+  for (const child of node.children) {
+    result.push(...getAllFiles(child));
+  }
+  return result;
+}
+
+// ─── Folder node component ──────────────────────────────
+
+interface FolderNodeProps {
+  node: TreeNode;
+  selectedFiles: string[];
+  onToggleFile: (path: string) => void;
+  onToggleFolder: (paths: string[]) => void;
+  expandedFolders: Set<string>;
+  onToggleExpand: (path: string) => void;
+  depth: number;
+  filter: string;
+  onOpenFile: (path: string) => void;
+}
+
+function FolderNode({
+  node,
+  selectedFiles,
+  onToggleFile,
+  onToggleFolder,
+  expandedFolders,
+  onToggleExpand,
+  depth,
+  filter,
+  onOpenFile,
+}: FolderNodeProps) {
+  const allFiles = getAllFiles(node);
+  const selectedCount = allFiles.filter((f) =>
+    selectedFiles.includes(f),
+  ).length;
+  const isExpanded = expandedFolders.has(node.path);
+
+  // Filter: if searching, only show nodes that have matching files
+  const matchingFiles = filter
+    ? node.files.filter((f) => f.toLowerCase().includes(filter))
+    : node.files;
+  const hasMatchingDescendants = filter
+    ? allFiles.some((f) => f.toLowerCase().includes(filter))
+    : true;
+
+  if (filter && !hasMatchingDescendants) return null;
+
+  const checkState: "none" | "some" | "all" =
+    selectedCount === 0
+      ? "none"
+      : selectedCount === allFiles.length
+        ? "all"
+        : "some";
+
+  const CheckIcon =
+    checkState === "all"
+      ? CheckSquare
+      : checkState === "some"
+        ? MinusSquare
+        : Square;
+  const checkColor = checkState === "none" ? "text-slate-600" : "text-cyan-400";
+
+  return (
+    <div>
+      <div
+        className="flex items-center gap-0.5 py-0.5 cursor-pointer group"
+        style={{ paddingLeft: `${depth * 12 + 4}px` }}
+      >
+        <button
+          onClick={() => onToggleExpand(node.path)}
+          className="shrink-0 text-slate-500 hover:text-slate-300"
+        >
+          {isExpanded ? (
+            <ChevronDown className="w-3 h-3" />
+          ) : (
+            <ChevronRight className="w-3 h-3" />
+          )}
+        </button>
+        <button
+          onClick={() => onToggleFolder(allFiles)}
+          className={`shrink-0 ${checkColor} hover:text-cyan-300`}
+        >
+          <CheckIcon className="w-3.5 h-3.5" />
+        </button>
+        {isExpanded ? (
+          <FolderOpen className="w-3 h-3 text-amber-500/70 shrink-0" />
+        ) : (
+          <Folder className="w-3 h-3 text-amber-500/70 shrink-0" />
+        )}
+        <button
+          onClick={() => onToggleExpand(node.path)}
+          className="text-xs text-slate-400 hover:text-slate-200 truncate text-left flex-1"
+        >
+          {node.name}
+        </button>
+        {selectedCount > 0 && (
+          <span className="text-[10px] text-cyan-500/70 shrink-0 mr-1">
+            {selectedCount}
+          </span>
+        )}
+      </div>
+
+      {isExpanded && (
+        <div>
+          {node.children
+            .sort((a, b) => a.name.localeCompare(b.name))
+            .map((child) => (
+              <FolderNode
+                key={child.path}
+                node={child}
+                selectedFiles={selectedFiles}
+                onToggleFile={onToggleFile}
+                onToggleFolder={onToggleFolder}
+                expandedFolders={expandedFolders}
+                onToggleExpand={onToggleExpand}
+                depth={depth + 1}
+                filter={filter}
+                onOpenFile={onOpenFile}
+              />
+            ))}
+          {matchingFiles
+            .sort((a, b) => a.localeCompare(b))
+            .map((filePath) => {
+              const isSelected = selectedFiles.includes(filePath);
+              const fileName = filePath.split("/").pop()!;
+              return (
+                <div
+                  key={filePath}
+                  className={`flex items-center py-0.5 group ${
+                    isSelected ? "text-cyan-400" : "text-slate-500"
+                  }`}
+                  style={{ paddingLeft: `${(depth + 1) * 12 + 4 + 14}px` }}
+                >
+                  <button
+                    onClick={() => onToggleFile(filePath)}
+                    className="flex items-center gap-1 flex-1 min-w-0 hover:text-slate-300 transition-colors text-xs text-left"
+                  >
+                    <File className="w-3 h-3 shrink-0" />
+                    <span className="truncate">{fileName}</span>
+                  </button>
+                  <button
+                    onClick={() => onOpenFile(filePath)}
+                    className="shrink-0 mr-1 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-cyan-400 transition-all"
+                    title="View file"
+                  >
+                    <Eye className="w-3 h-3" />
+                  </button>
+                </div>
+              );
+            })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Main panel ─────────────────────────────────────────
+
+export default function CodeContextPanel() {
+  const {
+    availableFiles,
+    currentQuestion,
+    fetchAvailableFiles,
+    updateCodeContext,
+    codeSnippets,
+    removeSnippet,
+    clearSnippets,
+  } = useStore();
+
+  const [search, setSearch] = useState("");
+  const [selectedFiles, setSelectedFiles] = useState<string[]>(
+    currentQuestion?.codeContextFiles || [],
+  );
+  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(
+    new Set(),
+  );
+  const [viewingFile, setViewingFile] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchAvailableFiles();
+  }, []);
+
+  useEffect(() => {
+    setSelectedFiles(currentQuestion?.codeContextFiles || []);
+  }, [currentQuestion?.id]);
+
+  const tree = buildTree(availableFiles);
+
+  const toggleFile = useCallback(
+    (filePath: string) => {
+      setSelectedFiles((prev) => {
+        const next = prev.includes(filePath)
+          ? prev.filter((f) => f !== filePath)
+          : [...prev, filePath];
+        if (currentQuestion) updateCodeContext(currentQuestion.id, next);
+        return next;
+      });
+    },
+    [currentQuestion, updateCodeContext],
+  );
+
+  const toggleFolder = useCallback(
+    (folderFiles: string[]) => {
+      setSelectedFiles((prev) => {
+        const allSelected = folderFiles.every((f) => prev.includes(f));
+        const next = allSelected
+          ? prev.filter((f) => !folderFiles.includes(f))
+          : [...new Set([...prev, ...folderFiles])];
+        if (currentQuestion) updateCodeContext(currentQuestion.id, next);
+        return next;
+      });
+    },
+    [currentQuestion, updateCodeContext],
+  );
+
+  const toggleExpand = useCallback((path: string) => {
+    setExpandedFolders((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  }, []);
+
+  const filter = search.toLowerCase();
+
+  return (
+    <div className="w-72 border-l border-slate-800 flex flex-col bg-slate-900/30 shrink-0">
+      {/* Header */}
+      <div className="border-b border-slate-800 px-3 py-2">
+        <div className="flex items-center justify-between mb-2">
+          <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>
+        <div className="relative">
+          <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-slate-600" />
+          <input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Filter files..."
+            className="w-full bg-slate-800 border border-slate-700 rounded pl-7 pr-2 py-1 text-xs text-slate-300 placeholder-slate-600 focus:outline-none focus:border-cyan-500"
+          />
+        </div>
+      </div>
+
+      {/* Snippets section */}
+      {codeSnippets.length > 0 && (
+        <div className="border-b border-slate-800 px-3 py-2">
+          <div className="flex items-center justify-between mb-1">
+            <div className="flex items-center gap-1">
+              <Scissors className="w-3 h-3 text-amber-400/70" />
+              <span className="text-[10px] uppercase tracking-wider text-slate-600">
+                Snippets ({codeSnippets.length})
+              </span>
+            </div>
+            <button
+              onClick={clearSnippets}
+              className="text-[10px] text-red-400/60 hover:text-red-400"
+            >
+              Clear all
+            </button>
+          </div>
+          <div className="space-y-0.5 max-h-32 overflow-y-auto">
+            {codeSnippets.map((s) => (
+              <div
+                key={s.id}
+                className="flex items-start gap-1 text-xs bg-amber-500/10 border border-amber-500/20 rounded px-1.5 py-1 group"
+              >
+                <div className="flex-1 min-w-0">
+                  <span className="text-amber-400 font-medium">
+                    {s.fileName}
+                  </span>
+                  <span className="text-slate-500 mx-1">&rsaquo;</span>
+                  <span className="text-slate-500">
+                    line{s.startLine !== s.endLine ? "s" : ""}{" "}
+                    {s.startLine === s.endLine
+                      ? s.startLine
+                      : `${s.startLine}–${s.endLine}`}
+                  </span>
+                  <p className="text-[10px] font-mono text-slate-600 mt-0.5 truncate">
+                    {s.code.split("\n")[0]}
+                  </p>
+                </div>
+                <button
+                  onClick={() => removeSnippet(s.id)}
+                  className="shrink-0 mt-0.5 text-slate-600 hover:text-red-400 transition-colors"
+                >
+                  <X className="w-2.5 h-2.5" />
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Selected summary */}
+      {selectedFiles.length > 0 && (
+        <div className="border-b border-slate-800 px-3 py-2">
+          <div className="flex items-center justify-between">
+            <span className="text-[10px] uppercase tracking-wider text-slate-600">
+              Selected ({selectedFiles.length})
+            </span>
+            <button
+              onClick={() => {
+                setSelectedFiles([]);
+                if (currentQuestion) updateCodeContext(currentQuestion.id, []);
+              }}
+              className="text-[10px] text-red-400/60 hover:text-red-400"
+            >
+              Clear all
+            </button>
+          </div>
+          <div className="mt-1 space-y-0.5 max-h-24 overflow-y-auto">
+            {selectedFiles.map((f) => (
+              <div
+                key={f}
+                className="flex items-center gap-1 text-xs text-cyan-400 bg-cyan-500/10 rounded px-1.5 py-0.5 group"
+              >
+                <Check className="w-2.5 h-2.5 shrink-0" />
+                <button
+                  onClick={() => setViewingFile(f)}
+                  className="truncate flex-1 text-left hover:underline"
+                  title="View file"
+                >
+                  {f.split("/").pop()}
+                </button>
+                <button
+                  onClick={() => toggleFile(f)}
+                  className="shrink-0 hover:text-red-400"
+                >
+                  <X className="w-2.5 h-2.5" />
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Tree browser */}
+      <div className="flex-1 overflow-y-auto py-1">
+        {!currentQuestion ? (
+          <div className="p-3 text-center">
+            <p className="text-xs text-slate-600">Select a question first</p>
+          </div>
+        ) : availableFiles.length === 0 ? (
+          <div className="p-3 text-center">
+            <p className="text-xs text-slate-600">
+              Set CODE_CONTEXT_DIR in .env
+            </p>
+            <p className="text-xs text-slate-700 mt-1">
+              to browse project files
+            </p>
+          </div>
+        ) : (
+          tree.children
+            .sort((a, b) => a.name.localeCompare(b.name))
+            .map((child) => (
+              <FolderNode
+                key={child.path}
+                node={child}
+                selectedFiles={selectedFiles}
+                onToggleFile={toggleFile}
+                onToggleFolder={toggleFolder}
+                expandedFolders={expandedFolders}
+                onToggleExpand={toggleExpand}
+                depth={0}
+                filter={filter}
+                onOpenFile={setViewingFile}
+              />
+            ))
+        )}
+        {/* Root-level files (if any) */}
+        {tree.files
+          .filter((f) => !filter || f.toLowerCase().includes(filter))
+          .map((filePath) => {
+            const isSelected = selectedFiles.includes(filePath);
+            return (
+              <div
+                key={filePath}
+                className={`flex items-center px-4 py-0.5 group ${
+                  isSelected ? "text-cyan-400" : "text-slate-500"
+                }`}
+              >
+                <button
+                  onClick={() => toggleFile(filePath)}
+                  className="flex items-center gap-1.5 flex-1 min-w-0 hover:text-slate-300 transition-colors text-xs text-left"
+                >
+                  <File className="w-3 h-3 shrink-0" />
+                  <span className="truncate">{filePath}</span>
+                </button>
+                <button
+                  onClick={() => setViewingFile(filePath)}
+                  className="shrink-0 mr-1 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-cyan-400 transition-all"
+                  title="View file"
+                >
+                  <Eye className="w-3 h-3" />
+                </button>
+              </div>
+            );
+          })}
+      </div>
+
+      {viewingFile && (
+        <FileViewerModal
+          filePath={viewingFile}
+          onClose={() => setViewingFile(null)}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,107 @@
+import { useRef } from "react";
+import type { ContextFile } from "../types";
+import { Paperclip, X, FileText } from "lucide-react";
+
+interface Props {
+  files: ContextFile[];
+  onUpload: (files: FileList) => Promise<void>;
+  onRemove: (fileId: string) => Promise<void>;
+  label: string;
+  compact?: boolean;
+}
+
+export default function FileAttachments({
+  files,
+  onUpload,
+  onRemove,
+  label,
+  compact,
+}: Props) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files?.length) {
+      await onUpload(e.target.files);
+      e.target.value = "";
+    }
+  };
+
+  if (compact) {
+    return (
+      <div className="flex items-center gap-1 flex-wrap">
+        <input
+          ref={inputRef}
+          type="file"
+          multiple
+          onChange={handleChange}
+          className="hidden"
+          accept=".txt,.md,.ts,.tsx,.js,.jsx,.json,.css,.scss,.html,.xml,.yaml,.yml,.csv,.py,.java,.cs,.go,.rs,.sql,.sh,.toml,.ini,.log,.cfg,.conf,.env,.pdf,.docx"
+        />
+        {files.map((f) => (
+          <span
+            key={f.id}
+            className="inline-flex items-center gap-1 bg-violet-500/10 text-violet-400 px-1.5 py-0.5 rounded text-[10px]"
+          >
+            <FileText className="w-2.5 h-2.5" />
+            {f.originalName}
+            <button
+              onClick={() => onRemove(f.id)}
+              className="hover:text-red-400 transition-colors"
+            >
+              <X className="w-2.5 h-2.5" />
+            </button>
+          </span>
+        ))}
+        <button
+          onClick={() => inputRef.current?.click()}
+          className="inline-flex items-center gap-0.5 text-[10px] text-slate-600 hover:text-violet-400 transition-colors"
+          title={`Attach files to ${label}`}
+        >
+          <Paperclip className="w-2.5 h-2.5" />
+          Attach
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <input
+        ref={inputRef}
+        type="file"
+        multiple
+        onChange={handleChange}
+        className="hidden"
+        accept=".txt,.md,.ts,.tsx,.js,.jsx,.json,.css,.scss,.html,.xml,.yaml,.yml,.csv,.py,.java,.cs,.go,.rs,.sql,.sh,.toml,.ini,.log,.cfg,.conf,.env,.pdf,.docx"
+      />
+
+      {files.length > 0 && (
+        <div className="space-y-0.5 mb-1.5">
+          {files.map((f) => (
+            <div
+              key={f.id}
+              className="flex items-center gap-1.5 bg-violet-500/10 rounded px-2 py-0.5 text-xs text-violet-400"
+            >
+              <FileText className="w-3 h-3 shrink-0" />
+              <span className="truncate flex-1">{f.originalName}</span>
+              <button
+                onClick={() => onRemove(f.id)}
+                className="shrink-0 hover:text-red-400 transition-colors"
+              >
+                <X className="w-3 h-3" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <button
+        onClick={() => inputRef.current?.click()}
+        className="flex items-center gap-1 text-xs text-slate-600 hover:text-violet-400 transition-colors w-full"
+      >
+        <Paperclip className="w-3 h-3" />
+        Attach files to {label}
+      </button>
+    </div>
+  );
+}