create-interview-cockpit 0.4.0 → 0.5.0

package/package.json

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

package/template/client/package-lock.json

@@ -7,12 +7,15 @@
       "name": "interview-cockpit-client",
       "dependencies": {
         "@ai-sdk/react": "^3.0.170",
+        "@types/prismjs": "^1.26.6",
         "ai": "^6.0.168",
         "lucide-react": "^0.460.0",
         "mermaid": "^11.4.0",
+        "prismjs": "^1.30.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-markdown": "^9.0.0",
+        "react-simple-code-editor": "^0.14.1",
         "react-syntax-highlighter": "^15.6.1",
         "remark-gfm": "^4.0.0",
         "vizcraft": "^1.17.0",
@@ -1749,6 +1752,12 @@
       "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
       "license": "MIT"
     },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.6",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.6.tgz",
+      "integrity": "sha512-vqlvI7qlMvcCBbVe0AKAb4f97//Hy0EBTaiW8AalRnG/xAN5zOiWWyrNqNXeq8+KAuvRewjCVY1+IPxk4RdNYw==",
+      "license": "MIT"
+    },
     "node_modules/@types/react": {
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
@@ -4915,6 +4924,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-simple-code-editor": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.14.1.tgz",
+      "integrity": "sha512-BR5DtNRy+AswWJECyA17qhUDvrrCZ6zXOCfkQY5zSmb96BVUbpVAv03WpcjcwtCwiLbIANx3gebHOcXYn1EHow==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/react-syntax-highlighter": {
       "version": "15.6.6",
       "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.6.6.tgz",

package/template/client/package.json

@@ -9,12 +9,15 @@
   },
   "dependencies": {
     "@ai-sdk/react": "^3.0.170",
+    "@types/prismjs": "^1.26.6",
     "ai": "^6.0.168",
     "lucide-react": "^0.460.0",
     "mermaid": "^11.4.0",
+    "prismjs": "^1.30.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-markdown": "^9.0.0",
+    "react-simple-code-editor": "^0.14.1",
     "react-syntax-highlighter": "^15.6.1",
     "remark-gfm": "^4.0.0",
     "vizcraft": "^1.17.0",

package/template/client/src/App.tsx

@@ -4,7 +4,9 @@ import Sidebar from "./components/Sidebar";
 import ChatView from "./components/ChatView";
 import CodeContextPanel from "./components/CodeContextPanel";
 import FileViewerModal from "./components/FileViewerModal";
+import DocRefModal from "./components/DocRefModal";
 import AiSettingsModal from "./components/AiSettingsModal";
+import CodeRunnerModal from "./components/CodeRunnerModal";
 import { Code, Plane, PanelLeftClose, PanelLeft, Settings } from "lucide-react";
 
 export default function App() {
@@ -12,6 +14,7 @@ export default function App() {
     fetchTopics,
     fetchWorkspaces,
     fetchAiSettings,
+    fetchWorkspaceFiles,
     fetchQuestions,
     selectQuestion,
     currentQuestion,
@@ -21,9 +24,13 @@ export default function App() {
     toggleSidebar,
     viewingFile,
     closeFileViewer,
+    viewingDoc,
+    closeDocViewer,
     showSettings,
     openSettings,
     closeSettings,
+    showCodeRunner,
+    closeCodeRunner,
   } = useStore();
 
   useEffect(() => {
@@ -31,6 +38,7 @@ export default function App() {
       await fetchWorkspaces();
       await fetchTopics();
       fetchAiSettings();
+      fetchWorkspaceFiles();
       // Restore last-viewed question after page refresh
       const topicId = sessionStorage.getItem("lastTopicId");
       const questionId = sessionStorage.getItem("lastQuestionId");
@@ -139,7 +147,16 @@ export default function App() {
       {viewingFile && (
         <FileViewerModal filePath={viewingFile} onClose={closeFileViewer} />
       )}
+      {viewingDoc && (
+        <DocRefModal
+          fileId={viewingDoc.fileId}
+          quote={viewingDoc.quote}
+          fileName={viewingDoc.fileName}
+          onClose={closeDocViewer}
+        />
+      )}
       {showSettings && <AiSettingsModal />}
+      {showCodeRunner && <CodeRunnerModal />}
     </div>
   );
 }

package/template/client/src/api.ts

@@ -22,6 +22,14 @@ export interface AiSettings {
   vizGuide: string;
   /** All user-selectable prompt groups. Add new entries here to extend the UI. */
   promptGroups: Record<string, PromptGroup>;
+  /** When true, preference prompt texts are appended to every message (not just on change). */
+  alwaysSendPrefsDefault?: boolean;
+  /** Gemini thinking budget in tokens. 0 = disabled. Only applies when provider is google/gemini. */
+  thinkingBudget?: number;
+  /** Read-only: current AI provider from .env (openai | google | anthropic). */
+  provider?: string;
+  /** Read-only: current model name from .env. */
+  model?: string;
 }
 
 export async function fetchAiSettings(): Promise<AiSettings> {
@@ -82,6 +90,10 @@ export async function uploadTopicFiles(
     method: "POST",
     body: form,
   });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: "Upload failed" }));
+    throw new Error(err.error ?? "Upload failed");
+  }
   return res.json();
 }
 
@@ -94,6 +106,35 @@ export async function deleteTopicFile(
   });
 }
 
