aimeat 2.5.0 → 2.6.0

package/dist/public/js/services/audio-recorder.js

@@ -0,0 +1,171 @@
+/**
+ * @file audio-recorder.js
+ * @description Microphone capture for voice messages and the transcription test. Plain JS, no
+ *   framework: one function starts a recording and hands back the controls to stop or cancel it.
+ *
+ *   FORMAT: whatever the browser actually produces, negotiated with isTypeSupported — webm/opus in
+ *   Chrome and Firefox, mp4/AAC in Safari. Not WAV. MediaRecorder cannot produce WAV without hand
+ *   muxing PCM, and the result is roughly ten times the bytes for the same speech (a minute of 16 kHz
+ *   mono WAV is ~2 MB against ~180 kB of Opus) with nothing gained: every browser plays these back,
+ *   and OpenRouter's transcription endpoint lists webm, ogg, m4a and aac among its accepted formats.
+ *   The extra megabytes would be paid for in the storage quota, the transfer and the federation copy.
+ *
+ *   The microphone track is stopped on every exit path. A forgotten track leaves the browser's
+ *   recording indicator lit, which reads to a user as an application still listening to them.
+ * @structure isRecordingSupported() · pickMimeType() · startRecording() · fmtDuration()
+ * @usage const rec = await startRecording({ onLevel, maxSeconds }); const file = await rec.stop();
+ * @version-history
+ *   v1.0.0 — 2026-08-01 — Initial version for inbox voice messages + the settings STT test.
+ */
+
+/** Preference order: Opus where available (smallest for speech), then whatever the browser offers. */
+const CANDIDATES = [
+  'audio/webm;codecs=opus',
+  'audio/webm',
+  'audio/ogg;codecs=opus',
+  'audio/mp4',           // Safari
+  'audio/aac',
+];
+
+export function isRecordingSupported() {
+  return typeof window !== 'undefined'
+    && typeof window.MediaRecorder !== 'undefined'
+    && !!navigator?.mediaDevices?.getUserMedia;
+}
+
+/** The first candidate this browser admits to supporting, or '' to let it choose its own default. */
+export function pickMimeType() {
+  if (typeof window === 'undefined' || !window.MediaRecorder?.isTypeSupported) return '';
+  for (const type of CANDIDATES) {
+    try { if (window.MediaRecorder.isTypeSupported(type)) return type; } catch { /* keep looking */ }  // eslint-disable-line aimeat/no-silent-catch -- a browser refusing to answer about a type IS the answer: try the next one
+  }
+  return '';
+}
+
+/** File extension for a recorded blob, from its mime type. */
+function extFor(mime) {
+  if (!mime) return 'webm';
+  if (mime.includes('mp4')) return 'm4a';
+  if (mime.includes('aac')) return 'aac';
+  if (mime.includes('ogg')) return 'ogg';
+  return 'webm';
+}
+
+/** Seconds → "0:07" / "12:03". */
+export function fmtDuration(seconds) {
+  const s = Math.max(0, Math.round(Number(seconds) || 0));
+  return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`;
+}
+
+/**
+ * Start recording from the default microphone.
+ *
+ * @param {object} [opts]
+ * @param {(level: number) => void} [opts.onLevel]  0..1 input level, ~20/s while recording
+ * @param {(seconds: number) => void} [opts.onTick] elapsed seconds, once a second
+ * @param {number} [opts.maxSeconds]                hard stop; the recording is kept, not discarded
+ * @param {() => void} [opts.onAutoStop]            fired when maxSeconds ended the recording
+ * @returns {Promise<{ stop: () => Promise<{file: File, durationSeconds: number}>, cancel: () => void, mimeType: string }>}
+ */
+export async function startRecording(opts = {}) {
+  if (!isRecordingSupported()) {
+    throw new Error('unsupported');
+  }
+  const stream = await navigator.mediaDevices.getUserMedia({
+    // Speech, not music: the browser's own cleanup is worth more than the fidelity it costs.
+    audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true },
+  });
+
+  const mimeType = pickMimeType();
+  const recorder = new MediaRecorder(stream, mimeType ? { mimeType } : undefined);
+  const chunks = [];
+  const startedAt = Date.now();
+  let stopped = false;
+
+  // Level metering. Deliberately minimal: a number, not a waveform. Its whole job is to answer
+  // "is the microphone hearing me", which a silent countdown cannot.
+  let audioCtx = null;
+  let rafId = 0;
+  if (opts.onLevel && typeof window.AudioContext !== 'undefined') {
+    try {
+      audioCtx = new AudioContext();
+      const source = audioCtx.createMediaStreamSource(stream);
+      const analyser = audioCtx.createAnalyser();
+      analyser.fftSize = 512;
+      source.connect(analyser);
+      const buf = new Uint8Array(analyser.frequencyBinCount);
+      const tick = () => {
+        analyser.getByteTimeDomainData(buf);
+        let peak = 0;
+        for (let i = 0; i < buf.length; i++) peak = Math.max(peak, Math.abs(buf[i] - 128) / 128);
+        opts.onLevel(peak);
+        rafId = requestAnimationFrame(tick);
+      };
+      rafId = requestAnimationFrame(tick);
+    } catch (err) {
+      // Metering is decoration; a browser that refuses an AudioContext still records fine.
+      audioCtx = null;
+      if (typeof console !== 'undefined') console.warn('[audio-recorder] level meter unavailable:', err?.message || err);
+    }
+  }
+
+  let tickTimer = 0;
+  if (opts.onTick) {
+    tickTimer = setInterval(() => opts.onTick(Math.floor((Date.now() - startedAt) / 1000)), 1000);
+  }
+
+  let autoStopTimer = 0;
+  if (opts.maxSeconds > 0) {
+    autoStopTimer = setTimeout(() => {
+      if (!stopped && recorder.state === 'recording') {
+        recorder.stop();               // the blob is KEPT — hitting the cap is not losing the take
+        opts.onAutoStop?.();
+      }
+    }, opts.maxSeconds * 1000);
+  }
+
+  recorder.ondataavailable = (e) => { if (e.data && e.data.size > 0) chunks.push(e.data); };
+
+  const teardown = () => {
+    stopped = true;
+    if (tickTimer) clearInterval(tickTimer);
+    if (autoStopTimer) clearTimeout(autoStopTimer);
+    if (rafId) cancelAnimationFrame(rafId);
+    if (audioCtx) audioCtx.close().catch(() => { /* already closing */ });   // eslint-disable-line aimeat/no-silent-catch -- closing a closed context is not an error worth reporting
+    // The one line that must never be skipped: leave this out and the browser keeps showing the
+    // user that something is recording them.
+    stream.getTracks().forEach((tr) => tr.stop());
+  };
+
+  recorder.start();
+
+  return {
+    mimeType: recorder.mimeType || mimeType || 'audio/webm',
+    /** Stop and resolve with the recorded File plus its measured length. */
+    stop() {
+      return new Promise((resolve, reject) => {
+        if (stopped) { reject(new Error('already stopped')); return; }
+        recorder.onstop = () => {
+          const durationSeconds = Math.max(0.1, (Date.now() - startedAt) / 1000);
+          teardown();
+          const type = recorder.mimeType || mimeType || 'audio/webm';
+          const stamp = new Date().toISOString().replace(/[:.]/g, '-');
+          const file = new File(chunks, `voice-${stamp}.${extFor(type)}`, { type });
+          resolve({ file, durationSeconds });
+        };
+        recorder.onerror = (e) => { teardown(); reject(e?.error || new Error('recording failed')); };
+        // Already inactive (an auto-stop at maxSeconds got there first): resolve from the chunks we
+        // have instead of waiting for an onstop that will never fire.
+        if (recorder.state === 'recording') recorder.stop();
+        else recorder.onstop?.(new Event('stop'));
+      });
+    },
+    /** Throw the take away and release the microphone. */
+    cancel() {
+      if (stopped) return;
+      recorder.onstop = () => {};
+      try { if (recorder.state === 'recording') recorder.stop(); } catch { /* already stopping */ }   // eslint-disable-line aimeat/no-silent-catch -- the goal is releasing the microphone below, which happens either way
+      teardown();
+    },
+  };
+}

package/dist/public/js/services/messages.js

@@ -5,9 +5,12 @@
  *   block), plus small storage helpers used to upload and resolve message attachments.
  * @structure send / listInbox / listConversations / getConversation / markConversationRead /
  *   markRead / deleteMessage / listRequests / acceptRequest / blockContact / listContacts /
- *   uploadAttachment / attachmentUrl
+ *   uploadAttachment / attachmentUrl / transcribeAttachment
  * @usage import * as messages from '/js/services/messages.js';
  * @version-history
+ *   v1.4.0 -- 2026-08-01 -- Voice messages: uploadAttachment carries a recording's measured
+ *     `duration_seconds` into the descriptor (so a thread can show "0:14" before fetching the audio),
+ *     and transcribeAttachment() turns one voice attachment into text on the caller's own copy.
  *   v1.0.0 -- 2026-06-16 -- Initial creation for user-to-user messaging (layer 5: Inbox tab).
  *   v1.0.1 -- 2026-06-19 -- JSDoc type annotations for frontend type-checking
  *   v1.1.0 -- 2026-06-23 -- send() carries the optional `interactive` payload (federated AskUserQuestion).
@@ -177,7 +180,23 @@ export async function uploadAttachment(file, kindOverride) {
   const kind = kindOverride || (mime.startsWith('image/') ? 'image'
     : mime.startsWith('audio/') ? 'audio'
     : mime.startsWith('video/') ? 'video' : 'file');
-  return { storage_key: key, mime, size: file.size, kind, name: file.name };
+  const desc = { storage_key: key, mime, size: file.size, kind, name: file.name };
+  // A voice recording arrives with its measured length attached (composer addRecording). Carrying it
+  // in the descriptor lets the recipient's thread show "0:14" without downloading the audio first.
+  if (Number(file.durationSeconds) > 0) desc.duration_seconds = Number(file.durationSeconds);
+  return desc;
+}
+
+/** Transcribe a voice attachment on the caller's own copy of a message, with the caller's own AI key.
+ *  Idempotent server-side: a second call returns the stored transcript instead of paying again. */
+export async function transcribeAttachment(messageId, attachmentId, opts = {}) {
+  return api(`/v1/messages/${enc(messageId)}/attachments/${enc(attachmentId)}/transcribe`, {
+    method: 'POST',
+    body: JSON.stringify({ force: !!opts.force, model: opts.model, language: opts.language }),
+    // Speech-to-text is a provider round trip over an audio file; the default 30 s client timeout
+    // cuts a perfectly good transcription off at the knees.
+    timeoutMs: 180_000,
+  });
 }
 
 /** Resolve a presigned, no-auth download URL for one of the caller's own storage keys (for <img>). */

package/dist/public/spa.html

@@ -97,6 +97,7 @@
   <link rel="stylesheet" href="/css/components/markdown.css">
   <link rel="stylesheet" href="/css/components/contact-picker.css">
   <link rel="stylesheet" href="/css/components/app-sandbox.css">
+  <link rel="stylesheet" href="/css/components/voice-recorder.css">
   <link rel="stylesheet" href="/css/views/app-grant.css">
   <link rel="stylesheet" href="/css/views/invite-accept.css">
   <!-- View CSS preloaded so they are ready before any view renders (prevents FOUC) -->
@@ -148,6 +149,7 @@
       "/js/recents.js": "/js/recents.js",
       "/js/services/admin.js": "/js/services/admin.js",
       "/js/services/agents.js": "/js/services/agents.js",
+      "/js/services/audio-recorder.js": "/js/services/audio-recorder.js",
       "/js/services/ecosystem.js": "/js/services/ecosystem.js",
       "/js/services/apps.js": "/js/services/apps.js",
       "/js/services/auth.js": "/js/services/auth.js",
@@ -189,6 +191,7 @@
       "/js/components/tag-cloud.js": "/js/components/tag-cloud.js",
       "/js/components/tag-editor.js": "/js/components/tag-editor.js",
       "/components/Modal.js": "/components/Modal.js",
+      "/components/VoiceRecorder.js": "/components/VoiceRecorder.js",
       "/components/useViewCSS.js": "/components/useViewCSS.js",
       "/components/Markdown.js": "/components/Markdown.js",
       "/components/LinkPreview.js": "/components/LinkPreview.js",

package/dist/public/views/profile/access-tab/connections.js

@@ -0,0 +1,264 @@
+/**
+ * @file views/profile/access-tab/connections.js
+ * @description Connected Accounts section (TARGET-057) — the accounts the owner holds at external
+ *   services, and the one place they can all be seen and taken away.
+ *
+ *   IT LIVES HERE AND NOT IN AN APP because a person must be able to find everything they have
+ *   given a third party in ONE place. An app-by-app panel means that revoking an account requires
+ *   remembering which app created it, which is the same as not being able to revoke it.
+ *
+ *   `needs_reauth` is rendered as a BUTTON THAT FIXES IT, not as an error. It is the expected end of
+ *   a token's life, it happens to every long-lived connection eventually, and showing it in red
+ *   turns a two-click repair into a support question.
+ * @structure ConnectionsSection — GET /v1/connections + /providers, connect via a pop-up, revoke.
+ * @version-history
+ *   v1.0.0 — 2026-08-02 — Initial (TARGET-057 phase 3).
+ */
+import { h } from 'preact';
+import { useState, useEffect, useCallback } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { escHtml } from '/js/utils.js';
+import { useConfirm } from '/components/Modal.js';
+import { apiGet, apiPost, apiDelete } from '/js/api.js';
+import { swallowed } from '/js/swallowed.js';
+
+/** Things a user must be told BEFORE they try, because the failure they prevent is unreadable. */
+const NOTES = {
+  mastodon: ['cxNoteMastodonNeeds', 'cxNoteMastodonBefore'],
+  youtube: ['cxNoteYoutubeBefore'],
+  bluesky: ['cxNoteBlueskyNeeds', 'cxNoteBlueskyWhere', 'cxNoteBlueskyBefore'],
+};
+
+export function ConnectionsSection({ showToast }) {
+  const [connections, setConnections] = useState([]);
+  const [providers, setProviders] = useState([]);
+  const [instances, setInstances] = useState({});
+  // Supplied credentials, per provider per field. Held only until the POST; nothing here is
+  // persisted client-side, and the server never sends any of it back.
+  const [fields, setFields] = useState({});
+  const [busy, setBusy] = useState('');
+  const [unavailable, setUnavailable] = useState(false);
+  const { confirm, ConfirmUI } = useConfirm();
+
+  const load = useCallback(async () => {
+    try {
+      const [list, provs] = await Promise.all([
+        apiGet('/v1/connections'),
+        apiGet('/v1/connections/providers'),
+      ]);
+      // apiGet returns the WHOLE envelope, so the payload is under .data. Reading it a level
+      // too high yields undefined -> [], which renders as a believable empty state rather than an
+      // error, and that is exactly how this stayed wrong through a typecheck and a lint.
+      setConnections(list?.data?.connections || []);
+      setProviders(provs?.data?.providers || []);
+      setUnavailable(false);
+    } catch (err) {
+      // A node with the capability switched off answers 503. Saying so beats an empty list that
+      // reads as "you have no accounts".
+      swallowed('connections-load', err);
+      setUnavailable(true);
+    }
+  }, []);
+
+  useEffect(() => { void load(); }, [load]);
+  // Every tab showing server data re-reads on a live update.
+  useEffect(() => {
+    const handler = () => void load();
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, [load]);
+
+/**
+ * Wait for the round to finish, WITHOUT touching the pop-up window.
+ *
+ * This node sets a Cross-Origin-Opener-Policy, which severs the opener relationship as soon as the
+ * pop-up navigates to the provider. `win.closed` is then unreadable — the first version of this
+ * polled it and logged ten "COOP would block the window.closed call" errors per connection while
+ * appearing to work, because the flow completed for other reasons.
+ *
+ * Two signals instead, and neither goes near the window:
+ *   - the done page announces on a same-origin BroadcastChannel, which COOP does not affect
+ *   - the connection list is polled, which is what ACTUALLY decides success and also covers the
+ *     user who closes the pop-up before it ever reaches the done page
+ *
+ * Resolves either way; gives up after the timeout rather than waiting forever on a cancelled round.
+ */
+  const waitForConnection = useCallback(async (countBefore) => {
+    const DEADLINE = Date.now() + 180_000;
+    let channel = null;
+    let announced = false;
+    try {
+      channel = new BroadcastChannel('aimeat-connect');
+      channel.onmessage = () => { announced = true; };
+    } catch (err) {
+      // Not fatal: the poll below is the one that decides. Logged so the two paths stay
+      // distinguishable when someone is looking at why a connection took four seconds.
+      swallowed('connections-broadcast', err);
+    }
+    try {
+      while (Date.now() < DEADLINE) {
+        await new Promise(r => setTimeout(r, 1200));
+        if (announced) return true;
+        const now = (await apiGet('/v1/connections'))?.data?.connections?.length ?? 0;
+        // A re-authorisation repairs a row rather than adding one, so a count that did not grow is
+        // not proof of failure -- but it is the cheap signal, and the announce covers the rest.
+        if (now > countBefore) return true;
+      }
+      return false;
+    } finally {
+      if (channel) channel.close();
+    }
+  }, []);
+
+  /**
+   * Consent happens at the provider, in a pop-up. Completion is detected by that window closing and
+   * a re-read of the list, because a cross-origin child window cannot be asked what happened to it
+   * — and treating "the window opened" as success would report a cancelled connection as connected.
+   */
+  const connect = useCallback(async (provider) => {
+    setBusy(provider.id);
+    try {
+      const res = await apiPost('/v1/connections/start', {
+        provider: provider.id,
+        instance: instances[provider.id] || undefined,
+        mode: 'personal',
+        return_url: '/connection-done.html',
+      });
+      const url = res?.data?.authorize_url;
+      if (!url) throw new Error('no authorize url');
+      const before = (await apiGet('/v1/connections'))?.data?.connections?.length ?? 0;
+      const win = window.open(url, 'aimeat-connect', 'width=620,height=760');
+      if (!win) throw new Error('popup blocked');
+      await waitForConnection(before);
+      await load();
+    } catch (err) {
+      swallowed('connections-start', err);
+      showToast(t('profile.access.cxConnectFailed') || 'Could not start connecting that account');
+    }
+    setBusy('');
+  }, [instances, load, showToast, waitForConnection]);
+
+  /**
+   * The other way to connect: the user supplies a credential and there is no round trip to the
+   * provider's consent screen. Kept separate from connect() because the two must never overlap —
+   * attaching an OAuth provider would be a way to skip its consent screen, and the server refuses
+   * that in both directions.
+   */
+  const attach = useCallback(async (provider) => {
+    setBusy(provider.id);
+    try {
+      await apiPost('/v1/connections/attach', {
+        provider: provider.id,
+        mode: 'personal',
+        fields: fields[provider.id] || {},
+      });
+      // Cleared on success so a secret does not sit in a form field after it has been stored.
+      setFields(f => ({ ...f, [provider.id]: {} }));
+      await load();
+    } catch (err) {
+      swallowed('connections-attach', err);
+      // The server's reason is the useful half here: "that is your account password, not an app
+      // password" is actionable in a way that "could not connect" is not.
+      showToast(err?.message || t('profile.access.cxConnectFailed') || 'Could not connect that account');
+    }
+    setBusy('');
+  }, [fields, load, showToast]);
+
+  // useConfirm is (message, onConfirm, opts) — positional, with a callback. Passing it an options
+  // object and awaiting the result renders an EMPTY dialog and never runs the action: the owner is
+  // asked to confirm losing an account without being told which one, and pressing Confirm does
+  // nothing. Both halves of that were live until the browser pass caught them.
+  const revoke = useCallback((conn) => {
+    const message = (t('profile.access.cxConfirm')
+      || 'Disconnect {account}? Apps that publish to it will stop being able to.')
+      .replace('{account}', conn.accountLabel);
+    confirm(message, async () => {
+      try {
+        const res = await apiDelete('/v1/connections/' + encodeURIComponent(conn.id));
+        // Honest about which half happened: a token still live at the provider is something the
+        // owner may want to go and remove there themselves.
+        showToast(res?.data?.told_provider
+          ? (t('profile.access.cxRevokedTold') || 'Disconnected, and the service was told.')
+          : (t('profile.access.cxRevokedLocal') || 'Disconnected here. The service could not be reached, so check it there too.'));
+        await load();
+      } catch (err) {
+        swallowed('connections-revoke', err);
+        showToast(t('profile.access.cxRevokeFailed') || 'Could not disconnect that account');
+      }
+    }, {
+      title: t('profile.access.cxDisconnect') || 'Disconnect',
+      confirmLabel: t('profile.access.cxDisconnect') || 'Disconnect',
+      danger: true,
+    });
+  }, [confirm, load, showToast]);
+
+  if (unavailable) return null;
+
+  return html`
+    <div class="access-section">
+      <${ConfirmUI} />
+      <h3 class="access-h3">${t('profile.access.cxTitle') || 'Connected accounts'}</h3>
+      <p class="text-meta-sm">${t('profile.access.cxIntro')
+        || 'Accounts you have connected at other services. The credential stays on this node — an app is only ever told which account it may use, never the account itself.'}</p>
+
+      ${connections.length === 0 && html`
+        <div class="mem-item"><span class="adm-text-dim">${t('profile.access.cxEmpty') || 'No connected accounts yet.'}</span></div>
+      `}
+
+      ${connections.map(c => html`
+        <div class="mem-item" key=${c.id}>
+          <span class="mem-key">${escHtml(c.accountLabel)}</span>
+          <span class="text-meta-sm">
+            ${escHtml(c.provider)}${c.status === 'needs_reauth'
+              ? ' · ' + (t('profile.access.cxNeedsReauth') || 'needs reconnecting')
+              : ''}
+          </span>
+          ${c.status === 'needs_reauth' && html`
+            <button class="btn-outline" onClick=${() => connect({ id: c.provider })}>
+              ${t('profile.access.cxReconnect') || 'Reconnect'}
+            </button>
+          `}
+          <button class="btn-ghost btn-danger" onClick=${() => revoke(c)}>
+            ${t('profile.access.cxDisconnect') || 'Disconnect'}
+          </button>
+        </div>
+      `)}
+
+      ${providers.map(p => html`
+        <div class="access-cx-add" key=${p.id}>
+          <div class="mem-item access-fed-add">
+            ${p.instanceScoped && html`
+              <input type="text" class="input-field input-sm"
+                placeholder=${t('profile.access.cxInstance') || 'instance address, e.g. mastodon.social'}
+                value=${instances[p.id] || ''}
+                onInput=${e => setInstances({ ...instances, [p.id]: e.target.value })} />
+            `}
+            ${(p.attachFields || []).map(f => html`
+              <input key=${f.name}
+                type=${f.secret ? 'password' : 'text'}
+                class="input-field input-sm"
+                autocomplete=${f.secret ? 'new-password' : 'off'}
+                placeholder=${f.placeholder || f.label}
+                aria-label=${f.label}
+                value=${(fields[p.id] || {})[f.name] || ''}
+                onInput=${e => setFields(prev => ({
+                  ...prev, [p.id]: { ...(prev[p.id] || {}), [f.name]: e.target.value },
+                }))} />
+            `)}
+            <button class="btn-outline" disabled=${busy === p.id}
+              onClick=${() => (p.attachFields ? attach(p) : connect(p))}>
+              ${busy === p.id
+                ? (t('profile.access.cxConnecting') || 'Connecting…')
+                : `${t('profile.access.cxConnect') || 'Connect'} ${escHtml(p.label)}`}
+            </button>
+          </div>
+          ${(NOTES[p.id] || []).map(key => html`
+            <p class="text-meta-sm" key=${key}>${t('profile.access.' + key)}</p>
+          `)}
+        </div>
+      `)}
+    </div>
+  `;
+}

package/dist/public/views/profile/access-tab.js

@@ -40,6 +40,7 @@ import { SharingGroupsSection } from './access-tab/sharing-groups.js';
 import { AgentDefaultsSection } from './access-tab/agent-defaults.js';
 import { ConnectedAppsSection } from './access-tab/connected-apps.js';
 import { AccessTokensSection } from './access-tab/access-tokens.js';
+import { ConnectionsSection } from './access-tab/connections.js';
 import { swallowed } from '/js/swallowed.js';
 
 /* ═══════════════════════════════════════════════════════════════════
@@ -252,6 +253,7 @@ export default function AccessTab({ session, showToast }) {
     ${overview !== undefined ? html`
       <${ConnectedAppsSection} showToast=${showToast} initial=${overview?.appGrants} />
       <${AccessTokensSection} session=${session} showToast=${showToast} initial=${overview?.accessTokens} />
+      <${ConnectionsSection} showToast=${showToast} />
       <${SharingGroupsSection} showToast=${showToast} initial=${overview?.groups} />
       <${AgentDefaultsSection} showToast=${showToast} initial=${overview?.agentDefaults} />
     ` : null}