create-interview-cockpit 0.11.0 → 0.13.0

package/package.json

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

package/template/client/src/App.tsx

@@ -3,12 +3,21 @@ import { useStore } from "./store";
 import Sidebar from "./components/Sidebar";
 import ChatView from "./components/ChatView";
 import CodeContextPanel from "./components/CodeContextPanel";
+import LabsPanel from "./components/LabsPanel";
 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";
+import DeploymentLabModal from "./components/DeploymentLabModal";
+import {
+  Code,
+  FlaskConical,
+  Plane,
+  PanelLeftClose,
+  PanelLeft,
+  Settings,
+} from "lucide-react";
 
 export default function App() {
   const {
@@ -21,6 +30,8 @@ export default function App() {
     currentQuestion,
     showCodePanel,
     toggleCodePanel,
+    showLabsPanel,
+    toggleLabsPanel,
     showSidebar,
     toggleSidebar,
     viewingFile,
@@ -32,6 +43,7 @@ export default function App() {
     closeSettings,
     showCodeRunner,
     showInfraLab,
+    showDeploymentLab,
     closeCodeRunner,
   } = useStore();
 
@@ -106,6 +118,17 @@ export default function App() {
             >
               <Code className="w-4 h-4" />
             </button>
+            <button
+              onClick={toggleLabsPanel}
+              className={`p-1.5 rounded transition-colors ${
+                showLabsPanel
+                  ? "bg-violet-500/20 text-violet-400"
+                  : "text-slate-500 hover:text-slate-300"
+              }`}
+              title="Toggle labs panel"
+            >
+              <FlaskConical className="w-4 h-4" />
+            </button>
           </div>
         </header>
 
@@ -144,6 +167,11 @@ export default function App() {
               <CodeContextPanel />
             </div>
           )}
+          {showLabsPanel && (
+            <div className="min-h-0 flex overflow-hidden">
+              <LabsPanel />
+            </div>
+          )}
         </div>
       </main>
 
@@ -161,6 +189,7 @@ export default function App() {
       {showSettings && <AiSettingsModal />}
       {showCodeRunner && <CodeRunnerModal />}
       {showInfraLab && <InfraLabModal />}
+      {showDeploymentLab && <DeploymentLabModal />}
     </div>
   );
 }

package/template/client/src/api.ts

@@ -274,6 +274,28 @@ export async function deleteQuestionFile(
   });
 }
 
+export async function detachQuestionLabFile(
+  questionId: string,
+  fileId: string,
+): Promise<ContextFile> {
+  const res = await fetch(
+    `${BASE}/questions/${questionId}/context-files/${fileId}/detach`,
+    { method: "POST" },
+  );
+  return res.json();
+}
+
+export async function attachQuestionLabFile(
+  questionId: string,
+  fileId: string,
+): Promise<ContextFile> {
+  const res = await fetch(
+    `${BASE}/questions/${questionId}/context-files/${fileId}/attach`,
+    { method: "POST" },
+  );
+  return res.json();
+}
+
 export interface PickableFile {
   fileId: string;
   originalName: string;
@@ -968,3 +990,100 @@ export async function fetchModuleFederationGeneratedFile(
 export async function stopModuleFederationSandbox(id: string): Promise<void> {
   await fetch(`${BASE}/module-federation/${id}`, { method: "DELETE" });
 }
+
+// ── React Lab (Vite) ─────────────────────────────────────────────────────────
+
+export interface ReactLabSandboxInfo {
+  id: string;
+  port: number;
+  url: string;
+}
+
+export async function startReactLabSandbox(
+  files: Record<string, string>,
+): Promise<ReactLabSandboxInfo> {
+  const res = await fetch(`${BASE}/react-lab/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 React lab (${res.status})`,
+    );
+  }
+  return res.json();
+}
+
+export async function updateReactLabFiles(
+  id: string,
+  files: Record<string, string>,
+): Promise<void> {
+  await fetch(`${BASE}/react-lab/${id}/update-files`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ files }),
+  });
+}
+
+export async function streamReactLabCommand(
+  input: { id: string; command: string },
+  onMessage: (message: ModuleFederationCommandStreamMessage) => void,
+): Promise<void> {
+  const res = await fetch(`${BASE}/react-lab/${input.id}/command-stream`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ command: input.command }),
+  });
+
+  if (!res.ok || !res.body) {
+    const error = await res.text().catch(() => "React lab command failed");
+    throw new Error(error || "React lab command failed");
+  }
+
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+
+  const flushBuffer = () => {
+    const parts = buffer.split("\n\n");
+    buffer = parts.pop() ?? "";
+    for (const part of parts) {
+      const dataLine = part.split("\n").find((l) => l.startsWith("data:"));
+      if (!dataLine) continue;
+      try {
+        const payload = JSON.parse(dataLine.slice(5).trim());
+        onMessage(payload as ModuleFederationCommandStreamMessage);
+      } catch {}
+    }
+  };
+
+  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 readReactLabFile(
+  id: string,
+  filePath: string,
+): Promise<string | null> {
+  const res = await fetch(
+    `${BASE}/react-lab/${id}/read-file?path=${encodeURIComponent(filePath)}`,
+    { cache: "no-store" },
+  );
+  if (!res.ok) return null;
+  const body = (await res.json()) as { content?: string };
+  return body.content ?? null;
+}
+
+export async function stopReactLabSandbox(id: string): Promise<void> {
+  await fetch(`${BASE}/react-lab/${id}`, { method: "DELETE" });
+}