everything-dev 0.1.2 → 0.1.4

package/src/lib/session-recorder/index.ts

@@ -0,0 +1,361 @@
+import { Effect, Logger, LogLevel } from "effect";
+import { createSnapshotWithPlatform, PlatformLive, runSilent } from "../resource-monitor";
+import type { Snapshot } from "../resource-monitor";
+import {
+  type SessionRecorderError,
+  SessionTimeout,
+  SnapshotFailed,
+} from "./errors";
+import {
+  type BrowserHandle,
+  closeBrowser,
+  getBrowserMetrics,
+  launchBrowser,
+} from "./playwright";
+import {
+  exportHTMLReport,
+  exportJSON,
+  formatEventTimeline,
+  formatReportSummary,
+  generateReport,
+} from "./report";
+import {
+  checkPortsAvailable,
+  shutdownServers,
+  startServers,
+  waitForPortFree,
+} from "./server";
+import {
+  DEFAULT_SESSION_CONFIG,
+  type BrowserMetrics,
+  type SessionConfig,
+  type SessionEvent,
+  type SessionEventType,
+  type SessionReport,
+  type ServerOrchestrator,
+} from "./types";
+
+let eventCounter = 0;
+
+const generateEventId = (): string => {
+  eventCounter += 1;
+  return `evt_${Date.now()}_${eventCounter}`;
+};
+
+const generateSessionId = (): string => {
+  return `sess_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+};
+
+export class SessionRecorder {
+  private config: SessionConfig;
+  private sessionId: string;
+  private events: SessionEvent[] = [];
+  private startTime: number = 0;
+  private endTime: number = 0;
+  private intervalHandle: ReturnType<typeof setInterval> | null = null;
+  private serverOrchestrator: ServerOrchestrator | null = null;
+  private browserHandle: BrowserHandle | null = null;
+  private isRecording = false;
+
+  private constructor(config: SessionConfig) {
+    this.config = config;
+    this.sessionId = generateSessionId();
+  }
+
+  static create = (
+    config?: Partial<SessionConfig>
+  ): Effect.Effect<SessionRecorder> =>
+    Effect.gen(function* () {
+      const fullConfig = { ...DEFAULT_SESSION_CONFIG, ...config };
+      yield* Effect.logInfo(`Creating SessionRecorder: ${JSON.stringify(fullConfig)}`);
+      return new SessionRecorder(fullConfig);
+    });
+
+  getConfig(): SessionConfig {
+    return { ...this.config };
+  }
+
+  getSessionId(): string {
+    return this.sessionId;
+  }
+
+  getEvents(): SessionEvent[] {
+    return [...this.events];
+  }
+
+  isActive(): boolean {
+    return this.isRecording;
+  }
+
+  takeSnapshot(): Effect.Effect<Snapshot, SnapshotFailed> {
+    const self = this;
+    return Effect.gen(function* () {
+      const snapshot = yield* Effect.tryPromise({
+        try: () => runSilent(createSnapshotWithPlatform({ ports: self.config.ports })),
+        catch: (e) => new SnapshotFailed({ reason: String(e) }),
+      });
+      return snapshot;
+    });
+  }
+
+  recordEvent(
+    type: SessionEventType,
+    label: string,
+    metadata?: Record<string, unknown>
+  ): Effect.Effect<SessionEvent, SnapshotFailed> {
+    const self = this;
+    return Effect.gen(function* () {
+      const snapshot = yield* self.takeSnapshot();
+
+      let browserMetrics: BrowserMetrics | undefined;
+      if (self.browserHandle) {
+        const metricsResult = yield* Effect.either(
+          getBrowserMetrics(self.browserHandle.page)
+        );
+        if (metricsResult._tag === "Right") {
+          browserMetrics = metricsResult.right;
+        }
+      }
+
+      const event: SessionEvent = {
+        id: generateEventId(),
+        timestamp: Date.now(),
+        type,
+        label,
+        snapshot,
+        browserMetrics,
+        url: self.browserHandle?.page.url(),
+        metadata,
+      };
+
+      self.events.push(event);
+      yield* Effect.logDebug(`Event recorded: ${type} - ${label}`);
+
+      return event;
+    });
+  }
+
+  startServers(
+    mode: "start" | "dev" = "start"
+  ): Effect.Effect<void, SessionRecorderError> {
+    const self = this;
+    return Effect.gen(function* () {
+      yield* Effect.logInfo(`Starting servers in ${mode} mode`);
+
+      const portsAvailable = yield* checkPortsAvailable(self.config.ports);
+      if (!portsAvailable) {
+        yield* Effect.logWarning("Some ports already in use - proceeding anyway");
+      }
+
+      const orchestrator = yield* startServers(mode, {
+        port: self.config.ports[0],
+      });
+
+      self.serverOrchestrator = orchestrator;
+      yield* Effect.logInfo("Servers started successfully");
+    });
+  }
+
+  stopServers(): Effect.Effect<void> {
+    const self = this;
+    return Effect.gen(function* () {
+      if (self.serverOrchestrator) {
+        yield* shutdownServers(self.serverOrchestrator);
+        self.serverOrchestrator = null;
+      }
+    });
+  }
+
+  launchBrowser(): Effect.Effect<BrowserHandle, SessionRecorderError> {
+    const self = this;
+    return Effect.gen(function* () {
+      yield* Effect.logInfo(`Launching browser (headless: ${self.config.headless})`);
+
+      const handle = yield* launchBrowser(self.config.headless);
+      self.browserHandle = handle;
+
+      return handle;
+    });
+  }
+
+  closeBrowser(): Effect.Effect<void> {
+    const self = this;
+    return Effect.gen(function* () {
+      if (self.browserHandle) {
+        yield* closeBrowser(self.browserHandle);
+        self.browserHandle = null;
+      }
+    });
+  }
+
+  getBrowser(): BrowserHandle | null {
+    return this.browserHandle;
+  }
+
+  startRecording(): Effect.Effect<void, SnapshotFailed> {
+    const self = this;
+    return Effect.gen(function* () {
+      if (self.isRecording) {
+        yield* Effect.logWarning("Already recording");
+        return;
+      }
+
+      self.isRecording = true;
+      self.startTime = Date.now();
+      self.events = [];
+
+      yield* Effect.logInfo("Starting session recording");
+
+      yield* self.recordEvent("baseline", "session_start");
+
+      if (self.config.snapshotIntervalMs > 0) {
+        self.intervalHandle = setInterval(() => {
+          Effect.runPromise(
+            self.recordEvent("interval", "auto_snapshot").pipe(
+              Effect.catchAll(() => Effect.void)
+            )
+          );
+        }, self.config.snapshotIntervalMs);
+      }
+
+      yield* Effect.logInfo(`Recording started with ${self.config.snapshotIntervalMs}ms interval`);
+    });
+  }
+
+  stopRecording(): Effect.Effect<SessionReport, SnapshotFailed> {
+    const self = this;
+    return Effect.gen(function* () {
+      if (!self.isRecording) {
+        yield* Effect.logWarning("Not recording");
+        return generateReport(
+          self.sessionId,
+          self.config,
+          self.events,
+          self.startTime,
+          Date.now()
+        );
+      }
+
+      if (self.intervalHandle) {
+        clearInterval(self.intervalHandle);
+        self.intervalHandle = null;
+      }
+
+      yield* self.recordEvent("custom", "session_end");
+
+      self.isRecording = false;
+      self.endTime = Date.now();
+
+      yield* Effect.logInfo("Recording stopped");
+
+      const report = generateReport(
+        self.sessionId,
+        self.config,
+        self.events,
+        self.startTime,
+        self.endTime
+      );
+
+      return report;
+    });
+  }
+
+  exportReport(
+    filepath: string,
+    format: "json" | "html" = "json"
+  ): Effect.Effect<void, SessionRecorderError> {
+    const self = this;
+    return Effect.gen(function* () {
+      const report = generateReport(
+        self.sessionId,
+        self.config,
+        self.events,
+        self.startTime,
+        self.endTime || Date.now()
+      );
+
+      if (format === "html") {
+        yield* exportHTMLReport(report, filepath);
+      } else {
+        yield* exportJSON(report, filepath);
+      }
+    });
+  }
+
+  generateReport(): SessionReport {
+    return generateReport(
+      this.sessionId,
+      this.config,
+      this.events,
+      this.startTime,
+      this.endTime || Date.now()
+    );
+  }
+
+  printSummary(): Effect.Effect<void> {
+    const self = this;
+    return Effect.sync(() => {
+      const report = self.generateReport();
+      console.log(formatReportSummary(report));
+    });
+  }
+
+  printTimeline(): Effect.Effect<void> {
+    const self = this;
+    return Effect.sync(() => {
+      console.log(formatEventTimeline(self.events));
+    });
+  }
+
+  cleanup(): Effect.Effect<void> {
+    const self = this;
+    return Effect.gen(function* () {
+      yield* Effect.logInfo("Cleaning up session recorder");
+
+      if (self.intervalHandle) {
+        clearInterval(self.intervalHandle);
+        self.intervalHandle = null;
+      }
+
+      yield* self.closeBrowser();
+      yield* self.stopServers();
+
+      yield* Effect.logInfo("Cleanup complete");
+    });
+  }
+}
+
+export const runSession = <E>(
+  effect: Effect.Effect<void, E>
+): Promise<void> =>
+  effect.pipe(
+    Effect.provide(PlatformLive),
+    Logger.withMinimumLogLevel(LogLevel.Info),
+    Effect.runPromise
+  );
+
+export const runSessionSilent = <E>(
+  effect: Effect.Effect<void, E>
+): Promise<void> =>
+  effect.pipe(
+    Effect.provide(PlatformLive),
+    Logger.withMinimumLogLevel(LogLevel.Error),
+    Effect.runPromise
+  );
+
+export const runSessionDebug = <E>(
+  effect: Effect.Effect<void, E>
+): Promise<void> =>
+  effect.pipe(
+    Effect.provide(PlatformLive),
+    Logger.withMinimumLogLevel(LogLevel.Debug),
+    Effect.runPromise
+  );
+
+export * from "./errors";
+export * from "./types";
+export * from "./server";
+export * from "./playwright";
+export * from "./report";
+export { runLoginFlow, runNavigationFlow, runClickFlow } from "./flows/login";
+export { diffSnapshots, hasLeaks, type Snapshot, type SnapshotDiff } from "../resource-monitor";

package/src/lib/session-recorder/playwright.ts

@@ -0,0 +1,257 @@
+import { Effect } from "effect";
+import { BrowserLaunchFailed, BrowserMetricsFailed } from "./errors";
+import type { BrowserMetrics } from "./types";
+
+type Browser = {
+  newContext: (options?: Record<string, unknown>) => Promise<BrowserContext>;
+  close: () => Promise<void>;
+};
+
+type BrowserContext = {
+  newPage: () => Promise<Page>;
+  close: () => Promise<void>;
+  on: (event: string, handler: (page: Page) => void) => void;
+  waitForEvent: (event: string, options?: { timeout?: number }) => Promise<Page>;
+};
+
+type Page = {
+  goto: (url: string, options?: Record<string, unknown>) => Promise<void>;
+  click: (selector: string, options?: Record<string, unknown>) => Promise<void>;
+  fill: (selector: string, value: string) => Promise<void>;
+  waitForSelector: (selector: string, options?: { timeout?: number }) => Promise<void>;
+  waitForLoadState: (state?: string) => Promise<void>;
+  waitForTimeout: (ms: number) => Promise<void>;
+  url: () => string;
+  title: () => Promise<string>;
+  close: () => Promise<void>;
+  metrics: () => Promise<Record<string, number>>;
+  evaluate: <T>(fn: () => T) => Promise<T>;
+};
+
+type CDPSession = {
+  send: (method: string) => Promise<Record<string, unknown>>;
+  detach: () => Promise<void>;
+};
+
+interface PlaywrightModule {
+  chromium: {
+    launch: (options?: { headless?: boolean; devtools?: boolean }) => Promise<Browser>;
+  };
+}
+
+let playwrightModule: PlaywrightModule | null = null;
+
+const loadPlaywright = async (): Promise<PlaywrightModule> => {
+  if (playwrightModule) return playwrightModule;
+
+  try {
+    // @ts-expect-error - playwright may not be installed
+    const pw = await import("playwright");
+    playwrightModule = pw as PlaywrightModule;
+    return playwrightModule;
+  } catch {
+    throw new Error(
+      "Playwright is not installed. Run: bun add -d playwright"
+    );
+  }
+};
+
+export interface BrowserHandle {
+  browser: Browser;
+  context: BrowserContext;
+  page: Page;
+  close: () => Promise<void>;
+}
+
+export const launchBrowser = (
+  headless = true
+): Effect.Effect<BrowserHandle, BrowserLaunchFailed> =>
+  Effect.gen(function* () {
+    yield* Effect.logInfo(`Launching browser (headless: ${headless})`);
+
+    const pw = yield* Effect.tryPromise({
+      try: () => loadPlaywright(),
+      catch: (e) => new BrowserLaunchFailed({
+        reason: String(e),
+        headless,
+      }),
+    });
+
+    const browser = yield* Effect.tryPromise({
+      try: () => pw.chromium.launch({
+        headless,
+        devtools: !headless,
+      }),
+      catch: (e) => new BrowserLaunchFailed({
+        reason: `Failed to launch chromium: ${e}`,
+        headless,
+      }),
+    });
+
+    const context = yield* Effect.tryPromise({
+      try: () => browser.newContext({
+        viewport: { width: 1280, height: 720 },
+        userAgent: "SessionRecorder/1.0",
+      }),
+      catch: (e) => new BrowserLaunchFailed({
+        reason: `Failed to create context: ${e}`,
+        headless,
+      }),
+    });
+
+    const page = yield* Effect.tryPromise({
+      try: () => context.newPage(),
+      catch: (e) => new BrowserLaunchFailed({
+        reason: `Failed to create page: ${e}`,
+        headless,
+      }),
+    });
+
+    yield* Effect.logInfo("Browser launched successfully");
+
+    return {
+      browser,
+      context,
+      page,
+      close: async () => {
+        await context.close();
+        await browser.close();
+      },
+    };
+  });
+
+export const closeBrowser = (
+  handle: BrowserHandle
+): Effect.Effect<void> =>
+  Effect.gen(function* () {
+    yield* Effect.logInfo("Closing browser");
+    yield* Effect.promise(() => handle.close());
+    yield* Effect.logInfo("Browser closed");
+  });
+
+export const getBrowserMetrics = (
+  page: Page
+): Effect.Effect<BrowserMetrics, BrowserMetricsFailed> =>
+  Effect.gen(function* () {
+    yield* Effect.logDebug("Collecting browser metrics");
+
+    const metrics = yield* Effect.tryPromise({
+      try: async () => {
+        const pageMetrics = await page.metrics();
+
+        const memoryInfo = await page.evaluate(() => {
+          const perf = (performance as Performance & {
+            memory?: {
+              usedJSHeapSize: number;
+              totalJSHeapSize: number;
+            };
+          });
+          return perf.memory ? {
+            jsHeapUsedSize: perf.memory.usedJSHeapSize,
+            jsHeapTotalSize: perf.memory.totalJSHeapSize,
+          } : {
+            jsHeapUsedSize: 0,
+            jsHeapTotalSize: 0,
+          };
+        });
+
+        return {
+          jsHeapUsedSize: memoryInfo.jsHeapUsedSize,
+          jsHeapTotalSize: memoryInfo.jsHeapTotalSize,
+          documents: pageMetrics.Documents ?? 0,
+          frames: pageMetrics.Frames ?? 0,
+          jsEventListeners: pageMetrics.JSEventListeners ?? 0,
+          nodes: pageMetrics.Nodes ?? 0,
+          layoutCount: pageMetrics.LayoutCount ?? 0,
+          recalcStyleCount: pageMetrics.RecalcStyleCount ?? 0,
+          scriptDuration: pageMetrics.ScriptDuration ?? 0,
+          taskDuration: pageMetrics.TaskDuration ?? 0,
+        };
+      },
+      catch: (e) => new BrowserMetricsFailed({
+        reason: String(e),
+      }),
+    });
+
+    yield* Effect.logDebug(
+      `JS Heap: ${(metrics.jsHeapUsedSize / 1024 / 1024).toFixed(1)}MB`
+    );
+
+    return metrics;
+  });
+
+export const navigateTo = (
+  page: Page,
+  url: string
+): Effect.Effect<void> =>
+  Effect.gen(function* () {
+    yield* Effect.logInfo(`Navigating to ${url}`);
+    yield* Effect.promise(() => page.goto(url, { waitUntil: "networkidle" }));
+    yield* Effect.logInfo(`Loaded: ${page.url()}`);
+  });
+
+export const clickElement = (
+  page: Page,
+  selector: string
+): Effect.Effect<void> =>
+  Effect.gen(function* () {
+    yield* Effect.logDebug(`Clicking: ${selector}`);
+    yield* Effect.promise(() => page.click(selector));
+  });
+
+export const waitForPopup = (
+  context: BrowserContext,
+  timeoutMs = 30000
+): Effect.Effect<Page> =>
+  Effect.gen(function* () {
+    yield* Effect.logInfo("Waiting for popup window");
+
+    const popup = yield* Effect.promise(() =>
+      context.waitForEvent("page", { timeout: timeoutMs })
+    );
+
+    yield* Effect.promise(() => popup.waitForLoadState("domcontentloaded"));
+    yield* Effect.logInfo(`Popup opened: ${popup.url()}`);
+
+    return popup;
+  });
+
+export const closePopup = (
+  popup: Page
+): Effect.Effect<void> =>
+  Effect.gen(function* () {
+    yield* Effect.logInfo("Closing popup");
+    yield* Effect.promise(() => popup.close());
+  });
+
+export const waitForSelector = (
+  page: Page,
+  selector: string,
+  timeoutMs = 10000
+): Effect.Effect<void> =>
+  Effect.gen(function* () {
+    yield* Effect.logDebug(`Waiting for selector: ${selector}`);
+    yield* Effect.promise(() => page.waitForSelector(selector, { timeout: timeoutMs }));
+  });
+
+export const fillInput = (
+  page: Page,
+  selector: string,
+  value: string
+): Effect.Effect<void> =>
+  Effect.gen(function* () {
+    yield* Effect.logDebug(`Filling input: ${selector}`);
+    yield* Effect.promise(() => page.fill(selector, value));
+  });
+
+export const getPageInfo = (
+  page: Page
+): Effect.Effect<{ url: string; title: string }> =>
+  Effect.gen(function* () {
+    const url = page.url();
+    const title = yield* Effect.promise(() => page.title());
+    return { url, title };
+  });
+
+export const sleep = (ms: number): Effect.Effect<void> =>
+  Effect.promise(() => new Promise((resolve) => setTimeout(resolve, ms)));