@gxp-dev/tools 2.0.63 → 2.0.64

package/bin/lib/tui/components/WelcomeScreen.tsx

@@ -1,16 +1,16 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-import { createRequire } from 'module';
-import { fileURLToPath } from 'url';
-import { dirname, join } from 'path';
+import React from "react"
+import { Box, Text } from "ink"
+import { createRequire } from "module"
+import { fileURLToPath } from "url"
+import { dirname, join } from "path"
 
-const require = createRequire(import.meta.url);
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+const require = createRequire(import.meta.url)
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
 
 // Navigate up from dist/tui/components to package root
-const pkgPath = join(__dirname, '..', '..', '..', 'package.json');
-const pkg = require(pkgPath);
+const pkgPath = join(__dirname, "..", "..", "..", "package.json")
+const pkg = require(pkgPath)
 
 const LOGO = `
    ██████╗ ██╗  ██╗██████╗
@@ -19,74 +19,129 @@ const LOGO = `
   ██║   ██║ ██╔██╗ ██╔═══╝
   ╚██████╔╝██╔╝ ██╗██║
    ╚═════╝ ╚═╝  ╚═╝╚═╝
-`;
+`
 
 export default function WelcomeScreen() {
-  return (
-    <Box
-      flexDirection="column"
-      alignItems="center"
-      justifyContent="center"
-      flexGrow={1}
-      padding={1}
-    >
-      <Text color="blue">{LOGO}</Text>
+	return (
+		<Box
+			flexDirection="column"
+			alignItems="center"
+			justifyContent="center"
+			flexGrow={1}
+			padding={1}
+		>
+			<Text color="blue">{LOGO}</Text>
 
-      <Box marginTop={1} flexDirection="column" alignItems="center">
-        <Text bold color="white">GxP DevStudio</Text>
-        <Text dimColor>v{pkg.version}</Text>
-      </Box>
+			<Box marginTop={1} flexDirection="column" alignItems="center">
+				<Text bold color="white">
+					GxP DevStudio
+				</Text>
+				<Text dimColor>v{pkg.version}</Text>
+			</Box>
 
-      <Box marginTop={1}>
-        <Text color="gray">Interactive development environment for GxP plugins</Text>
-      </Box>
+			<Box marginTop={1}>
+				<Text color="gray">
+					Interactive development environment for GxP plugins
+				</Text>
+			</Box>
 
-      <Box marginTop={2} flexDirection="row" justifyContent="center">
-        {/* Quick Start Column */}
-        <Box flexDirection="column" marginRight={4}>
-          <Text color="cyan" bold>Quick Start</Text>
-          <Box marginTop={1} flexDirection="column">
-            <Text>  <Text color="yellow">/dev</Text>               Start Vite + Socket.IO</Text>
-            <Text>  <Text color="yellow">/dev --no-socket</Text>   Start Vite only (no Socket)</Text>
-            <Text>  <Text color="yellow">/dev --with-mock</Text>   Start with Mock API</Text>
-            <Text>  <Text color="yellow">/socket</Text>            Start Socket.IO server</Text>
-            <Text>  <Text color="yellow">/ext chrome</Text>        Launch Chrome extension</Text>
-            <Text>  <Text color="yellow">/help</Text>              Show all commands</Text>
-          </Box>
-        </Box>
+			<Box marginTop={2} flexDirection="row" justifyContent="center">
+				{/* Quick Start Column */}
+				<Box flexDirection="column" marginRight={4}>
+					<Text color="cyan" bold>
+						Quick Start
+					</Text>
+					<Box marginTop={1} flexDirection="column">
+						<Text>
+							{" "}
+							<Text color="yellow">/dev</Text> Start Vite + Socket.IO
+						</Text>
+						<Text>
+							{" "}
+							<Text color="yellow">/dev --no-socket</Text> Start Vite only (no
+							Socket)
+						</Text>
+						<Text>
+							{" "}
+							<Text color="yellow">/dev --with-mock</Text> Start with Mock API
+						</Text>
+						<Text>
+							{" "}
+							<Text color="yellow">/socket</Text> Start Socket.IO server
+						</Text>
+						<Text>
+							{" "}
+							<Text color="yellow">/ext chrome</Text> Launch Chrome extension
+						</Text>
+						<Text>
+							{" "}
+							<Text color="yellow">/help</Text> Show all commands
+						</Text>
+					</Box>
+				</Box>
 
-        {/* Keyboard Shortcuts Column */}
-        <Box flexDirection="column" marginLeft={4}>
-          <Text color="cyan" bold>Keyboard Shortcuts</Text>
-          <Box marginTop={1} flexDirection="column">
-            <Text>  <Text color="green">Tab</Text>            Cycle through tabs</Text>
-            <Text>  <Text color="green">Left/Right</Text>     Switch tabs</Text>
-            <Text>  <Text color="green">Ctrl+K</Text>         Stop current service</Text>
-            <Text>  <Text color="green">Ctrl+L</Text>         Clear current log</Text>
-            <Text>  <Text color="green">Ctrl+C</Text>         Exit application</Text>
-          </Box>
-        </Box>
-      </Box>
+				{/* Keyboard Shortcuts Column */}
+				<Box flexDirection="column" marginLeft={4}>
+					<Text color="cyan" bold>
+						Keyboard Shortcuts
+					</Text>
+					<Box marginTop={1} flexDirection="column">
+						<Text>
+							{" "}
+							<Text color="green">Tab</Text> Cycle through tabs
+						</Text>
+						<Text>
+							{" "}
+							<Text color="green">Left/Right</Text> Switch tabs
+						</Text>
+						<Text>
+							{" "}
+							<Text color="green">Ctrl+K</Text> Stop current service
+						</Text>
+						<Text>
+							{" "}
+							<Text color="green">Ctrl+L</Text> Clear current log
+						</Text>
+						<Text>
+							{" "}
+							<Text color="green">Ctrl+C</Text> Exit application
+						</Text>
+					</Box>
+				</Box>
+			</Box>
 
-      <Box marginTop={2} flexDirection="column" alignItems="center">
-        <Text color="cyan" bold>Socket Events</Text>
-        <Box marginTop={1} flexDirection="column" alignItems="center">
-          <Text color="gray">Use <Text color="yellow">/socket list</Text> to see available events</Text>
-          <Text color="gray">Use <Text color="yellow">/socket send EventName</Text> to simulate events</Text>
-        </Box>
-      </Box>
+			<Box marginTop={2} flexDirection="column" alignItems="center">
+				<Text color="cyan" bold>
+					Socket Events
+				</Text>
+				<Box marginTop={1} flexDirection="column" alignItems="center">
+					<Text color="gray">
+						Use <Text color="yellow">/socket list</Text> to see available events
+					</Text>
+					<Text color="gray">
+						Use <Text color="yellow">/socket send EventName</Text> to simulate
+						events
+					</Text>
+				</Box>
+			</Box>
 
-      <Box marginTop={2} flexDirection="column" alignItems="center">
-        <Text color="cyan" bold>Browser Extensions</Text>
-        <Box marginTop={1} flexDirection="column" alignItems="center">
-          <Text color="gray">Test your plugin on live GxP pages with the browser extension</Text>
-          <Text color="gray">Open DevTools and use the "GxP Inspector" panel to select components</Text>
-        </Box>
-      </Box>
+			<Box marginTop={2} flexDirection="column" alignItems="center">
+				<Text color="cyan" bold>
+					Browser Extensions
+				</Text>
+				<Box marginTop={1} flexDirection="column" alignItems="center">
+					<Text color="gray">
+						Test your plugin on live GxP pages with the browser extension
+					</Text>
+					<Text color="gray">
+						Open DevTools and use the "GxP Inspector" panel to select components
+					</Text>
+				</Box>
+			</Box>
 
-      <Box marginTop={2}>
-        <Text dimColor>Type a command below to get started...</Text>
-      </Box>
-    </Box>
-  );
+			<Box marginTop={2}>
+				<Text dimColor>Type a command below to get started...</Text>
+			</Box>
+		</Box>
+	)
 }

