@johpaz/hive 1.1.0

package/packages/core/src/canvas/canvas-manager.test.ts

@@ -0,0 +1,161 @@
+import { describe, it, expect, beforeEach, vi } from "bun:test";
+import { CanvasManager, WebSocketState, type WebSocketLike } from "./canvas-manager.ts";
+
+describe("CanvasManager", () => {
+  let manager: CanvasManager;
+
+  const createMockWebSocket = (): WebSocketLike & { messages: string[] } => {
+    const messages: string[] = [];
+    const handlers: Map<string, (data: unknown) => void> = new Map();
+
+    return {
+      readyState: WebSocketState.OPEN,
+      send: (data: string) => {
+        messages.push(data);
+        return true;
+      },
+      on: (event: string, callback: (data: unknown) => void) => {
+        handlers.set(event, callback);
+      },
+      close: () => {},
+      messages,
+    } as unknown as WebSocketLike & { messages: string[] };
+  };
+
+  beforeEach(() => {
+    manager = new CanvasManager();
+  });
+
+  describe("registerSession", () => {
+    it("should register a session", () => {
+      const ws = createMockWebSocket();
+      manager.registerSession("session-1", ws);
+
+      expect(manager.isSessionConnected("session-1")).toBe(true);
+    });
+
+    it("should track session stats", () => {
+      const ws = createMockWebSocket();
+      manager.registerSession("session-1", ws);
+
+      const stats = manager.getStats();
+      expect(stats.totalSessions).toBe(1);
+      expect(stats.activeSessions).toBe(1);
+    });
+  });
+
+  describe("render", () => {
+    it("should send render message to session", async () => {
+      const ws = createMockWebSocket();
+      manager.registerSession("session-1", ws);
+
+      const component = {
+        id: "btn-1",
+        type: "button" as const,
+        props: { label: "Click me" },
+      };
+
+      await manager.render("session-1", component);
+
+      expect(ws.messages.length).toBe(1);
+      const msg = JSON.parse(ws.messages[0]!);
+      expect(msg.type).toBe("canvas:render");
+      expect(msg.payload.component.id).toBe("btn-1");
+    });
+
+    it("should throw for disconnected session", async () => {
+      await expect(manager.render("unknown", { id: "x", type: "button", props: {} })).rejects.toThrow(
+        "Session not connected"
+      );
+    });
+  });
+
+  describe("update", () => {
+    it("should send update message to session", async () => {
+      const ws = createMockWebSocket();
+      manager.registerSession("session-1", ws);
+
+      const component = {
+        id: "btn-1",
+        type: "button" as const,
+        props: { label: "Updated" },
+      };
+
+      await manager.update("session-1", component);
+
+      expect(ws.messages.length).toBe(1);
+      const msg = JSON.parse(ws.messages[0]!);
+      expect(msg.type).toBe("canvas:update");
+    });
+  });
+
+  describe("clear", () => {
+    it("should send clear message to session", async () => {
+      const ws = createMockWebSocket();
+      manager.registerSession("session-1", ws);
+
+      await manager.clear("session-1");
+
+      expect(ws.messages.length).toBe(1);
+      const msg = JSON.parse(ws.messages[0]!);
+      expect(msg.type).toBe("canvas:clear");
+    });
+  });
+
+  describe("waitForInteraction", () => {
+    it("should resolve when interaction is received", async () => {
+      const ws = createMockWebSocket();
+      manager.registerSession("session-1", ws);
+
+      const component = { id: "form-1", type: "form" as const, props: {} };
+      await manager.render("session-1", component);
+
+      const interactionPromise = manager.waitForInteraction("session-1", "form-1", 5000);
+
+      manager.handleInteraction("session-1", "form-1", { name: "John" });
+
+      const result = await interactionPromise;
+      expect(result).toEqual({ name: "John" });
+    });
+  });
+
+  describe("getStats", () => {
+    it("should return correct stats", () => {
+      const ws1 = createMockWebSocket();
+      const ws2 = createMockWebSocket();
+
+      manager.registerSession("session-1", ws1);
+      manager.registerSession("session-2", ws2);
+
+      const stats = manager.getStats();
+      expect(stats.totalSessions).toBe(2);
+      expect(stats.activeSessions).toBe(2);
+    });
+  });
+
+  describe("getConnectedSessions", () => {
+    it("should list connected sessions", () => {
+      const ws1 = createMockWebSocket();
+      const ws2 = createMockWebSocket();
+
+      manager.registerSession("session-1", ws1);
+      manager.registerSession("session-2", ws2);
+
+      const sessions = manager.getConnectedSessions();
+      expect(sessions).toContain("session-1");
+      expect(sessions).toContain("session-2");
+    });
+  });
+
+  describe("clearAll", () => {
+    it("should clear all sessions and pending interactions", () => {
+      const ws = createMockWebSocket();
+      manager.registerSession("session-1", ws);
+
+      manager.clearAll();
+
+      const stats = manager.getStats();
+      expect(stats.totalSessions).toBe(0);
+    });
+  });
+});

