@privateclaw/privateclaw-relay 0.1.3 → 0.1.5

package/dist/web/scripts/session-client.js

@@ -0,0 +1,469 @@
+import { createCryptoContext, createMessageId } from "./protocol-web.js?v=20260316-1";
+
+const CONNECT_TIMEOUT_MS = 15000;
+const INITIAL_RECONNECT_DELAY_MS = 1000;
+const MAX_RECONNECT_DELAY_MS = 30000;
+
+function normalizeTimestamp(value) {
+  if (typeof value !== "string" || value.trim() === "") {
+    return new Date();
+  }
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.valueOf())) {
+    return new Date();
+  }
+  return parsed;
+}
+
+function parseAttachments(value) {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value
+    .filter((item) => item && typeof item === "object")
+    .map((item) => ({
+      id: typeof item.id === "string" ? item.id : createMessageId("attachment"),
+      name: typeof item.name === "string" ? item.name : "attachment",
+      mimeType: typeof item.mimeType === "string" ? item.mimeType : "application/octet-stream",
+      sizeBytes: typeof item.sizeBytes === "number" ? item.sizeBytes : 0,
+      dataBase64: typeof item.dataBase64 === "string" ? item.dataBase64 : null,
+      uri: typeof item.uri === "string" ? item.uri : null,
+    }));
+}
+
+function parseCommands(value) {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value
+    .filter((item) => item && typeof item === "object")
+    .map((item) => ({
+      slash: typeof item.slash === "string" ? item.slash : "/unknown",
+      description: typeof item.description === "string" ? item.description : "",
+      acceptsArgs: Boolean(item.acceptsArgs),
+      source: typeof item.source === "string" ? item.source : "privateclaw",
+    }));
+}
+
+function parseParticipants(value) {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value
+    .filter((item) => item && typeof item === "object")
+    .map((item) => ({
+      appId: typeof item.appId === "string" ? item.appId : createMessageId("participant"),
+      displayName: typeof item.displayName === "string" ? item.displayName : "Participant",
+      deviceLabel: typeof item.deviceLabel === "string" ? item.deviceLabel : null,
+      joinedAt: normalizeTimestamp(item.joinedAt),
+    }));
+}
+
+export class PrivateClawWebSessionClient extends EventTarget {
+  constructor(invite, { identity }) {
+    super();
+    this.invite = { ...invite };
+    this.identity = { ...identity };
+    this.socket = null;
+    this.cryptoContext = null;
+    this.connectTimeout = null;
+    this.reconnectTimer = null;
+    this.disposed = false;
+    this.sawTerminalClose = false;
+    this.messageCounter = 0;
+    this.connectionGeneration = 0;
+    this.reconnectDelayMs = INITIAL_RECONNECT_DELAY_MS;
+  }
+
+  async connect() {
+    if (this.disposed) {
+      throw new Error("session_client_disposed");
+    }
+    this.cryptoContext = await createCryptoContext({
+      sessionId: this.invite.sessionId,
+      sessionKey: this.invite.sessionKey,
+    });
+    this.#openSocket("connecting");
+  }
+
+  async disconnect({ reason = "client_closed", notifyRemote = true } = {}) {
+    if (this.disposed) {
+      return;
+    }
+    this.disposed = true;
+    clearTimeout(this.connectTimeout);
+    clearTimeout(this.reconnectTimer);
+    this.connectTimeout = null;
+    this.reconnectTimer = null;
+
+    try {
+      if (notifyRemote && this.socket?.readyState === WebSocket.OPEN && this.cryptoContext) {
+        await this.#sendEncrypted({
+          kind: "session_close",
+          reason,
+          appId: this.identity.appId,
+          sentAt: new Date().toISOString(),
+        });
+      }
+    } finally {
+      if (this.socket) {
+        this.socket.close(1000, reason);
+      }
+      this.socket = null;
+    }
+  }
+
+  async sendUserMessage(text, { attachments = [] } = {}) {
+    const trimmed = typeof text === "string" ? text.trim() : "";
+    if (!trimmed && attachments.length === 0) {
+      return;
+    }
+
+    const sentAt = new Date();
+    const clientMessageId = this.#nextLocalMessageId();
+    await this.#sendEncrypted({
+      kind: "user_message",
+      text: trimmed,
+      clientMessageId,
+      sentAt: sentAt.toISOString(),
+      appId: this.identity.appId,
+      ...(this.identity.displayName ? { displayName: this.identity.displayName } : {}),
+      ...(attachments.length > 0 ? { attachments } : {}),
+    });
+
+    this.#dispatch("message", {
+      message: {
+        id: clientMessageId,
+        sender: "user",
+        text: trimmed,
+        sentAt,
+        attachments,
+        isPending: true,
+        isOwnMessage: true,
+        senderId: this.identity.appId,
+        senderLabel: this.identity.displayName,
+      },
+    });
+  }
+
+  #openSocket(status) {
+    this.connectionGeneration += 1;
+    const generation = this.connectionGeneration;
+    this.sawTerminalClose = false;
+
+    clearTimeout(this.connectTimeout);
+    if (this.socket) {
+      this.socket.close(1000, "reconnect");
+    }
+
+    this.#dispatch("state", {
+      status,
+      notice: "connectingRelay",
+      invite: this.invite,
+    });
+
+    const socket = new WebSocket(this.#buildSocketUrl());
+    this.socket = socket;
+
+    this.connectTimeout = window.setTimeout(() => {
+      if (socket.readyState === WebSocket.CONNECTING) {
+        socket.close(4000, "connect_timeout");
+        this.#handleSocketError(new Error("connect_timeout"), generation);
+      }
+    }, CONNECT_TIMEOUT_MS);
+
+    socket.addEventListener("open", () => {
+      clearTimeout(this.connectTimeout);
+      this.connectTimeout = null;
+    });
+
+    socket.addEventListener("message", async (event) => {
+      try {
+        await this.#handleRawMessage(event.data, generation);
+      } catch (error) {
+        this.#dispatch("state", {
+          status: "error",
+          notice: "unknownPayload",
+          details: error instanceof Error ? error.message : String(error),
+          invite: this.invite,
+        });
+      }
+    });
+
+    socket.addEventListener("error", () => {
+      this.#handleSocketError(new Error("websocket_error"), generation);
+    });
+
+    socket.addEventListener("close", () => {
+      clearTimeout(this.connectTimeout);
+      this.connectTimeout = null;
+      if (this.disposed || this.sawTerminalClose || generation !== this.connectionGeneration) {
+        return;
+      }
+      this.socket = null;
+      this.#scheduleReconnect();
+    });
+  }
+
+  #handleSocketError(error, generation) {
+    if (this.disposed || this.sawTerminalClose || generation !== this.connectionGeneration) {
+      return;
+    }
+    this.#dispatch("state", {
+      status: "error",
+      notice: "connectionError",
+      details: error instanceof Error ? error.message : String(error),
+      invite: this.invite,
+    });
+  }
+
+  #scheduleReconnect() {
+    if (this.disposed || this.sawTerminalClose || this.reconnectTimer) {
+      return;
+    }
+    const delay = this.reconnectDelayMs;
+    this.#dispatch("state", {
+      status: "reconnecting",
+      notice: "connectingRelay",
+      invite: this.invite,
+    });
+    this.reconnectTimer = window.setTimeout(() => {
+      this.reconnectTimer = null;
+      this.#openSocket("reconnecting");
+    }, delay);
+    this.reconnectDelayMs = Math.min(MAX_RECONNECT_DELAY_MS, this.reconnectDelayMs * 2);
+  }
+
+  async #handleRawMessage(rawMessage, generation) {
+    if (this.disposed || generation !== this.connectionGeneration || typeof rawMessage !== "string") {
+      return;
+    }
+
+    const decoded = JSON.parse(rawMessage);
+    if (!decoded || typeof decoded !== "object") {
+      throw new Error("relay_event_not_object");
+    }
+
+    switch (decoded.type) {
+      case "relay:attached": {
+        this.reconnectDelayMs = INITIAL_RECONNECT_DELAY_MS;
+        if (typeof decoded.expiresAt === "string" && decoded.expiresAt) {
+          this.invite = {
+            ...this.invite,
+            expiresAt: decoded.expiresAt,
+          };
+        }
+        this.#dispatch("state", {
+          status: "relayAttached",
+          notice: "relayAttached",
+          invite: this.invite,
+        });
+        await this.#sendEncrypted({
+          kind: "client_hello",
+          appVersion: "privateclaw_web/0.1.0",
+          appId: this.identity.appId,
+          deviceLabel: "PrivateClaw Web",
+          ...(this.identity.displayName ? { displayName: this.identity.displayName } : {}),
+          sentAt: new Date().toISOString(),
+        });
+        return;
+      }
+      case "relay:frame": {
+        if (!decoded.envelope || typeof decoded.envelope !== "object") {
+          throw new Error("missing_encrypted_envelope");
+        }
+        if (!this.cryptoContext) {
+          throw new Error("missing_crypto_context");
+        }
+        const payload = await this.cryptoContext.decrypt(decoded.envelope);
+        await this.#handlePayload(payload);
+        return;
+      }
+      case "relay:error": {
+        this.#dispatch("state", {
+          status: "error",
+          notice: "relayError",
+          details: typeof decoded.message === "string" ? decoded.message : "unknown_error",
+          invite: this.invite,
+        });
+        return;
+      }
+      case "relay:session_closed": {
+        this.sawTerminalClose = true;
+        this.#dispatch("state", {
+          status: "closed",
+          notice: "sessionClosed",
+          details: typeof decoded.reason === "string" ? decoded.reason : "unknown_reason",
+          invite: this.invite,
+        });
+        await this.disconnect({ notifyRemote: false, reason: "session_closed" });
+        return;
+      }
+      default:
+        this.#dispatch("state", {
+          status: "error",
+          notice: "unknownRelayEvent",
+          details: typeof decoded.type === "string" ? decoded.type : "unknown_event",
+          invite: this.invite,
+        });
+    }
+  }
+
+  async #handlePayload(payload) {
+    switch (payload.kind) {
+      case "server_welcome": {
+        this.#dispatch("state", {
+          status: "active",
+          notice: "welcome",
+          details: typeof payload.message === "string" ? payload.message : null,
+          invite: this.invite,
+        });
+        return;
+      }
+      case "assistant_message": {
+        this.#dispatch("message", {
+          message: {
+            id: typeof payload.messageId === "string" ? payload.messageId : this.#nextLocalMessageId(),
+            sender: "assistant",
+            text: typeof payload.text === "string" ? payload.text : "",
+            sentAt: normalizeTimestamp(payload.sentAt),
+            replyTo: typeof payload.replyTo === "string" ? payload.replyTo : null,
+            isPending: payload.pending === true,
+            attachments: parseAttachments(payload.attachments),
+          },
+        });
+        return;
+      }
+      case "participant_message": {
+        const senderAppId = typeof payload.senderAppId === "string" ? payload.senderAppId : "unknown-app";
+        this.#dispatch("message", {
+          message: {
+            id: typeof payload.messageId === "string" ? payload.messageId : this.#nextLocalMessageId(),
+            sender: "user",
+            text: typeof payload.text === "string" ? payload.text : "",
+            sentAt: normalizeTimestamp(payload.sentAt),
+            replyTo: typeof payload.clientMessageId === "string" ? payload.clientMessageId : null,
+            attachments: parseAttachments(payload.attachments),
+            isOwnMessage: senderAppId === this.identity.appId,
+            senderId: senderAppId,
+            senderLabel:
+              typeof payload.senderDisplayName === "string" ? payload.senderDisplayName : senderAppId,
+          },
+        });
+        return;
+      }
+      case "system_message": {
+        this.#dispatch("message", {
+          message: {
+            id: typeof payload.messageId === "string" ? payload.messageId : this.#nextLocalMessageId(),
+            sender: "system",
+            text: typeof payload.message === "string" ? payload.message : "",
+            sentAt: normalizeTimestamp(payload.sentAt),
+            replyTo: typeof payload.replyTo === "string" ? payload.replyTo : null,
+            severity: typeof payload.severity === "string" ? payload.severity : "info",
+            attachments: [],
+          },
+        });
+        return;
+      }
+      case "provider_capabilities": {
+        this.invite = {
+          ...this.invite,
+          expiresAt: typeof payload.expiresAt === "string" ? payload.expiresAt : this.invite.expiresAt,
+          groupMode: typeof payload.groupMode === "boolean" ? payload.groupMode : this.invite.groupMode,
+          providerLabel:
+            typeof payload.providerLabel === "string" ? payload.providerLabel : this.invite.providerLabel,
+        };
+        let assignedIdentity = null;
+        if (
+          payload.currentAppId === this.identity.appId &&
+          typeof payload.currentDisplayName === "string" &&
+          payload.currentDisplayName.trim() !== "" &&
+          payload.currentDisplayName !== this.identity.displayName
+        ) {
+          this.identity = {
+            ...this.identity,
+            displayName: payload.currentDisplayName,
+          };
+          assignedIdentity = this.identity;
+        }
+        this.#dispatch("capabilities", {
+          status: "active",
+          invite: this.invite,
+          commands: parseCommands(payload.commands),
+          participants: parseParticipants(payload.participants),
+          identity: assignedIdentity,
+          botMuted: Boolean(payload.botMuted),
+        });
+        this.#dispatch("state", {
+          status: "active",
+          invite: this.invite,
+        });
+        return;
+      }
+      case "session_renewed": {
+        if (typeof payload.newSessionKey !== "string" || payload.newSessionKey.trim() === "") {
+          throw new Error("missing_next_session_key");
+        }
+        this.invite = {
+          ...this.invite,
+          sessionKey: payload.newSessionKey,
+          expiresAt: typeof payload.expiresAt === "string" ? payload.expiresAt : this.invite.expiresAt,
+        };
+        this.cryptoContext = await createCryptoContext({
+          sessionId: this.invite.sessionId,
+          sessionKey: this.invite.sessionKey,
+        });
+        this.#dispatch("renewed", {
+          invite: this.invite,
+          expiresAt: normalizeTimestamp(payload.expiresAt),
+          replyTo: typeof payload.replyTo === "string" ? payload.replyTo : null,
+          message: typeof payload.message === "string" ? payload.message : "",
+        });
+        this.#dispatch("state", {
+          status: "active",
+          invite: this.invite,
+        });
+        await this.#sendEncrypted({
+          kind: "client_hello",
+          appVersion: "privateclaw_web/0.1.0",
+          appId: this.identity.appId,
+          deviceLabel: "PrivateClaw Web",
+          ...(this.identity.displayName ? { displayName: this.identity.displayName } : {}),
+          sentAt: new Date().toISOString(),
+        });
+        return;
+      }
+      default:
+        this.#dispatch("state", {
+          status: "error",
+          notice: "unknownPayload",
+          details: typeof payload.kind === "string" ? payload.kind : "unknown_payload",
+          invite: this.invite,
+        });
+    }
+  }
+
+  async #sendEncrypted(payload) {
+    if (!this.cryptoContext || !this.socket || this.socket.readyState !== WebSocket.OPEN) {
+      throw new Error("session_not_connected");
+    }
+    const envelope = await this.cryptoContext.encrypt(payload);
+    this.socket.send(JSON.stringify({ type: "app:frame", envelope }));
+  }
+
+  #buildSocketUrl() {
+    const baseUrl = new URL(this.invite.appWsUrl);
+    baseUrl.searchParams.set("appId", this.identity.appId);
+    return baseUrl.toString();
+  }
+
+  #dispatch(type, detail) {
+    this.dispatchEvent(new CustomEvent(type, { detail }));
+  }
+
+  #nextLocalMessageId() {
+    this.messageCounter += 1;
+    return `client-${Date.now()}-${this.messageCounter}`;
+  }
+}

