@tdk-landscape/tdk-cli-core 1.3.117 → 1.3.119

package/README.md

@@ -142,3 +142,8 @@ Contributions are welcome. Start with [CONTRIBUTING.md](CONTRIBUTING.md) and the
 TDK is MIT-licensed; see [LICENSE](LICENSE). The [license boundary](GOVERNANCE.md#license-boundary-and-donation-scope) says which code is MIT and which is downloaded with a key.
 
 Project governance: [GOVERNANCE.md](GOVERNANCE.md), [MAINTAINERS.md](MAINTAINERS.md), [ADOPTERS.md](ADOPTERS.md).
+
+Use `tdk ui` to inspect stacks and resources. Arrow keys or `j`/`k` move the
+selection; `g`/`G` or Home/End jump to the first/last item, and PageUp/PageDown
+move one visible page. `/` searches; navigation letters remain search text
+while searching. The selected row stays visible when the terminal is resized.

package/cli/dist/commands/config.js

@@ -8,12 +8,14 @@ import { generateMasterConfigs, readProjectConfig, TemplateEngine, verifyMasterC
 import { isMasterConfigFileName } from "../types/index.js";
 import { assertValid } from "../utils/command-helpers.js";
 import { MASTER_CONFIG_FILES } from "../utils/constants.js";
+import { checkPrismaConsistency } from "../utils/doctor-wiring.js";
 import { errorFactories, requireProjectRoot, runCommand } from "../utils/errors.js";
 import { writeJsonFile } from "../utils/file-helpers.js";
 import { createMachineEnvelope, writeMachineError } from "../utils/machine-output.js";
 import { findProjectRoot } from "../utils/paths.js";
 import { SERVICE_MANIFEST_SCHEMA_VERSION, validateServiceManifest, } from "../utils/service-manifest.js";
 import { discoverServiceManifestPaths } from "../utils/services.js";
+import { evaluateSharedPlatformPostgres } from "../utils/shared-platform-postgres.js";
 import { validateOptionalInfraService } from "../utils/validation.js";
 /**
  * Serialize ProjectConfig to JSON-safe value.
@@ -182,14 +184,23 @@ export const configCommand = new Command("config")
         if (!projectRoot)
             throw errorFactories.notInProject();
         const result = verifyMasterConfigs(projectRoot);
+        // Same predicate as tdk doctor's Shared platform Postgres check.
+        const sharedPostgres = evaluateSharedPlatformPostgres(projectRoot);
+        const prismaConsistency = checkPrismaConsistency(projectRoot);
+        const sharedPostgresErrors = sharedPostgres.unknownDependsOnNames.map(({ resource, name }) => `dependsOn "${name}" on ${resource} is not a known service or stack (shared platform Postgres names are postgres and database-management)`);
         if (options.json) {
             console.log(JSON.stringify(createMachineEnvelope({
-                valid: result.valid,
-                errors: result.errors,
+                valid: result.valid && sharedPostgresErrors.length === 0 && prismaConsistency.didPass,
+                errors: [
+                    ...result.errors,
+                    ...sharedPostgresErrors,
+                    ...(prismaConsistency.didPass ? [] : [prismaConsistency.message]),
+                ],
                 warnings: result.warnings,
                 diffs: result.diffs,
+                sharedPlatformPostgres: sharedPostgres,
             })));
-            if (!result.valid)
+            if (!result.valid || sharedPostgresErrors.length > 0 || !prismaConsistency.didPass)
                 process.exit(1);
             return;
         }
@@ -197,7 +208,32 @@ export const configCommand = new Command("config")
         for (const warning of result.warnings) {
             console.warn(chalk.yellow(`⚠️  ${warning}`));
         }
-        if (result.valid) {
+        for (const error of sharedPostgresErrors) {
+            console.log(chalk.red(`❌ ${error}`));
+        }
+        if (!prismaConsistency.didPass)
+            console.log(chalk.red(`❌ ${prismaConsistency.message}`));
+        if (sharedPostgres.willStart) {
+            // Project resource set (discoverResourcesFromRoot), not a tdk up --only filter.
+            // Feature-on alone is not new behavior — print gray so default projects are not noisy.
+            // dependsOn is the reason Postgres starts when the feature is off — green.
+            if (sharedPostgres.reason === "feature" && sharedPostgres.dependsOnUsers.length === 0) {
+                const source = sharedPostgres.featureOnFromTiltfile || sharedPostgres.featureOnFromSpecMaster
+                    ? " (generated Tiltfile/spec.master)"
+                    : "";
+                console.log(chalk.gray(`ℹ️  Postgres will start because database-management is enabled${source} (project-wide; not a tdk up selection)`));
+            }
+            else if (sharedPostgres.reason === "feature") {
+                console.log(chalk.yellow(`ℹ️  Postgres will start because database-management is enabled and resource(s) ${sharedPostgres.dependsOnUsers.join(", ")} depend on postgres/database-management (project resource set; tdk up may select a subset)`));
+            }
+            else {
+                console.log(chalk.green(`ℹ️  Postgres will start because resource(s) ${sharedPostgres.dependsOnUsers.join(", ")} depend on postgres/database-management (project resource set; tdk up may select a subset)`));
+            }
+        }
+        else if (sharedPostgres.focusWouldEnableDatabaseManagement) {
+            console.log(chalk.yellow("ℹ️  Postgres will not start from project.json/generated Tiltfile, but default focus/CORE_INFRA expansion would enable database-management on a typical tdk up"));
+        }
+        if (result.valid && sharedPostgresErrors.length === 0 && prismaConsistency.didPass) {
             console.log(chalk.green("✅ All files are in sync!"));
             return;
         }
@@ -208,7 +244,9 @@ export const configCommand = new Command("config")
             }
             for (const { diff } of result.diffs)
                 console.log(chalk.gray(`\n${diff}`));
-            console.log(chalk.gray("\nRun `tdk config regenerate` to fix."));
+            if (!result.valid) {
+                console.log(chalk.gray("\nRun `tdk config regenerate` to fix."));
+            }
             process.exit(1);
         }
     };

package/cli/dist/commands/doctor.js

@@ -9,7 +9,7 @@ import { MASTER_CONFIG_FILES, REQUIRED_PACKAGE_SCRIPTS } from "../utils/constant
 import { isPathDiscovered, readDiscoveryPaths } from "../utils/discovery-paths.js";
 import { collectDoctorChecks, createDoctorReport, getDoctorExitCode, } from "../utils/doctor-report.js";
 import { checkHealthRoutes, checkIngressPorts, checkPrivateNpmRegistry, checkTiltResourceHealth, projectConfigEnablesVerdaccio, summarizeServiceProbes, } from "../utils/doctor-runtime.js";
-import { checkDockerNetworkCapacity, checkDuplicateResourceNames, checkDuplicateResourcePorts, checkFrontendBackendUrls, checkMigrationsInApi, checkNatsBroker, checkResourcePackageJson, checkServiceUrlPorts, checkTiltInstances, } from "../utils/doctor-wiring.js";
+import { checkDockerNetworkCapacity, checkDuplicateResourceNames, checkDuplicateResourcePorts, checkFrontendBackendUrls, checkMigrationsInApi, checkNatsBroker, checkPrismaConsistency, checkResourcePackageJson, checkServiceUrlPorts, checkSharedPlatformPostgres, checkTiltInstances, } from "../utils/doctor-wiring.js";
 import { validateEnvFile } from "../utils/env-validator.js";
 import { execAsync, isExecTimeout } from "../utils/exec-async.js";
 import { formatCount } from "../utils/formatting.js";
@@ -1143,6 +1143,9 @@ export const doctorCommand = new Command("doctor")
         () => checkServiceUrlPorts(),
         () => checkFrontendBackendUrls(),
         () => checkNatsBroker(),
+        () => checkPrismaConsistency(),
+        // Shared platform Postgres: will-start report + unknown dependsOn names stay errors.
+        () => checkSharedPlatformPostgres(),
         () => checkMigrationsInApi(),
         () => checkTiltInstances(),
         checkEnvironmentVariables,

package/cli/dist/commands/resource.js

@@ -141,7 +141,7 @@ function requireGeneratedViteConfig(configPath) {
         "Run tdk up <stack> once, or point this script at your own Vite config to build on the host.";
     return `bun -e 'if(!require("fs").existsSync(${JSON.stringify(configPath)})){console.error(${JSON.stringify(message)});process.exit(1)}'`;
 }
-export function createPackageJson(name, type, frameworkId) {
+export function createPackageJson(name, type, frameworkId, prismaEnabled = false) {
     const isFrontend = type === "frontend";
     const framework = resolveFrontendFramework(type, frameworkId);
     const backendFramework = resolveBackendFramework(type, frameworkId);
@@ -171,6 +171,14 @@ export function createPackageJson(name, type, frameworkId) {
         dependencies: {
             ...(isFrontend ? {} : (backendFramework?.dependencies ?? { hono: "^4.0.0" })),
             ...(framework?.dependencies ?? {}),
+            ...(prismaEnabled
+                ? {
+                    prisma: "^7.5.0",
+                    "@prisma/client": "^7.5.0",
+                    "@prisma/adapter-pg": "^7.5.0",
+                    pg: "^8.13.0",
+                }
+                : {}),
         },
         devDependencies: {
             "@types/bun": "^1.4.2",
@@ -186,6 +194,22 @@ export function createPackageJson(name, type, frameworkId) {
         },
     };
 }
+export const PRISMA_SCHEMA_TEMPLATE = `generator client {
+  provider = "prisma-client"
+  output   = "../generated/prisma"
+}
+
+datasource db {
+  provider = "postgresql"
+}
+`;
+export const PRISMA_CONFIG_TEMPLATE = `export default {
+  schema: "prisma/schema.prisma",
+  datasource: {
+    url: process.env.DATABASE_URL,
+  },
+};
+`;
 export function createResourceTsconfig(resourceType, frameworkId) {
     const framework = resolveFrontendFramework(resourceType, frameworkId);
     const backendFramework = resolveBackendFramework(resourceType, frameworkId);
@@ -375,6 +399,7 @@ export const resourceCommand = new Command("resource")
     .option("--restart <policy>", "Compose restart policy: no, on-failure, unless-stopped, always (bring-your-own only; use no for one-shot jobs)")
     .option("--image <name>", "Docker image name instead of building from Dockerfile (for bring-your-own)")
     .option("--port <port>", "Port number (default: next free in 4000-5999)")
+    .option("--feature <feature...>", "Enable a resource feature (for example: prisma)")
     .action(async (name, options) => {
     if (options.frameworks) {
         for (const f of listFrontendFrameworks()) {
@@ -681,8 +706,13 @@ This file contains the resource configuration for TDK.
             }
         }
         // Prepare file generation tasks
-        const serviceJson = createServiceJson(resourceName, resourceType, stackName, assignedPort, dddEnabled ? ["ddd"] : [], scaffoldFrameworkId, options.language === undefined ? undefined : backendLanguage?.id);
-        const packageJson = createPackageJson(resourceName, resourceType, scaffoldFrameworkId);
+        const requestedFeatures = Array.isArray(options.feature) ? options.feature : [];
+        const prismaEnabled = requestedFeatures.includes("prisma");
+        const serviceJson = createServiceJson(resourceName, resourceType, stackName, assignedPort, [...(dddEnabled ? ["ddd"] : []), ...requestedFeatures], scaffoldFrameworkId, options.language === undefined ? undefined : backendLanguage?.id);
+        const packageJson = createPackageJson(resourceName, resourceType, scaffoldFrameworkId, prismaEnabled);
+        if (prismaEnabled && resourceType === "backend") {
+            serviceJson.dependsOn = [`${resourceName}-migrator`];
+        }
         const tasks = [
             {
                 type: "json",
@@ -776,6 +806,76 @@ This file contains the resource configuration for TDK.
         // Execute all file writes with progress
         console.log(chalk.blue("💻 Generating source files..."));
         writeFilesWithProgress(fullPath, tasks);
+        if (prismaEnabled && resourceType === "backend") {
+            const migratorName = `${resourceName}-migrator`;
+            const migratorPath = resolve(projectRoot, `services/${stackName}/${migratorName}`);
+            mkdirSync(migratorPath, { recursive: true });
+            const migratorConfig = {
+                ...JSON.parse(JSON.stringify(BASE_TEMPLATE)),
+                $schema: SERVICE_MANIFEST_SCHEMA_URL,
+                schemaVersion: SERVICE_MANIFEST_SCHEMA_VERSION,
+                appName: migratorName,
+                appType: "migrator",
+                name: migratorName,
+                type: "migrator",
+                stack: stackName,
+                port: 0,
+                featuresEnabled: ["prisma"],
+            };
+            migratorConfig.dependsOn = ["postgres"];
+            migratorConfig.port = 0;
+            const migratorPackage = createPackageJson(migratorName, "migrator", undefined, true);
+            migratorPackage.scripts = {
+                ...migratorPackage.scripts,
+                start: "prisma migrate deploy",
+            };
+            writeFilesWithProgress(migratorPath, [
+                {
+                    type: "json",
+                    filename: "service.json",
+                    content: migratorConfig,
+                    description: "Generating Prisma migrator manifest",
+                    emoji: "🗃️",
+                },
+                {
+                    type: "json",
+                    filename: "package.json",
+                    content: migratorPackage,
+                    description: "Generating Prisma migrator package",
+                    emoji: "📦",
+                },
+                {
+                    type: "text",
+                    filename: "prisma/schema.prisma",
+                    content: PRISMA_SCHEMA_TEMPLATE,
+                    description: "Generating Prisma schema",
+                    emoji: "🧬",
+                },
+                {
+                    type: "text",
+                    filename: "prisma.config.ts",
+                    content: PRISMA_CONFIG_TEMPLATE,
+                    description: "Generating Prisma config",
+                    emoji: "⚙️",
+                },
+            ]);
+            writeFilesWithProgress(fullPath, [
+                {
+                    type: "text",
+                    filename: "prisma/schema.prisma",
+                    content: PRISMA_SCHEMA_TEMPLATE,
+                    description: "Generating Prisma schema",
+                    emoji: "🧬",
+                },
+                {
+                    type: "text",
+                    filename: "prisma.config.ts",
+                    content: PRISMA_CONFIG_TEMPLATE,
+                    description: "Generating Prisma config",
+                    emoji: "⚙️",
+                },
+            ]);
+        }
         console.log(chalk.green("\n✅ Resource created successfully!"));
         console.log(chalk.gray(`\nLocation: ${fullPath}`));
         const discoveryPaths = readDiscoveryPaths(projectRoot);

package/cli/dist/commands/ui.js

@@ -2,31 +2,48 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { Command } from "commander";
 import { Box, render, Text, useApp, useInput, useStdin, useStdout } from "ink";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { DetailPanel, FileTree, ResourceSelectInput, ResourceTable, TabBar, } from "../components/index.js";
+import { DetailPanel, FileTree, ResourceSelectInput, ResourceTable, TabBar, TUIHeader, } from "../components/index.js";
+import { TABS } from "../components/TabBar.js";
+import { createTUITheme, TUIThemeContext, useTUITheme } from "../components/ui-theme.js";
 import { errorFactories, requireProjectRoot } from "../utils/errors.js";
-import { findProjectRoot } from "../utils/paths.js";
+import { findProjectRoot, getPackageVersion } from "../utils/paths.js";
 import { describeSearch } from "../utils/search-status.js";
 import { clearMetadataCache, discoverResources, discoverStacks, getResourceMetadata, getStackMetadata, } from "../utils/services.js";
 import { createStatusMessageController } from "../utils/status-message.js";
 import { getListRowFromMouseY, getTerminalRuleWidth } from "../utils/terminal-layout.js";
 import { isTiltAvailable } from "../utils/tilt.js";
 // biome-ignore lint/correctness/noUnusedFunctionParameters: reserved callback prop kept in the component API
-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: " 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 Quit \u2502 Esc Back" })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: "Press any key to close..." }) })] }));
+const HelpPanel = ({ onClose }) => {
+    const theme = useTUITheme();
+    return (_jsxs(Box, { ...(theme.ascii ? {} : { borderStyle: "single", borderColor: theme.accent }), paddingX: 2, paddingY: 1, flexDirection: "column", width: 60, children: [_jsx(Text, { bold: true, color: theme.accent, children: "Keyboard Shortcuts" }), _jsxs(Box, { marginY: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, underline: true, color: theme.foreground, children: "Navigation" }), _jsx(Text, { color: theme.foreground, children: theme.ascii
+                            ? " [UP/DOWN] or j/k Navigate list items"
+                            : " \u2191/\u2193 or j/k Navigate list items" }), _jsx(Text, { color: theme.foreground, children: " g/G or Home/End First/last item" }), _jsx(Text, { color: theme.foreground, children: " PgUp/PgDn Move one page" }), _jsx(Text, { color: theme.foreground, children: " Enter Select item / Open detail" }), _jsx(Text, { color: theme.foreground, children: " Tab Next tab" }), _jsxs(Text, { color: theme.foreground, children: [" ", TABS[0].shortcut, "-", TABS[TABS.length - 1].shortcut, " Direct tab access"] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { bold: true, underline: true, color: theme.foreground, children: "Actions" }) }), _jsx(Text, { color: theme.foreground, children: " m Toggle mouse support" }), _jsx(Text, { color: theme.foreground, children: " t Toggle tooltips" }), _jsx(Text, { color: theme.foreground, children: " e Toggle enabled/disabled services" }), _jsx(Text, { color: theme.foreground, children: " r Refresh data" }), _jsx(Text, { color: theme.foreground, children: " / Search/filter" }), _jsx(Text, { color: theme.foreground, children: " ? Show this help" }), _jsx(Text, { color: theme.foreground, children: theme.ascii ? " q Quit | Esc Back" : " q Quit \u2502 Esc Back" })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, dimColor: theme.dimMuted, children: "Press any key to close..." }) })] }));
+};
 const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+const ASCII_SPINNER_FRAMES = ["-", "/", "|", "\\"];
 export const LoadingScreen = ({ message = "Discovering resources...", animated = true, }) => {
+    const theme = useTUITheme();
+    const spinnerFrames = theme.ascii ? ASCII_SPINNER_FRAMES : SPINNER_FRAMES;
     const [frame, setFrame] = useState(0);
     useEffect(() => {
         if (!animated)
             return;
-        const timer = setInterval(() => setFrame((f) => (f + 1) % SPINNER_FRAMES.length), 80);
+        const timer = setInterval(() => setFrame((f) => (f + 1) % spinnerFrames.length), 80);
         return () => clearInterval(timer);
-    }, [animated]);
-    return (_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: [animated && _jsxs(Text, { color: "cyan", children: [SPINNER_FRAMES[frame], " "] }), message] })] }));
+    }, [animated, spinnerFrames.length]);
+    return (_jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsxs(Text, { bold: true, color: theme.accent, children: [theme.bannerStart, " TDK NEON EDITION ", theme.bannerEnd] }), _jsx(Box, { marginY: 1 }), _jsxs(Text, { color: theme.foreground, children: [animated && _jsxs(Text, { color: theme.accent, children: [spinnerFrames[frame], " "] }), message] })] }));
 };
 // 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: "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 = ({ message }) => (_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 project" }), _jsx(Text, { children: " 2. Run: tdk resource api --type backend" }), _jsx(Box, { marginY: 1 }), _jsx(Text, { color: "cyan", children: "Press [r] to refresh or [q] to quit" }), message && (_jsx(Box, { paddingX: 1, height: 1, children: _jsxs(Text, { color: "cyan", children: ["\u2593\u2592\u2591 ", message, " \u2591\u2592\u2593"] }) }))] }));
-const TUIApp = ({ animated = true }) => {
+const ErrorScreen = ({ error, onRetry }) => {
+    const theme = useTUITheme();
+    return (_jsxs(Box, { flexDirection: "column", padding: 2, alignItems: "center", children: [_jsx(Text, { bold: true, color: theme.error, children: "Could Not Load Services" }), _jsx(Box, { marginY: 1 }), _jsxs(Text, { color: theme.error, children: [theme.ascii ? "[x]" : "\u2717", " ", error] }), _jsx(Box, { marginY: 1 }), _jsx(Text, { color: theme.muted, children: "Troubleshooting:" }), _jsx(Text, { color: theme.muted, children: " 1. Check that every service.json is valid JSON" }), _jsx(Text, { color: theme.muted, children: " 2. Run tdk from your project (the folder with the Tiltfile)" }), _jsx(Text, { color: theme.muted, children: " 3. Try: tdk status --verbose" }), _jsx(Box, { marginY: 1 }), _jsx(Text, { color: theme.accent, children: "Press [r] to retry or [q] to quit" })] }));
+};
+const EmptyState = ({ message }) => {
+    const theme = useTUITheme();
+    return (_jsxs(Box, { flexDirection: "column", padding: 2, alignItems: "center", children: [_jsx(Text, { bold: true, color: theme.warning, children: "No Services Found" }), _jsx(Box, { marginY: 1 }), _jsxs(Text, { color: theme.muted, children: [theme.ascii ? "[*]" : "\u25c9", " No service.json files found"] }), _jsx(Box, { marginY: 1 }), _jsx(Text, { color: theme.foreground, children: "To get started:" }), _jsx(Text, { color: theme.foreground, children: " 1. Run: tdk project" }), _jsx(Text, { color: theme.foreground, children: " 2. Run: tdk resource api --type backend" }), _jsx(Box, { marginY: 1 }), _jsx(Text, { color: theme.accent, children: "Press [r] to refresh or [q] to quit" }), message && (_jsx(Box, { paddingX: 1, height: 1, children: _jsxs(Text, { color: theme.accent, children: [theme.bannerStart, " ", message, " ", theme.bannerEnd] }) }))] }));
+};
+export const TUIApp = ({ animated = true }) => {
+    const theme = useTUITheme();
     const { exit } = useApp();
     const { stdout } = useStdout();
     const { stdin, setRawMode } = useStdin();
@@ -39,9 +56,17 @@ const TUIApp = ({ animated = true }) => {
     const [searchQuery, setSearchQuery] = useState("");
     const [isSearching, setIsSearching] = useState(false);
     const [terminalWidth, setTerminalWidth] = useState(stdout.columns || 120);
+    const [terminalRows, setTerminalRows] = useState(stdout.rows || 24);
     const [selectedFile, setSelectedFile] = useState(null);
     const [mouseEnabled, setMouseEnabled] = useState(true);
     const [listTop, setListTop] = useState(null);
+    const [listStart, setListStart] = useState(0);
+    // Reserve the header, tab bar, hints and footer; keep the cursor visible.
+    const pageSize = Math.max(1, terminalRows - 14);
+    const handleListLayout = useCallback((top, firstVisible = 0) => {
+        setListTop(top);
+        setListStart(firstVisible);
+    }, []);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const [showTooltips, setShowTooltips] = useState(true);
@@ -161,7 +186,7 @@ const TUIApp = ({ animated = true }) => {
         }
         return [];
     }, [activeTab, filteredStacks, filteredServices, selectedStackData, selectedServiceData]);
-    const items = getItems();
+    const items = useMemo(getItems, [getItems]);
     const selectableListVisible = !loading &&
         !error &&
         !showHelp &&
@@ -244,9 +269,10 @@ const TUIApp = ({ animated = true }) => {
                 const isLeftClick = (btn & 0b11) === 0;
                 if (isLeftClick && !release) {
                     const listRow = selectableListVisible && listTop !== null ? getListRowFromMouseY(y, listTop) : -1;
-                    if (listRow >= 0 && listRow < items.length) {
-                        setHighlightedIndex(listRow);
-                        const item = items[listRow];
+                    const itemIndex = listStart + listRow;
+                    if (listRow >= 0 && listRow < pageSize && itemIndex < items.length) {
+                        setHighlightedIndex(itemIndex);
+                        const item = items[itemIndex];
                         if (item) {
                             handleSelect(item);
                         }
@@ -260,10 +286,20 @@ const TUIApp = ({ animated = true }) => {
             stdin.off("data", handleMouseData);
             stdin.removeAllListeners("data");
         };
-    }, [stdin, items, listTop, selectableListVisible, mouseEnabled, handleSelect]);
+    }, [
+        stdin,
+        items,
+        listTop,
+        listStart,
+        pageSize,
+        selectableListVisible,
+        mouseEnabled,
+        handleSelect,
+    ]);
     const handleResize = useCallback(() => {
         setTerminalWidth(stdout.columns || 120);
-    }, [stdout.columns]);
+        setTerminalRows(stdout.rows || 24);
+    }, [stdout]);
     useEffect(() => {
         stdout.on("resize", handleResize);
         return () => {
@@ -367,7 +403,7 @@ const TUIApp = ({ animated = true }) => {
             return;
         }
         if (key.tab) {
-            const tabs = ["overview", "resources", "events", "files", "config"];
+            const tabs = TABS.map((tab) => tab.id);
             const currentIdx = tabs.indexOf(activeTab);
             const nextIdx = key.shift
                 ? (currentIdx - 1 + tabs.length) % tabs.length
@@ -375,23 +411,26 @@ const TUIApp = ({ animated = true }) => {
             setActiveTab(tabs[nextIdx]);
             return;
         }
-        if (/^[1-5]$/.test(input)) {
-            const tabMap = {
-                "1": "overview",
-                "2": "resources",
-                "3": "events",
-                "4": "files",
-                "5": "config",
-            };
-            setActiveTab(tabMap[input]);
+        const shortcutTab = TABS.find((tab) => tab.shortcut === input);
+        if (shortcutTab) {
+            setActiveTab(shortcutTab.id);
             return;
         }
-        if (key.upArrow) {
+        const plainKey = !key.ctrl && !key.meta;
+        if (items.length > 0 && (key.upArrow || (plainKey && input === "k"))) {
             setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : items.length - 1));
         }
-        if (key.downArrow) {
+        if (items.length > 0 && (key.downArrow || (plainKey && input === "j"))) {
             setHighlightedIndex((prev) => (prev < items.length - 1 ? prev + 1 : 0));
         }
+        if (key.home || (plainKey && input === "g"))
+            setHighlightedIndex(0);
+        if (key.end || (plainKey && input === "G"))
+            setHighlightedIndex(Math.max(0, items.length - 1));
+        if (key.pageUp)
+            setHighlightedIndex((prev) => Math.max(0, prev - pageSize));
+        if (key.pageDown)
+            setHighlightedIndex((prev) => Math.min(Math.max(0, items.length - 1), prev + pageSize));
         if (key.return || input === " ") {
             const currentItem = items[highlightedIndex];
             if (currentItem) {
@@ -433,25 +472,48 @@ const TUIApp = ({ animated = true }) => {
     if (error) {
         return _jsx(ErrorScreen, { error: error, onRetry: refresh });
     }
+    const header = (_jsxs(_Fragment, { children: [_jsx(TUIHeader, { projectRoot: projectRoot, resourceCount: services.length, terminalWidth: terminalWidth, version: getPackageVersion() }), _jsx(Box, { paddingX: 1, children: _jsx(Text, { color: theme.muted, children: (theme.ascii ? "-" : "\u2500").repeat(getTerminalRuleWidth(terminalWidth)) }) })] }));
     if (services.length === 0) {
-        return _jsx(EmptyState, { message: message });
+        return (_jsxs(Box, { flexDirection: "column", height: stdout.rows || 24, children: [header, _jsx(EmptyState, { message: message })] }));
     }
-    return (_jsxs(Box, { flexDirection: "column", height: stdout.rows || 24, children: [_jsx(Box, { paddingX: 1, paddingY: 0, children: _jsxs(Text, { children: [_jsx(Text, { color: "cyan", bold: true, children: "\u2593\u2592\u2591 TDK NEON EDITION \u2591\u2592\u2593" }), _jsx(Text, { color: "gray", children: " \u2502 " }), _jsx(Text, { color: "white", children: projectRoot }), _jsx(Text, { color: "gray", children: " \u2502 " }), _jsxs(Text, { color: "green", children: [services.length, " services ready"] })] }) }), _jsx(Box, { paddingX: 1, children: _jsx(Text, { color: "gray", children: "─".repeat(getTerminalRuleWidth(terminalWidth)) }) }), isSearching && (_jsxs(Box, { paddingX: 1, height: 1, children: [_jsxs(Text, { color: "yellow", children: ["Search: ", searchQuery, "_"] }), searchStatus && _jsx(Text, { color: "gray", dimColor: true, children: `   ${searchStatus.summary}` })] })), searchStatus?.emptyMessage && (_jsx(Box, { paddingX: 1, height: 1, children: _jsx(Text, { color: "gray", children: searchStatus.emptyMessage }) })), !isSearching && message && (_jsx(Box, { paddingX: 1, height: 1, children: _jsxs(Text, { color: "cyan", children: ["\u2593\u2592\u2591 ", message, " \u2591\u2592\u2593"] }) })), !isSearching && !message && showTooltips && !showHelp && (_jsx(Box, { paddingX: 1, height: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: activeTab === "overview" && selectedStack
-                        ? `Stack "${selectedStack}" selected. [Enter] view │ [Esc] back │ [e] ${showEnabledOnly ? "show all" : "enabled only"} │ [?] help`
-                        : activeTab === "overview" && !selectedStack
-                            ? `[↑/↓] Navigate │ [Enter] Select │ [e] ${showEnabledOnly ? "show all" : "enabled only"} │ [?] help`
-                            : activeTab === "resources"
-                                ? `[Tab] Tabs │ [r] Refresh │ [/] Search │ [e] ${showEnabledOnly ? "show all" : "enabled only"} │ [?] help`
-                                : activeTab === "events"
-                                    ? `Event timeline │ [Tab] Switch tabs │ [e] ${showEnabledOnly ? "show all" : "enabled only"} │ [?] help`
-                                    : activeTab === "files" && selectedService
-                                        ? `Service "${selectedService}" │ [Space] Expand │ [Esc] Back │ [e] ${showEnabledOnly ? "show all" : "enabled only"} │ [?] help`
-                                        : activeTab === "files"
-                                            ? `Select service to view files │ [e] ${showEnabledOnly ? "show all" : "enabled only"} │ [?] help`
-                                            : activeTab === "config"
-                                                ? `View configurations │ [e] ${showEnabledOnly ? "show all" : "enabled only"} │ [?] help`
-                                                : `[Tab] Next │ [1-5] Tabs │ [e] ${showEnabledOnly ? "show all" : "enabled only"} │ [?] help │ [q] Quit` }) })), showHelp && (_jsx(Box, { paddingX: 1, flexGrow: 1, children: _jsx(HelpPanel, { onClose: () => setShowHelp(false) }) })), !showHelp && (_jsxs(_Fragment, { children: [_jsx(Box, { marginTop: 1, children: _jsx(TabBar, { activeTab: activeTab, onTabChange: setActiveTab, terminalWidth: terminalWidth }) }), _jsxs(Box, { flexDirection: "row", paddingX: 1, flexGrow: 1, children: [_jsxs(Box, { flexDirection: "column", flexGrow: 1, width: mainPanelWidth, children: [activeTab === "overview" && (_jsxs(_Fragment, { children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "gray", children: "\u250C\u2500 Stacks \u2500" }) }), _jsx(Box, { marginTop: 1, flexGrow: 1, children: _jsx(ResourceSelectInput, { items: items, onSelect: handleSelect, highlightedIndex: highlightedIndex, width: mainPanelWidth, onLayout: setListTop }) })] })), activeTab === "resources" && (_jsxs(_Fragment, { children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "gray", children: "\u250C\u2500 Resources \u2500" }) }), selectedStackData ? (_jsxs(_Fragment, { children: [_jsxs(Text, { color: "gray", children: ["Stack: ", selectedStackData.stack.name] }), _jsx(Box, { marginTop: 1, children: _jsx(ResourceTable, { resources: selectedStackData.metadata.resources, maxWidth: terminalWidth - (showSidebar ? 50 : 10) }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: "Select a stack to view resources" }), _jsx(Box, { marginTop: 1, children: _jsx(ResourceSelectInput, { items: items, onSelect: handleSelect, highlightedIndex: highlightedIndex, width: mainPanelWidth, onLayout: setListTop }) })] }))] })), activeTab === "events" && (_jsxs(_Fragment, { children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "gray", children: "\u250C\u2500 Events \u2500" }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: "Events tab not yet implemented" }) })] })), activeTab === "files" && (_jsxs(_Fragment, { children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "gray", children: "\u250C\u2500 Autogenerated Files \u2500" }) }), selectedServiceData ? (_jsxs(_Fragment, { children: [_jsxs(Text, { color: "gray", children: ["Service: ", selectedServiceData.service.name] }), _jsx(Box, { marginTop: 1, children: _jsx(FileTree, { nodes: fileTreeNodes, selectedPath: selectedFile || undefined }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: "Select a service to view files" }), _jsx(Box, { marginTop: 1, children: _jsx(ResourceSelectInput, { items: items, onSelect: handleSelect, highlightedIndex: highlightedIndex, width: mainPanelWidth, onLayout: setListTop }) })] }))] })), activeTab === "config" && (_jsxs(_Fragment, { children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "gray", children: "\u250C\u2500 Configuration \u2500" }) }), selectedServiceData ? (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: "cyan", children: selectedServiceData.service.configPath }), _jsx(Box, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: _jsx(Text, { color: "gray", wrap: "wrap", children: JSON.stringify(selectedServiceData.service.config, null, 2).slice(0, 1000) }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: "Select a service to view configuration" }), _jsx(Box, { marginTop: 1, children: _jsx(ResourceSelectInput, { items: items, onSelect: handleSelect, highlightedIndex: highlightedIndex, width: mainPanelWidth, onLayout: setListTop }) })] }))] }))] }), showSidebar && (_jsx(Box, { marginLeft: 2, children: _jsx(DetailPanel, { stack: selectedStackData?.stack || null, service: selectedServiceData?.service || null, stackMetadata: selectedStackData?.metadata || null, visible: !!selectedStack || !!selectedService }) }))] }), _jsxs(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, height: 3, flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { color: "cyan", bold: true, children: ["\u2593\u2592\u2591 ", activeTab] }), _jsxs(Text, { color: "green", children: ["\u25CF ", services.filter((s) => s.stack).length, " in stack"] }), _jsxs(Text, { color: "yellow", children: ["\u25CB ", services.filter((s) => !s.stack).length, " no stack"] })] }), _jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { color: "gray", children: ["Stacks: ", stacks.length] }), _jsxs(Text, { color: "gray", children: ["Services: ", services.length] }), _jsxs(Text, { color: "gray", children: ["\uD83D\uDDB1\uFE0F ", mouseEnabled ? "ON" : "OFF", " \u2502 \u2139\uFE0F ", showTooltips ? "ON" : "OFF", " \u2502", _jsx(Text, { color: showEnabledOnly ? "green" : "yellow", children: showEnabledOnly ? "✓ enabled" : "✓ all" }), " │ ", "[?] Help \u2502 [q] Quit"] })] })] })] }))] }));
+    return (_jsxs(Box, { flexDirection: "column", height: stdout.rows || 24, children: [header, isSearching && (_jsxs(Box, { paddingX: 1, height: 1, children: [_jsxs(Text, { color: theme.warning, children: ["Search: ", searchQuery, "_"] }), searchStatus && (_jsx(Text, { color: theme.muted, dimColor: theme.dimMuted, children: `   ${searchStatus.summary}` }))] })), searchStatus?.emptyMessage && (_jsx(Box, { paddingX: 1, height: 1, children: _jsx(Text, { color: theme.muted, children: searchStatus.emptyMessage }) })), !isSearching && message && (_jsx(Box, { paddingX: 1, height: 1, children: _jsxs(Text, { color: theme.accent, children: [theme.bannerStart, " ", message, " ", theme.bannerEnd] }) })), !isSearching && !message && showTooltips && !showHelp && (_jsx(Box, { paddingX: 1, height: 1, children: _jsx(Text, { color: theme.muted, dimColor: theme.dimMuted, children: createHelpHint(activeTab, selectedStack, selectedService, showEnabledOnly, theme.ascii) }) })), showHelp && (_jsx(Box, { paddingX: 1, flexGrow: 1, children: _jsx(HelpPanel, { onClose: () => setShowHelp(false) }) })), !showHelp && (_jsxs(_Fragment, { children: [_jsx(Box, { marginTop: 1, children: _jsx(TabBar, { activeTab: activeTab, onTabChange: setActiveTab, terminalWidth: terminalWidth }) }), _jsxs(Box, { flexDirection: "row", paddingX: 1, flexGrow: 1, children: [_jsxs(Box, { flexDirection: "column", flexGrow: 1, width: mainPanelWidth, children: [activeTab === "overview" && (_jsxs(_Fragment, { children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: theme.muted, children: theme.ascii ? "[ Stacks ]" : "┌─ Stacks ─" }) }), _jsx(Box, { marginTop: 1, flexGrow: 1, children: _jsx(ResourceSelectInput, { items: items, onSelect: handleSelect, highlightedIndex: highlightedIndex, isActive: !isSearching, maxVisibleItems: pageSize, width: mainPanelWidth, onLayout: handleListLayout }) })] })), activeTab === "resources" && (_jsxs(_Fragment, { children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: theme.muted, children: theme.ascii ? "[ Resources ]" : "┌─ Resources ─" }) }), selectedStackData ? (_jsxs(_Fragment, { children: [_jsxs(Text, { color: theme.muted, children: ["Stack: ", selectedStackData.stack.name] }), _jsx(Box, { marginTop: 1, children: _jsx(ResourceTable, { resources: selectedStackData.metadata.resources, maxWidth: terminalWidth - (showSidebar ? 50 : 10) }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.muted, children: "Select a stack to view resources" }), _jsx(Box, { marginTop: 1, children: _jsx(ResourceSelectInput, { items: items, onSelect: handleSelect, highlightedIndex: highlightedIndex, isActive: !isSearching, maxVisibleItems: pageSize, width: mainPanelWidth, onLayout: handleListLayout }) })] }))] })), activeTab === "files" && (_jsxs(_Fragment, { children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: theme.muted, children: theme.ascii ? "[ Autogenerated Files ]" : "┌─ Autogenerated Files ─" }) }), selectedServiceData ? (_jsxs(_Fragment, { children: [_jsxs(Text, { color: theme.muted, children: ["Service: ", selectedServiceData.service.name] }), _jsx(Box, { marginTop: 1, children: _jsx(FileTree, { nodes: fileTreeNodes, selectedPath: selectedFile || undefined }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.muted, children: "Select a service to view files" }), _jsx(Box, { marginTop: 1, children: _jsx(ResourceSelectInput, { items: items, onSelect: handleSelect, highlightedIndex: highlightedIndex, isActive: !isSearching, maxVisibleItems: pageSize, width: mainPanelWidth, onLayout: handleListLayout }) })] }))] })), activeTab === "config" && (_jsxs(_Fragment, { children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: theme.muted, children: theme.ascii ? "[ Configuration ]" : "┌─ Configuration ─" }) }), selectedServiceData ? (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: theme.accent, children: selectedServiceData.service.configPath }), _jsx(Box, { marginTop: 1, ...(theme.ascii
+                                                            ? {}
+                                                            : { borderStyle: "single", borderColor: theme.border }), paddingX: 1, children: _jsx(Text, { color: theme.muted, wrap: "wrap", children: JSON.stringify(selectedServiceData.service.config, null, 2).slice(0, 1000) }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.muted, children: "Select a service to view configuration" }), _jsx(Box, { marginTop: 1, children: _jsx(ResourceSelectInput, { items: items, onSelect: handleSelect, highlightedIndex: highlightedIndex, isActive: !isSearching, maxVisibleItems: pageSize, width: mainPanelWidth, onLayout: handleListLayout }) })] }))] }))] }), showSidebar && (_jsx(Box, { marginLeft: 2, children: _jsx(DetailPanel, { stack: selectedStackData?.stack || null, service: selectedServiceData?.service || null, stackMetadata: selectedStackData?.metadata || null, visible: !!selectedStack || !!selectedService }) }))] }), _jsxs(Box, { ...(theme.ascii ? {} : { borderStyle: "single", borderColor: theme.border }), paddingX: 1, height: 3, flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { color: theme.accent, bold: true, children: [theme.bannerStart, " ", activeTab] }), _jsxs(Text, { color: theme.success, children: [theme.ascii ? "[+]" : "\u25cf", " ", services.filter((s) => s.stack).length, " in stack"] }), _jsxs(Text, { color: theme.warning, children: [theme.ascii ? "-" : "\u25cb", " ", services.filter((s) => !s.stack).length, " no stack"] })] }), _jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { color: theme.muted, children: ["Stacks: ", stacks.length] }), _jsxs(Text, { color: theme.muted, children: ["Services: ", services.length] }), _jsxs(Text, { color: theme.muted, children: [theme.ascii ? "Mouse" : "🖱️", " ", mouseEnabled ? "ON" : "OFF", theme.ascii ? " | " : " \u2502 ", theme.ascii ? "Info" : "ℹ️", " ", showTooltips ? "ON" : "OFF", theme.ascii ? " | " : " \u2502 ", _jsx(Text, { color: showEnabledOnly ? theme.success : theme.warning, children: showEnabledOnly
+                                                    ? theme.ascii
+                                                        ? "[+] enabled"
+                                                        : "\u2713 enabled"
+                                                    : theme.ascii
+                                                        ? "[+] all"
+                                                        : "\u2713 all" }), theme.ascii ? " | " : " \u2502 ", "[?] Help", theme.ascii ? " | " : " \u2502 ", "[q] Quit"] })] })] })] }))] }));
 };
+/** Compose footer guidance for the current tab and terminal character set. */
+function createHelpHint(activeTab, selectedStack, selectedService, showEnabledOnly, ascii) {
+    const separator = ascii ? " | " : " \u2502 ";
+    const enabledHint = `[e] ${showEnabledOnly ? "show all" : "enabled only"}`;
+    const common = [enabledHint, "[?] help"];
+    const tabRange = `${TABS[0].shortcut}-${TABS[TABS.length - 1].shortcut}`;
+    if (activeTab === "overview") {
+        const introduction = selectedStack
+            ? `Stack "${selectedStack}" selected. [Enter] view`
+            : `${ascii ? "[UP/DOWN]" : "[\u2191/\u2193]"} Navigate`;
+        const controls = selectedStack ? ["[Esc] back", ...common] : ["[Enter] Select", ...common];
+        return [introduction, ...controls].join(separator);
+    }
+    if (activeTab === "resources") {
+        return ["[Tab] Tabs", "[r] Refresh", "[/] Search", ...common].join(separator);
+    }
+    if (activeTab === "files" && selectedService) {
+        return [`Service "${selectedService}"`, "[Esc] Back", ...common].join(separator);
+    }
+    if (activeTab === "files") {
+        return ["Select service to view files", ...common].join(separator);
+    }
+    if (activeTab === "config") {
+        return ["View configurations", ...common].join(separator);
+    }
+    return ["[Tab] Next", `[${tabRange}] Tabs`, ...common, "[q] Quit"].join(separator);
+}
+const TUIRoot = ({ animated, highContrast, }) => (_jsx(TUIThemeContext.Provider, { value: createTUITheme(Boolean(highContrast)), children: _jsx(TUIApp, { animated: animated }) }));
 export const uiCommand = new Command("ui")
     .description("Interactive TUI for managing stacks and services (Neon Edition)")
     .alias("interactive")
@@ -465,6 +527,8 @@ export const uiCommand = new Command("ui")
     }
     requireProjectRoot();
     // The app has no Static content, so its live layout starts at row 1 in the alternate screen.
-    render(_jsx(TUIApp, { animated: options.animations }), { alternateScreen: true });
+    render(_jsx(TUIRoot, { animated: options.animations, highContrast: options.highContrast }), {
+        alternateScreen: true,
+    });
 });
 //# sourceMappingURL=ui.js.map

