openclaw-multi-auto 1.3.6 → 1.3.8

package/ui/src/ui/views/channels.ts

@@ -0,0 +1,325 @@
+import { html, nothing } from "lit";
+import { formatRelativeTimestamp } from "../format.ts";
+import type {
+  ChannelAccountSnapshot,
+  ChannelUiMetaEntry,
+  ChannelsStatusSnapshot,
+  DiscordStatus,
+  GoogleChatStatus,
+  IMessageStatus,
+  NostrProfile,
+  NostrStatus,
+  SignalStatus,
+  SlackStatus,
+  TelegramStatus,
+  WhatsAppStatus,
+} from "../types.ts";
+import { renderChannelConfigSection } from "./channels.config.ts";
+import { renderDiscordCard } from "./channels.discord.ts";
+import { renderGoogleChatCard } from "./channels.googlechat.ts";
+import { renderIMessageCard } from "./channels.imessage.ts";
+import { renderNostrCard } from "./channels.nostr.ts";
+import { channelEnabled, renderChannelAccountCount } from "./channels.shared.ts";
+import { renderSignalCard } from "./channels.signal.ts";
+import { renderSlackCard } from "./channels.slack.ts";
+import { renderTelegramCard } from "./channels.telegram.ts";
+import type { ChannelKey, ChannelsChannelData, ChannelsProps } from "./channels.types.ts";
+import { renderWhatsAppCard } from "./channels.whatsapp.ts";
+
+export function renderChannels(props: ChannelsProps) {
+  const channels = props.snapshot?.channels as Record<string, unknown> | null;
+  const whatsapp = (channels?.whatsapp ?? undefined) as WhatsAppStatus | undefined;
+  const telegram = (channels?.telegram ?? undefined) as TelegramStatus | undefined;
+  const discord = (channels?.discord ?? null) as DiscordStatus | null;
+  const googlechat = (channels?.googlechat ?? null) as GoogleChatStatus | null;
+  const slack = (channels?.slack ?? null) as SlackStatus | null;
+  const signal = (channels?.signal ?? null) as SignalStatus | null;
+  const imessage = (channels?.imessage ?? null) as IMessageStatus | null;
+  const nostr = (channels?.nostr ?? null) as NostrStatus | null;
+  const channelOrder = resolveChannelOrder(props.snapshot);
+  const orderedChannels = channelOrder
+    .map((key, index) => ({
+      key,
+      enabled: channelEnabled(key, props),
+      order: index,
+    }))
+    .toSorted((a, b) => {
+      if (a.enabled !== b.enabled) {
+        return a.enabled ? -1 : 1;
+      }
+      return a.order - b.order;
+    });
+
+  return html`
+    <section class="grid grid-cols-2">
+      ${orderedChannels.map((channel) =>
+        renderChannel(channel.key, props, {
+          whatsapp,
+          telegram,
+          discord,
+          googlechat,
+          slack,
+          signal,
+          imessage,
+          nostr,
+          channelAccounts: props.snapshot?.channelAccounts ?? null,
+        }),
+      )}
+    </section>
+
+    <section class="card" style="margin-top: 18px;">
+      <div class="row" style="justify-content: space-between;">
+        <div>
+          <div class="card-title">Channel health</div>
+          <div class="card-sub">Channel status snapshots from the gateway.</div>
+        </div>
+        <div class="muted">${props.lastSuccessAt ? formatRelativeTimestamp(props.lastSuccessAt) : "n/a"}</div>
+      </div>
+      ${
+        props.lastError
+          ? html`<div class="callout danger" style="margin-top: 12px;">
+            ${props.lastError}
+          </div>`
+          : nothing
+      }
+      <pre class="code-block" style="margin-top: 12px;">
+${props.snapshot ? JSON.stringify(props.snapshot, null, 2) : "No snapshot yet."}
+      </pre>
+    </section>
+  `;
+}
+
+function resolveChannelOrder(snapshot: ChannelsStatusSnapshot | null): ChannelKey[] {
+  if (snapshot?.channelMeta?.length) {
+    return snapshot.channelMeta.map((entry) => entry.id);
+  }
+  if (snapshot?.channelOrder?.length) {
+    return snapshot.channelOrder;
+  }
+  return ["whatsapp", "telegram", "discord", "googlechat", "slack", "signal", "imessage", "nostr"];
+}
+
+function renderChannel(key: ChannelKey, props: ChannelsProps, data: ChannelsChannelData) {
+  const accountCountLabel = renderChannelAccountCount(key, data.channelAccounts);
+  switch (key) {
+    case "whatsapp":
+      return renderWhatsAppCard({
+        props,
+        whatsapp: data.whatsapp,
+        accountCountLabel,
+      });
+    case "telegram":
+      return renderTelegramCard({
+        props,
+        telegram: data.telegram,
+        telegramAccounts: data.channelAccounts?.telegram ?? [],
+        accountCountLabel,
+      });
+    case "discord":
+      return renderDiscordCard({
+        props,
+        discord: data.discord,
+        accountCountLabel,
+      });
+    case "googlechat":
+      return renderGoogleChatCard({
+        props,
+        googleChat: data.googlechat,
+        accountCountLabel,
+      });
+    case "slack":
+      return renderSlackCard({
+        props,
+        slack: data.slack,
+        accountCountLabel,
+      });
+    case "signal":
+      return renderSignalCard({
+        props,
+        signal: data.signal,
+        accountCountLabel,
+      });
+    case "imessage":
+      return renderIMessageCard({
+        props,
+        imessage: data.imessage,
+        accountCountLabel,
+      });
+    case "nostr": {
+      const nostrAccounts = data.channelAccounts?.nostr ?? [];
+      const primaryAccount = nostrAccounts[0];
+      const accountId = primaryAccount?.accountId ?? "default";
+      const profile =
+        (primaryAccount as { profile?: NostrProfile | null } | undefined)?.profile ?? null;
+      const showForm =
+        props.nostrProfileAccountId === accountId ? props.nostrProfileFormState : null;
+      const profileFormCallbacks = showForm
+        ? {
+            onFieldChange: props.onNostrProfileFieldChange,
+            onSave: props.onNostrProfileSave,
+            onImport: props.onNostrProfileImport,
+            onCancel: props.onNostrProfileCancel,
+            onToggleAdvanced: props.onNostrProfileToggleAdvanced,
+          }
+        : null;
+      return renderNostrCard({
+        props,
+        nostr: data.nostr,
+        nostrAccounts,
+        accountCountLabel,
+        profileFormState: showForm,
+        profileFormCallbacks,
+        onEditProfile: () => props.onNostrProfileEdit(accountId, profile),
+      });
+    }
+    default:
+      return renderGenericChannelCard(key, props, data.channelAccounts ?? {});
+  }
+}
+
+function renderGenericChannelCard(
+  key: ChannelKey,
+  props: ChannelsProps,
+  channelAccounts: Record<string, ChannelAccountSnapshot[]>,
+) {
+  const label = resolveChannelLabel(props.snapshot, key);
+  const status = props.snapshot?.channels?.[key] as Record<string, unknown> | undefined;
+  const configured = typeof status?.configured === "boolean" ? status.configured : undefined;
+  const running = typeof status?.running === "boolean" ? status.running : undefined;
+  const connected = typeof status?.connected === "boolean" ? status.connected : undefined;
+  const lastError = typeof status?.lastError === "string" ? status.lastError : undefined;
+  const accounts = channelAccounts[key] ?? [];
+  const accountCountLabel = renderChannelAccountCount(key, channelAccounts);
+
+  return html`
+    <div class="card">
+      <div class="card-title">${label}</div>
+      <div class="card-sub">Channel status and configuration.</div>
+      ${accountCountLabel}
+
+      ${
+        accounts.length > 0
+          ? html`
+            <div class="account-card-list">
+              ${accounts.map((account) => renderGenericAccount(account))}
+            </div>
+          `
+          : html`
+            <div class="status-list" style="margin-top: 16px;">
+              <div>
+                <span class="label">Configured</span>
+                <span>${configured == null ? "n/a" : configured ? "Yes" : "No"}</span>
+              </div>
+              <div>
+                <span class="label">Running</span>
+                <span>${running == null ? "n/a" : running ? "Yes" : "No"}</span>
+              </div>
+              <div>
+                <span class="label">Connected</span>
+                <span>${connected == null ? "n/a" : connected ? "Yes" : "No"}</span>
+              </div>
+            </div>
+          `
+      }
+
+      ${
+        lastError
+          ? html`<div class="callout danger" style="margin-top: 12px;">
+            ${lastError}
+          </div>`
+          : nothing
+      }
+
+      ${renderChannelConfigSection({ channelId: key, props })}
+    </div>
+  `;
+}
+
+function resolveChannelMetaMap(
+  snapshot: ChannelsStatusSnapshot | null,
+): Record<string, ChannelUiMetaEntry> {
+  if (!snapshot?.channelMeta?.length) {
+    return {};
+  }
+  return Object.fromEntries(snapshot.channelMeta.map((entry) => [entry.id, entry]));
+}
+
+function resolveChannelLabel(snapshot: ChannelsStatusSnapshot | null, key: string): string {
+  const meta = resolveChannelMetaMap(snapshot)[key];
+  return meta?.label ?? snapshot?.channelLabels?.[key] ?? key;
+}
+
+const RECENT_ACTIVITY_THRESHOLD_MS = 10 * 60 * 1000; // 10 minutes
+
+function hasRecentActivity(account: ChannelAccountSnapshot): boolean {
+  if (!account.lastInboundAt) {
+    return false;
+  }
+  return Date.now() - account.lastInboundAt < RECENT_ACTIVITY_THRESHOLD_MS;
+}
+
+function deriveRunningStatus(account: ChannelAccountSnapshot): "Yes" | "No" | "Active" {
+  if (account.running) {
+    return "Yes";
+  }
+  // If we have recent inbound activity, the channel is effectively running
+  if (hasRecentActivity(account)) {
+    return "Active";
+  }
+  return "No";
+}
+
+function deriveConnectedStatus(account: ChannelAccountSnapshot): "Yes" | "No" | "Active" | "n/a" {
+  if (account.connected === true) {
+    return "Yes";
+  }
+  if (account.connected === false) {
+    return "No";
+  }
+  // If connected is null/undefined but we have recent activity, show as active
+  if (hasRecentActivity(account)) {
+    return "Active";
+  }
+  return "n/a";
+}
+
+function renderGenericAccount(account: ChannelAccountSnapshot) {
+  const runningStatus = deriveRunningStatus(account);
+  const connectedStatus = deriveConnectedStatus(account);
+
+  return html`
+    <div class="account-card">
+      <div class="account-card-header">
+        <div class="account-card-title">${account.name || account.accountId}</div>
+        <div class="account-card-id">${account.accountId}</div>
+      </div>
+      <div class="status-list account-card-status">
+        <div>
+          <span class="label">Running</span>
+          <span>${runningStatus}</span>
+        </div>
+        <div>
+          <span class="label">Configured</span>
+          <span>${account.configured ? "Yes" : "No"}</span>
+        </div>
+        <div>
+          <span class="label">Connected</span>
+          <span>${connectedStatus}</span>
+        </div>
+        <div>
+          <span class="label">Last inbound</span>
+          <span>${account.lastInboundAt ? formatRelativeTimestamp(account.lastInboundAt) : "n/a"}</span>
+        </div>
+        ${
+          account.lastError
+            ? html`
+              <div class="account-card-error">
+                ${account.lastError}
+              </div>
+            `
+            : nothing
+        }
+      </div>
+    </div>
+  `;
+}

