everything-dev 0.0.1

package/src/components/dev-view.tsx

@@ -0,0 +1,243 @@
+import { Box, render, Text, useApp, useInput } from "ink";
+import { useEffect, useState } from "react";
+import { colors, divider, gradients, icons, frames } from "../utils/theme";
+
+export type ProcessStatus = "pending" | "starting" | "ready" | "error";
+
+export interface ProcessState {
+  name: string;
+  status: ProcessStatus;
+  port: number;
+  message?: string;
+  source?: "local" | "remote";
+}
+
+export interface LogEntry {
+  source: string;
+  line: string;
+  timestamp: number;
+  isError?: boolean;
+}
+
+interface DevViewProps {
+  processes: ProcessState[];
+  logs: LogEntry[];
+  description: string;
+  onExit?: () => void;
+  onExportLogs?: () => 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 {
+  return name === "host" ? "#00ffff" : name === "ui" ? "#ff00ff" : "#0080ff";
+}
+
+function ProcessRow({ proc }: { proc: ProcessState }) {
+  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 (
+    <Box>
+      <Text>{"  "}</Text>
+      <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}
+      </Text>
+      {proc.port > 0 && (
+        <Text color="#00ffff"> {portStr}</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}> {entry.line}</Text>
+    </Box>
+  );
+}
+
+function DevView({
+  processes,
+  logs,
+  description,
+  onExit,
+  onExportLogs,
+}: DevViewProps) {
+  const { exit } = useApp();
+
+  useInput((input, key) => {
+    if (input === "q" || (key.ctrl && input === "c")) {
+      onExit?.();
+      exit();
+    }
+    if (input === "l") {
+      onExportLogs?.();
+      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);
+
+  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>
+      )}
+
+      <Box marginTop={0} marginBottom={0}>
+        <Text>{colors.dim(divider(52))}</Text>
+      </Box>
+
+      {processes.map((proc) => (
+        <ProcessRow key={proc.name} proc={proc} />
+      ))}
+
+      <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, i) => (
+              <LogLine key={`${entry.timestamp}-${i}`} 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?: () => void,
+  onExportLogs?: () => void,
+): DevViewHandle {
+  let processes = [...initialProcesses];
+  let logs: LogEntry[] = [];
+  let rerender: (() => void) | 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) => {
+    logs = [...logs, { 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 (
+      <DevView
+        processes={processes}
+        logs={logs}
+        description={description}
+        onExit={onExit}
+        onExportLogs={onExportLogs}
+      />
+    );
+  }
+
+  const { unmount } = render(<DevViewWrapper />);
+
+  return { updateProcess, addLog, unmount };
+}

package/src/components/status-view.tsx

@@ -0,0 +1,173 @@
+import React, { useState, useEffect } from "react";
+import { render, Text, Box } from "ink";
+import { colors, icons, gradients, divider } from "../utils/theme";
+
+interface Endpoint {
+  name: string;
+  url: string;
+  type: "host" | "remote" | "ssr";
+}
+
+interface StatusResult {
+  ok: boolean;
+  ms: number;
+}
+
+interface StatusViewProps {
+  endpoints: Endpoint[];
+  env: string;
+  onComplete?: () => void;
+}
+
+async function checkHealth(url: string): Promise<StatusResult> {
+  const start = Date.now();
+  try {
+    const response = await fetch(url, { method: "HEAD" });
+    return { ok: response.ok, ms: Date.now() - start };
+  } catch {
+    return { ok: false, ms: Date.now() - start };
+  }
+}
+
+function StatusRow({
+  name,
+  url,
+  status,
+}: {
+  name: string;
+  url: string;
+  status: StatusResult | "checking" | "pending";
+}) {
+  const icon =
+    status === "checking"
+      ? colors.cyan("[~]")
+      : status === "pending"
+        ? colors.dim("[ ]")
+        : status.ok
+          ? colors.green("[-]")
+          : colors.magenta("[!]");
+
+  const timing =
+    status === "checking"
+      ? colors.cyan("checking...")
+      : status === "pending"
+        ? colors.dim("--")
+        : status.ok
+          ? colors.green(`${status.ms}ms`)
+          : colors.magenta(`${status.ms}ms`);
+
+  return (
+    <Box>
+      <Text>
+        {"  "}
+        {icon} {name.padEnd(12)} {timing.padEnd(14)} {colors.dim(url)}
+      </Text>
+    </Box>
+  );
+}
+
+function StatusView({ endpoints, env, onComplete }: StatusViewProps) {
+  const [results, setResults] = useState<
+    Record<string, StatusResult | "checking" | "pending">
+  >(() => {
+    const initial: Record<string, "pending"> = {};
+    for (const ep of endpoints) {
+      initial[ep.name] = "pending";
+    }
+    return initial;
+  });
+
+  const [done, setDone] = useState(false);
+
+  useEffect(() => {
+    let mounted = true;
+
+    async function runChecks() {
+      for (const ep of endpoints) {
+        if (!mounted) return;
+        setResults((prev) => ({ ...prev, [ep.name]: "checking" }));
+
+        const result = await checkHealth(ep.url);
+
+        if (!mounted) return;
+        setResults((prev) => ({ ...prev, [ep.name]: result }));
+      }
+      setDone(true);
+      onComplete?.();
+    }
+
+    runChecks();
+
+    return () => {
+      mounted = false;
+    };
+  }, [endpoints, onComplete]);
+
+  const healthy = Object.values(results).filter(
+    (r) => typeof r === "object" && r.ok
+  ).length;
+  const total = endpoints.length;
+  const checking = Object.values(results).filter(
+    (r) => r === "checking"
+  ).length;
+
+  return (
+    <Box flexDirection="column">
+      <Box marginBottom={1}>
+        <Text>
+          {colors.cyan(`+${"-".repeat(46)}+`)}
+        </Text>
+      </Box>
+      <Box marginBottom={1}>
+        <Text>
+          {"  "}
+          {icons.scan} {gradients.cyber(`SCANNING ${env} endpoints`)}
+        </Text>
+      </Box>
+      <Box marginBottom={1}>
+        <Text>{colors.cyan(`+${"-".repeat(46)}+`)}</Text>
+      </Box>
+
+      {endpoints.map((ep) => (
+        <StatusRow
+          key={ep.name}
+          name={ep.name}
+          url={ep.url}
+          status={results[ep.name]}
+        />
+      ))}
+
+      <Box marginTop={1}>
+        <Text>{colors.dim(divider(48))}</Text>
+      </Box>
+      <Box>
+        <Text>
+          {"  "}
+          {done
+            ? colors.green(`${healthy}/${total} healthy`)
+            : colors.cyan(`${checking} checking...`)}
+        </Text>
+      </Box>
+    </Box>
+  );
+}
+
+export function renderStatusView(
+  endpoints: Endpoint[],
+  env: string
+): Promise<void> {
+  return new Promise((resolve) => {
+    const { unmount } = render(
+      <StatusView
+        endpoints={endpoints}
+        env={env}
+        onComplete={() => {
+          setTimeout(() => {
+            unmount();
+            resolve();
+          }, 100);
+        }}
+      />
+    );
+  });
+}

package/src/components/streaming-view.ts

@@ -0,0 +1,110 @@
+import { colors, icons } from "../utils/theme";
+import type { ProcessState, ProcessStatus } from "./dev-view";
+
+export interface StreamingViewHandle {
+  updateProcess: (name: string, status: ProcessStatus, message?: string) => void;
+  addLog: (source: string, line: string, isError?: boolean) => void;
+  unmount: () => 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 === "host") return colors.cyan;
+  if (name === "ui" || name === "ui-ssr") return colors.magenta;
+  if (name === "api") return colors.blue;
+  return colors.white;
+};
+
+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?: () => void,
+  _onExportLogs?: () => 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;
+
+  console.log();
+  console.log(colors.cyan(`${"─".repeat(52)}`));
+  console.log(`  ${icons.run} ${colors.cyan(description.toUpperCase())}`);
+  console.log(colors.cyan(`${"─".repeat(52)}`));
+  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}`);
+  }
+
+  const checkAllReady = () => {
+    if (allReadyPrinted) return;
+
+    const allReady = Array.from(processes.values()).every(p => p.status === "ready");
+    if (allReady) {
+      allReadyPrinted = true;
+      console.log();
+      console.log(colors.dim(`${"─".repeat(52)}`));
+      console.log(colors.green(`${icons.ok} All ${processes.size} services ready`));
+      console.log(colors.green(`${icons.arrow} http://localhost:${hostPort}`));
+      console.log(colors.dim(`${"─".repeat(52)}`));
+      console.log();
+    }
+  };
+
+  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 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}`);
+
+    checkAllReady();
+  };
+
+  const addLog = (source: string, line: string, isError = false) => {
+    const color = getServiceColor(source);
+    const logColor = isError ? colors.error : colors.dim;
+    write(`${colors.dim(`[${getTimestamp()}]`)} ${color(`[${source.toUpperCase()}]`)}  ${colors.dim("│")} ${logColor(line)}`);
+  };
+
+  const unmount = () => {
+    onExit?.();
+  };
+
+  process.on("SIGINT", () => {
+    console.log();
+    console.log(colors.dim(`[${getTimestamp()}] Shutting down...`));
+    unmount();
+  });
+
+  return { updateProcess, addLog, unmount };
+}