create-interview-cockpit 0.1.0

package/template/client/src/store.ts

@@ -0,0 +1,321 @@
+import { create } from "zustand";
+import type { Topic, Question, CodeSnippet } from "./types";
+import * as api from "./api";
+
+interface Store {
+  topics: Topic[];
+  questionsByTopic: Record<string, Question[]>;
+  selectedTopicId: string | null;
+  selectedQuestionId: string | null;
+  currentQuestion: Question | null;
+  expandedTopics: string[];
+  availableFiles: string[];
+  showCodePanel: boolean;
+  showSidebar: boolean;
+  viewingFile: string | null;
+
+  fetchTopics: () => Promise<void>;
+  fetchQuestions: (topicId: string) => Promise<void>;
+  addTopic: (name: string) => Promise<void>;
+  removeTopic: (id: string) => Promise<void>;
+  renameTopic: (id: string, name: string) => Promise<void>;
+  addQuestion: (topicId: string, title: string) => Promise<void>;
+  addChildQuestion: (
+    topicId: string,
+    parentQuestionId: string,
+    title: string,
+  ) => Promise<void>;
+  removeQuestion: (questionId: string, topicId: string) => Promise<void>;
+  renameQuestion: (
+    questionId: string,
+    topicId: string,
+    title: string,
+  ) => Promise<void>;
+  selectQuestion: (topicId: string, questionId: string) => Promise<void>;
+  toggleTopic: (topicId: string) => void;
+  toggleCodePanel: () => void;
+  toggleSidebar: () => void;
+  fetchAvailableFiles: () => Promise<void>;
+  updateCodeContext: (questionId: string, files: string[]) => Promise<void>;
+  refreshCurrentQuestion: () => Promise<void>;
+  uploadTopicFiles: (
+    topicId: string,
+    files: FileList | File[],
+  ) => Promise<void>;
+  removeTopicFile: (topicId: string, fileId: string) => Promise<void>;
+  uploadQuestionFiles: (
+    questionId: string,
+    files: FileList | File[],
+  ) => Promise<void>;
+  removeQuestionFile: (questionId: string, fileId: string) => Promise<void>;
+  clearMessages: (questionId: string) => Promise<void>;
+  updateQuestionSystemContext: (
+    questionId: string,
+    systemContext: string,
+  ) => Promise<void>;
+  openFileViewer: (path: string) => void;
+  closeFileViewer: () => void;
+  codeSnippets: CodeSnippet[];
+  addSnippet: (snippet: CodeSnippet) => void;
+  removeSnippet: (id: string) => void;
+  clearSnippets: () => void;
+}
+
+export const useStore = create<Store>((set, get) => ({
+  topics: [],
+  questionsByTopic: {},
+  selectedTopicId: null,
+  selectedQuestionId: null,
+  currentQuestion: null,
+  expandedTopics: [],
+  availableFiles: [],
+  showCodePanel: false,
+  showSidebar: true,
+  viewingFile: null,
+  codeSnippets: [],
+
+  fetchTopics: async () => {
+    const topics = await api.fetchTopics();
+    set({ topics });
+  },
+
+  fetchQuestions: async (topicId) => {
+    const questions = await api.fetchQuestions(topicId);
+    set((s) => ({
+      questionsByTopic: { ...s.questionsByTopic, [topicId]: questions },
+    }));
+  },
+
+  addTopic: async (name) => {
+    const topic = await api.createTopic(name);
+    set((s) => ({
+      topics: [...s.topics, topic],
+      questionsByTopic: { ...s.questionsByTopic, [topic.id]: [] },
+      expandedTopics: [...s.expandedTopics, topic.id],
+    }));
+  },
+
+  removeTopic: async (id) => {
+    await api.deleteTopic(id);
+    set((s) => ({
+      topics: s.topics.filter((t) => t.id !== id),
+      selectedTopicId: s.selectedTopicId === id ? null : s.selectedTopicId,
+      selectedQuestionId:
+        s.selectedTopicId === id ? null : s.selectedQuestionId,
+      currentQuestion: s.selectedTopicId === id ? null : s.currentQuestion,
+    }));
+  },
+
+  renameTopic: async (id, name) => {
+    const updated = await api.updateTopic(id, { name });
+    set((s) => ({
+      topics: s.topics.map((t) =>
+        t.id === id ? { ...t, name: updated.name } : t,
+      ),
+    }));
+  },
+
+  addQuestion: async (topicId, title) => {
+    const question = await api.createQuestion(topicId, title);
+    set((s) => ({
+      questionsByTopic: {
+        ...s.questionsByTopic,
+        [topicId]: [...(s.questionsByTopic[topicId] || []), question],
+      },
+    }));
+  },
+
+  addChildQuestion: async (topicId, parentQuestionId, title) => {
+    const question = await api.createQuestion(topicId, title, parentQuestionId);
+    set((s) => ({
+      questionsByTopic: {
+        ...s.questionsByTopic,
+        [topicId]: [...(s.questionsByTopic[topicId] || []), question],
+      },
+    }));
+  },
+
+  removeQuestion: async (questionId, topicId) => {
+    await api.deleteQuestion(questionId);
+    set((s) => ({
+      questionsByTopic: {
+        ...s.questionsByTopic,
+        [topicId]: (s.questionsByTopic[topicId] || []).filter(
+          (q) => q.id !== questionId,
+        ),
+      },
+      selectedQuestionId:
+        s.selectedQuestionId === questionId ? null : s.selectedQuestionId,
+      currentQuestion:
+        s.selectedQuestionId === questionId ? null : s.currentQuestion,
+    }));
+  },
+
+  renameQuestion: async (questionId, topicId, title) => {
+    const updated = await api.updateQuestion(questionId, { title });
+    set((s) => ({
+      questionsByTopic: {
+        ...s.questionsByTopic,
+        [topicId]: (s.questionsByTopic[topicId] || []).map((q) =>
+          q.id === questionId ? { ...q, title: updated.title } : q,
+        ),
+      },
+      currentQuestion:
+        s.currentQuestion?.id === questionId
+          ? { ...s.currentQuestion, title: updated.title }
+          : s.currentQuestion,
+    }));
+  },
+
+  selectQuestion: async (topicId, questionId) => {
+    const question = await api.fetchQuestion(questionId);
+    set({
+      selectedTopicId: topicId,
+      selectedQuestionId: questionId,
+      currentQuestion: question,
+      codeSnippets: [],
+    });
+  },
+
+  addSnippet: (snippet) =>
+    set((s) => ({ codeSnippets: [...s.codeSnippets, snippet] })),
+  removeSnippet: (id) =>
+    set((s) => ({ codeSnippets: s.codeSnippets.filter((s) => s.id !== id) })),
+  clearSnippets: () => set({ codeSnippets: [] }),
+
+  toggleTopic: (topicId) => {
+    set((s) => ({
+      expandedTopics: s.expandedTopics.includes(topicId)
+        ? s.expandedTopics.filter((id) => id !== topicId)
+        : [...s.expandedTopics, topicId],
+    }));
+    const { questionsByTopic, fetchQuestions } = get();
+    if (!questionsByTopic[topicId]) {
+      fetchQuestions(topicId);
+    }
+  },
+
+  toggleSidebar: () => {
+    set((s) => ({ showSidebar: !s.showSidebar }));
+  },
+
+  toggleCodePanel: () => {
+    set((s) => ({ showCodePanel: !s.showCodePanel }));
+    const { availableFiles, fetchAvailableFiles } = get();
+    if (availableFiles.length === 0) {
+      fetchAvailableFiles();
+    }
+  },
+
+  fetchAvailableFiles: async () => {
+    const files = await api.fetchCodeContextTree();
+    set({ availableFiles: files });
+  },
+
+  updateCodeContext: async (questionId, files) => {
+    await api.updateQuestion(questionId, { codeContextFiles: files });
+    set((s) => ({
+      currentQuestion: s.currentQuestion
+        ? { ...s.currentQuestion, codeContextFiles: files }
+        : null,
+    }));
+  },
+
+  refreshCurrentQuestion: async () => {
+    const { selectedQuestionId } = get();
+    if (selectedQuestionId) {
+      const question = await api.fetchQuestion(selectedQuestionId);
+      set({ currentQuestion: question });
+    }
+  },
+
+  uploadTopicFiles: async (topicId, files) => {
+    const uploaded = await api.uploadTopicFiles(topicId, files);
+    set((s) => ({
+      topics: s.topics.map((t) =>
+        t.id === topicId
+          ? { ...t, contextFiles: [...(t.contextFiles || []), ...uploaded] }
+          : t,
+      ),
+    }));
+  },
+
+  removeTopicFile: async (topicId, fileId) => {
+    await api.deleteTopicFile(topicId, fileId);
+    set((s) => ({
+      topics: s.topics.map((t) =>
+        t.id === topicId
+          ? {
+              ...t,
+              contextFiles: (t.contextFiles || []).filter(
+                (f) => f.id !== fileId,
+              ),
+            }
+          : t,
+      ),
+    }));
+  },
+
+  uploadQuestionFiles: async (questionId, files) => {
+    const uploaded = await api.uploadQuestionFiles(questionId, files);
+    set((s) => ({
+      currentQuestion:
+        s.currentQuestion?.id === questionId
+          ? {
+              ...s.currentQuestion,
+              contextFiles: [
+                ...(s.currentQuestion.contextFiles || []),
+                ...uploaded,
+              ],
+            }
+          : s.currentQuestion,
+    }));
+  },
+
+  removeQuestionFile: async (questionId, fileId) => {
+    await api.deleteQuestionFile(questionId, fileId);
+    set((s) => ({
+      currentQuestion:
+        s.currentQuestion?.id === questionId
+          ? {
+              ...s.currentQuestion,
+              contextFiles: (s.currentQuestion.contextFiles || []).filter(
+                (f) => f.id !== fileId,
+              ),
+            }
+          : s.currentQuestion,
+    }));
+  },
+
+  clearMessages: async (questionId) => {
+    await api.updateQuestion(questionId, { messages: [] });
+    set((s) => ({
+      currentQuestion:
+        s.currentQuestion?.id === questionId
+          ? { ...s.currentQuestion, messages: [] }
+          : s.currentQuestion,
+    }));
+  },
+
+  updateQuestionSystemContext: async (questionId, systemContext) => {
+    const updated = await api.updateQuestion(questionId, { systemContext });
+    set((s) => ({
+      questionsByTopic: {
+        ...s.questionsByTopic,
+        [updated.topicId]: (s.questionsByTopic[updated.topicId] || []).map(
+          (question) =>
+            question.id === questionId
+              ? { ...question, systemContext: updated.systemContext }
+              : question,
+        ),
+      },
+      currentQuestion:
+        s.currentQuestion?.id === questionId
+          ? { ...s.currentQuestion, systemContext: updated.systemContext }
+          : s.currentQuestion,
+    }));
+  },
+
+  openFileViewer: (path) => set({ viewingFile: path }),
+  closeFileViewer: () => set({ viewingFile: null }),
+}));