+// --- Workspace Context Files ---
+
+export async function fetchWorkspaceFiles(): Promise<ContextFile[]> {
+  const res = await fetch(`${BASE}/workspace/context-files`);
+  return res.json();
+}
+
+export async function uploadWorkspaceFiles(
+  files: FileList | File[],
+): Promise<ContextFile[]> {
+  const form = new FormData();
+  for (const file of files) form.append("files", file);
+  const res = await fetch(`${BASE}/workspace/context-files`, {
+    method: "POST",
+    body: form,
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: "Upload failed" }));
+    throw new Error(err.error ?? "Upload failed");
+  }
+  return res.json();
+}
+
+export async function deleteWorkspaceFile(fileId: string): Promise<void> {
+  await fetch(`${BASE}/workspace/context-files/${fileId}`, {
+    method: "DELETE",
+  });
+}
+
 // --- Questions ---
 
 export async function fetchQuestions(topicId: string): Promise<Question[]> {
@@ -151,6 +192,10 @@ export async function uploadQuestionFiles(
     method: "POST",
     body: form,
   });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: "Upload failed" }));
+    throw new Error(err.error ?? "Upload failed");
+  }
   return res.json();
 }
 
@@ -163,6 +208,96 @@ export async function deleteQuestionFile(
   });
 }
 
