everything-dev 1.27.0 → 1.28.0

package/src/components/dev-view.tsx

@@ -1,352 +0,0 @@
-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 {
-  name: string;
-  status: ProcessStatus;
-  port: number;
-  message?: string;
-  source?: SourceMode;
-}
-
-export interface LogEntry {
-  id: string;
-  source: string;
-  line: string;
-  timestamp: number;
-  isError?: boolean;
-}
-
-interface DevViewProps {
-  processes: ProcessState[];
-  logs: LogEntry[];
-  description: string;
-  proxyTarget?: string;
-  onExit?: () => Promise<void> | void;
-  onExportLogs?: () => Promise<void> | void;
-}
-
-function StatusIcon({ status }: { status: ProcessStatus }) {
-  switch (status) {
-    case "pending":
-      return <Text color="gray">{icons.pending}</Text>;
-    case "starting":
-      return <Text color="#00ffff">{icons.scan}</Text>;
-    case "ready":
-      return <Text color="#00ff41">{icons.ok}</Text>;
-    case "error":
-      return <Text color="#ff3366">{icons.err}</Text>;
-  }
-}
-
-function getServiceColor(name: string): string {
-  if (name.startsWith(PLUGIN_PREFIX)) return "#ffaa00";
-  return name === "host" ? "#00ffff" : name === "ui" ? "#ff00ff" : "#0080ff";
-}
-
-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 isRemote = proc.source === "remote";
-  const isHost = proc.name === "host";
-  const showPort = proc.port > 0 && (isHost || !isRemote);
-  const portStr = showPort ? `:${proc.port}` : "";
-  const sourceLabel = proc.source ? ` (${proc.source})` : "";
-
-  const statusText =
-    proc.status === "pending"
-      ? "waiting"
-      : proc.status === "starting"
-        ? "starting"
-        : proc.status === "ready"
-          ? isRemote && !isHost
-            ? "loaded"
-            : "running"
-          : "failed";
-
-  return (
-    <Box>
-      <Text>{"  "}</Text>
-      <StatusIcon status={proc.status} />
-      <Text> </Text>
-      <Text color={color} bold>
-        {getDisplayName(proc.name).padEnd(nameWidth)}
-      </Text>
-      <Text color="gray">{sourceLabel.padEnd(sourceWidth)}</Text>
-      <Text color={proc.status === "ready" ? "#00ff41" : "gray"}>{statusText}</Text>
-      {showPort && <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>
-    </Box>
-  );
-}
-
-function truncateUrl(url: string, maxLen: number): string {
-  if (url.length <= maxLen) return url;
-  try {
-    const parsed = new URL(url);
-    const host = parsed.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,
-}: DevViewProps) {
-  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 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">
-      <Box marginBottom={0}>
-        <Text color="#00ffff">{frames.top(52)}</Text>
-      </Box>
-      <Box>
-        <Text>
-          {"  "}
-          {icons.run} {gradients.cyber(description.toUpperCase())}
-        </Text>
-      </Box>
-      <Box marginBottom={1}>
-        <Text color="#00ffff">{frames.bottom(52)}</Text>
-      </Box>
-
-      {allReady && (
-        <Box marginBottom={1} flexDirection="column">
-          <Box>
-            <Text color="#00ff41">
-              {"  "}
-              {icons.app} APP READY
-            </Text>
-          </Box>
-          <Box>
-            <Text color="#00ff41" bold>
-              {"  "}
-              {icons.arrow} http://localhost:{hostPort}
-            </Text>
-          </Box>
-        </Box>
-      )}
-
-      {proxyTarget && (
-        <Box marginBottom={1}>
-          <Text color="#ffaa00">
-            {"  "}
-            {icons.arrow} API PROXY → {truncateUrl(proxyTarget, 38)}
-          </Text>
-        </Box>
-      )}
-
-      <Box marginTop={0} marginBottom={0}>
-        <Text>{colors.dim(divider(52))}</Text>
-      </Box>
-
-      {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}>
-        <Text>{colors.dim(divider(52))}</Text>
-      </Box>
-
-      <Box marginTop={0}>
-        <Text color={allReady ? "#00ff41" : "#00ffff"}>
-          {"  "}
-          {allReady
-            ? `${icons.ok} All ${total} services running`
-            : `${icons.scan} ${readyCount}/${total} ready`}
-        </Text>
-        <Text color="gray">
-          {" "}
-          {icons.dot} q quit {icons.dot} l logs
-        </Text>
-      </Box>
-
-      {recentLogs.length > 0 && (
-        <>
-          <Box marginTop={1} marginBottom={0}>
-            <Text>{colors.dim(divider(52))}</Text>
-          </Box>
-          <Box flexDirection="column" marginTop={0}>
-            {recentLogs.map((entry) => (
-              <LogLine key={entry.id} entry={entry} />
-            ))}
-          </Box>
-        </>
-      )}
-    </Box>
-  );
-}
-
-export interface DevViewHandle {
-  updateProcess: (name: string, status: ProcessStatus, message?: string) => void;
-  addLog: (source: string, line: string, isError?: boolean) => void;
-  unmount: () => void;
-}
-
-export function renderDevView(
-  initialProcesses: ProcessState[],
-  description: string,
-  env: Record<string, string>,
-  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));
-    rerender?.();
-  };
-
-  const addLog = (source: string, line: string, 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: number) => n + 1);
-      return () => {
-        rerender = null;
-      };
-    }, []);
-
-    return (
-      <DevView
-        processes={processes}
-        logs={logs}
-        description={description}
-        proxyTarget={proxyTarget}
-        onExit={onExit}
-        onExportLogs={onExportLogs}
-      />
-    );
-  }
-
-  const { unmount } = render(<DevViewWrapper />);
-  return { updateProcess, addLog, unmount };
-}

