everything-dev 0.3.2 → 1.3.2

package/dist/components/dev-view.cjs

@@ -0,0 +1,307 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_linkify = require('../utils/linkify.cjs');
+const require_theme = require('../utils/theme.cjs');
+let ink = require("ink");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/dev-view.tsx
+const PLUGIN_PREFIX = "plugin:";
+function StatusIcon({ status }) {
+	switch (status) {
+		case "pending": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+			color: "gray",
+			children: require_theme.icons.pending
+		});
+		case "starting": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+			color: "#00ffff",
+			children: require_theme.icons.scan
+		});
+		case "ready": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+			color: "#00ff41",
+			children: require_theme.icons.ok
+		});
+		case "error": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+			color: "#ff3366",
+			children: require_theme.icons.err
+		});
+	}
+}
+function getServiceColor(name) {
+	if (name.startsWith(PLUGIN_PREFIX)) return "#ffaa00";
+	return name === "host" ? "#00ffff" : name === "ui" ? "#ff00ff" : "#0080ff";
+}
+function getDisplayName(name) {
+	return name.startsWith(PLUGIN_PREFIX) ? name.slice(7).toUpperCase() : name.toUpperCase();
+}
+function isPlugin(name) {
+	return name.startsWith(PLUGIN_PREFIX);
+}
+function getSectionedProcesses(processes) {
+	const plugins = processes.filter((p) => isPlugin(p.name));
+	const services = processes.filter((p) => !isPlugin(p.name));
+	const sections = [];
+	if (plugins.length > 0) sections.push({
+		key: "plugins",
+		title: "PLUGINS",
+		processes: plugins
+	});
+	if (services.length > 0) sections.push({
+		key: "services",
+		title: "SERVICES",
+		processes: services
+	});
+	return sections;
+}
+function getColumnWidths(processes) {
+	return {
+		name: Math.max(6, ...processes.map((p) => getDisplayName(p.name).length)),
+		source: Math.max(10, ...processes.map((p) => p.source ? `(${p.source})`.length : 0))
+	};
+}
+function ProcessRow({ proc, nameWidth, sourceWidth }) {
+	const color = getServiceColor(proc.name);
+	const portStr = proc.port > 0 ? `:${proc.port}` : "";
+	const sourceLabel = proc.source ? ` (${proc.source})` : "";
+	const statusText = proc.status === "pending" ? "waiting" : proc.status === "starting" ? "starting" : proc.status === "ready" ? "running" : "failed";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Box, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, { children: "  " }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusIcon, { status: proc.status }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, { children: " " }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+			color,
+			bold: true,
+			children: getDisplayName(proc.name).padEnd(nameWidth)
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+			color: "gray",
+			children: sourceLabel.padEnd(sourceWidth)
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+			color: proc.status === "ready" ? "#00ff41" : "gray",
+			children: statusText
+		}),
+		proc.port > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Text, {
+			color: "#00ffff",
+			children: [" ", portStr]
+		})
+	] });
+}
+function SectionHeader({ title }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Box, {
+		marginBottom: 0,
+		marginTop: 1,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+			color: "#00ffff",
+			bold: true,
+			children: title
+		})
+	});
+}
+function LogLine({ entry }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Box, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Text, {
+		color: getServiceColor(entry.source),
+		children: [
+			"[",
+			entry.source,
+			"]"
+		]
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Text, {
+		color: entry.isError ? "#ff3366" : void 0,
+		children: [" ", require_linkify.linkify(entry.line)]
+	})] });
+}
+function truncateUrl(url, maxLen) {
+	if (url.length <= maxLen) return url;
+	try {
+		const host = new URL(url).host;
+		if (host.length > maxLen - 10) return `${host.slice(0, maxLen - 13)}...`;
+		return host;
+	} catch {
+		return `${url.slice(0, maxLen - 3)}...`;
+	}
+}
+function DevView({ processes, logs, description, proxyTarget, onExit, onExportLogs }) {
+	const { exit } = (0, ink.useApp)();
+	const [isShuttingDown, setIsShuttingDown] = (0, react.useState)(false);
+	(0, ink.useInput)((input, key) => {
+		if (isShuttingDown) return;
+		if (input === "q" || key.ctrl && input === "c") {
+			setIsShuttingDown(true);
+			Promise.resolve(onExit?.()).then(() => {
+				exit();
+			});
+		}
+		if (input === "l") {
+			setIsShuttingDown(true);
+			Promise.resolve(onExportLogs?.()).then(() => {
+				exit();
+			});
+		}
+	});
+	const readyCount = processes.filter((p) => p.status === "ready").length;
+	const total = processes.length;
+	const allReady = readyCount === total;
+	const hostPort = processes.find((p) => p.name === "host")?.port || 3e3;
+	const recentLogs = logs.slice(-12);
+	const sectionedProcesses = getSectionedProcesses(processes);
+	const columnWidths = getColumnWidths(processes);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Box, {
+		flexDirection: "column",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Box, {
+				marginBottom: 0,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+					color: "#00ffff",
+					children: require_theme.frames.top(52)
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Box, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Text, { children: [
+				"  ",
+				require_theme.icons.run,
+				" ",
+				require_theme.gradients.cyber(description.toUpperCase())
+			] }) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Box, {
+				marginBottom: 1,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+					color: "#00ffff",
+					children: require_theme.frames.bottom(52)
+				})
+			}),
+			allReady && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Box, {
+				marginBottom: 1,
+				flexDirection: "column",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Box, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Text, {
+					color: "#00ff41",
+					children: [
+						"  ",
+						require_theme.icons.app,
+						" APP READY"
+					]
+				}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Box, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Text, {
+					color: "#00ff41",
+					bold: true,
+					children: [
+						"  ",
+						require_theme.icons.arrow,
+						" http://localhost:",
+						hostPort
+					]
+				}) })]
+			}),
+			proxyTarget && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Box, {
+				marginBottom: 1,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Text, {
+					color: "#ffaa00",
+					children: [
+						"  ",
+						require_theme.icons.arrow,
+						" API PROXY → ",
+						truncateUrl(proxyTarget, 38)
+					]
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Box, {
+				marginTop: 0,
+				marginBottom: 0,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, { children: require_theme.colors.dim(require_theme.divider(52)) })
+			}),
+			sectionedProcesses.map((section) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Box, {
+				flexDirection: "column",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHeader, { title: section.title }), section.processes.map((proc) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProcessRow, {
+					proc,
+					nameWidth: columnWidths.name,
+					sourceWidth: columnWidths.source
+				}, proc.name))]
+			}, section.key)),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Box, {
+				marginTop: 1,
+				marginBottom: 0,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, { children: require_theme.colors.dim(require_theme.divider(52)) })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Box, {
+				marginTop: 0,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Text, {
+					color: allReady ? "#00ff41" : "#00ffff",
+					children: ["  ", allReady ? `${require_theme.icons.ok} All ${total} services running` : `${require_theme.icons.scan} ${readyCount}/${total} ready`]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Text, {
+					color: "gray",
+					children: [
+						" ",
+						require_theme.icons.dot,
+						" q quit ",
+						require_theme.icons.dot,
+						" l logs"
+					]
+				})]
+			}),
+			recentLogs.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Box, {
+				marginTop: 1,
+				marginBottom: 0,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, { children: require_theme.colors.dim(require_theme.divider(52)) })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Box, {
+				flexDirection: "column",
+				marginTop: 0,
+				children: recentLogs.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LogLine, { entry }, entry.id))
+			})] })
+		]
+	});
+}
+function renderDevView(initialProcesses, description, env, onExit, onExportLogs) {
+	let processes = [...initialProcesses];
+	let logs = [];
+	let rerender = null;
+	const proxyTarget = env.API_PROXY;
+	let logSeq = 0;
+	let lastLogKey = null;
+	const updateProcess = (name, status, message) => {
+		processes = processes.map((p) => p.name === name ? {
+			...p,
+			status,
+			message
+		} : p);
+		rerender?.();
+	};
+	const addLog = (source, line, isError = false) => {
+		const nextKey = `${source}:${isError ? "1" : "0"}:${line}`;
+		if (nextKey === lastLogKey) return;
+		lastLogKey = nextKey;
+		logs = [...logs, {
+			id: `${Date.now()}-${++logSeq}`,
+			source,
+			line,
+			timestamp: Date.now(),
+			isError
+		}];
+		if (logs.length > 100) logs = logs.slice(-100);
+		rerender?.();
+	};
+	function DevViewWrapper() {
+		const [, forceUpdate] = (0, react.useState)(0);
+		(0, react.useEffect)(() => {
+			rerender = () => forceUpdate((n) => n + 1);
+			return () => {
+				rerender = null;
+			};
+		}, []);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DevView, {
+			processes,
+			logs,
+			description,
+			proxyTarget,
+			onExit,
+			onExportLogs
+		});
+	}
+	const { unmount } = (0, ink.render)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DevViewWrapper, {}));
+	return {
+		updateProcess,
+		addLog,
+		unmount
+	};
+}
+
+//#endregion
+exports.renderDevView = renderDevView;
+//# sourceMappingURL=dev-view.cjs.map

