create-interview-cockpit 0.16.0 → 0.17.0

package/package.json

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

package/template/client/package-lock.json

@@ -7,7 +7,9 @@
       "name": "interview-cockpit-client",
       "dependencies": {
         "@ai-sdk/react": "^3.0.170",
+        "@monaco-editor/react": "^4.7.0",
         "@types/prismjs": "^1.26.6",
+        "@typescript/ata": "^0.9.8",
         "ai": "^6.0.168",
         "lucide-react": "^0.460.0",
         "mermaid": "^11.4.0",
@@ -32,7 +34,7 @@
         "autoprefixer": "^10.4.0",
         "postcss": "^8.4.0",
         "tailwindcss": "^3.4.0",
-        "typescript": "^5.6.0",
+        "typescript": "^5.9.3",
         "vite": "^6.0.0"
       }
     },
@@ -978,6 +980,29 @@
         "langium": "^4.0.0"
       }
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.7.0.tgz",
+      "integrity": "sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==",
+      "license": "MIT",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz",
+      "integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.5.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1801,6 +1826,15 @@
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
       "license": "MIT"
     },
+    "node_modules/@typescript/ata": {
+      "version": "0.9.8",
+      "resolved": "https://registry.npmjs.org/@typescript/ata/-/ata-0.9.8.tgz",
+      "integrity": "sha512-+M815CeDRJS5H5ciWfhFCKp25nNfF+LFWawWAaBhNlquFb2wS5IIMDI+2bKWN3GuU6mpj+FzySsOD29M4nG8Xg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "typescript": ">=4.4.4"
+      }
+    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
@@ -4563,6 +4597,40 @@
         "ufo": "^1.6.3"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.55.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz",
+      "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "dompurify": "3.2.7",
+        "marked": "14.0.0"
+      }
+    },
+    "node_modules/monaco-editor/node_modules/dompurify": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
+      "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "peer": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
+    "node_modules/monaco-editor/node_modules/marked": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
+      "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -5429,6 +5497,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
+      "license": "MIT"
+    },
     "node_modules/string-width": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
@@ -5785,7 +5859,6 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",

package/template/client/package.json

@@ -9,7 +9,9 @@
   },
   "dependencies": {
     "@ai-sdk/react": "^3.0.170",
+    "@monaco-editor/react": "^4.7.0",
     "@types/prismjs": "^1.26.6",
+    "@typescript/ata": "^0.9.8",
     "ai": "^6.0.168",
     "lucide-react": "^0.460.0",
     "mermaid": "^11.4.0",
@@ -34,7 +36,7 @@
     "autoprefixer": "^10.4.0",
     "postcss": "^8.4.0",
     "tailwindcss": "^3.4.0",
-    "typescript": "^5.6.0",
+    "typescript": "^5.9.3",
     "vite": "^6.0.0"
   }
 }

package/template/client/src/browserSecurityTemplates.ts

