everything-dev 0.1.3 → 0.1.5

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "everything-dev",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
     ".": "./src/index.ts",
-    "./types": "./src/types.ts"
+    "./types": "./src/types.ts",
+    "./ui": "./src/ui/index.ts",
+    "./ui/types": "./src/ui/types.ts",
+    "./ui/runtime": "./src/ui/runtime.ts",
+    "./ui/head": "./src/ui/head.ts"
   },
   "files": [
     "src"
@@ -18,14 +22,14 @@
   },
   "scripts": {
     "bos": "bun run src/cli.ts",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@clack/prompts": "^1.0.0",
     "@effect/platform": "^0.94.2",
     "@effect/platform-bun": "^0.87.1",
-    "effect": "3.19.15",
-    "zod": "4.3.5",
     "@hono/node-server": "^1.19.9",
     "@inquirer/prompts": "^8.2.0",
     "@libsql/client": "^0.17.0",
@@ -36,6 +40,7 @@
     "chalk": "^5.6.2",
     "commander": "^14.0.2",
     "degit": "^2.8.4",
+    "effect": "3.19.15",
     "every-plugin": "0.9.0",
     "execa": "^9.6.1",
     "gradient-string": "^3.0.0",
@@ -45,13 +50,30 @@
     "nova-sdk-js": "^1.0.3",
     "open": "^11.0.0",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "zod": "4.3.5"
   },
   "devDependencies": {
-    "@types/bun": "latest",
+    "@tanstack/react-query": "^5.0.0",
+    "@tanstack/react-router": "^1.0.0",
+    "@types/bun": "^1.3.8",
+    "@types/gradient-string": "^1.1.6",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
-    "@types/gradient-string": "^1.1.6",
-    "typescript": "^5.9.3"
+    "playwright": "^1.58.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": ">=5.0.0",
+    "@tanstack/react-router": ">=1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@tanstack/react-query": {
+      "optional": true
+    },
+    "@tanstack/react-router": {
+      "optional": true
+    }
   }
 }

package/src/cli.ts

@@ -2,7 +2,7 @@
 import { spinner } from "@clack/prompts";
 import { program } from "commander";
 import { createPluginRuntime } from "every-plugin";
-import { getConfigDir, getConfigPath, getPackages, getTitle, loadConfig, type BosConfig } from "./config";
+import { type BosConfig, getConfigDir, getConfigPath, getPackages, getTitle, loadConfig } from "./config";
 import BosPlugin from "./plugin";
 import { printBanner } from "./utils/banner";
 import { colors, frames, gradients, icons } from "./utils/theme";
@@ -854,6 +854,29 @@ Zephyr Configuration:
       console.log();
     });
 
+  program
+    .command("monitor")
+    .description("Monitor system resources (ports, processes, memory)")
+    .option("--json", "Output as JSON")
+    .option("-w, --watch", "Watch mode with live updates")
+    .option("-p, --ports <ports>", "Ports to monitor (comma-separated)")
+    .action(async (options) => {
+      const result = await client.monitor({
+        json: options.json || false,
+        watch: options.watch || false,
+        ports: options.ports ? options.ports.split(",").map(Number) : undefined,
+      });
+
+      if (result.status === "error") {
+        console.error(colors.error(`${icons.err} ${result.error}`));
+        process.exit(1);
+      }
+
+      if (result.status === "snapshot" && options.json) {
+        console.log(JSON.stringify(result.snapshot, null, 2));
+      }
+    });
+
   program
     .command("kill")
     .description("Kill all tracked BOS processes")
@@ -1115,6 +1138,91 @@ Zephyr Configuration:
       console.log();
     });
 
