openclaw-multi-auto 1.3.7 → 1.3.9

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

@@ -0,0 +1,237 @@
+import { html, nothing } from "lit";
+import { formatRelativeTimestamp } from "../format.ts";
+import type { ChannelAccountSnapshot, NostrStatus } from "../types.ts";
+import { renderChannelConfigSection } from "./channels.config.ts";
+import {
+  renderNostrProfileForm,
+  type NostrProfileFormState,
+  type NostrProfileFormCallbacks,
+} from "./channels.nostr-profile-form.ts";
+import type { ChannelsProps } from "./channels.types.ts";
+
+/**
+ * Truncate a pubkey for display (shows first and last 8 chars)
+ */
+function truncatePubkey(pubkey: string | null | undefined): string {
+  if (!pubkey) {
+    return "n/a";
+  }
+  if (pubkey.length <= 20) {
+    return pubkey;
+  }
+  return `${pubkey.slice(0, 8)}...${pubkey.slice(-8)}`;
+}
+
+export function renderNostrCard(params: {
+  props: ChannelsProps;
+  nostr?: NostrStatus | null;
+  nostrAccounts: ChannelAccountSnapshot[];
+  accountCountLabel: unknown;
+  /** Profile form state (optional - if provided, shows form) */
+  profileFormState?: NostrProfileFormState | null;
+  /** Profile form callbacks */
+  profileFormCallbacks?: NostrProfileFormCallbacks | null;
+  /** Called when Edit Profile is clicked */
+  onEditProfile?: () => void;
+}) {
+  const {
+    props,
+    nostr,
+    nostrAccounts,
+    accountCountLabel,
+    profileFormState,
+    profileFormCallbacks,
+    onEditProfile,
+  } = params;
+  const primaryAccount = nostrAccounts[0];
+  const summaryConfigured = nostr?.configured ?? primaryAccount?.configured ?? false;
+  const summaryRunning = nostr?.running ?? primaryAccount?.running ?? false;
+  const summaryPublicKey =
+    nostr?.publicKey ?? (primaryAccount as { publicKey?: string } | undefined)?.publicKey;
+  const summaryLastStartAt = nostr?.lastStartAt ?? primaryAccount?.lastStartAt ?? null;
+  const summaryLastError = nostr?.lastError ?? primaryAccount?.lastError ?? null;
+  const hasMultipleAccounts = nostrAccounts.length > 1;
+  const showingForm = profileFormState !== null && profileFormState !== undefined;
+
+  const renderAccountCard = (account: ChannelAccountSnapshot) => {
+    const publicKey = (account as { publicKey?: string }).publicKey;
+    const profile = (account as { profile?: { name?: string; displayName?: string } }).profile;
+    const displayName = profile?.displayName ?? profile?.name ?? account.name ?? account.accountId;
+
+    return html`
+      <div class="account-card">
+        <div class="account-card-header">
+          <div class="account-card-title">${displayName}</div>
+          <div class="account-card-id">${account.accountId}</div>
+        </div>
+        <div class="status-list account-card-status">
+          <div>
+            <span class="label">Running</span>
+            <span>${account.running ? "Yes" : "No"}</span>
+          </div>
+          <div>
+            <span class="label">Configured</span>
+            <span>${account.configured ? "Yes" : "No"}</span>
+          </div>
+          <div>
+            <span class="label">Public Key</span>
+            <span class="monospace" title="${publicKey ?? ""}">${truncatePubkey(publicKey)}</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>
+    `;
+  };
+
+  const renderProfileSection = () => {
+    // If showing form, render the form instead of the read-only view
+    if (showingForm && profileFormCallbacks) {
+      return renderNostrProfileForm({
+        state: profileFormState,
+        callbacks: profileFormCallbacks,
+        accountId: nostrAccounts[0]?.accountId ?? "default",
+      });
+    }
+
+    const profile =
+      (
+        primaryAccount as
+          | {
+              profile?: {
+                name?: string;
+                displayName?: string;
+                about?: string;
+                picture?: string;
+                nip05?: string;
+              };
+            }
+          | undefined
+      )?.profile ?? nostr?.profile;
+    const { name, displayName, about, picture, nip05 } = profile ?? {};
+    const hasAnyProfileData = name || displayName || about || picture || nip05;
+
+    return html`
+      <div style="margin-top: 16px; padding: 12px; background: var(--bg-secondary); border-radius: 8px;">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+          <div style="font-weight: 500;">Profile</div>
+          ${
+            summaryConfigured
+              ? html`
+                <button
+                  class="btn btn-sm"
+                  @click=${onEditProfile}
+                  style="font-size: 12px; padding: 4px 8px;"
+                >
+                  Edit Profile
+                </button>
+              `
+              : nothing
+          }
+        </div>
+        ${
+          hasAnyProfileData
+            ? html`
+              <div class="status-list">
+                ${
+                  picture
+                    ? html`
+                      <div style="margin-bottom: 8px;">
+                        <img
+                          src=${picture}
+                          alt="Profile picture"
+                          style="width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-color);"
+                          @error=${(e: Event) => {
+                            (e.target as HTMLImageElement).style.display = "none";
+                          }}
+                        />
+                      </div>
+                    `
+                    : nothing
+                }
+                ${name ? html`<div><span class="label">Name</span><span>${name}</span></div>` : nothing}
+                ${
+                  displayName
+                    ? html`<div><span class="label">Display Name</span><span>${displayName}</span></div>`
+                    : nothing
+                }
+                ${
+                  about
+                    ? html`<div><span class="label">About</span><span style="max-width: 300px; overflow: hidden; text-overflow: ellipsis;">${about}</span></div>`
+                    : nothing
+                }
+                ${nip05 ? html`<div><span class="label">NIP-05</span><span>${nip05}</span></div>` : nothing}
+              </div>
+            `
+            : html`
+                <div style="color: var(--text-muted); font-size: 13px">
+                  No profile set. Click "Edit Profile" to add your name, bio, and avatar.
+                </div>
+              `
+        }
+      </div>
+    `;
+  };
+
+  return html`
+    <div class="card">
+      <div class="card-title">Nostr</div>
+      <div class="card-sub">Decentralized DMs via Nostr relays (NIP-04).</div>
+      ${accountCountLabel}
+
+      ${
+        hasMultipleAccounts
+          ? html`
+            <div class="account-card-list">
+              ${nostrAccounts.map((account) => renderAccountCard(account))}
+            </div>
+          `
+          : html`
+            <div class="status-list" style="margin-top: 16px;">
+              <div>
+                <span class="label">Configured</span>
+                <span>${summaryConfigured ? "Yes" : "No"}</span>
+              </div>
+              <div>
+                <span class="label">Running</span>
+                <span>${summaryRunning ? "Yes" : "No"}</span>
+              </div>
+              <div>
+                <span class="label">Public Key</span>
+                <span class="monospace" title="${summaryPublicKey ?? ""}"
+                  >${truncatePubkey(summaryPublicKey)}</span
+                >
+              </div>
+              <div>
+                <span class="label">Last start</span>
+                <span>${summaryLastStartAt ? formatRelativeTimestamp(summaryLastStartAt) : "n/a"}</span>
+              </div>
+            </div>
+          `
+      }
+
+      ${
+        summaryLastError
+          ? html`<div class="callout danger" style="margin-top: 12px;">${summaryLastError}</div>`
+          : nothing
+      }
+
+      ${renderProfileSection()}
+
+      ${renderChannelConfigSection({ channelId: "nostr", props })}
+
+      <div class="row" style="margin-top: 12px;">
+        <button class="btn" @click=${() => props.onRefresh(false)}>Refresh</button>
+      </div>
+    </div>
+  `;
+}

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

