@chrysb/alphaclaw 0.6.1 → 0.6.2-beta.0

package/lib/public/js/components/action-button.js

@@ -72,19 +72,21 @@ export const ActionButton = ({
           : "opacity-80"
       }`
     : "";
-  const spinnerSizeClass = size === "md" || size === "lg" ? "h-4 w-4" : "h-3 w-3";
+  const spinnerSizeClass =
+    size === "md" || size === "lg" ? "h-4 w-4" : "h-3 w-3";
   const isInlineLoading = loadingMode === "inline";
   const IdleIcon = idleIcon;
-  const idleContent = iconOnly && IdleIcon
-    ? html`<${IdleIcon} className=${idleIconClassName} />`
-    : IdleIcon
-    ? html`
-        <span class="inline-flex items-center gap-1.5 leading-none">
-          <${IdleIcon} className=${idleIconClassName} />
-          ${idleLabel}
-        </span>
-      `
-    : idleLabel;
+  const idleContent =
+    iconOnly && IdleIcon
+      ? html`<${IdleIcon} className=${idleIconClassName} />`
+      : IdleIcon
+        ? html`
+            <span class="inline-flex items-center gap-1.5 leading-none">
+              <${IdleIcon} className=${idleIconClassName} />
+              ${idleLabel}
+            </span>
+          `
+        : idleLabel;
   const currentLabel = loading && !isInlineLoading ? loadingLabel : idleContent;
 
   return html`
@@ -98,11 +100,15 @@ export const ActionButton = ({
     >
       ${isInlineLoading
         ? html`
-            <span class="relative inline-flex items-center justify-center leading-none">
+            <span
+              class="relative inline-flex items-center justify-center leading-none"
+            >
               <span class=${loading ? "invisible" : ""}>${currentLabel}</span>
               ${loading
                 ? html`
-                    <span class="absolute inset-0 inline-flex items-center justify-center">
+                    <span
+                      class="absolute inset-0 inline-flex items-center justify-center"
+                    >
                       <${LoadingSpinner} className=${spinnerSizeClass} />
                     </span>
                   `
@@ -110,13 +116,13 @@ export const ActionButton = ({
             </span>
           `
         : loading
-        ? html`
-            <span class="inline-flex items-center gap-1.5 leading-none">
-              <${LoadingSpinner} className=${spinnerSizeClass} />
-              ${currentLabel}
-            </span>
-          `
-        : currentLabel}
+          ? html`
+              <span class="inline-flex items-center gap-1.5 leading-none">
+                <${LoadingSpinner} className=${spinnerSizeClass} />
+                ${currentLabel}
+              </span>
+            `
+          : currentLabel}
     </button>
   `;
 };

package/lib/public/js/components/agents-tab/agent-detail-panel.js

@@ -1,22 +1,69 @@
 import { h } from "https://esm.sh/preact";
+import { useState, useCallback } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { ActionButton } from "../action-button.js";
 import { Badge } from "../badge.js";
+import { PillTabs } from "../pill-tabs.js";
+import { PopActions } from "../pop-actions.js";
 import { AgentOverview } from "./agent-overview/index.js";
+import { AgentToolsPanel } from "./agent-tools/index.js";
+import { useAgentTools } from "./agent-tools/use-agent-tools.js";
 
 const html = htm.bind(h);
 
+const kDetailTabs = [
+  { label: "Overview", value: "overview" },
+  { label: "Tools", value: "tools" },
+];
+
+const PencilIcon = ({ className = "w-3.5 h-3.5" }) => html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    class=${className}
+  >
+    <path
+      d="M15.7279 9.57627L14.3137 8.16206L5 17.4758V18.89H6.41421L15.7279 9.57627ZM17.1421 8.16206L18.5563 6.74785L17.1421 5.33363L15.7279 6.74785L17.1421 8.16206ZM7.24264 20.89H3V16.6473L16.435 3.21231C16.8256 2.82179 17.4587 2.82179 17.8492 3.21231L20.6777 6.04074C21.0682 6.43126 21.0682 7.06443 20.6777 7.45495L7.24264 20.89Z"
+    />
+  </svg>
+`;
+
 export const AgentDetailPanel = ({
   agent = null,
   agents = [],
+  activeTab = "overview",
   saving = false,
   onUpdateAgent = async () => {},
   onSetLocation = () => {},
+  onSelectTab = () => {},
   onEdit = () => {},
   onDelete = () => {},
   onSetDefault = () => {},
   onOpenWorkspace = () => {},
 }) => {
+  const tools = useAgentTools({ agent: agent || {} });
+  const [savingTools, setSavingTools] = useState(false);
+
+  const handleSaveTools = useCallback(async () => {
+    if (!agent) return;
+    setSavingTools(true);
+    try {
+      const nextAgent = await onUpdateAgent(
+        agent.id,
+        { tools: tools.toolsConfig },
+        "Tool access updated",
+      );
+      tools.markSaved(nextAgent?.tools || tools.toolsConfig);
+    } catch {
+      // toast handled by parent
+    } finally {
+      setSavingTools(false);
+    }
+  }, [agent, tools.toolsConfig, tools.markSaved, onUpdateAgent]);
+
+  const isSaving = saving || savingTools;
+
   if (!agent) {
     return html`
       <div class="agents-detail-panel">
@@ -32,10 +79,18 @@ export const AgentDetailPanel = ({
       <div class="agents-detail-inner">
         <div class="agents-detail-header">
           <div class="min-w-0">
-            <div class="flex items-center gap-3 min-w-0">
+            <div class="flex items-center gap-2 min-w-0">
               <span class="agents-detail-header-title">
                 ${agent.name || agent.id}
               </span>
+              <button
+                type="button"
+                class="text-gray-500 hover:text-gray-300 transition-colors p-0.5 -ml-0.5"
+                onclick=${() => onEdit(agent)}
+                title="Edit agent name"
+              >
+                <${PencilIcon} />
+              </button>
               ${agent.default
                 ? html`<${Badge} tone="cyan">Default</${Badge}>`
                 : null}
@@ -44,29 +99,55 @@ export const AgentDetailPanel = ({
               <span class="font-mono">${agent.id}</span>
             </div>
           </div>
-          <div class="flex items-start gap-2 shrink-0">
+          <${PopActions} visible=${tools.dirty}>
             <${ActionButton}
-              onClick=${() => onEdit(agent)}
-              disabled=${saving}
+              onClick=${tools.reset}
+              disabled=${isSaving}
               tone="secondary"
               size="sm"
-              idleLabel="Edit"
+              idleLabel="Cancel"
               className="text-xs"
             />
-          </div>
+            <${ActionButton}
+              onClick=${handleSaveTools}
+              disabled=${isSaving}
+              loading=${isSaving}
+              loadingMode="inline"
+              tone="primary"
+              size="sm"
+              idleLabel="Save changes"
+              loadingLabel="Saving…"
+              className="text-xs"
+            />
+          </${PopActions}>
         </div>
+        <${PillTabs}
+          tabs=${kDetailTabs}
+          activeTab=${activeTab}
+          onSelectTab=${onSelectTab}
+          className="flex items-center gap-2 pt-6"
+        />
         <div class="agents-detail-content">
-          <${AgentOverview}
-            agent=${agent}
-            agents=${agents}
-            saving=${saving}
-            onUpdateAgent=${onUpdateAgent}
-            onSetLocation=${onSetLocation}
-            onOpenWorkspace=${onOpenWorkspace}
-            onSwitchToModels=${() => onSetLocation("/models")}
-            onSetDefault=${onSetDefault}
-            onDelete=${onDelete}
-          />
+          ${activeTab === "overview"
+            ? html`
+                <${AgentOverview}
+                  agent=${agent}
+                  agents=${agents}
+                  saving=${saving}
+                  onUpdateAgent=${onUpdateAgent}
+                  onSetLocation=${onSetLocation}
+                  onOpenWorkspace=${onOpenWorkspace}
+                  onSwitchToModels=${() => onSetLocation("/models")}
+                  onSetDefault=${onSetDefault}
+                  onDelete=${onDelete}
+                />
+              `
+            : html`
+                <${AgentToolsPanel}
+                  agent=${agent}
+                  tools=${tools}
+                />
+              `}
         </div>
       </div>
     </div>

package/lib/public/js/components/agents-tab/agent-tools/index.js

@@ -0,0 +1,105 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { ToggleSwitch } from "../../toggle-switch.js";
+import { InfoTooltip } from "../../info-tooltip.js";
+import { SegmentedControl } from "../../segmented-control.js";
+import { kSections, kToolProfiles, kProfileLabels } from "./tool-catalog.js";
+
+const html = htm.bind(h);
+
+const kProfileDescriptions = {
+  minimal: "Only session status — grant specific tools with alsoAllow",
+  messaging: "Session access and messaging — ideal for notification agents",
+  coding: "File I/O, shell, memory, sessions, cron, and image generation",
+  full: "All tools enabled, no restrictions",
+};
+
+const kProfileOptions = kToolProfiles.map((p) => ({
+  label: kProfileLabels[p],
+  value: p,
+  title: kProfileDescriptions[p],
+}));
+
+const ToolRow = ({ tool, onToggle }) => html`
+  <div class="flex items-center justify-between gap-3 py-2.5 px-4">
+    <div class="min-w-0">
+      <div class="text-sm text-gray-200 flex items-center gap-1.5">
+        <span>${tool.label}</span>
+        ${tool.help
+          ? html`<${InfoTooltip} text=${tool.help} widthClass="w-72" />`
+          : null}
+      </div>
+      <span class="text-xs font-mono text-gray-500">${tool.id}</span>
+    </div>
+    <${ToggleSwitch}
+      checked=${tool.enabled}
+      onChange=${(checked) => onToggle(tool.id, checked)}
+      label=${null}
+    />
+  </div>
+`;
+
+const ToolSection = ({ section, toolStates, onToggle }) => {
+  const sectionTools = toolStates.filter((t) => t.section === section.id);
+  if (!sectionTools.length) return null;
+
+  return html`
+    <div class="bg-surface border border-border rounded-xl overflow-hidden">
+      <h3 class="card-label text-xs px-4 pt-3 pb-2">${section.label}</h3>
+      <div class="divide-y divide-border">
+        ${sectionTools.map(
+          (tool) =>
+            html`<${ToolRow}
+              key=${tool.id}
+              tool=${tool}
+              onToggle=${onToggle}
+            />`,
+        )}
+      </div>
+    </div>
+  `;
+};
+
+export const AgentToolsPanel = ({ agent = {}, tools = {} }) => {
+  const { profile, toolStates, setProfile, toggleTool } = tools;
+
+  const enabledTotal = (toolStates || []).filter((t) => t.enabled).length;
+  const totalTools = (toolStates || []).length;
+
+  return html`
+    <div class="space-y-4">
+      <div class="bg-surface border border-border rounded-xl p-4 space-y-4">
+        <div>
+          <div class="flex items-center justify-between mb-3">
+            <h3 class="card-label text-xs">Preset</h3>
+            <span class="text-xs text-gray-500"
+              >${enabledTotal}/${totalTools} tools enabled</span
+            >
+          </div>
+          <${SegmentedControl}
+            options=${kProfileOptions}
+            value=${profile}
+            onChange=${setProfile}
+            fullWidth
+            className="ac-segmented-control-dark"
+          />
+        </div>
+      </div>
+
+      <div style="columns: 2; column-gap: 0.75rem;">
+        ${kSections.map(
+          (section) => html`
+            <div style="break-inside: avoid; margin-bottom: 0.75rem;">
+              <${ToolSection}
+                key=${section.id}
+                section=${section}
+                toolStates=${toolStates || []}
+                onToggle=${toggleTool}
+              />
+            </div>
+          `,
+        )}
+      </div>
+    </div>
+  `;
+};

package/lib/public/js/components/agents-tab/agent-tools/tool-catalog.js

@@ -0,0 +1,289 @@
+/**
+ * Static tool catalog mirroring OpenClaw's tool-catalog.ts.
+ * Grouped and labeled for the AlphaClaw Setup UI.
+ */
+
+export const kToolProfiles = ["minimal", "messaging", "coding", "full"];
+
+export const kProfileLabels = {
+  minimal: "Minimal",
+  messaging: "Messaging",
+  coding: "Coding",
+  full: "Full",
+};
+
+const kTools = [
+  {
+    id: "read",
+    label: "Read files",
+    profiles: ["coding"],
+    section: "filesystem",
+  },
+  {
+    id: "edit",
+    label: "Edit files",
+    profiles: ["coding"],
+    section: "filesystem",
+  },
+  {
+    id: "write",
+    label: "Write files",
+    profiles: ["coding"],
+    section: "filesystem",
+  },
+  {
+    id: "apply_patch",
+    label: "Apply patches",
+    help: "Make targeted patch edits, mainly for OpenAI-compatible patch workflows.",
+    profiles: ["coding"],
+    section: "filesystem",
+  },
+  {
+    id: "exec",
+    label: "Run commands",
+    help: "Execute shell commands inside the agent environment.",
+    profiles: ["coding"],
+    section: "execution",
+  },
+  {
+    id: "process",
+    label: "Manage processes",
+    help: "Inspect and control long-running background processes.",
+    profiles: ["coding"],
+    section: "execution",
+  },
+  {
+    id: "message",
+    label: "Send messages",
+    help: "Send outbound messages through configured messaging channels.",
+    profiles: ["messaging"],
+    section: "communication",
+  },
+  {
+    id: "tts",
+    label: "Text-to-speech",
+    help: "Convert text responses into generated speech audio.",
+    profiles: [],
+    section: "communication",
+  },
+  {
+    id: "browser",
+    label: "Control browser",
+    help: "Drive a browser for page navigation and interactive web tasks.",
+    profiles: [],
+    section: "web",
+  },
+  {
+    id: "web_search",
+    label: "Search the web",
+    help: "Run web searches to discover external information.",
+    profiles: [],
+    section: "web",
+  },
+  {
+    id: "web_fetch",
+    label: "Fetch URLs",
+    help: "Fetch and read webpage content from a specific URL.",
+    profiles: [],
+    section: "web",
+  },
+  {
+    id: "memory_search",
+    label: "Semantic search",
+    help: "Search memory semantically to find related notes and prior context.",
+    profiles: ["coding"],
+    section: "memory",
+  },
+  {
+    id: "memory_get",
+    label: "Read memories",
+    help: "Read stored memory files and saved context entries.",
+    profiles: ["coding"],
+    section: "memory",
+  },
+  {
+    id: "agents_list",
+    label: "List agents",
+    help: "List known agent IDs that can be targeted in multi-agent flows.",
+    profiles: [],
+    section: "multiagent",
+  },
+  {
+    id: "sessions_spawn",
+    label: "Spawn sessions",
+    help: "Start a new background session/run; this is the base primitive used by sub-agent workflows.",
+    profiles: ["coding"],
+    section: "multiagent",
+  },
+  {
+    id: "sessions_send",
+    label: "Send to session",
+    help: "Send messages or tasks into an existing running session.",
+    profiles: ["coding", "messaging"],
+    section: "multiagent",
+  },
+  {
+    id: "sessions_list",
+    label: "List sessions",
+    help: "List active or recent sessions available to the agent.",
+    profiles: ["coding", "messaging"],
+    section: "multiagent",
+  },
+  {
+    id: "sessions_history",
+    label: "Session history",
+    help: "Read the transcript and prior exchanges from a session.",
+    profiles: ["coding", "messaging"],
+    section: "multiagent",
+  },
+  {
+    id: "session_status",
+    label: "Session status",
+    help: "Check whether a session is running and inspect runtime health/state.",
+    profiles: ["minimal", "coding", "messaging"],
+    section: "multiagent",
+  },
+  {
+    id: "subagents",
+    label: "Sub-agents",
+    help: "Launch specialized delegated agents (higher-level orchestration built on session spawning).",
+    profiles: ["coding"],
+    section: "multiagent",
+  },
+  {
+    id: "cron",
+    label: "Scheduled jobs",
+    help: "Create and manage scheduled automation jobs.",
+    profiles: ["coding"],
+    section: "scheduling",
+  },
+  {
+    id: "gateway",
+    label: "Gateway control",
+    help: "Inspect and control the running Gateway service (status, health, and control actions like restart).",
+    profiles: [],
+    section: "scheduling",
+  },
+  {
+    id: "image",
+    label: "Generate images",
+    help: "Generate or analyze images with image-capable model tools.",
+    profiles: ["coding"],
+    section: "creative",
+  },
+  {
+    id: "canvas",
+    label: "Visual canvas",
+    help: "Control the Canvas panel (present, navigate, eval, snapshot). Primarily a macOS app capability when a canvas-capable node is connected.",
+    profiles: [],
+    section: "creative",
+  },
+  {
+    id: "nodes",
+    label: "Node workflows",
+    help: "Use paired device/node capabilities (for example canvas, camera, notifications, and system actions).",
+    profiles: [],
+    section: "creative",
+  },
+];
+
+export const kSections = [
+  {
+    id: "filesystem",
+    label: "Filesystem",
+    description: "Read, edit, and write files",
+  },
+  {
+    id: "execution",
+    label: "Execution",
+    description: "Run shell commands and scripts",
+  },
+  {
+    id: "communication",
+    label: "Communication",
+    description: "Send messages across Telegram, Slack, Discord",
+  },
+  {
+    id: "web",
+    label: "Web & Browser",
+    description: "Browse pages, search the web, fetch URLs",
+  },
+  {
+    id: "memory",
+    label: "Memory",
+    description:
+      "Semantic search and retrieval across the agent's stored knowledge",
+  },
+  {
+    id: "multiagent",
+    label: "Multi-Agent",
+    description:
+      "List agents, spawn sessions, send messages between agents. Orchestrate sub-agents.",
+  },
+  {
+    id: "scheduling",
+    label: "Scheduling",
+    description: "Create and manage scheduled jobs",
+  },
+  {
+    id: "creative",
+    label: "Creative",
+    description: "Generate images, visual canvas, node-based workflows",
+  },
+];
+
+export const getToolsForSection = (sectionId) =>
+  kTools.filter((t) => t.section === sectionId);
+
+export const getAllToolIds = () => kTools.map((t) => t.id);
+
+export const getProfileToolIds = (profileId) => {
+  if (profileId === "full") return kTools.map((t) => t.id);
+  return kTools.filter((t) => t.profiles.includes(profileId)).map((t) => t.id);
+};
+
+/**
+ * Given a profile + alsoAllow + deny, resolve whether each tool is enabled.
+ */
+export const resolveToolStates = ({
+  profile = "full",
+  alsoAllow = [],
+  deny = [],
+}) => {
+  const profileTools = new Set(getProfileToolIds(profile));
+  const alsoAllowSet = new Set(alsoAllow);
+  const denySet = new Set(deny);
+
+  return kTools.map((tool) => {
+    const inProfile = profileTools.has(tool.id);
+    const isDenied = denySet.has(tool.id);
+    const isAlsoAllowed = alsoAllowSet.has(tool.id);
+    const enabled = isDenied ? false : inProfile || isAlsoAllowed;
+
+    return { ...tool, enabled, inProfile, isDenied, isAlsoAllowed };
+  });
+};
+
+/**
+ * Derive the minimal tools config from the resolved tool states
+ * relative to the selected profile.
+ */
+export const deriveToolsConfig = ({ profile, toolStates }) => {
+  const profileTools = new Set(getProfileToolIds(profile));
+  const alsoAllow = [];
+  const deny = [];
+
+  for (const tool of toolStates) {
+    const inProfile = profileTools.has(tool.id);
+    if (tool.enabled && !inProfile) {
+      alsoAllow.push(tool.id);
+    } else if (!tool.enabled && inProfile) {
+      deny.push(tool.id);
+    }
+  }
+
+  const config = { profile };
+  if (alsoAllow.length) config.alsoAllow = alsoAllow;
+  if (deny.length) config.deny = deny;
+  return config;
+};