openclaw-multi-auto 1.3.7 → 1.3.8

package/ui/src/ui/views/agents-panels-tools-skills.ts

@@ -0,0 +1,537 @@
+import { html, nothing } from "lit";
+import { normalizeToolName } from "../../../../src/agents/tool-policy-shared.js";
+import type { SkillStatusEntry, SkillStatusReport, ToolsCatalogResult } from "../types.ts";
+import {
+  isAllowedByPolicy,
+  matchesList,
+  PROFILE_OPTIONS,
+  resolveAgentConfig,
+  resolveToolProfile,
+  TOOL_SECTIONS,
+} from "./agents-utils.ts";
+import type { SkillGroup } from "./skills-grouping.ts";
+import { groupSkills } from "./skills-grouping.ts";
+import {
+  computeSkillMissing,
+  computeSkillReasons,
+  renderSkillStatusChips,
+} from "./skills-shared.ts";
+
+export function renderAgentTools(params: {
+  agentId: string;
+  configForm: Record<string, unknown> | null;
+  configLoading: boolean;
+  configSaving: boolean;
+  configDirty: boolean;
+  toolsCatalogLoading: boolean;
+  toolsCatalogError: string | null;
+  toolsCatalogResult: ToolsCatalogResult | null;
+  onProfileChange: (agentId: string, profile: string | null, clearAllow: boolean) => void;
+  onOverridesChange: (agentId: string, alsoAllow: string[], deny: string[]) => void;
+  onConfigReload: () => void;
+  onConfigSave: () => void;
+}) {
+  const config = resolveAgentConfig(params.configForm, params.agentId);
+  const agentTools = config.entry?.tools ?? {};
+  const globalTools = config.globalTools ?? {};
+  const profile = agentTools.profile ?? globalTools.profile ?? "full";
+  const profileSource = agentTools.profile
+    ? "agent override"
+    : globalTools.profile
+      ? "global default"
+      : "default";
+  const hasAgentAllow = Array.isArray(agentTools.allow) && agentTools.allow.length > 0;
+  const hasGlobalAllow = Array.isArray(globalTools.allow) && globalTools.allow.length > 0;
+  const editable =
+    Boolean(params.configForm) && !params.configLoading && !params.configSaving && !hasAgentAllow;
+  const alsoAllow = hasAgentAllow
+    ? []
+    : Array.isArray(agentTools.alsoAllow)
+      ? agentTools.alsoAllow
+      : [];
+  const deny = hasAgentAllow ? [] : Array.isArray(agentTools.deny) ? agentTools.deny : [];
+  const basePolicy = hasAgentAllow
+    ? { allow: agentTools.allow ?? [], deny: agentTools.deny ?? [] }
+    : (resolveToolProfile(profile) ?? undefined);
+  const sections =
+    params.toolsCatalogResult?.groups?.length &&
+    params.toolsCatalogResult.agentId === params.agentId
+      ? params.toolsCatalogResult.groups
+      : TOOL_SECTIONS;
+  const profileOptions =
+    params.toolsCatalogResult?.profiles?.length &&
+    params.toolsCatalogResult.agentId === params.agentId
+      ? params.toolsCatalogResult.profiles
+      : PROFILE_OPTIONS;
+  const toolIds = sections.flatMap((section) => section.tools.map((tool) => tool.id));
+
+  const resolveAllowed = (toolId: string) => {
+    const baseAllowed = isAllowedByPolicy(toolId, basePolicy);
+    const extraAllowed = matchesList(toolId, alsoAllow);
+    const denied = matchesList(toolId, deny);
+    const allowed = (baseAllowed || extraAllowed) && !denied;
+    return {
+      allowed,
+      baseAllowed,
+      denied,
+    };
+  };
+  const enabledCount = toolIds.filter((toolId) => resolveAllowed(toolId).allowed).length;
+
+  const updateTool = (toolId: string, nextEnabled: boolean) => {
+    const nextAllow = new Set(
+      alsoAllow.map((entry) => normalizeToolName(entry)).filter((entry) => entry.length > 0),
+    );
+    const nextDeny = new Set(
+      deny.map((entry) => normalizeToolName(entry)).filter((entry) => entry.length > 0),
+    );
+    const baseAllowed = resolveAllowed(toolId).baseAllowed;
+    const normalized = normalizeToolName(toolId);
+    if (nextEnabled) {
+      nextDeny.delete(normalized);
+      if (!baseAllowed) {
+        nextAllow.add(normalized);
+      }
+    } else {
+      nextAllow.delete(normalized);
+      nextDeny.add(normalized);
+    }
+    params.onOverridesChange(params.agentId, [...nextAllow], [...nextDeny]);
+  };
+
+  const updateAll = (nextEnabled: boolean) => {
+    const nextAllow = new Set(
+      alsoAllow.map((entry) => normalizeToolName(entry)).filter((entry) => entry.length > 0),
+    );
+    const nextDeny = new Set(
+      deny.map((entry) => normalizeToolName(entry)).filter((entry) => entry.length > 0),
+    );
+    for (const toolId of toolIds) {
+      const baseAllowed = resolveAllowed(toolId).baseAllowed;
+      const normalized = normalizeToolName(toolId);
+      if (nextEnabled) {
+        nextDeny.delete(normalized);
+        if (!baseAllowed) {
+          nextAllow.add(normalized);
+        }
+      } else {
+        nextAllow.delete(normalized);
+        nextDeny.add(normalized);
+      }
+    }
+    params.onOverridesChange(params.agentId, [...nextAllow], [...nextDeny]);
+  };
+
+  return html`
+    <section class="card">
+      <div class="row" style="justify-content: space-between;">
+        <div>
+          <div class="card-title">Tool Access</div>
+          <div class="card-sub">
+            Profile + per-tool overrides for this agent.
+            <span class="mono">${enabledCount}/${toolIds.length}</span> enabled.
+          </div>
+        </div>
+        <div class="row" style="gap: 8px;">
+          <button class="btn btn--sm" ?disabled=${!editable} @click=${() => updateAll(true)}>
+            Enable All
+          </button>
+          <button class="btn btn--sm" ?disabled=${!editable} @click=${() => updateAll(false)}>
+            Disable All
+          </button>
+          <button class="btn btn--sm" ?disabled=${params.configLoading} @click=${params.onConfigReload}>
+            Reload Config
+          </button>
+          <button
+            class="btn btn--sm primary"
+            ?disabled=${params.configSaving || !params.configDirty}
+            @click=${params.onConfigSave}
+          >
+            ${params.configSaving ? "Saving…" : "Save"}
+          </button>
+        </div>
+      </div>
+
+      ${
+        params.toolsCatalogError
+          ? html`
+              <div class="callout warn" style="margin-top: 12px">
+                Could not load runtime tool catalog. Showing fallback list.
+              </div>
+            `
+          : nothing
+      }
+      ${
+        !params.configForm
+          ? html`
+              <div class="callout info" style="margin-top: 12px">
+                Load the gateway config to adjust tool profiles.
+              </div>
+            `
+          : nothing
+      }
+      ${
+        hasAgentAllow
+          ? html`
+              <div class="callout info" style="margin-top: 12px">
+                This agent is using an explicit allowlist in config. Tool overrides are managed in the Config tab.
+              </div>
+            `
+          : nothing
+      }
+      ${
+        hasGlobalAllow
+          ? html`
+              <div class="callout info" style="margin-top: 12px">
+                Global tools.allow is set. Agent overrides cannot enable tools that are globally blocked.
+              </div>
+            `
+          : nothing
+      }
+
+      <div class="agent-tools-meta" style="margin-top: 16px;">
+        <div class="agent-kv">
+          <div class="label">Profile</div>
+          <div class="mono">${profile}</div>
+        </div>
+        <div class="agent-kv">
+          <div class="label">Source</div>
+          <div>${profileSource}</div>
+        </div>
+        ${
+          params.configDirty
+            ? html`
+                <div class="agent-kv">
+                  <div class="label">Status</div>
+                  <div class="mono">unsaved</div>
+                </div>
+              `
+            : nothing
+        }
+      </div>
+
+      <div class="agent-tools-presets" style="margin-top: 16px;">
+        <div class="label">Quick Presets</div>
+        <div class="agent-tools-buttons">
+          ${profileOptions.map(
+            (option) => html`
+              <button
+                class="btn btn--sm ${profile === option.id ? "active" : ""}"
+                ?disabled=${!editable}
+                @click=${() => params.onProfileChange(params.agentId, option.id, true)}
+              >
+                ${option.label}
+              </button>
+            `,
+          )}
+          <button
+            class="btn btn--sm"
+            ?disabled=${!editable}
+            @click=${() => params.onProfileChange(params.agentId, null, false)}
+          >
+            Inherit
+          </button>
+        </div>
+      </div>
+
+      <div class="agent-tools-grid" style="margin-top: 20px;">
+        ${sections.map(
+          (section) =>
+            html`
+              <div class="agent-tools-section">
+                <div class="agent-tools-header">
+                  ${section.label}
+                  ${
+                    "source" in section && section.source === "plugin"
+                      ? html`
+                          <span class="mono" style="margin-left: 6px">plugin</span>
+                        `
+                      : nothing
+                  }
+                </div>
+                <div class="agent-tools-list">
+                  ${section.tools.map((tool) => {
+                    const { allowed } = resolveAllowed(tool.id);
+                    const catalogTool = tool as {
+                      source?: "core" | "plugin";
+                      pluginId?: string;
+                      optional?: boolean;
+                    };
+                    const source =
+                      catalogTool.source === "plugin"
+                        ? catalogTool.pluginId
+                          ? `plugin:${catalogTool.pluginId}`
+                          : "plugin"
+                        : "core";
+                    const isOptional = catalogTool.optional === true;
+                    return html`
+                      <div class="agent-tool-row">
+                        <div>
+                          <div class="agent-tool-title mono">
+                            ${tool.label}
+                            <span class="mono" style="margin-left: 8px; opacity: 0.8;">${source}</span>
+                            ${
+                              isOptional
+                                ? html`
+                                    <span class="mono" style="margin-left: 6px; opacity: 0.8">optional</span>
+                                  `
+                                : nothing
+                            }
+                          </div>
+                          <div class="agent-tool-sub">${tool.description}</div>
+                        </div>
+                        <label class="cfg-toggle">
+                          <input
+                            type="checkbox"
+                            .checked=${allowed}
+                            ?disabled=${!editable}
+                            @change=${(e: Event) =>
+                              updateTool(tool.id, (e.target as HTMLInputElement).checked)}
+                          />
+                          <span class="cfg-toggle__track"></span>
+                        </label>
+                      </div>
+                    `;
+                  })}
+                </div>
+              </div>
+            `,
+        )}
+      </div>
+      ${
+        params.toolsCatalogLoading
+          ? html`
+              <div class="card-sub" style="margin-top: 10px">Refreshing tool catalog…</div>
+            `
+          : nothing
+      }
+    </section>
+  `;
+}
+
+export function renderAgentSkills(params: {
+  agentId: string;
+  report: SkillStatusReport | null;
+  loading: boolean;
+  error: string | null;
+  activeAgentId: string | null;
+  configForm: Record<string, unknown> | null;
+  configLoading: boolean;
+  configSaving: boolean;
+  configDirty: boolean;
+  filter: string;
+  onFilterChange: (next: string) => void;
+  onRefresh: () => void;
+  onToggle: (agentId: string, skillName: string, enabled: boolean) => void;
+  onClear: (agentId: string) => void;
+  onDisableAll: (agentId: string) => void;
+  onConfigReload: () => void;
+  onConfigSave: () => void;
+}) {
+  const editable = Boolean(params.configForm) && !params.configLoading && !params.configSaving;
+  const config = resolveAgentConfig(params.configForm, params.agentId);
+  const allowlist = Array.isArray(config.entry?.skills) ? config.entry?.skills : undefined;
+  const allowSet = new Set((allowlist ?? []).map((name) => name.trim()).filter(Boolean));
+  const usingAllowlist = allowlist !== undefined;
+  const reportReady = Boolean(params.report && params.activeAgentId === params.agentId);
+  const rawSkills = reportReady ? (params.report?.skills ?? []) : [];
+  const filter = params.filter.trim().toLowerCase();
+  const filtered = filter
+    ? rawSkills.filter((skill) =>
+        [skill.name, skill.description, skill.source].join(" ").toLowerCase().includes(filter),
+      )
+    : rawSkills;
+  const groups = groupSkills(filtered);
+  const enabledCount = usingAllowlist
+    ? rawSkills.filter((skill) => allowSet.has(skill.name)).length
+    : rawSkills.length;
+  const totalCount = rawSkills.length;
+
+  return html`
+    <section class="card">
+      <div class="row" style="justify-content: space-between;">
+        <div>
+          <div class="card-title">Skills</div>
+          <div class="card-sub">
+            Per-agent skill allowlist and workspace skills.
+            ${
+              totalCount > 0
+                ? html`<span class="mono">${enabledCount}/${totalCount}</span>`
+                : nothing
+            }
+          </div>
+        </div>
+        <div class="row" style="gap: 8px;">
+          <button class="btn btn--sm" ?disabled=${!editable} @click=${() => params.onClear(params.agentId)}>
+            Use All
+          </button>
+          <button
+            class="btn btn--sm"
+            ?disabled=${!editable}
+            @click=${() => params.onDisableAll(params.agentId)}
+          >
+            Disable All
+          </button>
+          <button class="btn btn--sm" ?disabled=${params.configLoading} @click=${params.onConfigReload}>
+            Reload Config
+          </button>
+          <button class="btn btn--sm" ?disabled=${params.loading} @click=${params.onRefresh}>
+            ${params.loading ? "Loading…" : "Refresh"}
+          </button>
+          <button
+            class="btn btn--sm primary"
+            ?disabled=${params.configSaving || !params.configDirty}
+            @click=${params.onConfigSave}
+          >
+            ${params.configSaving ? "Saving…" : "Save"}
+          </button>
+        </div>
+      </div>
+
+      ${
+        !params.configForm
+          ? html`
+              <div class="callout info" style="margin-top: 12px">
+                Load the gateway config to set per-agent skills.
+              </div>
+            `
+          : nothing
+      }
+      ${
+        usingAllowlist
+          ? html`
+              <div class="callout info" style="margin-top: 12px">This agent uses a custom skill allowlist.</div>
+            `
+          : html`
+              <div class="callout info" style="margin-top: 12px">
+                All skills are enabled. Disabling any skill will create a per-agent allowlist.
+              </div>
+            `
+      }
+      ${
+        !reportReady && !params.loading
+          ? html`
+              <div class="callout info" style="margin-top: 12px">
+                Load skills for this agent to view workspace-specific entries.
+              </div>
+            `
+          : nothing
+      }
+      ${
+        params.error
+          ? html`<div class="callout danger" style="margin-top: 12px;">${params.error}</div>`
+          : nothing
+      }
+
+      <div class="filters" style="margin-top: 14px;">
+        <label class="field" style="flex: 1;">
+          <span>Filter</span>
+          <input
+            .value=${params.filter}
+            @input=${(e: Event) => params.onFilterChange((e.target as HTMLInputElement).value)}
+            placeholder="Search skills"
+          />
+        </label>
+        <div class="muted">${filtered.length} shown</div>
+      </div>
+
+      ${
+        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) =>
+                  renderAgentSkillGroup(group, {
+                    agentId: params.agentId,
+                    allowSet,
+                    usingAllowlist,
+                    editable,
+                    onToggle: params.onToggle,
+                  }),
+                )}
+              </div>
+            `
+      }
+    </section>
+  `;
+}
+
+function renderAgentSkillGroup(
+  group: SkillGroup,
+  params: {
+    agentId: string;
+    allowSet: Set<string>;
+    usingAllowlist: boolean;
+    editable: boolean;
+    onToggle: (agentId: string, skillName: string, enabled: boolean) => void;
+  },
+) {
+  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) =>
+          renderAgentSkillRow(skill, {
+            agentId: params.agentId,
+            allowSet: params.allowSet,
+            usingAllowlist: params.usingAllowlist,
+            editable: params.editable,
+            onToggle: params.onToggle,
+          }),
+        )}
+      </div>
+    </details>
+  `;
+}
+
+function renderAgentSkillRow(
+  skill: SkillStatusEntry,
+  params: {
+    agentId: string;
+    allowSet: Set<string>;
+    usingAllowlist: boolean;
+    editable: boolean;
+    onToggle: (agentId: string, skillName: string, enabled: boolean) => void;
+  },
+) {
+  const enabled = params.usingAllowlist ? params.allowSet.has(skill.name) : true;
+  const missing = computeSkillMissing(skill);
+  const reasons = computeSkillReasons(skill);
+  return html`
+    <div class="list-item agent-skill-row">
+      <div class="list-main">
+        <div class="list-title">${skill.emoji ? `${skill.emoji} ` : ""}${skill.name}</div>
+        <div class="list-sub">${skill.description}</div>
+        ${renderSkillStatusChips({ skill })}
+        ${
+          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">
+        <label class="cfg-toggle">
+          <input
+            type="checkbox"
+            .checked=${enabled}
+            ?disabled=${!params.editable}
+            @change=${(e: Event) =>
+              params.onToggle(params.agentId, skill.name, (e.target as HTMLInputElement).checked)}
+          />
+          <span class="cfg-toggle__track"></span>
+        </label>
+      </div>
+    </div>
+  `;
+}