@@ -0,0 +1,38 @@
+import { html, nothing } from "lit";
+import type { ChannelAccountSnapshot } from "../types.ts";
+import type { ChannelKey, ChannelsProps } from "./channels.types.ts";
+
+export function channelEnabled(key: ChannelKey, props: ChannelsProps) {
+  const snapshot = props.snapshot;
+  const channels = snapshot?.channels as Record<string, unknown> | null;
+  if (!snapshot || !channels) {
+    return false;
+  }
+  const channelStatus = channels[key] as Record<string, unknown> | undefined;
+  const configured = typeof channelStatus?.configured === "boolean" && channelStatus.configured;
+  const running = typeof channelStatus?.running === "boolean" && channelStatus.running;
+  const connected = typeof channelStatus?.connected === "boolean" && channelStatus.connected;
+  const accounts = snapshot.channelAccounts?.[key] ?? [];
+  const accountActive = accounts.some(
+    (account) => account.configured || account.running || account.connected,
+  );
+  return configured || running || connected || accountActive;
+}
+
+export function getChannelAccountCount(
+  key: ChannelKey,
+  channelAccounts?: Record<string, ChannelAccountSnapshot[]> | null,
+): number {
+  return channelAccounts?.[key]?.length ?? 0;
+}
+
+export function renderChannelAccountCount(
+  key: ChannelKey,
+  channelAccounts?: Record<string, ChannelAccountSnapshot[]> | null,
+) {
+  const count = getChannelAccountCount(key, channelAccounts);
+  if (count < 2) {
+    return nothing;
+  }
+  return html`<div class="account-count">Accounts (${count})</div>`;
+}

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

