create-interview-cockpit 0.5.0 → 0.7.0

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

@@ -1,6 +1,9 @@
 import { useEffect, useState, useCallback } from "react";
 import { useStore } from "../store";
+import { parseInfraLabWorkspace } from "../infraLab";
+import { parseFrontendLabWorkspace } from "../reactLab";
 import FileViewerModal from "./FileViewerModal";
+import NotesModal, { notesKey } from "./NotesModal";
 import {
   File,
   Search,
@@ -22,6 +25,10 @@ import {
   Trash2,
   Server,
   Pencil,
+  NotebookPen,
+  Globe,
+  Atom,
+  Layout,
 } from "lucide-react";
 
 // ─── Tree data structure ─────────────────────────────────
@@ -228,6 +235,10 @@ export default function CodeContextPanel() {
     clearSnippets,
     openCodeRunner,
     openSandbox,
+    openInfraLab,
+    openReactLab,
+    openNextLab,
+    openModuleFederationLab,
     removeQuestionFile,
     renameContextFile,
   } = useStore();
@@ -243,6 +254,19 @@ export default function CodeContextPanel() {
     new Set(),
   );
   const [viewingFile, setViewingFile] = useState<string | null>(null);
+  const [notesOpen, setNotesOpen] = useState(false);
+
+  // Show a dot in the Notes button when there are saved notes for this context
+  const hasNotes = (() => {
+    try {
+      const raw = localStorage.getItem(notesKey(currentQuestion?.id));
+      if (!raw) return false;
+      const parsed = JSON.parse(raw);
+      return Array.isArray(parsed) && parsed.length > 0;
+    } catch {
+      return false;
+    }
+  })();
 
   useEffect(() => {
     fetchAvailableFiles();
@@ -518,7 +542,11 @@ export default function CodeContextPanel() {
                       )
                         .then((r) => r.json())
                         .then((d) => d.content);
-                      openCodeRunner(content, cf.language ?? "typescript");
+                      openCodeRunner(
+                        content,
+                        cf.language ?? "typescript",
+                        cf.id,
+                      );
                     }}
                     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 Code Runner"
@@ -583,7 +611,11 @@ export default function CodeContextPanel() {
                       )
                         .then((r) => r.json())
                         .then((d) => d.content);
-                      openCodeRunner(content, cf.language ?? "typescript");
+                      openCodeRunner(
+                        content,
+                        cf.language ?? "typescript",
+                        cf.id,
+                      );
                     }}
                     className="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-violet-400 transition-all"
                     title="Open in Code Runner"
@@ -715,6 +747,9 @@ export default function CodeContextPanel() {
                               serverLang: string;
                               clientCode: string;
                               clientLang: string;
+                              clientType?: "script" | "react" | "nextjs";
+                              reactFiles?: Record<string, string>;
+                              reactActiveFile?: string;
                             };
                             openSandbox(
                               parsed.serverCode,
@@ -722,6 +757,13 @@ export default function CodeContextPanel() {
                               parsed.clientCode,
                               parsed.clientLang,
                               cf.id,
+                              parsed.clientType
+                                ? {
+                                    clientType: parsed.clientType,
+                                    reactFiles: parsed.reactFiles,
+                                    reactActiveFile: parsed.reactActiveFile,
+                                  }
+                                : undefined,
                             );
                           } catch {
                             /* malformed — ignore */
@@ -756,12 +798,498 @@ export default function CodeContextPanel() {
         </div>
       )}
 