package/dist/components/dev-view.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-view.cjs","names":["Text","icons","Box","linkify","frames","gradients","colors","divider"],"sources":["../../src/components/dev-view.tsx"],"sourcesContent":["import { Box, render, Text, useApp, useInput } from \"ink\";\nimport { useEffect, useState } from \"react\";\nimport type { SourceMode } from \"../types\";\nimport { linkify } from \"../utils/linkify\";\nimport { colors, divider, frames, gradients, icons } from \"../utils/theme\";\n\nconst PLUGIN_PREFIX = \"plugin:\";\n\nexport type ProcessStatus = \"pending\" | \"starting\" | \"ready\" | \"error\";\n\nexport interface ProcessState {\n  name: string;\n  status: ProcessStatus;\n  port: number;\n  message?: string;\n  source?: SourceMode;\n}\n\nexport interface LogEntry {\n  id: string;\n  source: string;\n  line: string;\n  timestamp: number;\n  isError?: boolean;\n}\n\ninterface DevViewProps {\n  processes: ProcessState[];\n  logs: LogEntry[];\n  description: string;\n  proxyTarget?: string;\n  onExit?: () => Promise<void> | void;\n  onExportLogs?: () => Promise<void> | void;\n}\n\nfunction StatusIcon({ status }: { status: ProcessStatus }) {\n  switch (status) {\n    case \"pending\":\n      return <Text color=\"gray\">{icons.pending}</Text>;\n    case \"starting\":\n      return <Text color=\"#00ffff\">{icons.scan}</Text>;\n    case \"ready\":\n      return <Text color=\"#00ff41\">{icons.ok}</Text>;\n    case \"error\":\n      return <Text color=\"#ff3366\">{icons.err}</Text>;\n  }\n}\n\nfunction getServiceColor(name: string): string {\n  if (name.startsWith(PLUGIN_PREFIX)) return \"#ffaa00\";\n  return name === \"host\" ? \"#00ffff\" : name === \"ui\" ? \"#ff00ff\" : \"#0080ff\";\n}\n\nfunction getDisplayName(name: string): string {\n  return name.startsWith(PLUGIN_PREFIX)\n    ? name.slice(PLUGIN_PREFIX.length).toUpperCase()\n    : name.toUpperCase();\n}\n\nfunction isPlugin(name: string): boolean {\n  return name.startsWith(PLUGIN_PREFIX);\n}\n\nfunction getSectionedProcesses(processes: ProcessState[]): Array<{\n  key: string;\n  title: string;\n  processes: ProcessState[];\n}> {\n  const plugins = processes.filter((p) => isPlugin(p.name));\n  const services = processes.filter((p) => !isPlugin(p.name));\n  const sections: Array<{ key: string; title: string; processes: ProcessState[] }> = [];\n  if (plugins.length > 0) sections.push({ key: \"plugins\", title: \"PLUGINS\", processes: plugins });\n  if (services.length > 0)\n    sections.push({ key: \"services\", title: \"SERVICES\", processes: services });\n  return sections;\n}\n\nfunction getColumnWidths(processes: ProcessState[]): { name: number; source: number } {\n  const name = Math.max(6, ...processes.map((p) => getDisplayName(p.name).length));\n  const source = Math.max(10, ...processes.map((p) => (p.source ? `(${p.source})`.length : 0)));\n  return { name, source };\n}\n\nfunction ProcessRow({\n  proc,\n  nameWidth,\n  sourceWidth,\n}: {\n  proc: ProcessState;\n  nameWidth: number;\n  sourceWidth: number;\n}) {\n  const color = getServiceColor(proc.name);\n  const portStr = proc.port > 0 ? `:${proc.port}` : \"\";\n  const sourceLabel = proc.source ? ` (${proc.source})` : \"\";\n\n  const statusText =\n    proc.status === \"pending\"\n      ? \"waiting\"\n      : proc.status === \"starting\"\n        ? \"starting\"\n        : proc.status === \"ready\"\n          ? \"running\"\n          : \"failed\";\n\n  return (\n    <Box>\n      <Text>{\"  \"}</Text>\n      <StatusIcon status={proc.status} />\n      <Text> </Text>\n      <Text color={color} bold>\n        {getDisplayName(proc.name).padEnd(nameWidth)}\n      </Text>\n      <Text color=\"gray\">{sourceLabel.padEnd(sourceWidth)}</Text>\n      <Text color={proc.status === \"ready\" ? \"#00ff41\" : \"gray\"}>{statusText}</Text>\n      {proc.port > 0 && <Text color=\"#00ffff\"> {portStr}</Text>}\n    </Box>\n  );\n}\n\nfunction SectionHeader({ title }: { title: string }) {\n  return (\n    <Box marginBottom={0} marginTop={1}>\n      <Text color=\"#00ffff\" bold>\n        {title}\n      </Text>\n    </Box>\n  );\n}\n\nfunction LogLine({ entry }: { entry: LogEntry }) {\n  const color = getServiceColor(entry.source);\n\n  return (\n    <Box>\n      <Text color={color}>[{entry.source}]</Text>\n      <Text color={entry.isError ? \"#ff3366\" : undefined}> {linkify(entry.line)}</Text>\n    </Box>\n  );\n}\n\nfunction truncateUrl(url: string, maxLen: number): string {\n  if (url.length <= maxLen) return url;\n  try {\n    const parsed = new URL(url);\n    const host = parsed.host;\n    if (host.length > maxLen - 10) {\n      return `${host.slice(0, maxLen - 13)}...`;\n    }\n    return host;\n  } catch {\n    return `${url.slice(0, maxLen - 3)}...`;\n  }\n}\n\nfunction DevView({\n  processes,\n  logs,\n  description,\n  proxyTarget,\n  onExit,\n  onExportLogs,\n}: DevViewProps) {\n  const { exit } = useApp();\n  const [isShuttingDown, setIsShuttingDown] = useState(false);\n\n  useInput((input, key) => {\n    if (isShuttingDown) return;\n\n    if (input === \"q\" || (key.ctrl && input === \"c\")) {\n      setIsShuttingDown(true);\n      Promise.resolve(onExit?.()).then(() => {\n        exit();\n      });\n    }\n    if (input === \"l\") {\n      setIsShuttingDown(true);\n      Promise.resolve(onExportLogs?.()).then(() => {\n        exit();\n      });\n    }\n  });\n\n  const readyCount = processes.filter((p) => p.status === \"ready\").length;\n  const total = processes.length;\n  const allReady = readyCount === total;\n  const hostProcess = processes.find((p) => p.name === \"host\");\n  const hostPort = hostProcess?.port || 3000;\n  const recentLogs = logs.slice(-12);\n  const sectionedProcesses = getSectionedProcesses(processes);\n  const columnWidths = getColumnWidths(processes);\n\n  return (\n    <Box flexDirection=\"column\">\n      <Box marginBottom={0}>\n        <Text color=\"#00ffff\">{frames.top(52)}</Text>\n      </Box>\n      <Box>\n        <Text>\n          {\"  \"}\n          {icons.run} {gradients.cyber(description.toUpperCase())}\n        </Text>\n      </Box>\n      <Box marginBottom={1}>\n        <Text color=\"#00ffff\">{frames.bottom(52)}</Text>\n      </Box>\n\n      {allReady && (\n        <Box marginBottom={1} flexDirection=\"column\">\n          <Box>\n            <Text color=\"#00ff41\">\n              {\"  \"}\n              {icons.app} APP READY\n            </Text>\n          </Box>\n          <Box>\n            <Text color=\"#00ff41\" bold>\n              {\"  \"}\n              {icons.arrow} http://localhost:{hostPort}\n            </Text>\n          </Box>\n        </Box>\n      )}\n\n      {proxyTarget && (\n        <Box marginBottom={1}>\n          <Text color=\"#ffaa00\">\n            {\"  \"}\n            {icons.arrow} API PROXY → {truncateUrl(proxyTarget, 38)}\n          </Text>\n        </Box>\n      )}\n\n      <Box marginTop={0} marginBottom={0}>\n        <Text>{colors.dim(divider(52))}</Text>\n      </Box>\n\n      {sectionedProcesses.map((section) => (\n        <Box key={section.key} flexDirection=\"column\">\n          <SectionHeader title={section.title} />\n          {section.processes.map((proc) => (\n            <ProcessRow\n              key={proc.name}\n              proc={proc}\n              nameWidth={columnWidths.name}\n              sourceWidth={columnWidths.source}\n            />\n          ))}\n        </Box>\n      ))}\n\n      <Box marginTop={1} marginBottom={0}>\n        <Text>{colors.dim(divider(52))}</Text>\n      </Box>\n\n      <Box marginTop={0}>\n        <Text color={allReady ? \"#00ff41\" : \"#00ffff\"}>\n          {\"  \"}\n          {allReady\n            ? `${icons.ok} All ${total} services running`\n            : `${icons.scan} ${readyCount}/${total} ready`}\n        </Text>\n        <Text color=\"gray\">\n          {\" \"}\n          {icons.dot} q quit {icons.dot} l logs\n        </Text>\n      </Box>\n\n      {recentLogs.length > 0 && (\n        <>\n          <Box marginTop={1} marginBottom={0}>\n            <Text>{colors.dim(divider(52))}</Text>\n          </Box>\n          <Box flexDirection=\"column\" marginTop={0}>\n            {recentLogs.map((entry) => (\n              <LogLine key={entry.id} entry={entry} />\n            ))}\n          </Box>\n        </>\n      )}\n    </Box>\n  );\n}\n\nexport interface DevViewHandle {\n  updateProcess: (name: string, status: ProcessStatus, message?: string) => void;\n  addLog: (source: string, line: string, isError?: boolean) => void;\n  unmount: () => void;\n}\n\nexport function renderDevView(\n  initialProcesses: ProcessState[],\n  description: string,\n  env: Record<string, string>,\n  onExit?: () => Promise<void> | void,\n  onExportLogs?: () => Promise<void> | void,\n): DevViewHandle {\n  let processes = [...initialProcesses];\n  let logs: LogEntry[] = [];\n  let rerender: (() => void) | null = null;\n  const proxyTarget = env.API_PROXY;\n  let logSeq = 0;\n  let lastLogKey: string | null = null;\n\n  const updateProcess = (name: string, status: ProcessStatus, message?: string) => {\n    processes = processes.map((p) => (p.name === name ? { ...p, status, message } : p));\n    rerender?.();\n  };\n\n  const addLog = (source: string, line: string, isError = false) => {\n    const nextKey = `${source}:${isError ? \"1\" : \"0\"}:${line}`;\n    if (nextKey === lastLogKey) return;\n    lastLogKey = nextKey;\n\n    logs = [\n      ...logs,\n      { id: `${Date.now()}-${++logSeq}`, source, line, timestamp: Date.now(), isError },\n    ];\n    if (logs.length > 100) logs = logs.slice(-100);\n    rerender?.();\n  };\n\n  function DevViewWrapper() {\n    const [, forceUpdate] = useState(0);\n\n    useEffect(() => {\n      rerender = () => forceUpdate((n: number) => n + 1);\n      return () => {\n        rerender = null;\n      };\n    }, []);\n\n    return (\n      <DevView\n        processes={processes}\n        logs={logs}\n        description={description}\n        proxyTarget={proxyTarget}\n        onExit={onExit}\n        onExportLogs={onExportLogs}\n      />\n    );\n  }\n\n  const { unmount } = render(<DevViewWrapper />);\n  return { updateProcess, addLog, unmount };\n}\n"],"mappings":"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"}