package/template/client/src/types.ts

@@ -0,0 +1,65 @@
+export interface ContextFile {
+  id: string;
+  name: string;
+  originalName: string;
+  createdAt: string;
+}
+
+export interface Topic {
+  id: string;
+  name: string;
+  contextFiles: ContextFile[];
+  createdAt: string;
+}
+
+export interface Message {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+  createdAt?: string;
+}
+
+export interface AnnotationFollowUp {
+  id: string;
+  prompt: string;
+  response: string;
+  createdAt: string;
+}
+
+export interface Annotation {
+  id: string;
+  messageId: string;
+  selectedText: string;
+  prompt: string;
+  response: string;
+  followUps?: AnnotationFollowUp[];
+  createdAt: string;
+}
+
+export interface CodeSnippet {
+  id: string;
+  filePath: string;
+  fileName: string;
+  startLine: number;
+  endLine: number;
+  code: string;
+}
+
+export interface ReadingBookmark {
+  messageId: string;
+  blockIndex: number;
+}
+
+export interface Question {
+  id: string;
+  topicId: string;
+  parentQuestionId?: string;
+  title: string;
+  systemContext: string;
+  codeContextFiles: string[];
+  contextFiles: ContextFile[];
+  messages: Message[];
+  annotations?: Annotation[];
+  readingBookmark?: ReadingBookmark;
+  createdAt: string;
+}

