create-interview-cockpit 0.3.0 → 0.5.0

package/README.md

@@ -57,6 +57,29 @@ AI_MODEL=gemini-2.5-flash
 GOOGLE_API_KEY=your-key-here
 ```
 
+## Upgrading
+
+When a new version of the template is released, run this from inside your cockpit project directory:
+
+```bash
+npx create-interview-cockpit upgrade
+```
+
+The CLI will:
+- Compare your installed version (`cockpit.json`) against the latest
+- Overwrite `client/` and `server/` with the updated template files
+- Merge any new scripts and dependencies into your `package.json` (your pinned versions are preserved)
+- **Leave untouched:** `.env`, `data/` (your topics, questions, and context files), and `node_modules/`
+
+After upgrading, reinstall dependencies and restart:
+
+```bash
+npm install
+cd client && npm install && cd ..
+cd server && npm install && cd ..
+npm run dev
+```
+
 ## License
 
 MIT

package/package.json

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

package/template/client/package-lock.json

@@ -7,14 +7,19 @@
       "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",
+        "yaml": "^2.8.3",
         "zustand": "^5.0.0"
       },
       "devDependencies": {
@@ -1747,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",
@@ -4913,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",
@@ -5894,6 +5915,12 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/vizcraft": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/vizcraft/-/vizcraft-1.17.0.tgz",
+      "integrity": "sha512-BCXjnWWEfMHWnAYD6DQvVXJFz0Q/Da1ukULXdMKIrZiNfblVVyYO/b/MWPO54cRzJESJZle4U52G1v2U/zRqQg==",
+      "license": "MIT"
+    },
     "node_modules/vscode-jsonrpc": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz",
@@ -5959,6 +5986,21 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/yaml": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.3.tgz",
+      "integrity": "sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==",
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    },
     "node_modules/zod": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",

package/template/client/package.json

@@ -9,14 +9,19 @@
   },
   "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",
+    "yaml": "^2.8.3",
     "zustand": "^5.0.0"
   },
   "devDependencies": {

package/template/client/src/App.tsx

@@ -4,12 +4,17 @@ 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";
+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() {
   const {
     fetchTopics,
     fetchWorkspaces,
+    fetchAiSettings,
+    fetchWorkspaceFiles,
     fetchQuestions,
     selectQuestion,
     currentQuestion,
@@ -19,12 +24,21 @@ export default function App() {
     toggleSidebar,
     viewingFile,
     closeFileViewer,
+    viewingDoc,
+    closeDocViewer,
+    showSettings,
+    openSettings,
+    closeSettings,
+    showCodeRunner,
+    closeCodeRunner,
   } = useStore();
 
   useEffect(() => {
     const init = async () => {
       await fetchWorkspaces();
       await fetchTopics();
+      fetchAiSettings();
+      fetchWorkspaceFiles();
       // Restore last-viewed question after page refresh
       const topicId = sessionStorage.getItem("lastTopicId");
       const questionId = sessionStorage.getItem("lastQuestionId");
@@ -71,17 +85,26 @@ export default function App() {
               {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>
+          <div className="flex items-center gap-1">
+            <button
+              onClick={openSettings}
+              className="p-1.5 rounded transition-colors text-slate-500 hover:text-slate-300 hover:bg-slate-800"
+              title="AI Settings"
+            >
+              <Settings className="w-4 h-4" />
+            </button>
+            <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>
+          </div>
         </header>
 
         {/* Content area */}
@@ -124,6 +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

@@ -2,6 +2,52 @@ import type { Topic, Question, ContextFile, WorkspacesRegistry } from "./types";
 
 const BASE = "/api";
 
+export interface PromptGroup {
+  /** Display name shown in the settings UI. */
+  label: string;
+  /** Optional helper text shown below the section header. */
+  description?: string;
+  /** Which option key is active by default in new chats. */
+  default: string;
+  /** Map of option key -> prompt text appended to the user message. */
+  options: Record<string, string>;
+}
+
+export interface AiSettings {
+  systemPrompt: string;
+  responseProfiles: Record<
+    string,
+    { maxOutputTokens: number; maxSteps: number }
+  >;
+  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> {
+  const res = await fetch(`${BASE}/settings`);
+  return res.json();
+}
+
+export async function saveAiSettings(
+  patch: Partial<AiSettings>,
+): Promise<AiSettings> {
+  const res = await fetch(`${BASE}/settings`, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(patch),
+  });
+  return res.json();
+}
+
 export async function fetchTopics(): Promise<Topic[]> {
   const res = await fetch(`${BASE}/topics`);
   return res.json();
@@ -44,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();
 }
 
@@ -56,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[]> {
@@ -81,6 +160,7 @@ export async function createQuestion(
 
 export async function fetchQuestion(id: string): Promise<Question> {
   const res = await fetch(`${BASE}/questions/${id}`);
+  if (!res.ok) throw new Error(`Question not found: ${id}`);
   return res.json();
 }
 
@@ -112,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();
 }
 
@@ -124,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[]> {