create-interview-cockpit 0.1.0

package/template/client/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "interview-cockpit-client",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@ai-sdk/react": "^3.0.170",
+    "ai": "^6.0.168",
+    "lucide-react": "^0.460.0",
+    "mermaid": "^11.4.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-markdown": "^9.0.0",
+    "react-syntax-highlighter": "^15.6.1",
+    "remark-gfm": "^4.0.0",
+    "zustand": "^5.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.15",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@vitejs/plugin-react": "^4.3.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0"
+  }
+}

package/template/client/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/template/client/src/App.tsx

@@ -0,0 +1,120 @@
+import { useEffect } from "react";
+import { useStore } from "./store";
+import Sidebar from "./components/Sidebar";
+import ChatView from "./components/ChatView";
+import CodeContextPanel from "./components/CodeContextPanel";
+import FileViewerModal from "./components/FileViewerModal";
+import { Code, Plane, PanelLeftClose, PanelLeft } from "lucide-react";
+
+export default function App() {
+  const {
+    fetchTopics,
+    currentQuestion,
+    showCodePanel,
+    toggleCodePanel,
+    showSidebar,
+    toggleSidebar,
+    viewingFile,
+    closeFileViewer,
+  } = useStore();
+
+  useEffect(() => {
+    fetchTopics();
+  }, [fetchTopics]);
+
+  return (
+    <div className="flex h-screen bg-slate-950">
+      {showSidebar && <Sidebar />}
+
+      <main className="flex-1 flex flex-col min-w-0">
+        {/* Header bar */}
+        <header className="h-12 border-b border-slate-800 flex items-center justify-between px-4 shrink-0">
+          <div className="flex items-center gap-2">
+            <button
+              onClick={toggleSidebar}
+              className="p-1.5 rounded transition-colors text-slate-500 hover:text-slate-300 hover:bg-slate-800"
+              title={showSidebar ? "Hide sidebar" : "Show sidebar"}
+            >
+              {showSidebar ? (
+                <PanelLeftClose className="w-4 h-4" />
+              ) : (
+                <PanelLeft className="w-4 h-4" />
+              )}
+            </button>
+            <Plane className="w-5 h-5 text-cyan-400" />
+            <span className="text-sm font-semibold text-slate-300">
+              {currentQuestion ? currentQuestion.title : "Interview Cockpit"}
+            </span>
+          </div>
+          <button
+            onClick={toggleCodePanel}
+            className={`p-1.5 rounded transition-colors ${
+              showCodePanel
+                ? "bg-cyan-500/20 text-cyan-400"
+                : "text-slate-500 hover:text-slate-300"
+            }`}
+            title="Toggle code context"
+          >
+            <Code className="w-4 h-4" />
+          </button>
+        </header>
+
+        {/* Content area */}
+        <div className="flex-1 flex min-h-0">
+          <div className="flex-1 min-w-0">
+            {currentQuestion ? (
+              <ChatView key={currentQuestion.id} question={currentQuestion} />
+            ) : (
+              <EmptyState />
+            )}
+          </div>
+          {showCodePanel && (
+            <div
+              onWheel={(e) => {
+                // Walk up from the event target to check if any ancestor
+                // inside the code panel is itself scrollable — if so, let
+                // the browser handle it natively (no forwarding).
+                let el = e.target as HTMLElement | null;
+                while (el && el !== e.currentTarget) {
+                  const oy = getComputedStyle(el).overflowY;
+                  if (
+                    (oy === "auto" || oy === "scroll") &&
+                    el.scrollHeight > el.clientHeight
+                  ) {
+                    return;
+                  }
+                  el = el.parentElement;
+                }
+                // Nothing scrollable under cursor — forward to chat
+                const chatScroll = document.getElementById("chat-scroll-area");
+                if (chatScroll) chatScroll.scrollTop += e.deltaY;
+              }}
+            >
+              <CodeContextPanel />
+            </div>
+          )}
+        </div>
+      </main>
+
+      {viewingFile && (
+        <FileViewerModal filePath={viewingFile} onClose={closeFileViewer} />
+      )}
+    </div>
+  );
+}
+
+function EmptyState() {
+  return (
+    <div className="flex-1 flex items-center justify-center h-full">
+      <div className="text-center">
+        <Plane className="w-12 h-12 text-slate-700 mx-auto mb-4" />
+        <h2 className="text-lg font-medium text-slate-500">
+          Interview Cockpit
+        </h2>
+        <p className="text-sm text-slate-600 mt-1">
+          Select a question from the sidebar to start
+        </p>
+      </div>
+    </div>
+  );
+}

