@chrysb/alphaclaw 0.6.1 → 0.6.2-beta.1

package/lib/public/js/app.js

@@ -16,6 +16,7 @@ import { AppSidebar } from "./components/sidebar.js";
 import {
   AgentsRoute,
   BrowseRoute,
+  CronRoute,
   DoctorRoute,
   EnvarsRoute,
   GeneralRoute,
@@ -75,10 +76,20 @@ const App = () => {
   } = useAgents();
 
   const isAgentsRoute = location.startsWith("/agents");
+  const isCronRoute = location.startsWith("/cron");
   const selectedAgentId = (() => {
     const match = location.match(/^\/agents\/([^/]+)/);
     return match ? decodeURIComponent(match[1]) : "";
   })();
+  const agentDetailTab = (() => {
+    const match = location.match(/^\/agents\/[^/]+\/([^/]+)/);
+    const tab = match ? match[1] : "";
+    return tab === "tools" ? "tools" : "overview";
+  })();
+  const selectedCronJobId = (() => {
+    const match = location.match(/^\/cron\/([^/]+)/);
+    return match ? decodeURIComponent(match[1]) : "";
+  })();
 
   useEffect(() => {
     if (!isAgentsRoute) return;
@@ -233,15 +244,31 @@ const App = () => {
             saving=${agentsState.saving}
             agentsActions=${agentsActions}
             selectedAgentId=${selectedAgentId}
+            activeTab=${agentDetailTab}
             onSelectAgent=${(agentId) => setLocation(`/agents/${encodeURIComponent(agentId)}`)}
+            onSelectTab=${(tab) => {
+              const safePath = tab && tab !== "overview"
+                ? `/agents/${encodeURIComponent(selectedAgentId)}/${tab}`
+                : `/agents/${encodeURIComponent(selectedAgentId)}`;
+              setLocation(safePath);
+            }}
             onNavigateToBrowseFile=${browseActions.navigateToBrowseFile}
             onSetLocation=${setLocation}
           />
         </div>
+        <div
+          class="app-content-pane cron-pane"
+          style=${{ display: isCronRoute ? "block" : "none" }}
+        >
+          <${CronRoute}
+            jobId=${selectedCronJobId}
+            onSetLocation=${setLocation}
+          />
+        </div>
         <div
           class="app-content-pane"
           onscroll=${shellActions.handlePaneScroll}
-          style=${{ display: browseState.isBrowseRoute || isAgentsRoute ? "none" : "block" }}
+          style=${{ display: browseState.isBrowseRoute || isAgentsRoute || isCronRoute ? "none" : "block" }}
         >
           <div
             class=${`mobile-topbar ${shellState.mobileTopbarScrolled ? "is-scrolled" : ""}`}
@@ -269,7 +296,7 @@ const App = () => {
             </span>
           </div>
           <div class="max-w-2xl w-full mx-auto">
-            ${!browseState.isBrowseRoute && !isAgentsRoute
+            ${!browseState.isBrowseRoute && !isAgentsRoute && !isCronRoute
               ? html`
                   <${Switch}>
                     <${Route} path="/general">
@@ -408,11 +435,19 @@ const App = () => {
   `;
 };
 
-render(
-  html`
-    <${Router} hook=${useHashLocation}>
-      <${App} />
-    </${Router}>
-  `,
-  document.getElementById("app"),
-);
+const rootElement = document.getElementById("app");
+if (rootElement) {
+  const appBootCounter = "__alphaclawSetupAppBootCount";
+  window[appBootCounter] = Number(window[appBootCounter] || 0) + 1;
+  // Defensive: clear root so duplicate bootstraps cannot stack full app shells.
+  render(null, rootElement);
+  rootElement.replaceChildren();
+  render(
+    html`
+      <${Router} hook=${useHashLocation}>
+        <${App} />
+      </${Router}>
+    `,
+    rootElement,
+  );
+}

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>
+  `;
+};