package/template/client/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/client/tailwind.config.cjs

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [require('@tailwindcss/typography')],
+};

package/template/client/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}

package/template/client/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/app.tsx","./src/api.ts","./src/main.tsx","./src/store.ts","./src/types.ts","./src/vite-env.d.ts","./src/components/chatmessage.tsx","./src/components/chatview.tsx","./src/components/codecontextpanel.tsx","./src/components/fileattachments.tsx","./src/components/fileviewermodal.tsx","./src/components/markdownrenderer.tsx","./src/components/mermaiddiagram.tsx","./src/components/sidebar.tsx","./src/components/textannotator.tsx"],"version":"5.9.3"}

package/template/client/vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    proxy: {
+      "/api": "http://localhost:3001",
+    },
+  },
+});

package/template/cockpit.json

@@ -0,0 +1,3 @@
+{
+  "version": "0.1.0"
+}

package/template/data/topics.json

@@ -0,0 +1 @@
+[]

package/template/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "interview-cockpit",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "concurrently -n server,client -c blue,green \"npm run dev --prefix server\" \"npm run dev --prefix client\"",
+    "build": "npm run build --prefix client",
+    "start": "npm run start --prefix server",
+    "sync:template": "node scripts/sync-template.js"
+  },
+  "devDependencies": {
+    "concurrently": "^9.1.0"
+  }
+}