create-interview-cockpit 0.6.0 → 0.7.0

package/package.json

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

package/template/client/src/api.ts

@@ -320,7 +320,14 @@ export async function saveCodeSnippet(
   code: string,
   language: string,
   label: string,
-  origin: "user" | "ai" | "sandbox" | "infra" | "react" | "nextjs",
+  origin:
+    | "user"
+    | "ai"
+    | "sandbox"
+    | "infra"
+    | "react"
+    | "nextjs"
+    | "module-federation",
 ): Promise<ContextFile> {
   const res = await fetch(`${BASE}/questions/${questionId}/save-code-snippet`, {
     method: "POST",
@@ -538,7 +545,7 @@ export async function streamFrontendLabAsk(
   input: {
     messages: Array<{ role: "user" | "assistant"; content: string }>;
     workspace: Record<string, string>;
-    labType: "react" | "nextjs";
+    labType: "react" | "nextjs" | "module-federation";
     questionId?: string;
   },
   onDelta: (chunk: string) => void,
@@ -779,6 +786,20 @@ export interface NextjsSandboxInfo {
   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> {
@@ -810,3 +831,45 @@ export async function updateNextjsFiles(
 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" });
+}

package/template/client/src/components/CodeContextPanel.tsx

@@ -238,6 +238,7 @@ export default function CodeContextPanel() {
     openInfraLab,
     openReactLab,
     openNextLab,
+    openModuleFederationLab,
     removeQuestionFile,
     renameContextFile,
   } = useStore();
@@ -1144,6 +1145,116 @@ export default function CodeContextPanel() {
         </div>
       )}
 
+      {/* ── Webpack Module Federation Labs section ───────────── */}
+      {currentQuestion && (
+        <div className="border-t border-slate-800 px-3 py-2">
+          <div className="flex items-center justify-between mb-1">
+            <div className="flex items-center gap-1">
+              <Server className="w-3 h-3 text-emerald-400/70" />
+              <span className="text-[10px] uppercase tracking-wider text-slate-600">
+                Webpack MF Labs (
+                {
+                  (currentQuestion.contextFiles || []).filter(
+                    (f) => f.origin === "module-federation",
+                  ).length
+                }
+                )
+              </span>
+            </div>
+            <button
+              onClick={() => openModuleFederationLab()}
+              className="p-0.5 rounded text-slate-600 hover:text-emerald-400 hover:bg-slate-700 transition-colors"
+              title="Open Webpack Module Federation Lab"
+            >
+              <Plus className="w-3.5 h-3.5" />
+            </button>
+          </div>
+          <div className="space-y-0.5 max-h-32 overflow-y-auto">
+            {(currentQuestion.contextFiles || [])
+              .filter((f) => f.origin === "module-federation")
+              .map((cf) => (
+                <div
+                  key={cf.id}
+                  className="flex items-center gap-1 text-xs bg-emerald-500/10 border border-emerald-500/20 rounded px-1.5 py-1 group"
+                >
+                  <span
+                    className="text-emerald-200 font-medium truncate flex-1"
+                    title={cf.label || cf.originalName}
+                  >
+                    {cf.label || cf.originalName}
+                  </span>
+                  <button
+                    onClick={async () => {
+                      try {
+                        const raw = await fetch(
+                          `/api/context-files/${cf.id}/content`,
+                        )
+                          .then((r) => r.json())
+                          .then((d) => d.content as string);
+                        const ext = JSON.parse(raw) as {
+                          clientType?: string;
+                          reactFiles?: Record<string, string>;
+                          reactActiveFile?: string;
+                          serverCode?: string;
+                          serverLang?: string;
+                        };
+                        if (
+                          ext?.clientType === "module-federation" &&
+                          ext.reactFiles
+                        ) {
+                          openModuleFederationLab(
+                            {
+                              version: 1,
+                              type: "module-federation",
+                              label:
+                                cf.label || "Webpack Module Federation Lab",
+                              activeFile:
+                                ext.reactActiveFile ??
+                                Object.keys(ext.reactFiles)[0] ??
+                                "apps/host/webpack.config.js",
+                              files: ext.reactFiles,
+                            },
+                            cf.id,
+                            ext.serverCode,
+                            ext.serverLang,
+                          );
+                        } else {
+                          const ws = parseFrontendLabWorkspace(raw);
+                          if (ws?.type === "module-federation") {
+                            openModuleFederationLab(ws, cf.id);
+                          }
+                        }
+                      } catch {
+                        /* ignore */
+                      }
+                    }}
+                    className="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-emerald-400 transition-all"
+                    title="Open in Webpack Module Federation Lab"
+                  >
+                    <Play className="w-3 h-3" />
+                  </button>
+                  <button
+                    onClick={() =>
+                      removeQuestionFile(currentQuestion.id, cf.id)
+                    }
+                    className="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-red-400 transition-all"
+                    title="Remove"
+                  >
+                    <Trash2 className="w-3 h-3" />
+                  </button>
+                </div>
+              ))}
+            {(currentQuestion.contextFiles || []).filter(
+              (f) => f.origin === "module-federation",
+            ).length === 0 && (
+              <p className="text-[10px] text-slate-700 italic">
+                Save a webpack module federation lab to reopen it here
+              </p>
+            )}
+          </div>
+        </div>
+      )}
+
       {/* ── Notes section ────────────────────────────────────── */}
       <div className="border-t border-slate-800 px-3 py-2">
         <button