@@ -0,0 +1,69 @@
+import { html, nothing } from "lit";
+import { formatRelativeTimestamp } from "../format.ts";
+import type { SignalStatus } from "../types.ts";
+import { renderChannelConfigSection } from "./channels.config.ts";
+import type { ChannelsProps } from "./channels.types.ts";
+
+export function renderSignalCard(params: {
+  props: ChannelsProps;
+  signal?: SignalStatus | null;
+  accountCountLabel: unknown;
+}) {
+  const { props, signal, accountCountLabel } = params;
+
+  return html`
+    <div class="card">
+      <div class="card-title">Signal</div>
+      <div class="card-sub">signal-cli status and channel configuration.</div>
+      ${accountCountLabel}
+
+      <div class="status-list" style="margin-top: 16px;">
+        <div>
+          <span class="label">Configured</span>
+          <span>${signal?.configured ? "Yes" : "No"}</span>
+        </div>
+        <div>
+          <span class="label">Running</span>
+          <span>${signal?.running ? "Yes" : "No"}</span>
+        </div>
+        <div>
+          <span class="label">Base URL</span>
+          <span>${signal?.baseUrl ?? "n/a"}</span>
+        </div>
+        <div>
+          <span class="label">Last start</span>
+          <span>${signal?.lastStartAt ? formatRelativeTimestamp(signal.lastStartAt) : "n/a"}</span>
+        </div>
+        <div>
+          <span class="label">Last probe</span>
+          <span>${signal?.lastProbeAt ? formatRelativeTimestamp(signal.lastProbeAt) : "n/a"}</span>
+        </div>
+      </div>
+
+      ${
+        signal?.lastError
+          ? html`<div class="callout danger" style="margin-top: 12px;">
+            ${signal.lastError}
+          </div>`
+          : nothing
+      }
+
+      ${
+        signal?.probe
+          ? html`<div class="callout" style="margin-top: 12px;">
+            Probe ${signal.probe.ok ? "ok" : "failed"} ·
+            ${signal.probe.status ?? ""} ${signal.probe.error ?? ""}
+          </div>`
+          : nothing
+      }
+
+      ${renderChannelConfigSection({ channelId: "signal", props })}
+
+      <div class="row" style="margin-top: 12px;">
+        <button class="btn" @click=${() => props.onRefresh(true)}>
+          Probe
+        </button>
+      </div>
+    </div>
+  `;
+}

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

@@ -0,0 +1,65 @@
+import { html, nothing } from "lit";
+import { formatRelativeTimestamp } from "../format.ts";
+import type { SlackStatus } from "../types.ts";
+import { renderChannelConfigSection } from "./channels.config.ts";
+import type { ChannelsProps } from "./channels.types.ts";
+
+export function renderSlackCard(params: {
+  props: ChannelsProps;
+  slack?: SlackStatus | null;
+  accountCountLabel: unknown;
+}) {
+  const { props, slack, accountCountLabel } = params;
+
+  return html`
+    <div class="card">
+      <div class="card-title">Slack</div>
+      <div class="card-sub">Socket mode status and channel configuration.</div>
+      ${accountCountLabel}
+
+      <div class="status-list" style="margin-top: 16px;">
+        <div>
+          <span class="label">Configured</span>
+          <span>${slack?.configured ? "Yes" : "No"}</span>
+        </div>
+        <div>
+          <span class="label">Running</span>
+          <span>${slack?.running ? "Yes" : "No"}</span>
+        </div>
+        <div>
+          <span class="label">Last start</span>
+          <span>${slack?.lastStartAt ? formatRelativeTimestamp(slack.lastStartAt) : "n/a"}</span>
+        </div>
+        <div>
+          <span class="label">Last probe</span>
+          <span>${slack?.lastProbeAt ? formatRelativeTimestamp(slack.lastProbeAt) : "n/a"}</span>
+        </div>
+      </div>
+
+      ${
+        slack?.lastError
+          ? html`<div class="callout danger" style="margin-top: 12px;">
+            ${slack.lastError}
+          </div>`
+          : nothing
+      }
+
+      ${
+        slack?.probe
+          ? html`<div class="callout" style="margin-top: 12px;">
+            Probe ${slack.probe.ok ? "ok" : "failed"} ·
+            ${slack.probe.status ?? ""} ${slack.probe.error ?? ""}
+          </div>`
+          : nothing
+      }
+
+      ${renderChannelConfigSection({ channelId: "slack", props })}
+
+      <div class="row" style="margin-top: 12px;">
+        <button class="btn" @click=${() => props.onRefresh(true)}>
+          Probe
+        </button>
+      </div>
+    </div>
+  `;
+}

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

