openclaw-multi-auto 1.3.7 → 1.3.8

package/ui/src/ui/views/sessions.ts

@@ -0,0 +1,321 @@
+import { html, nothing } from "lit";
+import { formatRelativeTimestamp } from "../format.ts";
+import { pathForTab } from "../navigation.ts";
+import { formatSessionTokens } from "../presenter.ts";
+import type { GatewaySessionRow, SessionsListResult } from "../types.ts";
+
+export type SessionsProps = {
+  loading: boolean;
+  result: SessionsListResult | null;
+  error: string | null;
+  activeMinutes: string;
+  limit: string;
+  includeGlobal: boolean;
+  includeUnknown: boolean;
+  basePath: string;
+  onFiltersChange: (next: {
+    activeMinutes: string;
+    limit: string;
+    includeGlobal: boolean;
+    includeUnknown: boolean;
+  }) => void;
+  onRefresh: () => void;
+  onPatch: (
+    key: string,
+    patch: {
+      label?: string | null;
+      thinkingLevel?: string | null;
+      verboseLevel?: string | null;
+      reasoningLevel?: string | null;
+    },
+  ) => void;
+  onDelete: (key: string) => void;
+};
+
+const THINK_LEVELS = ["", "off", "minimal", "low", "medium", "high", "xhigh"] as const;
+const BINARY_THINK_LEVELS = ["", "off", "on"] as const;
+const VERBOSE_LEVELS = [
+  { value: "", label: "inherit" },
+  { value: "off", label: "off (explicit)" },
+  { value: "on", label: "on" },
+  { value: "full", label: "full" },
+] as const;
+const REASONING_LEVELS = ["", "off", "on", "stream"] as const;
+
+function normalizeProviderId(provider?: string | null): string {
+  if (!provider) {
+    return "";
+  }
+  const normalized = provider.trim().toLowerCase();
+  if (normalized === "z.ai" || normalized === "z-ai") {
+    return "zai";
+  }
+  return normalized;
+}
+
+function isBinaryThinkingProvider(provider?: string | null): boolean {
+  return normalizeProviderId(provider) === "zai";
+}
+
+function resolveThinkLevelOptions(provider?: string | null): readonly string[] {
+  return isBinaryThinkingProvider(provider) ? BINARY_THINK_LEVELS : THINK_LEVELS;
+}
+
+function withCurrentOption(options: readonly string[], current: string): string[] {
+  if (!current) {
+    return [...options];
+  }
+  if (options.includes(current)) {
+    return [...options];
+  }
+  return [...options, current];
+}
+
+function withCurrentLabeledOption(
+  options: readonly { value: string; label: string }[],
+  current: string,
+): Array<{ value: string; label: string }> {
+  if (!current) {
+    return [...options];
+  }
+  if (options.some((option) => option.value === current)) {
+    return [...options];
+  }
+  return [...options, { value: current, label: `${current} (custom)` }];
+}
+
+function resolveThinkLevelDisplay(value: string, isBinary: boolean): string {
+  if (!isBinary) {
+    return value;
+  }
+  if (!value || value === "off") {
+    return value;
+  }
+  return "on";
+}
+
+function resolveThinkLevelPatchValue(value: string, isBinary: boolean): string | null {
+  if (!value) {
+    return null;
+  }
+  if (!isBinary) {
+    return value;
+  }
+  if (value === "on") {
+    return "low";
+  }
+  return value;
+}
+
+export function renderSessions(props: SessionsProps) {
+  const rows = props.result?.sessions ?? [];
+  return html`
+    <section class="card">
+      <div class="row" style="justify-content: space-between;">
+        <div>
+          <div class="card-title">Sessions</div>
+          <div class="card-sub">Active session keys and per-session overrides.</div>
+        </div>
+        <button class="btn" ?disabled=${props.loading} @click=${props.onRefresh}>
+          ${props.loading ? "Loading…" : "Refresh"}
+        </button>
+      </div>
+
+      <div class="filters" style="margin-top: 14px;">
+        <label class="field">
+          <span>Active within (minutes)</span>
+          <input
+            .value=${props.activeMinutes}
+            @input=${(e: Event) =>
+              props.onFiltersChange({
+                activeMinutes: (e.target as HTMLInputElement).value,
+                limit: props.limit,
+                includeGlobal: props.includeGlobal,
+                includeUnknown: props.includeUnknown,
+              })}
+          />
+        </label>
+        <label class="field">
+          <span>Limit</span>
+          <input
+            .value=${props.limit}
+            @input=${(e: Event) =>
+              props.onFiltersChange({
+                activeMinutes: props.activeMinutes,
+                limit: (e.target as HTMLInputElement).value,
+                includeGlobal: props.includeGlobal,
+                includeUnknown: props.includeUnknown,
+              })}
+          />
+        </label>
+        <label class="field checkbox">
+          <span>Include global</span>
+          <input
+            type="checkbox"
+            .checked=${props.includeGlobal}
+            @change=${(e: Event) =>
+              props.onFiltersChange({
+                activeMinutes: props.activeMinutes,
+                limit: props.limit,
+                includeGlobal: (e.target as HTMLInputElement).checked,
+                includeUnknown: props.includeUnknown,
+              })}
+          />
+        </label>
+        <label class="field checkbox">
+          <span>Include unknown</span>
+          <input
+            type="checkbox"
+            .checked=${props.includeUnknown}
+            @change=${(e: Event) =>
+              props.onFiltersChange({
+                activeMinutes: props.activeMinutes,
+                limit: props.limit,
+                includeGlobal: props.includeGlobal,
+                includeUnknown: (e.target as HTMLInputElement).checked,
+              })}
+          />
+        </label>
+      </div>
+
+      ${
+        props.error
+          ? html`<div class="callout danger" style="margin-top: 12px;">${props.error}</div>`
+          : nothing
+      }
+
+      <div class="muted" style="margin-top: 12px;">
+        ${props.result ? `Store: ${props.result.path}` : ""}
+      </div>
+
+      <div class="table" style="margin-top: 16px;">
+        <div class="table-head">
+          <div>Key</div>
+          <div>Label</div>
+          <div>Kind</div>
+          <div>Updated</div>
+          <div>Tokens</div>
+          <div>Thinking</div>
+          <div>Verbose</div>
+          <div>Reasoning</div>
+          <div>Actions</div>
+        </div>
+        ${
+          rows.length === 0
+            ? html`
+                <div class="muted">No sessions found.</div>
+              `
+            : rows.map((row) =>
+                renderRow(row, props.basePath, props.onPatch, props.onDelete, props.loading),
+              )
+        }
+      </div>
+    </section>
+  `;
+}
+
+function renderRow(
+  row: GatewaySessionRow,
+  basePath: string,
+  onPatch: SessionsProps["onPatch"],
+  onDelete: SessionsProps["onDelete"],
+  disabled: boolean,
+) {
+  const updated = row.updatedAt ? formatRelativeTimestamp(row.updatedAt) : "n/a";
+  const rawThinking = row.thinkingLevel ?? "";
+  const isBinaryThinking = isBinaryThinkingProvider(row.modelProvider);
+  const thinking = resolveThinkLevelDisplay(rawThinking, isBinaryThinking);
+  const thinkLevels = withCurrentOption(resolveThinkLevelOptions(row.modelProvider), thinking);
+  const verbose = row.verboseLevel ?? "";
+  const verboseLevels = withCurrentLabeledOption(VERBOSE_LEVELS, verbose);
+  const reasoning = row.reasoningLevel ?? "";
+  const reasoningLevels = withCurrentOption(REASONING_LEVELS, reasoning);
+  const displayName =
+    typeof row.displayName === "string" && row.displayName.trim().length > 0
+      ? row.displayName.trim()
+      : null;
+  const label = typeof row.label === "string" ? row.label.trim() : "";
+  const showDisplayName = Boolean(displayName && displayName !== row.key && displayName !== label);
+  const canLink = row.kind !== "global";
+  const chatUrl = canLink
+    ? `${pathForTab("chat", basePath)}?session=${encodeURIComponent(row.key)}`
+    : null;
+
+  return html`
+    <div class="table-row">
+      <div class="mono session-key-cell">
+        ${canLink ? html`<a href=${chatUrl} class="session-link">${row.key}</a>` : row.key}
+        ${showDisplayName ? html`<span class="muted session-key-display-name">${displayName}</span>` : nothing}
+      </div>
+      <div>
+        <input
+          .value=${row.label ?? ""}
+          ?disabled=${disabled}
+          placeholder="(optional)"
+          @change=${(e: Event) => {
+            const value = (e.target as HTMLInputElement).value.trim();
+            onPatch(row.key, { label: value || null });
+          }}
+        />
+      </div>
+      <div>${row.kind}</div>
+      <div>${updated}</div>
+      <div>${formatSessionTokens(row)}</div>
+      <div>
+        <select
+          ?disabled=${disabled}
+          @change=${(e: Event) => {
+            const value = (e.target as HTMLSelectElement).value;
+            onPatch(row.key, {
+              thinkingLevel: resolveThinkLevelPatchValue(value, isBinaryThinking),
+            });
+          }}
+        >
+          ${thinkLevels.map(
+            (level) =>
+              html`<option value=${level} ?selected=${thinking === level}>
+                ${level || "inherit"}
+              </option>`,
+          )}
+        </select>
+      </div>
+      <div>
+        <select
+          ?disabled=${disabled}
+          @change=${(e: Event) => {
+            const value = (e.target as HTMLSelectElement).value;
+            onPatch(row.key, { verboseLevel: value || null });
+          }}
+        >
+          ${verboseLevels.map(
+            (level) =>
+              html`<option value=${level.value} ?selected=${verbose === level.value}>
+                ${level.label}
+              </option>`,
+          )}
+        </select>
+      </div>
+      <div>
+        <select
+          ?disabled=${disabled}
+          @change=${(e: Event) => {
+            const value = (e.target as HTMLSelectElement).value;
+            onPatch(row.key, { reasoningLevel: value || null });
+          }}
+        >
+          ${reasoningLevels.map(
+            (level) =>
+              html`<option value=${level} ?selected=${reasoning === level}>
+                ${level || "inherit"}
+              </option>`,
+          )}
+        </select>
+      </div>
+      <div>
+        <button class="btn danger" ?disabled=${disabled} @click=${() => onDelete(row.key)}>
+          Delete
+        </button>
+      </div>
+    </div>
+  `;
+}

