openclaw-multi-auto 1.3.6 → 1.3.8

package/ui/src/ui/views/debug.ts

@@ -0,0 +1,151 @@
+import { html, nothing } from "lit";
+import type { EventLogEntry } from "../app-events.ts";
+import { formatEventPayload } from "../presenter.ts";
+
+export type DebugProps = {
+  loading: boolean;
+  status: Record<string, unknown> | null;
+  health: Record<string, unknown> | null;
+  models: unknown[];
+  heartbeat: unknown;
+  eventLog: EventLogEntry[];
+  callMethod: string;
+  callParams: string;
+  callResult: string | null;
+  callError: string | null;
+  onCallMethodChange: (next: string) => void;
+  onCallParamsChange: (next: string) => void;
+  onRefresh: () => void;
+  onCall: () => void;
+};
+
+export function renderDebug(props: DebugProps) {
+  const securityAudit =
+    props.status && typeof props.status === "object"
+      ? (props.status as { securityAudit?: { summary?: Record<string, number> } }).securityAudit
+      : null;
+  const securitySummary = securityAudit?.summary ?? null;
+  const critical = securitySummary?.critical ?? 0;
+  const warn = securitySummary?.warn ?? 0;
+  const info = securitySummary?.info ?? 0;
+  const securityTone = critical > 0 ? "danger" : warn > 0 ? "warn" : "success";
+  const securityLabel =
+    critical > 0 ? `${critical} critical` : warn > 0 ? `${warn} warnings` : "No critical issues";
+
+  return html`
+    <section class="grid grid-cols-2">
+      <div class="card">
+        <div class="row" style="justify-content: space-between;">
+          <div>
+            <div class="card-title">Snapshots</div>
+            <div class="card-sub">Status, health, and heartbeat data.</div>
+          </div>
+          <button class="btn" ?disabled=${props.loading} @click=${props.onRefresh}>
+            ${props.loading ? "Refreshing…" : "Refresh"}
+          </button>
+        </div>
+        <div class="stack" style="margin-top: 12px;">
+          <div>
+            <div class="muted">Status</div>
+            ${
+              securitySummary
+                ? html`<div class="callout ${securityTone}" style="margin-top: 8px;">
+                  Security audit: ${securityLabel}${info > 0 ? ` · ${info} info` : ""}. Run
+                  <span class="mono">openclaw security audit --deep</span> for details.
+                </div>`
+                : nothing
+            }
+            <pre class="code-block">${JSON.stringify(props.status ?? {}, null, 2)}</pre>
+          </div>
+          <div>
+            <div class="muted">Health</div>
+            <pre class="code-block">${JSON.stringify(props.health ?? {}, null, 2)}</pre>
+          </div>
+          <div>
+            <div class="muted">Last heartbeat</div>
+            <pre class="code-block">${JSON.stringify(props.heartbeat ?? {}, null, 2)}</pre>
+          </div>
+        </div>
+      </div>
+
+      <div class="card">
+        <div class="card-title">Manual RPC</div>
+        <div class="card-sub">Send a raw gateway method with JSON params.</div>
+        <div class="form-grid" style="margin-top: 16px;">
+          <label class="field">
+            <span>Method</span>
+            <input
+              .value=${props.callMethod}
+              @input=${(e: Event) => props.onCallMethodChange((e.target as HTMLInputElement).value)}
+              placeholder="system-presence"
+            />
+          </label>
+          <label class="field">
+            <span>Params (JSON)</span>
+            <textarea
+              .value=${props.callParams}
+              @input=${(e: Event) =>
+                props.onCallParamsChange((e.target as HTMLTextAreaElement).value)}
+              rows="6"
+            ></textarea>
+          </label>
+        </div>
+        <div class="row" style="margin-top: 12px;">
+          <button class="btn primary" @click=${props.onCall}>Call</button>
+        </div>
+        ${
+          props.callError
+            ? html`<div class="callout danger" style="margin-top: 12px;">
+              ${props.callError}
+            </div>`
+            : nothing
+        }
+        ${
+          props.callResult
+            ? html`<pre class="code-block" style="margin-top: 12px;">${props.callResult}</pre>`
+            : nothing
+        }
+      </div>
+    </section>
+
+    <section class="card" style="margin-top: 18px;">
+      <div class="card-title">Models</div>
+      <div class="card-sub">Catalog from models.list.</div>
+      <pre class="code-block" style="margin-top: 12px;">${JSON.stringify(
+        props.models ?? [],
+        null,
+        2,
+      )}</pre>
+    </section>
+
+    <section class="card" style="margin-top: 18px;">
+      <div class="card-title">Event Log</div>
+      <div class="card-sub">Latest gateway events.</div>
+      ${
+        props.eventLog.length === 0
+          ? html`
+              <div class="muted" style="margin-top: 12px">No events yet.</div>
+            `
+          : html`
+            <div class="list debug-event-log" style="margin-top: 12px;">
+              ${props.eventLog.map(
+                (evt) => html`
+                  <div class="list-item debug-event-log__item">
+                    <div class="list-main">
+                      <div class="list-title">${evt.event}</div>
+                      <div class="list-sub">${new Date(evt.ts).toLocaleTimeString()}</div>
+                    </div>
+                    <div class="list-meta debug-event-log__meta">
+                      <pre class="code-block debug-event-log__payload">${formatEventPayload(
+                        evt.payload,
+                      )}</pre>
+                    </div>
+                  </div>
+                `,
+              )}
+            </div>
+          `
+      }
+    </section>
+  `;
+}

