@tdk-landscape/tdk-cli-core 1.3.44 → 1.3.48

package/cli/src/components/DetailPanel.tsx

@@ -0,0 +1,146 @@
+import { Box, Text } from "ink";
+import type React from "react";
+import type { DetailPanelProps } from "../types/index.js";
+import { formatDate, getStatusColor, getStatusIcon } from "../utils/formatting.js";
+
+export const DetailPanel: React.FC<DetailPanelProps> = ({
+  stack,
+  service,
+  stackMetadata,
+  visible,
+}) => {
+  if (!visible) {
+    return <Box width={0} />;
+  }
+
+  if (service) {
+    return (
+      <Box
+        width={40}
+        flexDirection="column"
+        borderStyle="single"
+        borderColor="gray"
+        paddingX={1}
+        paddingY={1}
+      >
+        <Box marginBottom={1} justifyContent="center">
+          <Text color="cyan" bold>
+            ┌─ {service.name.toUpperCase()} ─┐
+          </Text>
+        </Box>
+
+        <Box flexDirection="column" marginY={1}>
+          <Box>
+            <Text color="gray">Name: </Text>
+            <Text color="white">{service.name}</Text>
+          </Box>
+          <Box>
+            <Text color="gray">Stack: </Text>
+            <Text color="white">{service.stack || "unknown"}</Text>
+          </Box>
+          <Box>
+            <Text color="gray">Type: </Text>
+            <Text color="yellow">
+              {(service.stack || "") === "platform" ? "PLATFORM" : "PRODUCT"}
+            </Text>
+          </Box>
+        </Box>
+
+        <Box marginTop={2}>
+          <Text color="gray" dimColor>
+            Press <Text color="cyan">[Esc]</Text> to close
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (stack && stackMetadata) {
+    const statusColor = getStatusColor(stackMetadata.overallStatus);
+    const statusIcon = getStatusIcon(stackMetadata.overallStatus);
+
+    return (
+      <Box
+        width={40}
+        flexDirection="column"
+        borderStyle="single"
+        borderColor="gray"
+        paddingX={1}
+        paddingY={1}
+      >
+        <Box marginBottom={1} justifyContent="center">
+          <Text color="cyan" bold>
+            ┌─ {stack.name.toUpperCase()} ─┐
+          </Text>
+        </Box>
+
+        <Box
+          borderStyle="single"
+          borderColor={statusColor}
+          paddingX={1}
+          paddingY={1}
+          marginY={1}
+          justifyContent="center"
+        >
+          <Text color={statusColor} bold>
+            {statusIcon} {stackMetadata.overallStatus.toUpperCase()}
+          </Text>
+        </Box>
+
+        <Box flexDirection="column" marginY={1}>
+          <Box>
+            <Text color="gray">Created: </Text>
+            <Text color="white">{formatDate(stackMetadata.createdAt)}</Text>
+          </Box>
+          <Box>
+            <Text color="gray">Resources: </Text>
+            <Text color="cyan">{stackMetadata.resourceCount}</Text>
+          </Box>
+        </Box>
+
+        <Box marginTop={1} marginBottom={1}>
+          <Text color="gray" underline>
+            Resources
+          </Text>
+        </Box>
+
+        <Box flexDirection="column">
+          {stack.resources.map((svc: { name: string }, index: number) => (
+            <Box key={svc.name}>
+              <Text color="gray">{index === stack.resources.length - 1 ? "└─ " : "├─ "}</Text>
+              <Text color="white">{svc.name}</Text>
+            </Box>
+          ))}
+        </Box>
+
+        <Box marginTop={2}>
+          <Text color="gray" dimColor>
+            Press <Text color="cyan">[Esc]</Text> to close
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      width={40}
+      borderStyle="single"
+      borderColor="gray"
+      paddingX={2}
+      paddingY={2}
+      flexDirection="column"
+    >
+      <Box marginBottom={1} justifyContent="center">
+        <Text color="gray" dimColor>
+          Select a stack or service
+        </Text>
+      </Box>
+      <Box justifyContent="center">
+        <Text color="gray" dimColor>
+          to view details
+        </Text>
+      </Box>
+    </Box>
+  );
+};

package/cli/src/components/FileTree.tsx

@@ -0,0 +1,89 @@
+import { Box, Text } from "ink";
+import type React from "react";
+import { useState } from "react";
+import type { FileNode, FileTreeProps, FileType } from "../types/index.js";
+import { formatBytes } from "../utils/formatting.js";
+
+const FILE_ICONS: Record<FileType, string> = {
+  docker: "🐳",
+  tilt: "⚙️",
+  config: "🔧",
+  prisma: "🗄️",
+  generated: "📄",
+  unknown: "📃",
+};
+
+const FILE_COLORS: Record<FileType, string> = {
+  docker: "blue",
+  tilt: "cyan",
+  config: "yellow",
+  prisma: "magenta",
+  generated: "gray",
+  unknown: "white",
+};
+
+// biome-ignore lint/correctness/noUnusedFunctionParameters: reserved callback prop kept in the component API
+export const FileTree: React.FC<FileTreeProps> = ({ nodes, onSelect, selectedPath }) => {
+  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
+
+  const _toggleNode = (path: string) => {
+    const newExpanded = new Set(expandedNodes);
+    if (newExpanded.has(path)) {
+      newExpanded.delete(path);
+    } else {
+      newExpanded.add(path);
+    }
+    setExpandedNodes(newExpanded);
+  };
+
+  const renderNode = (node: FileNode, depth: number = 0): React.ReactElement => {
+    const isExpanded = expandedNodes.has(node.path);
+    const isSelected = selectedPath === node.path;
+    const indent = "  ".repeat(depth);
+
+    if (node.type === "directory") {
+      return (
+        <Box key={node.path} flexDirection="column">
+          <Box>
+            <Text
+              color={isSelected ? "cyan" : "white"}
+              bold={isSelected}
+              backgroundColor={isSelected ? "blue" : undefined}
+            >
+              {indent}
+              {isExpanded ? "▼" : "▶"} {node.name}
+            </Text>
+          </Box>
+          {isExpanded && node.children?.map((child) => renderNode(child, depth + 1))}
+        </Box>
+      );
+    }
+
+    const icon = node.fileType ? FILE_ICONS[node.fileType] : FILE_ICONS.unknown;
+    const color = node.fileType ? FILE_COLORS[node.fileType] : FILE_COLORS.unknown;
+
+    return (
+      <Box key={node.path}>
+        <Text
+          color={isSelected ? "cyan" : color}
+          bold={isSelected}
+          backgroundColor={isSelected ? "blue" : undefined}
+        >
+          {indent} {icon} {node.name}
+        </Text>
+        {node.size && (
+          <Text color="gray" dimColor>
+            {" "}
+            ({formatBytes(node.size)})
+          </Text>
+        )}
+      </Box>
+    );
+  };
+
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      {nodes.map((node) => renderNode(node, 0))}
+    </Box>
+  );
+};

package/cli/src/components/ResourceSelectInput.tsx

@@ -0,0 +1,30 @@
+import { Text } from "ink";
+import SelectInput from "ink-select-input";
+import type React from "react";
+import type { ResourceSelectInputProps } from "../types/index.js";
+
+export const ResourceSelectInput: React.FC<ResourceSelectInputProps> = ({
+  items,
+  onSelect,
+  highlightedIndex,
+}) => {
+  return (
+    <SelectInput
+      items={items}
+      onSelect={onSelect}
+      initialIndex={highlightedIndex}
+      indicatorComponent={({ isSelected }) => (
+        <Text color={isSelected ? "cyan" : undefined}>{isSelected ? "▓▒░ " : "    "}</Text>
+      )}
+      itemComponent={({ isSelected, label }) => (
+        <Text
+          color={isSelected ? "cyan" : "white"}
+          bold={isSelected}
+          backgroundColor={isSelected ? "black" : undefined}
+        >
+          {label}
+        </Text>
+      )}
+    />
+  );
+};

package/cli/src/components/ResourceTable.tsx

@@ -0,0 +1,78 @@
+import { Box, Text } from "ink";
+import type React from "react";
+import type { ResourceTableProps } from "../types/index.js";
+import { formatShortDate, getStatusColor, getStatusIcon, truncate } from "../utils/formatting.js";
+
+export const ResourceTable: React.FC<ResourceTableProps> = ({ resources, maxWidth = 100 }) => {
+  if (resources.length === 0) {
+    return (
+      <Box paddingY={1}>
+        <Text color="gray">No resources found</Text>
+      </Box>
+    );
+  }
+
+  const narrowMode = maxWidth < 80;
+
+  return (
+    <Box flexDirection="column">
+      <Box flexDirection="row" borderStyle="single" borderColor="gray" paddingX={1}>
+        <Box width={narrowMode ? 20 : 25}>
+          <Text bold>Logical ID</Text>
+        </Box>
+        {!narrowMode && (
+          <Box width={20}>
+            <Text bold>Physical ID</Text>
+          </Box>
+        )}
+        <Box width={12}>
+          <Text bold>Type</Text>
+        </Box>
+        <Box width={15}>
+          <Text bold>Status</Text>
+        </Box>
+        {!narrowMode && (
+          <Box width={20}>
+            <Text bold>Created</Text>
+          </Box>
+        )}
+      </Box>
+
+      {resources.map((resource, index) => {
+        const statusColor = getStatusColor(resource.status);
+        const statusIcon = getStatusIcon(resource.status);
+        const _isEven = index % 2 === 0;
+
+        return (
+          <Box key={resource.name} flexDirection="row" paddingX={1}>
+            <Box width={narrowMode ? 20 : 25}>
+              <Text>{truncate(resource.name, narrowMode ? 18 : 23)}</Text>
+            </Box>
+            {!narrowMode && (
+              <Box width={20}>
+                <Text color="gray">
+                  {resource.stack && resource.stack !== "unknown"
+                    ? truncate(`${resource.stack}/${resource.name}`, 18)
+                    : truncate(resource.name, 18)}
+                </Text>
+              </Box>
+            )}
+            <Box width={12}>
+              <Text color="cyan">{resource.type}</Text>
+            </Box>
+            <Box width={15}>
+              <Text color={statusColor}>
+                {statusIcon} {resource.status}
+              </Text>
+            </Box>
+            {!narrowMode && (
+              <Box width={20}>
+                <Text color="gray">{formatShortDate(resource.createdAt)}</Text>
+              </Box>
+            )}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};

package/cli/src/components/TabBar.tsx

@@ -0,0 +1,53 @@
+import { Box, Text } from "ink";
+import type React from "react";
+import type { Tab, TabBarProps } from "../types/index.js";
+
+const TABS: Tab[] = [
+  { id: "overview", label: "OVERVIEW", shortcut: "1" },
+  { id: "resources", label: "RESOURCES", shortcut: "2" },
+  { id: "events", label: "EVENTS", shortcut: "3" },
+  { id: "files", label: "FILES", shortcut: "4" },
+  { id: "config", label: "CONFIG", shortcut: "5" },
+];
+
+// biome-ignore lint/correctness/noUnusedFunctionParameters: reserved callback prop kept in the component API
+export const TabBar: React.FC<TabBarProps> = ({ activeTab, onTabChange, compact = false }) => {
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      <Box marginBottom={1}>
+        <Text color="gray">{"─".repeat(compact ? 60 : 80)}</Text>
+      </Box>
+      <Box flexDirection="row" justifyContent="space-between" paddingX={1}>
+        {TABS.map((tab) => {
+          const isActive = activeTab === tab.id;
+
+          return (
+            <Box key={tab.id}>
+              {isActive ? (
+                <Box borderStyle="single" borderColor="cyan" paddingX={1} backgroundColor="black">
+                  <Text>
+                    <Text color="cyan">▓▒░</Text>
+                    <Text color="cyan" bold>
+                      {" "}
+                      [{tab.shortcut}] {tab.label}{" "}
+                    </Text>
+                    <Text color="cyan">░▒▓</Text>
+                  </Text>
+                </Box>
+              ) : (
+                <Box paddingX={1}>
+                  <Text color="gray" dimColor>
+                    [{tab.shortcut}] {compact ? tab.label.slice(0, 4) : tab.label}
+                  </Text>
+                </Box>
+              )}
+            </Box>
+          );
+        })}
+      </Box>
+      <Box marginTop={1}>
+        <Text color="gray">{"─".repeat(compact ? 60 : 80)}</Text>
+      </Box>
+    </Box>
+  );
+};

package/cli/src/components/Tooltip.tsx

@@ -0,0 +1,11 @@
+export const TOOLTIPS = {
+  overviewTab: "View all stacks and their resources",
+  resourcesTab: "Detailed resource list with metadata",
+  eventsTab: "Service lifecycle events timeline",
+  filesTab: "Browse autogenerated configuration files",
+  configTab: "View and edit service configurations",
+  search: "Filter services by name, stack, or type",
+  refresh: "Reload data from Tilt API",
+  help: "Show keyboard shortcuts and help",
+  quit: "Exit the TUI",
+};

package/{dist/components/index.js → cli/src/components/index.ts}

@@ -5,4 +5,3 @@ export { ResourceSelectInput } from "./ResourceSelectInput.js";
 export { ResourceTable } from "./ResourceTable.js";
 export { TabBar } from "./TabBar.js";
 export { TOOLTIPS } from "./Tooltip.js";
-//# sourceMappingURL=index.js.map

package/cli/src/config/platform-standards.test.ts

@@ -0,0 +1,11 @@
+import { describe, expect, it } from "vitest";
+import { PLATFORM_STANDARDS } from "./platform-standards.js";
+
+describe("platform standards", () => {
+    it("keeps the low-level Traefik host generic and uses a non-privileged port", () => {
+        expect(PLATFORM_STANDARDS.traefik.defaultHost).toBe("localhost");
+        expect(PLATFORM_STANDARDS.traefik.appHost).toBe("app.localhost");
+        expect(PLATFORM_STANDARDS.traefik.apiHost).toBe("api.localhost");
+        expect(PLATFORM_STANDARDS.traefik.defaultPort).toBe(8080);
+    });
+});

package/cli/src/config/platform-standards.ts

@@ -0,0 +1,196 @@
+import { PORT_RANGES, STANDARD_PORTS } from "../utils/constants.js";
+
+const PLATFORM_VERSION = "1.0.0";
+
+const TECH_STACK = {
+  runtime: "bun",
+  bundler: "vite",
+  language: "typescript",
+  framework: "hono",
+  database: "postgresql",
+  orm: "prisma",
+  messaging: "nats",
+  linting: "biome",
+  testing: "vitest",
+} as const;
+
+const PORTS = {
+  frontend: {
+    base: PORT_RANGES.frontend.base,
+    range: PORT_RANGES.frontend.range,
+    start: PORT_RANGES.frontend.min,
+    end: PORT_RANGES.frontend.max,
+  },
+  backend: {
+    base: PORT_RANGES.backend.base,
+    range: PORT_RANGES.backend.range,
+    start: PORT_RANGES.backend.min,
+    end: PORT_RANGES.backend.max,
+  },
+  health: {
+    base: PORT_RANGES.health.base,
+    range: PORT_RANGES.health.range,
+    start: PORT_RANGES.health.min,
+    end: PORT_RANGES.health.max,
+  },
+  worker: {
+    base: PORT_RANGES.worker.base,
+    range: PORT_RANGES.worker.range,
+    start: PORT_RANGES.worker.min,
+    end: PORT_RANGES.worker.max,
+  },
+  migrator: {
+    base: PORT_RANGES.migrator.base,
+    range: PORT_RANGES.migrator.range,
+    start: PORT_RANGES.migrator.min,
+    end: PORT_RANGES.migrator.max,
+  },
+  tiltUi: STANDARD_PORTS.tiltUi,
+  traefik: STANDARD_PORTS.traefik,
+} as const;
+
+const HEALTH_CHECKS = {
+  path: "/health",
+  live: "/health/live",
+  ready: "/health/ready",
+  timeout: 30,
+  interval: 5,
+} as const;
+
+const NAMING = {
+  frontend: "-frontend",
+  backend: "-backend",
+  worker: "-worker",
+  migrator: "-migrator",
+  library: "-lib",
+  sdk: "-sdk",
+  validSeparators: ["-", "_"],
+  maxLength: 63,
+  minLength: 3,
+} as const;
+
+const TRAEFIK = {
+  entrypoint: "web",
+  network: "traefik-public",
+  defaultHost: "localhost",
+  appHost: "app.localhost",
+  apiHost: "api.localhost",
+  appSubdomainPrefix: "app",
+  apiSubdomainPrefix: "api",
+  defaultPort: 8080,
+  tlsEnabled: false,
+  entrypoints: ["web"],
+  middlewares: [],
+  tls: { enabled: false },
+  healthcheckPath: "/health",
+  healthcheckInterval: "10s",
+  healthcheckTimeout: "5s",
+  frontendPriorityBase: 100,
+} as const;
+
+const FILEWATCH_IGNORES = [
+  "node_modules",
+  "dist",
+  "build",
+  ".git",
+  ".prisma",
+  ".turbo",
+  "coverage",
+  "tmp",
+  "temp",
+  "__tests__",
+  "test",
+  "tests",
+] as const;
+
+const RESOURCE_TYPES = {
+  frontend: {
+    suffix: "-frontend",
+    portRange: "3000-3999",
+  },
+  backend: {
+    suffix: "-backend",
+    portRange: "4000-4999",
+  },
+  library: {
+    suffix: "-library",
+    portRange: null,
+  },
+  sdk: {
+    suffix: "-sdk",
+    portRange: "3000-9999",
+  },
+  migrator: {
+    suffix: "-migrator",
+    portRange: "7000-7999",
+  },
+  worker: {
+    suffix: "-worker",
+    portRange: "6000-6999",
+  },
+} as const;
+
+const FEATURES = {
+  prisma: "Database ORM with migrations",
+  nats: "Event streaming via NATS",
+  redis: "Caching layer",
+  infisical: "Secrets management",
+  vitest: "Testing framework",
+  traefik: "HTTP routing",
+  websocket: "Real-time connections",
+  graphql: "GraphQL support",
+  grpc: "gRPC support",
+  viteNode: "Vite Node runtime",
+  maintenance: "Maintenance mode",
+} as const;
+
+const PATHS = {
+  services: "services/product",
+  sharedPlatform: "shared-platform-engineering",
+  sharedProduct: "shared-product-engineering",
+  sharedDdd: "shared-ddd-layers",
+} as const;
+
+const DISCOVERY = {
+  scanIntervalSeconds: 5,
+  maxManifestsPerRoot: 50,
+  servicePatterns: ["services/product/*", "services/platform/*"],
+} as const;
+
+const DOCKER = {
+  dockerfile: "Dockerfile",
+  context: ".",
+  // Auto-detect native arch (arm64 on Apple Silicon, amd64 elsewhere)
+  // platform: "linux/amd64",
+} as const;
+
+const RUNTIME = {
+  backend: {
+    command: "bun",
+    args: ["run", "dev"],
+    env: { NODE_ENV: "development" },
+  },
+  frontend: {
+    command: "bun",
+    args: ["run", "dev"],
+    env: { NODE_ENV: "development" },
+  },
+} as const;
+
+export const PLATFORM_STANDARDS = {
+  version: PLATFORM_VERSION,
+  tech: TECH_STACK,
+  ports: PORTS,
+  health: HEALTH_CHECKS,
+  naming: NAMING,
+  traefik: TRAEFIK,
+  filewatchIgnores: FILEWATCH_IGNORES,
+  serviceTypes: RESOURCE_TYPES,
+  features: FEATURES,
+  paths: PATHS,
+  discovery: DISCOVERY,
+  docker: DOCKER,
+  runtime: RUNTIME,
+} as const;
+
+export type PlatformStandards = typeof PLATFORM_STANDARDS;