@@ -0,0 +1,120 @@
+import { html, nothing } from "lit";
+import { formatRelativeTimestamp } from "../format.ts";
+import type { ChannelAccountSnapshot, TelegramStatus } from "../types.ts";
+import { renderChannelConfigSection } from "./channels.config.ts";
+import type { ChannelsProps } from "./channels.types.ts";
+
+export function renderTelegramCard(params: {
+  props: ChannelsProps;
+  telegram?: TelegramStatus;
+  telegramAccounts: ChannelAccountSnapshot[];
+  accountCountLabel: unknown;
+}) {
+  const { props, telegram, telegramAccounts, accountCountLabel } = params;
+  const hasMultipleAccounts = telegramAccounts.length > 1;
+
+  const renderAccountCard = (account: ChannelAccountSnapshot) => {
+    const probe = account.probe as { bot?: { username?: string } } | undefined;
+    const botUsername = probe?.bot?.username;
+    const label = account.name || account.accountId;
+    return html`
+      <div class="account-card">
+        <div class="account-card-header">
+          <div class="account-card-title">
+            ${botUsername ? `@${botUsername}` : label}
+          </div>
+          <div class="account-card-id">${account.accountId}</div>
+        </div>
+        <div class="status-list account-card-status">
+          <div>
+            <span class="label">Running</span>
+            <span>${account.running ? "Yes" : "No"}</span>
+          </div>
+          <div>
+            <span class="label">Configured</span>
+            <span>${account.configured ? "Yes" : "No"}</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>
+    `;
+  };
+
+  return html`
+    <div class="card">
+      <div class="card-title">Telegram</div>
+      <div class="card-sub">Bot status and channel configuration.</div>
+      ${accountCountLabel}
+
+      ${
+        hasMultipleAccounts
+          ? html`
+            <div class="account-card-list">
+              ${telegramAccounts.map((account) => renderAccountCard(account))}
+            </div>
+          `
+          : html`
+            <div class="status-list" style="margin-top: 16px;">
+              <div>
+                <span class="label">Configured</span>
+                <span>${telegram?.configured ? "Yes" : "No"}</span>
+              </div>
+              <div>
+                <span class="label">Running</span>
+                <span>${telegram?.running ? "Yes" : "No"}</span>
+              </div>
+              <div>
+                <span class="label">Mode</span>
+                <span>${telegram?.mode ?? "n/a"}</span>
+              </div>
+              <div>
+                <span class="label">Last start</span>
+                <span>${telegram?.lastStartAt ? formatRelativeTimestamp(telegram.lastStartAt) : "n/a"}</span>
+              </div>
+              <div>
+                <span class="label">Last probe</span>
+                <span>${telegram?.lastProbeAt ? formatRelativeTimestamp(telegram.lastProbeAt) : "n/a"}</span>
+              </div>
+            </div>
+          `
+      }
+
+      ${
+        telegram?.lastError
+          ? html`<div class="callout danger" style="margin-top: 12px;">
+            ${telegram.lastError}
+          </div>`
+          : nothing
+      }
+
+      ${
+        telegram?.probe
+          ? html`<div class="callout" style="margin-top: 12px;">
+            Probe ${telegram.probe.ok ? "ok" : "failed"} ·
+            ${telegram.probe.status ?? ""} ${telegram.probe.error ?? ""}
+          </div>`
+          : nothing
+      }
+
+      ${renderChannelConfigSection({ channelId: "telegram", props })}
+
+      <div class="row" style="margin-top: 12px;">
+        <button class="btn" @click=${() => props.onRefresh(true)}>
+          Probe
+        </button>
+      </div>
+    </div>
+  `;
+}