package/ui/src/ui/views/exec-approval.ts

@@ -0,0 +1,89 @@
+import { html, nothing } from "lit";
+import type { AppViewState } from "../app-view-state.ts";
+
+function formatRemaining(ms: number): string {
+  const remaining = Math.max(0, ms);
+  const totalSeconds = Math.floor(remaining / 1000);
+  if (totalSeconds < 60) {
+    return `${totalSeconds}s`;
+  }
+  const minutes = Math.floor(totalSeconds / 60);
+  if (minutes < 60) {
+    return `${minutes}m`;
+  }
+  const hours = Math.floor(minutes / 60);
+  return `${hours}h`;
+}
+
+function renderMetaRow(label: string, value?: string | null) {
+  if (!value) {
+    return nothing;
+  }
+  return html`<div class="exec-approval-meta-row"><span>${label}</span><span>${value}</span></div>`;
+}
+
+export function renderExecApprovalPrompt(state: AppViewState) {
+  const active = state.execApprovalQueue[0];
+  if (!active) {
+    return nothing;
+  }
+  const request = active.request;
+  const remainingMs = active.expiresAtMs - Date.now();
+  const remaining = remainingMs > 0 ? `expires in ${formatRemaining(remainingMs)}` : "expired";
+  const queueCount = state.execApprovalQueue.length;
+  return html`
+    <div class="exec-approval-overlay" role="dialog" aria-live="polite">
+      <div class="exec-approval-card">
+        <div class="exec-approval-header">
+          <div>
+            <div class="exec-approval-title">Exec approval needed</div>
+            <div class="exec-approval-sub">${remaining}</div>
+          </div>
+          ${
+            queueCount > 1
+              ? html`<div class="exec-approval-queue">${queueCount} pending</div>`
+              : nothing
+          }
+        </div>
+        <div class="exec-approval-command mono">${request.command}</div>
+        <div class="exec-approval-meta">
+          ${renderMetaRow("Host", request.host)}
+          ${renderMetaRow("Agent", request.agentId)}
+          ${renderMetaRow("Session", request.sessionKey)}
+          ${renderMetaRow("CWD", request.cwd)}
+          ${renderMetaRow("Resolved", request.resolvedPath)}
+          ${renderMetaRow("Security", request.security)}
+          ${renderMetaRow("Ask", request.ask)}
+        </div>
+        ${
+          state.execApprovalError
+            ? html`<div class="exec-approval-error">${state.execApprovalError}</div>`
+            : nothing
+        }
+        <div class="exec-approval-actions">
+          <button
+            class="btn primary"
+            ?disabled=${state.execApprovalBusy}
+            @click=${() => state.handleExecApprovalDecision("allow-once")}
+          >
+            Allow once
+          </button>
+          <button
+            class="btn"
+            ?disabled=${state.execApprovalBusy}
+            @click=${() => state.handleExecApprovalDecision("allow-always")}
+          >
+            Always allow
+          </button>
+          <button
+            class="btn danger"
+            ?disabled=${state.execApprovalBusy}
+            @click=${() => state.handleExecApprovalDecision("deny")}
+          >
+            Deny
+          </button>
+        </div>
+      </div>
+    </div>
+  `;
+}

