openclaw-multi-auto 1.3.7 → 1.3.8

package/ui/src/styles/layout.mobile.css

@@ -0,0 +1,374 @@
+/* ===========================================
+   Mobile Layout
+   =========================================== */
+
+/* Tablet: Horizontal nav */
+@media (max-width: 1100px) {
+  .nav {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 4px;
+    padding: 10px 14px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .nav::-webkit-scrollbar {
+    display: none;
+  }
+
+  .nav-group {
+    display: contents;
+  }
+
+  .nav-group__items {
+    display: contents;
+  }
+
+  .nav-label {
+    display: none;
+  }
+
+  .nav-group--collapsed .nav-group__items {
+    display: contents;
+  }
+
+  .nav-item {
+    padding: 8px 14px;
+    font-size: 13px;
+    border-radius: var(--radius-md);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+}
+
+/* Mobile-specific styles */
+@media (max-width: 600px) {
+  .shell {
+    --shell-pad: 8px;
+    --shell-gap: 8px;
+  }
+
+  /* Topbar */
+  .topbar {
+    padding: 10px 12px;
+    gap: 8px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .brand {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .brand-title {
+    font-size: 14px;
+  }
+
+  .brand-sub {
+    display: none;
+  }
+
+  .topbar-status {
+    gap: 6px;
+    width: auto;
+    flex-wrap: nowrap;
+  }
+
+  .topbar-status .pill {
+    padding: 4px 8px;
+    font-size: 11px;
+    gap: 4px;
+  }
+
+  .topbar-status .pill .mono {
+    display: none;
+  }
+
+  .topbar-status .pill span:nth-child(2) {
+    display: none;
+  }
+
+  /* Nav */
+  .nav {
+    padding: 8px 10px;
+    gap: 4px;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .nav::-webkit-scrollbar {
+    display: none;
+  }
+
+  .nav-group {
+    display: contents;
+  }
+
+  .nav-label {
+    display: none;
+  }
+
+  .nav-item {
+    padding: 6px 10px;
+    font-size: 12px;
+    border-radius: var(--radius-md);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  /* Content */
+  .content-header {
+    display: none;
+  }
+
+  .content {
+    padding: 4px 4px 16px;
+    gap: 12px;
+  }
+
+  /* Cards */
+  .card {
+    padding: 12px;
+    border-radius: var(--radius-md);
+  }
+
+  .card-title {
+    font-size: 13px;
+  }
+
+  /* Stats */
+  .stat-grid {
+    gap: 8px;
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .stat {
+    padding: 10px;
+    border-radius: var(--radius-md);
+  }
+
+  .stat-label {
+    font-size: 11px;
+  }
+
+  .stat-value {
+    font-size: 18px;
+  }
+
+  /* Notes */
+  .note-grid {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  /* Forms */
+  .form-grid {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+
+  .field input,
+  .field textarea,
+  .field select {
+    padding: 8px 10px;
+    border-radius: var(--radius-md);
+    font-size: 14px;
+  }
+
+  /* Buttons */
+  .btn {
+    padding: 8px 12px;
+    font-size: 12px;
+  }
+
+  /* Pills */
+  .pill {
+    padding: 4px 10px;
+    font-size: 12px;
+  }
+
+  /* Chat */
+  .chat-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+
+  .chat-header__left {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .chat-header__right {
+    justify-content: space-between;
+  }
+
+  .chat-session {
+    min-width: unset;
+    width: 100%;
+  }
+
+  .chat-thread {
+    margin-top: 8px;
+    padding: 12px 8px;
+  }
+
+  .chat-msg {
+    max-width: 90%;
+  }
+
+  .chat-bubble {
+    padding: 8px 12px;
+    border-radius: var(--radius-md);
+  }
+
+  .chat-compose {
+    gap: 8px;
+  }
+
+  .chat-compose__field textarea {
+    min-height: 60px;
+    padding: 8px 10px;
+    border-radius: var(--radius-md);
+    font-size: 14px;
+  }
+
+  /* Log stream */
+  .log-stream {
+    border-radius: var(--radius-md);
+    max-height: 380px;
+  }
+
+  .log-row {
+    grid-template-columns: 1fr;
+    gap: 4px;
+    padding: 8px;
+  }
+
+  .log-time {
+    font-size: 10px;
+  }
+
+  .log-level {
+    font-size: 9px;
+  }
+
+  .log-subsystem {
+    font-size: 11px;
+  }
+
+  .log-message {
+    font-size: 12px;
+  }
+
+  /* Lists */
+  .list-item {
+    padding: 10px;
+    border-radius: var(--radius-md);
+  }
+
+  .list-title {
+    font-size: 13px;
+  }
+
+  .list-sub {
+    font-size: 11px;
+  }
+
+  /* Code blocks */
+  .code-block {
+    padding: 8px;
+    border-radius: var(--radius-md);
+    font-size: 11px;
+  }
+
+  /* Theme toggle */
+  .theme-toggle {
+    --theme-item: 24px;
+    --theme-gap: 2px;
+    --theme-pad: 3px;
+  }
+
+  .theme-icon {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+/* Small mobile */
+@media (max-width: 400px) {
+  .shell {
+    --shell-pad: 4px;
+  }
+
+  .topbar {
+    padding: 8px 10px;
+  }
+
+  .brand-title {
+    font-size: 13px;
+  }
+
+  .nav {
+    padding: 6px 8px;
+  }
+
+  .nav-item {
+    padding: 6px 8px;
+    font-size: 11px;
+  }
+
+  .content {
+    padding: 4px 4px 12px;
+    gap: 10px;
+  }
+
+  .card {
+    padding: 10px;
+  }
+
+  .stat {
+    padding: 8px;
+  }
+
+  .stat-value {
+    font-size: 16px;
+  }
+
+  .chat-bubble {
+    padding: 8px 10px;
+  }
+
+  .chat-compose__field textarea {
+    min-height: 52px;
+    padding: 8px 10px;
+    font-size: 13px;
+  }
+
+  .btn {
+    padding: 6px 10px;
+    font-size: 11px;
+  }
+
+  .topbar-status .pill {
+    padding: 3px 6px;
+    font-size: 10px;
+  }
+
+  .theme-toggle {
+    --theme-item: 22px;
+    --theme-gap: 2px;
+    --theme-pad: 2px;
+  }
+
+  .theme-icon {
+    width: 11px;
+    height: 11px;
+  }
+}

package/ui/src/styles.css

@@ -0,0 +1,5 @@
+@import "./styles/base.css";
+@import "./styles/layout.css";
+@import "./styles/layout.mobile.css";
+@import "./styles/components.css";
+@import "./styles/config.css";

package/ui/src/ui/app-channels.ts

@@ -0,0 +1,279 @@
+import type { OpenClawApp } from "./app.ts";
+import {
+  loadChannels,
+  logoutWhatsApp,
+  startWhatsAppLogin,
+  waitWhatsAppLogin,
+} from "./controllers/channels.ts";
+import { loadConfig, saveConfig } from "./controllers/config.ts";
+import type { NostrProfile } from "./types.ts";
+import { createNostrProfileFormState } from "./views/channels.nostr-profile-form.ts";
+
+export async function handleWhatsAppStart(host: OpenClawApp, force: boolean) {
+  await startWhatsAppLogin(host, force);
+  await loadChannels(host, true);
+}
+
+export async function handleWhatsAppWait(host: OpenClawApp) {
+  await waitWhatsAppLogin(host);
+  await loadChannels(host, true);
+}
+
+export async function handleWhatsAppLogout(host: OpenClawApp) {
+  await logoutWhatsApp(host);
+  await loadChannels(host, true);
+}
+
+export async function handleChannelConfigSave(host: OpenClawApp) {
+  await saveConfig(host);
+  await loadConfig(host);
+  await loadChannels(host, true);
+}
+
+export async function handleChannelConfigReload(host: OpenClawApp) {
+  await loadConfig(host);
+  await loadChannels(host, true);
+}
+
+function parseValidationErrors(details: unknown): Record<string, string> {
+  if (!Array.isArray(details)) {
+    return {};
+  }
+  const errors: Record<string, string> = {};
+  for (const entry of details) {
+    if (typeof entry !== "string") {
+      continue;
+    }
+    const [rawField, ...rest] = entry.split(":");
+    if (!rawField || rest.length === 0) {
+      continue;
+    }
+    const field = rawField.trim();
+    const message = rest.join(":").trim();
+    if (field && message) {
+      errors[field] = message;
+    }
+  }
+  return errors;
+}
+
+function resolveNostrAccountId(host: OpenClawApp): string {
+  const accounts = host.channelsSnapshot?.channelAccounts?.nostr ?? [];
+  return accounts[0]?.accountId ?? host.nostrProfileAccountId ?? "default";
+}
+
+function buildNostrProfileUrl(accountId: string, suffix = ""): string {
+  return `/api/channels/nostr/${encodeURIComponent(accountId)}/profile${suffix}`;
+}
+
+function resolveGatewayHttpAuthHeader(host: OpenClawApp): string | null {
+  const deviceToken = host.hello?.auth?.deviceToken?.trim();
+  if (deviceToken) {
+    return `Bearer ${deviceToken}`;
+  }
+  const token = host.settings.token.trim();
+  if (token) {
+    return `Bearer ${token}`;
+  }
+  const password = host.password.trim();
+  if (password) {
+    return `Bearer ${password}`;
+  }
+  return null;
+}
+
+function buildGatewayHttpHeaders(host: OpenClawApp): Record<string, string> {
+  const authorization = resolveGatewayHttpAuthHeader(host);
+  return authorization ? { Authorization: authorization } : {};
+}
+
+export function handleNostrProfileEdit(
+  host: OpenClawApp,
+  accountId: string,
+  profile: NostrProfile | null,
+) {
+  host.nostrProfileAccountId = accountId;
+  host.nostrProfileFormState = createNostrProfileFormState(profile ?? undefined);
+}
+
+export function handleNostrProfileCancel(host: OpenClawApp) {
+  host.nostrProfileFormState = null;
+  host.nostrProfileAccountId = null;
+}
+
+export function handleNostrProfileFieldChange(
+  host: OpenClawApp,
+  field: keyof NostrProfile,
+  value: string,
+) {
+  const state = host.nostrProfileFormState;
+  if (!state) {
+    return;
+  }
+  host.nostrProfileFormState = {
+    ...state,
+    values: {
+      ...state.values,
+      [field]: value,
+    },
+    fieldErrors: {
+      ...state.fieldErrors,
+      [field]: "",
+    },
+  };
+}
+
+export function handleNostrProfileToggleAdvanced(host: OpenClawApp) {
+  const state = host.nostrProfileFormState;
+  if (!state) {
+    return;
+  }
+  host.nostrProfileFormState = {
+    ...state,
+    showAdvanced: !state.showAdvanced,
+  };
+}
+
+export async function handleNostrProfileSave(host: OpenClawApp) {
+  const state = host.nostrProfileFormState;
+  if (!state || state.saving) {
+    return;
+  }
+  const accountId = resolveNostrAccountId(host);
+
+  host.nostrProfileFormState = {
+    ...state,
+    saving: true,
+    error: null,
+    success: null,
+    fieldErrors: {},
+  };
+
+  try {
+    const response = await fetch(buildNostrProfileUrl(accountId), {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+        ...buildGatewayHttpHeaders(host),
+      },
+      body: JSON.stringify(state.values),
+    });
+    const data = (await response.json().catch(() => null)) as {
+      ok?: boolean;
+      error?: string;
+      details?: unknown;
+      persisted?: boolean;
+    } | null;
+
+    if (!response.ok || data?.ok === false || !data) {
+      const errorMessage = data?.error ?? `Profile update failed (${response.status})`;
+      host.nostrProfileFormState = {
+        ...state,
+        saving: false,
+        error: errorMessage,
+        success: null,
+        fieldErrors: parseValidationErrors(data?.details),
+      };
+      return;
+    }
+
+    if (!data.persisted) {
+      host.nostrProfileFormState = {
+        ...state,
+        saving: false,
+        error: "Profile publish failed on all relays.",
+        success: null,
+      };
+      return;
+    }
+
+    host.nostrProfileFormState = {
+      ...state,
+      saving: false,
+      error: null,
+      success: "Profile published to relays.",
+      fieldErrors: {},
+      original: { ...state.values },
+    };
+    await loadChannels(host, true);
+  } catch (err) {
+    host.nostrProfileFormState = {
+      ...state,
+      saving: false,
+      error: `Profile update failed: ${String(err)}`,
+      success: null,
+    };
+  }
+}
+
+export async function handleNostrProfileImport(host: OpenClawApp) {
+  const state = host.nostrProfileFormState;
+  if (!state || state.importing) {
+    return;
+  }
+  const accountId = resolveNostrAccountId(host);
+
+  host.nostrProfileFormState = {
+    ...state,
+    importing: true,
+    error: null,
+    success: null,
+  };
+
+  try {
+    const response = await fetch(buildNostrProfileUrl(accountId, "/import"), {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...buildGatewayHttpHeaders(host),
+      },
+      body: JSON.stringify({ autoMerge: true }),
+    });
+    const data = (await response.json().catch(() => null)) as {
+      ok?: boolean;
+      error?: string;
+      imported?: NostrProfile;
+      merged?: NostrProfile;
+      saved?: boolean;
+    } | null;
+
+    if (!response.ok || data?.ok === false || !data) {
+      const errorMessage = data?.error ?? `Profile import failed (${response.status})`;
+      host.nostrProfileFormState = {
+        ...state,
+        importing: false,
+        error: errorMessage,
+        success: null,
+      };
+      return;
+    }
+
+    const merged = data.merged ?? data.imported ?? null;
+    const nextValues = merged ? { ...state.values, ...merged } : state.values;
+    const showAdvanced = Boolean(
+      nextValues.banner || nextValues.website || nextValues.nip05 || nextValues.lud16,
+    );
+
+    host.nostrProfileFormState = {
+      ...state,
+      importing: false,
+      values: nextValues,
+      error: null,
+      success: data.saved
+        ? "Profile imported from relays. Review and publish."
+        : "Profile imported. Review and publish.",
+      showAdvanced,
+    };
+
+    if (data.saved) {
+      await loadChannels(host, true);
+    }
+  } catch (err) {
+    host.nostrProfileFormState = {
+      ...state,
+      importing: false,
+      error: `Profile import failed: ${String(err)}`,
+      success: null,
+    };
+  }
+}