create-interview-cockpit 0.4.0 → 0.6.0

package/template/client/package.json

@@ -9,14 +9,18 @@
   },
   "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",
+    "vega-embed": "^7.1.0",
     "vizcraft": "^1.17.0",
     "yaml": "^2.8.3",
     "zustand": "^5.0.0"

package/template/client/src/App.tsx

@@ -4,7 +4,10 @@ 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 InfraLabModal from "./components/InfraLabModal";
 import { Code, Plane, PanelLeftClose, PanelLeft, Settings } from "lucide-react";
 
 export default function App() {
@@ -12,6 +15,7 @@ export default function App() {
     fetchTopics,
     fetchWorkspaces,
     fetchAiSettings,
+    fetchWorkspaceFiles,
     fetchQuestions,
     selectQuestion,
     currentQuestion,
@@ -21,9 +25,14 @@ export default function App() {
     toggleSidebar,
     viewingFile,
     closeFileViewer,
+    viewingDoc,
+    closeDocViewer,
     showSettings,
     openSettings,
     closeSettings,
+    showCodeRunner,
+    showInfraLab,
+    closeCodeRunner,
   } = useStore();
 
   useEffect(() => {
@@ -31,6 +40,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 +149,17 @@ 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 />}
+      {showInfraLab && <InfraLabModal />}
     </div>
   );
 }

package/template/client/src/api.ts

@@ -1,4 +1,10 @@
-import type { Topic, Question, ContextFile, WorkspacesRegistry } from "./types";
+import type {
+  Topic,
+  Question,
+  ContextFile,
+  WorkspacesRegistry,
+  InfraLabWorkspace,
+} from "./types";
 
 const BASE = "/api";
 
@@ -20,10 +26,78 @@ export interface AiSettings {
     { maxOutputTokens: number; maxSteps: number }
   >;
   vizGuide: string;
+  plotGuide: 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 type InfraRunAction = "validate" | "plan" | "command";
+export type InfraRunStatus = "completed" | "failed";
+
+export interface InfraRunArtifact {
+  key: string;
+  label: string;
+  kind: "text" | "json";
+  fileName: string;
+}
+
+export interface InfraDiagnostic {
+  severity: string;
+  summary: string;
+  detail?: string;
+  address?: string;
+  filename?: string;
+  line?: number;
+}
+
+export interface InfraPlanSummary {
+  add: number;
+  change: number;
+  destroy: number;
+  replace: number;
+  resourceCount: number;
+  outputCount: number;
+}
+
+export interface InfraRunListItem {
+  id: string;
+  fileId?: string;
+  questionId?: string;
+  label: string;
+  action: InfraRunAction;
+  command?: string;
+  status: InfraRunStatus;
+  startedAt: string;
+  completedAt: string;
+  durationMs: number;
+  provider: "aws";
+  executionMode: "plan-only" | "localstack";
+  diagnostics: InfraDiagnostic[];
+  planSummary?: InfraPlanSummary;
+  error?: string;
+  artifacts: InfraRunArtifact[];
+}
+
+export interface InfraRunDetails extends InfraRunListItem {
+  logs: string;
+  validationJson?: unknown;
+  planJson?: unknown;
+  workspaceSnapshot?: InfraLabWorkspace;
+}
+
+export type InfraCommandStreamMessage =
+  | { type: "output"; kind: "stdout" | "stderr" | "info"; text: string }
+  | { type: "complete"; run: InfraRunDetails }
+  | { type: "error"; error: string };
+
 export async function fetchAiSettings(): Promise<AiSettings> {
   const res = await fetch(`${BASE}/settings`);
   return res.json();
@@ -60,7 +134,7 @@ export async function deleteTopic(id: string): Promise<void> {
 
 export async function updateTopic(
   id: string,
-  data: { name?: string },
+  data: { name?: string; systemContext?: string },
 ): Promise<Topic> {
   const res = await fetch(`${BASE}/topics/${id}`, {
     method: "PATCH",
@@ -82,6 +156,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 +172,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 +258,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 +274,307 @@ 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" | "infra" | "react" | "nextjs",
+): 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();
+}
+
+export async function runInfraAction(input: {
+  questionId?: string;
+  fileId?: string;
+  label?: string;
+  action: "validate" | "plan";
+  workspace: InfraLabWorkspace;
+}): Promise<InfraRunDetails> {
+  const res = await fetch(`${BASE}/infra/run`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(input),
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: "Infra run failed" }));
+    throw new Error(err.error ?? "Infra run failed");
+  }
+  return res.json();
+}
+
+export async function fetchInfraRuns(
+  fileId: string,
+): Promise<InfraRunListItem[]> {
+  const res = await fetch(
+    `${BASE}/infra/runs?fileId=${encodeURIComponent(fileId)}`,
+  );
+  if (!res.ok) throw new Error(await res.text());
+  return res.json();
+}
+
+export async function streamInfraCommand(
+  input: {
+    questionId?: string;
+    fileId?: string;
+    label?: string;
+    command: string;
+    workspace: InfraLabWorkspace;
+  },
+  onMessage: (message: InfraCommandStreamMessage) => void,
+): Promise<void> {
+  const res = await fetch(`${BASE}/infra/command-stream`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(input),
+  });
+
+  if (!res.ok || !res.body) {
+    const error = await res.text().catch(() => "Infra command failed");
+    throw new Error(error || "Infra command failed");
+  }
+
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+
+  const flushBuffer = () => {
+    const events = buffer.replace(/\r/g, "").split("\n\n");
+    buffer = events.pop() ?? "";
+
+    for (const event of events) {
+      if (!event.trim()) continue;
+      const payload = event
+        .split("\n")
+        .filter((line) => line.startsWith("data:"))
+        .map((line) => line.slice(5).trimStart())
+        .join("\n");
+
+      if (!payload) continue;
+      onMessage(JSON.parse(payload) as InfraCommandStreamMessage);
+    }
+  };
+
+  while (true) {
+    const { value, done } = await reader.read();
+    buffer += decoder.decode(value ?? new Uint8Array(), { stream: !done });
+    flushBuffer();
+    if (done) break;
+  }
+
+  if (buffer.trim()) {
+    flushBuffer();
+  }
+}
+
+export async function fetchInfraRun(runId: string): Promise<InfraRunDetails> {
+  const res = await fetch(`${BASE}/infra/runs/${encodeURIComponent(runId)}`);
+  if (!res.ok) throw new Error(await res.text());
+  return res.json();
+}
+
+export async function streamInfraAsk(
+  input: {
+    messages: Array<{ role: "user" | "assistant"; content: string }>;
+    workspace: Record<string, string>;
+    questionId?: string;
+  },
+  onDelta: (chunk: string) => void,
+): Promise<void> {
+  const res = await fetch(`${BASE}/infra/ask`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(input),
+  });
+
+  if (!res.ok || !res.body) {
+    const err = await res.text().catch(() => "Infra ask failed");
+    throw new Error(err || "Infra ask failed");
+  }
+
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+
+  while (true) {
+    const { value, done } = await reader.read();
+    if (done) break;
+    const chunk = decoder.decode(value, { stream: true });
+    // AI SDK UIMessageStream emits SSE lines like: data: {"type":"text-delta","id":"0","delta":"..."}
+    for (const line of chunk.split("\n")) {
+      if (!line.startsWith("data: ")) continue;
+      try {
+        const json = JSON.parse(line.slice(6));
+        if (json.type === "text-delta" && typeof json.delta === "string") {
+          onDelta(json.delta);
+        }
+      } catch {
+        // ignore malformed chunk
+      }
+    }
+  }
+}
+
+export async function streamNotesAsk(
+  input: {
+    messages: Array<{ role: "user" | "assistant"; content: string }>;
+    noteContent?: string;
+    noteName?: string;
+  },
+  onDelta: (chunk: string) => void,
+): Promise<void> {
+  const res = await fetch(`${BASE}/notes/ask`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(input),
+  });
+
+  if (!res.ok || !res.body) {
+    const err = await res.text().catch(() => "Notes ask failed");
+    throw new Error(err || "Notes ask failed");
+  }
+
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+
+  while (true) {
+    const { value, done } = await reader.read();
+    if (done) break;
+    const chunk = decoder.decode(value, { stream: true });
+    for (const line of chunk.split("\n")) {
+      if (!line.startsWith("data: ")) continue;
+      try {
+        const json = JSON.parse(line.slice(6));
+        if (json.type === "text-delta" && typeof json.delta === "string") {
+          onDelta(json.delta);
+        }
+      } catch {
+        // ignore malformed chunk
+      }
+    }
+  }
+}
+
+export async function streamFrontendLabAsk(
+  input: {
+    messages: Array<{ role: "user" | "assistant"; content: string }>;
+    workspace: Record<string, string>;
+    labType: "react" | "nextjs";
+    questionId?: string;
+  },
+  onDelta: (chunk: string) => void,
+): Promise<void> {
+  const res = await fetch(`${BASE}/frontend-lab/ask`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(input),
+  });
+
+  if (!res.ok || !res.body) {
+    const err = await res.text().catch(() => "Frontend lab ask failed");
+    throw new Error(err || "Frontend lab ask failed");
+  }
+
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+
+  while (true) {
+    const { value, done } = await reader.read();
+    if (done) break;
+    const chunk = decoder.decode(value, { stream: true });
+    for (const line of chunk.split("\n")) {
+      if (!line.startsWith("data: ")) continue;
+      try {
+        const json = JSON.parse(line.slice(6));
+        if (json.type === "text-delta" && typeof json.delta === "string") {
+          onDelta(json.delta);
+        }
+      } catch {
+        // ignore malformed chunk
+      }
+    }
+  }
+}
+
 // --- Code Context ---
 
 export async function fetchCodeContextTree(): Promise<string[]> {
@@ -282,7 +694,7 @@ export async function fetchDriveSubfolders(
 export async function createDriveSubfolder(
   workspaceId: string,
   name: string,
-): Promise<DriveFolder> {
+): Promise<DriveFolder | { needsAuth: true; authUrl: string }> {
   const res = await fetch(
     `${BASE}/workspaces/${workspaceId}/drive-subfolders`,
     {
@@ -358,3 +770,43 @@ export async function attachDriveFolder(
   const data = await res.json();
   return data.registry;
 }
+
+// ── Next.js real-server sandbox ──────────────────────────────────────────────
+
+export interface NextjsSandboxInfo {
+  id: string;
+  port: number;
+  url: string;
+}
+
+export async function startNextjsSandbox(
+  files: Record<string, string>,
+): Promise<NextjsSandboxInfo> {
+  const res = await fetch(`${BASE}/nextjs/start`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ files }),
+  });
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new Error(
+      (body as any).error || `Failed to start Next.js (${res.status})`,
+    );
+  }
+  return res.json();
+}
+
+export async function updateNextjsFiles(
+  id: string,
+  files: Record<string, string>,
+): Promise<void> {
+  await fetch(`${BASE}/nextjs/${id}/update-files`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ files }),
+  });
+}
+
+export async function stopNextjsSandbox(id: string): Promise<void> {
+  await fetch(`${BASE}/nextjs/${id}`, { method: "DELETE" });
+}