package/ui/src/ui/views/skills-grouping.ts

@@ -0,0 +1,40 @@
+import type { SkillStatusEntry } from "../types.ts";
+
+export type SkillGroup = {
+  id: string;
+  label: string;
+  skills: SkillStatusEntry[];
+};
+
+const SKILL_SOURCE_GROUPS: Array<{ id: string; label: string; sources: string[] }> = [
+  { id: "workspace", label: "Workspace Skills", sources: ["openclaw-workspace"] },
+  { id: "built-in", label: "Built-in Skills", sources: ["openclaw-bundled"] },
+  { id: "installed", label: "Installed Skills", sources: ["openclaw-managed"] },
+  { id: "extra", label: "Extra Skills", sources: ["openclaw-extra"] },
+];
+
+export function groupSkills(skills: SkillStatusEntry[]): SkillGroup[] {
+  const groups = new Map<string, SkillGroup>();
+  for (const def of SKILL_SOURCE_GROUPS) {
+    groups.set(def.id, { id: def.id, label: def.label, skills: [] });
+  }
+  const builtInGroup = SKILL_SOURCE_GROUPS.find((group) => group.id === "built-in");
+  const other: SkillGroup = { id: "other", label: "Other Skills", skills: [] };
+  for (const skill of skills) {
+    const match = skill.bundled
+      ? builtInGroup
+      : SKILL_SOURCE_GROUPS.find((group) => group.sources.includes(skill.source));
+    if (match) {
+      groups.get(match.id)?.skills.push(skill);
+    } else {
+      other.skills.push(skill);
+    }
+  }
+  const ordered = SKILL_SOURCE_GROUPS.map((group) => groups.get(group.id)).filter(
+    (group): group is SkillGroup => Boolean(group && group.skills.length > 0),
+  );
+  if (other.skills.length > 0) {
+    ordered.push(other);
+  }
+  return ordered;
+}