package/packages/core/src/canvas/canvas-manager.ts

@@ -0,0 +1,319 @@
+import { EventEmitter } from "events";
+import { logger } from "../utils/logger.ts";
+import { eventBus } from "../events/event-bus.ts";
+
+export interface WebSocketLike {
+  readyState: number;
+  send(data: string | ArrayBuffer | Uint8Array): number | boolean;
+  close(code?: number, reason?: string): void;
+}
+
+export const WebSocketState = {
+  CONNECTING: 0,
+  OPEN: 1,
+  CLOSING: 2,
+  CLOSED: 3,
+};
+
+export interface CanvasComponent {
+  id: string;
+  type: "button" | "form" | "chart" | "table" | "markdown" | "text" | "image" | "card" | "progress" | "list" | "confirm";
+  props: Record<string, unknown>;
+}
+
+export interface CanvasMessage {
+  type: "canvas:render" | "canvas:update" | "canvas:clear" | "canvas:interact" | "canvas:connected" | "canvas:snapshot";
+  sessionId: string;
+  componentId?: string;
+  component?: CanvasComponent;
+  action?: string;
+  data?: unknown;
+}
+
+export interface InteractionEvent {
+  sessionId: string;
+  componentId: string;
+  action: string;
+  data: unknown;
+}
+
+interface PendingInteraction {
+  resolve: (data: unknown) => void;
+  reject: (error: Error) => void;
+  timeoutId: ReturnType<typeof setTimeout>;
+}
+
+export class CanvasManager extends EventEmitter {
+  private sessions: Map<string, WebSocketLike> = new Map();
+  private pendingInteractions: Map<string, PendingInteraction> = new Map();
+  private componentCache: Map<string, CanvasComponent[]> = new Map();
+  private log = logger.child("canvas");
+  private heartbeatInterval: ReturnType<typeof setInterval> | null = null;
+
+  constructor() {
+    super();
+    this.startHeartbeat();
+  }
+
+  private startHeartbeat(): void {
+    if (this.heartbeatInterval) return;
+
+    // Enviar ping a todas las sesiones cada 30 segundos
+    this.heartbeatInterval = setInterval(() => {
+      for (const [sessionId, ws] of this.sessions) {
+        if (ws.readyState === WebSocketState.OPEN) {
+          try {
+            ws.send(JSON.stringify({ type: "canvas:ping", sessionId }));
+            this.log.debug(`Heartbeat sent to ${sessionId}`);
+          } catch (e) {
+            this.log.error(`Failed to send heartbeat to ${sessionId}`);
+          }
+        }
+      }
+    }, 30000);
+  }
+
+  private stopHeartbeat(): void {
+    if (this.heartbeatInterval) {
+      clearInterval(this.heartbeatInterval);
+      this.heartbeatInterval = null;
+    }
+  }
+
+  registerSession(sessionId: string, ws: WebSocketLike): void {
+    this.sessions.set(sessionId, ws);
+    this.log.info(`Canvas session registered: ${sessionId}`);
+
+    eventBus.emit("tool:completed" as any, {
+      toolName: "canvas:session:register",
+      result: { sessionId },
+      duration: 0,
+      success: true,
+    });
+
+    // Notify the client that the session is registered
+    ws.send(JSON.stringify({ type: "canvas:connected", sessionId }));
+  }
+
+  unregisterSession(sessionId: string): void {
+    this.sessions.delete(sessionId);
+    this.cleanupPendingInteractions(sessionId);
+    this.log.info(`Canvas session disconnected: ${sessionId}`);
+  }
+
+  handleMessage(sessionId: string, data: unknown): void {
+    try {
+      const msg = JSON.parse(data as string);
+
+      this.log.debug(`Received message from session ${sessionId}: ${msg.type}`);
+
+      // === HANDSHAKE INICIAL ===
+      if (msg.type === "canvas:handshake") {
+        this.log.debug(`Handshake received from ${sessionId}`, msg);
+        const ws = this.sessions.get(sessionId);
+
+        // Confirmar handshake
+        if (ws && ws.readyState === WebSocketState.OPEN) {
+          ws.send(JSON.stringify({
+            type: "canvas:handshake:ack",
+            sessionId,
+            serverSessionId: sessionId,
+            timestamp: Date.now()
+          }));
+        }
+        return;
+      }
+
+      // === HEARTBEAT: PING DEL CLIENTE ===
+      if (msg.type === "canvas:ping") {
+        const ws = this.sessions.get(sessionId);
+        if (ws && ws.readyState === WebSocketState.OPEN) {
+          ws.send(JSON.stringify({ type: "canvas:pong", sessionId }));
+        }
+        return;
+      }
+
+      // === PONG DEL CLIENTE (opcional) ===
+      if (msg.type === "canvas:pong") {
+        // El cliente respondió al ping del servidor - conexión viva
+        this.log.debug(`Pong received from ${sessionId}`);
+        return;
+      }
+
+      if (msg.type === "canvas:interact") {
+        const { componentId, action, data: interactionData } = msg.payload || msg;
+
+        if (componentId) {
+          this.resolveInteraction(sessionId, componentId, interactionData);
+        }
+
+        this.emit("interaction", {
+          sessionId,
+          componentId,
+          action,
+          data: interactionData,
+        } as InteractionEvent);
+      } else if (msg.type === "canvas:get_cached") {
+        const components = this.getSessionComponents(sessionId);
+        const ws = this.sessions.get(sessionId);
+
+        this.log.info(`Sending ${components.length} cached components to session ${sessionId}`);
+
+        if (ws && ws.readyState === WebSocketState.OPEN) {
+          for (const component of components) {
+            ws.send(JSON.stringify({
+              type: "canvas:render",
+              sessionId,
+              component
+            }));
+          }
+        }
+      }
+    } catch (error) {
+      this.log.error(`Invalid canvas message: ${(error as Error).message}`);
+    }
+  }
+
+  private resolveInteraction(sessionId: string, componentId: string, data: unknown): void {
+    const key = `${sessionId}:${componentId}`;
+    const pending = this.pendingInteractions.get(key);
+
+    if (pending) {
+      clearTimeout(pending.timeoutId);
+      this.pendingInteractions.delete(key);
+      pending.resolve(data);
+    }
+  }
+
+  async render(sessionId: string, component: CanvasComponent): Promise<void> {
+    // Always cache the component for later retrieval
+    const cached = this.componentCache.get(sessionId) || [];
+    const existingIdx = cached.findIndex(c => c.id === component.id);
+    if (existingIdx >= 0) {
+      cached[existingIdx] = component;
+    } else {
+      cached.push(component);
+    }
+    this.componentCache.set(sessionId, cached);
+
+    const ws = this.sessions.get(sessionId);
+
+    if (!ws || ws.readyState !== WebSocketState.OPEN) {
+      // Session not connected, but we cached the component
+      this.log.debug(`Session ${sessionId} NOT connected. Available: ${this.getConnectedSessions().join(", ")}`);
+      return;
+    }
+
+    const message: CanvasMessage = {
+      type: "canvas:render",
+      sessionId,
+      component,
+    };
+
+    this.log.debug(`Sending render to session ${sessionId}: ${component.id}`);
+    ws.send(JSON.stringify(message));
+    this.log.debug(`Rendered component ${component.id} to session ${sessionId}`);
+  }
+
+  async update(sessionId: string, component: CanvasComponent): Promise<void> {
+    const ws = this.sessions.get(sessionId);
+
+    if (!ws || ws.readyState !== WebSocketState.OPEN) {
+      throw new Error(`Session not connected: ${sessionId}`);
+    }
+
+    const message: CanvasMessage = {
+      type: "canvas:update",
+      sessionId,
+      component,
+    };
+
+    ws.send(JSON.stringify(message));
+    this.log.debug(`Updated component ${component.id} in session ${sessionId}`);
+  }
+
+  async clear(sessionId: string): Promise<void> {
+    const ws = this.sessions.get(sessionId);
+
+    if (!ws || ws.readyState !== WebSocketState.OPEN) {
+      throw new Error(`Session not connected: ${sessionId}`);
+    }
+
+    const message: CanvasMessage = {
+      type: "canvas:clear",
+      sessionId,
+    };
+
+    ws.send(JSON.stringify(message));
+    this.log.debug(`Cleared canvas for session ${sessionId}`);
+  }
+
+  async waitForInteraction(
+    sessionId: string,
+    componentId: string,
+    timeout = 300000
+  ): Promise<unknown> {
+    const key = `${sessionId}:${componentId}`;
+
+    return new Promise((resolve, reject) => {
+      const timeoutId = setTimeout(() => {
+        this.pendingInteractions.delete(key);
+        reject(new Error(`Interaction timeout for ${componentId}`));
+      }, timeout);
+
+      this.pendingInteractions.set(key, { resolve, reject, timeoutId });
+    });
+  }
+
+  handleInteraction(sessionId: string, componentId: string, data: unknown): void {
+    this.resolveInteraction(sessionId, componentId, data);
+  }
+
+  getSessionComponents(sessionId: string): CanvasComponent[] {
+    return this.componentCache.get(sessionId) || [];
+  }
+
+  isSessionConnected(sessionId: string): boolean {
+    const ws = this.sessions.get(sessionId);
+    return ws !== undefined && ws.readyState === WebSocketState.OPEN;
+  }
+
+  getConnectedSessions(): string[] {
+    return Array.from(this.sessions.entries())
+      .filter(([_, ws]) => ws.readyState === WebSocketState.OPEN)
+      .map(([id]) => id);
+  }
+
+  getStats(): { totalSessions: number; activeSessions: number; pendingInteractions: number } {
+    return {
+      totalSessions: this.sessions.size,
+      activeSessions: this.getConnectedSessions().length,
+      pendingInteractions: this.pendingInteractions.size,
+    };
+  }
+
+  private cleanupPendingInteractions(sessionId: string): void {
+    for (const [key, pending] of this.pendingInteractions) {
+      if (key.startsWith(`${sessionId}:`)) {
+        clearTimeout(pending.timeoutId);
+        pending.reject(new Error(`Session disconnected: ${sessionId}`));
+        this.pendingInteractions.delete(key);
+      }
+    }
+  }
+
+  clearAll(): void {
+    this.stopHeartbeat();
+
+    for (const pending of this.pendingInteractions.values()) {
+      clearTimeout(pending.timeoutId);
+      pending.reject(new Error("Canvas manager cleared"));
+    }
+
+    this.pendingInteractions.clear();
+    this.sessions.clear();
+    this.log.info("Canvas manager cleared");
+  }
+}
+
+export const canvasManager = new CanvasManager();