create-interview-cockpit 0.16.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}