package/ui/src/ui/views/skills-shared.ts

@@ -0,0 +1,52 @@
+import { html, nothing } from "lit";
+import type { SkillStatusEntry } from "../types.ts";
+
+export function computeSkillMissing(skill: SkillStatusEntry): string[] {
+  return [
+    ...skill.missing.bins.map((b) => `bin:${b}`),
+    ...skill.missing.env.map((e) => `env:${e}`),
+    ...skill.missing.config.map((c) => `config:${c}`),
+    ...skill.missing.os.map((o) => `os:${o}`),
+  ];
+}
+
+export function computeSkillReasons(skill: SkillStatusEntry): string[] {
+  const reasons: string[] = [];
+  if (skill.disabled) {
+    reasons.push("disabled");
+  }
+  if (skill.blockedByAllowlist) {
+    reasons.push("blocked by allowlist");
+  }
+  return reasons;
+}
+
+export function renderSkillStatusChips(params: {
+  skill: SkillStatusEntry;
+  showBundledBadge?: boolean;
+}) {
+  const skill = params.skill;
+  const showBundledBadge = Boolean(params.showBundledBadge);
+  return html`
+    <div class="chip-row" style="margin-top: 6px;">
+      <span class="chip">${skill.source}</span>
+      ${
+        showBundledBadge
+          ? html`
+              <span class="chip">bundled</span>
+            `
+          : nothing
+      }
+      <span class="chip ${skill.eligible ? "chip-ok" : "chip-warn"}">
+        ${skill.eligible ? "eligible" : "blocked"}
+      </span>
+      ${
+        skill.disabled
+          ? html`
+              <span class="chip chip-warn">disabled</span>
+            `
+          : nothing
+      }
+    </div>
+  `;
+}