package/template/client/src/api.ts

@@ -0,0 +1,132 @@
+import type { Topic, Question, ContextFile } from "./types";
+
+const BASE = "/api";
+
+export async function fetchTopics(): Promise<Topic[]> {
+  const res = await fetch(`${BASE}/topics`);
+  return res.json();
+}
+
+export async function createTopic(name: string): Promise<Topic> {
+  const res = await fetch(`${BASE}/topics`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ name }),
+  });
+  return res.json();
+}
+
+export async function deleteTopic(id: string): Promise<void> {
+  await fetch(`${BASE}/topics/${id}`, { method: "DELETE" });
+}
+
+export async function updateTopic(
+  id: string,
+  data: { name?: string },
+): Promise<Topic> {
+  const res = await fetch(`${BASE}/topics/${id}`, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(data),
+  });
+  return res.json();
+}
+
+// --- Topic Context Files ---
+
+export async function uploadTopicFiles(
+  topicId: string,
+  files: FileList | File[],
+): Promise<ContextFile[]> {
+  const form = new FormData();
+  for (const file of files) form.append("files", file);
+  const res = await fetch(`${BASE}/topics/${topicId}/context-files`, {
+    method: "POST",
+    body: form,
+  });
+  return res.json();
+}
+
+export async function deleteTopicFile(
+  topicId: string,
+  fileId: string,
+): Promise<void> {
+  await fetch(`${BASE}/topics/${topicId}/context-files/${fileId}`, {
+    method: "DELETE",
+  });
+}
+
+// --- Questions ---
+
+export async function fetchQuestions(topicId: string): Promise<Question[]> {
+  const res = await fetch(`${BASE}/topics/${topicId}/questions`);
+  return res.json();
+}
+
+export async function createQuestion(
+  topicId: string,
+  title: string,
+  parentQuestionId?: string,
+): Promise<Question> {
+  const res = await fetch(`${BASE}/topics/${topicId}/questions`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      title,
+      ...(parentQuestionId ? { parentQuestionId } : {}),
+    }),
+  });
+  return res.json();
+}
+
+export async function fetchQuestion(id: string): Promise<Question> {
+  const res = await fetch(`${BASE}/questions/${id}`);
+  return res.json();
+}
+
+export async function updateQuestion(
+  id: string,
+  data: Partial<Question>,
+): Promise<Question> {
+  const res = await fetch(`${BASE}/questions/${id}`, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(data),
+  });
+  return res.json();
+}
+
+export async function deleteQuestion(id: string): Promise<void> {
+  await fetch(`${BASE}/questions/${id}`, { method: "DELETE" });
+}
+
+// --- Question Context Files ---
+
+export async function uploadQuestionFiles(
+  questionId: string,
+  files: FileList | File[],
+): Promise<ContextFile[]> {
+  const form = new FormData();
+  for (const file of files) form.append("files", file);
+  const res = await fetch(`${BASE}/questions/${questionId}/context-files`, {
+    method: "POST",
+    body: form,
+  });
+  return res.json();
+}
+
+export async function deleteQuestionFile(
+  questionId: string,
+  fileId: string,
+): Promise<void> {
+  await fetch(`${BASE}/questions/${questionId}/context-files/${fileId}`, {
+    method: "DELETE",
+  });
+}
+
+// --- Code Context ---
+
+export async function fetchCodeContextTree(): Promise<string[]> {
+  const res = await fetch(`${BASE}/code-context/tree`);
+  return res.json();
+}

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

