create-interview-cockpit 0.4.0 → 0.5.0

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

@@ -1,6 +1,14 @@
-import { memo } from "react";
+import { memo, useState, useCallback } from "react";
 import type { UIMessage } from "ai";
-import { User, Bot } from "lucide-react";
+import {
+  User,
+  Bot,
+  Copy,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  Brain,
+} from "lucide-react";
 import TextAnnotator from "./TextAnnotator";
 import type { Annotation } from "../types";
 
@@ -11,9 +19,12 @@ interface Props {
   onAnnotationUpdate?: (annotation: Annotation) => void;
   bookmarkedBlockIndex?: number;
   onSetBookmark?: (messageId: string, blockIndex: number) => void;
-  responseLength?: string;
-  responseStyle?: string;
-  responseAudience?: string;
+  preferenceSuffix?: string;
+  onSpecRefined?: (
+    messageId: string,
+    originalSpec: string,
+    newSpec: string,
+  ) => void;
 }
 
 function getTextContent(message: UIMessage): string {
@@ -26,6 +37,47 @@ function getTextContent(message: UIMessage): string {
   return "";
 }
 
+function getReasoningContent(message: UIMessage): string {
+  if (!message.parts) return "";
+  return message.parts
+    .filter(
+      (p): p is { type: "reasoning"; reasoning: string } =>
+        p.type === "reasoning" && typeof (p as any).reasoning === "string",
+    )
+    .map((p) => p.reasoning)
+    .join("\n\n");
+}
+
+function ThinkingBlock({ reasoning }: { reasoning: string }) {
+  const [open, setOpen] = useState(false);
+  const wordCount = reasoning.trim().split(/\s+/).length;
+  return (
+    <div className="mb-2 rounded-lg border border-slate-700/60 bg-slate-800/40 text-xs overflow-hidden">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="w-full flex items-center gap-1.5 px-3 py-2 text-slate-500 hover:text-slate-300 transition-colors text-left"
+      >
+        <Brain className="w-3 h-3 shrink-0 text-violet-400" />
+        <span className="text-violet-400/80 font-medium">Thinking</span>
+        <span className="text-slate-600 ml-auto mr-1">
+          {wordCount.toLocaleString()} words
+        </span>
+        {open ? (
+          <ChevronDown className="w-3 h-3 shrink-0" />
+        ) : (
+          <ChevronRight className="w-3 h-3 shrink-0" />
+        )}
+      </button>
+      {open && (
+        <div className="px-3 pb-3 pt-0 text-slate-500 whitespace-pre-wrap leading-relaxed border-t border-slate-700/40 max-h-80 overflow-y-auto">
+          {reasoning}
+        </div>
+      )}
+    </div>
+  );
+}
+
 const ChatMessage = memo(function ChatMessage({
   message,
   annotations = [],
@@ -33,15 +85,24 @@ const ChatMessage = memo(function ChatMessage({
   onAnnotationUpdate,
   bookmarkedBlockIndex,
   onSetBookmark,
-  responseLength,
-  responseStyle,
-  responseAudience,
+  preferenceSuffix,
+  onSpecRefined,
 }: Props) {
   const isUser = message.role === "user";
   const content = getTextContent(message);
+  const reasoning = !isUser ? getReasoningContent(message) : "";
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(() => {
+    if (!content) return;
+    navigator.clipboard.writeText(content).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  }, [content]);
 
   return (
-    <div className="flex gap-3 animate-fadeIn">
+    <div className="group flex gap-3 animate-fadeIn">
       <div
         className={`w-7 h-7 rounded-full flex items-center justify-center shrink-0 mt-0.5 ${
           isUser
@@ -56,8 +117,23 @@ const ChatMessage = memo(function ChatMessage({
         )}
       </div>
       <div className="min-w-0 flex-1">
-        <div className="text-[10px] font-medium text-slate-600 mb-1">
-          {isUser ? "You" : "Coach"}
+        <div className="flex items-center gap-2 mb-1">
+          <div className="text-[10px] font-medium text-slate-600">
+            {isUser ? "You" : "Coach"}
+          </div>
+          {content && (
+            <button
+              onClick={handleCopy}
+              className="opacity-0 group-hover:opacity-100 transition-opacity p-0.5 rounded text-slate-500 hover:text-slate-300 hover:bg-slate-700"
+              title="Copy message"
+            >
+              {copied ? (
+                <Check className="w-3 h-3 text-cyan-400" />
+              ) : (
+                <Copy className="w-3 h-3" />
+              )}
+            </button>
+          )}
         </div>
         <div className="text-sm leading-relaxed text-slate-200">
           {isUser ? (
@@ -89,22 +165,29 @@ const ChatMessage = memo(function ChatMessage({
               )}
             </div>
           ) : (
-            <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}
-            />
+            <>
+              {reasoning && <ThinkingBlock reasoning={reasoning} />}
+              <TextAnnotator
+                content={content}
+                messageId={message.id}
+                annotations={annotations}
+                onAnnotationCreate={onAnnotationCreate ?? (() => {})}
+                onAnnotationUpdate={onAnnotationUpdate ?? (() => {})}
+                bookmarkedBlockIndex={bookmarkedBlockIndex}
+                onBookmarkBlock={
+                  onSetBookmark
+                    ? (idx) => onSetBookmark(message.id, idx)
+                    : undefined
+                }
+                preferenceSuffix={preferenceSuffix}
+                onSpecRefined={
+                  onSpecRefined
+                    ? (orig, refined) =>
+                        onSpecRefined(message.id, orig, refined)
+                    : undefined
+                }
+              />
+            </>
           )}
         </div>
       </div>

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

@@ -123,12 +123,14 @@ export default function ChatView({ question }: Props) {
     refreshCurrentQuestion,
     uploadQuestionFiles,
     removeQuestionFile,
+    linkFileToQuestion,
     clearMessages,
     updateQuestionSystemContext,
     topics,
     selectedTopicId,
     codeSnippets,
     aiSettings,
+    setLivePreferenceSuffix,
   } = useStore();
   const [showContext, setShowContext] = useState(false);
   const [systemContext, setSystemContext] = useState(
@@ -142,7 +144,9 @@ export default function ChatView({ question }: Props) {
       Object.entries(aiSettings.promptGroups).map(([k, g]) => [k, g.default]),
     ),
   );
-  const [alwaysSendPrefs, setAlwaysSendPrefs] = useState(false);
+  const [alwaysSendPrefs, setAlwaysSendPrefs] = useState(
+    () => aiSettings.alwaysSendPrefsDefault ?? false,
+  );
   const [annotations, setAnnotations] = useState<Annotation[]>(
     question.annotations ?? [],
   );
@@ -458,6 +462,64 @@ export default function ChatView({ question }: Props) {
     [question.id],
   );
 
+  // Persist a refined viz spec back to the server so changes survive refresh
+  const handleSpecRefined = useCallback(
+    (messageId: string, originalSpec: string, newSpec: string) => {
+      setMessages((prev) =>
+        prev.map((m) => {
+          if (m.id !== messageId) return m;
+          const updatedParts = (m.parts ?? []).map((p) => {
+            if (p.type !== "text") return p;
+            const tp = p as { type: "text"; text: string };
+            return {
+              ...tp,
+              text: tp.text.split(originalSpec).join(newSpec),
+            };
+          });
+          return { ...m, parts: updatedParts };
+        }),
+      );
+      // Persist to server — rebuild server-side Message[] from updated UIMessages
+      setMessages((prev) => {
+        const serverMessages = prev.map((m) => ({
+          id: m.id,
+          role: m.role,
+          content: (m.parts ?? [])
+            .filter(
+              (p): p is { type: "text"; text: string } => p.type === "text",
+            )
+            .map((p) => p.text)
+            .join(""),
+          parts: m.parts,
+        }));
+        fetch(`/api/questions/${question.id}`, {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ messages: serverMessages }),
+        }).catch((err) =>
+          console.error("Failed to persist refined spec:", err),
+        );
+        return prev; // no further state change
+      });
+    },
+    [question.id, setMessages],
+  );
+
+  // Build a preference text for annotation dialogs from ALL current group selections
+  const annotationPrefs = useMemo(() => {
+    const parts: string[] = [];
+    for (const [key, sel] of Object.entries(groupSelections)) {
+      const prompt = aiSettings.promptGroups[key]?.options[sel];
+      if (prompt) parts.push(prompt);
+    }
+    return parts.join(" ");
+  }, [groupSelections, aiSettings.promptGroups]);
+
+  // Keep the store in sync so FileViewerModal can read the current preference string
+  useEffect(() => {
+    setLivePreferenceSuffix(annotationPrefs);
+  }, [annotationPrefs, setLivePreferenceSuffix]);
+
   // 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.
@@ -608,9 +670,8 @@ export default function ChatView({ question }: Props) {
                   : undefined
               }
               onSetBookmark={handleSetBookmark}
-              responseLength={groupSelections["length"]}
-              responseStyle={groupSelections["style"]}
-              responseAudience={groupSelections["audience"]}
+              preferenceSuffix={annotationPrefs}
+              onSpecRefined={handleSpecRefined}
             />
           </div>
         ))}
@@ -684,6 +745,10 @@ export default function ChatView({ question }: Props) {
             files={question.contextFiles || []}
             onUpload={(files) => uploadQuestionFiles(question.id, files)}
             onRemove={(fileId) => removeQuestionFile(question.id, fileId)}
+            onLink={(fileId, originalName) =>
+              linkFileToQuestion(question.id, fileId, originalName)
+            }
+            downloadBase={`/api/questions/${question.id}/context-files`}
             label="question"
             compact
           />

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}