package/ui/src/ui/views/agents-utils.test.ts

@@ -0,0 +1,100 @@
+import { describe, expect, it } from "vitest";
+import {
+  resolveConfiguredCronModelSuggestions,
+  resolveEffectiveModelFallbacks,
+  sortLocaleStrings,
+} from "./agents-utils.ts";
+
+describe("resolveEffectiveModelFallbacks", () => {
+  it("inherits defaults when no entry fallbacks are configured", () => {
+    const entryModel = undefined;
+    const defaultModel = {
+      primary: "openai/gpt-5-nano",
+      fallbacks: ["google/gemini-2.0-flash"],
+    };
+
+    expect(resolveEffectiveModelFallbacks(entryModel, defaultModel)).toEqual([
+      "google/gemini-2.0-flash",
+    ]);
+  });
+
+  it("prefers entry fallbacks over defaults", () => {
+    const entryModel = {
+      primary: "openai/gpt-5-mini",
+      fallbacks: ["openai/gpt-5-nano"],
+    };
+    const defaultModel = {
+      primary: "openai/gpt-5",
+      fallbacks: ["google/gemini-2.0-flash"],
+    };
+
+    expect(resolveEffectiveModelFallbacks(entryModel, defaultModel)).toEqual(["openai/gpt-5-nano"]);
+  });
+
+  it("keeps explicit empty entry fallback lists", () => {
+    const entryModel = {
+      primary: "openai/gpt-5-mini",
+      fallbacks: [],
+    };
+    const defaultModel = {
+      primary: "openai/gpt-5",
+      fallbacks: ["google/gemini-2.0-flash"],
+    };
+
+    expect(resolveEffectiveModelFallbacks(entryModel, defaultModel)).toEqual([]);
+  });
+});
+
+describe("resolveConfiguredCronModelSuggestions", () => {
+  it("collects defaults primary/fallbacks, alias map keys, and per-agent model entries", () => {
+    const result = resolveConfiguredCronModelSuggestions({
+      agents: {
+        defaults: {
+          model: {
+            primary: "openai/gpt-5.2",
+            fallbacks: ["google/gemini-2.5-pro", "openai/gpt-5.2-mini"],
+          },
+          models: {
+            "anthropic/claude-sonnet-4-5": { alias: "smart" },
+            "openai/gpt-5.2": { alias: "main" },
+          },
+        },
+        list: {
+          writer: {
+            model: { primary: "xai/grok-4", fallbacks: ["openai/gpt-5.2-mini"] },
+          },
+          planner: {
+            model: "google/gemini-2.5-flash",
+          },
+        },
+      },
+    });
+
+    expect(result).toEqual([
+      "anthropic/claude-sonnet-4-5",
+      "google/gemini-2.5-flash",
+      "google/gemini-2.5-pro",
+      "openai/gpt-5.2",
+      "openai/gpt-5.2-mini",
+      "xai/grok-4",
+    ]);
+  });
+
+  it("returns empty array for invalid or missing config shape", () => {
+    expect(resolveConfiguredCronModelSuggestions(null)).toEqual([]);
+    expect(resolveConfiguredCronModelSuggestions({})).toEqual([]);
+    expect(resolveConfiguredCronModelSuggestions({ agents: { defaults: { model: "" } } })).toEqual(
+      [],
+    );
+  });
+});
+
+describe("sortLocaleStrings", () => {
+  it("sorts values using localeCompare without relying on Array.prototype.toSorted", () => {
+    expect(sortLocaleStrings(["z", "b", "a"])).toEqual(["a", "b", "z"]);
+  });
+
+  it("accepts any iterable input, including sets", () => {
+    expect(sortLocaleStrings(new Set(["beta", "alpha"]))).toEqual(["alpha", "beta"]);
+  });
+});