create-interview-cockpit 0.15.0 → 0.17.0

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

@@ -35,6 +35,10 @@ import {
 } from "lucide-react";
 import { useStore } from "../store";
 import Editor from "react-simple-code-editor";
+import MonacoEditorLib from "@monaco-editor/react";
+import type { OnMount, BeforeMount, Monaco } from "@monaco-editor/react";
+import { setupTypeAcquisition } from "@typescript/ata";
+import ts from "typescript";
 import Prism from "prismjs";
 import "prismjs/components/prism-clike";
 import "prismjs/components/prism-javascript";
@@ -361,6 +365,269 @@ function SyntaxEditor({
   );
 }
 
+// Monaco Editor wrapper — same prop interface as SyntaxEditor.
+// Provides full VS Code intellisense/autocomplete while preserving
+// all existing run/output/chat functionality.
+// ATA (Automatic Type Acquisition) — watches imports as you type and fetches
+// .d.ts files from the npm CDN, then feeds them to Monaco's TypeScript worker.
+// This gives framework-specific intellisense (Next.js, React, Express, etc.)
+// identical to what VS Code shows, without any server involvement.
+function useATA(monacoRef: React.MutableRefObject<Monaco | null>) {
+  const ataRef = useRef<ReturnType<typeof setupTypeAcquisition> | null>(null);
+
+  const initATA = useCallback(() => {
+    const monaco = monacoRef.current;
+    if (!monaco || ataRef.current) return;
+
+    ataRef.current = setupTypeAcquisition({
+      projectName: "interview-cockpit",
+      typescript: ts,
+      logger: console,
+      delegate: {
+        receivedFile: (code: string, path: string) => {
+          // Add each fetched .d.ts into Monaco's virtual file system
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const tsLang = monaco.languages.typescript as any;
+          tsLang.typescriptDefaults.addExtraLib(code, `file://${path}`);
+          tsLang.javascriptDefaults.addExtraLib(code, `file://${path}`);
+        },
+        progress: (_downloaded: number, _total: number) => {},
+        started: () => {},
+        finished: (_vfs: Map<string, string>) => {},
+      },
+    });
+  }, [monacoRef]);
+
+  // Call this whenever editor code changes so ATA can scan new imports
+  const acquireTypes = useCallback((code: string) => {
+    ataRef.current?.(code);
+  }, []);
+
+  return { initATA, acquireTypes };
+}
+
+function MonacoEditorWrapper({
+  value,
+  onChange,
+  onCtrlEnter,
+  language,
+  placeholder,
+  autoFocus = false,
+  fontSize = "12px",
+}: {
+  value: string;
+  onChange: (val: string) => void;
+  onCtrlEnter?: () => void;
+  language: string;
+  placeholder?: string;
+  autoFocus?: boolean;
+  fontSize?: string;
+  focusRingClass?: string;
+}) {
+  const fontSizePx = parseInt(fontSize) || 12;
+  const monacoRef = useRef<Monaco | null>(null);
+  const { initATA, acquireTypes } = useATA(monacoRef);
+
+  const handleBeforeMount: BeforeMount = (monaco) => {
+    monacoRef.current = monaco;
+
+    // Configure TypeScript compiler options to match a modern TS project
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const tsLang = monaco.languages.typescript as any;
+    const compilerOptions = {
+      target: tsLang.ScriptTarget.ESNext,
+      module: tsLang.ModuleKind.ESNext,
+      moduleResolution: tsLang.ModuleResolutionKind.Bundler,
+      jsx: tsLang.JsxEmit.ReactJSX,
+      strict: true,
+      esModuleInterop: true,
+      allowSyntheticDefaultImports: true,
+      allowNonTsExtensions: true,
+    };
+    tsLang.typescriptDefaults.setCompilerOptions(compilerOptions);
+    tsLang.javascriptDefaults.setCompilerOptions(compilerOptions);
+
+    // Suppress "Cannot find module" errors — packages aren't installed in the sandbox
+    const diagnosticsOptions = {
+      noSemanticValidation: false,
+      noSyntaxValidation: false,
+      diagnosticCodesToIgnore: [2792, 2307],
+    };
+    tsLang.typescriptDefaults.setDiagnosticsOptions(diagnosticsOptions);
+    tsLang.javascriptDefaults.setDiagnosticsOptions(diagnosticsOptions);
+
+    // Allow importing from node_modules type definitions
+    tsLang.typescriptDefaults.setEagerModelSync(true);
+    tsLang.javascriptDefaults.setEagerModelSync(true);
+
+    // Stub Node.js globals (process, Buffer, etc.) so sandbox code using them doesn't error
+    const nodeGlobals = `
+declare var process: {
+  env: Record<string, string | undefined> & {
+    NODE_ENV: 'development' | 'production' | 'test';
+    REMOTE_PORT?: string;
+    PORT?: string;
+    HOST?: string;
+    [key: string]: string | undefined;
+  };
+  argv: string[];
+  cwd(): string;
+  exit(code?: number): never;
+  platform: string;
+  version: string;
+  versions: Record<string, string>;
+};
+declare var Buffer: {
+  from(data: string | ArrayBuffer | ArrayBufferView, encoding?: string): { toString(encoding?: string): string };
+  alloc(size: number): Uint8Array;
+  isBuffer(obj: unknown): boolean;
+};
+declare var __dirname: string;
+declare var __filename: string;
+`;
+    tsLang.typescriptDefaults.addExtraLib(
+      nodeGlobals,
+      "file:///node_modules/@types/node/globals.d.ts",
+    );
+    tsLang.javascriptDefaults.addExtraLib(
+      nodeGlobals,
+      "file:///node_modules/@types/node/globals.d.ts",
+    );
+
+    // Pre-seed Next.js type stubs. ATA cannot resolve `next` because Next uses a
+    // complex package.json exports map that unpkg / CDN ATA doesn't traverse.
+    const nextTypes = `
+declare module 'next' {
+  export type NextConfig = {
+    reactStrictMode?: boolean;
+    swcMinify?: boolean;
+    output?: 'standalone' | 'export';
+    compress?: boolean;
+    poweredByHeader?: boolean;
+    distDir?: string;
+    assetPrefix?: string;
+    basePath?: string;
+    trailingSlash?: boolean;
+    pageExtensions?: string[];
+    env?: Record<string, string>;
+    images?: {
+      domains?: string[];
+      remotePatterns?: { protocol?: 'http' | 'https'; hostname: string; port?: string; pathname?: string }[];
+      formats?: ('image/avif' | 'image/webp')[];
+      unoptimized?: boolean;
+    };
+    experimental?: { serverActions?: boolean | { allowedOrigins?: string[] }; [key: string]: unknown };
+    webpack?: (config: any, options: { buildId: string; dev: boolean; isServer: boolean; defaultLoaders: any; webpack: any }) => any;
+    rewrites?: () => Promise<{ source: string; destination: string }[] | { beforeFiles?: any[]; afterFiles?: any[]; fallback?: any[] }>;
+    redirects?: () => Promise<{ source: string; destination: string; permanent: boolean }[]>;
+    headers?: () => Promise<{ source: string; headers: { key: string; value: string }[] }[]>;
+  };
+}
+declare module 'next/navigation' {
+  export function useRouter(): { push(href: string): void; replace(href: string): void; back(): void; forward(): void; refresh(): void; prefetch(href: string): void };
+  export function usePathname(): string;
+  export function useSearchParams(): URLSearchParams;
+  export function useParams<T extends Record<string, string | string[]> = Record<string, string | string[]>>(): T;
+  export function redirect(url: string): never;
+  export function notFound(): never;
+}
+declare module 'next/link' {
+  import * as React from 'react';
+  export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> { href: string | { pathname?: string; query?: Record<string, string> }; replace?: boolean; prefetch?: boolean; }
+  const Link: React.FC<LinkProps>;
+  export default Link;
+}
+declare module 'next/image' {
+  import * as React from 'react';
+  export interface ImageProps { src: string; alt: string; width?: number; height?: number; fill?: boolean; priority?: boolean; quality?: number; className?: string; style?: React.CSSProperties; }
+  const Image: React.FC<ImageProps>;
+  export default Image;
+}
+declare module 'next/font/google' {
+  export interface FontOptions { subsets?: string[]; weight?: string | string[]; style?: string | string[]; variable?: string; display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional'; }
+  export type FontResult = { className: string; style: { fontFamily: string; fontWeight?: number; fontStyle?: string }; variable: string };
+  export function Inter(options?: FontOptions): FontResult;
+  export function Roboto(options?: FontOptions): FontResult;
+  export function Geist(options?: FontOptions): FontResult;
+  export function Geist_Mono(options?: FontOptions): FontResult;
+}
+declare module 'next/server' {
+  export class NextResponse extends Response {
+    static json<T>(data: T, init?: ResponseInit): NextResponse;
+    static redirect(url: string | URL, status?: number): NextResponse;
+    static next(): NextResponse;
+  }
+  export class NextRequest extends Request {
+    readonly nextUrl: URL;
+    readonly cookies: { get(name: string): { name: string; value: string } | undefined; getAll(): { name: string; value: string }[] };
+  }
+  export type NextMiddleware = (request: NextRequest) => Response | NextResponse | void | Promise<Response | NextResponse | void>;
+}
+`;
+    tsLang.typescriptDefaults.addExtraLib(
+      nextTypes,
+      "file:///node_modules/next/index.d.ts",
+    );
+    tsLang.javascriptDefaults.addExtraLib(
+      nextTypes,
+      "file:///node_modules/next/index.d.ts",
+    );
+  };
+
+  const handleMount: OnMount = (editor, monaco) => {
+    monacoRef.current = monaco;
+    initATA();
+    // Kick off an initial scan for any imports already in the file
+    acquireTypes(value);
+    if (autoFocus) editor.focus();
+    if (onCtrlEnter) {
+      editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () =>
+        onCtrlEnter(),
+      );
+    }
+  };
+
+  // Re-scan for new imports whenever code changes
+  useEffect(() => {
+    acquireTypes(value);
+  }, [value, acquireTypes]);
+
+  return (
+    <div className="absolute inset-0">
+      <MonacoEditorLib
+        height="100%"
+        width="100%"
+        language={language === "typescript" ? "typescript" : "javascript"}
+        theme="vs-dark"
+        value={value}
+        onChange={(val) => onChange(val ?? "")}
+        beforeMount={handleBeforeMount}
+        onMount={handleMount}
+        options={{
+          fontSize: fontSizePx,
+          fontFamily: EDITOR_FONT,
+          minimap: { enabled: false },
+          scrollBeyondLastLine: false,
+          lineNumbers: "on",
+          glyphMargin: false,
+          folding: false,
+          lineDecorationsWidth: 4,
+          lineNumbersMinChars: 3,
+          renderLineHighlight: "line",
+          overviewRulerLanes: 0,
+          hideCursorInOverviewRuler: true,
+          overviewRulerBorder: false,
+          scrollbar: { vertical: "auto", horizontal: "auto" },
+          padding: { top: 8, bottom: 8 },
+          wordWrap: "off",
+          automaticLayout: true,
+          placeholder,
+        }}
+      />
+    </div>
+  );
+}
+
 interface FileTreeNode {
   name: string;
   path: string;
@@ -674,6 +941,9 @@ export default function CodeRunnerModal() {
     runnerInitialFileId ?? null,
   );
 
+  // ── Editor mode ───────────────────────────────────────────
+  const [useMonacoEditor, setUseMonacoEditor] = useState(false);
+
   // ── Sandbox state ─────────────────────────────────────────
   const [mode, setMode] = useState<"script" | "sandbox">("script");
   const [serverCode, setServerCode] = useState(DEFAULT_SERVER_CODE);
@@ -698,6 +968,9 @@ export default function CodeRunnerModal() {
   const [reactPreviewSrc, setReactPreviewSrc] = useState<string | null>(null);
   const [reactAddingFile, setReactAddingFile] = useState(false);
   const [reactNewFileName, setReactNewFileName] = useState("");
+  // Explorer sidebar width (resizable via drag handle)
+  const [explorerWidth, setExplorerWidth] = useState(144);
+  const explorerDragStart = useRef<{ x: number; w: number } | null>(null);
   // Folders that are collapsed in the Next.js file tree sidebar
   const [collapsedFolders, setCollapsedFolders] = useState<Set<string>>(
     new Set(),
@@ -3464,6 +3737,26 @@ export default function CodeRunnerModal() {
           </>
         )}
 
+        {/* Monaco toggle */}
+        <button
+          type="button"
+          onMouseDown={(e) => e.stopPropagation()}
+          onClick={() => setUseMonacoEditor((v) => !v)}
+          className={`flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-mono font-medium transition-colors shrink-0 ${
+            useMonacoEditor
+              ? "bg-violet-600/30 text-violet-300 ring-1 ring-violet-500/40"
+              : "text-slate-500 hover:text-slate-300 hover:bg-slate-700"
+          }`}
+          title={
+            useMonacoEditor
+              ? "Switch to simple editor"
+              : "Switch to Monaco (VS Code intellisense)"
+          }
+        >
+          <Code2 className="w-3 h-3" />
+          Monaco
+        </button>
+
         <button
           onMouseDown={(e) => e.stopPropagation()}
           onClick={toggleMax}
@@ -3491,16 +3784,28 @@ export default function CodeRunnerModal() {
         <div className="flex flex-col flex-1 overflow-hidden">
           {/* Editor pane */}
           <div className="flex-1 min-h-0 relative">
-            <SyntaxEditor
-              value={code}
-              onChange={setCode}
-              onCtrlEnter={() => void runCode()}
-              language={lang}
-              autoFocus
-              fontSize="13px"
-              focusRingClass="ring-violet-500/40"
-              placeholder={`// TypeScript / JavaScript\n// Ctrl+Enter to run\n\nconst res = await fetch('https://jsonplaceholder.typicode.com/todos/1');\nconst data = await res.json();\nconsole.log(data);`}
-            />
+            {useMonacoEditor ? (
+              <MonacoEditorWrapper
+                value={code}
+                onChange={setCode}
+                onCtrlEnter={() => void runCode()}
+                language={lang}
+                autoFocus
+                fontSize="13px"
+                placeholder={`// TypeScript / JavaScript\n// Ctrl+Enter to run\n\nconst res = await fetch('https://jsonplaceholder.typicode.com/todos/1');\nconst data = await res.json();\nconsole.log(data);`}
+              />
+            ) : (
+              <SyntaxEditor
+                value={code}
+                onChange={setCode}
+                onCtrlEnter={() => void runCode()}
+                language={lang}
+                autoFocus
+                fontSize="13px"
+                focusRingClass="ring-violet-500/40"
+                placeholder={`// TypeScript / JavaScript\n// Ctrl+Enter to run\n\nconst res = await fetch('https://jsonplaceholder.typicode.com/todos/1');\nconst data = await res.json();\nconsole.log(data);`}
+              />
+            )}
           </div>
 
           {/* Divider */}
@@ -3655,17 +3960,30 @@ export default function CodeRunnerModal() {
                   )}
                 </div>
                 <div className="flex-1 min-h-0 relative">
-                  <SyntaxEditor
-                    value={serverCode}
-                    onChange={setServerCode}
-                    onCtrlEnter={() => void startServer()}
-                    language={serverLang}
-                    fontSize="12px"
-                    focusRingClass="ring-emerald-500/30"
-                    placeholder={
-                      "import express from 'express';\n// process.env.PORT is auto-injected\n// Ctrl+Enter to start"
-                    }
-                  />
+                  {useMonacoEditor ? (
+                    <MonacoEditorWrapper
+                      value={serverCode}
+                      onChange={setServerCode}
+                      onCtrlEnter={() => void startServer()}
+                      language={serverLang}
+                      fontSize="12px"
+                      placeholder={
+                        "import express from 'express';\n// process.env.PORT is auto-injected\n// Ctrl+Enter to start"
+                      }
+                    />
+                  ) : (
+                    <SyntaxEditor
+                      value={serverCode}
+                      onChange={setServerCode}
+                      onCtrlEnter={() => void startServer()}
+                      language={serverLang}
+                      fontSize="12px"
+                      focusRingClass="ring-emerald-500/30"
+                      placeholder={
+                        "import express from 'express';\n// process.env.PORT is auto-injected\n// Ctrl+Enter to start"
+                      }
+                    />
+                  )}
                 </div>
               </div>
             )}
