create-interview-cockpit 0.26.1 → 0.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-interview-cockpit",
-  "version": "0.26.1",
+  "version": "0.27.0",
   "description": "Scaffold a personal AI-powered interview prep cockpit",
   "type": "module",
   "bin": {

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

@@ -150,7 +150,7 @@ function FolderNode({
     selectedFiles.includes(codeContextFileId(rootId, f)),
   ).length;
   const folderKey = codeContextFileId(rootId, node.path);
-  const isExpanded = expandedFolders.has(folderKey);
+  const isExpanded = Boolean(filter) || expandedFolders.has(folderKey);
 
   // Filter: if searching, only show nodes that have matching files
   const matchingFiles = filter
@@ -310,7 +310,8 @@ function CodeContextRootNode({
     : true;
   if (filter && !hasMatchingDescendants) return null;
 
-  const isExpanded = rootMatches || expandedFolders.has(rootKey);
+  const isExpanded =
+    Boolean(filter) || rootMatches || expandedFolders.has(rootKey);
   const checkState: "none" | "some" | "all" =
     selectedCount === 0 || rootFileIds.length === 0
       ? "none"

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

@@ -1,4 +1,12 @@
-import { memo, useEffect, useMemo, useRef, useState, useCallback } from "react";
+import {
+  memo,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useCallback,
+} from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 import {
@@ -12,9 +20,12 @@ import {
   MessageCircle,
   Send,
   Play,
+  Search,
+  ChevronUp,
+  ChevronDown,
 } from "lucide-react";
 import { useStore } from "../store";
-import type { CodeSnippet } from "../types";
+import type { CodeContextRoot, CodeSnippet } from "../types";
 import CodeLineAnnotationPopup, {
   type CodeAnnotation,
 } from "./CodeLineAnnotationPopup";
@@ -76,15 +87,141 @@ const LARGE_FILE_LINE_THRESHOLD = 2_500;
 const LARGE_FILE_CHAR_THRESHOLD = 220_000;
 const VIRTUAL_ROW_HEIGHT = 20;
 const VIRTUAL_OVERSCAN = 24;
+const CODE_CONTEXT_ROOT_SEPARATOR = "::";
 
 type ResizeDir = "e" | "s" | "se" | "sw" | "w" | "ne" | "nw" | "n" | null;
 
+interface CodeFileMeta {
+  rootId?: string;
+  rootName?: string;
+  relativePath?: string;
+  path?: string;
+}
+
+interface CodeFileBreadcrumbInfo {
+  rootName?: string;
+  parts: string[];
+  fileName: string;
+  fullPath: string;
+}
+
+function parseCodeContextFileId(fileId: string) {
+  const idx = fileId.indexOf(CODE_CONTEXT_ROOT_SEPARATOR);
+  if (idx === -1) return { rootId: null, relativePath: fileId };
+  return {
+    rootId: fileId.slice(0, idx),
+    relativePath: fileId.slice(idx + CODE_CONTEXT_ROOT_SEPARATOR.length),
+  };
+}
+
+function resolveCodeFileBreadcrumb(
+  filePath: string,
+  roots: CodeContextRoot[],
+  fetchedMeta: CodeFileMeta | null,
+  inlineLabel?: string,
+): CodeFileBreadcrumbInfo {
+  if (filePath.startsWith("inline:")) {
+    const label = inlineLabel ?? filePath.slice("inline:".length);
+    return {
+      rootName: "Inline",
+      parts: [label],
+      fileName: label,
+      fullPath: `Inline/${label}`,
+    };
+  }
+
+  const parsed = parseCodeContextFileId(filePath);
+  const root = parsed.rootId
+    ? roots.find((candidate) => candidate.id === parsed.rootId)
+    : (roots.find((candidate) =>
+        candidate.files.includes(parsed.relativePath),
+      ) ?? (roots.length === 1 ? roots[0] : undefined));
+  const relativePath = fetchedMeta?.relativePath ?? parsed.relativePath;
+  const rootName =
+    fetchedMeta?.rootName ?? root?.name ?? parsed.rootId ?? undefined;
+  const parts = relativePath.split("/").filter(Boolean);
+  const fileName = parts.at(-1) ?? relativePath;
+
+  return {
+    rootName,
+    parts: parts.length > 0 ? parts : [relativePath],
+    fileName,
+    fullPath: rootName ? `${rootName}/${relativePath}` : relativePath,
+  };
+}
+
+function FilePathBreadcrumb({ info }: { info: CodeFileBreadcrumbInfo }) {
+  const [expanded, setExpanded] = useState(false);
+  const shouldCollapse = Boolean(info.rootName) && info.parts.length > 2;
+  const visibleParts =
+    shouldCollapse && !expanded
+      ? [info.parts.at(-1) ?? info.fileName]
+      : info.parts;
+
+  useEffect(() => {
+    setExpanded(false);
+  }, [info.fullPath]);
+
+  const separator = <span className="text-slate-600 shrink-0">›</span>;
+  const toggle = (
+    <button
+      type="button"
+      onMouseDown={(e) => e.stopPropagation()}
+      onClick={() => setExpanded((value) => !value)}
+      className="px-1 rounded text-slate-500 hover:text-cyan-300 hover:bg-slate-700/70 shrink-0"
+      title={expanded ? "Collapse path" : "Expand full path"}
+    >
+      …
+    </button>
+  );
+
+  return (
+    <div
+      className="flex items-center gap-1 min-w-0 flex-1 overflow-x-auto whitespace-nowrap text-xs font-mono text-slate-300"
+      title={info.fullPath}
+    >
+      {info.rootName && (
+        <>
+          <span className="shrink-0 text-cyan-300">{info.rootName}</span>
+          {separator}
+        </>
+      )}
+      {shouldCollapse && !expanded && (
+        <>
+          {toggle}
+          {separator}
+        </>
+      )}
+      {visibleParts.map((part, index) => {
+        const isLast = index === visibleParts.length - 1;
+        return (
+          <span key={`${part}-${index}`} className="contents">
+            <span
+              className={isLast ? "text-slate-200" : "text-slate-400 shrink-0"}
+            >
+              {part}
+            </span>
+            {!isLast && separator}
+          </span>
+        );
+      })}
+      {shouldCollapse && expanded && (
+        <>
+          {separator}
+          {toggle}
+        </>
+      )}
+    </div>
+  );
+}
+
 interface CodeViewerContentProps {
   content: string;
   lang: string;
   selectedLines: Set<number>;
   chatContextLines: Set<number>;
   codeAnnotations: CodeAnnotation[];
+  activeSearchLine: number | null;
   onLineClick: (e: React.MouseEvent, lineNumber: number) => void;
 }
 
@@ -94,8 +231,10 @@ const CodeViewerContent = memo(function CodeViewerContent({
   selectedLines,
   chatContextLines,
   codeAnnotations,
+  activeSearchLine,
   onLineClick,
 }: CodeViewerContentProps) {
+  const syntaxScrollRef = useRef<HTMLDivElement>(null);
   const annotationLineSet = useMemo(
     () => new Set(codeAnnotations.map((annotation) => annotation.lineNumber)),
     [codeAnnotations],
@@ -105,6 +244,14 @@ const CodeViewerContent = memo(function CodeViewerContent({
     lineCount > LARGE_FILE_LINE_THRESHOLD ||
     content.length > LARGE_FILE_CHAR_THRESHOLD;
 
+  useEffect(() => {
+    if (!activeSearchLine || isLargeFile) return;
+    const target = syntaxScrollRef.current?.querySelector<HTMLElement>(
+      `[data-code-line="${activeSearchLine}"]`,
+    );
+    target?.scrollIntoView({ block: "center" });
+  }, [activeSearchLine, isLargeFile, content]);
+
   if (isLargeFile) {
     return (
       <VirtualizedPlainCodeViewer
@@ -112,13 +259,14 @@ const CodeViewerContent = memo(function CodeViewerContent({
         selectedLines={selectedLines}
         chatContextLines={chatContextLines}
         annotationLineSet={annotationLineSet}
+        activeSearchLine={activeSearchLine}
         onLineClick={onLineClick}
       />
     );
   }
 
   return (
-    <div className="h-full overflow-auto">
+    <div ref={syntaxScrollRef} className="h-full overflow-auto">
       <SyntaxHighlighter
         language={lang}
         style={oneDark}
@@ -129,9 +277,13 @@ const CodeViewerContent = memo(function CodeViewerContent({
           const hasAnnotation = annotationLineSet.has(lineNumber);
           const isChatCtx = chatContextLines.has(lineNumber);
           const isSelected = selectedLines.has(lineNumber);
+          const isSearchActive = activeSearchLine === lineNumber;
           let bg: string | undefined;
           let outline: string | undefined;
-          if (hasAnnotation) {
+          if (isSearchActive) {
+            bg = "rgba(34, 211, 238, 0.24)";
+            outline = "1px solid rgba(34, 211, 238, 0.7)";
+          } else if (hasAnnotation) {
             bg = "rgba(139, 92, 246, 0.2)";
             outline = "1px solid rgba(139, 92, 246, 0.35)";
           } else if (isChatCtx) {
@@ -142,6 +294,7 @@ const CodeViewerContent = memo(function CodeViewerContent({
             outline = "1px solid rgba(6, 182, 212, 0.3)";
           }
           return {
+            "data-code-line": lineNumber,
             onClick: (e: React.MouseEvent) =>
               lineNumber !== undefined && onLineClick(e, lineNumber),
             style: {
@@ -173,6 +326,7 @@ interface VirtualizedPlainCodeViewerProps {
   selectedLines: Set<number>;
   chatContextLines: Set<number>;
   annotationLineSet: Set<number>;
+  activeSearchLine: number | null;
   onLineClick: (e: React.MouseEvent, lineNumber: number) => void;
 }
 
@@ -181,6 +335,7 @@ function VirtualizedPlainCodeViewer({
   selectedLines,
   chatContextLines,
   annotationLineSet,
+  activeSearchLine,
   onLineClick,
 }: VirtualizedPlainCodeViewerProps) {
   const lines = useMemo(() => content.split(/\r?\n/), [content]);
@@ -198,6 +353,17 @@ function VirtualizedPlainCodeViewer({
     return () => observer.disconnect();
   }, []);
 
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el || !activeSearchLine) return;
+    const targetScrollTop = Math.max(
+      0,
+      (activeSearchLine - 1) * VIRTUAL_ROW_HEIGHT - el.clientHeight / 2,
+    );
+    el.scrollTop = targetScrollTop;
+    setScrollTop(targetScrollTop);
+  }, [activeSearchLine]);
+
   const visibleStart = Math.max(
     0,
     Math.floor(scrollTop / VIRTUAL_ROW_HEIGHT) - VIRTUAL_OVERSCAN,
@@ -235,20 +401,25 @@ function VirtualizedPlainCodeViewer({
             const hasAnnotation = annotationLineSet.has(lineNumber);
             const isChatCtx = chatContextLines.has(lineNumber);
             const isSelected = selectedLines.has(lineNumber);
-            const backgroundColor = hasAnnotation
-              ? "rgba(139, 92, 246, 0.2)"
-              : isChatCtx
-                ? "rgba(245, 158, 11, 0.15)"
-                : isSelected
-                  ? "rgba(6, 182, 212, 0.15)"
-                  : undefined;
-            const outline = hasAnnotation
-              ? "1px solid rgba(139, 92, 246, 0.35)"
-              : isChatCtx
-                ? "1px solid rgba(245, 158, 11, 0.3)"
-                : isSelected
-                  ? "1px solid rgba(6, 182, 212, 0.3)"
-                  : undefined;
+            const isSearchActive = activeSearchLine === lineNumber;
+            const backgroundColor = isSearchActive
+              ? "rgba(34, 211, 238, 0.24)"
+              : hasAnnotation
+                ? "rgba(139, 92, 246, 0.2)"
+                : isChatCtx
+                  ? "rgba(245, 158, 11, 0.15)"
+                  : isSelected
+                    ? "rgba(6, 182, 212, 0.15)"
+                    : undefined;
+            const outline = isSearchActive
+              ? "1px solid rgba(34, 211, 238, 0.7)"
+              : hasAnnotation
+                ? "1px solid rgba(139, 92, 246, 0.35)"
+                : isChatCtx
+                  ? "1px solid rgba(245, 158, 11, 0.3)"
+                  : isSelected
+                    ? "1px solid rgba(6, 182, 212, 0.3)"
+                    : undefined;
 
             return (
               <div
@@ -283,17 +454,25 @@ export default function FileViewerModal({ filePath, onClose }: Props) {
     livePreferenceSuffix,
     inlineCodeSnippets,
     openCodeRunner,
+    codeContextRoots,
   } = 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 [fetchedFileMeta, setFetchedFileMeta] = useState<CodeFileMeta | null>(
+    null,
+  );
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [maximized, setMaximized] = useState(false);
   const [selectedLines, setSelectedLines] = useState<Set<number>>(new Set());
   const [addedFeedback, setAddedFeedback] = useState(false);
   const lastClickedLineRef = useRef<number | null>(null);
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeSearchIndex, setActiveSearchIndex] = useState(0);
+  const searchInputRef = useRef<HTMLInputElement>(null);
 
   // ── Code chat ─────────────────────────────────────────────
   const [chatPanelOpen, setChatPanelOpen] = useState(false);
@@ -335,15 +514,75 @@ export default function FileViewerModal({ filePath, onClose }: Props) {
 
   const isInline = filePath.startsWith("inline:");
   const inlineEntry = isInline ? inlineCodeSnippets[filePath] : undefined;
-  const fileName = isInline
-    ? (inlineEntry?.label ?? filePath.slice("inline:".length))
-    : (filePath.split("/").pop() ?? filePath);
+  const breadcrumbInfo = useMemo(
+    () =>
+      resolveCodeFileBreadcrumb(
+        filePath,
+        codeContextRoots,
+        fetchedFileMeta,
+        inlineEntry?.label,
+      ),
+    [filePath, codeContextRoots, fetchedFileMeta, inlineEntry?.label],
+  );
+  const fileName = breadcrumbInfo.fileName;
+  const deferredSearchQuery = useDeferredValue(searchQuery);
+  const searchableLines = useMemo(
+    () => content?.split(/\r?\n/).map((line) => line.toLowerCase()) ?? [],
+    [content],
+  );
+  const searchMatches = useMemo(() => {
+    const query = deferredSearchQuery.trim().toLowerCase();
+    if (!query || searchableLines.length === 0) return [];
+    const matches: number[] = [];
+    searchableLines.forEach((line, index) => {
+      if (line.includes(query)) matches.push(index + 1);
+    });
+    return matches;
+  }, [deferredSearchQuery, searchableLines]);
+  const clampedSearchIndex =
+    searchMatches.length === 0
+      ? 0
+      : Math.min(activeSearchIndex, searchMatches.length - 1);
+  const activeSearchLine = searchMatches[clampedSearchIndex] ?? null;
+
+  useEffect(() => {
+    setActiveSearchIndex(0);
+  }, [deferredSearchQuery, content]);
+
+  useEffect(() => {
+    if (!searchOpen) return;
+    setTimeout(() => searchInputRef.current?.focus(), 0);
+  }, [searchOpen]);
+
+  const moveSearch = useCallback(
+    (direction: 1 | -1) => {
+      setActiveSearchIndex((prev) => {
+        if (searchMatches.length === 0) return 0;
+        return (prev + direction + searchMatches.length) % searchMatches.length;
+      });
+    },
+    [searchMatches.length],
+  );
+
+  const toggleSearch = useCallback(() => {
+    setSearchOpen((open) => {
+      const next = !open;
+      if (!next) {
+        setSearchQuery("");
+        setActiveSearchIndex(0);
+      }
+      return next;
+    });
+  }, []);
 
   // Fetch file content + load persisted annotations
   useEffect(() => {
     setLoading(true);
     setError(null);
+    setFetchedFileMeta(null);
     setSelectedLines(new Set());
+    setSearchQuery("");
+    setActiveSearchIndex(0);
     lastClickedLineRef.current = null;
     setChatContextLines(new Set());
     setChatInput("");
@@ -385,7 +624,15 @@ export default function FileViewerModal({ filePath, onClose }: Props) {
       .then((r) => r.json())
       .then((d) => {
         if (d.error) setError(d.error);
-        else setContent(d.content as string);
+        else {
+          setContent(d.content as string);
+          setFetchedFileMeta({
+            path: d.path,
+            rootId: d.rootId,
+            rootName: d.rootName,
+            relativePath: d.relativePath,
+          });
+        }
       })
       .catch(() => setError("Failed to load file."))
       .finally(() => setLoading(false));
@@ -680,11 +927,18 @@ export default function FileViewerModal({ filePath, onClose }: Props) {
 
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
+      if (e.key !== "Escape") return;
+      if (searchOpen) {
+        e.preventDefault();
+        setSearchOpen(false);
+        setSearchQuery("");
+        return;
+      }
+      onClose();
     };
     document.addEventListener("keydown", handler);
     return () => document.removeEventListener("keydown", handler);
-  }, [onClose]);
+  }, [onClose, searchOpen]);
 
   // Keep refs in sync with state for use inside [] dep callbacks
   codeAnnotationsRef.current = codeAnnotations;
@@ -727,15 +981,22 @@ export default function FileViewerModal({ filePath, onClose }: Props) {
           style={{ cursor: maximized ? "default" : "grab" }}
         >
           <GripVertical className="w-3.5 h-3.5 text-slate-600 shrink-0" />
-          <span
-            className="text-xs font-mono text-slate-300 truncate flex-1"
-            title={filePath}
-          >
-            {fileName}
-          </span>
+          <FilePathBreadcrumb info={breadcrumbInfo} />
           <span className="text-[10px] text-slate-600 shrink-0 uppercase tracking-wider hidden sm:block">
             {lang}
           </span>
+          <button
+            onMouseDown={(e) => e.stopPropagation()}
+            onClick={toggleSearch}
+            className={`p-1 rounded transition-colors shrink-0 ${
+              searchOpen
+                ? "text-cyan-300 bg-cyan-500/10 hover:bg-cyan-500/20"
+                : "text-slate-500 hover:bg-slate-700 hover:text-slate-300"
+            }`}
+            title="Search in file"
+          >
+            <Search className="w-3.5 h-3.5" />
+          </button>
           <button
             onClick={toggleMax}
             className="p-1 rounded hover:bg-slate-700 text-slate-500 hover:text-slate-300 transition-colors shrink-0"
@@ -796,6 +1057,64 @@ export default function FileViewerModal({ filePath, onClose }: Props) {
           </button>
         </div>
 
+        {searchOpen && (
+          <div className="shrink-0 flex items-center gap-2 px-3 py-2 bg-slate-900 border-b border-slate-800">
+            <Search className="w-3.5 h-3.5 text-cyan-400/70 shrink-0" />
+            <input
+              ref={searchInputRef}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  moveSearch(e.shiftKey ? -1 : 1);
+                }
+                if (e.key === "Escape") {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setSearchOpen(false);
+                  setSearchQuery("");
+                }
+              }}
+              placeholder="Search in this file…"
+              className="flex-1 min-w-0 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-xs text-slate-200 placeholder-slate-600 focus:outline-none focus:border-cyan-500"
+            />
+            <span className="text-[10px] text-slate-500 font-mono shrink-0 min-w-10 text-right">
+              {searchQuery.trim()
+                ? searchMatches.length > 0
+                  ? `${clampedSearchIndex + 1}/${searchMatches.length}`
+                  : "0/0"
+                : ""}
+            </span>
+            <button
+              onClick={() => moveSearch(-1)}
+              disabled={searchMatches.length === 0}
+              className="p-1 rounded text-slate-500 hover:text-cyan-300 hover:bg-slate-800 disabled:opacity-40 disabled:hover:text-slate-500 disabled:hover:bg-transparent"
+              title="Previous match"
+            >
+              <ChevronUp className="w-3.5 h-3.5" />
+            </button>
+            <button
+              onClick={() => moveSearch(1)}
+              disabled={searchMatches.length === 0}
+              className="p-1 rounded text-slate-500 hover:text-cyan-300 hover:bg-slate-800 disabled:opacity-40 disabled:hover:text-slate-500 disabled:hover:bg-transparent"
+              title="Next match"
+            >
+              <ChevronDown className="w-3.5 h-3.5" />
+            </button>
+            <button
+              onClick={() => {
+                setSearchOpen(false);
+                setSearchQuery("");
+              }}
+              className="p-1 rounded text-slate-500 hover:text-red-400 hover:bg-slate-800"
+              title="Close search"
+            >
+              <X className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        )}
+
         {/* ── Content ── */}
         <div className="flex-1 min-h-0">
           {loading && (
@@ -815,6 +1134,7 @@ export default function FileViewerModal({ filePath, onClose }: Props) {
               selectedLines={selectedLines}
               chatContextLines={chatContextLines}
               codeAnnotations={codeAnnotations}
+              activeSearchLine={activeSearchLine}
               onLineClick={handleLineClick}
             />
           )}

package/template/cockpit.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.25.0"
+  "version": "0.26.0"
 }