package/ui/src/ui/views/gateway-url-confirmation.ts

@@ -0,0 +1,40 @@
+import { html, nothing } from "lit";
+import type { AppViewState } from "../app-view-state.ts";
+
+export function renderGatewayUrlConfirmation(state: AppViewState) {
+  const { pendingGatewayUrl } = state;
+  if (!pendingGatewayUrl) {
+    return nothing;
+  }
+
+  return html`
+    <div class="exec-approval-overlay" role="dialog" aria-modal="true" aria-live="polite">
+      <div class="exec-approval-card">
+        <div class="exec-approval-header">
+          <div>
+            <div class="exec-approval-title">Change Gateway URL</div>
+            <div class="exec-approval-sub">This will reconnect to a different gateway server</div>
+          </div>
+        </div>
+        <div class="exec-approval-command mono">${pendingGatewayUrl}</div>
+        <div class="callout danger" style="margin-top: 12px;">
+          Only confirm if you trust this URL. Malicious URLs can compromise your system.
+        </div>
+        <div class="exec-approval-actions">
+          <button
+            class="btn primary"
+            @click=${() => state.handleGatewayUrlConfirm()}
+          >
+            Confirm
+          </button>
+          <button
+            class="btn"
+            @click=${() => state.handleGatewayUrlCancel()}
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  `;
+}

package/ui/src/ui/views/instances.ts

@@ -0,0 +1,89 @@
+import { html, nothing } from "lit";
+import { formatPresenceAge, formatPresenceSummary } from "../presenter.ts";
+import type { PresenceEntry } from "../types.ts";
+
+export type InstancesProps = {
+  loading: boolean;
+  entries: PresenceEntry[];
+  lastError: string | null;
+  statusMessage: string | null;
+  onRefresh: () => void;
+};
+
+export function renderInstances(props: InstancesProps) {
+  return html`
+    <section class="card">
+      <div class="row" style="justify-content: space-between;">
+        <div>
+          <div class="card-title">Connected Instances</div>
+          <div class="card-sub">Presence beacons from the gateway and clients.</div>
+        </div>
+        <button class="btn" ?disabled=${props.loading} @click=${props.onRefresh}>
+          ${props.loading ? "Loading…" : "Refresh"}
+        </button>
+      </div>
+      ${
+        props.lastError
+          ? html`<div class="callout danger" style="margin-top: 12px;">
+            ${props.lastError}
+          </div>`
+          : nothing
+      }
+      ${
+        props.statusMessage
+          ? html`<div class="callout" style="margin-top: 12px;">
+            ${props.statusMessage}
+          </div>`
+          : nothing
+      }
+      <div class="list" style="margin-top: 16px;">
+        ${
+          props.entries.length === 0
+            ? html`
+                <div class="muted">No instances reported yet.</div>
+              `
+            : props.entries.map((entry) => renderEntry(entry))
+        }
+      </div>
+    </section>
+  `;
+}
+
+function renderEntry(entry: PresenceEntry) {
+  const lastInput = entry.lastInputSeconds != null ? `${entry.lastInputSeconds}s ago` : "n/a";
+  const mode = entry.mode ?? "unknown";
+  const roles = Array.isArray(entry.roles) ? entry.roles.filter(Boolean) : [];
+  const scopes = Array.isArray(entry.scopes) ? entry.scopes.filter(Boolean) : [];
+  const scopesLabel =
+    scopes.length > 0
+      ? scopes.length > 3
+        ? `${scopes.length} scopes`
+        : `scopes: ${scopes.join(", ")}`
+      : null;
+  return html`
+    <div class="list-item">
+      <div class="list-main">
+        <div class="list-title">${entry.host ?? "unknown host"}</div>
+        <div class="list-sub">${formatPresenceSummary(entry)}</div>
+        <div class="chip-row">
+          <span class="chip">${mode}</span>
+          ${roles.map((role) => html`<span class="chip">${role}</span>`)}
+          ${scopesLabel ? html`<span class="chip">${scopesLabel}</span>` : nothing}
+          ${entry.platform ? html`<span class="chip">${entry.platform}</span>` : nothing}
+          ${entry.deviceFamily ? html`<span class="chip">${entry.deviceFamily}</span>` : nothing}
+          ${
+            entry.modelIdentifier
+              ? html`<span class="chip">${entry.modelIdentifier}</span>`
+              : nothing
+          }
+          ${entry.version ? html`<span class="chip">${entry.version}</span>` : nothing}
+        </div>
+      </div>
+      <div class="list-meta">
+        <div>${formatPresenceAge(entry)}</div>
+        <div class="muted">Last input ${lastInput}</div>
+        <div class="muted">Reason ${entry.reason ?? ""}</div>
+      </div>
+    </div>
+  `;
+}