+  program
+    .command("session")
+    .description("Record a performance analysis session with Playwright")
+    .option("--headless", "Run browser in headless mode (default: true)", true)
+    .option("--no-headless", "Run browser with UI visible")
+    .option("-t, --timeout <ms>", "Session timeout in milliseconds", "120000")
+    .option("-o, --output <path>", "Output report path", "./session-report.json")
+    .option("-f, --format <format>", "Report format: json | html", "json")
+    .option("--flow <flow>", "Flow to run: login | navigation | custom", "login")
+    .option("--routes <routes>", "Routes for navigation flow (comma-separated)")
+    .option("--interval <ms>", "Snapshot interval in milliseconds", "2000")
+    .action(async (options) => {
+      console.log();
+      console.log(colors.cyan(frames.top(52)));
+      console.log(`  ${icons.scan} ${gradients.cyber("SESSION RECORDER")}`);
+      console.log(colors.cyan(frames.bottom(52)));
+      console.log();
+      console.log(`  ${colors.dim("Flow:")}     ${colors.white(options.flow)}`);
+      console.log(`  ${colors.dim("Headless:")} ${colors.white(String(options.headless))}`);
+      console.log(`  ${colors.dim("Output:")}   ${colors.white(options.output)}`);
+      console.log(`  ${colors.dim("Timeout:")}  ${colors.white(options.timeout)}ms`);
+      console.log();
+
+      const s = spinner();
+      s.start("Starting session recording...");
+
+      const result = await client.session({
+        headless: options.headless,
+        timeout: parseInt(options.timeout, 10),
+        output: options.output,
+        format: options.format as "json" | "html",
+        flow: options.flow as "login" | "navigation" | "custom",
+        routes: options.routes ? options.routes.split(",") : undefined,
+        snapshotInterval: parseInt(options.interval, 10),
+      });
+
+      if (result.status === "error") {
+        s.stop(colors.error(`${icons.err} Session failed: ${result.error}`));
+        process.exit(1);
+      }
+
+      if (result.status === "timeout") {
+        s.stop(colors.error(`${icons.err} Session timed out`));
+        process.exit(1);
+      }
+
+      s.stop(colors.green(`${icons.ok} Session completed`));
+
+      console.log();
+      console.log(colors.cyan(frames.top(52)));
+      console.log(`  ${icons.ok} ${gradients.cyber("SESSION SUMMARY")}`);
+      console.log(colors.cyan(frames.bottom(52)));
+      console.log();
+
+      if (result.summary) {
+        console.log(`  ${colors.dim("Session ID:")}  ${colors.white(result.sessionId || "")}`);
+        console.log(`  ${colors.dim("Duration:")}    ${colors.white(`${(result.summary.duration / 1000).toFixed(1)}s`)}`);
+        console.log(`  ${colors.dim("Events:")}      ${colors.white(String(result.summary.eventCount))}`);
+        console.log();
+        console.log(`  ${colors.dim("Peak Memory:")} ${colors.cyan(`${result.summary.peakMemoryMb.toFixed(1)} MB`)}`);
+        console.log(`  ${colors.dim("Avg Memory:")}  ${colors.cyan(`${result.summary.averageMemoryMb.toFixed(1)} MB`)}`);
+        console.log(`  ${colors.dim("Delta:")}       ${result.summary.totalMemoryDeltaMb >= 0 ? colors.cyan("+") : ""}${colors.cyan(`${result.summary.totalMemoryDeltaMb.toFixed(1)} MB`)}`);
+        console.log();
+        console.log(`  ${colors.dim("Processes:")}   ${colors.white(`${result.summary.processesSpawned} spawned, ${result.summary.processesKilled} killed`)}`);
+        console.log(`  ${colors.dim("Ports:")}       ${colors.white(result.summary.portsUsed.join(", "))}`);
+        console.log();
+
+        if (result.status === "leaks_detected") {
+          console.log(colors.error(`  ${icons.err} RESOURCE LEAKS DETECTED`));
+          if (result.summary.orphanedProcesses > 0) {
+            console.log(colors.error(`     - ${result.summary.orphanedProcesses} orphaned process(es)`));
+          }
+          if (result.summary.portsLeaked > 0) {
+            console.log(colors.error(`     - ${result.summary.portsLeaked} port(s) still bound`));
+          }
+        } else {
+          console.log(colors.green(`  ${icons.ok} No resource leaks detected`));
+        }
+      }
+
+      console.log();
+      console.log(`  ${colors.dim("Report:")} ${colors.cyan(result.reportPath || options.output)}`);
+      console.log();
+    });
+
   program.parse();
 }
 

package/src/components/monitor-view.tsx

