@chrysb/alphaclaw 0.5.6 → 0.5.7-beta.0

package/lib/public/js/components/overflow-menu.js

@@ -0,0 +1,122 @@
+import { h } from "https://esm.sh/preact";
+import { useEffect, useRef } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+
+const html = htm.bind(h);
+
+const VerticalDotsIcon = ({ className = "" }) => html`
+  <svg class=${className} width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+    <circle cx="8" cy="3" r="1.5" />
+    <circle cx="8" cy="8" r="1.5" />
+    <circle cx="8" cy="13" r="1.5" />
+  </svg>
+`;
+
+export const OverflowMenu = ({
+  open = false,
+  onToggle = () => {},
+  onClose = () => {},
+  ariaLabel = "Open menu",
+  title = "",
+  menuRef = null,
+  renderTrigger = null,
+  triggerDisabled = false,
+  children = null,
+}) => {
+  const internalMenuRef = useRef(null);
+  const setMenuNodeRef = (node) => {
+    internalMenuRef.current = node;
+    if (typeof menuRef === "function") {
+      menuRef(node);
+      return;
+    }
+    if (menuRef && typeof menuRef === "object") {
+      menuRef.current = node;
+    }
+  };
+
+  useEffect(() => {
+    if (!open) return undefined;
+    const handleWindowClick = (event) => {
+      const root = internalMenuRef.current;
+      if (!root) return;
+      if (root.contains(event.target)) return;
+      onClose(event);
+    };
+    window.addEventListener("click", handleWindowClick);
+    return () => window.removeEventListener("click", handleWindowClick);
+  }, [open, onClose]);
+
+  return html`
+  <div class="brand-menu" ref=${setMenuNodeRef}>
+    ${typeof renderTrigger === "function"
+      ? renderTrigger({
+          open,
+          onToggle: (event) => {
+            event.stopPropagation();
+            onToggle(event);
+          },
+          ariaLabel,
+          title: title || ariaLabel,
+        })
+      : html`
+          <button
+            type="button"
+            class="brand-menu-trigger"
+            aria-label=${ariaLabel}
+            aria-expanded=${open ? "true" : "false"}
+            title=${title || ariaLabel}
+            disabled=${triggerDisabled}
+            onclick=${(event) => {
+              event.stopPropagation();
+              onToggle(event);
+            }}
+          >
+            <${VerticalDotsIcon} />
+          </button>
+        `}
+    ${open
+      ? html`
+          <div class="brand-dropdown" onclick=${(event) => event.stopPropagation()}>
+            ${children}
+          </div>
+        `
+      : null}
+  </div>
+`;
+};
+
+export const OverflowMenuItem = ({
+  children = null,
+  onClick = () => {},
+  className = "",
+  iconSrc = "",
+  disabled = false,
+}) => html`
+  <button
+    type="button"
+    class=${`brand-dropdown-item ${className} ${disabled
+      ? "opacity-50 cursor-not-allowed"
+      : ""}`.trim()}
+    disabled=${disabled}
+    onclick=${(event) => {
+      event.stopPropagation();
+      if (disabled) return;
+      onClick(event);
+    }}
+  >
+    ${iconSrc
+      ? html`
+          <span class="flex w-full items-center gap-2 leading-none">
+            <img
+              src=${iconSrc}
+              alt=""
+              class="block w-4 h-4 rounded-sm"
+              aria-hidden="true"
+            />
+            <span>${children}</span>
+          </span>
+        `
+      : children}
+  </button>
+`;

package/lib/public/js/components/pairings.js

@@ -4,39 +4,45 @@ import htm from 'https://esm.sh/htm';
 import { ActionButton } from './action-button.js';
 const html = htm.bind(h);
 