package/src/components/streaming-view.ts

@@ -1,177 +0,0 @@
-import chalk from "chalk";
-import { linkify } from "../utils/linkify";
-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: () => Promise<void> | void;
-}
-
-const getTimestamp = (): string => {
-  const now = new Date();
-  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 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;
-  }
-};
-
-export function renderStreamingView(
-  initialProcesses: ProcessState[],
-  description: string,
-  env: Record<string, string>,
-  onExit?: () => Promise<void> | void,
-): StreamingViewHandle {
-  const processes = new Map<string, ProcessState>();
-  for (const p of initialProcesses) {
-    processes.set(p.name, { ...p });
-  }
-
-  let allReadyPrinted = false;
-  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>();
-
-  const headerLines: string[] = [
-    "",
-    colors.cyan(`${"─".repeat(52)}`),
-    `  ${icons.run} ${colors.cyan(description.toUpperCase())}`,
-    colors.cyan(`${"─".repeat(52)}`),
-    "",
-  ];
-
-  if (proxyTarget) {
-    headerLines.push(orange(`  ${icons.arrow} API PROXY → ${proxyTarget}`), "");
-  }
-
-  for (const section of sectionedProcesses) {
-    headerLines.push(colors.cyan(`  ${section.title}`));
-    for (const proc of section.processes) {
-      const color = getServiceColor(proc.name);
-      const sourceLabel = proc.source ? ` (${proc.source})` : "";
-      headerLines.push(
-        `${colors.dim(`[${getTimestamp()}]`)} ${color(`[${getDisplayName(proc.name).padEnd(columnWidths.name)}]`)}  ${icons.pending} waiting${sourceLabel.padEnd(columnWidths.source)}`,
-      );
-    }
-    headerLines.push("");
-  }
-  console.log(headerLines.join("\n"));
-
-  const checkAllReady = () => {
-    if (allReadyPrinted) return;
-    const allReady = Array.from(processes.values()).every((p) => p.status === "ready");
-    if (allReady) {
-      allReadyPrinted = true;
-      const readyLines = [
-        "",
-        colors.dim(`${"─".repeat(52)}`),
-        colors.green(`${icons.ok} All ${processes.size} services ready`),
-        colors.green(`${icons.arrow} http://localhost:${hostPort}`),
-        colors.dim(`${"─".repeat(52)}`),
-        "",
-      ];
-      console.log(readyLines.join("\n"));
-    }
-  };
-
-  const updateProcess = (name: string, status: ProcessStatus, message?: string) => {
-    const proc = processes.get(name);
-    if (!proc) return;
-
-    proc.status = status;
-    if (message) proc.message = message;
-
-    const color = getServiceColor(name);
-    const icon = getStatusIcon(status);
-    const displayName = getDisplayName(name).padEnd(columnWidths.name);
-    const sourceLabel = proc?.source ? ` (${proc.source})` : "";
-    const isRemote = proc?.source === "remote";
-    const isHost = name === "host";
-    const showPort = proc.port > 0 && (isHost || !isRemote) && status === "ready";
-    const statusText =
-      status === "ready"
-        ? isRemote && !isHost
-          ? "loaded"
-          : "running"
-        : status === "starting"
-          ? "starting"
-          : status === "error"
-            ? "failed"
-            : "waiting";
-    const portStr = showPort ? ` :${proc.port}` : "";
-
-    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))}`,
-    );
-  };
-
-  const unmount = () => onExit?.();
-
-  return { updateProcess, addLog, unmount };
-}