package/ui/src/ui/views/channels.types.ts

@@ -0,0 +1,62 @@
+import type {
+  ChannelAccountSnapshot,
+  ChannelsStatusSnapshot,
+  ConfigUiHints,
+  DiscordStatus,
+  GoogleChatStatus,
+  IMessageStatus,
+  NostrProfile,
+  NostrStatus,
+  SignalStatus,
+  SlackStatus,
+  TelegramStatus,
+  WhatsAppStatus,
+} from "../types.ts";
+import type { NostrProfileFormState } from "./channels.nostr-profile-form.ts";
+
+export type ChannelKey = string;
+
+export type ChannelsProps = {
+  connected: boolean;
+  loading: boolean;
+  snapshot: ChannelsStatusSnapshot | null;
+  lastError: string | null;
+  lastSuccessAt: number | null;
+  whatsappMessage: string | null;
+  whatsappQrDataUrl: string | null;
+  whatsappConnected: boolean | null;
+  whatsappBusy: boolean;
+  configSchema: unknown;
+  configSchemaLoading: boolean;
+  configForm: Record<string, unknown> | null;
+  configUiHints: ConfigUiHints;
+  configSaving: boolean;
+  configFormDirty: boolean;
+  nostrProfileFormState: NostrProfileFormState | null;
+  nostrProfileAccountId: string | null;
+  onRefresh: (probe: boolean) => void;
+  onWhatsAppStart: (force: boolean) => void;
+  onWhatsAppWait: () => void;
+  onWhatsAppLogout: () => void;
+  onConfigPatch: (path: Array<string | number>, value: unknown) => void;
+  onConfigSave: () => void;
+  onConfigReload: () => void;
+  onNostrProfileEdit: (accountId: string, profile: NostrProfile | null) => void;
+  onNostrProfileCancel: () => void;
+  onNostrProfileFieldChange: (field: keyof NostrProfile, value: string) => void;
+  onNostrProfileSave: () => void;
+  onNostrProfileImport: () => void;
+  onNostrProfileToggleAdvanced: () => void;
+};
+
+export type ChannelsChannelData = {
+  whatsapp?: WhatsAppStatus;
+  telegram?: TelegramStatus;
+  discord?: DiscordStatus | null;
+  googlechat?: GoogleChatStatus | null;
+  slack?: SlackStatus | null;
+  signal?: SignalStatus | null;
+  imessage?: IMessageStatus | null;
+  nostr?: NostrStatus | null;
+  channelAccounts?: Record<string, ChannelAccountSnapshot[]> | null;
+};