@@ -4057,7 +4375,10 @@ export default function CodeRunnerModal() {
                 >
                   {/* ── VS Code-style file tree sidebar ── */}
                   {usesClientExplorer && (
-                    <div className="w-36 shrink-0 flex flex-col border-r border-slate-700 bg-slate-900/60 overflow-y-auto">
+                    <div
+                      className="shrink-0 flex flex-col border-r border-slate-700 bg-slate-900/60 overflow-y-auto relative"
+                      style={{ width: explorerWidth }}
+                    >
                       {/* Sidebar header */}
                       <div className="flex items-center justify-between px-2 py-1.5 border-b border-slate-700/60">
                         <span className="text-[9px] uppercase tracking-widest text-slate-500 font-semibold select-none">
@@ -4301,6 +4622,37 @@ export default function CodeRunnerModal() {
                           return renderNode(tree);
                         })()}
                       </div>
+                      {/* Drag handle — inside the relative explorer container */}
+                      <div
+                        className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-cyan-500/40 active:bg-cyan-500/60 transition-colors z-10"
+                        onMouseDown={(e) => {
+                          e.preventDefault();
+                          explorerDragStart.current = {
+                            x: e.clientX,
+                            w: explorerWidth,
+                          };
+                          const onMove = (ev: MouseEvent) => {
+                            if (!explorerDragStart.current) return;
+                            const newW = Math.max(
+                              100,
+                              Math.min(
+                                320,
+                                explorerDragStart.current.w +
+                                  ev.clientX -
+                                  explorerDragStart.current.x,
+                              ),
+                            );
+                            setExplorerWidth(newW);
+                          };
+                          const onUp = () => {
+                            explorerDragStart.current = null;
+                            window.removeEventListener("mousemove", onMove);
+                            window.removeEventListener("mouseup", onUp);
+                          };
+                          window.addEventListener("mousemove", onMove);
+                          window.addEventListener("mouseup", onUp);
+                        }}
+                      />
                     </div>
                   )}
 
