@bitovi/vybit 0.4.4

package/server/websocket.ts

@@ -0,0 +1,130 @@
+// WebSocket server setup
+
+import { WebSocketServer, type WebSocket } from "ws";
+import type { Server } from "http";
+
+import { addPatch, commitDraft, getQueueUpdate, discardDraftPatch } from "./queue.js";
+import type { Patch } from "../shared/types.js";
+
+export interface WebSocketDeps {
+  broadcastPatchUpdate: () => void;
+  broadcastTo: (role: string, data: object, exclude?: WebSocket) => void;
+}
+
+export function setupWebSocket(httpServer: Server): WebSocketDeps {
+  const wss = new WebSocketServer({ server: httpServer, maxPayload: 10 * 1024 * 1024 });
+  const clientRoles = new Map<WebSocket, string>();
+
+  function broadcastTo(role: string, data: object, exclude?: WebSocket): void {
+    const payload = JSON.stringify(data);
+    for (const [client, clientRole] of clientRoles) {
+      if (clientRole === role && client !== exclude && client.readyState === 1) {
+        client.send(payload);
+      }
+    }
+  }
+
+  function broadcastPatchUpdate(): void {
+    broadcastTo("panel", { type: "QUEUE_UPDATE", ...getQueueUpdate() });
+  }
+
+  wss.on("connection", (ws: WebSocket) => {
+    console.error("[ws] Client connected");
+
+    ws.on("message", (raw) => {
+      try {
+        const msg = JSON.parse(String(raw));
+
+        if (msg.type === "REGISTER") {
+          const role = msg.role;
+          if (role === "overlay" || role === "panel" || role === "design") {
+            clientRoles.set(ws, role);
+            console.error(`[ws] Client registered as: ${role}`);
+            if (role === "panel") {
+              ws.send(JSON.stringify({ type: "QUEUE_UPDATE", ...getQueueUpdate() }));
+            }
+          }
+          return;
+        }
+
+        // Route messages with a "to" field to all clients of that role
+        if (msg.to) {
+          broadcastTo(msg.to, msg, ws);
+          return;
+        }
+
+        // Server-handled messages (no "to" field)
+        if (msg.type === "PATCH_STAGED") {
+          const patch = addPatch({ ...msg.patch, kind: msg.patch.kind ?? 'class-change' });
+          console.error(`[ws] Patch staged: #${patch.id}`);
+          broadcastPatchUpdate();
+        } else if (msg.type === "MESSAGE_STAGE") {
+          const patch = addPatch({
+            id: msg.id,
+            kind: 'message',
+            elementKey: msg.elementKey ?? '',
+            status: 'staged',
+            originalClass: '',
+            newClass: '',
+            property: '',
+            timestamp: new Date().toISOString(),
+            message: msg.message,
+            component: msg.component,
+          });
+          console.error(`[ws] Message patch staged: #${patch.id}`);
+          broadcastPatchUpdate();
+        } else if (msg.type === "PATCH_COMMIT") {
+          const commit = commitDraft(msg.ids);
+          console.error(`[ws] Commit created: #${commit.id} (${commit.patches.length} patches)`);
+          broadcastPatchUpdate();
+        } else if (msg.type === "DISCARD_DRAFTS") {
+          const ids: string[] = msg.ids ?? [];
+          for (const id of ids) {
+            discardDraftPatch(id);
+          }
+          console.error(`[ws] Discarded ${ids.length} draft patch(es)`);
+          broadcastPatchUpdate();
+        } else if (msg.type === "PING") {
+          ws.send(JSON.stringify({ type: "PONG" }));
+        } else if (msg.type === "DESIGN_SUBMIT") {
+          const patch: Patch = {
+            id: crypto.randomUUID(),
+            kind: 'design',
+            elementKey: `${msg.target?.tag ?? ''}.${(msg.target?.classes ?? '').split(' ')[0]}`,
+            status: 'staged',
+            originalClass: '',
+            newClass: '',
+            property: 'design',
+            timestamp: new Date().toISOString(),
+            component: msg.componentName ? { name: msg.componentName } : undefined,
+            target: msg.target,
+            context: msg.context,
+            image: msg.image,
+            insertMode: msg.insertMode,
+            canvasWidth: msg.canvasWidth,
+            canvasHeight: msg.canvasHeight,
+          };
+          addPatch(patch);
+          broadcastPatchUpdate();
+          // Tell the overlay to replace the canvas with a static preview
+          broadcastTo("overlay", {
+            type: "DESIGN_SUBMITTED",
+            image: msg.image,
+          }, ws);
+          console.error(`[ws] Design patch staged: ${patch.id}`);
+        } else if (msg.type === "DESIGN_CLOSE") {
+          broadcastTo("overlay", { type: "DESIGN_CLOSE" }, ws);
+        }
+      } catch (err) {
+        console.error("[ws] Bad message:", err);
+      }
+    });
+
+    ws.on("close", () => {
+      clientRoles.delete(ws);
+      console.error("[ws] Client disconnected");
+    });
+  });
+
+  return { broadcastPatchUpdate, broadcastTo };
+}

