Name a connected tool's account by the name its owner gave it

frontend/src/settings/Tools.test.tsx

@@ -88,6 +88,7 @@ vi.mock('../api/services/connectorsService', () => ({
           icon: 'tool_telegram',
           status: 'connected',
           account_label: '…abcd',
+          account_name: 'Alerts bot',
         },
         {
           id: 'conn-2',
@@ -203,7 +204,7 @@ describe('Tools page', () => {
     const telegram = card('Telegram');
     expect(telegram.querySelector('[role="switch"]')).not.toBeNull();
     // Which account this card is, and the catalog's plain description.
-    expect(telegram.textContent).toContain('…abcd');
+    expect(telegram.textContent).toContain('Alerts bot');
     expect(telegram.textContent).toContain(
       'settings.connectors.descriptions.telegram',
     );

frontend/src/settings/Tools.tsx

@@ -275,14 +275,17 @@ export default function Tools() {
   const { launch, modals } = useConnectorLauncher({
     onConnected: () => getUserTools(),
   });
-  // What tells two accounts of one service apart on their cards.
+  // What tells two accounts of one service apart on their cards: the name
+  // the owner gave it, else what identifies it.
   const accountLine = (connection: Connection) =>
-    connection.auth_kind === 'api_key'
-      ? t('settings.connectors.detail.keyEnding', {
-          hint: connection.account_label,
-          interpolation: { escapeValue: false },
-        })
-      : connection.account_label;
+    connection.account_name
+      ? connection.account_name
+      : connection.auth_kind === 'api_key'
+        ? t('settings.connectors.detail.keyEnding', {
+            hint: connection.account_label,
+            interpolation: { escapeValue: false },
+          })
+        : connection.account_label;
 
   const handleGoBack = () => {
     setSelectedTool(null);