package/ui/src/ui/views/skills.ts

@@ -0,0 +1,192 @@
+import { html, nothing } from "lit";
+import type { SkillMessageMap } from "../controllers/skills.ts";
+import { clampText } from "../format.ts";
+import type { SkillStatusEntry, SkillStatusReport } from "../types.ts";
+import { groupSkills } from "./skills-grouping.ts";
+import {
+  computeSkillMissing,
+  computeSkillReasons,
+  renderSkillStatusChips,
+} from "./skills-shared.ts";
+
+export type SkillsProps = {
+  loading: boolean;
+  report: SkillStatusReport | null;
+  error: string | null;
+  filter: string;
+  edits: Record<string, string>;
+  busyKey: string | null;
+  messages: SkillMessageMap;
+  onFilterChange: (next: string) => void;
+  onRefresh: () => void;
+  onToggle: (skillKey: string, enabled: boolean) => void;
+  onEdit: (skillKey: string, value: string) => void;
+  onSaveKey: (skillKey: string) => void;
+  onInstall: (skillKey: string, name: string, installId: string) => void;
+};
+
+export function renderSkills(props: SkillsProps) {
+  const skills = props.report?.skills ?? [];
+  const filter = props.filter.trim().toLowerCase();
+  const filtered = filter
+    ? skills.filter((skill) =>
+        [skill.name, skill.description, skill.source].join(" ").toLowerCase().includes(filter),
+      )
+    : skills;
+  const groups = groupSkills(filtered);
+
+  return html`
+    <section class="card">
+      <div class="row" style="justify-content: space-between;">
+        <div>
+          <div class="card-title">Skills</div>
+          <div class="card-sub">Bundled, managed, and workspace skills.</div>
+        </div>
+        <button class="btn" ?disabled=${props.loading} @click=${props.onRefresh}>
+          ${props.loading ? "Loading…" : "Refresh"}
+        </button>
+      </div>
+
+      <div class="filters" style="margin-top: 14px;">
+        <label class="field" style="flex: 1;">
+          <span>Filter</span>
+          <input
+            .value=${props.filter}
+            @input=${(e: Event) => props.onFilterChange((e.target as HTMLInputElement).value)}
+            placeholder="Search skills"
+          />
+        </label>
+        <div class="muted">${filtered.length} shown</div>
+      </div>
+
+      ${
+        props.error
+          ? html`<div class="callout danger" style="margin-top: 12px;">${props.error}</div>`
+          : nothing
+      }
+
+      ${
+        filtered.length === 0
+          ? html`
+              <div class="muted" style="margin-top: 16px">No skills found.</div>
+            `
+          : html`
+            <div class="agent-skills-groups" style="margin-top: 16px;">
+              ${groups.map((group) => {
+                const collapsedByDefault = group.id === "workspace" || group.id === "built-in";
+                return html`
+                  <details class="agent-skills-group" ?open=${!collapsedByDefault}>
+                    <summary class="agent-skills-header">
+                      <span>${group.label}</span>
+                      <span class="muted">${group.skills.length}</span>
+                    </summary>
+                    <div class="list skills-grid">
+                      ${group.skills.map((skill) => renderSkill(skill, props))}
+                    </div>
+                  </details>
+                `;
+              })}
+            </div>
+          `
+      }
+    </section>
+  `;
+}
+
+function renderSkill(skill: SkillStatusEntry, props: SkillsProps) {
+  const busy = props.busyKey === skill.skillKey;
+  const apiKey = props.edits[skill.skillKey] ?? "";
+  const message = props.messages[skill.skillKey] ?? null;
+  const canInstall = skill.install.length > 0 && skill.missing.bins.length > 0;
+  const showBundledBadge = Boolean(skill.bundled && skill.source !== "openclaw-bundled");
+  const missing = computeSkillMissing(skill);
+  const reasons = computeSkillReasons(skill);
+  return html`
+    <div class="list-item">
+      <div class="list-main">
+        <div class="list-title">
+          ${skill.emoji ? `${skill.emoji} ` : ""}${skill.name}
+        </div>
+        <div class="list-sub">${clampText(skill.description, 140)}</div>
+        ${renderSkillStatusChips({ skill, showBundledBadge })}
+        ${
+          missing.length > 0
+            ? html`
+              <div class="muted" style="margin-top: 6px;">
+                Missing: ${missing.join(", ")}
+              </div>
+            `
+            : nothing
+        }
+        ${
+          reasons.length > 0
+            ? html`
+              <div class="muted" style="margin-top: 6px;">
+                Reason: ${reasons.join(", ")}
+              </div>
+            `
+            : nothing
+        }
+      </div>
+      <div class="list-meta">
+        <div class="row" style="justify-content: flex-end; flex-wrap: wrap;">
+          <button
+            class="btn"
+            ?disabled=${busy}
+            @click=${() => props.onToggle(skill.skillKey, skill.disabled)}
+          >
+            ${skill.disabled ? "Enable" : "Disable"}
+          </button>
+          ${
+            canInstall
+              ? html`<button
+                class="btn"
+                ?disabled=${busy}
+                @click=${() => props.onInstall(skill.skillKey, skill.name, skill.install[0].id)}
+              >
+                ${busy ? "Installing…" : skill.install[0].label}
+              </button>`
+              : nothing
+          }
+        </div>
+        ${
+          message
+            ? html`<div
+              class="muted"
+              style="margin-top: 8px; color: ${
+                message.kind === "error"
+                  ? "var(--danger-color, #d14343)"
+                  : "var(--success-color, #0a7f5a)"
+              };"
+            >
+              ${message.message}
+            </div>`
+            : nothing
+        }
+        ${
+          skill.primaryEnv
+            ? html`
+              <div class="field" style="margin-top: 10px;">
+                <span>API key</span>
+                <input
+                  type="password"
+                  .value=${apiKey}
+                  @input=${(e: Event) =>
+                    props.onEdit(skill.skillKey, (e.target as HTMLInputElement).value)}
+                />
+              </div>
+              <button
+                class="btn primary"
+                style="margin-top: 8px;"
+                ?disabled=${busy}
+                @click=${() => props.onSaveKey(skill.skillKey)}
+              >
+                Save key
+              </button>
+            `
+            : nothing
+        }
+      </div>
+    </div>
+  `;
+}