package/bin/lib/tui/index.tsx

@@ -1,53 +1,51 @@
 #!/usr/bin/env node
-import React from 'react';
-import { render } from 'ink';
-import dotenv from 'dotenv';
-import path from 'path';
-import App from './App.js';
-import { serviceManager } from './services/index.js';
+import React from "react"
+import { render } from "ink"
+import dotenv from "dotenv"
+import path from "path"
+import App from "./App.js"
+import { serviceManager } from "./services/index.js"
 
 // Load .env from the current working directory (project directory)
-dotenv.config({ path: path.join(process.cwd(), '.env') });
+dotenv.config({ path: path.join(process.cwd(), ".env") })
 
 interface TUIOptions {
-  autoStart?: string[];  // Commands to auto-start (e.g., ['dev', 'socket'])
-  args?: Record<string, unknown>;  // Command arguments
+	autoStart?: string[] // Commands to auto-start (e.g., ['dev', 'socket'])
+	args?: Record<string, unknown> // Command arguments
 }
 
 export function startTUI(options: TUIOptions = {}) {
-  // Check if stdin supports raw mode (required for Ink input handling)
-  // This can fail when:
-  // - Running in CI environments
-  // - Piped input (stdin is not a TTY)
-  // - Some terminal emulators
-  const stdin = process.stdin;
-  const stdinIsTTY = stdin.isTTY === true;
-
-  // If stdin doesn't support raw mode, we need to handle it gracefully
-  // Ink 5.x uses stdin by default and requires raw mode for input
-  if (!stdinIsTTY) {
-    throw new Error('NO_TTY');
-  }
-
-  const { waitUntilExit } = render(
-    <App
-      autoStart={options.autoStart}
-      args={options.args}
-    />
-  );
-
-  waitUntilExit().then(() => {
-    // Ensure all services are stopped before exiting
-    serviceManager.forceStopAll();
-    process.exit(0);
-  });
+	// Check if stdin supports raw mode (required for Ink input handling)
+	// This can fail when:
+	// - Running in CI environments
+	// - Piped input (stdin is not a TTY)
+	// - Some terminal emulators
+	const stdin = process.stdin
+	const stdinIsTTY = stdin.isTTY === true
+
+	// If stdin doesn't support raw mode, we need to handle it gracefully
+	// Ink 5.x uses stdin by default and requires raw mode for input
+	if (!stdinIsTTY) {
+		throw new Error("NO_TTY")
+	}
+
+	const { waitUntilExit } = render(
+		<App autoStart={options.autoStart} args={options.args} />,
+	)
+
+	waitUntilExit().then(() => {
+		// Ensure all services are stopped before exiting
+		serviceManager.forceStopAll()
+		process.exit(0)
+	})
 }
 
 // Check if run directly (ESM way)
-import { fileURLToPath } from 'url';
-const isMain = process.argv[1] && process.argv[1] === fileURLToPath(import.meta.url);
+import { fileURLToPath } from "url"
+const isMain =
+	process.argv[1] && process.argv[1] === fileURLToPath(import.meta.url)
 if (isMain) {
-  startTUI();
+	startTUI()
 }
 
-export default startTUI;
+export default startTUI