everything-dev 0.3.2 → 1.3.2

package/src/components/dev-view.tsx

@@ -1,8 +1,11 @@
 import { Box, render, Text, useApp, useInput } from "ink";
 import { useEffect, useState } from "react";
+import type { SourceMode } from "../types";
 import { linkify } from "../utils/linkify";
 import { colors, divider, frames, gradients, icons } from "../utils/theme";
 
+const PLUGIN_PREFIX = "plugin:";
+
 export type ProcessStatus = "pending" | "starting" | "ready" | "error";
 
 export interface ProcessState {
@@ -10,11 +13,11 @@ export interface ProcessState {
   status: ProcessStatus;
   port: number;
   message?: string;
-  source?: "local" | "remote";
-  proxyTarget?: string;
+  source?: SourceMode;
 }
 
 export interface LogEntry {
+  id: string;
   source: string;
   line: string;
   timestamp: number;
@@ -26,8 +29,8 @@ interface DevViewProps {
   logs: LogEntry[];
   description: string;
   proxyTarget?: string;
-  onExit?: () => void;
-  onExportLogs?: () => void;
+  onExit?: () => Promise<void> | void;
+  onExportLogs?: () => Promise<void> | void;
 }
 
 function StatusIcon({ status }: { status: ProcessStatus }) {
@@ -44,10 +47,49 @@ function StatusIcon({ status }: { status: ProcessStatus }) {
 }
 
 function getServiceColor(name: string): string {
+  if (name.startsWith(PLUGIN_PREFIX)) return "#ffaa00";
   return name === "host" ? "#00ffff" : name === "ui" ? "#ff00ff" : "#0080ff";
 }
 
-function ProcessRow({ proc }: { proc: ProcessState }) {
+function getDisplayName(name: string): string {
+  return name.startsWith(PLUGIN_PREFIX)
+    ? name.slice(PLUGIN_PREFIX.length).toUpperCase()
+    : name.toUpperCase();
+}
+
+function isPlugin(name: string): boolean {
+  return name.startsWith(PLUGIN_PREFIX);
+}
+
+function getSectionedProcesses(processes: ProcessState[]): Array<{
+  key: string;
+  title: string;
+  processes: ProcessState[];
+}> {
+  const plugins = processes.filter((p) => isPlugin(p.name));
+  const services = processes.filter((p) => !isPlugin(p.name));
+  const sections: Array<{ key: string; title: string; processes: ProcessState[] }> = [];
+  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: ProcessState[]): { name: number; source: number } {
+  const name = Math.max(6, ...processes.map((p) => getDisplayName(p.name).length));
+  const source = Math.max(10, ...processes.map((p) => (p.source ? `(${p.source})`.length : 0)));
+  return { name, source };
+}
+
+function ProcessRow({
+  proc,
+  nameWidth,
+  sourceWidth,
+}: {
+  proc: ProcessState;
+  nameWidth: number;
+  sourceWidth: number;
+}) {
   const color = getServiceColor(proc.name);
   const portStr = proc.port > 0 ? `:${proc.port}` : "";
   const sourceLabel = proc.source ? ` (${proc.source})` : "";
@@ -67,27 +109,32 @@ function ProcessRow({ proc }: { proc: ProcessState }) {
       <StatusIcon status={proc.status} />
       <Text> </Text>
       <Text color={color} bold>
-        {proc.name.toUpperCase().padEnd(6)}
-      </Text>
-      <Text color="gray">{sourceLabel.padEnd(10)}</Text>
-      <Text color={proc.status === "ready" ? "#00ff41" : "gray"}>
-        {statusText}
+        {getDisplayName(proc.name).padEnd(nameWidth)}
       </Text>
+      <Text color="gray">{sourceLabel.padEnd(sourceWidth)}</Text>
+      <Text color={proc.status === "ready" ? "#00ff41" : "gray"}>{statusText}</Text>
       {proc.port > 0 && <Text color="#00ffff"> {portStr}</Text>}
     </Box>
   );
 }
 
+function SectionHeader({ title }: { title: string }) {
+  return (
+    <Box marginBottom={0} marginTop={1}>
+      <Text color="#00ffff" bold>
+        {title}
+      </Text>
+    </Box>
+  );
+}
+
 function LogLine({ entry }: { entry: LogEntry }) {
   const color = getServiceColor(entry.source);
 
   return (
     <Box>
       <Text color={color}>[{entry.source}]</Text>
-      <Text color={entry.isError ? "#ff3366" : undefined}>
-        {" "}
-        {linkify(entry.line)}
-      </Text>
+      <Text color={entry.isError ? "#ff3366" : undefined}> {linkify(entry.line)}</Text>
     </Box>
   );
 }
@@ -115,15 +162,22 @@ function DevView({
   onExportLogs,
 }: DevViewProps) {
   const { exit } = useApp();
+  const [isShuttingDown, setIsShuttingDown] = useState(false);
 
   useInput((input, key) => {
+    if (isShuttingDown) return;
+
     if (input === "q" || (key.ctrl && input === "c")) {
-      onExit?.();
-      exit();
+      setIsShuttingDown(true);
+      Promise.resolve(onExit?.()).then(() => {
+        exit();
+      });
     }
     if (input === "l") {
-      onExportLogs?.();
-      exit();
+      setIsShuttingDown(true);
+      Promise.resolve(onExportLogs?.()).then(() => {
+        exit();
+      });
     }
   });
 
@@ -132,8 +186,9 @@ function DevView({
   const allReady = readyCount === total;
   const hostProcess = processes.find((p) => p.name === "host");
   const hostPort = hostProcess?.port || 3000;
-
   const recentLogs = logs.slice(-12);
+  const sectionedProcesses = getSectionedProcesses(processes);
+  const columnWidths = getColumnWidths(processes);
 
   return (
     <Box flexDirection="column">
@@ -180,8 +235,18 @@ function DevView({
         <Text>{colors.dim(divider(52))}</Text>
       </Box>
 
-      {processes.map((proc) => (
-        <ProcessRow key={proc.name} proc={proc} />
+      {sectionedProcesses.map((section) => (
+        <Box key={section.key} flexDirection="column">
+          <SectionHeader title={section.title} />
+          {section.processes.map((proc) => (
+            <ProcessRow
+              key={proc.name}
+              proc={proc}
+              nameWidth={columnWidths.name}
+              sourceWidth={columnWidths.source}
+            />
+          ))}
+        </Box>
       ))}
 
       <Box marginTop={1} marginBottom={0}>
@@ -207,8 +272,8 @@ function DevView({
             <Text>{colors.dim(divider(52))}</Text>
           </Box>
           <Box flexDirection="column" marginTop={0}>
-            {recentLogs.map((entry, i) => (
-              <LogLine key={`${entry.timestamp}-${i}`} entry={entry} />
+            {recentLogs.map((entry) => (
+              <LogLine key={entry.id} entry={entry} />
             ))}
           </Box>
         </>
@@ -218,11 +283,7 @@ function DevView({
 }
 
 export interface DevViewHandle {
-  updateProcess: (
-    name: string,
-    status: ProcessStatus,
-    message?: string,
-  ) => void;
+  updateProcess: (name: string, status: ProcessStatus, message?: string) => void;
   addLog: (source: string, line: string, isError?: boolean) => void;
   unmount: () => void;
 }
@@ -231,27 +292,30 @@ export function renderDevView(
   initialProcesses: ProcessState[],
   description: string,
   env: Record<string, string>,
-  onExit?: () => void,
-  onExportLogs?: () => void,
+  onExit?: () => Promise<void> | void,
+  onExportLogs?: () => Promise<void> | void,
 ): DevViewHandle {
   let processes = [...initialProcesses];
   let logs: LogEntry[] = [];
   let rerender: (() => void) | null = null;
   const proxyTarget = env.API_PROXY;
+  let logSeq = 0;
+  let lastLogKey: string | null = null;
 
-  const updateProcess = (
-    name: string,
-    status: ProcessStatus,
-    message?: string,
-  ) => {
-    processes = processes.map((p) =>
-      p.name === name ? { ...p, status, message } : p,
-    );
+  const updateProcess = (name: string, status: ProcessStatus, message?: string) => {
+    processes = processes.map((p) => (p.name === name ? { ...p, status, message } : p));
     rerender?.();
   };
 
   const addLog = (source: string, line: string, isError = false) => {
-    logs = [...logs, { source, line, timestamp: Date.now(), isError }];
+    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?.();
   };
@@ -260,7 +324,7 @@ export function renderDevView(
     const [, forceUpdate] = useState(0);
 
     useEffect(() => {
-      rerender = () => forceUpdate((n) => n + 1);
+      rerender = () => forceUpdate((n: number) => n + 1);
       return () => {
         rerender = null;
       };
@@ -279,6 +343,5 @@ export function renderDevView(
   }
 
   const { unmount } = render(<DevViewWrapper />);
-
   return { updateProcess, addLog, unmount };
 }

package/src/components/streaming-view.ts

@@ -4,11 +4,12 @@ import { colors, icons } from "../utils/theme";
 import type { ProcessState, ProcessStatus } from "./dev-view";
 
 const orange = chalk.hex("#ffaa00");
+const PLUGIN_PREFIX = "plugin:";
 
 export interface StreamingViewHandle {
   updateProcess: (name: string, status: ProcessStatus, message?: string) => void;
   addLog: (source: string, line: string, isError?: boolean) => void;
-  unmount: () => void;
+  unmount: () => Promise<void> | void;
 }
 
 const getTimestamp = (): string => {
@@ -16,21 +17,50 @@ const getTimestamp = (): string => {
   return `${now.getHours().toString().padStart(2, "0")}:${now.getMinutes().toString().padStart(2, "0")}:${now.getSeconds().toString().padStart(2, "0")}`;
 };
 
-const write = (text: string) => process.stdout.write(text + "\n");
+const write = (text: string) => process.stdout.write(`${text}\n`);
 
-const getServiceColor = (name: string): (s: string) => string => {
+const getServiceColor = (name: string): ((s: string) => string) => {
+  if (name.startsWith(PLUGIN_PREFIX)) return orange;
   if (name === "host") return colors.cyan;
   if (name === "ui" || name === "ui-ssr") return colors.magenta;
   if (name === "api") return colors.blue;
   return colors.white;
 };
 
+const getDisplayName = (name: string): string => {
+  return name.startsWith(PLUGIN_PREFIX)
+    ? name.slice(PLUGIN_PREFIX.length).toUpperCase()
+    : name.toUpperCase();
+};
+
+const isPlugin = (name: string): boolean => name.startsWith(PLUGIN_PREFIX);
+
+const getSectionedProcesses = (processes: ProcessState[]) => {
+  const plugins = processes.filter((p) => isPlugin(p.name));
+  const services = processes.filter((p) => !isPlugin(p.name));
+  const sections: Array<{ key: string; title: string; processes: ProcessState[] }> = [];
+  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;
+};
+
+const getColumnWidths = (processes: ProcessState[]) => {
+  const name = Math.max(6, ...processes.map((p) => getDisplayName(p.name).length));
+  const source = Math.max(10, ...processes.map((p) => (p.source ? ` (${p.source})`.length : 0)));
+  return { name, source };
+};
+
 const getStatusIcon = (status: ProcessStatus): string => {
   switch (status) {
-    case "pending": return icons.pending;
-    case "starting": return icons.scan;
-    case "ready": return icons.ok;
-    case "error": return icons.err;
+    case "pending":
+      return icons.pending;
+    case "starting":
+      return icons.scan;
+    case "ready":
+      return icons.ok;
+    case "error":
+      return icons.err;
   }
 };
 
@@ -38,8 +68,7 @@ export function renderStreamingView(
   initialProcesses: ProcessState[],
   description: string,
   env: Record<string, string>,
-  onExit?: () => void,
-  _onExportLogs?: () => void,
+  onExit?: () => Promise<void> | void,
 ): StreamingViewHandle {
   const processes = new Map<string, ProcessState>();
   for (const p of initialProcesses) {
@@ -47,9 +76,12 @@ export function renderStreamingView(
   }
 
   let allReadyPrinted = false;
-  const hostProcess = initialProcesses.find(p => p.name === "host");
+  const hostProcess = initialProcesses.find((p) => p.name === "host");
   const hostPort = hostProcess?.port || 3000;
   const proxyTarget = env.API_PROXY;
+  const sectionedProcesses = getSectionedProcesses(initialProcesses);
+  const columnWidths = getColumnWidths(initialProcesses);
+  const lastLogBySource = new Map<string, string>();
 
   console.log();
   console.log(colors.cyan(`${"─".repeat(52)}`));
@@ -62,16 +94,21 @@ export function renderStreamingView(
     console.log();
   }
 
-  for (const proc of initialProcesses) {
-    const color = getServiceColor(proc.name);
-    const sourceLabel = proc.source ? ` (${proc.source})` : "";
-    console.log(`${colors.dim(`[${getTimestamp()}]`)} ${color(`[${proc.name.toUpperCase()}]`)}  ${icons.pending} waiting${sourceLabel}`);
+  for (const section of sectionedProcesses) {
+    console.log(colors.cyan(`  ${section.title}`));
+    for (const proc of section.processes) {
+      const color = getServiceColor(proc.name);
+      const sourceLabel = proc.source ? ` (${proc.source})` : "";
+      console.log(
+        `${colors.dim(`[${getTimestamp()}]`)} ${color(`[${getDisplayName(proc.name).padEnd(columnWidths.name)}]`)}  ${icons.pending} waiting${sourceLabel.padEnd(columnWidths.source)}`,
+      );
+    }
+    console.log();
   }
 
   const checkAllReady = () => {
     if (allReadyPrinted) return;
-
-    const allReady = Array.from(processes.values()).every(p => p.status === "ready");
+    const allReady = Array.from(processes.values()).every((p) => p.status === "ready");
     if (allReady) {
       allReadyPrinted = true;
       console.log();
@@ -92,28 +129,58 @@ export function renderStreamingView(
 
     const color = getServiceColor(name);
     const icon = getStatusIcon(status);
-    const statusText = status === "ready" ? "ready" : status === "starting" ? "starting" : status === "error" ? "failed" : "waiting";
+    const displayName = getDisplayName(name).padEnd(columnWidths.name);
+    const sourceLabel = proc?.source ? ` (${proc.source})` : "";
+    const statusText =
+      status === "ready"
+        ? "ready"
+        : status === "starting"
+          ? "starting"
+          : status === "error"
+            ? "failed"
+            : "waiting";
     const portStr = proc.port > 0 && status === "ready" ? ` :${proc.port}` : "";
 
-    write(`${colors.dim(`[${getTimestamp()}]`)} ${color(`[${name.toUpperCase()}]`)}  ${status === "ready" ? colors.green(icon) : status === "error" ? colors.error(icon) : icon} ${statusText}${portStr}`);
+    write(
+      `${colors.dim(`[${getTimestamp()}]`)} ${color(`[${displayName}]`)}  ${status === "ready" ? colors.green(icon) : status === "error" ? colors.error(icon) : icon} ${statusText}${sourceLabel.padEnd(columnWidths.source)}${portStr}`,
+    );
 
     checkAllReady();
   };
 
   const addLog = (source: string, line: string, isError = false) => {
+    const lastLine = lastLogBySource.get(source);
+    const nextLine = `${isError ? "ERR" : "OUT"}:${line}`;
+    if (lastLine === nextLine) return;
+    lastLogBySource.set(source, nextLine);
+
     const color = getServiceColor(source);
     const logColor = isError ? colors.error : colors.dim;
-    write(`${colors.dim(`[${getTimestamp()}]`)} ${color(`[${source.toUpperCase()}]`)}  ${colors.dim("│")} ${logColor(linkify(line))}`);
+    write(
+      `${colors.dim(`[${getTimestamp()}]`)} ${color(`[${source.toUpperCase()}]`)}  ${colors.dim("│")} ${logColor(linkify(line))}`,
+    );
   };
 
-  const unmount = () => {
-    onExit?.();
+  const unmount = () => onExit?.();
+
+  let signalCount = 0;
+  const forceExit = () => {
+    console.log("\n[CLI] Force exit");
+    process.exit(0);
   };
 
   process.on("SIGINT", () => {
+    signalCount++;
+    if (signalCount > 1) {
+      forceExit();
+      return;
+    }
     console.log();
     console.log(colors.dim(`[${getTimestamp()}] Shutting down...`));
-    unmount();
+    const timeout = setTimeout(forceExit, 5000);
+    Promise.resolve(unmount()).then(() => {
+      clearTimeout(timeout);
+    });
   });
 
   return { updateProcess, addLog, unmount };