package/dist/web/scripts/site.js

@@ -0,0 +1,158 @@
+import { applyTranslations, bindLocaleSelect, getValue, onLocaleChange, t } from "./i18n.js?v=20260316-3";
+
+const localeSelect = document.getElementById("locale-select");
+const webEntry = document.getElementById("web-entry");
+const deviceHintCopy = document.getElementById("device-hint-copy");
+const heroStats = document.getElementById("hero-stats");
+const previewChat = document.getElementById("preview-chat");
+const featureGrid = document.getElementById("feature-grid");
+const scenarioGrid = document.getElementById("scenario-grid");
+const setupGrid = document.getElementById("setup-grid");
+
+bindLocaleSelect(localeSelect);
+
+function isMobileDevice() {
+  const ua = navigator.userAgent || "";
+  const coarsePointer = globalThis.matchMedia?.("(pointer: coarse)")?.matches ?? false;
+  const narrowScreen = globalThis.matchMedia?.("(max-width: 820px)")?.matches ?? false;
+  return coarsePointer || narrowScreen || /Android|iPhone|iPad|iPod|Mobile/i.test(ua);
+}
+
+function renderStats() {
+  heroStats.replaceChildren();
+  const stats = getValue("site.heroStats");
+  if (!Array.isArray(stats)) {
+    return;
+  }
+  for (const stat of stats) {
+    const card = document.createElement("div");
+    card.className = "stat-card";
+
+    const title = document.createElement("strong");
+    title.textContent = stat.value;
+
+    const body = document.createElement("span");
+    body.textContent = stat.label;
+
+    card.append(title, body);
+    heroStats.append(card);
+  }
+}
+
+function renderPreview() {
+  previewChat.replaceChildren();
+  const messages = getValue("site.previewMessages");
+  if (!Array.isArray(messages)) {
+    return;
+  }
+  for (const item of messages) {
+    const bubble = document.createElement("div");
+    bubble.className = `preview-bubble ${item.role === "assistant" ? "assistant" : "member"}`;
+
+    const label = document.createElement("span");
+    label.className = "preview-name";
+    label.textContent = item.speaker;
+
+    const text = document.createElement("div");
+    text.textContent = item.text;
+
+    bubble.append(label, text);
+    previewChat.append(bubble);
+  }
+}
+
+function renderCards(target, items, cardClass) {
+  target.replaceChildren();
+  if (!Array.isArray(items)) {
+    return;
+  }
+  for (const item of items) {
+    const card = document.createElement("article");
+    card.className = cardClass;
+
+    const eyebrow = document.createElement("div");
+    eyebrow.className = cardClass === "feature-card" ? "feature-eyebrow" : "scenario-eyebrow";
+    eyebrow.textContent = item.eyebrow;
+
+    const title = document.createElement("h3");
+    title.textContent = item.title;
+
+    const body = document.createElement("p");
+    body.textContent = item.body;
+
+    card.append(eyebrow, title, body);
+    target.append(card);
+  }
+}
+
+function renderSetupSteps() {
+  setupGrid.replaceChildren();
+  const steps = getValue("site.setupSteps");
+  if (!Array.isArray(steps)) {
+    return;
+  }
+
+  for (const item of steps) {
+    const card = document.createElement("article");
+    card.className = "setup-card";
+
+    const stepLabel = document.createElement("div");
+    stepLabel.className = "setup-step-label";
+    stepLabel.textContent = item.step;
+
+    const title = document.createElement("h3");
+    title.textContent = item.title;
+
+    const body = document.createElement("p");
+    body.textContent = item.body;
+
+    card.append(stepLabel, title, body);
+
+    if (Array.isArray(item.commands) && item.commands.length > 0) {
+      const commands = document.createElement("div");
+      commands.className = "setup-command-list";
+      for (const command of item.commands) {
+        const pre = document.createElement("pre");
+        pre.className = "setup-command";
+
+        const code = document.createElement("code");
+        code.textContent = command;
+
+        pre.append(code);
+        commands.append(pre);
+      }
+      card.append(commands);
+    }
+
+    if (item.note) {
+      const note = document.createElement("p");
+      note.className = "setup-note";
+      note.textContent = item.note;
+      card.append(note);
+    }
+
+    setupGrid.append(card);
+  }
+}
+
+function renderWebEntry() {
+  const mobile = isMobileDevice();
+  webEntry.hidden = false;
+  webEntry.classList.remove("hidden");
+  deviceHintCopy.textContent = t(mobile ? "site.heroMobileHint" : "site.heroDesktopHint");
+}
+
+function renderPage() {
+  applyTranslations();
+  document.title = t("site.documentTitle");
+  renderWebEntry();
+  renderStats();
+  renderPreview();
+  renderCards(featureGrid, getValue("site.features"), "feature-card");
+  renderCards(scenarioGrid, getValue("site.scenarios"), "scenario-card");
+  renderSetupSteps();
+}
+
+window.addEventListener("resize", renderWebEntry);
+onLocaleChange(renderPage);
+renderPage();