@@ -0,0 +1,471 @@
+import { Box, render, Text, useApp, useInput } from "ink";
+import { useEffect, useState } from "react";
+import { Effect, Logger, LogLevel } from "effect";
+import {
+  ResourceMonitor,
+  PlatformLive,
+  createSnapshotWithPlatform,
+  diffSnapshots,
+  type Snapshot,
+  type SnapshotDiff,
+  type MonitorConfig,
+} from "../lib/resource-monitor";
+import { getAccount, getConfigPath } from "../config";
+import { colors, divider, gradients, icons, frames } from "../utils/theme";
+
+type Phase = "baseline" | "running" | "stopped";
+
+interface MonitorViewProps {
+  baseline: Snapshot | null;
+  current: Snapshot | null;
+  diff: SnapshotDiff | null;
+  phase: Phase;
+  refreshing: boolean;
+  onRefresh: () => void;
+  onSnapshot: () => void;
+  onExport: () => void;
+  onExit: () => void;
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function PortRow({
+  port,
+  info,
+}: {
+  port: number;
+  info: { pid: number | null; command: string | null; state: string };
+}) {
+  const isFree = info.state === "FREE";
+  const icon = isFree ? "○" : "●";
+  const statusColor = isFree ? "gray" : "#00ff41";
+
+  return (
+    <Box>
+      <Text color={statusColor}> {icon} </Text>
+      <Text color="#00ffff">:{port.toString().padEnd(5)}</Text>
+      {isFree ? (
+        <Text color="gray">free</Text>
+      ) : (
+        <Text>
+          <Text color="#ff00ff">{info.pid}</Text>
+          <Text color="gray"> {info.command}</Text>
+        </Text>
+      )}
+    </Box>
+  );
+}
+
+function ProcessRow({
+  proc,
+}: {
+  proc: { pid: number; command: string; rss: number; children: number[] };
+}) {
+  const childCount = proc.children.length;
+  const childText = childCount > 0 ? ` [${childCount}]` : "";
+
+  return (
+    <Box>
+      <Text color="#00ffff"> {proc.pid.toString().padEnd(7)}</Text>
+      <Text>{proc.command.slice(0, 20).padEnd(20)}</Text>
+      <Text color="#ff00ff">{formatBytes(proc.rss).padStart(10)}</Text>
+      <Text color="gray">{childText}</Text>
+    </Box>
+  );
+}
+
+function SnapshotSection({
+  title,
+  snapshot,
+}: {
+  title: string;
+  snapshot: Snapshot | null;
+}) {
+  if (!snapshot) {
+    return (
+      <Box flexDirection="column" marginBottom={1}>
+        <Text color="#00ffff"> {title}</Text>
+        <Text color="gray"> (waiting for snapshot...)</Text>
+      </Box>
+    );
+  }
+
+  const ports = Object.entries(snapshot.ports);
+  const boundPorts = ports.filter(([, info]) => info.state !== "FREE").length;
+  const totalRss = formatBytes(snapshot.memory.processRss);
+
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Text color="#00ffff"> {title}</Text>
+      <Text color="gray">{divider(50)}</Text>
+
+      <Text color="gray">
+        {" "}
+        PORTS ({boundPorts}/{ports.length} bound)
+      </Text>
+      {ports.map(([port, info]) => (
+        <PortRow key={port} port={parseInt(port, 10)} info={info} />
+      ))}
+
+      {snapshot.processes.length > 0 && (
+        <>
+          <Box marginTop={1}>
+            <Text color="gray">
+              {" "}
+              PROCESSES ({snapshot.processes.length})
+            </Text>
+          </Box>
+          {snapshot.processes.slice(0, 8).map((proc) => (
+            <ProcessRow key={proc.pid} proc={proc} />
+          ))}
+          {snapshot.processes.length > 8 && (
+            <Text color="gray">
+              {" "}
+              ... and {snapshot.processes.length - 8} more
+            </Text>
+          )}
+        </>
+      )}
+
+      <Box marginTop={1}>
+        <Text color="gray"> Memory: {totalRss}</Text>
+      </Box>
+    </Box>
+  );
+}
+
+function DiffSection({ diff }: { diff: SnapshotDiff | null }) {
+  if (!diff) return null;
+
+  const hasLeaks =
+    diff.orphanedProcesses.length > 0 || diff.stillBoundPorts.length > 0;
+  const memDelta = diff.memoryDeltaBytes;
+  const memSign = memDelta >= 0 ? "+" : "";
+
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Text color={hasLeaks ? "#ff3366" : "#00ff41"}>
+        {hasLeaks ? ` ${icons.err} LEAKS DETECTED` : ` ${icons.ok} CLEAN`}
+      </Text>
+
+      {diff.stillBoundPorts.length > 0 && (
+        <>
+          <Text color="#ff3366"> Still Bound:</Text>
+          {diff.stillBoundPorts.map((port) => (
+            <Text key={port.port} color="#ff3366">
+              {" "}
+              :{port.port} ← PID {port.pid}
+            </Text>
+          ))}
+        </>
+      )}
+
+      {diff.orphanedProcesses.length > 0 && (
+        <>
+          <Text color="#ff3366"> Orphaned Processes:</Text>
+          {diff.orphanedProcesses.map((proc) => (
+            <Text key={proc.pid} color="#ff3366">
+              {" "}
+              {proc.pid} {proc.command}
+            </Text>
+          ))}
+        </>
+      )}
+
+      {diff.freedPorts.length > 0 && (
+        <Text color="#00ff41"> Freed: {diff.freedPorts.join(", ")}</Text>
+      )}
+
+      <Text color={memDelta > 50 * 1024 * 1024 ? "#ff3366" : "gray"}>
+        Memory Delta: {memSign}
+        {formatBytes(memDelta)}
+      </Text>
+    </Box>
+  );
+}
+
+function MonitorView({
+  baseline,
+  current,
+  diff,
+  phase,
+  refreshing,
+  onRefresh,
+  onSnapshot,
+  onExport,
+  onExit,
+}: MonitorViewProps) {
+  const { exit } = useApp();
+
+  useInput((input, key) => {
+    if (input === "q" || (key.ctrl && input === "c")) {
+      onExit();
+      exit();
+    }
+    if (input === "r") onRefresh();
+    if (input === "s") onSnapshot();
+    if (input === "e") onExport();
+  });
+
+  let account = "unknown";
+  let configPath = "";
+  try {
+    account = getAccount();
+    configPath = getConfigPath();
+  } catch {
+    // No config
+  }
+
+  const phaseLabel =
+    phase === "baseline" ? "BASELINE" : phase === "running" ? "RUNNING" : "STOPPED";
+  const phaseColor =
+    phase === "baseline" ? "gray" : phase === "running" ? "#00ffff" : "#ff00ff";
+
+  return (
+    <Box flexDirection="column">
+      <Box marginBottom={0}>
+        <Text color="#00ffff">{frames.top(56)}</Text>
+      </Box>
+      <Box>
+        <Text>
+          {" "}
+          {icons.scan} {gradients.cyber("BOS RESOURCE MONITOR")}
+        </Text>
+      </Box>
+      <Box marginBottom={1}>
+        <Text color="#00ffff">{frames.bottom(56)}</Text>
+      </Box>
+
+      <Box marginBottom={1}>
+        <Text color="gray"> Account: </Text>
+        <Text color="#00ffff">{account}</Text>
+      </Box>
+      {configPath && (
+        <Box marginBottom={1}>
+          <Text color="gray"> Config: </Text>
+          <Text color="gray">{configPath}</Text>
+        </Box>
+      )}
+
+      <Box marginBottom={1}>
+        <Text color="gray"> Phase: </Text>
+        <Text color={phaseColor}>{phaseLabel}</Text>
+        {refreshing && <Text color="gray"> (refreshing...)</Text>}
+      </Box>
+
+      <Text>{colors.dim(divider(56))}</Text>
+
+      {phase === "baseline" && (
+        <SnapshotSection title="📊 BASELINE" snapshot={baseline} />
+      )}
+
+      {phase === "running" && (
+        <>
+          <SnapshotSection title="📊 BASELINE" snapshot={baseline} />
+          <SnapshotSection title="🔄 CURRENT" snapshot={current} />
+        </>
+      )}
+
+      {phase === "stopped" && (
+        <>
+          <SnapshotSection title="🔄 AFTER STOP" snapshot={current} />
+          <DiffSection diff={diff} />
+        </>
+      )}
+
+      <Text>{colors.dim(divider(56))}</Text>
+      <Box marginTop={1}>
+        <Text color="gray"> [r] refresh [s] snapshot [e] export [q] quit</Text>
+      </Box>
+    </Box>
+  );
+}
+
+export interface MonitorViewHandle {
+  setPhase: (phase: Phase) => void;
+  setBaseline: (snapshot: Snapshot) => void;
+  setCurrent: (snapshot: Snapshot) => void;
+  setDiff: (diff: SnapshotDiff) => void;
+  unmount: () => void;
+}
+
+export interface MonitorViewOptions {
+  ports?: number[];
+  onExit?: () => void;
+  onExport?: (data: unknown) => void;
+}
+
+const runEffect = <A,>(effect: Effect.Effect<A, unknown, never>): Promise<A> =>
+  effect.pipe(Logger.withMinimumLogLevel(LogLevel.Info), Effect.runPromise);
+
+const runSnapshotEffect = (config?: MonitorConfig): Promise<Snapshot> =>
+  createSnapshotWithPlatform(config).pipe(
+    Effect.provide(PlatformLive),
+    Logger.withMinimumLogLevel(LogLevel.Info),
+    Effect.runPromise
+  );
+
+export function renderMonitorView(
+  options: MonitorViewOptions = {}
+): MonitorViewHandle {
+  let phase: Phase = "baseline";
+  let baseline: Snapshot | null = null;
+  let current: Snapshot | null = null;
+  let diff: SnapshotDiff | null = null;
+  let refreshing = false;
+  let rerender: (() => void) | null = null;
+  let monitor: ResourceMonitor | null = null;
+  const config: MonitorConfig | undefined = options.ports
+    ? { ports: options.ports }
+    : undefined;
+
+  const initMonitor = async () => {
+    monitor = await runEffect(ResourceMonitor.createWithPlatform(config));
+  };
+
+  initMonitor();
+
+  const setPhase = (p: Phase) => {
+    phase = p;
+    rerender?.();
+  };
+
+  const setBaseline = (snap: Snapshot) => {
+    baseline = snap;
+    rerender?.();
+  };
+
+  const setCurrent = (snap: Snapshot) => {
+    current = snap;
+    if (baseline && phase === "stopped") {
+      diff = diffSnapshots(baseline, snap);
+    }
+    rerender?.();
+  };
+
+  const setDiff = (d: SnapshotDiff) => {
+    diff = d;
+    rerender?.();
+  };
+
+  const handleRefresh = async () => {
+    if (!monitor) return;
+    refreshing = true;
+    rerender?.();
+
+    const snap = await runEffect(monitor.snapshotWithPlatform());
+    if (phase === "baseline") {
+      baseline = snap;
+    } else {
+      current = snap;
+      if (baseline && phase === "stopped") {
+        diff = diffSnapshots(baseline, snap);
+      }
+    }
+
+    refreshing = false;
+    rerender?.();
+  };
+
+  const handleSnapshot = async () => {
+    if (!monitor) return;
+    const snap = await runEffect(monitor.snapshotWithPlatform());
+
+    if (!baseline) {
+      baseline = snap;
+      phase = "running";
+    } else if (phase === "running") {
+      current = snap;
+    } else {
+      current = snap;
+      diff = diffSnapshots(baseline, snap);
+    }
+
+    rerender?.();
+  };
+
+  const handleExport = async () => {
+    if (!monitor) return;
+    const exportPath = `.bos/monitor-export-${Date.now()}.json`;
+    await runEffect(monitor.export(exportPath));
+    options.onExport?.({ path: exportPath });
+  };
+
+  const handleExit = () => {
+    options.onExit?.();
+  };
+
+  function MonitorViewWrapper() {
+    const [, forceUpdate] = useState(0);
+
+    useEffect(() => {
+      rerender = () => forceUpdate((n) => n + 1);
+
+      handleRefresh();
+
+      return () => {
+        rerender = null;
+      };
+    }, []);
+
+    return (
+      <MonitorView
+        baseline={baseline}
+        current={current}
+        diff={diff}
+        phase={phase}
+        refreshing={refreshing}
+        onRefresh={handleRefresh}
+        onSnapshot={handleSnapshot}
+        onExport={handleExport}
+        onExit={handleExit}
+      />
+    );
+  }
+
+  const { unmount } = render(<MonitorViewWrapper />);
+
+  return { setPhase, setBaseline, setCurrent, setDiff, unmount };
+}
+
+export async function runMonitorCli(
+  options: { ports?: number[]; json?: boolean } = {}
+) {
+  const config: MonitorConfig | undefined = options.ports
+    ? { ports: options.ports }
+    : undefined;
+
+  if (options.json) {
+    const snapshot = await runSnapshotEffect(config);
+    console.log(JSON.stringify(snapshot, null, 2));
+    return;
+  }
+
+  const monitor = await runEffect(ResourceMonitor.createWithPlatform(config));
+
+  const view = renderMonitorView({
+    ports: options.ports,
+    onExit: () => process.exit(0),
+    onExport: (data) =>
+      console.log("Exported to:", (data as { path: string }).path),
+  });
+
+  const baseline = await runEffect(monitor.setBaselineWithPlatform());
+  view.setBaseline(baseline);
+  view.setPhase("baseline");
+
+  const interval = setInterval(async () => {
+    const snap = await runEffect(monitor.snapshotWithPlatform());
+    view.setCurrent(snap);
+  }, 2000);
+
+  process.on("SIGINT", () => {
+    clearInterval(interval);
+    view.unmount();
+    process.exit(0);
+  });
+}