-const PairingRow = ({ p, onApprove, onReject }) => {
+export const PairingRow = ({ p, onApprove, onReject }) => {
   const [busy, setBusy] = useState(null);
 
   const handle = async (action) => {
     setBusy(action);
     try {
-      if (action === "approve") await onApprove(p.id, p.channel);
-      else await onReject(p.id, p.channel);
+      if (action === "approve") await onApprove(p.id, p.channel, p.accountId);
+      else await onReject(p.id, p.channel, p.accountId);
     } catch {
       setBusy(null);
     }
   };
 
   const label = (p.channel || 'unknown').charAt(0).toUpperCase() + (p.channel || '').slice(1);
+  const accountId = String(p.accountId || "").trim();
+  const accountName = String(p.accountName || "").trim();
+  const accountSuffix =
+    accountId && accountId !== "default"
+      ? ` · ${accountName || accountId}`
+      : "";
 
   if (busy === "approve") {
     return html`
       <div class="bg-black/30 rounded-lg p-3 mb-2 flex items-center gap-2">
         <span class="text-green-400 text-sm">Approved</span>
-        <span class="text-gray-500 text-xs">${label} · ${p.code || p.id || '?'}</span>
+        <span class="text-gray-500 text-xs">${label}${accountSuffix} · ${p.code || p.id || '?'}</span>
       </div>`;
   }
   if (busy === "reject") {
     return html`
       <div class="bg-black/30 rounded-lg p-3 mb-2 flex items-center gap-2">
         <span class="text-gray-400 text-sm">Rejected</span>
-        <span class="text-gray-500 text-xs">${label} · ${p.code || p.id || '?'}</span>
+        <span class="text-gray-500 text-xs">${label}${accountSuffix} · ${p.code || p.id || '?'}</span>
       </div>`;
   }
 
   return html`
     <div class="bg-black/30 rounded-lg p-3 mb-2">
-      <div class="font-medium text-sm mb-2">${label} · <code class="text-gray-400">${p.code || p.id || '?'}</code></div>
+      <div class="font-medium text-sm mb-2">${label}${accountSuffix} · <code class="text-gray-400">${p.code || p.id || '?'}</code></div>
       <div class="flex gap-2">
         <${ActionButton}
           onClick=${() => handle("approve")}
@@ -60,11 +66,29 @@ const ALL_CHANNELS = ['telegram', 'discord'];
 
 const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
 
-export function Pairings({ pending, channels, visible, onApprove, onReject }) {
+export function Pairings({
+  pending,
+  channels,
+  visible,
+  onApprove,
+  onReject,
+  statusRefreshing = false,
+}) {
   if (!visible) return null;
 
   const unpaired = ALL_CHANNELS
-    .filter((ch) => channels?.[ch] && channels[ch].status !== 'paired')
+    .filter((ch) => {
+      const info = channels?.[ch];
+      if (!info) return false;
+      const accounts =
+        info.accounts && typeof info.accounts === "object" ? info.accounts : {};
+      if (Object.keys(accounts).length > 0) {
+        return Object.values(accounts).some(
+          (acc) => acc && acc.status !== "paired",
+        );
+      }
+      return info.status !== "paired";
+    })
     .map(capitalize);
 
   const channelList = unpaired.length <= 2
@@ -78,6 +102,10 @@ export function Pairings({ pending, channels, visible, onApprove, onReject }) {
         ? html`<div>
             ${pending.map(p => html`<${PairingRow} key=${p.id} p=${p} onApprove=${onApprove} onReject=${onReject} />`)}
           </div>`
+        : statusRefreshing
+        ? html`<div class="text-center py-4 space-y-2">
+            <p class="text-gray-300 text-sm">Updating pairing status...</p>
+          </div>`
         : html`<div class="text-center py-4 space-y-2">
             <div class="text-3xl">💬</div>
             <p class="text-gray-300 text-sm">Send a message to your bot on ${channelList}</p>

package/lib/public/js/components/routes/agents-route.js

@@ -0,0 +1,27 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { AgentsTab } from "../agents-tab/index.js";
+
+const html = htm.bind(h);
+
+export const AgentsRoute = ({
+  agents = [],
+  loading = false,
+  saving = false,
+  agentsActions = {},
+  selectedAgentId = "",
+  onSelectAgent = () => {},
+  onNavigateToBrowseFile = () => {},
+  onSetLocation = () => {},
+}) => html`
+  <${AgentsTab}
+    agents=${agents}
+    loading=${loading}
+    saving=${saving}
+    agentsActions=${agentsActions}
+    selectedAgentId=${selectedAgentId}
+    onSelectAgent=${onSelectAgent}
+    onNavigateToBrowseFile=${onNavigateToBrowseFile}
+    onSetLocation=${onSetLocation}
+  />
+`;

package/lib/public/js/components/routes/general-route.js

@@ -8,6 +8,7 @@ export const GeneralRoute = ({
   statusData = null,
   watchdogData = null,
   doctorStatusData = null,
+  agents = [],
   doctorWarningDismissedUntilMs = 0,
   onRefreshStatuses = () => {},
   onSetLocation = () => {},
@@ -26,6 +27,7 @@ export const GeneralRoute = ({
       statusData=${statusData}
       watchdogData=${watchdogData}
       doctorStatusData=${doctorStatusData}
+      agents=${agents}
       doctorWarningDismissedUntilMs=${doctorWarningDismissedUntilMs}
       onRefreshStatuses=${onRefreshStatuses}
       onSwitchTab=${(nextTab) => onSetLocation(`/${nextTab}`)}

package/lib/public/js/components/routes/index.js

@@ -1,3 +1,4 @@
+export { AgentsRoute } from "./agents-route.js";
 export { BrowseRoute } from "./browse-route.js";
 export { DoctorRoute } from "./doctor-route.js";
 export { EnvarsRoute } from "./envars-route.js";

package/lib/public/js/components/routes/telegram-route.js

@@ -4,8 +4,8 @@ import { TelegramWorkspace } from "../telegram-workspace/index.js";
 
 const html = htm.bind(h);
 
-export const TelegramRoute = ({ onBack = () => {} }) => html`
+export const TelegramRoute = ({ accountId = "default", onBack = () => {} }) => html`
   <div class="pt-4">
-    <${TelegramWorkspace} onBack=${onBack} />
+    <${TelegramWorkspace} key=${accountId} accountId=${accountId} onBack=${onBack} />
   </div>
 `;

package/lib/public/js/components/secret-input.js

@@ -1,6 +1,7 @@
 import { h } from "https://esm.sh/preact";
 import { useState } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
+import { LoadingSpinner } from "./loading-spinner.js";
 const html = htm.bind(h);
 
 /**
@@ -17,10 +18,12 @@ export const SecretInput = ({
   placeholder = "",
   inputClass = "",
   disabled = false,
+  loading = false,
   isSecret = true,
 }) => {
   const [visible, setVisible] = useState(false);
   const showToggle = isSecret;
+  const isDisabled = disabled || loading;
 
   return html`
     <div class="flex-1 min-w-0 flex items-center gap-1">
@@ -30,14 +33,18 @@ export const SecretInput = ({
         placeholder=${placeholder}
         onInput=${onInput}
         onBlur=${onBlur}
-        disabled=${disabled}
+        disabled=${isDisabled}
         class=${inputClass}
         autocomplete="off"
       />
+      ${loading
+        ? html`<${LoadingSpinner} className="h-3 w-3 text-gray-500 shrink-0" />`
+        : null}
       ${showToggle
         ? html`<button
             type="button"
             onclick=${() => setVisible((v) => !v)}
+            disabled=${isDisabled}
             class="text-gray-500 hover:text-gray-300 px-1 text-xs shrink-0"
           >
             ${visible ? "Hide" : "Show"}

package/lib/public/js/components/sidebar.js

@@ -1,8 +1,9 @@
 import { h } from "https://esm.sh/preact";
 import { useEffect, useRef, useState } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
-import { HomeLineIcon, FolderLineIcon } from "./icons.js";
+import { AddLineIcon, HomeLineIcon, FolderLineIcon } from "./icons.js";
 import { FileTree } from "./file-tree.js";
+import { OverflowMenu, OverflowMenuItem } from "./overflow-menu.js";
 import { UpdateActionButton } from "./update-action-button.js";
 import { SidebarGitPanel } from "./sidebar-git-panel.js";
 import { readUiSettings, writeUiSettings } from "../lib/ui-settings.js";
@@ -49,6 +50,10 @@ export const AppSidebar = ({
   acLatest = "",
   acUpdating = false,
   onAcUpdate = () => {},
+  agents = [],
+  selectedAgentId = "",
+  onSelectAgent = () => {},
+  onAddAgent = () => {},
 }) => {
   const browseLayoutRef = useRef(null);
   const browseBottomPanelRef = useRef(null);
@@ -123,36 +128,27 @@ export const AppSidebar = ({
     setIsResizingBrowsePanels(true);
   };
 
+  const setupSection = navSections.find((section) => section.label === "Setup") || null;
+  const remainingSections = navSections.filter((section) => section.label !== "Setup");
+
   return html`
     <div class=${`app-sidebar ${mobileSidebarOpen ? "mobile-open" : ""}`}>
     <div class="sidebar-brand">
       <img src="./img/logo.svg" alt="" width="20" height="20" />
       <span><span style="color: var(--accent)">alpha</span>claw</span>
       ${authEnabled && html`
-        <div class="brand-menu" ref=${menuRef}>
-          <button
-            class="brand-menu-trigger"
-            onclick=${onToggleMenu}
-            aria-label="Menu"
-          >
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-              <circle cx="8" cy="3" r="1.5" />
-              <circle cx="8" cy="8" r="1.5" />
-              <circle cx="8" cy="13" r="1.5" />
-            </svg>
-          </button>
-          ${menuOpen && html`
-            <div class="brand-dropdown">
-              <a
-                href="#"
-                onclick=${(event) => {
-                  event.preventDefault();
-                  onLogout();
-                }}
-              >Log out</a>
-            </div>
-          `}
-        </div>
+        <${OverflowMenu}
+          open=${menuOpen}
+          onToggle=${onToggleMenu}
+          onClose=${onToggleMenu}
+          ariaLabel="Menu"
+          title="Menu"
+          menuRef=${menuRef}
+        >
+          <${OverflowMenuItem} onClick=${() => onLogout()}>
+            Log out
+          </${OverflowMenuItem}>
+        </${OverflowMenu}>
       `}
     </div>
     <div class="sidebar-tabs">
@@ -181,7 +177,49 @@ export const AppSidebar = ({
         minHeight: 0,
       }}
     >
-      ${navSections.map(
+      ${setupSection
+        ? html`
+            <div class="sidebar-label">Menu</div>
+            <nav class="sidebar-nav">
+              ${setupSection.items.map(
+                (item) => html`
+                  <a
+                    class=${selectedNavId === item.id ? "active" : ""}
+                    onclick=${() => onSelectNavItem(item.id)}
+                  >
+                    ${item.label}
+                  </a>
+                `,
+              )}
+            </nav>
+          `
+        : null}
+      <div class="sidebar-agents-header">
+        <div class="sidebar-label sidebar-agents-label">Agents</div>
+        <button
+          type="button"
+          class="sidebar-agents-add-button"
+          onclick=${onAddAgent}
+          title="Add agent"
+          aria-label="Add agent"
+        >
+          <${AddLineIcon} className="sidebar-agents-add-icon" />
+        </button>
+      </div>
+      <div class="sidebar-agents-list">
+        ${agents.map(
+          (agent) => html`
+            <button
+              key=${agent.id}
+              class=${`sidebar-agent-item ${selectedAgentId === agent.id ? "active" : ""}`}
+              onclick=${() => onSelectAgent(agent.id)}
+            >
+              <span class="sidebar-agent-name">${agent.name || agent.id}</span>
+            </button>
+          `,
+        )}
+      </div>
+      ${remainingSections.map(
         (section) => html`
           <div class="sidebar-label">${section.label}</div>
           <nav class="sidebar-nav">