@@ -0,0 +1,307 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+import { X, Loader2 } from "lucide-react";
+import type { Annotation, AnnotationFollowUp } from "../types";
+import MarkdownRenderer from "./MarkdownRenderer";
+
+const DEFAULT_W = 480;
+const DEFAULT_H = 440;
+const MIN_W = 300;
+const MIN_H = 220;
+
+type ResizeDir = "e" | "s" | "se" | "sw" | "w" | "ne" | "nw" | "n" | null;
+
+interface Props {
+  annotation: Annotation;
+  onClose: () => void;
+  onUpdate: (updated: Annotation) => void;
+  messageContent: string;
+  initialPos?: { x: number; y: number };
+  responseLength?: string;
+  responseStyle?: string;
+  responseAudience?: string;
+}
+
+export default function AnnotationDialog({
+  annotation,
+  onClose,
+  onUpdate,
+  messageContent,
+  initialPos,
+  responseLength,
+  responseStyle,
+  responseAudience,
+}: Props) {
+  const [pos, setPos] = useState(() => ({
+    x: initialPos?.x ?? Math.max(0, (window.innerWidth - DEFAULT_W) / 2),
+    y: initialPos?.y ?? Math.max(0, (window.innerHeight - DEFAULT_H) / 2),
+  }));
+  const [size, setSize] = useState({ w: DEFAULT_W, h: DEFAULT_H });
+  const [followUpInput, setFollowUpInput] = useState("");
+  const [followUpLoading, setFollowUpLoading] = useState(false);
+  const scrollBodyRef = useRef<HTMLDivElement>(null);
+
+  // Keep a ref to the latest annotation so async callbacks see current data
+  const annotationRef = useRef(annotation);
+  useEffect(() => {
+    annotationRef.current = annotation;
+  }, [annotation]);
+
+  // Scroll to bottom when follow-ups are added
+  useEffect(() => {
+    setTimeout(() => {
+      scrollBodyRef.current?.scrollTo({
+        top: scrollBodyRef.current.scrollHeight,
+        behavior: "smooth",
+      });
+    }, 50);
+  }, [annotation.followUps?.length]);
+
+  // ── Drag ───────────────────────────────────────────────
+  const dragStart = useRef<{
+    mx: number;
+    my: number;
+    ox: number;
+    oy: number;
+  } | null>(null);
+  const resizeDir = useRef<ResizeDir>(null);
+  const resizeStart = useRef<{
+    mx: number;
+    my: number;
+    ox: number;
+    oy: number;
+    ow: number;
+    oh: number;
+  } | null>(null);
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      const drag = dragStart.current;
+      const resize = resizeStart.current;
+      const dir = resizeDir.current;
+
+      if (drag) {
+        setPos({
+          x: Math.max(0, drag.ox + (e.clientX - drag.mx)),
+          y: Math.max(0, drag.oy + (e.clientY - drag.my)),
+        });
+      }
+
+      if (resize && dir) {
+        const dx = e.clientX - resize.mx;
+        const dy = e.clientY - resize.my;
+        setSize((prev) => {
+          let w = prev.w;
+          let h = prev.h;
+          if (dir.includes("e")) w = Math.max(MIN_W, resize.ow + dx);
+          if (dir.includes("s")) h = Math.max(MIN_H, resize.oh + dy);
+          if (dir.includes("w")) w = Math.max(MIN_W, resize.ow - dx);
+          if (dir.includes("n")) h = Math.max(MIN_H, resize.oh - dy);
+          return { w, h };
+        });
+        if (dir.includes("w")) {
+          setPos((prev) => ({
+            ...prev,
+            x: Math.min(resize.ox + resize.ow - MIN_W, resize.ox + dx),
+          }));
+        }
+        if (dir.includes("n")) {
+          setPos((prev) => ({
+            ...prev,
+            y: Math.min(resize.oy + resize.oh - MIN_H, resize.oy + dy),
+          }));
+        }
+      }
+    };
+    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 = useCallback(
+    (dir: ResizeDir) => (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,
+      };
+    },
+    [pos, size],
+  );
+
+  const handleFollowUpSubmit = async () => {
+    if (!followUpInput.trim() || followUpLoading) return;
+    const ann = annotationRef.current;
+    setFollowUpLoading(true);
+    try {
+      const res = await fetch("/api/inline-ask", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          selectedText: ann.selectedText,
+          prompt: followUpInput.trim(),
+          messageContent,
+          priorResponse: ann.response,
+          followUps: ann.followUps ?? [],
+          responseLength,
+          responseStyle,
+          responseAudience,
+        }),
+      });
+      const data = await res.json();
+      const newFollowUp: AnnotationFollowUp = {
+        id: crypto.randomUUID(),
+        prompt: followUpInput.trim(),
+        response: data.response ?? "No response.",
+        createdAt: new Date().toISOString(),
+      };
+      onUpdate({ ...ann, followUps: [...(ann.followUps ?? []), newFollowUp] });
+      setFollowUpInput("");
+    } catch {
+      // silently ignore
+    } finally {
+      setFollowUpLoading(false);
+    }
+  };
+
+  const excerpt =
+    annotation.selectedText.length > 70
+      ? annotation.selectedText.slice(0, 70) + "…"
+      : annotation.selectedText;
+
+  return (
+    <div
+      className="fixed z-50 flex flex-col bg-slate-900 border border-slate-700/80 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 border-b border-slate-700 cursor-move select-none shrink-0"
+        onMouseDown={onTitleMouseDown}
+      >
+        <div className="flex-1 min-w-0">
+          <p className="text-xs font-medium text-slate-300 truncate">
+            {annotation.prompt}
+          </p>
+          <p className="text-[10px] text-slate-500 truncate italic mt-0.5">
+            re: &ldquo;{excerpt}&rdquo;
+          </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 mt-0.5"
+        >
+          <X className="w-3.5 h-3.5" />
+        </button>
+      </div>
+
+      {/* Scrollable body */}
+      <div
+        ref={scrollBodyRef}
+        className="flex-1 overflow-y-auto px-4 py-3 text-sm"
+      >
+        <MarkdownRenderer content={annotation.response} />
+        {(annotation.followUps ?? []).map((fu) => (
+          <div key={fu.id}>
+            <hr className="border-slate-700 my-3" />
+            <p className="text-[11px] text-slate-500 mb-1.5">
+              ↳ You: {fu.prompt}
+            </p>
+            <MarkdownRenderer content={fu.response} />
+          </div>
+        ))}
+      </div>
+
+      {/* Follow-up input */}
+      <div className="shrink-0 border-t border-slate-700/60 bg-slate-800/80 px-2.5 py-2 flex gap-2 items-end">
+        <textarea
+          value={followUpInput}
+          onChange={(e) => setFollowUpInput(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              handleFollowUpSubmit();
+            }
+            if (e.key === "Escape") onClose();
+          }}
+          placeholder="Ask a follow-up…"
+          rows={1}
+          disabled={followUpLoading}
+          className="flex-1 bg-slate-900 text-slate-200 text-xs rounded-lg px-2 py-1.5 resize-none outline-none border border-slate-700 focus:border-cyan-500 transition-colors disabled:opacity-50"
+        />
+        <button
+          onClick={handleFollowUpSubmit}
+          disabled={followUpLoading || !followUpInput.trim()}
+          className="shrink-0 bg-cyan-700 hover:bg-cyan-600 disabled:opacity-40 disabled:cursor-not-allowed text-white text-xs px-2.5 py-1.5 rounded-lg transition-colors flex items-center gap-1"
+        >
+          {followUpLoading ? (
+            <Loader2 size={12} className="animate-spin" />
+          ) : (
+            "Ask"
+          )}
+        </button>
+      </div>
+
+      {/* Resize handles */}
+      <div
+        className="absolute inset-x-0 bottom-0 h-1.5 cursor-s-resize"
+        onMouseDown={startResize("s")}
+      />
+      <div
+        className="absolute inset-y-0 right-0 w-1.5 cursor-e-resize"
+        onMouseDown={startResize("e")}
+      />
+      <div
+        className="absolute bottom-0 right-0 w-3 h-3 cursor-se-resize"
+        onMouseDown={startResize("se")}
+      />
+      <div
+        className="absolute inset-y-0 left-0 w-1.5 cursor-w-resize"
+        onMouseDown={startResize("w")}
+      />
+      <div
+        className="absolute inset-x-0 top-[32px] h-1.5 cursor-n-resize"
+        onMouseDown={startResize("n")}
+      />
+      <div
+        className="absolute bottom-0 left-0 w-3 h-3 cursor-sw-resize"
+        onMouseDown={startResize("sw")}
+      />
+      <div
+        className="absolute top-[32px] right-0 w-3 h-3 cursor-ne-resize"
+        onMouseDown={startResize("ne")}
+      />
+      <div
+        className="absolute top-[32px] left-0 w-3 h-3 cursor-nw-resize"
+        onMouseDown={startResize("nw")}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,89 @@
+import { memo } from "react";
+import type { UIMessage } from "ai";
+import { User, Bot } from "lucide-react";
+import TextAnnotator from "./TextAnnotator";
+import type { Annotation } from "../types";
+
+interface Props {
+  message: UIMessage;
+  annotations?: Annotation[];
+  onAnnotationCreate?: (annotation: Annotation) => void;
+  onAnnotationUpdate?: (annotation: Annotation) => void;
+  bookmarkedBlockIndex?: number;
+  onSetBookmark?: (messageId: string, blockIndex: number) => void;
+  responseLength?: string;
+  responseStyle?: string;
+  responseAudience?: string;
+}
+
+function getTextContent(message: UIMessage): string {
+  if (message.parts) {
+    return message.parts
+      .filter((p): p is { type: "text"; text: string } => p.type === "text")
+      .map((p) => p.text)
+      .join("");
+  }
+  return "";
+}
+
+const ChatMessage = memo(function ChatMessage({
+  message,
+  annotations = [],
+  onAnnotationCreate,
+  onAnnotationUpdate,
+  bookmarkedBlockIndex,
+  onSetBookmark,
+  responseLength,
+  responseStyle,
+  responseAudience,
+}: Props) {
+  const isUser = message.role === "user";
+  const content = getTextContent(message);
+
+  return (
+    <div className="flex gap-3 animate-fadeIn">
+      <div
+        className={`w-7 h-7 rounded-full flex items-center justify-center shrink-0 mt-0.5 ${
+          isUser
+            ? "bg-slate-700 text-slate-300"
+            : "bg-cyan-500/20 text-cyan-400"
+        }`}
+      >
+        {isUser ? (
+          <User className="w-3.5 h-3.5" />
+        ) : (
+          <Bot className="w-3.5 h-3.5" />
+        )}
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="text-[10px] font-medium text-slate-600 mb-1">
+          {isUser ? "You" : "Coach"}
+        </div>
+        <div className="text-sm leading-relaxed text-slate-200">
+          {isUser ? (
+            <p className="whitespace-pre-wrap text-slate-300">{content}</p>
+          ) : (
+            <TextAnnotator
+              content={content}
+              messageId={message.id}
+              annotations={annotations}
+              onAnnotationCreate={onAnnotationCreate ?? (() => {})}
+              onAnnotationUpdate={onAnnotationUpdate ?? (() => {})}
+              bookmarkedBlockIndex={bookmarkedBlockIndex}
+              onBookmarkBlock={
+                onSetBookmark
+                  ? (idx) => onSetBookmark(message.id, idx)
+                  : undefined
+              }
+              responseLength={responseLength}
+              responseStyle={responseStyle}
+              responseAudience={responseAudience}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export default ChatMessage;