package/ui/src/ui/views/logs.ts

@@ -0,0 +1,155 @@
+import { html, nothing } from "lit";
+import type { LogEntry, LogLevel } from "../types.ts";
+
+const LEVELS: LogLevel[] = ["trace", "debug", "info", "warn", "error", "fatal"];
+
+export type LogsProps = {
+  loading: boolean;
+  error: string | null;
+  file: string | null;
+  entries: LogEntry[];
+  filterText: string;
+  levelFilters: Record<LogLevel, boolean>;
+  autoFollow: boolean;
+  truncated: boolean;
+  onFilterTextChange: (next: string) => void;
+  onLevelToggle: (level: LogLevel, enabled: boolean) => void;
+  onToggleAutoFollow: (next: boolean) => void;
+  onRefresh: () => void;
+  onExport: (lines: string[], label: string) => void;
+  onScroll: (event: Event) => void;
+};
+
+function formatTime(value?: string | null) {
+  if (!value) {
+    return "";
+  }
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+  return date.toLocaleTimeString();
+}
+
+function matchesFilter(entry: LogEntry, needle: string) {
+  if (!needle) {
+    return true;
+  }
+  const haystack = [entry.message, entry.subsystem, entry.raw]
+    .filter(Boolean)
+    .join(" ")
+    .toLowerCase();
+  return haystack.includes(needle);
+}
+
+export function renderLogs(props: LogsProps) {
+  const needle = props.filterText.trim().toLowerCase();
+  const levelFiltered = LEVELS.some((level) => !props.levelFilters[level]);
+  const filtered = props.entries.filter((entry) => {
+    if (entry.level && !props.levelFilters[entry.level]) {
+      return false;
+    }
+    return matchesFilter(entry, needle);
+  });
+  const exportLabel = needle || levelFiltered ? "filtered" : "visible";
+
+  return html`
+    <section class="card">
+      <div class="row" style="justify-content: space-between;">
+        <div>
+          <div class="card-title">Logs</div>
+          <div class="card-sub">Gateway file logs (JSONL).</div>
+        </div>
+        <div class="row" style="gap: 8px;">
+          <button class="btn" ?disabled=${props.loading} @click=${props.onRefresh}>
+            ${props.loading ? "Loading…" : "Refresh"}
+          </button>
+          <button
+            class="btn"
+            ?disabled=${filtered.length === 0}
+            @click=${() =>
+              props.onExport(
+                filtered.map((entry) => entry.raw),
+                exportLabel,
+              )}
+          >
+            Export ${exportLabel}
+          </button>
+        </div>
+      </div>
+
+      <div class="filters" style="margin-top: 14px;">
+        <label class="field" style="min-width: 220px;">
+          <span>Filter</span>
+          <input
+            .value=${props.filterText}
+            @input=${(e: Event) => props.onFilterTextChange((e.target as HTMLInputElement).value)}
+            placeholder="Search logs"
+          />
+        </label>
+        <label class="field checkbox">
+          <span>Auto-follow</span>
+          <input
+            type="checkbox"
+            .checked=${props.autoFollow}
+            @change=${(e: Event) =>
+              props.onToggleAutoFollow((e.target as HTMLInputElement).checked)}
+          />
+        </label>
+      </div>
+
+      <div class="chip-row" style="margin-top: 12px;">
+        ${LEVELS.map(
+          (level) => html`
+            <label class="chip log-chip ${level}">
+              <input
+                type="checkbox"
+                .checked=${props.levelFilters[level]}
+                @change=${(e: Event) =>
+                  props.onLevelToggle(level, (e.target as HTMLInputElement).checked)}
+              />
+              <span>${level}</span>
+            </label>
+          `,
+        )}
+      </div>
+
+      ${
+        props.file
+          ? html`<div class="muted" style="margin-top: 10px;">File: ${props.file}</div>`
+          : nothing
+      }
+      ${
+        props.truncated
+          ? html`
+              <div class="callout" style="margin-top: 10px">Log output truncated; showing latest chunk.</div>
+            `
+          : nothing
+      }
+      ${
+        props.error
+          ? html`<div class="callout danger" style="margin-top: 10px;">${props.error}</div>`
+          : nothing
+      }
+
+      <div class="log-stream" style="margin-top: 12px;" @scroll=${props.onScroll}>
+        ${
+          filtered.length === 0
+            ? html`
+                <div class="muted" style="padding: 12px">No log entries.</div>
+              `
+            : filtered.map(
+                (entry) => html`
+                <div class="log-row">
+                  <div class="log-time mono">${formatTime(entry.time)}</div>
+                  <div class="log-level ${entry.level ?? ""}">${entry.level ?? ""}</div>
+                  <div class="log-subsystem mono">${entry.subsystem ?? ""}</div>
+                  <div class="log-message mono">${entry.message ?? entry.raw}</div>
+                </div>
+              `,
+              )
+        }
+      </div>
+    </section>
+  `;
+}

