create-interview-cockpit 0.15.0 → 0.16.0

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

@@ -4,6 +4,11 @@ import { parseInfraLabWorkspace } from "../infraLab";
 import {
   parseFrontendLabWorkspace,
   ISOLATED_MODULE_FEDERATION_LAB,
+  NEXTJS_MF_PLUGIN_LAB,
+  NEXTJS_MF_RUNTIME_LAB,
+  NEXTJS_MULTI_ZONES_LAB,
+  NEXTJS_MF_RUNTIME_API_LAB,
+  RSPACK_SHELL_LAB,
 } from "../reactLab";
 import { BROWSER_SECURITY_TEMPLATES } from "../browserSecurityTemplates";
 import type { ContextFile } from "../types";
@@ -23,6 +28,7 @@ import {
   Link2Off,
   Network,
   Shield,
+  PenLine,
 } from "lucide-react";
 
 // ─── Helpers ─────────────────────────────────────────────
@@ -34,6 +40,7 @@ const LAB_ORIGINS = new Set([
   "react",
   "nextjs",
   "module-federation",
+  "canvas",
 ]);
 
 function isLabFile(cf: ContextFile) {
@@ -193,6 +200,7 @@ export default function LabsPanel() {
     openNextLab,
     openModuleFederationLab,
     openDeploymentLab,
+    openCanvasLab,
     removeQuestionFile,
     detachLabFile,
     attachLabFile,
@@ -406,6 +414,17 @@ export default function LabsPanel() {
     }
   };
 
+  const openCanvasFile = async (cf: ContextFile) => {
+    try {
+      const raw = await fetch(`/api/context-files/${cf.id}/content`)
+        .then((r) => r.json())
+        .then((d) => d.content as string);
+      openCanvasLab(raw, cf.id);
+    } catch {
+      /* ignore */
+    }
+  };
+
   // ── Section renderer ─────────────────────────────────────
 
   function Section({
@@ -640,12 +659,56 @@ export default function LabsPanel() {
                 onClick: () =>
                   openModuleFederationLab(ISOLATED_MODULE_FEDERATION_LAB),
               },
+              {
+                label: "Next.js MF — Plugin (Option A)",
+                description:
+                  "Next.js shell + remote via built-in webpack.container.ModuleFederationPlugin",
+                onClick: () => openModuleFederationLab(NEXTJS_MF_PLUGIN_LAB),
+              },
+              {
+                label: "Next.js MF — Runtime Loader (Option B)",
+                description:
+                  "Next.js shell with no plugin — loads remote via plain script injection",
+                onClick: () => openModuleFederationLab(NEXTJS_MF_RUNTIME_LAB),
+              },
+              {
+                label: "Next.js — Multi-Zones",
+                description:
+                  "Two independent Next.js apps split by URL path via rewrites — Vercel recommended",
+                onClick: () => openModuleFederationLab(NEXTJS_MULTI_ZONES_LAB),
+              },
+              {
+                label: "Next.js — MF Runtime API",
+                description:
+                  "@module-federation/enhanced/runtime inside a 'use client' component — no webpack config",
+                onClick: () =>
+                  openModuleFederationLab(NEXTJS_MF_RUNTIME_API_LAB),
+              },
+              {
+                label: "Rspack Shell — Native MF 2.0",
+                description:
+                  "Rspack as the host with built-in MF support; webpack app as the remote",
+                onClick: () => openModuleFederationLab(RSPACK_SHELL_LAB),
+              },
             ]}
             onOpen={openMFFile}
             openTitle="Open in Webpack Module Federation Lab"
             accentClass="text-emerald-200"
             bgClass="bg-emerald-500/10 border border-emerald-500/20"
           />
+          <Section
+            title="Canvas Labs"
+            icon={PenLine}
+            iconColor="text-orange-400/70"
+            origin="canvas"
+            emptyText="Save a canvas lab to reopen it here"
+            onNewLab={() => openCanvasLab()}
+            newLabTitle="Open Canvas Lab"
+            onOpen={openCanvasFile}
+            openTitle="Open in Canvas Lab"
+            accentClass="text-orange-200"
+            bgClass="bg-orange-500/10 border border-orange-500/20"
+          />
         </div>
       ) : (
         <div className="flex-1 flex items-center justify-center">

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

@@ -154,6 +154,9 @@ export default function Sidebar() {
 
   // Drive subfolder navigator
   const activeWs = workspaces.find((w) => w.id === activeWorkspaceId);
+  const activeWsSortOrder = (activeWs?.questionSortOrder ?? "name") as
+    | "name"
+    | "createdAt";
   const isDriveWs =
     activeWs?.type === "google_drive" && !!activeWs.driveConfig?.folderId;
   const currentSubFolder = activeWs?.driveConfig?.subFolderId
@@ -804,7 +807,15 @@ export default function Sidebar() {
             )
             .map((topic) => {
               const isExpanded = expandedTopics.includes(topic.id);
-              const questions = questionsByTopic[topic.id] || [];
+              const questions = [...(questionsByTopic[topic.id] || [])].sort(
+                (a, b) =>
+                  activeWsSortOrder === "createdAt"
+                    ? a.createdAt.localeCompare(b.createdAt)
+                    : a.title.localeCompare(b.title, undefined, {
+                        numeric: true,
+                        sensitivity: "base",
+                      }),
+              );
 
               return (
                 <div key={topic.id}>

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

@@ -27,6 +27,7 @@ export default function WorkspaceSwitcher() {
     createWorkspace,
     deleteWorkspace,
     renameWorkspace,
+    patchWorkspace,
     syncWorkspace,
     linkDriveFolder,
     attachDriveFolder,
@@ -814,6 +815,41 @@ export default function WorkspaceSwitcher() {
                       )}
                     </div>
                   )}
+
+                  {/* Question sort order */}
+                  <div
+                    className="mt-1 ml-5 flex items-center gap-1"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <span className="text-[10px] text-slate-600">Order:</span>
+                    <button
+                      onClick={() =>
+                        patchWorkspace(ws.id, { questionSortOrder: "name" })
+                      }
+                      className={`text-[10px] px-1 rounded transition-colors ${
+                        (ws.questionSortOrder ?? "name") === "name"
+                          ? "text-cyan-400"
+                          : "text-slate-600 hover:text-slate-400"
+                      }`}
+                    >
+                      Name
+                    </button>
+                    <span className="text-[10px] text-slate-700">·</span>
+                    <button
+                      onClick={() =>
+                        patchWorkspace(ws.id, {
+                          questionSortOrder: "createdAt",
+                        })
+                      }
+                      className={`text-[10px] px-1 rounded transition-colors ${
+                        ws.questionSortOrder === "createdAt"
+                          ? "text-cyan-400"
+                          : "text-slate-600 hover:text-slate-400"
+                      }`}
+                    >
+                      Date created
+                    </button>
+                  </div>
                 </div>
               ))}
             </div>