@chrysb/alphaclaw 0.5.6 → 0.5.7-beta.0

package/lib/public/js/components/telegram-workspace/index.js

@@ -28,9 +28,15 @@ import {
   kTelegramWorkspaceCacheKey,
 } from "../../lib/storage-keys.js";
 
-const loadTelegramWorkspaceState = () => {
+const resolveStorageKey = (baseKey, accountId) => {
+  const suffix = String(accountId || "").trim();
+  if (!suffix || suffix === "default") return baseKey;
+  return `${baseKey}.${suffix}`;
+};
+
+const loadTelegramWorkspaceState = (accountId) => {
   try {
-    const raw = window.localStorage.getItem(kTelegramWorkspaceStorageKey);
+    const raw = window.localStorage.getItem(resolveStorageKey(kTelegramWorkspaceStorageKey, accountId));
     if (!raw) return {};
     const parsed = JSON.parse(raw);
     return parsed && typeof parsed === "object" ? parsed : {};
@@ -38,9 +44,22 @@ const loadTelegramWorkspaceState = () => {
     return {};
   }
 };
-const loadTelegramWorkspaceCache = () => {
+const saveTelegramWorkspaceState = (accountId, state) => {
+  try {
+    window.localStorage.setItem(
+      resolveStorageKey(kTelegramWorkspaceStorageKey, accountId),
+      JSON.stringify(state),
+    );
+  } catch {}
+};
+const removeTelegramWorkspaceState = (accountId) => {
+  try {
+    window.localStorage.removeItem(resolveStorageKey(kTelegramWorkspaceStorageKey, accountId));
+  } catch {}
+};
+const loadTelegramWorkspaceCache = (accountId) => {
   try {
-    const raw = window.localStorage.getItem(kTelegramWorkspaceCacheKey);
+    const raw = window.localStorage.getItem(resolveStorageKey(kTelegramWorkspaceCacheKey, accountId));
     if (!raw) return null;
     const parsed = JSON.parse(raw);
     const data = parsed?.data;
@@ -50,14 +69,19 @@ const loadTelegramWorkspaceCache = () => {
     return null;
   }
 };
-const saveTelegramWorkspaceCache = (data) => {
+const saveTelegramWorkspaceCache = (accountId, data) => {
   try {
     window.localStorage.setItem(
-      kTelegramWorkspaceCacheKey,
+      resolveStorageKey(kTelegramWorkspaceCacheKey, accountId),
       JSON.stringify({ cachedAt: Date.now(), data }),
     );
   } catch {}
 };
+const removeTelegramWorkspaceCache = (accountId) => {
+  try {
+    window.localStorage.removeItem(resolveStorageKey(kTelegramWorkspaceCacheKey, accountId));
+  } catch {}
+};
 
 const BackButton = ({ onBack }) => html`
   <button
@@ -73,15 +97,84 @@ const BackButton = ({ onBack }) => html`
   </button>
 `;
 
-export const TelegramWorkspace = ({ onBack }) => {
-  const initialState = loadTelegramWorkspaceState();
-  const cachedWorkspace = loadTelegramWorkspaceCache();
+const MultiGroupView = ({
+  accountId,
+  groups,
+  concurrency,
+  debugEnabled,
+  onResetOnboarding,
+}) => {
+  const [expandedGroupId, setExpandedGroupId] = useState(
+    () => groups[0]?.groupId || "",
+  );
+
+  const toggle = (gId) =>
+    setExpandedGroupId((current) => (current === gId ? "" : gId));
+
+  return html`
+    <div class="space-y-3">
+      ${groups.map(
+        (g) => html`
+          <div
+            key=${g.groupId}
+            class="border border-border rounded-lg overflow-hidden"
+          >
+            <button
+              onclick=${() => toggle(g.groupId)}
+              class="w-full flex items-center justify-between px-3 py-2.5 bg-black/20 hover:bg-black/30 transition-colors text-left"
+            >
+              <div>
+                <p class="text-sm text-gray-300 font-medium">
+                  ${g.groupName || g.groupId}
+                </p>
+                <p class="text-[11px] text-gray-500 font-mono">${g.groupId}</p>
+              </div>
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="currentColor"
+                class="text-gray-500 transition-transform ${expandedGroupId ===
+                g.groupId
+                  ? "rotate-180"
+                  : ""}"
+              >
+                <path
+                  d="M4.354 5.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 00-.708-.708L8 9.293 4.354 5.646z"
+                />
+              </svg>
+            </button>
+            ${expandedGroupId === g.groupId &&
+            html`
+              <div class="p-3 border-t border-border">
+                <${ManageTelegramWorkspace}
+                  accountId=${accountId}
+                  groupId=${g.groupId}
+                  groupName=${g.groupName}
+                  initialTopics=${g.topics}
+                  configAgentMaxConcurrent=${concurrency?.agentMaxConcurrent}
+                  configSubagentMaxConcurrent=${concurrency?.subagentMaxConcurrent}
+                  debugEnabled=${debugEnabled}
+                  onResetOnboarding=${onResetOnboarding}
+                />
+              </div>
+            `}
+          </div>
+        `,
+      )}
+    </div>
+  `;
+};
+
+export const TelegramWorkspace = ({ accountId = "default", onBack }) => {
+  const initialState = loadTelegramWorkspaceState(accountId);
+  const cachedWorkspace = loadTelegramWorkspaceCache(accountId);
   const [step, setStep] = useState(() => {
     const value = Number.parseInt(String(initialState.step ?? 0), 10);
     if (!Number.isFinite(value)) return 0;
     return Math.min(Math.max(value, 0), kSteps.length - 1);
   });
-  const [botInfo, setBotInfo] = useState(initialState.botInfo || null);
+  const [botInfo, setBotInfo] = useState(null);
   const [groupId, setGroupId] = useState(initialState.groupId || "");
   const [groupInfo, setGroupInfo] = useState(initialState.groupInfo || null);
   const [verifyGroupError, setVerifyGroupError] = useState(
@@ -94,6 +187,7 @@ export const TelegramWorkspace = ({ onBack }) => {
   const [workspaceConfig, setWorkspaceConfig] = useState(() => ({
     ready: !!cachedWorkspace,
     configured: !!cachedWorkspace?.configured,
+    groups: cachedWorkspace?.groups || [],
     groupId: cachedWorkspace?.groupId || "",
     groupName: cachedWorkspace?.groupName || "",
     topics: cachedWorkspace?.topics || {},
@@ -108,12 +202,10 @@ export const TelegramWorkspace = ({ onBack }) => {
   const goBack = () => setStep((s) => Math.max(0, s - 1));
   const resetOnboarding = async () => {
     try {
-      const data = await api.resetWorkspace();
+      const data = await api.resetWorkspace({ accountId });
       if (!data.ok) throw new Error(data.error || "Failed to reset onboarding");
-      try {
-        window.localStorage.removeItem(kTelegramWorkspaceStorageKey);
-        window.localStorage.removeItem(kTelegramWorkspaceCacheKey);
-      } catch {}
+      removeTelegramWorkspaceState(accountId);
+      removeTelegramWorkspaceCache(accountId);
       setStep(0);
       setBotInfo(null);
       setGroupId("");
@@ -124,6 +216,7 @@ export const TelegramWorkspace = ({ onBack }) => {
       setWorkspaceConfig({
         ready: true,
         configured: false,
+        groups: [],
         groupId: "",
         groupName: "",
         topics: {},
@@ -136,48 +229,36 @@ export const TelegramWorkspace = ({ onBack }) => {
     }
   };
   const handleDone = () => {
-    try {
-      window.localStorage.removeItem(kTelegramWorkspaceStorageKey);
-      window.localStorage.setItem(
-        kTelegramWorkspaceCacheKey,
-        JSON.stringify({
-          cachedAt: Date.now(),
-          data: {
-            ready: true,
-            configured: true,
-            groupId,
-            groupName: groupInfo?.chat?.title || groupId,
-            topics: topics || {},
-            debugEnabled: !!workspaceConfig?.debugEnabled,
-            concurrency: workspaceConfig?.concurrency || {
-              agentMaxConcurrent: null,
-              subagentMaxConcurrent: null,
-            },
-          },
-        }),
-      );
-    } catch {}
+    removeTelegramWorkspaceState(accountId);
+    const doneGroupName = groupInfo?.chat?.title || groupId;
+    saveTelegramWorkspaceCache(accountId, {
+      ready: true,
+      configured: true,
+      groups: [{ groupId, groupName: doneGroupName, topics: topics || {} }],
+      groupId,
+      groupName: doneGroupName,
+      topics: topics || {},
+      debugEnabled: !!workspaceConfig?.debugEnabled,
+      concurrency: workspaceConfig?.concurrency || {
+        agentMaxConcurrent: null,
+        subagentMaxConcurrent: null,
+      },
+    });
     window.location.reload();
   };
 
   useEffect(() => {
-    try {
-      window.localStorage.setItem(
-        kTelegramWorkspaceStorageKey,
-        JSON.stringify({
-          step,
-          botInfo,
-          groupId,
-          groupInfo,
-          verifyGroupError,
-          allowUserId,
-          topics,
-        }),
-      );
-    } catch {}
+    saveTelegramWorkspaceState(accountId, {
+      step,
+      groupId,
+      groupInfo,
+      verifyGroupError,
+      allowUserId,
+      topics,
+    });
   }, [
+    accountId,
     step,
-    botInfo,
     groupId,
     groupInfo,
     verifyGroupError,
@@ -189,12 +270,14 @@ export const TelegramWorkspace = ({ onBack }) => {
     let active = true;
     const bootstrapWorkspace = async () => {
       try {
-        const data = await api.workspace();
+        const data = await api.workspace({ accountId });
         if (!active || !data?.ok) return;
-        if (!data.configured || !data.groupId) {
+        const groups = Array.isArray(data.groups) ? data.groups : [];
+        if (!data.configured || groups.length === 0) {
           const nextConfig = {
             ready: true,
             configured: false,
+            groups: [],
             groupId: "",
             groupName: "",
             topics: {},
@@ -205,15 +288,17 @@ export const TelegramWorkspace = ({ onBack }) => {
             },
           };
           setWorkspaceConfig(nextConfig);
-          saveTelegramWorkspaceCache(nextConfig);
+          saveTelegramWorkspaceCache(accountId, nextConfig);
           return;
         }
+        const first = groups[0];
         const nextConfig = {
           ready: true,
           configured: true,
-          groupId: data.groupId,
-          groupName: data.groupName || data.groupId,
-          topics: data.topics || {},
+          groups,
+          groupId: first.groupId,
+          groupName: first.groupName || first.groupId,
+          topics: first.topics || {},
           debugEnabled: !!data.debugEnabled,
           concurrency: data.concurrency || {
             agentMaxConcurrent: null,
@@ -221,13 +306,13 @@ export const TelegramWorkspace = ({ onBack }) => {
           },
         };
         setWorkspaceConfig(nextConfig);
-        saveTelegramWorkspaceCache(nextConfig);
-        setGroupId(data.groupId);
-        setTopics(data.topics || {});
+        saveTelegramWorkspaceCache(accountId, nextConfig);
+        setGroupId(first.groupId);
+        setTopics(first.topics || {});
         setGroupInfo({
           chat: {
-            id: data.groupId,
-            title: data.groupName || data.groupId,
+            id: first.groupId,
+            title: first.groupName || first.groupId,
             isForum: true,
           },
           bot: {
@@ -245,7 +330,7 @@ export const TelegramWorkspace = ({ onBack }) => {
     return () => {
       active = false;
     };
-  }, []);
+  }, [accountId]);
 
   return html`
     <div class="space-y-4">
@@ -271,17 +356,30 @@ export const TelegramWorkspace = ({ onBack }) => {
                     </h2>
                   </div>
                 </div>
-                <${ManageTelegramWorkspace}
-                  groupId=${workspaceConfig.groupId}
-                  groupName=${workspaceConfig.groupName}
-                  initialTopics=${workspaceConfig.topics}
-                  configAgentMaxConcurrent=${workspaceConfig.concurrency
-                    ?.agentMaxConcurrent}
-                  configSubagentMaxConcurrent=${workspaceConfig.concurrency
-                    ?.subagentMaxConcurrent}
-                  debugEnabled=${workspaceConfig.debugEnabled}
-                  onResetOnboarding=${resetOnboarding}
-                />
+                ${(workspaceConfig.groups || []).length <= 1
+                  ? html`
+                      <${ManageTelegramWorkspace}
+                        accountId=${accountId}
+                        groupId=${workspaceConfig.groupId}
+                        groupName=${workspaceConfig.groupName}
+                        initialTopics=${workspaceConfig.topics}
+                        configAgentMaxConcurrent=${workspaceConfig.concurrency
+                          ?.agentMaxConcurrent}
+                        configSubagentMaxConcurrent=${workspaceConfig.concurrency
+                          ?.subagentMaxConcurrent}
+                        debugEnabled=${workspaceConfig.debugEnabled}
+                        onResetOnboarding=${resetOnboarding}
+                      />
+                    `
+                  : html`
+                      <${MultiGroupView}
+                        accountId=${accountId}
+                        groups=${workspaceConfig.groups}
+                        concurrency=${workspaceConfig.concurrency}
+                        debugEnabled=${workspaceConfig.debugEnabled}
+                        onResetOnboarding=${resetOnboarding}
+                      />
+                    `}
               `
             : html`
                 <div class="flex items-center justify-between mb-4">
@@ -305,6 +403,7 @@ export const TelegramWorkspace = ({ onBack }) => {
                 ${step === 0 &&
                 html`
                   <${VerifyBotStep}
+                    accountId=${accountId}
                     botInfo=${botInfo}
                     setBotInfo=${setBotInfo}
                     onNext=${goNext}
@@ -317,6 +416,7 @@ export const TelegramWorkspace = ({ onBack }) => {
                 ${step === 2 &&
                 html`
                   <${AddBotStep}
+                    accountId=${accountId}
                     groupId=${groupId}
                     setGroupId=${setGroupId}
                     groupInfo=${groupInfo}
@@ -332,6 +432,7 @@ export const TelegramWorkspace = ({ onBack }) => {
                 ${step === 3 &&
                 html`
                   <${TopicsStep}
+                    accountId=${accountId}
                     groupId=${groupId}
                     topics=${topics}
                     setTopics=${setTopics}

package/lib/public/js/components/telegram-workspace/manage.js

@@ -5,10 +5,25 @@ import { showToast } from "../toast.js";
 import { ActionButton } from "../action-button.js";
 import { ConfirmDialog } from "../confirm-dialog.js";
 import * as api from "../../lib/telegram-api.js";
+import { fetchAgents } from "../../lib/api.js";
 
 const html = htm.bind(h);
 
+const AgentSelect = ({ value, agents, onChange, className = "" }) => html`
+  <select
+    value=${value}
+    onChange=${(e) => onChange(e.target.value)}
+    class="bg-black/30 border border-border rounded-lg px-2 py-1.5 text-xs text-gray-200 focus:outline-none focus:border-gray-500 ${className}"
+  >
+    <option value="">Default</option>
+    ${agents.map(
+      (a) => html`<option value=${a.id}>${a.name || a.id}</option>`,
+    )}
+  </select>
+`;
+
 export const ManageTelegramWorkspace = ({
+  accountId,
   groupId,
   groupName,
   initialTopics,
@@ -20,18 +35,21 @@ export const ManageTelegramWorkspace = ({
   const [topics, setTopics] = useState(initialTopics || {});
   const [newTopicName, setNewTopicName] = useState("");
   const [newTopicInstructions, setNewTopicInstructions] = useState("");
+  const [newTopicAgentId, setNewTopicAgentId] = useState("");
   const [showCreateTopic, setShowCreateTopic] = useState(false);
   const [creating, setCreating] = useState(false);
   const [deleting, setDeleting] = useState(null);
   const [editingTopicId, setEditingTopicId] = useState("");
   const [editingTopicName, setEditingTopicName] = useState("");
   const [editingTopicInstructions, setEditingTopicInstructions] = useState("");
+  const [editingTopicAgentId, setEditingTopicAgentId] = useState("");
   const [renamingTopicId, setRenamingTopicId] = useState("");
   const [error, setError] = useState(null);
   const [deleteTopicConfirm, setDeleteTopicConfirm] = useState(null);
+  const [agents, setAgents] = useState([]);
 
   const loadTopics = async () => {
-    const data = await api.listTopics(groupId);
+    const data = await api.listTopics(groupId, { accountId });
     if (data.ok) setTopics(data.topics || {});
   };
 
@@ -44,22 +62,34 @@ export const ManageTelegramWorkspace = ({
     }
   }, [initialTopics]);
 
+  useEffect(() => {
+    fetchAgents()
+      .then((data) => setAgents(Array.isArray(data?.agents) ? data.agents : []))
+      .catch(() => {});
+  }, []);
+
   const createSingle = async () => {
     const name = newTopicName.trim();
     const systemInstructions = newTopicInstructions.trim();
+    const agentId = newTopicAgentId.trim();
     if (!name) return;
     setCreating(true);
     setError(null);
     try {
       const data = await api.createTopicsBulk(groupId, [
-        { name, ...(systemInstructions ? { systemInstructions } : {}) },
-      ]);
+        {
+          name,
+          ...(systemInstructions ? { systemInstructions } : {}),
+          ...(agentId ? { agentId } : {}),
+        },
+      ], { accountId });
       if (!data.ok)
         throw new Error(data.results?.[0]?.error || "Failed to create topic");
       const failed = data.results.filter((r) => !r.ok);
       if (failed.length > 0) throw new Error(failed[0].error);
       setNewTopicName("");
       setNewTopicInstructions("");
+      setNewTopicAgentId("");
       setShowCreateTopic(false);
       await loadTopics();
       showToast(`Created topic: ${name}`, "success");
@@ -72,7 +102,7 @@ export const ManageTelegramWorkspace = ({
   const handleDelete = async (topicId, topicName) => {
     setDeleting(topicId);
     try {
-      const data = await api.deleteTopic(groupId, topicId);
+      const data = await api.deleteTopic(groupId, topicId, { accountId });
       if (!data.ok) throw new Error(data.error);
       await loadTopics();
       if (data.removedFromRegistryOnly) {
@@ -86,21 +116,24 @@ export const ManageTelegramWorkspace = ({
     setDeleting(null);
   };
 
-  const startRename = (topicId, topicName, topicInstructions = "") => {
+  const startRename = (topicId, topicName, topicInstructions = "", topicAgentId = "") => {
     setEditingTopicId(String(topicId));
     setEditingTopicName(String(topicName || ""));
     setEditingTopicInstructions(String(topicInstructions || ""));
+    setEditingTopicAgentId(String(topicAgentId || ""));
   };
 
   const cancelRename = () => {
     setEditingTopicId("");
     setEditingTopicName("");
     setEditingTopicInstructions("");
+    setEditingTopicAgentId("");
   };
 
   const saveRename = async (topicId) => {
     const nextName = editingTopicName.trim();
     const nextSystemInstructions = editingTopicInstructions.trim();
+    const nextAgentId = editingTopicAgentId.trim();
     if (!nextName) {
       setError("Topic name is required");
       return;
@@ -111,10 +144,11 @@ export const ManageTelegramWorkspace = ({
       const data = await api.updateTopic(groupId, topicId, {
         name: nextName,
         systemInstructions: nextSystemInstructions,
-      });
-      if (!data.ok) throw new Error(data.error || "Failed to rename topic");
+        agentId: nextAgentId,
+      }, { accountId });
+      if (!data.ok) throw new Error(data.error || "Failed to update topic");
       await loadTopics();
-      showToast(`Renamed topic: ${nextName}`, "success");
+      showToast(`Updated topic: ${nextName}`, "success");
       cancelRename();
     } catch (e) {
       setError(e.message);
@@ -169,6 +203,14 @@ export const ManageTelegramWorkspace = ({
                       >
                         Thread ID
                       </th>
+                      ${agents.length > 0 &&
+                      html`
+                        <th
+                          class="text-left px-3 py-2 text-gray-500 font-medium w-32"
+                        >
+                          Agent
+                        </th>
+                      `}
                       <th class="px-3 py-2 w-28" />
                     </tr>
                   </thead>
@@ -180,7 +222,7 @@ export const ManageTelegramWorkspace = ({
                               <tr
                                 class="border-b border-border last:border-0 align-top"
                               >
-                                <td class="px-3 py-2" colspan="3">
+                                <td class="px-3 py-2" colspan=${agents.length > 0 ? 4 : 3}>
                                   <div class="space-y-2">
                                     <input
                                       type="text"
@@ -203,6 +245,17 @@ export const ManageTelegramWorkspace = ({
                                       rows="6"
                                       class="w-full bg-black/30 border border-border rounded-lg px-2 py-1.5 text-xs text-gray-200 placeholder-gray-600 focus:outline-none focus:border-gray-500 resize-y"
                                     />
+                                    ${agents.length > 0 &&
+                                    html`
+                                      <div class="flex items-center gap-2">
+                                        <label class="text-xs text-gray-500">Agent:</label>
+                                        <${AgentSelect}
+                                          value=${editingTopicAgentId}
+                                          agents=${agents}
+                                          onChange=${setEditingTopicAgentId}
+                                        />
+                                      </div>
+                                    `}
                                     <div class="flex items-center gap-2">
                                       <button
                                         onclick=${() => saveRename(id)}
@@ -239,10 +292,11 @@ export const ManageTelegramWorkspace = ({
                                           id,
                                           topic.name,
                                           topic.systemInstructions,
+                                          topic.agentId,
                                         )}
                                       class="inline-flex items-center justify-center text-white/80 hover:text-white transition-colors"
                                       title="Edit topic"
-                                      aria-label="Rename topic"
+                                      aria-label="Edit topic"
                                     >
                                       <svg
                                         width="14"
@@ -271,6 +325,14 @@ export const ManageTelegramWorkspace = ({
                                 >
                                   ${id}
                                 </td>
+                                ${agents.length > 0 &&
+                                html`
+                                  <td class="px-3 py-2 text-gray-400 w-32">
+                                    ${topic.agentId
+                                      ? html`<span class="text-gray-300">${agents.find((a) => a.id === topic.agentId)?.name || topic.agentId}</span>`
+                                      : html`<span class="text-gray-600">default</span>`}
+                                  </td>
+                                `}
                                 <td class="px-3 py-2">
                                   <div
                                     class="flex items-center gap-2 justify-end"
@@ -325,6 +387,17 @@ export const ManageTelegramWorkspace = ({
               rows="5"
               class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-sm text-gray-200 placeholder-gray-600 focus:outline-none focus:border-gray-500 resize-y"
             />
+            ${agents.length > 0 &&
+            html`
+              <div class="flex items-center gap-2">
+                <label class="text-xs text-gray-500">Agent:</label>
+                <${AgentSelect}
+                  value=${newTopicAgentId}
+                  agents=${agents}
+                  onChange=${setNewTopicAgentId}
+                />
+              </div>
+            `}
             <div class="flex justify-end">
               <${ActionButton}
                 onClick=${createSingle}

package/lib/public/js/components/telegram-workspace/onboarding.js

@@ -25,7 +25,7 @@ export const StepIndicator = ({ currentStep, steps }) => html`
 `;
 
 // Step 1: Verify Bot
-export const VerifyBotStep = ({ botInfo, setBotInfo, onNext }) => {
+export const VerifyBotStep = ({ accountId, botInfo, setBotInfo, onNext }) => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
 
@@ -33,7 +33,7 @@ export const VerifyBotStep = ({ botInfo, setBotInfo, onNext }) => {
     setLoading(true);
     setError(null);
     try {
-      const data = await api.verifyBot();
+      const data = await api.verifyBot({ accountId });
       if (!data.ok) throw new Error(data.error);
       setBotInfo(data.bot);
     } catch (e) {
@@ -180,6 +180,7 @@ export const CreateGroupStep = ({ onNext, onBack }) => html`
 
 // Step 3: Add Bot to Group / Verify Group
 export const AddBotStep = ({
+  accountId,
   groupId,
   setGroupId,
   groupInfo,
@@ -216,7 +217,7 @@ export const AddBotStep = ({
     setLoading(true);
     setVerifyGroupError(null);
     try {
-      const data = await api.verifyGroup(id);
+      const data = await api.verifyGroup(id, { accountId });
       if (!data.ok) throw new Error(data.error);
       setGroupId(id);
       setGroupInfo(data);
@@ -245,7 +246,7 @@ export const AddBotStep = ({
         ...(userIdValue ? { userId: userIdValue } : {}),
         groupName: groupInfo?.chat?.title || groupId,
         requireMention: false,
-      });
+      }, { accountId });
       if (!data?.ok)
         throw new Error(data?.error || "Failed to configure Telegram group");
       if (data.userId) setUserId(String(data.userId));
@@ -370,7 +371,7 @@ export const AddBotStep = ({
 };
 
 // Step 4: Create Topics
-export const TopicsStep = ({ groupId, topics, setTopics, onNext, onBack }) => {
+export const TopicsStep = ({ accountId, groupId, topics, setTopics, onNext, onBack }) => {
   const [newTopicName, setNewTopicName] = useState("");
   const [newTopicInstructions, setNewTopicInstructions] = useState("");
   const [creating, setCreating] = useState(false);
@@ -379,7 +380,7 @@ export const TopicsStep = ({ groupId, topics, setTopics, onNext, onBack }) => {
   const [deleteTopicConfirm, setDeleteTopicConfirm] = useState(null);
 
   const loadTopics = async () => {
-    const data = await api.listTopics(groupId);
+    const data = await api.listTopics(groupId, { accountId });
     if (data.ok) setTopics(data.topics);
   };
 
@@ -396,7 +397,7 @@ export const TopicsStep = ({ groupId, topics, setTopics, onNext, onBack }) => {
     try {
       const data = await api.createTopicsBulk(groupId, [
         { name, ...(systemInstructions ? { systemInstructions } : {}) },
-      ]);
+      ], { accountId });
       if (!data.ok)
         throw new Error(data.results?.[0]?.error || "Failed to create topic");
       const failed = data.results.filter((r) => !r.ok);
@@ -414,7 +415,7 @@ export const TopicsStep = ({ groupId, topics, setTopics, onNext, onBack }) => {
   const handleDelete = async (topicId, topicName) => {
     setDeleting(topicId);
     try {
-      const data = await api.deleteTopic(groupId, topicId);
+      const data = await api.deleteTopic(groupId, topicId, { accountId });
       if (!data.ok) throw new Error(data.error);
       await loadTopics();
       if (data.removedFromRegistryOnly) {