@chrysb/alphaclaw 0.5.6 → 0.5.7-beta.0

package/bin/alphaclaw.js

@@ -105,6 +105,7 @@ telegram topic add options:
   --thread <id>       Telegram thread ID
   --name <text>       Topic name
   --system <text>     Optional system instructions
+  --agent <id>        Optional agent ID for per-topic routing
   --group <id>        Optional group ID override (auto-resolves when one group exists)
 
 Examples:
@@ -112,6 +113,7 @@ Examples:
   alphaclaw git-sync --message "update config" --file "workspace/app/config.json"
   alphaclaw telegram topic add --thread 12 --name "Testing"
   alphaclaw telegram topic add --thread 12 --name "Testing" --system "Handle QA requests"
+  alphaclaw telegram topic add --thread 12 --name "Ops" --agent ops
 `);
   process.exit(0);
 }
@@ -375,6 +377,7 @@ const runTelegramTopicAdd = () => {
   const systemInstructions = String(
     flagValue(commandArgs, "--system") || "",
   ).trim();
+  const agentId = String(flagValue(commandArgs, "--agent") || "").trim();
   const requestedGroupId = String(
     flagValue(commandArgs, "--group") || "",
   ).trim();
@@ -423,6 +426,7 @@ const runTelegramTopicAdd = () => {
     topicRegistry.updateTopic(groupId, threadId, {
       name: topicName,
       ...(systemInstructions ? { systemInstructions } : {}),
+      ...(agentId ? { agentId } : {}),
     });
 
     const requireMention =
@@ -440,8 +444,9 @@ const runTelegramTopicAdd = () => {
       workspaceDir: path.join(openclawDir, "workspace"),
     });
 
+    const agentSuffix = agentId ? ` agent=${agentId}` : "";
     console.log(
-      `[alphaclaw] Topic mapped: group=${groupId} thread=${threadId} name=${topicName}`,
+      `[alphaclaw] Topic mapped: group=${groupId} thread=${threadId} name=${topicName}${agentSuffix}`,
     );
     console.log(
       `[alphaclaw] Concurrency updated: agent=${syncResult.maxConcurrent} subagents=${syncResult.subagentMaxConcurrent} topics=${syncResult.totalTopics}`,

package/lib/public/css/agents.css

@@ -0,0 +1,92 @@
+/* ── Agents detail layout ────────────────────── */
+
+.app-content-pane.agents-pane {
+  padding: 0;
+}
+
+/* ── Detail panel ────────────────────────────── */
+
+.agents-detail-panel {
+  height: 100%;
+  overflow-y: auto;
+  padding: 0 32px;
+}
+
+.agents-detail-inner {
+  max-width: 42rem;
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+.agents-detail-header {
+  padding-top: 16px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.agents-detail-header-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── Sub-tabs ────────────────────────────────── */
+
+.agents-sub-tabs {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding-top: 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.agents-sub-tab {
+  padding: 8px 14px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: color 0.12s, border-color 0.12s;
+  font-family: inherit;
+  margin-bottom: -1px;
+}
+
+.agents-sub-tab:hover {
+  color: var(--text);
+}
+
+.agents-sub-tab.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+
+.agents-detail-content {
+  flex: 1;
+  padding: 24px 0;
+}
+
+/* ── Empty state ─────────────────────────────── */
+
+.agents-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--text-dim);
+  gap: 12px;
+  padding: 32px;
+  text-align: center;
+}

package/lib/public/css/explorer.css

@@ -95,6 +95,107 @@
   overflow: hidden;
 }
 
+/* ── Sidebar agents list ─────────────────────── */
+
+.sidebar-agents-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 12px 16px 4px;
+}
+
+.sidebar-agents-label {
+  padding: 0;
+}
+
+.sidebar-agents-add-button {
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  font: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  padding: 6px;
+  margin: -6px;
+  cursor: pointer;
+  opacity: 0.9;
+  transition: color 0.1s, opacity 0.1s;
+}
+
+.sidebar-agents-add-icon {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+.sidebar-agents-add-button:hover {
+  color: var(--text);
+  opacity: 1;
+}
+
+.sidebar-agents-list {
+  flex: 0 0 auto;
+  overflow: visible;
+  padding: 2px 0 0;
+}
+
+.sidebar-agent-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 16px 6px 24px;
+  color: var(--text-muted);
+  font-size: 13px;
+  line-height: 1.4;
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+  position: relative;
+  user-select: none;
+  border: none;
+  background: transparent;
+  width: 100%;
+  text-align: left;
+  font: inherit;
+}
+
+.sidebar-agent-item:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+
+.sidebar-agent-item.active {
+  background: var(--bg-active);
+  color: var(--accent);
+}
+
+.sidebar-agent-item.active::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: var(--accent);
+}
+
+.sidebar-agent-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidebar-agents-add {
+  margin: 0;
+  padding: 16px 14px 8px 20px;
+  border-top: 1px solid var(--border);
+  margin-top: 8px;
+}
+
 .file-tree-wrap {
   width: 100%;
   display: flex;

package/lib/public/css/shell.css

@@ -174,7 +174,7 @@
 .sidebar-footer:empty { display: none; }
 
 .sidebar-footer:not(:empty) {
-  padding: 0 16px 12px 16px;
+  padding: 12px 16px;
   border-top: 1px solid var(--border);
 }
 
@@ -222,7 +222,9 @@
   position: absolute;
   top: calc(100% + 4px);
   right: 0;
-  min-width: 120px;
+  min-width: max-content;
+  width: max-content;
+  max-width: min(280px, calc(100vw - 24px));
   background: var(--bg-sidebar);
   border: 1px solid var(--border-strong);
   border-radius: 8px;
@@ -231,16 +233,25 @@
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
-.brand-dropdown a {
+.brand-dropdown a,
+.brand-dropdown-item {
   display: block;
+  width: 100%;
   padding: 6px 10px;
+  font: inherit;
   font-size: 12px;
   color: var(--text-muted);
   text-decoration: none;
   border-radius: 5px;
   transition: background 0.1s, color 0.1s;
+  background: transparent;
+  border: none;
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
 }
-.brand-dropdown a:hover { background: var(--bg-hover); color: var(--text); }
+.brand-dropdown a:hover,
+.brand-dropdown-item:hover { background: var(--bg-hover); color: var(--text); }
 
 /* ── Statusbar ─────────────────────────────────── */
 

package/lib/public/js/app.js

@@ -14,6 +14,7 @@ import { GlobalRestartBanner } from "./components/global-restart-banner.js";
 import { LoadingSpinner } from "./components/loading-spinner.js";
 import { AppSidebar } from "./components/sidebar.js";
 import {
+  AgentsRoute,
   BrowseRoute,
   DoctorRoute,
   EnvarsRoute,
@@ -25,6 +26,7 @@ import {
   WatchdogRoute,
   WebhooksRoute,
 } from "./components/routes/index.js";
+import { useAgents } from "./components/agents-tab/use-agents.js";
 import { useAppShellController } from "./hooks/use-app-shell-controller.js";
 import { useAppShellUi } from "./hooks/use-app-shell-ui.js";
 import { useBrowseNavigation } from "./hooks/use-browse-navigation.js";
@@ -38,6 +40,7 @@ const html = htm.bind(h);
 const kDoctorWarningDismissedUntilUiSettingKey =
   "doctorWarningDismissedUntilMs";
 const kOneWeekMs = 7 * 24 * 60 * 60 * 1000;
+const kPendingCreateAgentWindowFlag = "__alphaclawPendingCreateAgent";
 
 const App = () => {
   const [location, setLocation] = useLocation();
@@ -66,6 +69,34 @@ const App = () => {
     onCloseMobileSidebar: shellActions.closeMobileSidebar,
   });
 
+  const {
+    state: agentsState,
+    actions: agentsActions,
+  } = useAgents();
+
+  const isAgentsRoute = location.startsWith("/agents");
+  const selectedAgentId = (() => {
+    const match = location.match(/^\/agents\/([^/]+)/);
+    return match ? decodeURIComponent(match[1]) : "";
+  })();
+
+  useEffect(() => {
+    if (!isAgentsRoute) return;
+    if (window[kPendingCreateAgentWindowFlag]) return;
+    if (selectedAgentId) return;
+    if (agentsState.loading || agentsState.agents.length === 0) return;
+    setLocation(`/agents/${encodeURIComponent(agentsState.agents[0].id)}`);
+  }, [isAgentsRoute, selectedAgentId, agentsState.loading, agentsState.agents, setLocation]);
+
+  useEffect(() => {
+    if (!isAgentsRoute) return;
+    if (!window[kPendingCreateAgentWindowFlag]) return;
+    window[kPendingCreateAgentWindowFlag] = false;
+    window.setTimeout(() => {
+      window.dispatchEvent(new Event("alphaclaw:create-agent"));
+    }, 0);
+  }, [isAgentsRoute]);
+
   useEffect(() => {
     const settings = readUiSettings();
     settings[kDoctorWarningDismissedUntilUiSettingKey] =
@@ -143,6 +174,17 @@ const App = () => {
         acLatest=${controllerState.acLatest}
         acUpdating=${controllerState.acUpdating}
         onAcUpdate=${controllerActions.handleAcUpdate}
+        agents=${agentsState.agents}
+        selectedAgentId=${selectedAgentId}
+        onSelectAgent=${(agentId) => setLocation(`/agents/${encodeURIComponent(agentId)}`)}
+        onAddAgent=${() => {
+          if (isAgentsRoute) {
+            window.dispatchEvent(new Event("alphaclaw:create-agent"));
+            return;
+          }
+          window[kPendingCreateAgentWindowFlag] = true;
+          setLocation("/agents");
+        }}
       />
       <div
         class=${`sidebar-resizer ${shellState.isResizingSidebar ? "is-resizing" : ""}`}
@@ -181,10 +223,25 @@ const App = () => {
             }}
           />
         </div>
+        <div
+          class="app-content-pane agents-pane"
+          style=${{ display: isAgentsRoute ? "block" : "none" }}
+        >
+          <${AgentsRoute}
+            agents=${agentsState.agents}
+            loading=${agentsState.loading}
+            saving=${agentsState.saving}
+            agentsActions=${agentsActions}
+            selectedAgentId=${selectedAgentId}
+            onSelectAgent=${(agentId) => setLocation(`/agents/${encodeURIComponent(agentId)}`)}
+            onNavigateToBrowseFile=${browseActions.navigateToBrowseFile}
+            onSetLocation=${setLocation}
+          />
+        </div>
         <div
           class="app-content-pane"
           onscroll=${shellActions.handlePaneScroll}
-          style=${{ display: browseState.isBrowseRoute ? "none" : "block" }}
+          style=${{ display: browseState.isBrowseRoute || isAgentsRoute ? "none" : "block" }}
         >
           <div
             class=${`mobile-topbar ${shellState.mobileTopbarScrolled ? "is-scrolled" : ""}`}
@@ -212,7 +269,7 @@ const App = () => {
             </span>
           </div>
           <div class="max-w-2xl w-full mx-auto">
-            ${!browseState.isBrowseRoute
+            ${!browseState.isBrowseRoute && !isAgentsRoute
               ? html`
                   <${Switch}>
                     <${Route} path="/general">
