create-interview-cockpit 0.12.0 → 0.14.0

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

@@ -0,0 +1,626 @@
+import { useState } from "react";
+import { useStore } from "../store";
+import { parseInfraLabWorkspace } from "../infraLab";
+import {
+  parseFrontendLabWorkspace,
+  ISOLATED_MODULE_FEDERATION_LAB,
+} from "../reactLab";
+import type { ContextFile } from "../types";
+import {
+  Plus,
+  Play,
+  Trash2,
+  Server,
+  Globe,
+  Atom,
+  Layout,
+  Check,
+  X,
+  Pencil,
+  FlaskConical,
+  LinkIcon,
+  Link2Off,
+  Network,
+} from "lucide-react";
+
+// ─── Helpers ─────────────────────────────────────────────
+
+const LAB_ORIGINS = new Set([
+  "sandbox",
+  "infra",
+  "react",
+  "nextjs",
+  "module-federation",
+]);
+
+function isLabFile(cf: ContextFile) {
+  return LAB_ORIGINS.has(cf.origin ?? "");
+}
+
+// ─── Reusable lab item row ────────────────────────────────
+
+interface LabItemProps {
+  cf: ContextFile;
+  questionId: string;
+  accentClass: string; // e.g. "text-cyan-200"
+  bgClass: string; // e.g. "bg-cyan-500/10 border-cyan-500/20"
+  renamingId: string | null;
+  renameValue: string;
+  onStartRename: (id: string, current: string) => void;
+  onCommitRename: () => Promise<void>;
+  onCancelRename: () => void;
+  setRenameValue: (v: string) => void;
+  onOpen: () => void;
+  onDetach: () => void;
+  onAttach: () => void;
+  onDelete: () => void;
+  openTitle: string;
+}
+
+function LabItem({
+  cf,
+  accentClass,
+  bgClass,
+  renamingId,
+  renameValue,
+  onStartRename,
+  onCommitRename,
+  onCancelRename,
+  setRenameValue,
+  onOpen,
+  onDetach,
+  onAttach,
+  onDelete,
+  openTitle,
+}: LabItemProps) {
+  const detached = cf.inContext === false;
+
+  return (
+    <div
+      className={`flex items-center gap-1 text-xs border rounded px-1.5 py-1 group transition-opacity ${bgClass} ${
+        detached ? "opacity-50" : ""
+      }`}
+    >
+      {renamingId !== cf.id && (
+        <span
+          className={`${accentClass} font-medium truncate flex-1`}
+          title={cf.label || cf.originalName}
+        >
+          {cf.label || cf.originalName}
+          {detached && (
+            <span className="ml-1 text-[9px] text-slate-500 font-normal">
+              (not in context)
+            </span>
+          )}
+        </span>
+      )}
+
+      {renamingId === cf.id ? (
+        <>
+          <input
+            autoFocus
+            value={renameValue}
+            onChange={(e) => setRenameValue(e.target.value)}
+            onKeyDown={async (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                await onCommitRename();
+              } else if (e.key === "Escape") {
+                onCancelRename();
+              }
+            }}
+            className="w-28 bg-slate-900 border border-cyan-600/50 rounded px-1.5 py-0.5 text-[11px] text-slate-200 outline-none focus:border-cyan-500 shrink-0"
+          />
+          <button
+            onClick={onCommitRename}
+            className="shrink-0 p-0.5 rounded text-cyan-400 hover:bg-cyan-600/20 transition-colors"
+            title="Confirm"
+          >
+            <Check className="w-3 h-3" />
+          </button>
+          <button
+            onClick={onCancelRename}
+            className="shrink-0 p-0.5 rounded text-slate-500 hover:text-slate-300 transition-colors"
+            title="Cancel"
+          >
+            <X className="w-3 h-3" />
+          </button>
+        </>
+      ) : (
+        <>
+          {/* Rename */}
+          <button
+            onClick={() => onStartRename(cf.id, cf.label || cf.originalName)}
+            className="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-cyan-300 transition-all"
+            title="Rename"
+          >
+            <Pencil className="w-3 h-3" />
+          </button>
+
+          {/* Open in lab */}
+          <button
+            onClick={onOpen}
+            className="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-cyan-400 transition-all"
+            title={openTitle}
+          >
+            <Play className="w-3 h-3" />
+          </button>
+
+          {/* Attach / Detach context toggle */}
+          {detached ? (
+            <button
+              onClick={onAttach}
+              className="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-emerald-400 transition-all"
+              title="Add back to AI context"
+            >
+              <LinkIcon className="w-3 h-3" />
+            </button>
+          ) : (
+            <button
+              onClick={onDetach}
+              className="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-amber-400 transition-all"
+              title="Remove from AI context (keeps the lab saved)"
+            >
+              <Link2Off className="w-3 h-3" />
+            </button>
+          )}
+
+          {/* Permanently delete */}
+          <button
+            onClick={onDelete}
+            className="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-red-400 transition-all"
+            title="Delete permanently"
+          >
+            <Trash2 className="w-3 h-3" />
+          </button>
+        </>
+      )}
+    </div>
+  );
+}
+
+// ─── Main panel ──────────────────────────────────────────
+
+export default function LabsPanel() {
+  const {
+    currentQuestion,
+    openSandbox,
+    openInfraLab,
+    openReactLab,
+    openNextLab,
+    openModuleFederationLab,
+    openDeploymentLab,
+    removeQuestionFile,
+    detachLabFile,
+    attachLabFile,
+    renameContextFile,
+  } = useStore();
+
+  const [renamingId, setRenamingId] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState("");
+
+  const startRename = (id: string, current: string) => {
+    setRenamingId(id);
+    setRenameValue(current);
+  };
+
+  const commitRename = async (questionId: string, fileId: string) => {
+    if (renameValue.trim()) {
+      await renameContextFile(questionId, fileId, renameValue.trim());
+    }
+    setRenamingId(null);
+  };
+
+  const cancelRename = () => setRenamingId(null);
+
+  const files = (currentQuestion?.contextFiles || []).filter(isLabFile);
+
+  const byOrigin = (origin: string) => files.filter((f) => f.origin === origin);
+
+  // ── Open helpers ─────────────────────────────────────────
+
+  const openSandboxFile = async (cf: ContextFile) => {
+    try {
+      const raw = await fetch(`/api/context-files/${cf.id}/content`)
+        .then((r) => r.json())
+        .then((d) => d.content as string);
+      const parsed = JSON.parse(raw) as {
+        serverCode: string;
+        serverLang: string;
+        clientCode: string;
+        clientLang: string;
+        clientType?: "script" | "react" | "nextjs";
+        reactFiles?: Record<string, string>;
+        reactActiveFile?: string;
+      };
+      openSandbox(
+        parsed.serverCode,
+        parsed.serverLang,
+        parsed.clientCode,
+        parsed.clientLang,
+        cf.id,
+        parsed.clientType
+          ? {
+              clientType: parsed.clientType,
+              reactFiles: parsed.reactFiles,
+              reactActiveFile: parsed.reactActiveFile,
+            }
+          : undefined,
+      );
+    } catch {
+      /* ignore */
+    }
+  };
+
+  const openInfraFile = async (cf: ContextFile) => {
+    const raw = await fetch(`/api/context-files/${cf.id}/content`)
+      .then((r) => r.json())
+      .then((d) => d.content as string);
+    const parsed = parseInfraLabWorkspace(raw);
+    if (parsed) openInfraLab(parsed, cf.id);
+  };
+
+  const openReactFile = async (cf: ContextFile) => {
+    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 === "react" && ext.reactFiles) {
+        openReactLab(
+          {
+            version: 1,
+            type: "react",
+            label: cf.label || "React Lab",
+            activeFile:
+              ext.reactActiveFile ??
+              Object.keys(ext.reactFiles)[0] ??
+              "App.tsx",
+            files: ext.reactFiles,
+          },
+          cf.id,
+          ext.serverCode,
+          ext.serverLang,
+        );
+      } else {
+        const ws = parseFrontendLabWorkspace(raw);
+        if (ws) openReactLab(ws, cf.id);
+      }
+    } catch {
+      /* ignore */
+    }
+  };
+
+  const openNextFile = async (cf: ContextFile) => {
+    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 === "nextjs" && ext.reactFiles) {
+        openNextLab(
+          {
+            version: 1,
+            type: "nextjs",
+            label: cf.label || "Next.js Lab",
+            activeFile:
+              ext.reactActiveFile ??
+              Object.keys(ext.reactFiles)[0] ??
+              "app/page.tsx",
+            files: ext.reactFiles,
+          },
+          cf.id,
+          ext.serverCode,
+          ext.serverLang,
+        );
+      } else {
+        const ws = parseFrontendLabWorkspace(raw);
+        if (ws) openNextLab(ws, cf.id);
+      }
+    } catch {
+      /* ignore */
+    }
+  };
+
+  const openMFFile = async (cf: ContextFile) => {
+    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 */
+    }
+  };
+
+  // ── Section renderer ─────────────────────────────────────
+
+  function Section({
+    title,
+    icon: Icon,
+    iconColor,
+    origin,
+    emptyText,
+    onNewLab,
+    newLabTitle,
+    newLabMenu,
+    onOpen,
+    openTitle,
+    accentClass,
+    bgClass,
+  }: {
+    title: string;
+    icon: React.ElementType;
+    iconColor: string;
+    origin: string;
+    emptyText: string;
+    onNewLab?: () => void;
+    newLabTitle?: string;
+    newLabMenu?: Array<{
+      label: string;
+      description: string;
+      onClick: () => void;
+    }>;
+    onOpen: (cf: ContextFile) => void;
+    openTitle: string;
+    accentClass: string;
+    bgClass: string;
+  }) {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const items = byOrigin(origin);
+    if (!currentQuestion) return null;
+
+    return (
+      <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">
+            <Icon className={`w-3 h-3 ${iconColor}`} />
+            <span className="text-[10px] uppercase tracking-wider text-slate-600">
+              {title} ({items.length})
+            </span>
+          </div>
+          {newLabMenu ? (
+            <div className="relative">
+              <button
+                onClick={() => setMenuOpen((o) => !o)}
+                className="p-0.5 rounded text-slate-600 hover:text-cyan-400 hover:bg-slate-700 transition-colors"
+                title="New lab"
+              >
+                <Plus className="w-3.5 h-3.5" />
+              </button>
+              {menuOpen && (
+                <>
+                  {/* backdrop to close on outside click */}
+                  <div
+                    className="fixed inset-0 z-40"
+                    onClick={() => setMenuOpen(false)}
+                  />
+                  <div className="absolute right-0 top-full mt-1 z-50 bg-slate-800 border border-slate-600 rounded-lg shadow-xl w-52 overflow-hidden">
+                    {newLabMenu.map((item) => (
+                      <button
+                        key={item.label}
+                        onClick={() => {
+                          item.onClick();
+                          setMenuOpen(false);
+                        }}
+                        className="w-full text-left px-3 py-2 hover:bg-slate-700 transition-colors group"
+                      >
+                        <div className="text-[11px] font-medium text-slate-200 group-hover:text-cyan-300">
+                          {item.label}
+                        </div>
+                        <div className="text-[10px] text-slate-500 mt-0.5 leading-snug">
+                          {item.description}
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                </>
+              )}
+            </div>
+          ) : onNewLab ? (
+            <button
+              onClick={onNewLab}
+              className="p-0.5 rounded text-slate-600 hover:text-cyan-400 hover:bg-slate-700 transition-colors"
+              title={newLabTitle}
+            >
+              <Plus className="w-3.5 h-3.5" />
+            </button>
+          ) : null}
+        </div>
+        <div className="space-y-0.5 max-h-40 overflow-y-auto">
+          {items.map((cf) => (
+            <LabItem
+              key={cf.id}
+              cf={cf}
+              questionId={currentQuestion.id}
+              accentClass={accentClass}
+              bgClass={bgClass}
+              renamingId={renamingId}
+              renameValue={renameValue}
+              setRenameValue={setRenameValue}
+              onStartRename={startRename}
+              onCommitRename={() => commitRename(currentQuestion.id, cf.id)}
+              onCancelRename={cancelRename}
+              onOpen={() => onOpen(cf)}
+              onDetach={() => detachLabFile(currentQuestion.id, cf.id)}
+              onAttach={() => attachLabFile(currentQuestion.id, cf.id)}
+              onDelete={() => {
+                if (
+                  window.confirm(
+                    `Permanently delete "${cf.label || cf.originalName}"?`,
+                  )
+                ) {
+                  removeQuestionFile(currentQuestion.id, cf.id);
+                }
+              }}
+              openTitle={openTitle}
+            />
+          ))}
+          {items.length === 0 && (
+            <p className="text-[10px] text-slate-700 italic">{emptyText}</p>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-72 h-full min-h-0 border-l border-slate-800 flex flex-col bg-slate-900/30 shrink-0 overflow-hidden">
+      {/* Header */}
+      <div className="border-b border-slate-800 px-3 py-2 flex items-center gap-1.5">
+        <FlaskConical className="w-3.5 h-3.5 text-cyan-400/70" />
+        <span className="text-xs font-bold uppercase tracking-wider text-slate-500 flex-1">
+          Labs
+        </span>
+        {!currentQuestion && (
+          <span className="text-[10px] text-slate-600">Select a question</span>
+        )}
+      </div>
+
+      {currentQuestion ? (
+        <div className="flex-1 min-h-0 overflow-y-auto">
+          <Section
+            title="Sandboxes"
+            icon={Server}
+            iconColor="text-slate-400/70"
+            origin="sandbox"
+            emptyText="Save a sandbox to see it here"
+            onNewLab={() => openSandbox("", "javascript", "", "javascript")}
+            newLabTitle="Open Sandbox"
+            onOpen={openSandboxFile}
+            openTitle="Open in Sandbox"
+            accentClass="text-slate-300"
+            bgClass="bg-slate-500/10 border border-slate-500/20"
+          />
+          <Section
+            title="Infra Labs"
+            icon={Globe}
+            iconColor="text-cyan-400/70"
+            origin="infra"
+            emptyText="Save an infra lab to reopen it here"
+            onNewLab={() => openInfraLab()}
+            newLabTitle="Open Infrastructure Lab"
+            onOpen={openInfraFile}
+            openTitle="Open in Infrastructure Lab"
+            accentClass="text-cyan-200"
+            bgClass="bg-cyan-500/10 border border-cyan-500/20"
+          />
+          <Section
+            title="React Labs"
+            icon={Atom}
+            iconColor="text-cyan-400/70"
+            origin="react"
+            emptyText="Save a React lab to reopen it here"
+            onNewLab={() => openReactLab()}
+            newLabTitle="Open React Lab"
+            onOpen={openReactFile}
+            openTitle="Open in React Lab"
+            accentClass="text-cyan-200"
+            bgClass="bg-cyan-500/10 border border-cyan-500/20"
+          />
+          <Section
+            title="Next.js Labs"
+            icon={Layout}
+            iconColor="text-violet-400/70"
+            origin="nextjs"
+            emptyText="Save a Next.js lab to reopen it here"
+            onNewLab={() => openNextLab()}
+            newLabTitle="Open Next.js Lab"
+            onOpen={openNextFile}
+            openTitle="Open in Next.js Lab"
+            accentClass="text-violet-200"
+            bgClass="bg-violet-500/10 border border-violet-500/20"
+          />
+          <Section
+            title="Webpack MF Labs"
+            icon={Server}
+            iconColor="text-emerald-400/70"
+            origin="module-federation"
+            emptyText="Save a webpack module federation lab to reopen it here"
+            newLabMenu={[
+              {
+                label: "Shared React Tree",
+                description:
+                  "Shell & remote share one React runtime — classic federation",
+                onClick: () => openModuleFederationLab(),
+              },
+              {
+                label: "Isolated Mount / Unmount",
+                description:
+                  "Remote owns its own React root via mount(el) / unmount(el)",
+                onClick: () =>
+                  openModuleFederationLab(ISOLATED_MODULE_FEDERATION_LAB),
+              },
+            ]}
+            onOpen={openMFFile}
+            openTitle="Open in Webpack Module Federation Lab"
+            accentClass="text-emerald-200"
+            bgClass="bg-emerald-500/10 border border-emerald-500/20"
+          />
+        </div>
+      ) : (
+        <div className="flex-1 flex items-center justify-center">
+          <p className="text-xs text-slate-600">Select a question first</p>
+        </div>
+      )}
+
+      {/* Deployment Lab (standalone — no context files) */}
+      <div className="border-t border-slate-700/50 p-3 shrink-0">
+        <div className="flex items-center gap-2 mb-1.5">
+          <Network className="w-3.5 h-3.5 text-violet-400/70" />
+          <span className="text-[10px] font-semibold tracking-widest text-slate-400">
+            DEPLOYMENT LAB
+          </span>
+        </div>
+        <p className="text-[10px] text-slate-600 mb-2 italic leading-snug">
+          Simulate rolling, canary, blue-green &amp; more
+        </p>
+        <button
+          onClick={openDeploymentLab}
+          className="text-[11px] px-2.5 py-1 rounded bg-violet-500/15 border border-violet-500/25 text-violet-300 hover:bg-violet-500/25 transition-colors"
+        >
+          Open Deployment Lab
+        </button>
+      </div>
+    </div>
+  );
+}