package/dist/components/dev-view.mjs

@@ -0,0 +1,306 @@
+import { linkify } from "../utils/linkify.mjs";
+import { colors, divider, frames, gradients, icons } from "../utils/theme.mjs";
+import { Box, Text, render, useApp, useInput } from "ink";
+import { useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/dev-view.tsx
+const PLUGIN_PREFIX = "plugin:";
+function StatusIcon({ status }) {
+	switch (status) {
+		case "pending": return /* @__PURE__ */ jsx(Text, {
+			color: "gray",
+			children: icons.pending
+		});
+		case "starting": return /* @__PURE__ */ jsx(Text, {
+			color: "#00ffff",
+			children: icons.scan
+		});
+		case "ready": return /* @__PURE__ */ jsx(Text, {
+			color: "#00ff41",
+			children: icons.ok
+		});
+		case "error": return /* @__PURE__ */ jsx(Text, {
+			color: "#ff3366",
+			children: icons.err
+		});
+	}
+}
+function getServiceColor(name) {
+	if (name.startsWith(PLUGIN_PREFIX)) return "#ffaa00";
+	return name === "host" ? "#00ffff" : name === "ui" ? "#ff00ff" : "#0080ff";
+}
+function getDisplayName(name) {
+	return name.startsWith(PLUGIN_PREFIX) ? name.slice(7).toUpperCase() : name.toUpperCase();
+}
+function isPlugin(name) {
+	return name.startsWith(PLUGIN_PREFIX);
+}
+function getSectionedProcesses(processes) {
+	const plugins = processes.filter((p) => isPlugin(p.name));
+	const services = processes.filter((p) => !isPlugin(p.name));
+	const sections = [];
+	if (plugins.length > 0) sections.push({
+		key: "plugins",
+		title: "PLUGINS",
+		processes: plugins
+	});
+	if (services.length > 0) sections.push({
+		key: "services",
+		title: "SERVICES",
+		processes: services
+	});
+	return sections;
+}
+function getColumnWidths(processes) {
+	return {
+		name: Math.max(6, ...processes.map((p) => getDisplayName(p.name).length)),
+		source: Math.max(10, ...processes.map((p) => p.source ? `(${p.source})`.length : 0))
+	};
+}
+function ProcessRow({ proc, nameWidth, sourceWidth }) {
+	const color = getServiceColor(proc.name);
+	const portStr = proc.port > 0 ? `:${proc.port}` : "";
+	const sourceLabel = proc.source ? ` (${proc.source})` : "";
+	const statusText = proc.status === "pending" ? "waiting" : proc.status === "starting" ? "starting" : proc.status === "ready" ? "running" : "failed";
+	return /* @__PURE__ */ jsxs(Box, { children: [
+		/* @__PURE__ */ jsx(Text, { children: "  " }),
+		/* @__PURE__ */ jsx(StatusIcon, { status: proc.status }),
+		/* @__PURE__ */ jsx(Text, { children: " " }),
+		/* @__PURE__ */ jsx(Text, {
+			color,
+			bold: true,
+			children: getDisplayName(proc.name).padEnd(nameWidth)
+		}),
+		/* @__PURE__ */ jsx(Text, {
+			color: "gray",
+			children: sourceLabel.padEnd(sourceWidth)
+		}),
+		/* @__PURE__ */ jsx(Text, {
+			color: proc.status === "ready" ? "#00ff41" : "gray",
+			children: statusText
+		}),
+		proc.port > 0 && /* @__PURE__ */ jsxs(Text, {
+			color: "#00ffff",
+			children: [" ", portStr]
+		})
+	] });
+}
+function SectionHeader({ title }) {
+	return /* @__PURE__ */ jsx(Box, {
+		marginBottom: 0,
+		marginTop: 1,
+		children: /* @__PURE__ */ jsx(Text, {
+			color: "#00ffff",
+			bold: true,
+			children: title
+		})
+	});
+}
+function LogLine({ entry }) {
+	return /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsxs(Text, {
+		color: getServiceColor(entry.source),
+		children: [
+			"[",
+			entry.source,
+			"]"
+		]
+	}), /* @__PURE__ */ jsxs(Text, {
+		color: entry.isError ? "#ff3366" : void 0,
+		children: [" ", linkify(entry.line)]
+	})] });
+}
+function truncateUrl(url, maxLen) {
+	if (url.length <= maxLen) return url;
+	try {
+		const host = new URL(url).host;
+		if (host.length > maxLen - 10) return `${host.slice(0, maxLen - 13)}...`;
+		return host;
+	} catch {
+		return `${url.slice(0, maxLen - 3)}...`;
+	}
+}
+function DevView({ processes, logs, description, proxyTarget, onExit, onExportLogs }) {
+	const { exit } = useApp();
+	const [isShuttingDown, setIsShuttingDown] = useState(false);
+	useInput((input, key) => {
+		if (isShuttingDown) return;
+		if (input === "q" || key.ctrl && input === "c") {
+			setIsShuttingDown(true);
+			Promise.resolve(onExit?.()).then(() => {
+				exit();
+			});
+		}
+		if (input === "l") {
+			setIsShuttingDown(true);
+			Promise.resolve(onExportLogs?.()).then(() => {
+				exit();
+			});
+		}
+	});
+	const readyCount = processes.filter((p) => p.status === "ready").length;
+	const total = processes.length;
+	const allReady = readyCount === total;
+	const hostPort = processes.find((p) => p.name === "host")?.port || 3e3;
+	const recentLogs = logs.slice(-12);
+	const sectionedProcesses = getSectionedProcesses(processes);
+	const columnWidths = getColumnWidths(processes);
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [
+			/* @__PURE__ */ jsx(Box, {
+				marginBottom: 0,
+				children: /* @__PURE__ */ jsx(Text, {
+					color: "#00ffff",
+					children: frames.top(52)
+				})
+			}),
+			/* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { children: [
+				"  ",
+				icons.run,
+				" ",
+				gradients.cyber(description.toUpperCase())
+			] }) }),
+			/* @__PURE__ */ jsx(Box, {
+				marginBottom: 1,
+				children: /* @__PURE__ */ jsx(Text, {
+					color: "#00ffff",
+					children: frames.bottom(52)
+				})
+			}),
+			allReady && /* @__PURE__ */ jsxs(Box, {
+				marginBottom: 1,
+				flexDirection: "column",
+				children: [/* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, {
+					color: "#00ff41",
+					children: [
+						"  ",
+						icons.app,
+						" APP READY"
+					]
+				}) }), /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, {
+					color: "#00ff41",
+					bold: true,
+					children: [
+						"  ",
+						icons.arrow,
+						" http://localhost:",
+						hostPort
+					]
+				}) })]
+			}),
+			proxyTarget && /* @__PURE__ */ jsx(Box, {
+				marginBottom: 1,
+				children: /* @__PURE__ */ jsxs(Text, {
+					color: "#ffaa00",
+					children: [
+						"  ",
+						icons.arrow,
+						" API PROXY → ",
+						truncateUrl(proxyTarget, 38)
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				marginTop: 0,
+				marginBottom: 0,
+				children: /* @__PURE__ */ jsx(Text, { children: colors.dim(divider(52)) })
+			}),
+			sectionedProcesses.map((section) => /* @__PURE__ */ jsxs(Box, {
+				flexDirection: "column",
+				children: [/* @__PURE__ */ jsx(SectionHeader, { title: section.title }), section.processes.map((proc) => /* @__PURE__ */ jsx(ProcessRow, {
+					proc,
+					nameWidth: columnWidths.name,
+					sourceWidth: columnWidths.source
+				}, proc.name))]
+			}, section.key)),
+			/* @__PURE__ */ jsx(Box, {
+				marginTop: 1,
+				marginBottom: 0,
+				children: /* @__PURE__ */ jsx(Text, { children: colors.dim(divider(52)) })
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				marginTop: 0,
+				children: [/* @__PURE__ */ jsxs(Text, {
+					color: allReady ? "#00ff41" : "#00ffff",
+					children: ["  ", allReady ? `${icons.ok} All ${total} services running` : `${icons.scan} ${readyCount}/${total} ready`]
+				}), /* @__PURE__ */ jsxs(Text, {
+					color: "gray",
+					children: [
+						" ",
+						icons.dot,
+						" q quit ",
+						icons.dot,
+						" l logs"
+					]
+				})]
+			}),
+			recentLogs.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Box, {
+				marginTop: 1,
+				marginBottom: 0,
+				children: /* @__PURE__ */ jsx(Text, { children: colors.dim(divider(52)) })
+			}), /* @__PURE__ */ jsx(Box, {
+				flexDirection: "column",
+				marginTop: 0,
+				children: recentLogs.map((entry) => /* @__PURE__ */ jsx(LogLine, { entry }, entry.id))
+			})] })
+		]
+	});
+}
+function renderDevView(initialProcesses, description, env, onExit, onExportLogs) {
+	let processes = [...initialProcesses];
+	let logs = [];
+	let rerender = null;
+	const proxyTarget = env.API_PROXY;
+	let logSeq = 0;
+	let lastLogKey = null;
+	const updateProcess = (name, status, message) => {
+		processes = processes.map((p) => p.name === name ? {
+			...p,
+			status,
+			message
+		} : p);
+		rerender?.();
+	};
+	const addLog = (source, line, isError = false) => {
+		const nextKey = `${source}:${isError ? "1" : "0"}:${line}`;
+		if (nextKey === lastLogKey) return;
+		lastLogKey = nextKey;
+		logs = [...logs, {
+			id: `${Date.now()}-${++logSeq}`,
+			source,
+			line,
+			timestamp: Date.now(),
+			isError
+		}];
+		if (logs.length > 100) logs = logs.slice(-100);
+		rerender?.();
+	};
+	function DevViewWrapper() {
+		const [, forceUpdate] = useState(0);
+		useEffect(() => {
+			rerender = () => forceUpdate((n) => n + 1);
+			return () => {
+				rerender = null;
+			};
+		}, []);
+		return /* @__PURE__ */ jsx(DevView, {
+			processes,
+			logs,
+			description,
+			proxyTarget,
+			onExit,
+			onExportLogs
+		});
+	}
+	const { unmount } = render(/* @__PURE__ */ jsx(DevViewWrapper, {}));
+	return {
+		updateProcess,
+		addLog,
+		unmount
+	};
+}
+
+//#endregion
+export { renderDevView };
+//# sourceMappingURL=dev-view.mjs.map