@@ -4363,6 +4715,19 @@ export default function CodeRunnerModal() {
                             </div>
                           )}
                         </div>
+                      ) : useMonacoEditor ? (
+                        <MonacoEditorWrapper
+                          value={clientCode}
+                          onChange={setClientCode}
+                          onCtrlEnter={() => {
+                            if (serverRunning) void runClient();
+                          }}
+                          language={clientLang}
+                          fontSize="12px"
+                          placeholder={
+                            "// SANDBOX_URL is injected automatically\n// Start the server first, then Ctrl+Enter to run"
+                          }
+                        />
                       ) : (
                         <SyntaxEditor
                           value={clientCode}
@@ -4400,6 +4765,25 @@ export default function CodeRunnerModal() {
                             )}
                           </div>
                         </div>
+                      ) : useMonacoEditor ? (
+                        <MonacoEditorWrapper
+                          key={reactActiveFile}
+                          value={reactFiles[reactActiveFile] ?? ""}
+                          onChange={(val) =>
+                            setReactFiles((prev) => ({
+                              ...prev,
+                              [reactActiveFile]: val,
+                            }))
+                          }
+                          language={
+                            reactActiveFile.endsWith(".ts") ||
+                            reactActiveFile.endsWith(".tsx")
+                              ? "typescript"
+                              : "javascript"
+                          }
+                          fontSize="12px"
+                          placeholder={`// ${reactActiveFile}\n`}
+                        />
                       ) : (
                         <SyntaxEditor
                           key={reactActiveFile}

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>