package/ui/src/ui/views/channels.whatsapp.ts

@@ -0,0 +1,118 @@
+import { html, nothing } from "lit";
+import { formatRelativeTimestamp, formatDurationHuman } from "../format.ts";
+import type { WhatsAppStatus } from "../types.ts";
+import { renderChannelConfigSection } from "./channels.config.ts";
+import type { ChannelsProps } from "./channels.types.ts";
+
+export function renderWhatsAppCard(params: {
+  props: ChannelsProps;
+  whatsapp?: WhatsAppStatus;
+  accountCountLabel: unknown;
+}) {
+  const { props, whatsapp, accountCountLabel } = params;
+
+  return html`
+    <div class="card">
+      <div class="card-title">WhatsApp</div>
+      <div class="card-sub">Link WhatsApp Web and monitor connection health.</div>
+      ${accountCountLabel}
+
+      <div class="status-list" style="margin-top: 16px;">
+        <div>
+          <span class="label">Configured</span>
+          <span>${whatsapp?.configured ? "Yes" : "No"}</span>
+        </div>
+        <div>
+          <span class="label">Linked</span>
+          <span>${whatsapp?.linked ? "Yes" : "No"}</span>
+        </div>
+        <div>
+          <span class="label">Running</span>
+          <span>${whatsapp?.running ? "Yes" : "No"}</span>
+        </div>
+        <div>
+          <span class="label">Connected</span>
+          <span>${whatsapp?.connected ? "Yes" : "No"}</span>
+        </div>
+        <div>
+          <span class="label">Last connect</span>
+          <span>
+            ${whatsapp?.lastConnectedAt ? formatRelativeTimestamp(whatsapp.lastConnectedAt) : "n/a"}
+          </span>
+        </div>
+        <div>
+          <span class="label">Last message</span>
+          <span>
+            ${whatsapp?.lastMessageAt ? formatRelativeTimestamp(whatsapp.lastMessageAt) : "n/a"}
+          </span>
+        </div>
+        <div>
+          <span class="label">Auth age</span>
+          <span>
+            ${whatsapp?.authAgeMs != null ? formatDurationHuman(whatsapp.authAgeMs) : "n/a"}
+          </span>
+        </div>
+      </div>
+
+      ${
+        whatsapp?.lastError
+          ? html`<div class="callout danger" style="margin-top: 12px;">
+            ${whatsapp.lastError}
+          </div>`
+          : nothing
+      }
+
+      ${
+        props.whatsappMessage
+          ? html`<div class="callout" style="margin-top: 12px;">
+            ${props.whatsappMessage}
+          </div>`
+          : nothing
+      }
+
+      ${
+        props.whatsappQrDataUrl
+          ? html`<div class="qr-wrap">
+            <img src=${props.whatsappQrDataUrl} alt="WhatsApp QR" />
+          </div>`
+          : nothing
+      }
+
+      <div class="row" style="margin-top: 14px; flex-wrap: wrap;">
+        <button
+          class="btn primary"
+          ?disabled=${props.whatsappBusy}
+          @click=${() => props.onWhatsAppStart(false)}
+        >
+          ${props.whatsappBusy ? "Working…" : "Show QR"}
+        </button>
+        <button
+          class="btn"
+          ?disabled=${props.whatsappBusy}
+          @click=${() => props.onWhatsAppStart(true)}
+        >
+          Relink
+        </button>
+        <button
+          class="btn"
+          ?disabled=${props.whatsappBusy}
+          @click=${() => props.onWhatsAppWait()}
+        >
+          Wait for scan
+        </button>
+        <button
+          class="btn danger"
+          ?disabled=${props.whatsappBusy}
+          @click=${() => props.onWhatsAppLogout()}
+        >
+          Logout
+        </button>
+        <button class="btn" @click=${() => props.onRefresh(true)}>
+          Refresh
+        </button>
+      </div>
+
+      ${renderChannelConfigSection({ channelId: "whatsapp", props })}
+    </div>
+  `;
+}