+export interface PickableFile {
+  fileId: string;
+  originalName: string;
+  source: "workspace" | "topic" | "question";
+  sourceName: string;
+}
+
+export async function fetchAllContextFiles(): Promise<PickableFile[]> {
+  const res = await fetch(`${BASE}/context-files/all`);
+  return res.json();
+}
+
+export async function linkFileToTopic(
+  topicId: string,
+  fileId: string,
+  originalName: string,
+): Promise<ContextFile> {
+  const res = await fetch(`${BASE}/topics/${topicId}/context-files/link`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ fileId, originalName }),
+  });
+  return res.json();
+}
+
+export async function linkFileToQuestion(
+  questionId: string,
+  fileId: string,
+  originalName: string,
+): Promise<ContextFile> {
+  const res = await fetch(
+    `${BASE}/questions/${questionId}/context-files/link`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ fileId, originalName }),
+    },
+  );
+  return res.json();
+}
+
+export async function saveCodeSnippet(
+  questionId: string,
+  code: string,
+  language: string,
+  label: string,
+  origin: "user" | "ai" | "sandbox",
+): Promise<ContextFile> {
+  const res = await fetch(`${BASE}/questions/${questionId}/save-code-snippet`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ code, language, label, origin }),
+  });
+  if (!res.ok) throw new Error(await res.text());
+  return res.json();
+}
+
+export async function overwriteContextFileContent(
+  questionId: string,
+  fileId: string,
+  content: string,
+): Promise<void> {
+  const res = await fetch(
+    `${BASE}/questions/${questionId}/context-files/${fileId}/content`,
+    {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ code: content }),
+    },
+  );
+  if (!res.ok) throw new Error(await res.text());
+}
+
+export async function renameContextFile(
+  questionId: string,
+  fileId: string,
+  label: string,
+): Promise<ContextFile> {
+  const res = await fetch(
+    `${BASE}/questions/${questionId}/context-files/${fileId}`,
+    {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ label }),
+    },
+  );
+  if (!res.ok) throw new Error(await res.text());
+  return res.json();
+}
+
 // --- Code Context ---
 
 export async function fetchCodeContextTree(): Promise<string[]> {

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

@@ -21,8 +21,10 @@ const BASELINE: AiSettings = {
     concise: { maxOutputTokens: 1000, maxSteps: 3 },
     moderate: { maxOutputTokens: 1000, maxSteps: 5 },
     normal: { maxOutputTokens: 3000, maxSteps: 5 },
+    brief: { maxOutputTokens: 10000, maxSteps: 5 },
   },
   vizGuide: "",
+  alwaysSendPrefsDefault: false,
   promptGroups: {
     length: {
       label: "Response Length",
@@ -355,6 +357,15 @@ export default function AiSettingsModal() {
   const [saved, setSaved] = useState(false);
   const overlayRef = useRef<HTMLDivElement>(null);
 
+  // ── New profile form state ────────────────────────────────────
+  const [showNewProfileForm, setShowNewProfileForm] = useState(false);
+  const [newProfileKey, setNewProfileKey] = useState("");
+
+  function resetNewProfileForm() {
+    setShowNewProfileForm(false);
+    setNewProfileKey("");
+  }
+
   // ── New group form state ─────────────────────
   const [showNewGroupForm, setShowNewGroupForm] = useState(false);
   const [newGroupKey, setNewGroupKey] = useState("");
@@ -406,6 +417,26 @@ export default function AiSettingsModal() {
     }));
   }
 
+  function addProfile(key: string) {
+    const k = key.trim().toLowerCase().replace(/\s+/g, "-");
+    if (!k || k in draft.responseProfiles) return;
+    setDraft((d) => ({
+      ...d,
+      responseProfiles: {
+        ...d.responseProfiles,
+        [k]: { maxOutputTokens: 2000, maxSteps: 5 },
+      },
+    }));
+  }
+
+  function removeProfile(key: string) {
+    setDraft((d) => {
+      const next = { ...d.responseProfiles };
+      delete next[key];
+      return { ...d, responseProfiles: next };
+    });
+  }
+
   function patchGroupOption(groupKey: string, optKey: string, value: string) {
     setDraft((d) => ({
       ...d,
@@ -585,12 +616,24 @@ export default function AiSettingsModal() {
 
           {/* ── Response Profiles ─────────────────────────────── */}
           <Section title="Response Profiles (token limits per length setting)">
-            <div className="grid grid-cols-3 gap-4">
+            <div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4">
               {profileKeys.map((key) => (
                 <div key={key} className="space-y-3">
-                  <p className="text-xs font-semibold text-cyan-400 capitalize">
-                    {key}
-                  </p>
+                  <div className="flex items-center justify-between">
+                    <p className="text-xs font-semibold text-cyan-400 capitalize">
+                      {key}
+                    </p>
+                    {profileKeys.length > 1 && (
+                      <button
+                        type="button"
+                        title={`Remove "${key}" profile`}
+                        onClick={() => removeProfile(key)}
+                        className="p-0.5 rounded text-slate-600 hover:text-red-400 hover:bg-red-500/10 transition-colors"
+                      >
+                        <Trash2 className="w-3 h-3" />
+                      </button>
+                    )}
+                  </div>
                   <div>
                     <Label>Max Output Tokens</Label>
                     <NumberInput
@@ -615,6 +658,62 @@ export default function AiSettingsModal() {
                 </div>
               ))}
             </div>
+
+            {/* Add profile */}
+            {showNewProfileForm ? (
+              <div className="mt-4 border border-slate-700 rounded-lg p-3 space-y-2 bg-slate-800/40">
+                <p className="text-xs font-medium text-slate-400">
+                  New profile key
+                </p>
+                <div className="flex gap-2">
+                  <input
+                    type="text"
+                    value={newProfileKey}
+                    onChange={(e) =>
+                      setNewProfileKey(
+                        e.target.value.toLowerCase().replace(/\s+/g, "-"),
+                      )
+                    }
+                    placeholder="e.g. brief"
+                    className="flex-1 bg-slate-800 border border-slate-700 rounded px-3 py-1.5 text-sm text-slate-200 focus:outline-none focus:border-cyan-500"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => {
+                      addProfile(newProfileKey);
+                      resetNewProfileForm();
+                    }}
+                    disabled={
+                      !newProfileKey.trim() ||
+                      newProfileKey.trim() in draft.responseProfiles
+                    }
+                    className="px-3 py-1 text-xs rounded bg-cyan-700 hover:bg-cyan-600 disabled:opacity-40 text-white transition-colors"
+                  >
+                    Add
+                  </button>
+                  <button
+                    type="button"
+                    onClick={resetNewProfileForm}
+                    className="px-3 py-1 text-xs rounded text-slate-400 hover:text-slate-200 hover:bg-slate-700 transition-colors"
+                  >
+                    Cancel
+                  </button>
+                </div>
+                {newProfileKey.trim() in draft.responseProfiles && (
+                  <p className="text-xs text-red-400">
+                    A profile with that key already exists.
+                  </p>
+                )}
+              </div>
+            ) : (
+              <button
+                type="button"
+                onClick={() => setShowNewProfileForm(true)}
+                className="mt-3 flex items-center gap-1.5 text-xs text-slate-500 hover:text-cyan-400 transition-colors"
+              >
+                <Plus className="w-3.5 h-3.5" /> Add profile
+              </button>
+            )}
           </Section>
 
           {/* ── Prompt Groups ─────────────────────────────────── */}
@@ -638,6 +737,121 @@ export default function AiSettingsModal() {
             />
           ))}
 
+          {/* ── Preferences behaviour ─────────────────────────── */}
+          <Section title="Preference Sending Behaviour">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-200">
+                  Always send preferences
+                </p>
+                <p className="text-xs text-slate-500 mt-0.5">
+                  When on, preference prompt texts are appended to every
+                  message. When off, they are only sent when you change a
+                  setting (saves tokens).
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={() =>
+                  patchTop(
+                    "alwaysSendPrefsDefault",
+                    !draft.alwaysSendPrefsDefault,
+                  )
+                }
+                className={`relative shrink-0 w-10 h-5 rounded-full transition-colors ${
+                  draft.alwaysSendPrefsDefault ? "bg-amber-500" : "bg-slate-700"
+                }`}
+              >
+                <span
+                  className={`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform ${
+                    draft.alwaysSendPrefsDefault ? "translate-x-5" : ""
+                  }`}
+                />
+              </button>
+            </div>
+          </Section>
+
+          {/* ── Model / Thinking ───────────────────────────────── */}
+          <Section title="Model & Thinking" defaultOpen={false}>
+            {/* Current model info (read-only) */}
+            <div className="flex gap-3 mb-4">
+              <div className="flex-1">
+                <Label>Provider</Label>
+                <div className="bg-slate-800 border border-slate-700 rounded px-3 py-2 text-sm text-slate-400 font-mono">
+                  {draft.provider || "openai"}
+                </div>
+              </div>
+              <div className="flex-1">
+                <Label>Model</Label>
+                <div className="bg-slate-800 border border-slate-700 rounded px-3 py-2 text-sm text-slate-400 font-mono truncate">
+                  {draft.model || "(default)"}
+                </div>
+              </div>
+            </div>
+
+            {/* Thinking budget — only useful for Google/Gemini */}
+            {["google", "gemini"].includes(draft.provider ?? "") ? (
+              <div>
+                <Label>Thinking Budget</Label>
+                <p className="text-xs text-slate-500 mb-2">
+                  Number of tokens Gemini can use for internal reasoning before
+                  responding. 0 = disabled. Shows a collapsible "Thinking…"
+                  block in the chat. Recommended: 8000 for medium, 0 to save
+                  tokens.
+                </p>
+                <div className="flex items-center gap-2 flex-wrap">
+                  {[
+                    { label: "Off", value: 0 },
+                    { label: "Low", value: 1024 },
+                    { label: "Medium", value: 8192 },
+                    { label: "High", value: 24576 },
+                  ].map((preset) => (
+                    <button
+                      key={preset.label}
+                      type="button"
+                      onClick={() => patchTop("thinkingBudget", preset.value)}
+                      className={`px-3 py-1 text-xs rounded-md border transition-colors ${
+                        (draft.thinkingBudget ?? 0) === preset.value
+                          ? "bg-cyan-600/30 text-cyan-300 border-cyan-600/50"
+                          : "text-slate-500 hover:text-slate-300 border-slate-700 hover:border-slate-500"
+                      }`}
+                    >
+                      {preset.label}
+                      {preset.value > 0 && (
+                        <span className="ml-1 opacity-60">
+                          ({preset.value.toLocaleString()})
+                        </span>
+                      )}
+                    </button>
+                  ))}
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-xs text-slate-500">Custom:</span>
+                    <input
+                      type="number"
+                      value={draft.thinkingBudget ?? 0}
+                      min={0}
+                      max={32768}
+                      step={256}
+                      onChange={(e) =>
+                        patchTop("thinkingBudget", Number(e.target.value))
+                      }
+                      className="w-24 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-xs text-slate-200 focus:outline-none focus:border-cyan-500"
+                    />
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <p className="text-xs text-slate-500">
+                Thinking / reasoning display is only available for Google /
+                Gemini models. Switch{" "}
+                <code className="bg-slate-800 px-1 rounded">AI_PROVIDER</code>{" "}
+                to <code className="bg-slate-800 px-1 rounded">google</code> in
+                your <code className="bg-slate-800 px-1 rounded">.env</code> to
+                enable it.
+              </p>
+            )}
+          </Section>
+
           {/* ── Add group form ─────────────────────────────── */}
           {showNewGroupForm ? (
             <div className="border border-cyan-600/30 rounded-lg p-4 space-y-4 bg-slate-900/60">

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

@@ -16,9 +16,7 @@ interface Props {
   onUpdate: (updated: Annotation) => void;
   messageContent: string;
   initialPos?: { x: number; y: number };
-  responseLength?: string;
-  responseStyle?: string;
-  responseAudience?: string;
+  preferenceSuffix?: string;
 }
 
 export default function AnnotationDialog({
@@ -27,9 +25,7 @@ export default function AnnotationDialog({
   onUpdate,
   messageContent,
   initialPos,
-  responseLength,
-  responseStyle,
-  responseAudience,
+  preferenceSuffix,
 }: Props) {
   const [pos, setPos] = useState(() => ({
     x: initialPos?.x ?? Math.max(0, (window.innerWidth - DEFAULT_W) / 2),
@@ -169,9 +165,7 @@ export default function AnnotationDialog({
           messageContent,
           priorResponse: ann.response,
           followUps: ann.followUps ?? [],
-          responseLength,
-          responseStyle,
-          responseAudience,
+          preferenceSuffix,
         }),
       });
       const data = await res.json();