package/shared/types.ts

@@ -0,0 +1,304 @@
+// Shared types for the PATCH protocol.
+// Imported by overlay (esbuild), panel (Vite), and server (tsx).
+
+export type ContainerName = 'modal' | 'popover' | 'sidebar' | 'popup';
+
+export type PatchKind = 'class-change' | 'message' | 'design';
+
+export type PatchStatus = 'staged' | 'committed' | 'implementing' | 'implemented' | 'error';
+
+export interface Patch {
+  id: string;               // UUID
+  kind: PatchKind;          // discriminator
+  elementKey: string;        // stable identifier (empty string for general messages)
+  status: PatchStatus;
+  // Class-change fields (used when kind === 'class-change'):
+  originalClass: string;     // classToken before edit ('' if adding new)
+  newClass: string;          // classToken after edit
+  property: string;          // prefix of the change
+  timestamp: string;         // ISO 8601
+  // Populated at stage time by the overlay (has DOM access):
+  pageUrl?: string;          // URL of the inspected page
+  component?: { name: string; instanceCount?: number };
+  target?: { tag: string; classes: string; innerText: string };
+  context?: string;
+  errorMessage?: string;
+  // Message field (used when kind === 'message'):
+  message?: string;          // free-form text
+  // Design fields (used when kind === 'design'):
+  image?: string;            // data URL of the canvas snapshot
+  insertMode?: string;       // before | after | first-child | last-child
+  canvasWidth?: number;
+  canvasHeight?: number;
+  // Commit reference:
+  commitId?: string;         // Set when committed into a Commit
+}
+
+export type CommitStatus = 'staged' | 'committed' | 'implementing' | 'implemented' | 'partial' | 'error';
+
+export interface Commit {
+  id: string;               // UUID
+  patches: Patch[];         // Ordered: class-changes AND messages interleaved
+  status: CommitStatus;
+  timestamp: string;        // ISO 8601 — set when committed
+}
+
+/** Lightweight patch info for UI display (omits context/target for smaller WS payloads) */
+export interface PatchSummary {
+  id: string;
+  kind: PatchKind;
+  elementKey: string;
+  status: PatchStatus;
+  originalClass: string;
+  newClass: string;
+  property: string;
+  timestamp: string;
+  component?: { name: string; instanceCount?: number };
+  errorMessage?: string;
+  message?: string;
+  image?: string;
+}
+
+export interface CommitSummary {
+  id: string;
+  status: CommitStatus;
+  timestamp: string;
+  patches: PatchSummary[];  // ordered — class-changes and messages interleaved
+}
+
+// ---------------------------------------------------------------------------
+// WebSocket messages
+// ---------------------------------------------------------------------------
+
+// Kept unchanged
+export interface RegisterMessage {
+  type: 'REGISTER';
+  role: 'overlay' | 'panel';
+}
+
+export interface ElementSelectedMessage {
+  type: 'ELEMENT_SELECTED';
+  to: 'panel';
+  componentName: string;
+  instanceCount: number;
+  classes: string;
+  tailwindConfig: any;
+}
+
+export interface ClearHighlightsMessage {
+  type: 'CLEAR_HIGHLIGHTS';
+  to: 'overlay';
+}
+
+export interface SwitchContainerMessage {
+  type: 'SWITCH_CONTAINER';
+  to: 'overlay';
+  container: ContainerName;
+}
+
+export interface PingMessage {
+  type: 'PING';
+}
+
+export interface PongMessage {
+  type: 'PONG';
+}
+
+// New PATCH_* messages
+
+/** Panel → Overlay: live-preview a class swap */
+export interface PatchPreviewMessage {
+  type: 'PATCH_PREVIEW';
+  to: 'overlay';
+  oldClass: string;
+  newClass: string;
+}
+
+/** Panel → Overlay: revert any active preview */
+export interface PatchRevertMessage {
+  type: 'PATCH_REVERT';
+  to: 'overlay';
+}
+
+/** Panel → Overlay: stage a change (overlay fills context, sends PATCH_STAGED to server) */
+export interface PatchStageMessage {
+  type: 'PATCH_STAGE';
+  to: 'overlay';
+  id: string;
+  oldClass: string;
+  newClass: string;
+  property: string;
+}
+
+/** Overlay → Server: patch with full context, added to server queue */
+export interface PatchStagedMessage {
+  type: 'PATCH_STAGED';
+  patch: Patch;
+}
+
+/** Panel → Server: move staged patches to committed status */
+export interface PatchCommitMessage {
+  type: 'PATCH_COMMIT';
+  ids: string[];            // includes both class-change AND message patch IDs
+}
+
+/** Panel → Server: stage a message patch */
+export interface MessageStageMessage {
+  type: 'MESSAGE_STAGE';
+  id: string;               // UUID (generated by panel)
+  message: string;          // the user's text
+  elementKey?: string;      // optional — current element, or empty for general context
+  component?: { name: string; instanceCount?: number };
+}
+
+/** Server → Panel/Overlay: broadcast full queue state */
+export interface QueueUpdateMessage {
+  type: 'QUEUE_UPDATE';
+  // Counts for the footer pills
+  draftCount: number;       // patches in the draft (staged, not yet committed)
+  committedCount: number;   // commits with status 'committed'
+  implementingCount: number;
+  implementedCount: number;
+  partialCount: number;
+  errorCount: number;
+  // Draft: the in-progress group (ordered by insertion)
+  draft: PatchSummary[];    // all staged patches in order (class-changes + messages)
+  // Finalized commits by status
+  commits: CommitSummary[];
+}
+
+/** @deprecated Use QueueUpdateMessage instead */
+export interface PatchUpdateMessage {
+  type: 'PATCH_UPDATE';
+  staged: number;
+  committed: number;
+  implementing: number;
+  implemented: number;
+  patches: {
+    staged: PatchSummary[];
+    committed: PatchSummary[];
+    implementing: PatchSummary[];
+    implemented: PatchSummary[];
+  };
+}
+
+/** Server → Panel: agent reports work-in-progress */
+export interface PatchImplementingMessage {
+  type: 'PATCH_IMPLEMENTING';
+  ids: string[];
+}
+
+/** Server → Panel: agent marks changes done */
+export interface PatchImplementedMessage {
+  type: 'PATCH_IMPLEMENTED';
+  ids: string[];
+}
+
+/** Server → Panel: error on a specific patch */
+export interface PatchErrorMessage {
+  type: 'PATCH_ERROR';
+  id: string;
+  errorMessage: string;
+}
+
+// ---------------------------------------------------------------------------
+// Design canvas messages
+// ---------------------------------------------------------------------------
+
+export type InsertMode = 'before' | 'after' | 'first-child' | 'last-child';
+
+/** Panel → Overlay: request to inject a design canvas */
+export interface InsertDesignCanvasMessage {
+  type: 'INSERT_DESIGN_CANVAS';
+  to: 'overlay';
+  insertMode: InsertMode;
+}
+
+/** Overlay → Design iframe: element context for the canvas */
+export interface ElementContextMessage {
+  type: 'ELEMENT_CONTEXT';
+  to: 'design';
+  componentName: string;
+  instanceCount: number;
+  target: {
+    tag: string;
+    classes: string;
+    innerText: string;
+  };
+  context: string;
+  insertMode: InsertMode;
+}
+
+/** Design iframe → Server: submit the sketch */
+export interface DesignSubmitMessage {
+  type: 'DESIGN_SUBMIT';
+  image: string;
+  componentName: string;
+  target: {
+    tag: string;
+    classes: string;
+    innerText: string;
+  };
+  context: string;
+  insertMode: InsertMode;
+  canvasWidth: number;
+  canvasHeight: number;
+}
+
+/** Design iframe → Overlay: close the canvas wrapper */
+export interface DesignCloseMessage {
+  type: 'DESIGN_CLOSE';
+}
+
+// ---------------------------------------------------------------------------
+// Union types
+// ---------------------------------------------------------------------------
+
+export type OverlayToPanel = ElementSelectedMessage;
+export type PanelToOverlay =
+  | PatchPreviewMessage
+  | PatchRevertMessage
+  | PatchStageMessage
+  | ClearHighlightsMessage
+  | SwitchContainerMessage
+  | InsertDesignCanvasMessage;
+export type OverlayToServer = PatchStagedMessage;
+export type PanelToServer = PatchCommitMessage | MessageStageMessage;
+export type ClientToServer =
+  | RegisterMessage
+  | PatchStagedMessage
+  | PatchCommitMessage
+  | MessageStageMessage
+  | DesignSubmitMessage
+  | DesignCloseMessage
+  | PingMessage;
+export type ServerToClient =
+  | PongMessage
+  | QueueUpdateMessage
+  | PatchUpdateMessage
+  | PatchImplementingMessage
+  | PatchImplementedMessage
+  | PatchErrorMessage;
+
+export type AnyMessage =
+  | RegisterMessage
+  | ElementSelectedMessage
+  | PatchPreviewMessage
+  | PatchRevertMessage
+  | PatchStageMessage
+  | PatchStagedMessage
+  | PatchCommitMessage
+  | MessageStageMessage
+  | QueueUpdateMessage
+  | PatchUpdateMessage
+  | PatchImplementingMessage
+  | PatchImplementedMessage
+  | PatchErrorMessage
+  | ClearHighlightsMessage
+  | SwitchContainerMessage
+  | InsertDesignCanvasMessage
+  | ElementContextMessage
+  | DesignSubmitMessage
+  | DesignCloseMessage
+  | PingMessage
+  | PongMessage;