create-interview-cockpit 0.1.0

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

@@ -0,0 +1,763 @@
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
+import { useEffect, useRef, useState, useMemo, useCallback } from "react";
+import type { Question, Annotation, ReadingBookmark } from "../types";
+import { useStore } from "../store";
+import ChatMessage from "./ChatMessage";
+import FileAttachments from "./FileAttachments";
+import { Send, Loader2, Settings2, RotateCcw } from "lucide-react";
+
+interface Props {
+  question: Question;
+}
+
+type ResponseLength = "normal" | "moderate" | "concise";
+type ResponseStyle = "prose" | "bullets" | "structured";
+type ResponseAudience = "normal" | "beginner";
+
+interface ResponsePreferenceCache {
+  length?: ResponseLength;
+  style?: ResponseStyle;
+  audience?: ResponseAudience;
+}
+
+const responseLengthPrompts: Record<ResponseLength, string> = {
+  concise:
+    "Keep the response concise. Aim for roughly 300 characters of text when possible. These limits do not apply to mermaid diagrams. You can generate as many as you want to explain the solution effectively. Prioritize diagrams over text.",
+  moderate:
+    "Keep the response moderately detailed. Aim for roughly 550 characters of text when possible.",
+  normal:
+    "Use a fuller answer with enough context to explain the idea clearly.",
+};
+
+const responseStylePrompts: Record<ResponseStyle, string> = {
+  prose:
+    "Use natural prose with short paragraphs. Avoid bullet lists and numbered lists unless I explicitly ask for them.",
+  bullets: "Use bullet points and short lists as the main format.",
+  structured:
+    "Use structured sections with headings and numbered steps when helpful.",
+};
+
+const responseAudiencePrompts: Record<ResponseAudience, string> = {
+  normal: "",
+  beginner:
+    "When using technical terms or abbreviations, immediately expand their meaning in square brackets right after the term — e.g. 'TCP [Transmission Control Protocol — a connection-oriented transport protocol]' or 'idempotent [an operation that produces the same result no matter how many times it is applied]'. Do this throughout your response so I never need to look anything up.",
+};
+
+function findLastUserMessageIndex(messages: any[]): number {
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    if (messages[index]?.role === "user") {
+      return index;
+    }
+  }
+
+  return -1;
+}
+
+function buildPreferenceSuffix(
+  cache: ResponsePreferenceCache,
+  responseLength: ResponseLength,
+  responseStyle: ResponseStyle,
+  responseAudience: ResponseAudience,
+): string {
+  const updates: string[] = [];
+
+  if (cache.length !== responseLength) {
+    updates.push(responseLengthPrompts[responseLength]);
+  }
+
+  if (cache.style !== responseStyle) {
+    updates.push(responseStylePrompts[responseStyle]);
+  }
+
+  if (cache.audience !== responseAudience) {
+    const audiencePrompt = responseAudiencePrompts[responseAudience];
+    if (audiencePrompt) updates.push(audiencePrompt);
+  }
+
+  if (updates.length === 0) {
+    return "";
+  }
+
+  return `\n\nUse these response preferences for this chat until I change them: ${updates.join(" ")}`;
+}
+
+function appendPreferenceSuffixToMessages(
+  messages: any[],
+  suffix: string,
+): any[] {
+  if (!suffix) {
+    return messages;
+  }
+
+  const lastUserMessageIndex = findLastUserMessageIndex(messages);
+
+  if (lastUserMessageIndex === -1) {
+    return messages;
+  }
+
+  return messages.map((message, messageIndex) => {
+    if (messageIndex !== lastUserMessageIndex) {
+      return message;
+    }
+
+    if (!Array.isArray(message.parts)) {
+      return {
+        ...message,
+        content:
+          typeof message.content === "string"
+            ? `${message.content}${suffix}`
+            : message.content,
+      };
+    }
+
+    let appended = false;
+    const nextParts = message.parts.map((part: any) => {
+      if (part?.type !== "text" || appended) {
+        return part;
+      }
+
+      appended = true;
+      return {
+        ...part,
+        text: `${part.text || ""}${suffix}`,
+      };
+    });
+
+    if (!appended) {
+      nextParts.push({ type: "text", text: suffix.trimStart() });
+    }
+
+    return {
+      ...message,
+      content:
+        typeof message.content === "string"
+          ? `${message.content}${suffix}`
+          : message.content,
+      parts: nextParts,
+    };
+  });
+}
+
+export default function ChatView({ question }: Props) {
+  const {
+    refreshCurrentQuestion,
+    uploadQuestionFiles,
+    removeQuestionFile,
+    clearMessages,
+    updateQuestionSystemContext,
+    topics,
+    selectedTopicId,
+    codeSnippets,
+  } = useStore();
+  const [showContext, setShowContext] = useState(false);
+  const [systemContext, setSystemContext] = useState(
+    question.systemContext || "",
+  );
+  const [input, setInput] = useState("");
+  const [responseLength, setResponseLength] =
+    useState<ResponseLength>("normal");
+  const [responseStyle, setResponseStyle] = useState<ResponseStyle>("prose");
+  const [responseAudience, setResponseAudience] =
+    useState<ResponseAudience>("normal");
+  const [alwaysSendPrefs, setAlwaysSendPrefs] = useState(false);
+  const [annotations, setAnnotations] = useState<Annotation[]>(
+    question.annotations ?? [],
+  );
+  const [readingBookmark, setReadingBookmark] = useState<
+    ReadingBookmark | undefined
+  >(question.readingBookmark);
+  const bookmarkRef = useRef<HTMLDivElement | null>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const systemContextSaveTimeoutRef = useRef<number | null>(null);
+  const responsePreferenceCacheRef = useRef<ResponsePreferenceCache>({});
+  const pendingResponsePreferenceCacheRef =
+    useRef<ResponsePreferenceCache | null>(null);
+  const requestOptionsRef = useRef({
+    questionId: question.id,
+    topicId: question.topicId,
+    topicTitle: "",
+    questionTitle: question.title,
+    codeContextFiles: question.codeContextFiles,
+    systemContext,
+    responseLength,
+    responseStyle,
+    responseAudience,
+    alwaysSendPrefs,
+    codeSnippets,
+  });
+
+  const currentTopic = topics.find((t) => t.id === selectedTopicId);
+  const topicFileCount = currentTopic?.contextFiles?.length || 0;
+  const questionFileCount = question.contextFiles?.length || 0;
+
+  requestOptionsRef.current = {
+    questionId: question.id,
+    topicId: question.topicId,
+    topicTitle: currentTopic?.name || "",
+    questionTitle: question.title,
+    codeContextFiles: question.codeContextFiles,
+    systemContext,
+    responseLength,
+    responseStyle,
+    responseAudience,
+    alwaysSendPrefs,
+    codeSnippets,
+  };
+
+  const transport = useMemo(
+    () =>
+      new DefaultChatTransport({
+        api: "/api/chat",
+        prepareSendMessagesRequest: ({ body, messages, trigger }) => {
+          const preferenceSuffix =
+            trigger === "submit-message"
+              ? buildPreferenceSuffix(
+                  requestOptionsRef.current.alwaysSendPrefs
+                    ? {}
+                    : responsePreferenceCacheRef.current,
+                  requestOptionsRef.current.responseLength,
+                  requestOptionsRef.current.responseStyle,
+                  requestOptionsRef.current.responseAudience,
+                )
+              : "";
+
+          const outgoingMessages = appendPreferenceSuffixToMessages(
+            messages,
+            preferenceSuffix,
+          );
+
+          pendingResponsePreferenceCacheRef.current = preferenceSuffix
+            ? {
+                length: requestOptionsRef.current.responseLength,
+                style: requestOptionsRef.current.responseStyle,
+                audience: requestOptionsRef.current.responseAudience,
+              }
+            : null;
+
+          return {
+            body: {
+              messages: outgoingMessages,
+              ...(body ?? {}),
+              ...requestOptionsRef.current,
+            },
+          };
+        },
+      }),
+    [question.id],
+  );
+
+  // Stable initial messages — only recalculated when the question itself changes,
+  // not on every render. Prevents useChat from seeing a perpetually-new array
+  // and triggering an update loop.
+  const initialMessages = useMemo(
+    () =>
+      question.messages.map((m) => ({
+        id: m.id,
+        role: m.role as "user" | "assistant",
+        parts: [{ type: "text" as const, text: m.content }],
+      })),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [question.id],
+  );
+
+  const handleChatError = useCallback((err: Error) => {
+    pendingResponsePreferenceCacheRef.current = null;
+    console.error("Chat error:", err);
+  }, []);
+
+  const handleChatFinish = useCallback(() => {
+    if (pendingResponsePreferenceCacheRef.current) {
+      responsePreferenceCacheRef.current =
+        pendingResponsePreferenceCacheRef.current;
+      pendingResponsePreferenceCacheRef.current = null;
+    }
+    refreshCurrentQuestion();
+  }, [refreshCurrentQuestion]);
+
+  const { messages, setMessages, sendMessage, status, error } = useChat({
+    id: question.id,
+    transport,
+    messages: initialMessages,
+    onError: handleChatError,
+    onFinish: handleChatFinish,
+  });
+
+  const isLoading = status === "streaming" || status === "submitted";
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  useEffect(() => {
+    if (systemContext === question.systemContext) return;
+
+    if (systemContextSaveTimeoutRef.current) {
+      window.clearTimeout(systemContextSaveTimeoutRef.current);
+    }
+
+    systemContextSaveTimeoutRef.current = window.setTimeout(() => {
+      systemContextSaveTimeoutRef.current = null;
+      updateQuestionSystemContext(question.id, systemContext).catch((err) => {
+        console.error("Failed to save system context:", err);
+      });
+    }, 400);
+
+    return () => {
+      if (systemContextSaveTimeoutRef.current) {
+        window.clearTimeout(systemContextSaveTimeoutRef.current);
+        systemContextSaveTimeoutRef.current = null;
+      }
+    };
+  }, [
+    question.id,
+    question.systemContext,
+    systemContext,
+    updateQuestionSystemContext,
+  ]);
+
+  // Reset annotations and bookmark when switching questions
+  useEffect(() => {
+    setAnnotations(question.annotations ?? []);
+    setReadingBookmark(question.readingBookmark);
+  }, [question.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleSetBookmark = useCallback(
+    (messageId: string, blockIndex: number) => {
+      const isSame =
+        readingBookmark?.messageId === messageId &&
+        readingBookmark?.blockIndex === blockIndex;
+      const next = isSame ? undefined : { messageId, blockIndex };
+      setReadingBookmark(next);
+      fetch(`/api/questions/${question.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ readingBookmark: next ?? null }),
+      }).catch((err) => console.error("Failed to save bookmark:", err));
+    },
+    [question.id, readingBookmark],
+  );
+
+  const handleAnnotationCreate = useCallback(
+    (annotation: Annotation) => {
+      setAnnotations((prev) => {
+        const next = [...prev, annotation];
+        fetch(`/api/questions/${question.id}`, {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ annotations: next }),
+        }).catch((err) => console.error("Failed to save annotation:", err));
+        return next;
+      });
+    },
+    [question.id],
+  );
+
+  const handleAnnotationUpdate = useCallback(
+    (updated: Annotation) => {
+      setAnnotations((prev) => {
+        const next = prev.map((a) => (a.id === updated.id ? updated : a));
+        fetch(`/api/questions/${question.id}`, {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ annotations: next }),
+        }).catch((err) => console.error("Failed to save annotation:", err));
+        return next;
+      });
+    },
+    [question.id],
+  );
+
+  // Group annotations by message id so we don't run filter() inside render,
+  // which would produce a new array reference on every ChatView re-render and
+  // defeat React.memo on ChatMessage.
+  const annotationsByMessageId = useMemo(() => {
+    const map: Record<string, Annotation[]> = {};
+    for (const ann of annotations) {
+      if (!map[ann.messageId]) map[ann.messageId] = [];
+      map[ann.messageId].push(ann);
+    }
+    return map;
+  }, [annotations]);
+  const EMPTY_ANNOTATIONS: Annotation[] = useMemo(() => [], []);
+
+  useEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 128)}px`;
+  }, [input]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!input.trim() || isLoading) return;
+    const text = input;
+    setInput("");
+    sendMessage({ text });
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* System context toggle */}
+      <div className="border-b border-slate-800 px-4 py-2 shrink-0">
+        <div className="flex items-center justify-between">
+          <button
+            onClick={() => setShowContext(!showContext)}
+            className="flex items-center gap-1.5 text-xs text-slate-500 hover:text-slate-300 transition-colors"
+          >
+            <Settings2 className="w-3 h-3" />
+            System Context
+            {systemContext && (
+              <span className="w-1.5 h-1.5 rounded-full bg-cyan-500" />
+            )}
+          </button>
+          {messages.length > 0 && (
+            <button
+              onClick={async () => {
+                if (
+                  !window.confirm(
+                    "Clear all messages for this question? Files and context will be kept.",
+                  )
+                ) {
+                  return;
+                }
+
+                await clearMessages(question.id);
+                responsePreferenceCacheRef.current = {};
+                pendingResponsePreferenceCacheRef.current = null;
+                setMessages([]);
+              }}
+              disabled={isLoading}
+              className="flex items-center gap-1 text-[11px] text-slate-500 hover:text-red-400 disabled:opacity-50 transition-colors"
+            >
+              <RotateCcw className="w-3 h-3" />
+              Clear chat
+            </button>
+          )}
+        </div>
+        {showContext && (
+          <textarea
+            value={systemContext}
+            onChange={(e) => setSystemContext(e.target.value)}
+            onBlur={() => {
+              if (systemContextSaveTimeoutRef.current) {
+                window.clearTimeout(systemContextSaveTimeoutRef.current);
+                systemContextSaveTimeoutRef.current = null;
+              }
+
+              if (systemContext === question.systemContext) return;
+
+              updateQuestionSystemContext(question.id, systemContext).catch(
+                (err) => {
+                  console.error("Failed to save system context:", err);
+                },
+              );
+            }}
+            placeholder="Add context about the role, project, or specific requirements..."
+            className="mt-2 w-full bg-slate-800/50 border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-300 placeholder-slate-600 focus:outline-none focus:border-cyan-500 resize-none"
+            rows={3}
+          />
+        )}
+      </div>
+
+      {/* Sticky bookmark banner — sits outside the scroll container */}
+      {readingBookmark &&
+        messages.some((m) => m.id === readingBookmark.messageId) && (
+          <div className="shrink-0 px-4 pt-2">
+            <button
+              onClick={() => {
+                const el = document.querySelector<HTMLElement>(
+                  '[data-reading-bookmark="true"]',
+                );
+                (el ?? bookmarkRef.current)?.scrollIntoView({
+                  behavior: "smooth",
+                  block: "center",
+                });
+              }}
+              className="w-full flex items-center gap-1.5 justify-center text-[11px] text-amber-400/80 hover:text-amber-300 bg-amber-500/5 hover:bg-amber-500/10 border border-amber-500/20 rounded-lg py-1.5 transition-colors"
+            >
+              <span>↓</span> Resume reading from bookmark
+            </button>
+          </div>
+        )}
+
+      {/* Messages */}
+      <div
+        id="chat-scroll-area"
+        className="flex-1 overflow-y-auto px-4 py-4 space-y-4"
+      >
+        {messages.length === 0 && (
+          <div className="flex items-center justify-center h-full">
+            <div className="text-center">
+              <p className="text-sm text-slate-500">No messages yet</p>
+              <p className="text-xs text-slate-600 mt-1">
+                Ask about this topic and get explanations with code & diagrams
+              </p>
+            </div>
+          </div>
+        )}
+        {messages.map((message) => (
+          <div
+            key={message.id}
+            ref={message.id === readingBookmark?.messageId ? bookmarkRef : null}
+          >
+            <ChatMessage
+              message={message}
+              annotations={
+                annotationsByMessageId[message.id] ?? EMPTY_ANNOTATIONS
+              }
+              onAnnotationCreate={handleAnnotationCreate}
+              onAnnotationUpdate={handleAnnotationUpdate}
+              bookmarkedBlockIndex={
+                message.id === readingBookmark?.messageId
+                  ? readingBookmark?.blockIndex
+                  : undefined
+              }
+              onSetBookmark={handleSetBookmark}
+              responseLength={responseLength}
+              responseStyle={responseStyle}
+              responseAudience={responseAudience}
+            />
+          </div>
+        ))}
+        {status === "submitted" && (
+          <div className="flex items-start gap-3 px-1">
+            <div className="w-7 h-7 rounded-lg bg-cyan-600/20 flex items-center justify-center shrink-0 mt-0.5">
+              <Loader2 className="w-3.5 h-3.5 text-cyan-400 animate-spin" />
+            </div>
+            <div className="flex items-center gap-1.5 py-2">
+              <span className="text-sm text-slate-400">Thinking</span>
+              <span className="flex gap-0.5">
+                <span
+                  className="w-1 h-1 rounded-full bg-slate-500 animate-bounce"
+                  style={{ animationDelay: "0ms" }}
+                />
+                <span
+                  className="w-1 h-1 rounded-full bg-slate-500 animate-bounce"
+                  style={{ animationDelay: "150ms" }}
+                />
+                <span
+                  className="w-1 h-1 rounded-full bg-slate-500 animate-bounce"
+                  style={{ animationDelay: "300ms" }}
+                />
+              </span>
+            </div>
+          </div>
+        )}
+        {status === "error" && (
+          <div className="bg-red-500/10 border border-red-500/20 rounded-lg px-4 py-3 text-sm text-red-400">
+            {error?.message ||
+              "An error occurred. Check your API key and try again."}
+          </div>
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input */}
+      <div className="border-t border-slate-800 px-4 py-3 shrink-0">
+        {/* Question-level file attachments */}
+        <div className="mb-2">
+          <FileAttachments
+            files={question.contextFiles || []}
+            onUpload={(files) => uploadQuestionFiles(question.id, files)}
+            onRemove={(fileId) => removeQuestionFile(question.id, fileId)}
+            label="question"
+            compact
+          />
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <div className="flex gap-2">
+            <textarea
+              ref={textareaRef}
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  if (!input.trim() || isLoading) return;
+                  handleSubmit(e as any);
+                }
+              }}
+              placeholder="Ask about this topic..."
+              rows={1}
+              className="flex-1 bg-slate-800 border border-slate-700 rounded-lg px-4 py-2.5 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:border-cyan-500 transition-colors resize-none overflow-y-auto"
+              style={{ minHeight: "2.625rem", maxHeight: "8rem" }}
+              disabled={isLoading}
+            />
+            <button
+              type="submit"
+              disabled={isLoading || !input.trim()}
+              className="px-4 py-2.5 bg-cyan-600 hover:bg-cyan-500 disabled:bg-slate-700 disabled:text-slate-500 text-white rounded-lg transition-colors flex items-center gap-2"
+            >
+              {isLoading ? (
+                <Loader2 className="w-4 h-4 animate-spin" />
+              ) : (
+                <Send className="w-4 h-4" />
+              )}
+            </button>
+          </div>
+        </form>
+
+        {/* Response controls */}
+        <div className="flex items-center gap-4 mt-2">
+          <div className="flex items-center gap-1.5">
+            <span className="text-[10px] text-slate-500 uppercase tracking-wider">
+              Length
+            </span>
+            {(["normal", "moderate", "concise"] as const).map((opt) => (
+              <button
+                key={opt}
+                onClick={() => setResponseLength(opt)}
+                className={`px-2 py-0.5 text-[11px] rounded-md transition-colors ${
+                  responseLength === opt
+                    ? "bg-cyan-600/30 text-cyan-300 border border-cyan-600/50"
+                    : "text-slate-500 hover:text-slate-300 border border-transparent"
+                }`}
+              >
+                {opt.charAt(0).toUpperCase() + opt.slice(1)}
+              </button>
+            ))}
+          </div>
+          <div className="w-px h-4 bg-slate-700" />
+          <div className="flex items-center gap-1.5">
+            <span className="text-[10px] text-slate-500 uppercase tracking-wider">
+              Style
+            </span>
+            {(
+              [
+                ["prose", "Prose"],
+                ["bullets", "Bullets"],
+                ["structured", "Structured"],
+              ] as const
+            ).map(([key, label]) => (
+              <button
+                key={key}
+                onClick={() => setResponseStyle(key)}
+                className={`px-2 py-0.5 text-[11px] rounded-md transition-colors ${
+                  responseStyle === key
+                    ? "bg-cyan-600/30 text-cyan-300 border border-cyan-600/50"
+                    : "text-slate-500 hover:text-slate-300 border border-transparent"
+                }`}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+          <div className="w-px h-4 bg-slate-700" />
+          <div className="flex items-center gap-1.5">
+            <span className="text-[10px] text-slate-500 uppercase tracking-wider">
+              Mode
+            </span>
+            {(["normal", "beginner"] as const).map((opt) => (
+              <button
+                key={opt}
+                onClick={() => setResponseAudience(opt)}
+                className={`px-2 py-0.5 text-[11px] rounded-md transition-colors ${
+                  responseAudience === opt
+                    ? "bg-cyan-600/30 text-cyan-300 border border-cyan-600/50"
+                    : "text-slate-500 hover:text-slate-300 border border-transparent"
+                }`}
+              >
+                {opt.charAt(0).toUpperCase() + opt.slice(1)}
+              </button>
+            ))}
+          </div>
+          <div className="w-px h-4 bg-slate-700" />
+          <button
+            onClick={() => setAlwaysSendPrefs((p) => !p)}
+            title={
+              alwaysSendPrefs
+                ? "Preferences sent with every message"
+                : "Preferences sent only when changed"
+            }
+            className={`flex items-center gap-1 px-2 py-0.5 text-[11px] rounded-md border transition-colors ${
+              alwaysSendPrefs
+                ? "bg-amber-600/20 text-amber-300 border-amber-600/40"
+                : "text-slate-500 hover:text-slate-300 border-transparent"
+            }`}
+          >
+            <span
+              className={`inline-block w-1.5 h-1.5 rounded-full ${
+                alwaysSendPrefs ? "bg-amber-400" : "bg-slate-600"
+              }`}
+            />
+            Prefs: {alwaysSendPrefs ? "always" : "on change"}
+          </button>
+        </div>
+
+        {/* Context summary */}
+        {(topicFileCount > 0 ||
+          questionFileCount > 0 ||
+          question.codeContextFiles.length > 0) && (
+          <ContextSummary
+            topicFileCount={topicFileCount}
+            questionFileCount={questionFileCount}
+            codeContextFiles={question.codeContextFiles}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ContextSummary({
+  topicFileCount,
+  questionFileCount,
+  codeContextFiles,
+}: {
+  topicFileCount: number;
+  questionFileCount: number;
+  codeContextFiles: string[];
+}) {
+  const { openFileViewer } = useStore();
+  const [expanded, setExpanded] = useState(false);
+  const VISIBLE_COUNT = 2;
+  const visibleFiles = expanded
+    ? codeContextFiles
+    : codeContextFiles.slice(0, VISIBLE_COUNT);
+  const hiddenCount = codeContextFiles.length - VISIBLE_COUNT;
+
+  return (
+    <div className="mt-1.5 flex items-center gap-2 flex-wrap text-[10px] text-slate-600">
+      {topicFileCount > 0 && (
+        <span className="bg-violet-500/10 text-violet-400 px-1.5 py-0.5 rounded">
+          {topicFileCount} topic file{topicFileCount > 1 ? "s" : ""}
+        </span>
+      )}
+      {questionFileCount > 0 && (
+        <span className="bg-violet-500/10 text-violet-400 px-1.5 py-0.5 rounded">
+          {questionFileCount} question file
+          {questionFileCount > 1 ? "s" : ""}
+        </span>
+      )}
+      {visibleFiles.map((f) => (
+        <button
+          key={f}
+          onClick={() => openFileViewer(f)}
+          title={f}
+          className="bg-slate-800 hover:bg-slate-700 hover:text-slate-300 px-1.5 py-0.5 rounded transition-colors cursor-pointer"
+        >
+          {f.split("/").pop()}
+        </button>
+      ))}
+      {!expanded && hiddenCount > 0 && (
+        <button
+          onClick={() => setExpanded(true)}
+          className="bg-slate-800 px-1.5 py-0.5 rounded text-cyan-400 hover:text-cyan-300 transition-colors"
+        >
+          +{hiddenCount} more
+        </button>
+      )}
+      {expanded && hiddenCount > 0 && (
+        <button
+          onClick={() => setExpanded(false)}
+          className="bg-slate-800 px-1.5 py-0.5 rounded text-cyan-400 hover:text-cyan-300 transition-colors"
+        >
+          show less
+        </button>
+      )}
+    </div>
+  );
+}