@@ -30,7 +30,7 @@ const MFE_BROWSER_SECURITY_WORKSPACE = (() => {
   return {
     ...workspace,
     label: "Webpack MF - CSP and XSS Boundaries",
-    activeFile: "apps/host/src/App.jsx",
+    activeFile: "apps/host/src/App.tsx",
     files: {
       ...workspace.files,
       "README.md": `# Module Federation Security Lab
@@ -46,9 +46,9 @@ If any remote renders attacker-controlled HTML with dangerouslySetInnerHTML, tha
 ## What to inspect
 
 - apps/host/webpack.config.js - CSP allowlist for remote origins
-- apps/host/src/App.jsx - host passes one payload to both remotes
-- apps/profile/src/ProfileCard.jsx - safe remote renders payload as text
-- apps/checkout/src/CheckoutPanel.jsx - unsafe remote injects HTML directly
+- apps/host/src/App.tsx - host passes one payload to both remotes
+- apps/profile/src/ProfileCard.tsx - safe remote renders payload as text
+- apps/checkout/src/CheckoutPanel.tsx - unsafe remote injects HTML directly
 
 ## Suggested experiments
 
@@ -57,7 +57,7 @@ If any remote renders attacker-controlled HTML with dangerouslySetInnerHTML, tha
 3. Remove one remote origin from script-src in apps/host/webpack.config.js and rerun webpack.
 4. Add a new remote and notice that CSP must be updated before the host can trust it.
 `,
-      "apps/host/src/App.jsx": `import React, { Suspense, useMemo, useState } from "react";
+      "apps/host/src/App.tsx": `import React, { Suspense, useMemo, useState } from "react";
 import { makeInspectableLazy } from "../../shared/mfInspector";
 
 const ProfileCard = React.lazy(
@@ -79,7 +79,7 @@ const SAFE_PROMO = "Spring release: 20% off for signed-in teams.";
 const ATTACKER_PROMO =
   '<img src="x" onerror="document.getElementById(\\'mf-xss-status\\').textContent=\\'XSS executed inside the unsafe checkout remote\\';document.getElementById(\\'mf-xss-status\\').style.color=\\'#dc2626\\';document.getElementById(\\'mf-xss-status\\').style.fontWeight=\\'700\\';" />';
 
-function RemoteBoundary({ title, children }) {
+function RemoteBoundary({ title, children }: { title: string; children: React.ReactNode }) {
   return (
     <div
       style={{
@@ -303,24 +303,24 @@ const inspectorConfig = {
 module.exports = {
   mode: "development",
   devtool: "source-map",
-  entry: path.resolve(__dirname, "./src/index.jsx"),
+  entry: path.resolve(__dirname, "./src/index.tsx"),
   output: {
     path: path.resolve(__dirname, "./dist"),
     publicPath: "http://localhost:" + hostPort + "/",
     clean: true,
   },
   resolve: {
-    extensions: [".js", ".jsx"],
+    extensions: [".js", ".jsx", ".ts", ".tsx"],
   },
   module: {
     rules: [
       {
-        test: /\\.(js|jsx)$/,
+        test: /\\.(js|jsx|ts|tsx)$/,
         exclude: /node_modules/,
         use: {
           loader: "esbuild-loader",
           options: {
-            loader: "jsx",
+            loader: "tsx",
             jsx: "automatic",
             target: "es2020",
           },
@@ -366,7 +366,7 @@ module.exports = {
   ],
 };
 `,
-      "apps/profile/src/App.jsx": `import React from "react";
+      "apps/profile/src/App.tsx": `import React from "react";
 import ProfileCard from "./ProfileCard";
 
 export default function App() {
@@ -381,9 +381,9 @@ export default function App() {
   );
 }
 `,
-      "apps/profile/src/ProfileCard.jsx": `import React from "react";
+      "apps/profile/src/ProfileCard.tsx": `import React from "react";
 
-export default function ProfileCard({ promoHtml = "" }) {
+export default function ProfileCard({ promoHtml = "" }: { promoHtml?: string }) {
   return (
     <section>
       <h2 style={{ marginTop: 0, color: "#1e293b" }}>Safe federated profile card</h2>
@@ -418,7 +418,7 @@ const { createSharedConfig } = require("../shared/buildSharedConfig");
 const profilePort = Number(process.env.PROFILE_PORT || 3101);
 const sharedConfig = createSharedConfig(packageJson);
 const exposeConfig = {
-  "./ProfileCard": path.resolve(__dirname, "./src/ProfileCard.jsx"),
+  "./ProfileCard": path.resolve(__dirname, "./src/ProfileCard.tsx"),
   "./InspectorBridge": path.resolve(__dirname, "./src/inspectorBridge.js"),
 };
 const inspectorConfig = {
@@ -430,24 +430,24 @@ const inspectorConfig = {
 module.exports = {
   mode: "development",
   devtool: "source-map",
-  entry: path.resolve(__dirname, "./src/index.jsx"),
+  entry: path.resolve(__dirname, "./src/index.tsx"),
   output: {
     path: path.resolve(__dirname, "./dist"),
     publicPath: "http://localhost:" + profilePort + "/",
     clean: true,
   },
   resolve: {
-    extensions: [".js", ".jsx"],
+    extensions: [".js", ".jsx", ".ts", ".tsx"],
   },
   module: {
     rules: [
       {
-        test: /\\.(js|jsx)$/,
+        test: /\\.(js|jsx|ts|tsx)$/,
         exclude: /node_modules/,
         use: {
           loader: "esbuild-loader",
           options: {
-            loader: "jsx",
+            loader: "tsx",
             jsx: "automatic",
             target: "es2020",
           },
@@ -481,7 +481,7 @@ module.exports = {
   ],
 };
 `,
-      "apps/checkout/src/App.jsx": `import React from "react";
+      "apps/checkout/src/App.tsx": `import React from "react";
 import CheckoutPanel from "./CheckoutPanel";
 
 export default function App() {
@@ -496,9 +496,9 @@ export default function App() {
   );
 }
 `,
-      "apps/checkout/src/CheckoutPanel.jsx": `import React from "react";
+      "apps/checkout/src/CheckoutPanel.tsx": `import React from "react";
 
-export default function CheckoutPanel({ promoHtml = "" }) {
+export default function CheckoutPanel({ promoHtml = "" }: { promoHtml?: string }) {
   return (
     <section>
       <h2 style={{ marginTop: 0, color: "#7c2d12" }}>Unsafe federated checkout panel</h2>
@@ -532,7 +532,7 @@ const { createSharedConfig } = require("../shared/buildSharedConfig");
 const checkoutPort = Number(process.env.CHECKOUT_PORT || 3102);
 const sharedConfig = createSharedConfig(packageJson);
 const exposeConfig = {
-  "./CheckoutPanel": path.resolve(__dirname, "./src/CheckoutPanel.jsx"),
+  "./CheckoutPanel": path.resolve(__dirname, "./src/CheckoutPanel.tsx"),
   "./InspectorBridge": path.resolve(__dirname, "./src/inspectorBridge.js"),
 };
 const inspectorConfig = {
@@ -544,24 +544,24 @@ const inspectorConfig = {
 module.exports = {
   mode: "development",
   devtool: "source-map",
-  entry: path.resolve(__dirname, "./src/index.jsx"),
+  entry: path.resolve(__dirname, "./src/index.tsx"),
   output: {
     path: path.resolve(__dirname, "./dist"),
     publicPath: "http://localhost:" + checkoutPort + "/",
     clean: true,
   },
   resolve: {
-    extensions: [".js", ".jsx"],
+    extensions: [".js", ".jsx", ".ts", ".tsx"],
   },
   module: {
     rules: [
       {
-        test: /\\.(js|jsx)$/,
+        test: /\\.(js|jsx|ts|tsx)$/,
         exclude: /node_modules/,
         use: {
           loader: "esbuild-loader",
           options: {
-            loader: "jsx",
+            loader: "tsx",
             jsx: "automatic",
             target: "es2020",
           },
@@ -1582,10 +1582,13 @@ webpack(config, (err, stats) => {
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "esbuild": "^0.28.0",
     "esbuild-loader": "^4.4.3",
     "esbuild-register": "^3.6.0",
     "html-webpack-plugin": "^5.6.7",
+    "typescript": "^5.6.0",
     "webpack": "^5.106.2",
     "webpack-cli": "^7.0.2"
   }
@@ -1613,19 +1616,19 @@ module.exports = {
     publicPath: 'http://localhost:' + port + '/',
     clean: true,
   },
-  resolve: { extensions: ['.js', '.jsx'] },
+  resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
   module: {
     rules: [{
-      test: /\\.jsx?$/,
+      test: /\\.(js|jsx|ts|tsx)$/,
       exclude: /node_modules/,
-      use: { loader: 'esbuild-loader', options: { loader: 'jsx', jsx: 'automatic', target: 'es2020' } },
+      use: { loader: 'esbuild-loader', options: { loader: 'tsx', jsx: 'automatic', target: 'es2020' } },
     }],
   },
   plugins: [
     new ModuleFederationPlugin({
       name: '${name}',
       filename: 'remoteEntry.js',
-      exposes: { './${componentFile}': path.resolve(__dirname, './src/${componentFile}.jsx') },
+      exposes: { './${componentFile}': path.resolve(__dirname, './src/${componentFile}.tsx') },
       shared: {
         react: { singleton: true, requiredVersion: '^18.3.1' },
         'react-dom': { singleton: true, requiredVersion: '^18.3.1' },
@@ -1641,7 +1644,7 @@ module.exports = {
 // This component runs on the server (renderToString) AND in the browser (hydration).
 // SSR means the HTML is generated here on the remote's Node server at request time,
 // sent to the Next.js host, inserted into the page, then React takes over client-side.
-export default function ProfileCard({ ssrContext = false }) {
+export default function ProfileCard({ ssrContext = false }: { ssrContext?: boolean }): React.ReactElement {
   return (
     <section style={{ fontFamily: 'ui-sans-serif, system-ui, sans-serif' }}>
       <div style={{
@@ -1675,7 +1678,7 @@ export default function ProfileCard({ ssrContext = false }) {
 
 // Same SSR pattern as ProfileCard: rendered to HTML string on the remote Node server,
 // fetched by the Next.js host during getServerSideProps/page render, then hydrated.
-export default function CheckoutPanel({ ssrContext = false }) {
+export default function CheckoutPanel({ ssrContext = false }: { ssrContext?: boolean }): React.ReactElement {
   return (
     <section style={{ fontFamily: 'ui-sans-serif, system-ui, sans-serif' }}>
       <div style={{
@@ -1718,7 +1721,7 @@ import('./bootstrap');
         componentName: string,
       ) => `import React from 'react';
 import { createRoot } from 'react-dom/client';
-import ${componentName} from './${componentName}.jsx';
+import ${componentName} from './${componentName}';
 
 // Standalone preview when you open the remote's own URL directly.
 const root = document.getElementById('root');
@@ -1843,14 +1846,14 @@ export default function RootLayout({ children }) {
 }
 `;
 
-      const HOST_NEXT_CONFIG = `/** @type {import('next').NextConfig} */
-const nextConfig = {
-  // Allow the Next.js server to make HTTP requests to local remote servers.
-  // In production you'd list your real remote origins here.
+      const HOST_NEXT_CONFIG = `import type { NextConfig } from 'next';
+// Allow the Next.js server to make HTTP requests to local remote servers.
+// In production you'd list your real remote origins here.
+const nextConfig: NextConfig = {
   experimental: {},
 };
 
-module.exports = nextConfig;
+export default nextConfig;
 `;
 
       const HOST_PACKAGE = `{
@@ -1997,8 +2000,8 @@ Browser
         ),
         "apps/profile/public/index.html": REMOTE_INDEX_HTML("Profile Remote"),
         "apps/profile/src/index.js": REMOTE_INDEX_JS,
-        "apps/profile/src/bootstrap.js": REMOTE_BOOTSTRAP("ProfileCard"),
-        "apps/profile/src/ProfileCard.jsx": PROFILE_CARD_JSX,
+        "apps/profile/src/bootstrap.tsx": REMOTE_BOOTSTRAP("ProfileCard"),
+        "apps/profile/src/ProfileCard.tsx": PROFILE_CARD_JSX,
 
         // checkout remote
         "apps/checkout/package.json": REMOTE_PACKAGE("checkout"),
@@ -2016,12 +2019,12 @@ Browser
         ),
         "apps/checkout/public/index.html": REMOTE_INDEX_HTML("Checkout Remote"),
         "apps/checkout/src/index.js": REMOTE_INDEX_JS,
-        "apps/checkout/src/bootstrap.js": REMOTE_BOOTSTRAP("CheckoutPanel"),
-        "apps/checkout/src/CheckoutPanel.jsx": CHECKOUT_PANEL_JSX,
+        "apps/checkout/src/bootstrap.tsx": REMOTE_BOOTSTRAP("CheckoutPanel"),
+        "apps/checkout/src/CheckoutPanel.tsx": CHECKOUT_PANEL_JSX,
 
         // Next.js host
         "apps/host/package.json": HOST_PACKAGE,
-        "apps/host/next.config.js": HOST_NEXT_CONFIG,
+        "apps/host/next.config.ts": HOST_NEXT_CONFIG,
         "apps/host/buildAndServe.js": HOST_BUILD_SERVE,
         "apps/host/app/layout.js": HOST_LAYOUT_JS,
         "apps/host/app/page.js": HOST_PAGE_JS,
@@ -2097,18 +2100,18 @@ const MAX_SPANS = 2000;
 
 module.exports = {
   mode: 'development',
-  entry: path.resolve(__dirname, './src/index.js'),
+  entry: path.resolve(__dirname, './src/index.ts'),
   output: {
     path: path.resolve(__dirname, './dist'),
     publicPath: 'http://localhost:' + HOST_PORT + '/',
     clean: true,
   },
-  resolve: { extensions: ['.js', '.jsx'] },
+  resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
   module: {
     rules: [{
-      test: /\\.jsx?$/,
+      test: /\\.(js|jsx|ts|tsx)$/,
       exclude: /node_modules/,
-      use: { loader: 'esbuild-loader', options: { loader: 'jsx', jsx: 'automatic', target: 'es2020' } },
+      use: { loader: 'esbuild-loader', options: { loader: 'tsx', jsx: 'automatic', target: 'es2020' } },
     }],
   },
   plugins: [
@@ -2208,8 +2211,8 @@ import('./bootstrap');
 
       const HOST_BOOTSTRAP = `import React from 'react';
 import { createRoot } from 'react-dom/client';
-import App from './App.jsx';
-createRoot(document.getElementById('root')).render(React.createElement(App));
+import App from './App';
+createRoot(document.getElementById('root')!).render(React.createElement(App));
 `;
 
       // ── THE KEY FILE ─────────────────────────────────────────────────────
@@ -2438,8 +2441,8 @@ export function flush() { return _flush(); }
       // ── App.jsx ──────────────────────────────────────────────────────────
       const HOST_APP = `
 import React, { useState, useEffect, Suspense } from 'react';
-import { initTelemetry } from './telemetry.js';
-import TraceDashboard from './TraceDashboard.jsx';
+import { initTelemetry } from './telemetry';
+import TraceDashboard from './TraceDashboard';
 
 // ── TracerProvider initialisation ────────────────────────────────────────────
 // This runs once, synchronously, before any component renders.
@@ -2862,24 +2865,24 @@ const PROFILE_PORT = Number(process.env.PROFILE_PORT || 3101);
 
 module.exports = {
   mode: 'development',
-  entry: path.resolve(__dirname, './src/index.js'),
+  entry: path.resolve(__dirname, './src/index.ts'),
   output: {
     path: path.resolve(__dirname, './dist'),
     publicPath: 'http://localhost:' + PROFILE_PORT + '/',
     clean: true,
   },
-  resolve: { extensions: ['.js', '.jsx'] },
+  resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
   module: {
     rules: [{
-      test: /\\.jsx?$/, exclude: /node_modules/,
-      use: { loader: 'esbuild-loader', options: { loader: 'jsx', jsx: 'automatic', target: 'es2020' } },
+      test: /\\.(js|jsx|ts|tsx)$/, exclude: /node_modules/,
+      use: { loader: 'esbuild-loader', options: { loader: 'tsx', jsx: 'automatic', target: 'es2020' } },
     }],
   },
   plugins: [
     new ModuleFederationPlugin({
       name: 'profile',
       filename: 'remoteEntry.js',
-      exposes: { './ProfileCard': './src/ProfileCard.jsx' },
+      exposes: { './ProfileCard': './src/ProfileCard.tsx' },
       // Import the host's shared telemetry module so this remote's spans
       // are created by the SAME TracerProvider as the host.
       remotes: { host: 'host@http://localhost:' + HOST_PORT + '/remoteEntry.js' },
@@ -2908,7 +2911,7 @@ module.exports = {
       const REMOTE_BOOTSTRAP = (component: string) => `
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import ${component} from './${component}.jsx';
+import ${component} from './${component}';
 const root = document.getElementById('root');
 if (root) createRoot(root).render(React.createElement(${component}));
 `;
@@ -3007,24 +3010,24 @@ const CHECKOUT_PORT = Number(process.env.CHECKOUT_PORT || 3102);
 
 module.exports = {
   mode: 'development',
-  entry: path.resolve(__dirname, './src/index.js'),
+  entry: path.resolve(__dirname, './src/index.ts'),
   output: {
     path: path.resolve(__dirname, './dist'),
     publicPath: 'http://localhost:' + CHECKOUT_PORT + '/',
     clean: true,
   },
-  resolve: { extensions: ['.js', '.jsx'] },
+  resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
   module: {
     rules: [{
-      test: /\\.jsx?$/, exclude: /node_modules/,
-      use: { loader: 'esbuild-loader', options: { loader: 'jsx', jsx: 'automatic', target: 'es2020' } },
+      test: /\\.(js|jsx|ts|tsx)$/, exclude: /node_modules/,
+      use: { loader: 'esbuild-loader', options: { loader: 'tsx', jsx: 'automatic', target: 'es2020' } },
     }],
   },
   plugins: [
     new ModuleFederationPlugin({
       name: 'checkout',
       filename: 'remoteEntry.js',
-      exposes: { './CheckoutPanel': './src/CheckoutPanel.jsx' },
+      exposes: { './CheckoutPanel': './src/CheckoutPanel.tsx' },
       remotes: { host: 'host@http://localhost:' + HOST_PORT + '/remoteEntry.js' },
       shared: {
         react:       { singleton: true, requiredVersion: '^18.3.1' },
@@ -3219,23 +3222,23 @@ export default function CheckoutPanel({ deploymentVersion }) {
         "apps/host/package.json": HOST_PACKAGE,
         "apps/host/webpack.config.js": HOST_WEBPACK,
         "apps/host/public/index.html": HOST_HTML,
-        "apps/host/src/index.js": HOST_INDEX_JS,
-        "apps/host/src/bootstrap.jsx": HOST_BOOTSTRAP,
+        "apps/host/src/index.ts": HOST_INDEX_JS,
+        "apps/host/src/bootstrap.tsx": HOST_BOOTSTRAP,
         "apps/host/src/telemetry.js": HOST_TELEMETRY,
-        "apps/host/src/App.jsx": HOST_APP,
-        "apps/host/src/TraceDashboard.jsx": HOST_TRACE_DASHBOARD,
+        "apps/host/src/App.tsx": HOST_APP,
+        "apps/host/src/TraceDashboard.tsx": HOST_TRACE_DASHBOARD,
         "apps/profile/package.json": PROFILE_PACKAGE,
         "apps/profile/webpack.config.js": PROFILE_WEBPACK,
         "apps/profile/public/index.html": REMOTE_HTML("Profile Remote"),
-        "apps/profile/src/index.js": REMOTE_INDEX,
-        "apps/profile/src/bootstrap.js": REMOTE_BOOTSTRAP("ProfileCard"),
-        "apps/profile/src/ProfileCard.jsx": PROFILE_CARD,
+        "apps/profile/src/index.ts": REMOTE_INDEX,
+        "apps/profile/src/bootstrap.tsx": REMOTE_BOOTSTRAP("ProfileCard"),
+        "apps/profile/src/ProfileCard.tsx": PROFILE_CARD,
         "apps/checkout/package.json": CHECKOUT_PACKAGE,
         "apps/checkout/webpack.config.js": CHECKOUT_WEBPACK,
         "apps/checkout/public/index.html": REMOTE_HTML("Checkout Remote"),
-        "apps/checkout/src/index.js": REMOTE_INDEX,
-        "apps/checkout/src/bootstrap.js": REMOTE_BOOTSTRAP("CheckoutPanel"),
-        "apps/checkout/src/CheckoutPanel.jsx": CHECKOUT_PANEL,
+        "apps/checkout/src/index.ts": REMOTE_INDEX,
+        "apps/checkout/src/bootstrap.tsx": REMOTE_BOOTSTRAP("CheckoutPanel"),
+        "apps/checkout/src/CheckoutPanel.tsx": CHECKOUT_PANEL,
       };
     })(),
   },