+      {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">
+              <Globe className="w-3 h-3 text-cyan-400/70" />
+              <span className="text-[10px] uppercase tracking-wider text-slate-600">
+                Infra Labs (
+                {
+                  (currentQuestion.contextFiles || []).filter(
+                    (f) => f.origin === "infra",
+                  ).length
+                }
+                )
+              </span>
+            </div>
+            <button
+              onClick={() => openInfraLab()}
+              className="p-0.5 rounded text-slate-600 hover:text-cyan-400 hover:bg-slate-700 transition-colors"
+              title="Open Infrastructure 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 === "infra")
+              .map((cf) => (
+                <div
+                  key={cf.id}
+                  className="flex items-center gap-1 text-xs bg-cyan-500/10 border border-cyan-500/20 rounded px-1.5 py-1 group"
+                >
+                  {renamingId !== cf.id && (
+                    <span
+                      className="text-cyan-200 font-medium truncate flex-1"
+                      title={cf.label || cf.originalName}
+                    >
+                      {cf.label || cf.originalName}
+                    </span>
+                  )}
+                  {renamingId === cf.id ? (
+                    <>
+                      <input
+                        autoFocus
+                        value={renameValue}
+                        onChange={(e) => setRenameValue(e.target.value)}
+                        onKeyDown={async (e) => {
+                          if (e.key === "Enter") {
+                            e.preventDefault();
+                            if (renameValue.trim()) {
+                              await renameContextFile(
+                                currentQuestion.id,
+                                cf.id,
+                                renameValue.trim(),
+                              );
+                            }
+                            setRenamingId(null);
+                          } else if (e.key === "Escape") {
+                            setRenamingId(null);
+                          }
+                        }}
+                        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={async () => {
+                          if (renameValue.trim()) {
+                            await renameContextFile(
+                              currentQuestion.id,
+                              cf.id,
+                              renameValue.trim(),
+                            );
+                          }
+                          setRenamingId(null);
+                        }}
+                        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={() => setRenamingId(null)}
+                        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>
+                    </>
+                  ) : (
+                    <>
+                      <button
+                        onClick={() => {
+                          setRenamingId(cf.id);
+                          setRenameValue(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>
+                      <button
+                        onClick={async () => {
+                          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);
+                        }}
+                        className="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-cyan-400 transition-all"
+                        title="Open in Infrastructure 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 === "infra",
+            ).length === 0 && (
+              <p className="text-[10px] text-slate-700 italic">
+                Save an infra lab to reopen it here
+              </p>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* ── React 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">
+              <Atom className="w-3 h-3 text-cyan-400/70" />
+              <span className="text-[10px] uppercase tracking-wider text-slate-600">
+                React Labs (
+                {
+                  (currentQuestion.contextFiles || []).filter(
+                    (f) => f.origin === "react",
+                  ).length
+                }
+                )
+              </span>
+            </div>
+            <button
+              onClick={() => openReactLab()}
+              className="p-0.5 rounded text-slate-600 hover:text-cyan-400 hover:bg-slate-700 transition-colors"
+              title="Open React 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 === "react")
+              .map((cf) => (
+                <div
+                  key={cf.id}
+                  className="flex items-center gap-1 text-xs bg-cyan-500/10 border border-cyan-500/20 rounded px-1.5 py-1 group"
+                >
+                  <span
+                    className="text-cyan-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);
+                        // Try new extended sandbox format first
+                        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 {
+                          // Fall back to old FrontendLabWorkspace format
+                          const ws = parseFrontendLabWorkspace(raw);
+                          if (ws) openReactLab(ws, cf.id);
+                        }
+                      } catch {
+                        /* ignore */
+                      }
+                    }}
+                    className="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-cyan-400 transition-all"
+                    title="Open in React 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 === "react",
+            ).length === 0 && (
+              <p className="text-[10px] text-slate-700 italic">
+                Save a React lab to reopen it here
+              </p>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* ── Next.js 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">
+              <Layout className="w-3 h-3 text-violet-400/70" />
+              <span className="text-[10px] uppercase tracking-wider text-slate-600">
+                Next.js Labs (
+                {
+                  (currentQuestion.contextFiles || []).filter(
+                    (f) => f.origin === "nextjs",
+                  ).length
+                }
+                )
+              </span>
+            </div>
+            <button
+              onClick={() => openNextLab()}
+              className="p-0.5 rounded text-slate-600 hover:text-violet-400 hover:bg-slate-700 transition-colors"
+              title="Open Next.js 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 === "nextjs")
+              .map((cf) => (
+                <div
+                  key={cf.id}
+                  className="flex items-center gap-1 text-xs bg-violet-500/10 border border-violet-500/20 rounded px-1.5 py-1 group"
+                >
+                  <span
+                    className="text-violet-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 === "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 */
+                      }
+                    }}
+                    className="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-500 hover:text-violet-400 transition-all"
+                    title="Open in Next.js 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 === "nextjs",
+            ).length === 0 && (
+              <p className="text-[10px] text-slate-700 italic">
+                Save a Next.js lab to reopen it here
+              </p>
+            )}
+          </div>
+        </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
+          onClick={() => setNotesOpen((v) => !v)}
+          className="w-full flex items-center gap-2 group"
+        >
+          <NotebookPen className="w-3 h-3 text-amber-400/70 shrink-0" />
+          <span className="text-[10px] uppercase tracking-wider text-slate-600 flex-1 text-left">
+            Notes
+          </span>
+          {hasNotes && (
+            <span
+              className="w-1.5 h-1.5 rounded-full bg-amber-400/70 shrink-0"
+              title="Has notes"
+            />
+          )}
+          <span className="text-[10px] text-slate-700 group-hover:text-slate-500 transition-colors">
+            {notesOpen ? "close" : "open"}
+          </span>
+        </button>
+      </div>
+
       {viewingFile && (
         <FileViewerModal
           filePath={viewingFile}
           onClose={() => setViewingFile(null)}
         />
       )}
+
+      {notesOpen && (
+        <NotesModal
+          questionId={currentQuestion?.id}
+          onClose={() => setNotesOpen(false)}
+        />
+      )}
     </div>
   );
 }