package/dist/components/dev-view.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-view.mjs","names":[],"sources":["../../src/components/dev-view.tsx"],"sourcesContent":["import { Box, render, Text, useApp, useInput } from \"ink\";\nimport { useEffect, useState } from \"react\";\nimport type { SourceMode } from \"../types\";\nimport { linkify } from \"../utils/linkify\";\nimport { colors, divider, frames, gradients, icons } from \"../utils/theme\";\n\nconst PLUGIN_PREFIX = \"plugin:\";\n\nexport type ProcessStatus = \"pending\" | \"starting\" | \"ready\" | \"error\";\n\nexport interface ProcessState {\n  name: string;\n  status: ProcessStatus;\n  port: number;\n  message?: string;\n  source?: SourceMode;\n}\n\nexport interface LogEntry {\n  id: string;\n  source: string;\n  line: string;\n  timestamp: number;\n  isError?: boolean;\n}\n\ninterface DevViewProps {\n  processes: ProcessState[];\n  logs: LogEntry[];\n  description: string;\n  proxyTarget?: string;\n  onExit?: () => Promise<void> | void;\n  onExportLogs?: () => Promise<void> | void;\n}\n\nfunction StatusIcon({ status }: { status: ProcessStatus }) {\n  switch (status) {\n    case \"pending\":\n      return <Text color=\"gray\">{icons.pending}</Text>;\n    case \"starting\":\n      return <Text color=\"#00ffff\">{icons.scan}</Text>;\n    case \"ready\":\n      return <Text color=\"#00ff41\">{icons.ok}</Text>;\n    case \"error\":\n      return <Text color=\"#ff3366\">{icons.err}</Text>;\n  }\n}\n\nfunction getServiceColor(name: string): string {\n  if (name.startsWith(PLUGIN_PREFIX)) return \"#ffaa00\";\n  return name === \"host\" ? \"#00ffff\" : name === \"ui\" ? \"#ff00ff\" : \"#0080ff\";\n}\n\nfunction getDisplayName(name: string): string {\n  return name.startsWith(PLUGIN_PREFIX)\n    ? name.slice(PLUGIN_PREFIX.length).toUpperCase()\n    : name.toUpperCase();\n}\n\nfunction isPlugin(name: string): boolean {\n  return name.startsWith(PLUGIN_PREFIX);\n}\n\nfunction getSectionedProcesses(processes: ProcessState[]): Array<{\n  key: string;\n  title: string;\n  processes: ProcessState[];\n}> {\n  const plugins = processes.filter((p) => isPlugin(p.name));\n  const services = processes.filter((p) => !isPlugin(p.name));\n  const sections: Array<{ key: string; title: string; processes: ProcessState[] }> = [];\n  if (plugins.length > 0) sections.push({ key: \"plugins\", title: \"PLUGINS\", processes: plugins });\n  if (services.length > 0)\n    sections.push({ key: \"services\", title: \"SERVICES\", processes: services });\n  return sections;\n}\n\nfunction getColumnWidths(processes: ProcessState[]): { name: number; source: number } {\n  const name = Math.max(6, ...processes.map((p) => getDisplayName(p.name).length));\n  const source = Math.max(10, ...processes.map((p) => (p.source ? `(${p.source})`.length : 0)));\n  return { name, source };\n}\n\nfunction ProcessRow({\n  proc,\n  nameWidth,\n  sourceWidth,\n}: {\n  proc: ProcessState;\n  nameWidth: number;\n  sourceWidth: number;\n}) {\n  const color = getServiceColor(proc.name);\n  const portStr = proc.port > 0 ? `:${proc.port}` : \"\";\n  const sourceLabel = proc.source ? ` (${proc.source})` : \"\";\n\n  const statusText =\n    proc.status === \"pending\"\n      ? \"waiting\"\n      : proc.status === \"starting\"\n        ? \"starting\"\n        : proc.status === \"ready\"\n          ? \"running\"\n          : \"failed\";\n\n  return (\n    <Box>\n      <Text>{\"  \"}</Text>\n      <StatusIcon status={proc.status} />\n      <Text> </Text>\n      <Text color={color} bold>\n        {getDisplayName(proc.name).padEnd(nameWidth)}\n      </Text>\n      <Text color=\"gray\">{sourceLabel.padEnd(sourceWidth)}</Text>\n      <Text color={proc.status === \"ready\" ? \"#00ff41\" : \"gray\"}>{statusText}</Text>\n      {proc.port > 0 && <Text color=\"#00ffff\"> {portStr}</Text>}\n    </Box>\n  );\n}\n\nfunction SectionHeader({ title }: { title: string }) {\n  return (\n    <Box marginBottom={0} marginTop={1}>\n      <Text color=\"#00ffff\" bold>\n        {title}\n      </Text>\n    </Box>\n  );\n}\n\nfunction LogLine({ entry }: { entry: LogEntry }) {\n  const color = getServiceColor(entry.source);\n\n  return (\n    <Box>\n      <Text color={color}>[{entry.source}]</Text>\n      <Text color={entry.isError ? \"#ff3366\" : undefined}> {linkify(entry.line)}</Text>\n    </Box>\n  );\n}\n\nfunction truncateUrl(url: string, maxLen: number): string {\n  if (url.length <= maxLen) return url;\n  try {\n    const parsed = new URL(url);\n    const host = parsed.host;\n    if (host.length > maxLen - 10) {\n      return `${host.slice(0, maxLen - 13)}...`;\n    }\n    return host;\n  } catch {\n    return `${url.slice(0, maxLen - 3)}...`;\n  }\n}\n\nfunction DevView({\n  processes,\n  logs,\n  description,\n  proxyTarget,\n  onExit,\n  onExportLogs,\n}: DevViewProps) {\n  const { exit } = useApp();\n  const [isShuttingDown, setIsShuttingDown] = useState(false);\n\n  useInput((input, key) => {\n    if (isShuttingDown) return;\n\n    if (input === \"q\" || (key.ctrl && input === \"c\")) {\n      setIsShuttingDown(true);\n      Promise.resolve(onExit?.()).then(() => {\n        exit();\n      });\n    }\n    if (input === \"l\") {\n      setIsShuttingDown(true);\n      Promise.resolve(onExportLogs?.()).then(() => {\n        exit();\n      });\n    }\n  });\n\n  const readyCount = processes.filter((p) => p.status === \"ready\").length;\n  const total = processes.length;\n  const allReady = readyCount === total;\n  const hostProcess = processes.find((p) => p.name === \"host\");\n  const hostPort = hostProcess?.port || 3000;\n  const recentLogs = logs.slice(-12);\n  const sectionedProcesses = getSectionedProcesses(processes);\n  const columnWidths = getColumnWidths(processes);\n\n  return (\n    <Box flexDirection=\"column\">\n      <Box marginBottom={0}>\n        <Text color=\"#00ffff\">{frames.top(52)}</Text>\n      </Box>\n      <Box>\n        <Text>\n          {\"  \"}\n          {icons.run} {gradients.cyber(description.toUpperCase())}\n        </Text>\n      </Box>\n      <Box marginBottom={1}>\n        <Text color=\"#00ffff\">{frames.bottom(52)}</Text>\n      </Box>\n\n      {allReady && (\n        <Box marginBottom={1} flexDirection=\"column\">\n          <Box>\n            <Text color=\"#00ff41\">\n              {\"  \"}\n              {icons.app} APP READY\n            </Text>\n          </Box>\n          <Box>\n            <Text color=\"#00ff41\" bold>\n              {\"  \"}\n              {icons.arrow} http://localhost:{hostPort}\n            </Text>\n          </Box>\n        </Box>\n      )}\n\n      {proxyTarget && (\n        <Box marginBottom={1}>\n          <Text color=\"#ffaa00\">\n            {\"  \"}\n            {icons.arrow} API PROXY → {truncateUrl(proxyTarget, 38)}\n          </Text>\n        </Box>\n      )}\n\n      <Box marginTop={0} marginBottom={0}>\n        <Text>{colors.dim(divider(52))}</Text>\n      </Box>\n\n      {sectionedProcesses.map((section) => (\n        <Box key={section.key} flexDirection=\"column\">\n          <SectionHeader title={section.title} />\n          {section.processes.map((proc) => (\n            <ProcessRow\n              key={proc.name}\n              proc={proc}\n              nameWidth={columnWidths.name}\n              sourceWidth={columnWidths.source}\n            />\n          ))}\n        </Box>\n      ))}\n\n      <Box marginTop={1} marginBottom={0}>\n        <Text>{colors.dim(divider(52))}</Text>\n      </Box>\n\n      <Box marginTop={0}>\n        <Text color={allReady ? \"#00ff41\" : \"#00ffff\"}>\n          {\"  \"}\n          {allReady\n            ? `${icons.ok} All ${total} services running`\n            : `${icons.scan} ${readyCount}/${total} ready`}\n        </Text>\n        <Text color=\"gray\">\n          {\" \"}\n          {icons.dot} q quit {icons.dot} l logs\n        </Text>\n      </Box>\n\n      {recentLogs.length > 0 && (\n        <>\n          <Box marginTop={1} marginBottom={0}>\n            <Text>{colors.dim(divider(52))}</Text>\n          </Box>\n          <Box flexDirection=\"column\" marginTop={0}>\n            {recentLogs.map((entry) => (\n              <LogLine key={entry.id} entry={entry} />\n            ))}\n          </Box>\n        </>\n      )}\n    </Box>\n  );\n}\n\nexport interface DevViewHandle {\n  updateProcess: (name: string, status: ProcessStatus, message?: string) => void;\n  addLog: (source: string, line: string, isError?: boolean) => void;\n  unmount: () => void;\n}\n\nexport function renderDevView(\n  initialProcesses: ProcessState[],\n  description: string,\n  env: Record<string, string>,\n  onExit?: () => Promise<void> | void,\n  onExportLogs?: () => Promise<void> | void,\n): DevViewHandle {\n  let processes = [...initialProcesses];\n  let logs: LogEntry[] = [];\n  let rerender: (() => void) | null = null;\n  const proxyTarget = env.API_PROXY;\n  let logSeq = 0;\n  let lastLogKey: string | null = null;\n\n  const updateProcess = (name: string, status: ProcessStatus, message?: string) => {\n    processes = processes.map((p) => (p.name === name ? { ...p, status, message } : p));\n    rerender?.();\n  };\n\n  const addLog = (source: string, line: string, isError = false) => {\n    const nextKey = `${source}:${isError ? \"1\" : \"0\"}:${line}`;\n    if (nextKey === lastLogKey) return;\n    lastLogKey = nextKey;\n\n    logs = [\n      ...logs,\n      { id: `${Date.now()}-${++logSeq}`, source, line, timestamp: Date.now(), isError },\n    ];\n    if (logs.length > 100) logs = logs.slice(-100);\n    rerender?.();\n  };\n\n  function DevViewWrapper() {\n    const [, forceUpdate] = useState(0);\n\n    useEffect(() => {\n      rerender = () => forceUpdate((n: number) => n + 1);\n      return () => {\n        rerender = null;\n      };\n    }, []);\n\n    return (\n      <DevView\n        processes={processes}\n        logs={logs}\n        description={description}\n        proxyTarget={proxyTarget}\n        onExit={onExit}\n        onExportLogs={onExportLogs}\n      />\n    );\n  }\n\n  const { unmount } = render(<DevViewWrapper />);\n  return { updateProcess, addLog, unmount };\n}\n"],"mappings":"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"}