package/ui/src/ui/views/chat-image-open.browser.test.ts

@@ -0,0 +1,70 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { mountApp, registerAppMountHooks } from "../test-helpers/app-mount.ts";
+
+registerAppMountHooks();
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+function renderAssistantImage(url: string) {
+  return {
+    role: "assistant",
+    content: [{ type: "image_url", image_url: { url } }],
+    timestamp: Date.now(),
+  };
+}
+
+describe("chat image open safety", () => {
+  it("opens safe image URLs in a hardened new tab", async () => {
+    const app = mountApp("/chat");
+    await app.updateComplete;
+
+    const openSpy = vi.spyOn(window, "open").mockReturnValue(null);
+    app.chatMessages = [renderAssistantImage("https://example.com/cat.png")];
+    await app.updateComplete;
+
+    const image = app.querySelector<HTMLImageElement>(".chat-message-image");
+    expect(image).not.toBeNull();
+    image?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+    expect(openSpy).toHaveBeenCalledTimes(1);
+    expect(openSpy).toHaveBeenCalledWith(
+      "https://example.com/cat.png",
+      "_blank",
+      "noopener,noreferrer",
+    );
+  });
+
+  it("does not open unsafe image URLs", async () => {
+    const app = mountApp("/chat");
+    await app.updateComplete;
+
+    const openSpy = vi.spyOn(window, "open").mockReturnValue(null);
+    app.chatMessages = [renderAssistantImage("javascript:alert(1)")];
+    await app.updateComplete;
+
+    const image = app.querySelector<HTMLImageElement>(".chat-message-image");
+    expect(image).not.toBeNull();
+    image?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+    expect(openSpy).not.toHaveBeenCalled();
+  });
+
+  it("does not open SVG data image URLs", async () => {
+    const app = mountApp("/chat");
+    await app.updateComplete;
+
+    const openSpy = vi.spyOn(window, "open").mockReturnValue(null);
+    app.chatMessages = [
+      renderAssistantImage("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' />"),
+    ];
+    await app.updateComplete;
+
+    const image = app.querySelector<HTMLImageElement>(".chat-message-image");
+    expect(image).not.toBeNull();
+    image?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+    expect(openSpy).not.toHaveBeenCalled();
+  });
+});