create-interview-cockpit 0.5.0 → 0.7.0

package/template/client/package.json

@@ -20,6 +20,7 @@
     "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

@@ -7,6 +7,7 @@ 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() {
@@ -30,6 +31,7 @@ export default function App() {
     openSettings,
     closeSettings,
     showCodeRunner,
+    showInfraLab,
     closeCodeRunner,
   } = useStore();
 
@@ -157,6 +159,7 @@ export default function App() {
       )}
       {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,6 +26,7 @@ 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). */
@@ -32,6 +39,65 @@ export interface AiSettings {
   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();
@@ -68,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",
@@ -254,7 +320,14 @@ export async function saveCodeSnippet(
   code: string,
   language: string,
   label: string,
-  origin: "user" | "ai" | "sandbox",
+  origin:
+    | "user"
+    | "ai"
+    | "sandbox"
+    | "infra"
+    | "react"
+    | "nextjs"
+    | "module-federation",
 ): Promise<ContextFile> {
   const res = await fetch(`${BASE}/questions/${questionId}/save-code-snippet`, {
     method: "POST",
@@ -298,6 +371,217 @@ export async function renameContextFile(
   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" | "module-federation";
+    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[]> {
@@ -417,7 +701,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`,
     {
@@ -493,3 +777,99 @@ 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 interface ModuleFederationSandboxInfo {
+  id: string;
+  hostUrl: string;
+  appUrls: Record<string, string>;
+}
+
+export interface ModuleFederationSandboxStatus {
+  running: boolean;
+  ready?: boolean;
+  hostUrl?: string;
+  appUrls?: Record<string, string>;
+  logs?: 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" });
+}
+
+export async function startModuleFederationSandbox(
+  files: Record<string, string>,
+): Promise<ModuleFederationSandboxInfo> {
+  const res = await fetch(`${BASE}/module-federation/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 webpack module federation lab (${res.status})`,
+    );
+  }
+  return res.json();
+}
+
+export async function updateModuleFederationFiles(
+  id: string,
+  files: Record<string, string>,
+): Promise<void> {
+  const res = await fetch(`${BASE}/module-federation/${id}/update-files`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ files }),
+  });
+  if (!res.ok) throw new Error(await res.text());
+}
+
+export async function fetchModuleFederationStatus(
+  id: string,
+): Promise<ModuleFederationSandboxStatus> {
+  const res = await fetch(`${BASE}/module-federation/${id}/status`);
+  if (!res.ok) throw new Error(await res.text());
+  return res.json();
+}
+
+export async function stopModuleFederationSandbox(id: string): Promise<void> {
+  await fetch(`${BASE}/module-federation/${id}`, { method: "DELETE" });
+}