create-interview-cockpit 0.17.0 → 0.17.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-interview-cockpit",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "description": "Scaffold a personal AI-powered interview prep cockpit",
   "type": "module",
   "bin": {

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

@@ -406,11 +406,14 @@ function useATA(monacoRef: React.MutableRefObject<Monaco | null>) {
   return { initATA, acquireTypes };
 }
 
+let monacoSandboxTypeLibsInjected = false;
+
 function MonacoEditorWrapper({
   value,
   onChange,
   onCtrlEnter,
   language,
+  path,
   placeholder,
   autoFocus = false,
   fontSize = "12px",
@@ -419,6 +422,7 @@ function MonacoEditorWrapper({
   onChange: (val: string) => void;
   onCtrlEnter?: () => void;
   language: string;
+  path?: string;
   placeholder?: string;
   autoFocus?: boolean;
   fontSize?: string;
@@ -438,7 +442,10 @@ function MonacoEditorWrapper({
       target: tsLang.ScriptTarget.ESNext,
       module: tsLang.ModuleKind.ESNext,
       moduleResolution: tsLang.ModuleResolutionKind.Bundler,
-      jsx: tsLang.JsxEmit.ReactJSX,
+      // Prefer modern automatic JSX runtime; keep a fallback for older Monaco TS builds.
+      jsx: tsLang.JsxEmit.ReactJSX ?? tsLang.JsxEmit.Preserve,
+      jsxImportSource: "react",
+      allowJs: true,
       strict: true,
       esModuleInterop: true,
       allowSyntheticDefaultImports: true,
@@ -460,6 +467,9 @@ function MonacoEditorWrapper({
     tsLang.typescriptDefaults.setEagerModelSync(true);
     tsLang.javascriptDefaults.setEagerModelSync(true);
 
+    // Keep these custom libs stable: ATA may load overlapping package paths later.
+    if (monacoSandboxTypeLibsInjected) return;
+
     // Stub Node.js globals (process, Buffer, etc.) so sandbox code using them doesn't error
     const nodeGlobals = `
 declare var process: {
@@ -487,11 +497,69 @@ declare var __filename: string;
 `;
     tsLang.typescriptDefaults.addExtraLib(
       nodeGlobals,
-      "file:///node_modules/@types/node/globals.d.ts",
+      "file:///__sandbox-types/node-globals.d.ts",
     );
     tsLang.javascriptDefaults.addExtraLib(
       nodeGlobals,
-      "file:///node_modules/@types/node/globals.d.ts",
+      "file:///__sandbox-types/node-globals.d.ts",
+    );
+
+    // Pre-seed React + JSX ambient types so TSX has intrinsic element typing.
+    const reactTypes = `
+declare module 'react' {
+  export type ReactNode = any;
+  export type ReactElement = any;
+  export type CSSProperties = Record<string, string | number>;
+  export interface FC<P = {}> {
+    (props: P): ReactElement | null;
+  }
+  export interface AnchorHTMLAttributes<T> extends Record<string, unknown> {}
+  export function useEffect(
+    effect: () => void | (() => void),
+    deps?: readonly unknown[],
+  ): void;
+  export function useState<S>(
+    initialState: S | (() => S),
+  ): [S, (value: S | ((prev: S) => S)) => void];
+  export function useMemo<T>(factory: () => T, deps: readonly unknown[]): T;
+  export function useCallback<T extends (...args: any[]) => any>(
+    callback: T,
+    deps: readonly unknown[],
+  ): T;
+  export function useRef<T>(initialValue: T): { current: T };
+  const React: {
+    createElement: (...args: any[]) => ReactElement;
+    Fragment: any;
+  };
+  export default React;
+}
+declare module 'react/jsx-runtime' {
+  export const Fragment: any;
+  export function jsx(type: any, props: any, key?: any): any;
+  export function jsxs(type: any, props: any, key?: any): any;
+  export function jsxDEV(
+    type: any,
+    props: any,
+    key: any,
+    isStaticChildren: boolean,
+    source: any,
+    self: any,
+  ): any;
+}
+declare namespace JSX {
+  interface Element {}
+  interface IntrinsicElements {
+    [elemName: string]: any;
+  }
+}
+`;
+    tsLang.typescriptDefaults.addExtraLib(
+      reactTypes,
+      "file:///__sandbox-types/react-jsx.d.ts",
+    );
+    tsLang.javascriptDefaults.addExtraLib(
+      reactTypes,
+      "file:///__sandbox-types/react-jsx.d.ts",
     );
 
     // Pre-seed Next.js type stubs. ATA cannot resolve `next` because Next uses a
@@ -566,12 +634,14 @@ declare module 'next/server' {
 `;
     tsLang.typescriptDefaults.addExtraLib(
       nextTypes,
-      "file:///node_modules/next/index.d.ts",
+      "file:///__sandbox-types/next.d.ts",
     );
     tsLang.javascriptDefaults.addExtraLib(
       nextTypes,
-      "file:///node_modules/next/index.d.ts",
+      "file:///__sandbox-types/next.d.ts",
     );
+
+    monacoSandboxTypeLibsInjected = true;
   };
 
   const handleMount: OnMount = (editor, monaco) => {
@@ -592,12 +662,21 @@ declare module 'next/server' {
     acquireTypes(value);
   }, [value, acquireTypes]);
 
+  const modelPath =
+    path && path.length
+      ? path.startsWith("file://")
+        ? path
+        : `file:///${path.replace(/^\/+/, "")}`
+      : undefined;
+
   return (
     <div className="absolute inset-0">
       <MonacoEditorLib
+        key={modelPath ?? language}
         height="100%"
         width="100%"
-        language={language === "typescript" ? "typescript" : "javascript"}
+        language={language.includes("typescript") ? "typescript" : "javascript"}
+        path={modelPath}
         theme="vs-dark"
         value={value}
         onChange={(val) => onChange(val ?? "")}
@@ -942,7 +1021,7 @@ export default function CodeRunnerModal() {
   );
 
   // ── Editor mode ───────────────────────────────────────────
-  const [useMonacoEditor, setUseMonacoEditor] = useState(false);
+  const [useMonacoEditor, setUseMonacoEditor] = useState(true);
 
   // ── Sandbox state ─────────────────────────────────────────
   const [mode, setMode] = useState<"script" | "sandbox">("script");
@@ -3750,7 +3829,7 @@ export default function CodeRunnerModal() {
           title={
             useMonacoEditor
               ? "Switch to simple editor"
-              : "Switch to Monaco (VS Code intellisense)"
+              : "Switch to Monaco editor"
           }
         >
           <Code2 className="w-3 h-3" />
@@ -3790,6 +3869,9 @@ export default function CodeRunnerModal() {
                 onChange={setCode}
                 onCtrlEnter={() => void runCode()}
                 language={lang}
+                path={
+                  lang === "typescript" ? "sandbox/main.ts" : "sandbox/main.js"
+                }
                 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);`}
@@ -3966,6 +4048,11 @@ export default function CodeRunnerModal() {
                       onChange={setServerCode}
                       onCtrlEnter={() => void startServer()}
                       language={serverLang}
+                      path={
+                        serverLang === "typescript"
+                          ? "sandbox/server.ts"
+                          : "sandbox/server.js"
+                      }
                       fontSize="12px"
                       placeholder={
                         "import express from 'express';\n// process.env.PORT is auto-injected\n// Ctrl+Enter to start"
@@ -4723,6 +4810,11 @@ export default function CodeRunnerModal() {
                             if (serverRunning) void runClient();
                           }}
                           language={clientLang}
+                          path={
+                            clientLang === "typescript"
+                              ? "sandbox/client.ts"
+                              : "sandbox/client.js"
+                          }
                           fontSize="12px"
                           placeholder={
                             "// SANDBOX_URL is injected automatically\n// Start the server first, then Ctrl+Enter to run"
@@ -4781,6 +4873,7 @@ export default function CodeRunnerModal() {
                               ? "typescript"
                               : "javascript"
                           }
+                          path={reactActiveFile}
                           fontSize="12px"
                           placeholder={`// ${reactActiveFile}\n`}
                         />
@@ -4795,10 +4888,13 @@ export default function CodeRunnerModal() {
                             }))
                           }
                           language={
-                            reactActiveFile.endsWith(".ts") ||
                             reactActiveFile.endsWith(".tsx")
-                              ? "typescript"
-                              : "javascript"
+                              ? "typescriptreact"
+                              : reactActiveFile.endsWith(".ts")
+                                ? "typescript"
+                                : reactActiveFile.endsWith(".jsx")
+                                  ? "javascriptreact"
+                                  : "javascript"
                           }
                           fontSize="12px"
                           focusRingClass="ring-cyan-500/30"