fix: show account counts in connections UI (#813) (thanks @dbhurley)

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Fixes
 - Onboarding/Configure: refuse to proceed with invalid configs; run `clawdbot doctor` first to avoid wiping custom fields. (#764 — thanks @mukhtharcm)
 - Anthropic: merge consecutive user turns (preserve newest metadata) before validation to avoid “Incorrect role information” errors. (#804 — thanks @ThomsenDrake)
+- Connections UI: show account counts for multi-account providers and keep Telegram per-account cards. (#813 — thanks @dbhurley)
 - Discord/Slack: centralize reply-thread planning so auto-thread replies stay in the created thread without parent reply refs.
 - Update: run `clawdbot doctor --non-interactive` during updates to avoid TTY hangs. (#781 — thanks @ronyrus)
 - Tools: allow Claude/Gemini tool param aliases (`file_path`, `old_string`, `new_string`) while enforcing required params at runtime. (#793 — thanks @hsrvc)

ui/src/ui/views/connections.ts

@@ -208,6 +208,26 @@ function providerEnabled(key: ProviderKey, props: ConnectionsProps) {
   }
 }
 
+function getProviderAccountCount(
+  key: ProviderKey,
+  providerAccounts?: Record<string, ProviderAccountSnapshot[]> | null,
+): number {
+  return providerAccounts?.[key]?.length ?? 0;
+}
+
+function renderProviderAccountCount(
+  key: ProviderKey,
+  providerAccounts?: Record<string, ProviderAccountSnapshot[]> | null,
+) {
+  const count = getProviderAccountCount(key, providerAccounts);
+  if (count < 2) return nothing;
+  return html`
+    <div class="muted" style="margin-top: 8px; font-weight: 500;">
+      Accounts (${count})
+    </div>
+  `;
+}
+
 function renderProvider(
   key: ProviderKey,
   props: ConnectionsProps,
@@ -221,6 +241,10 @@ function renderProvider(
     providerAccounts?: Record<string, ProviderAccountSnapshot[]> | null;
   },
 ) {
+  const accountCountLabel = renderProviderAccountCount(
+    key,
+    data.providerAccounts,
+  );
   switch (key) {
     case "whatsapp": {
       const whatsapp = data.whatsapp;
@@ -228,6 +252,7 @@ function renderProvider(
           <div class="card">
             <div class="card-title">WhatsApp</div>
             <div class="card-sub">Link WhatsApp Web and monitor connection health.</div>
+          ${accountCountLabel}
 
           <div class="status-list" style="margin-top: 16px;">
             <div>
@@ -328,7 +353,9 @@ function renderProvider(
       const hasMultipleAccounts = telegramAccounts.length > 1;
 
       const renderAccountCard = (account: ProviderAccountSnapshot) => {
-        const probe = account.probe as { bot?: { username?: string } } | undefined;
+        const probe =
+          (account.probe as { bot?: { username?: string } } | undefined) ??
+          undefined;
         const botUsername = probe?.bot?.username;
         const label = account.name || account.accountId;
         return html`
@@ -350,11 +377,13 @@ function renderProvider(
                 <span class="label">Last inbound</span>
                 <span>${account.lastInboundAt ? formatAgo(account.lastInboundAt) : "n/a"}</span>
               </div>
-              ${account.lastError ? html`
+              ${account.lastError
+                ? html`
                     <div style="color: var(--danger); margin-top: 4px;">
                       ${account.lastError}
                     </div>
-              ` : nothing}
+                  `
+                : nothing}
             </div>
           </div>
         `;
@@ -364,13 +393,15 @@ function renderProvider(
         <div class="card">
           <div class="card-title">Telegram</div>
           <div class="card-sub">Bot token and delivery options.</div>
+          ${accountCountLabel}
 
-          ${hasMultipleAccounts ? html`
+          ${hasMultipleAccounts
+            ? html`
                 <div style="margin-top: 16px; margin-bottom: 8px;">
-              <div style="font-weight: 500; margin-bottom: 8px; color: var(--muted);">Accounts (${telegramAccounts.length})</div>
                   ${telegramAccounts.map((account) => renderAccountCard(account))}
                 </div>
-          ` : html`
+              `
+            : html`
                 <div class="status-list" style="margin-top: 16px;">
                   <div>
                     <span class="label">Configured</span>
@@ -562,6 +593,7 @@ function renderProvider(
           <div class="card">
             <div class="card-title">Discord</div>
             <div class="card-sub">Bot connection and probe status.</div>
+          ${accountCountLabel}
 
           <div class="status-list" style="margin-top: 16px;">
             <div>
@@ -1086,6 +1118,7 @@ function renderProvider(
           <div class="card">
             <div class="card-title">Slack</div>
             <div class="card-sub">Socket mode status and bot details.</div>
+          ${accountCountLabel}
 
           <div class="status-list" style="margin-top: 16px;">
             <div>
@@ -1467,6 +1500,7 @@ function renderProvider(
           <div class="card">
             <div class="card-title">Signal</div>
             <div class="card-sub">REST daemon status and probe details.</div>
+          ${accountCountLabel}
 
           <div class="status-list" style="margin-top: 16px;">
             <div>
@@ -1696,6 +1730,7 @@ function renderProvider(
           <div class="card">
             <div class="card-title">iMessage</div>
             <div class="card-sub">imsg CLI and database availability.</div>
+          ${accountCountLabel}
 
           <div class="status-list" style="margin-top: 16px;">
             <div>