openclaw-multi-auto 1.3.6 → 1.3.8

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

@@ -0,0 +1,65 @@
+import { html, nothing } from "lit";
+import { formatRelativeTimestamp } from "../format.ts";
+import type { DiscordStatus } from "../types.ts";
+import { renderChannelConfigSection } from "./channels.config.ts";
+import type { ChannelsProps } from "./channels.types.ts";
+
+export function renderDiscordCard(params: {
+  props: ChannelsProps;
+  discord?: DiscordStatus | null;
+  accountCountLabel: unknown;
+}) {
+  const { props, discord, accountCountLabel } = params;
+
+  return html`
+    <div class="card">
+      <div class="card-title">Discord</div>
+      <div class="card-sub">Bot status and channel configuration.</div>
+      ${accountCountLabel}
+
+      <div class="status-list" style="margin-top: 16px;">
+        <div>
+          <span class="label">Configured</span>
+          <span>${discord?.configured ? "Yes" : "No"}</span>
+        </div>
+        <div>
+          <span class="label">Running</span>
+          <span>${discord?.running ? "Yes" : "No"}</span>
+        </div>
+        <div>
+          <span class="label">Last start</span>
+          <span>${discord?.lastStartAt ? formatRelativeTimestamp(discord.lastStartAt) : "n/a"}</span>
+        </div>
+        <div>
+          <span class="label">Last probe</span>
+          <span>${discord?.lastProbeAt ? formatRelativeTimestamp(discord.lastProbeAt) : "n/a"}</span>
+        </div>
+      </div>
+
+      ${
+        discord?.lastError
+          ? html`<div class="callout danger" style="margin-top: 12px;">
+            ${discord.lastError}
+          </div>`
+          : nothing
+      }
+
+      ${
+        discord?.probe
+          ? html`<div class="callout" style="margin-top: 12px;">
+            Probe ${discord.probe.ok ? "ok" : "failed"} ·
+            ${discord.probe.status ?? ""} ${discord.probe.error ?? ""}
+          </div>`
+          : nothing
+      }
+
+      ${renderChannelConfigSection({ channelId: "discord", 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.googlechat.ts

@@ -0,0 +1,79 @@
+import { html, nothing } from "lit";
+import { formatRelativeTimestamp } from "../format.ts";
+import type { GoogleChatStatus } from "../types.ts";
+import { renderChannelConfigSection } from "./channels.config.ts";
+import type { ChannelsProps } from "./channels.types.ts";
+
+export function renderGoogleChatCard(params: {
+  props: ChannelsProps;
+  googleChat?: GoogleChatStatus | null;
+  accountCountLabel: unknown;
+}) {
+  const { props, googleChat, accountCountLabel } = params;
+
+  return html`
+    <div class="card">
+      <div class="card-title">Google Chat</div>
+      <div class="card-sub">Chat API webhook status and channel configuration.</div>
+      ${accountCountLabel}
+
+      <div class="status-list" style="margin-top: 16px;">
+        <div>
+          <span class="label">Configured</span>
+          <span>${googleChat ? (googleChat.configured ? "Yes" : "No") : "n/a"}</span>
+        </div>
+        <div>
+          <span class="label">Running</span>
+          <span>${googleChat ? (googleChat.running ? "Yes" : "No") : "n/a"}</span>
+        </div>
+        <div>
+          <span class="label">Credential</span>
+          <span>${googleChat?.credentialSource ?? "n/a"}</span>
+        </div>
+        <div>
+          <span class="label">Audience</span>
+          <span>
+            ${
+              googleChat?.audienceType
+                ? `${googleChat.audienceType}${googleChat.audience ? ` · ${googleChat.audience}` : ""}`
+                : "n/a"
+            }
+          </span>
+        </div>
+        <div>
+          <span class="label">Last start</span>
+          <span>${googleChat?.lastStartAt ? formatRelativeTimestamp(googleChat.lastStartAt) : "n/a"}</span>
+        </div>
+        <div>
+          <span class="label">Last probe</span>
+          <span>${googleChat?.lastProbeAt ? formatRelativeTimestamp(googleChat.lastProbeAt) : "n/a"}</span>
+        </div>
+      </div>
+
+      ${
+        googleChat?.lastError
+          ? html`<div class="callout danger" style="margin-top: 12px;">
+            ${googleChat.lastError}
+          </div>`
+          : nothing
+      }
+
+      ${
+        googleChat?.probe
+          ? html`<div class="callout" style="margin-top: 12px;">
+            Probe ${googleChat.probe.ok ? "ok" : "failed"} ·
+            ${googleChat.probe.status ?? ""} ${googleChat.probe.error ?? ""}
+          </div>`
+          : nothing
+      }
+
+      ${renderChannelConfigSection({ channelId: "googlechat", 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.imessage.ts

@@ -0,0 +1,65 @@
+import { html, nothing } from "lit";
+import { formatRelativeTimestamp } from "../format.ts";
+import type { IMessageStatus } from "../types.ts";
+import { renderChannelConfigSection } from "./channels.config.ts";
+import type { ChannelsProps } from "./channels.types.ts";
+
+export function renderIMessageCard(params: {
+  props: ChannelsProps;
+  imessage?: IMessageStatus | null;
+  accountCountLabel: unknown;
+}) {
+  const { props, imessage, accountCountLabel } = params;
+
+  return html`
+    <div class="card">
+      <div class="card-title">iMessage</div>
+      <div class="card-sub">macOS bridge status and channel configuration.</div>
+      ${accountCountLabel}
+
+      <div class="status-list" style="margin-top: 16px;">
+        <div>
+          <span class="label">Configured</span>
+          <span>${imessage?.configured ? "Yes" : "No"}</span>
+        </div>
+        <div>
+          <span class="label">Running</span>
+          <span>${imessage?.running ? "Yes" : "No"}</span>
+        </div>
+        <div>
+          <span class="label">Last start</span>
+          <span>${imessage?.lastStartAt ? formatRelativeTimestamp(imessage.lastStartAt) : "n/a"}</span>
+        </div>
+        <div>
+          <span class="label">Last probe</span>
+          <span>${imessage?.lastProbeAt ? formatRelativeTimestamp(imessage.lastProbeAt) : "n/a"}</span>
+        </div>
+      </div>
+
+      ${
+        imessage?.lastError
+          ? html`<div class="callout danger" style="margin-top: 12px;">
+            ${imessage.lastError}
+          </div>`
+          : nothing
+      }
+
+      ${
+        imessage?.probe
+          ? html`<div class="callout" style="margin-top: 12px;">
+            Probe ${imessage.probe.ok ? "ok" : "failed"} ·
+            ${imessage.probe.error ?? ""}
+          </div>`
+          : nothing
+      }
+
+      ${renderChannelConfigSection({ channelId: "imessage", 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.nostr-profile-form.ts

@@ -0,0 +1,321 @@
+/**
+ * Nostr Profile Edit Form
+ *
+ * Provides UI for editing and publishing Nostr profile (kind:0).
+ */
+
+import { html, nothing, type TemplateResult } from "lit";
+import type { NostrProfile as NostrProfileType } from "../types.ts";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface NostrProfileFormState {
+  /** Current form values */
+  values: NostrProfileType;
+  /** Original values for dirty detection */
+  original: NostrProfileType;
+  /** Whether the form is currently submitting */
+  saving: boolean;
+  /** Whether import is in progress */
+  importing: boolean;
+  /** Last error message */
+  error: string | null;
+  /** Last success message */
+  success: string | null;
+  /** Validation errors per field */
+  fieldErrors: Record<string, string>;
+  /** Whether to show advanced fields */
+  showAdvanced: boolean;
+}
+
+export interface NostrProfileFormCallbacks {
+  /** Called when a field value changes */
+  onFieldChange: (field: keyof NostrProfileType, value: string) => void;
+  /** Called when save is clicked */
+  onSave: () => void;
+  /** Called when import is clicked */
+  onImport: () => void;
+  /** Called when cancel is clicked */
+  onCancel: () => void;
+  /** Called when toggle advanced is clicked */
+  onToggleAdvanced: () => void;
+}
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function isFormDirty(state: NostrProfileFormState): boolean {
+  const { values, original } = state;
+  return (
+    values.name !== original.name ||
+    values.displayName !== original.displayName ||
+    values.about !== original.about ||
+    values.picture !== original.picture ||
+    values.banner !== original.banner ||
+    values.website !== original.website ||
+    values.nip05 !== original.nip05 ||
+    values.lud16 !== original.lud16
+  );
+}
+
+// ============================================================================
+// Form Rendering
+// ============================================================================
+
+export function renderNostrProfileForm(params: {
+  state: NostrProfileFormState;
+  callbacks: NostrProfileFormCallbacks;
+  accountId: string;
+}): TemplateResult {
+  const { state, callbacks, accountId } = params;
+  const isDirty = isFormDirty(state);
+
+  const renderField = (
+    field: keyof NostrProfileType,
+    label: string,
+    opts: {
+      type?: "text" | "url" | "textarea";
+      placeholder?: string;
+      maxLength?: number;
+      help?: string;
+    } = {},
+  ) => {
+    const { type = "text", placeholder, maxLength, help } = opts;
+    const value = state.values[field] ?? "";
+    const error = state.fieldErrors[field];
+
+    const inputId = `nostr-profile-${field}`;
+
+    if (type === "textarea") {
+      return html`
+        <div class="form-field" style="margin-bottom: 12px;">
+          <label for="${inputId}" style="display: block; margin-bottom: 4px; font-weight: 500;">
+            ${label}
+          </label>
+          <textarea
+            id="${inputId}"
+            .value=${value}
+            placeholder=${placeholder ?? ""}
+            maxlength=${maxLength ?? 2000}
+            rows="3"
+            style="width: 100%; padding: 8px; border: 1px solid var(--border-color); border-radius: 4px; resize: vertical; font-family: inherit;"
+            @input=${(e: InputEvent) => {
+              const target = e.target as HTMLTextAreaElement;
+              callbacks.onFieldChange(field, target.value);
+            }}
+            ?disabled=${state.saving}
+          ></textarea>
+          ${help ? html`<div style="font-size: 12px; color: var(--text-muted); margin-top: 2px;">${help}</div>` : nothing}
+          ${error ? html`<div style="font-size: 12px; color: var(--danger-color); margin-top: 2px;">${error}</div>` : nothing}
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="form-field" style="margin-bottom: 12px;">
+        <label for="${inputId}" style="display: block; margin-bottom: 4px; font-weight: 500;">
+          ${label}
+        </label>
+        <input
+          id="${inputId}"
+          type=${type}
+          .value=${value}
+          placeholder=${placeholder ?? ""}
+          maxlength=${maxLength ?? 256}
+          style="width: 100%; padding: 8px; border: 1px solid var(--border-color); border-radius: 4px;"
+          @input=${(e: InputEvent) => {
+            const target = e.target as HTMLInputElement;
+            callbacks.onFieldChange(field, target.value);
+          }}
+          ?disabled=${state.saving}
+        />
+        ${help ? html`<div style="font-size: 12px; color: var(--text-muted); margin-top: 2px;">${help}</div>` : nothing}
+        ${error ? html`<div style="font-size: 12px; color: var(--danger-color); margin-top: 2px;">${error}</div>` : nothing}
+      </div>
+    `;
+  };
+
+  const renderPicturePreview = () => {
+    const picture = state.values.picture;
+    if (!picture) {
+      return nothing;
+    }
+
+    return html`
+      <div style="margin-bottom: 12px;">
+        <img
+          src=${picture}
+          alt="Profile picture preview"
+          style="max-width: 80px; max-height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-color);"
+          @error=${(e: Event) => {
+            const img = e.target as HTMLImageElement;
+            img.style.display = "none";
+          }}
+          @load=${(e: Event) => {
+            const img = e.target as HTMLImageElement;
+            img.style.display = "block";
+          }}
+        />
+      </div>
+    `;
+  };
+
+  return html`
+    <div class="nostr-profile-form" style="padding: 16px; background: var(--bg-secondary); border-radius: 8px; margin-top: 12px;">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
+        <div style="font-weight: 600; font-size: 16px;">Edit Profile</div>
+        <div style="font-size: 12px; color: var(--text-muted);">Account: ${accountId}</div>
+      </div>
+
+      ${
+        state.error
+          ? html`<div class="callout danger" style="margin-bottom: 12px;">${state.error}</div>`
+          : nothing
+      }
+
+      ${
+        state.success
+          ? html`<div class="callout success" style="margin-bottom: 12px;">${state.success}</div>`
+          : nothing
+      }
+
+      ${renderPicturePreview()}
+
+      ${renderField("name", "Username", {
+        placeholder: "satoshi",
+        maxLength: 256,
+        help: "Short username (e.g., satoshi)",
+      })}
+
+      ${renderField("displayName", "Display Name", {
+        placeholder: "Satoshi Nakamoto",
+        maxLength: 256,
+        help: "Your full display name",
+      })}
+
+      ${renderField("about", "Bio", {
+        type: "textarea",
+        placeholder: "Tell people about yourself...",
+        maxLength: 2000,
+        help: "A brief bio or description",
+      })}
+
+      ${renderField("picture", "Avatar URL", {
+        type: "url",
+        placeholder: "https://example.com/avatar.jpg",
+        help: "HTTPS URL to your profile picture",
+      })}
+
+      ${
+        state.showAdvanced
+          ? html`
+            <div style="border-top: 1px solid var(--border-color); padding-top: 12px; margin-top: 12px;">
+              <div style="font-weight: 500; margin-bottom: 12px; color: var(--text-muted);">Advanced</div>
+
+              ${renderField("banner", "Banner URL", {
+                type: "url",
+                placeholder: "https://example.com/banner.jpg",
+                help: "HTTPS URL to a banner image",
+              })}
+
+              ${renderField("website", "Website", {
+                type: "url",
+                placeholder: "https://example.com",
+                help: "Your personal website",
+              })}
+
+              ${renderField("nip05", "NIP-05 Identifier", {
+                placeholder: "you@example.com",
+                help: "Verifiable identifier (e.g., you@domain.com)",
+              })}
+
+              ${renderField("lud16", "Lightning Address", {
+                placeholder: "you@getalby.com",
+                help: "Lightning address for tips (LUD-16)",
+              })}
+            </div>
+          `
+          : nothing
+      }
+
+      <div style="display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap;">
+        <button
+          class="btn primary"
+          @click=${callbacks.onSave}
+          ?disabled=${state.saving || !isDirty}
+        >
+          ${state.saving ? "Saving..." : "Save & Publish"}
+        </button>
+
+        <button
+          class="btn"
+          @click=${callbacks.onImport}
+          ?disabled=${state.importing || state.saving}
+        >
+          ${state.importing ? "Importing..." : "Import from Relays"}
+        </button>
+
+        <button
+          class="btn"
+          @click=${callbacks.onToggleAdvanced}
+        >
+          ${state.showAdvanced ? "Hide Advanced" : "Show Advanced"}
+        </button>
+
+        <button
+          class="btn"
+          @click=${callbacks.onCancel}
+          ?disabled=${state.saving}
+        >
+          Cancel
+        </button>
+      </div>
+
+      ${
+        isDirty
+          ? html`
+              <div style="font-size: 12px; color: var(--warning-color); margin-top: 8px">
+                You have unsaved changes
+              </div>
+            `
+          : nothing
+      }
+    </div>
+  `;
+}
+
+// ============================================================================
+// Factory
+// ============================================================================
+
+/**
+ * Create initial form state from existing profile
+ */
+export function createNostrProfileFormState(
+  profile: NostrProfileType | undefined,
+): NostrProfileFormState {
+  const values: NostrProfileType = {
+    name: profile?.name ?? "",
+    displayName: profile?.displayName ?? "",
+    about: profile?.about ?? "",
+    picture: profile?.picture ?? "",
+    banner: profile?.banner ?? "",
+    website: profile?.website ?? "",
+    nip05: profile?.nip05 ?? "",
+    lud16: profile?.lud16 ?? "",
+  };
+
+  return {
+    values,
+    original: { ...values },
+    saving: false,
+    importing: false,
+    error: null,
+    success: null,
+    fieldErrors: {},
+    showAdvanced: Boolean(profile?.banner || profile?.website || profile?.nip05 || profile?.lud16),
+  };
+}