@@ -220,6 +277,7 @@ const App = () => {
                         statusData=${controllerState.sharedStatus}
                         watchdogData=${controllerState.sharedWatchdogStatus}
                         doctorStatusData=${controllerState.sharedDoctorStatus}
+                        agents=${agentsState.agents}
                         doctorWarningDismissedUntilMs=${doctorWarningDismissedUntilMs}
                         onRefreshStatuses=${controllerActions.refreshSharedStatuses}
                         onSetLocation=${setLocation}
@@ -240,8 +298,16 @@ const App = () => {
                     <${Route} path="/doctor">
                       <${DoctorRoute} onNavigateToBrowseFile=${browseActions.navigateToBrowseFile} />
                     </${Route}>
+                    <${Route} path="/telegram/:accountId">
+                      ${(params) => html`
+                        <${TelegramRoute}
+                          accountId=${decodeURIComponent(params.accountId || "default")}
+                          onBack=${browseActions.exitSubScreen}
+                        />
+                      `}
+                    </${Route}>
                     <${Route} path="/telegram">
-                      <${TelegramRoute} onBack=${browseActions.exitSubScreen} />
+                      <${RouteRedirect} to="/telegram/default" />
                     </${Route}>
                     <${Route} path="/models">
                       <${ModelsRoute} onRestartRequired=${controllerActions.setRestartRequired} />

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

@@ -13,6 +13,11 @@ const kStaticToneClassByTone = {
 };
 
 const getToneClass = (tone, isInteractive) => {
+  if (tone === "subtle") {
+    return isInteractive
+      ? "border border-border text-gray-500 hover:text-gray-300 hover:border-gray-500"
+      : "border border-border text-gray-500";
+  }
   if (tone === "neutral") {
     return isInteractive
       ? "border border-border text-gray-500 hover:text-gray-300 hover:border-gray-500"

package/lib/public/js/components/agents-tab/agent-bindings-section/helpers.js

@@ -0,0 +1,76 @@
+export const announceBindingsChanged = (agentId) => {
+  window.dispatchEvent(
+    new CustomEvent("alphaclaw:agent-bindings-changed", {
+      detail: { agentId: String(agentId || "").trim() },
+    }),
+  );
+};
+
+export const resolveChannelAccountLabel = ({ channelId, account = {} }) => {
+  const providerLabel = channelId
+    ? channelId.charAt(0).toUpperCase() + channelId.slice(1)
+    : "Channel";
+  const configuredName = String(account?.name || "").trim();
+  if (configuredName) return configuredName;
+  const accountId = String(account?.id || "").trim();
+  if (!accountId || accountId === "default") return providerLabel;
+  return `${providerLabel} ${accountId}`;
+};
+
+export const getChannelItemSortRank = (item = {}) => {
+  if (item.isAwaitingPairing) return 99;
+  if (item.isOwned) return 0;
+  if (item.isUnconfigured) return 3;
+  if (item.isAvailable) return 1;
+  return 2;
+};
+
+export const getAccountStatusInfo = ({ statusInfo, accountId }) => {
+  const normalizedAccountId = String(accountId || "").trim() || "default";
+  const accountStatuses =
+    statusInfo?.accounts && typeof statusInfo.accounts === "object"
+      ? statusInfo.accounts
+      : null;
+  if (accountStatuses?.[normalizedAccountId]) {
+    return accountStatuses[normalizedAccountId];
+  }
+  if (normalizedAccountId === "default" && statusInfo) {
+    return statusInfo;
+  }
+  return null;
+};
+
+export const getResolvedAccountStatusInfo = ({
+  account,
+  statusInfo,
+  accountId,
+}) => {
+  const accountStatus = String(account?.status || "").trim();
+  if (accountStatus) {
+    return {
+      status: accountStatus,
+      paired: Number(account?.paired || 0),
+    };
+  }
+  return getAccountStatusInfo({ statusInfo, accountId });
+};
+
+export const isImplicitDefaultAccount = ({ accountId, boundAgentId }) =>
+  String(accountId || "").trim() === "default" &&
+  !String(boundAgentId || "").trim();
+
+export const canAgentBindAccount = ({
+  accountId,
+  boundAgentId,
+  agentId,
+  isDefaultAgent,
+}) => {
+  const normalizedBoundAgentId = String(boundAgentId || "").trim();
+  if (normalizedBoundAgentId) {
+    return normalizedBoundAgentId === String(agentId || "").trim();
+  }
+  if (isImplicitDefaultAccount({ accountId, boundAgentId })) {
+    return !!isDefaultAgent;
+  }
+  return true;
+};