@tdk-landscape/tdk-cli-core 1.3.74 → 1.3.75

package/README.md

@@ -10,6 +10,7 @@ One CLI that scaffolds your services and runs the whole landscape locally with h
 [![CI](https://github.com/tdk-landscape/tdk-cli-core/actions/workflows/ci.yml/badge.svg)](https://github.com/tdk-landscape/tdk-cli-core/actions/workflows/ci.yml)
 [![Quickstart E2E](https://github.com/tdk-landscape/tdk-cli-core/actions/workflows/quickstart-e2e.yml/badge.svg)](https://github.com/tdk-landscape/tdk-cli-core/actions/workflows/quickstart-e2e.yml)
 [![ERP scale E2E](https://github.com/tdk-landscape/tdk-cli-core/actions/workflows/erp-scale-e2e.yml/badge.svg)](https://github.com/tdk-landscape/tdk-cli-core/actions/workflows/erp-scale-e2e.yml)
+[![Example apps E2E](https://github.com/tdk-landscape/tdk-cli-core/actions/workflows/examples-e2e.yml/badge.svg?branch=main)](https://github.com/tdk-landscape/tdk-cli-core/actions/workflows/examples-e2e.yml)
 [![Known Vulnerabilities](https://snyk.io/test/github/tdk-landscape/tdk-cli-core/badge.svg)](https://snyk.io/test/github/tdk-landscape/tdk-cli-core)
 [![Socket Badge](https://badge.socket.dev/npm/package/@tdk-landscape/tdk-cli-core/latest)](https://socket.dev/npm/package/@tdk-landscape/tdk-cli-core/overview)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
@@ -28,6 +29,8 @@ tdk up shop                                             # run it with hot reload
 
 ![tdk scaffolding a backend and a frontend, then listing the stack](docs/demo.svg)
 
+![npm downloads, last month](docs/npm-downloads.svg)
+
 **Requirements:** Docker (Desktop, OrbStack or Colima; Engine 25+, Compose 2.20+), [Tilt](https://docs.tilt.dev/install.html), [Bun](https://bun.sh) for the generated services, and Node.js 22.12+ for the CLI. Ports 80, 443 and 5432 must be free (a local Postgres is the usual conflict). macOS and Linux are supported. Windows is untested (WSL2 may work). Run `tdk doctor` to check all of it.
 
 This is the core monorepo for TDK: the `tdk` CLI, the Starlark-based Tilt orchestration engine that powers it, and the discovery system that turns a directory of services into a running local landscape.

package/cli/dist/commands/doctor.js

@@ -1,10 +1,11 @@
 import { execSync } from "node:child_process";
 import { existsSync, readdirSync, readFileSync } from "node:fs";
-import { dirname, join, normalize } from "node:path";
+import { dirname, join, normalize, relative } from "node:path";
 import chalk from "chalk";
 import { Command } from "commander";
 import { hasVerdaccioLicense } from "../generator/extension-fetch.js";
 import { MASTER_CONFIG_FILES, QUICKSTART_DOCS_URL, REQUIRED_PACKAGE_SCRIPTS, } from "../utils/constants.js";
+import { isPathDiscovered, readDiscoveryPaths } from "../utils/discovery-paths.js";
 import { checkHealthRoutes, checkHostPorts, checkIngressPorts, checkPrivateNpmRegistry, checkTiltResourceHealth, projectConfigEnablesVerdaccio, summarizeServiceProbes, } from "../utils/doctor-runtime.js";
 import { validateEnvFile } from "../utils/env-validator.js";
 import { formatCount } from "../utils/formatting.js";
@@ -218,6 +219,31 @@ function checkMasterConfigs() {
         fix: "Run: tdk project",
     };
 }
+/**
+ * Tilt only builds resources under `discovery.paths`, but the CLI finds every service.json,
+ * so a resource outside them is listed and given a URL by `tdk up` yet never started.
+ */
+export function checkResourceDiscovery() {
+    const projectRoot = findProjectRoot() ?? process.cwd();
+    const patterns = readDiscoveryPaths(projectRoot);
+    const stranded = discoverResourcesFromRoot(projectRoot).filter((resource) => !isPathDiscovered(projectRoot, resource.path, patterns));
+    if (stranded.length === 0) {
+        return {
+            name: "Resource Discovery",
+            didPass: true,
+            message: `All resources are covered by discovery.paths ${JSON.stringify(patterns)}`,
+        };
+    }
+    const list = stranded
+        .map((resource) => normalize(relative(projectRoot, resource.path)))
+        .join(", ");
+    return {
+        name: "Resource Discovery",
+        didPass: false,
+        message: `${formatCount(stranded.length, "resource")} outside discovery.paths ${JSON.stringify(patterns)}: ${list}. \`tdk up\` will not start them`,
+        fix: "Move each under services/<stack>/<name>, or add a matching pattern to discovery.paths in .tdk/project.json and run: tdk config regenerate",
+    };
+}
 // The scripts `tdk project` copies into every project. Generated Dockerfiles
 // may reference others; those are checked by scanning the Dockerfiles below.
 const REQUIRED_DOCKER_TEMPLATE_FILES = [
@@ -491,6 +517,26 @@ const KNOWN_TYPE_PACKAGE_VERSIONS = {
     "@types/bun": "^1.4.2",
     "@types/node": "^20.0.0",
 };
+/**
+ * `@types/bun` (via its underlying `bun-types` package) ships a hardcoded
+ * `/// <reference types="node" />` in its own index.d.ts. TypeScript always
+ * honors an explicit triple-slash reference, regardless of what the
+ * tsconfig's own `"types"` array restricts to -- so a Docker tsconfig with
+ * `"types": ["bun"]` still requires `@types/node` to resolve, even though
+ * "node" never appears in that array.
+ *
+ * When `@types/node` isn't a direct dependency, it can only resolve as a
+ * *transitive* dependency of `bun-types`, hoisted wherever Bun's installer
+ * happens to place it. That is not guaranteed in the isolated, per-service
+ * `bun install` that Docker's build layers run (unlike a full workspace-root
+ * install), so the same tsconfig can build locally and fail in Docker with
+ * `TS2688: Cannot find type definition file for 'node'`. Declaring
+ * `@types/node` directly makes the install deterministic either way.
+ */
+function needsNodeTypesForBun(installed, types) {
+    const usesBunTypes = types.includes("bun") || installed.has("@types/bun");
+    return usesBunTypes && !installed.has("@types/node");
+}
 export function checkTypeScriptTypeDependencies() {
     const projectRoot = findProjectRoot() ?? process.cwd();
     const resources = discoverResourcesFromRoot(projectRoot);
@@ -527,6 +573,10 @@ export function checkTypeScriptTypeDependencies() {
             const described = missing.map((m) => `"${m}" (needs ${neededTypePackage(m)})`).join(", ");
             problems.push(`${resource.name}: "types" lists ${described}`);
         }
+        if (needsNodeTypesForBun(installed, types)) {
+            missingPackages.add("@types/node");
+            problems.push(`${resource.name}: uses @types/bun, which references node types internally, but @types/node is not a direct dependency`);
+        }
     }
     if (problems.length === 0) {
         return {
@@ -542,7 +592,7 @@ export function checkTypeScriptTypeDependencies() {
     return {
         name: "TypeScript Type Dependencies",
         didPass: false,
-        message: `Docker tsconfig "types" names packages the service does not depend on, so \`bun run build\` fails with TS2688 (Cannot find type definition file):\n    ${problems.join("\n    ")}`,
+        message: `\`bun run build\` will fail with TS2688 (Cannot find type definition file) because a @types package it needs is not a direct dependency:\n    ${problems.join("\n    ")}`,
         fix: `Add to each service's package.json devDependencies: ${lines.join(", ")}`,
     };
 }
@@ -573,6 +623,11 @@ export function checkFrontendDockerPreflight() {
     }
     const problems = [];
     for (const resource of resources) {
+        // The frontend Docker builder runs `COPY <resource>/public ./public`, so a missing
+        // folder fails the image build with "/public: not found".
+        if (!existsSync(join(resource.path, "public"))) {
+            problems.push(`${resource.name}: no public/ folder, but the Docker build copies it. Create it: mkdir -p ${normalize(relative(projectRoot, join(resource.path, "public")))} && touch ${normalize(relative(projectRoot, join(resource.path, "public", ".gitkeep")))}`);
+        }
         const dockerfilePath = join(resource.path, ".autogenerated", "Dockerfile.app.autogenerated");
         const dockerTsconfigPath = join(resource.path, ".autogenerated", "tsconfig.docker.autogenerated.json");
         if (existsSync(dockerfilePath)) {
@@ -750,6 +805,7 @@ export const doctorCommand = new Command("doctor")
         () => checkHealthRoutes(),
         checkTypeScriptTypeDependencies,
         checkFrontendDockerPreflight,
+        checkResourceDiscovery,
         checkEnvironmentVariables,
         // Preflight: catch "port 80 already allocated" BEFORE claiming ready.
         checkIngressPorts,

package/cli/dist/commands/resource.js

@@ -2,9 +2,11 @@ import { existsSync, mkdirSync } from "node:fs";
 import { isAbsolute, relative, resolve } from "node:path";
 import chalk from "chalk";
 import { Command } from "commander";
+import { resolveFrontendFramework } from "../frontend-frameworks/registry.js";
 import { hasDddLicense } from "../generator/extension-fetch.js";
 import { CREATABLE_RESOURCE_TYPES } from "../types/index.js";
 import { assertValid, confirmOrCancel } from "../utils/command-helpers.js";
+import { chooseResourcePath, isPathDiscovered, readDiscoveryPaths, } from "../utils/discovery-paths.js";
 import { errorFactories, requireProjectRoot, runCommand } from "../utils/errors.js";
 import { writeFilesWithProgress } from "../utils/file-helpers.js";
 import { showCommandHeader } from "../utils/formatting.js";
@@ -42,7 +44,8 @@ export const TYPE_SPECIFIC = {
         },
     },
 };
-export function createServiceJson(name, type, stack, port, extraFeatures = []) {
+export function createServiceJson(name, type, stack, port, extraFeatures = [], frameworkId) {
+    const framework = resolveFrontendFramework(type, frameworkId);
     const typeSpecific = TYPE_SPECIFIC[type];
     const base = JSON.parse(JSON.stringify(BASE_TEMPLATE));
     for (const [key, value] of Object.entries(typeSpecific)) {
@@ -62,17 +65,23 @@ export function createServiceJson(name, type, stack, port, extraFeatures = []) {
         type,
         stack,
         port,
+        ...(framework ? { framework: framework.id } : {}),
     };
 }
-export function createPackageJson(name, type) {
+export function createPackageJson(name, type, frameworkId) {
     const isFrontend = type === "frontend";
+    const framework = resolveFrontendFramework(type, frameworkId);
     return {
         name: `@project/${name}`,
         version: "0.0.1",
         type: "module",
         scripts: {
-            dev: isFrontend ? "vite" : "bun run --watch src/index.ts",
-            build: isFrontend ? "tsc && vite build" : "tsc",
+            dev: isFrontend
+                ? "vite --config .autogenerated/vite.config.frontend.autogenerated.ts"
+                : "bun run --watch src/index.ts",
+            build: isFrontend
+                ? "tsc && vite build --config .autogenerated/vite.config.build.autogenerated.ts"
+                : "tsc",
             // Backends and workers run `start` in their production image; doctor checks for it.
             ...(isFrontend ? {} : { start: "bun run dist/index.js" }),
             test: "vitest",
@@ -81,6 +90,7 @@ export function createPackageJson(name, type) {
         },
         dependencies: {
             ...(isFrontend ? {} : { hono: "^4.0.0" }),
+            ...(framework?.dependencies ?? {}),
         },
         devDependencies: {
             "@types/bun": "^1.4.2",
@@ -91,6 +101,17 @@ export function createPackageJson(name, type) {
             vitest: "^5.0.0",
             "@biomejs/biome": "^2.5.13",
             ...(isFrontend ? { vite: "^5.0.0" } : {}),
+            ...(framework?.devDependencies ?? {}),
+        },
+    };
+}
+export function createResourceTsconfig(resourceType, frameworkId) {
+    const framework = resolveFrontendFramework(resourceType, frameworkId);
+    return {
+        ...TSCONFIG_TEMPLATE,
+        compilerOptions: {
+            ...TSCONFIG_TEMPLATE.compilerOptions,
+            ...(framework?.compilerOptions ?? {}),
         },
     };
 }
@@ -179,44 +200,6 @@ export default {
 };
 `;
 }
-function getFrontendIndexTemplate(name) {
-    return `<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>${name}</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
-`;
-}
-const FRONTEND_MAIN_TEMPLATE = `import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
-`;
-function getFrontendAppTemplate(name) {
-    return `function App() {
-  return (
-    <div style={{ padding: '2rem', fontFamily: 'system-ui' }}>
-      <h1>${name}</h1>
-      <p>Frontend resource created with TDK</p>
-    </div>
-  );
-}
-
-export default App;
-`;
-}
 function getShutdownHandlerTemplate(signal) {
     return `process.on('${signal}', () => {
   console.log('[Worker] ${signal} received, shutting down gracefully...');
@@ -307,6 +290,7 @@ export const resourceCommand = new Command("resource")
     .description("Create a new resource (service) from scratch, or register an existing one")
     .argument("[name]", "Resource name (kebab-case)")
     .option("-t, --type <type>", "Resource type: backend, frontend, worker, sdk", "backend")
+    .option("--framework <id>", "Frontend framework: react (default), vue")
     .option("-s, --stack <stack>", "Stack to assign resource to", "default")
     .option("-p, --path <path>", "Custom path for resource directory")
     .option("--resource-path <path>", "Alias for --path (for backward compatibility)")
@@ -351,6 +335,7 @@ export const resourceCommand = new Command("resource")
         else {
             resourceType = options.type;
         }
+        const frontendFramework = resolveFrontendFramework(resourceType, options.framework);
         let dddEnabled = false;
         if (options.ddd) {
             if (resourceType !== "backend" && resourceType !== "worker") {
@@ -409,6 +394,7 @@ export const resourceCommand = new Command("resource")
             }
         }
         let finalResourcePath = resourcePath;
+        let pathAdjustedFrom;
         if (!finalResourcePath) {
             const defaultPaths = {
                 backend: `services/${stackName}/${resourceName}`,
@@ -417,6 +403,12 @@ export const resourceCommand = new Command("resource")
                 sdk: `packages/${resourceName}`,
             };
             finalResourcePath = defaultPaths[resourceType];
+            // An SDK is registered where it already lives, so its folder is never moved.
+            if (resourceType !== "sdk") {
+                const chosen = chooseResourcePath(projectRoot, finalResourcePath, stackName, resourceName);
+                finalResourcePath = chosen.path;
+                pathAdjustedFrom = chosen.adjustedFrom;
+            }
         }
         const fullPath = resolve(projectRoot, finalResourcePath);
         // Prevent path traversal attacks
@@ -482,14 +474,17 @@ export const resourceCommand = new Command("resource")
         mkdirSync(fullPath, { recursive: true });
         mkdirSync(resolve(fullPath, "src"), { recursive: true });
         mkdirSync(resolve(fullPath, "tests"), { recursive: true });
+        if (resourceType === "frontend") {
+            mkdirSync(resolve(fullPath, "public"), { recursive: true });
+        }
         if (dddEnabled) {
             for (const layer of ["domain", "application", "infrastructure", "presentation"]) {
                 mkdirSync(resolve(fullPath, "src", layer), { recursive: true });
             }
         }
         // Prepare file generation tasks
-        const serviceJson = createServiceJson(resourceName, resourceType, stackName, assignedPort, dddEnabled ? ["ddd"] : []);
-        const packageJson = createPackageJson(resourceName, resourceType);
+        const serviceJson = createServiceJson(resourceName, resourceType, stackName, assignedPort, dddEnabled ? ["ddd"] : [], frontendFramework?.id);
+        const packageJson = createPackageJson(resourceName, resourceType, frontendFramework?.id);
         const tasks = [
             {
                 type: "json",
@@ -508,7 +503,7 @@ export const resourceCommand = new Command("resource")
             {
                 type: "json",
                 filename: "tsconfig.json",
-                content: TSCONFIG_TEMPLATE,
+                content: createResourceTsconfig(resourceType, frontendFramework?.id),
                 description: "Generating tsconfig.json",
                 emoji: "⚙️",
             },
@@ -531,26 +526,19 @@ export const resourceCommand = new Command("resource")
             });
         }
         else if (resourceType === "frontend") {
-            tasks.push({
+            tasks.push(...(frontendFramework?.createFiles(resourceName).map((file) => ({
+                ...file,
                 type: "text",
-                filename: "index.html",
-                content: getFrontendIndexTemplate(resourceName),
-                description: "Generating HTML template",
-                emoji: "💻",
-            });
+            })) ?? []));
+            // The shared frontend Docker builder unconditionally runs `COPY <resource>/public`
+            // (the Vite static-assets folder), and an empty folder can't be committed, so
+            // without a placeholder the image build fails for every framework.
             tasks.push({
                 type: "text",
-                filename: "src/main.tsx",
-                content: FRONTEND_MAIN_TEMPLATE,
-                description: "Generating React entry",
-                emoji: "💻",
-            });
-            tasks.push({
-                type: "text",
-                filename: "src/App.tsx",
-                content: getFrontendAppTemplate(resourceName),
-                description: "Generating React app",
-                emoji: "💻",
+                filename: "public/.gitkeep",
+                content: "",
+                description: "Generating public/ assets folder",
+                emoji: "📁",
             });
         }
         else if (resourceType === "worker") {
@@ -575,6 +563,18 @@ export const resourceCommand = new Command("resource")
         writeFilesWithProgress(fullPath, tasks);
         console.log(chalk.green("\n✅ Resource created successfully!"));
         console.log(chalk.gray(`\nLocation: ${fullPath}`));
+        const discoveryPaths = readDiscoveryPaths(projectRoot);
+        if (pathAdjustedFrom) {
+            console.log(chalk.yellow(`\n📁 Placed in ${finalResourcePath} instead of the usual ${pathAdjustedFrom}: ` +
+                `discovery.paths in .tdk/project.json is ${JSON.stringify(discoveryPaths)}, ` +
+                `so ${pathAdjustedFrom} would never be started by \`tdk up\`.`));
+            console.log(chalk.gray("   Use --path to choose another folder."));
+        }
+        else if (!isPathDiscovered(projectRoot, finalResourcePath, discoveryPaths)) {
+            console.log(chalk.yellow(`\n⚠️  ${finalResourcePath} is outside discovery.paths ${JSON.stringify(discoveryPaths)}, ` +
+                "so `tdk up` will not start this resource."));
+            console.log(chalk.gray("   Add a matching pattern to discovery.paths in .tdk/project.json and run `tdk config regenerate`."));
+        }
         console.log(chalk.gray(`\nNext steps:`));
         console.log(chalk.gray(`  cd ${finalResourcePath}`));
         console.log(chalk.gray(`  bun install`));

package/cli/dist/commands/ui.js

@@ -11,8 +11,8 @@ import { isTiltAvailable } from "../utils/tilt.js";
 const HelpPanel = ({ onClose }) => (_jsxs(Box, { borderStyle: "single", borderColor: "cyan", paddingX: 2, paddingY: 1, flexDirection: "column", width: 60, children: [_jsx(Text, { bold: true, color: "cyan", children: "Keyboard Shortcuts" }), _jsxs(Box, { marginY: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, underline: true, children: "Navigation" }), _jsx(Text, { children: " \u2191/\u2193 Navigate list items" }), _jsx(Text, { children: " Enter Select item / Open detail" }), _jsx(Text, { children: " Space Toggle expand (tree view)" }), _jsx(Text, { children: " Tab Next tab" }), _jsx(Text, { children: " 1-5 Direct tab access" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { bold: true, underline: true, children: "Actions" }) }), _jsx(Text, { children: " a Toggle all/pre-alpha services" }), _jsx(Text, { children: " m Toggle mouse support" }), _jsx(Text, { children: " t Toggle tooltips" }), _jsx(Text, { children: " e Toggle enabled/disabled services" }), _jsx(Text, { children: " r Refresh data" }), _jsx(Text, { children: " / Search/filter" }), _jsx(Text, { children: " ? Show this help" }), _jsx(Text, { children: " q/Esc Quit / Back" })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: "Press any key to close..." }) })] }));
 const LoadingScreen = ({ progress, message }) => (_jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsx(Text, { bold: true, color: "cyan", children: "\u2593\u2592\u2591 TDK NEON EDITION \u2591\u2592\u2593" }), _jsx(Box, { marginY: 1 }), _jsxs(Text, { children: ["Loading: ", message] }), _jsxs(Box, { marginY: 1, borderStyle: "single", borderColor: "gray", width: 50, children: [_jsx(Box, { width: progress / 2, backgroundColor: "cyan", children: _jsx(Text, { children: " ".repeat(progress / 2) }) }), _jsxs(Text, { children: [" ", progress, "%"] })] })] }));
 // biome-ignore lint/correctness/noUnusedFunctionParameters: reserved callback prop kept in the component API
-const ErrorScreen = ({ error, onRetry }) => (_jsxs(Box, { flexDirection: "column", padding: 2, alignItems: "center", children: [_jsx(Text, { bold: true, color: "red", children: "Connection Error" }), _jsx(Box, { marginY: 1 }), _jsxs(Text, { color: "red", children: ["\u2717 ", error] }), _jsx(Box, { marginY: 1 }), _jsx(Text, { color: "gray", children: "Troubleshooting:" }), _jsx(Text, { color: "gray", children: " 1. Is Tilt running? Run: tilt up" }), _jsx(Text, { color: "gray", children: " 2. Check Tiltfile exists" }), _jsx(Text, { color: "gray", children: " 3. Try: tdk status --verbose" }), _jsx(Box, { marginY: 1 }), _jsx(Text, { color: "cyan", children: "Press [r] to retry or [q] to quit" })] }));
-const EmptyState = () => (_jsxs(Box, { flexDirection: "column", padding: 2, alignItems: "center", children: [_jsx(Text, { bold: true, color: "yellow", children: "No Services Found" }), _jsx(Box, { marginY: 1 }), _jsx(Text, { color: "gray", children: "\u25C9 No service.json files found" }), _jsx(Box, { marginY: 1 }), _jsx(Text, { children: "To get started:" }), _jsx(Text, { children: " 1. Run: tdk init" }), _jsx(Text, { children: " 2. Or create services manually" }), _jsx(Box, { marginY: 1 }), _jsx(Text, { color: "gray", children: "Press [q] to quit" })] }));
+const ErrorScreen = ({ error, onRetry }) => (_jsxs(Box, { flexDirection: "column", padding: 2, alignItems: "center", children: [_jsx(Text, { bold: true, color: "red", children: "Could Not Load Services" }), _jsx(Box, { marginY: 1 }), _jsxs(Text, { color: "red", children: ["\u2717 ", error] }), _jsx(Box, { marginY: 1 }), _jsx(Text, { color: "gray", children: "Troubleshooting:" }), _jsx(Text, { color: "gray", children: " 1. Check that every service.json is valid JSON" }), _jsx(Text, { color: "gray", children: " 2. Run tdk from your project (the folder with the Tiltfile)" }), _jsx(Text, { color: "gray", children: " 3. Try: tdk status --verbose" }), _jsx(Box, { marginY: 1 }), _jsx(Text, { color: "cyan", children: "Press [r] to retry or [q] to quit" })] }));
+const EmptyState = () => (_jsxs(Box, { flexDirection: "column", padding: 2, alignItems: "center", children: [_jsx(Text, { bold: true, color: "yellow", children: "No Services Found" }), _jsx(Box, { marginY: 1 }), _jsx(Text, { color: "gray", children: "\u25C9 No service.json files found" }), _jsx(Box, { marginY: 1 }), _jsx(Text, { children: "To get started:" }), _jsx(Text, { children: " 1. Run: tdk init" }), _jsx(Text, { children: " 2. Or create services manually" }), _jsx(Box, { marginY: 1 }), _jsx(Text, { color: "cyan", children: "Press [r] to refresh or [q] to quit" })] }));
 const TUIApp = () => {
     const { exit } = useApp();
     const { stdout } = useStdout();
@@ -33,21 +33,27 @@ const TUIApp = () => {
     const [showTooltips, setShowTooltips] = useState(true);
     const [showEnabledOnly, setShowEnabledOnly] = useState(true);
     const projectRoot = findProjectRoot() || "unknown";
-    const { stacks, services } = useMemo(() => ({
-        stacks: discoverStacks(),
-        services: discoverResources(),
-    }), []);
-    useEffect(() => {
-        setLoading(false);
-    }, []);
-    useEffect(() => {
-        if (services.length === 0) {
-            setError('No services found. Run "tdk init" to get started.');
-        }
-        else {
+    const [{ stacks, services }, setDiscovered] = useState({ stacks: [], services: [] });
+    // Re-read service.json files from disk. An empty project is not an error:
+    // it renders EmptyState. Only a failed discovery shows ErrorScreen.
+    const refresh = useCallback(() => {
+        clearMetadataCache();
+        try {
+            setDiscovered({ stacks: discoverStacks(), services: discoverResources() });
             setError(null);
+            return true;
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+            return false;
         }
-    }, [services.length]);
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        refresh();
+    }, [refresh]);
     const selectedStackData = useMemo(() => {
         if (!selectedStack)
             return null;
@@ -241,8 +247,7 @@ const TUIApp = () => {
     useInput((input, key) => {
         if (error) {
             if (input === "r" || input === "R") {
-                setError(null);
-                setLoading(true);
+                refresh();
                 return;
             }
             if (input === "q" || key.escape) {
@@ -300,9 +305,10 @@ const TUIApp = () => {
             return;
         }
         if (input === "r") {
-            clearMetadataCache();
-            setMessage("Data refreshed");
-            setTimeout(() => setMessage(""), 1500);
+            if (refresh()) {
+                setMessage("Data refreshed");
+                setTimeout(() => setMessage(""), 1500);
+            }
             return;
         }
         if (input === "/") {
@@ -404,10 +410,7 @@ const TUIApp = () => {
         return _jsx(LoadingScreen, { progress: 100, message: "Initializing..." });
     }
     if (error) {
-        return (_jsx(ErrorScreen, { error: error, onRetry: () => {
-                setError(null);
-                setLoading(true);
-            } }));
+        return _jsx(ErrorScreen, { error: error, onRetry: refresh });
     }
     if (services.length === 0) {
         return _jsx(EmptyState, {});

package/cli/dist/frontend-frameworks/react.js

@@ -0,0 +1,70 @@
+export const reactFrontendProvider = {
+    id: "react",
+    label: "React + Vite",
+    dependencies: {
+        react: "^19.0.0",
+        "react-dom": "^19.0.0",
+    },
+    devDependencies: {
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        "@vitejs/plugin-react": "^4.3.4",
+    },
+    compilerOptions: {
+        jsx: "react-jsx",
+    },
+    createFiles(name) {
+        return [
+            {
+                filename: "index.html",
+                content: `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${name}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`,
+                description: "Generating HTML template",
+                emoji: "💻",
+            },
+            {
+                filename: "src/main.tsx",
+                content: `import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+`,
+                description: "Generating React entry",
+                emoji: "💻",
+            },
+            {
+                filename: "src/App.tsx",
+                content: `function App() {
+  return (
+    <div style={{ padding: '2rem', fontFamily: 'system-ui' }}>
+      <h1>${name}</h1>
+      <p>Frontend resource created with TDK</p>
+    </div>
+  );
+}
+
+export default App;
+`,
+                description: "Generating React app",
+                emoji: "💻",
+            },
+        ];
+    },
+};
+//# sourceMappingURL=react.js.map

package/cli/dist/frontend-frameworks/registry.js

@@ -0,0 +1,29 @@
+import { TdkError } from "../utils/errors.js";
+import { reactFrontendProvider } from "./react.js";
+import { vueFrontendProvider } from "./vue.js";
+export const DEFAULT_FRONTEND_FRAMEWORK = "react";
+export const FRONTEND_FRAMEWORKS = {
+    react: reactFrontendProvider,
+    vue: vueFrontendProvider,
+};
+export function getFrontendFramework(frameworkId) {
+    const id = (frameworkId ?? DEFAULT_FRONTEND_FRAMEWORK).trim().toLowerCase();
+    const provider = Object.hasOwn(FRONTEND_FRAMEWORKS, id) ? FRONTEND_FRAMEWORKS[id] : undefined;
+    if (!provider) {
+        const supportedIds = Object.keys(FRONTEND_FRAMEWORKS).join(", ");
+        throw new TdkError(`Unknown frontend framework "${frameworkId}". Supported frameworks: ${supportedIds}.`, [`Use one of: ${supportedIds}`, `Omit --framework to use ${DEFAULT_FRONTEND_FRAMEWORK}`]);
+    }
+    return provider;
+}
+export function resolveFrontendFramework(resourceType, frameworkId) {
+    if (resourceType !== "frontend") {
+        if (frameworkId !== undefined) {
+            throw new TdkError("--framework can only be used with --type frontend.", [
+                "Add --type frontend, or drop --framework for this resource type",
+            ]);
+        }
+        return undefined;
+    }
+    return getFrontendFramework(frameworkId);
+}
+//# sourceMappingURL=registry.js.map

package/cli/dist/frontend-frameworks/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/cli/dist/frontend-frameworks/vue.js

@@ -0,0 +1,73 @@
+export const vueFrontendProvider = {
+    id: "vue",
+    label: "Vue + Vite",
+    dependencies: {
+        vue: "^3.5.0",
+    },
+    devDependencies: {
+        "@vitejs/plugin-vue": "^5.2.4",
+    },
+    compilerOptions: {},
+    createFiles(name) {
+        return [
+            {
+                filename: "index.html",
+                content: `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${name}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
+`,
+                description: "Generating HTML template",
+                emoji: "💻",
+            },
+            {
+                filename: "src/main.ts",
+                content: `import { createApp } from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#app');
+`,
+                description: "Generating Vue entry",
+                emoji: "💻",
+            },
+            {
+                filename: "src/App.vue",
+                content: `<script setup lang="ts">
+const message = 'Frontend resource created with TDK';
+</script>
+
+<template>
+  <main style="padding: 2rem; font-family: system-ui">
+    <h1>${name}</h1>
+    <p>{{ message }}</p>
+  </main>
+</template>
+`,
+                description: "Generating Vue app",
+                emoji: "💻",
+            },
+            {
+                filename: "src/vite-env.d.ts",
+                content: `/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { Component } from 'vue';
+  const component: Component;
+  export default component;
+}
+`,
+                description: "Generating Vue module types",
+                emoji: "⚙️",
+            },
+        ];
+    },
+};
+//# sourceMappingURL=vue.js.map