package/cli/dist/components/BaseTooltip.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
+import { useTUITheme } from "./ui-theme.js";
 export const BaseTooltip = ({ content, shortcut, visible, maxWidth = 40, wrapText = false, prefix = "", marginTop = 0, }) => {
+    const theme = useTUITheme();
     if (!visible)
         return null;
-    // Wrap text to maxWidth if requested
     const lines = wrapText ? wrapContent(content, maxWidth) : [content];
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "yellow", paddingX: 1, paddingY: 1, backgroundColor: "black", marginTop: marginTop, children: [lines.map((line, i) => (_jsxs(Text, { color: "yellow", children: [prefix, line] }, i))), shortcut && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "gray", children: "Press " }), _jsx(Text, { color: "cyan", bold: true, children: shortcut.startsWith("[") ? shortcut : `[${shortcut}]` }), _jsx(Text, { color: "gray", children: " to use" })] }))] }));
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: theme.ascii ? undefined : "single", borderColor: theme.warning, paddingX: 1, paddingY: 1, backgroundColor: theme.ascii ? undefined : "black", marginTop: marginTop, children: [lines.map((line, i) => (_jsxs(Text, { color: theme.warning, bold: theme.highContrast, children: [prefix, line] }, i))), shortcut && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: theme.muted, children: "Press " }), _jsx(Text, { color: theme.accent, bold: true, children: shortcut.startsWith("[") ? shortcut : `[${shortcut}]` }), _jsx(Text, { color: theme.muted, children: " to use" })] }))] }));
 };
 function wrapContent(content, maxWidth) {
     const words = content.split(" ");

package/cli/dist/components/DetailPanel.js

@@ -1,18 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
 import { formatDate, getStatusColor, getStatusIcon } from "../utils/formatting.js";
+import { getTUIStatusColor, getTUIStatusIcon, useTUITheme } from "./ui-theme.js";
 export const DetailPanel = ({ stack, service, stackMetadata, visible, }) => {
+    const theme = useTUITheme();
     if (!visible) {
         return _jsx(Box, { width: 0 });
     }
     if (service) {
-        return (_jsxs(Box, { width: 40, flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, paddingY: 1, children: [_jsx(Box, { marginBottom: 1, justifyContent: "center", children: _jsxs(Text, { color: "cyan", bold: true, children: ["\u250C\u2500 ", service.name.toUpperCase(), " \u2500\u2510"] }) }), _jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: "gray", children: "Name: " }), _jsx(Text, { color: "white", children: service.name })] }), _jsxs(Box, { children: [_jsx(Text, { color: "gray", children: "Stack: " }), _jsx(Text, { color: "white", children: service.stack || "unknown" })] }), _jsxs(Box, { children: [_jsx(Text, { color: "gray", children: "Type: " }), _jsx(Text, { color: "yellow", children: (service.stack || "") === "platform" ? "PLATFORM" : "PRODUCT" })] })] }), _jsx(Box, { marginTop: 2, children: _jsxs(Text, { color: "gray", dimColor: true, children: ["Press ", _jsx(Text, { color: "cyan", children: "[Esc]" }), " to close"] }) })] }));
+        const title = theme.ascii
+            ? `--- ${service.name.toUpperCase()} ---`
+            : `\u250C\u2500 ${service.name.toUpperCase()} \u2500\u2510`;
+        return (_jsxs(Box, { width: 40, flexDirection: "column", borderStyle: theme.ascii ? undefined : "single", borderColor: theme.border, paddingX: 1, paddingY: 1, children: [_jsx(Box, { marginBottom: 1, justifyContent: "center", children: _jsx(Text, { color: theme.accent, bold: true, children: title }) }), _jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: theme.muted, children: "Name: " }), _jsx(Text, { color: theme.foreground, children: service.name })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.muted, children: "Stack: " }), _jsx(Text, { color: theme.foreground, children: service.stack || "unknown" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.muted, children: "Type: " }), _jsx(Text, { color: theme.warning, bold: theme.highContrast, children: (service.stack || "") === "platform" ? "PLATFORM" : "PRODUCT" })] })] }), _jsx(Box, { marginTop: 2, children: _jsxs(Text, { color: theme.muted, dimColor: theme.dimMuted, children: ["Press ", _jsx(Text, { color: theme.accent, children: "[Esc]" }), " to close"] }) })] }));
     }
     if (stack && stackMetadata) {
-        const statusColor = getStatusColor(stackMetadata.overallStatus);
-        const statusIcon = getStatusIcon(stackMetadata.overallStatus);
-        return (_jsxs(Box, { width: 40, flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, paddingY: 1, children: [_jsx(Box, { marginBottom: 1, justifyContent: "center", children: _jsxs(Text, { color: "cyan", bold: true, children: ["\u250C\u2500 ", stack.name.toUpperCase(), " \u2500\u2510"] }) }), _jsx(Box, { borderStyle: "single", borderColor: statusColor, paddingX: 1, paddingY: 1, marginY: 1, justifyContent: "center", children: _jsxs(Text, { color: statusColor, bold: true, children: [statusIcon, " ", stackMetadata.overallStatus.toUpperCase()] }) }), _jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: "gray", children: "Created: " }), _jsx(Text, { color: "white", children: formatDate(stackMetadata.createdAt) })] }), _jsxs(Box, { children: [_jsx(Text, { color: "gray", children: "Resources: " }), _jsx(Text, { color: "cyan", children: stackMetadata.resourceCount })] })] }), _jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { color: "gray", underline: true, children: "Resources" }) }), _jsx(Box, { flexDirection: "column", children: stack.resources.map((svc, index) => (_jsxs(Box, { children: [_jsx(Text, { color: "gray", children: index === stack.resources.length - 1 ? "└─ " : "├─ " }), _jsx(Text, { color: "white", children: svc.name })] }, svc.name))) }), _jsx(Box, { marginTop: 2, children: _jsxs(Text, { color: "gray", dimColor: true, children: ["Press ", _jsx(Text, { color: "cyan", children: "[Esc]" }), " to close"] }) })] }));
+        const statusColor = getTUIStatusColor(theme, getStatusColor(stackMetadata.overallStatus));
+        const statusIcon = getTUIStatusIcon(theme, getStatusIcon(stackMetadata.overallStatus), getStatusColor(stackMetadata.overallStatus));
+        const title = theme.ascii
+            ? `--- ${stack.name.toUpperCase()} ---`
+            : `\u250C\u2500 ${stack.name.toUpperCase()} \u2500\u2510`;
+        return (_jsxs(Box, { width: 40, flexDirection: "column", borderStyle: theme.ascii ? undefined : "single", borderColor: theme.border, paddingX: 1, paddingY: 1, children: [_jsx(Box, { marginBottom: 1, justifyContent: "center", children: _jsx(Text, { color: theme.accent, bold: true, children: title }) }), _jsx(Box, { borderStyle: theme.ascii ? undefined : "single", borderColor: statusColor, paddingX: 1, paddingY: 1, marginY: 1, justifyContent: "center", children: _jsxs(Text, { color: statusColor, bold: true, children: [statusIcon, " ", stackMetadata.overallStatus.toUpperCase()] }) }), _jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: theme.muted, children: "Created: " }), _jsx(Text, { color: theme.foreground, children: formatDate(stackMetadata.createdAt) })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.muted, children: "Resources: " }), _jsx(Text, { color: theme.accent, bold: theme.highContrast, children: stackMetadata.resourceCount })] })] }), _jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { color: theme.muted, underline: true, children: "Resources" }) }), _jsx(Box, { flexDirection: "column", children: stack.resources.map((svc, index) => (_jsxs(Box, { children: [_jsx(Text, { color: theme.muted, children: theme.ascii
+                                    ? index === stack.resources.length - 1
+                                        ? "L- "
+                                        : "|- "
+                                    : index === stack.resources.length - 1
+                                        ? "\u2514\u2500 "
+                                        : "\u251C\u2500 " }), _jsx(Text, { color: theme.foreground, children: svc.name })] }, svc.name))) }), _jsx(Box, { marginTop: 2, children: _jsxs(Text, { color: theme.muted, dimColor: theme.dimMuted, children: ["Press ", _jsx(Text, { color: theme.accent, children: "[Esc]" }), " to close"] }) })] }));
     }
-    return (_jsxs(Box, { width: 40, borderStyle: "single", borderColor: "gray", paddingX: 2, paddingY: 2, flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, justifyContent: "center", children: _jsx(Text, { color: "gray", dimColor: true, children: "Select a stack or service" }) }), _jsx(Box, { justifyContent: "center", children: _jsx(Text, { color: "gray", dimColor: true, children: "to view details" }) })] }));
+    return (_jsxs(Box, { width: 40, borderStyle: theme.ascii ? undefined : "single", borderColor: theme.border, paddingX: 2, paddingY: 2, flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, justifyContent: "center", children: _jsx(Text, { color: theme.muted, dimColor: theme.dimMuted, children: "Select a stack or service" }) }), _jsx(Box, { justifyContent: "center", children: _jsx(Text, { color: theme.muted, dimColor: theme.dimMuted, children: "to view details" }) })] }));
 };
 //# sourceMappingURL=DetailPanel.js.map