create-interview-cockpit 0.2.0 → 0.4.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.2.0",
+  "version": "0.4.0",
   "description": "Scaffold a personal AI-powered interview prep cockpit",
   "type": "module",
   "bin": {

package/template/client/package-lock.json

@@ -15,6 +15,8 @@
         "react-markdown": "^9.0.0",
         "react-syntax-highlighter": "^15.6.1",
         "remark-gfm": "^4.0.0",
+        "vizcraft": "^1.17.0",
+        "yaml": "^2.8.3",
         "zustand": "^5.0.0"
       },
       "devDependencies": {
@@ -5894,6 +5896,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 +5967,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

@@ -17,6 +17,8 @@
     "react-markdown": "^9.0.0",
     "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,16 @@ 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 AiSettingsModal from "./components/AiSettingsModal";
+import { Code, Plane, PanelLeftClose, PanelLeft, Settings } from "lucide-react";
 
 export default function App() {
   const {
     fetchTopics,
     fetchWorkspaces,
+    fetchAiSettings,
+    fetchQuestions,
+    selectQuestion,
     currentQuestion,
     showCodePanel,
     toggleCodePanel,
@@ -17,12 +21,34 @@ export default function App() {
     toggleSidebar,
     viewingFile,
     closeFileViewer,
+    showSettings,
+    openSettings,
+    closeSettings,
   } = useStore();
 
   useEffect(() => {
     const init = async () => {
       await fetchWorkspaces();
       await fetchTopics();
+      fetchAiSettings();
+      // Restore last-viewed question after page refresh
+      const topicId = sessionStorage.getItem("lastTopicId");
+      const questionId = sessionStorage.getItem("lastQuestionId");
+      if (topicId && questionId) {
+        try {
+          await fetchQuestions(topicId);
+          await selectQuestion(topicId, questionId);
+          // Expand the topic so it's visible in the sidebar
+          const { expandedTopics } = useStore.getState();
+          if (!expandedTopics.includes(topicId)) {
+            useStore.getState().toggleTopic(topicId);
+          }
+        } catch {
+          // Question may no longer exist — ignore
+          sessionStorage.removeItem("lastTopicId");
+          sessionStorage.removeItem("lastQuestionId");
+        }
+      }
     };
     init();
   }, []);
@@ -51,17 +77,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 */}
@@ -104,6 +139,7 @@ export default function App() {
       {viewingFile && (
         <FileViewerModal filePath={viewingFile} onClose={closeFileViewer} />
       )}
+      {showSettings && <AiSettingsModal />}
     </div>
   );
 }

package/template/client/src/api.ts

@@ -2,6 +2,44 @@ 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>;
+}
+
+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();
@@ -81,6 +119,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();
 }