package/ui/src/ui/views/markdown-sidebar.ts

@@ -0,0 +1,40 @@
+import { html } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { icons } from "../icons.ts";
+import { toSanitizedMarkdownHtml } from "../markdown.ts";
+
+export type MarkdownSidebarProps = {
+  content: string | null;
+  error: string | null;
+  onClose: () => void;
+  onViewRawText: () => void;
+};
+
+export function renderMarkdownSidebar(props: MarkdownSidebarProps) {
+  return html`
+    <div class="sidebar-panel">
+      <div class="sidebar-header">
+        <div class="sidebar-title">Tool Output</div>
+        <button @click=${props.onClose} class="btn" title="Close sidebar">
+          ${icons.x}
+        </button>
+      </div>
+      <div class="sidebar-content">
+        ${
+          props.error
+            ? html`
+              <div class="callout danger">${props.error}</div>
+              <button @click=${props.onViewRawText} class="btn" style="margin-top: 12px;">
+                View Raw Text
+              </button>
+            `
+            : props.content
+              ? html`<div class="sidebar-markdown">${unsafeHTML(toSanitizedMarkdownHtml(props.content))}</div>`
+              : html`
+                  <div class="muted">No content available</div>
+                `
+        }
+      </div>
+    </div>
+  `;
+}