From 59858bc413af72a76ca63b6f4c3d2efcec2f2b0f Mon Sep 17 00:00:00 2001
From: Oleksii Dolhov <oleksii.dolhov@gmail.com>
Date: Thu, 25 Jun 2026 12:40:25 +0300
Subject: [PATCH 1/4] feat(ui): move channel config into dialogs + VoIP surface
 (#19)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Builds on the Sharing-tab reframe (#18). Replaces the inline collapsible
channel panels with compact summary rows that open the existing config panels
in a modal — the tab stays a clean summary instead of a wall of forms.

- New ChannelConfigDialog.vue — Teleport modal (backdrop + Esc close, scrollable
  body) matching the ConfirmDialog idiom.
- New ChannelConfigRow.vue — summary row showing connected/off + a brief status
  (channel/handle/number), a Configure/Manage button that opens the dialog, and
  a lightweight status fetch (shared `api` client) that refetches on dialog
  close so the row reflects edits. The 4 channel panels render untouched in the
  dialog slot — no loss of functionality.
- SharingPanel wires Slack/Telegram/WhatsApp/VoIP through ChannelConfigRow with
  per-channel status derivations. VoIP (previously backend-only) now has its
  Sharing UI surface, gated on `voip_available`.
- Distribution (public links, file sharing) keeps the collapsible disclosure —
  out of scope for the channel-dialog change.

Frontend-only; no API changes. Verified: 3 SFCs compile (vue/compiler-sfc),
design-token check passes, and Vite transforms all modules on the live dev
server (HTTP 200).

Related to abilityai/trinity-enterprise#19

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/components/ChannelConfigDialog.vue    | 66 ++++++++++++++
 .../src/components/ChannelConfigRow.vue       | 88 +++++++++++++++++++
 src/frontend/src/components/SharingPanel.vue  | 67 +++++++++++---
 3 files changed, 210 insertions(+), 11 deletions(-)
 create mode 100644 src/frontend/src/components/ChannelConfigDialog.vue
 create mode 100644 src/frontend/src/components/ChannelConfigRow.vue

diff --git a/src/frontend/src/components/ChannelConfigDialog.vue b/src/frontend/src/components/ChannelConfigDialog.vue
new file mode 100644
index 000000000..8116bfe39
--- /dev/null
+++ b/src/frontend/src/components/ChannelConfigDialog.vue
@@ -0,0 +1,66 @@
+<template>
+  <Teleport to="body">
+    <div v-if="open" class="fixed z-50 inset-0 overflow-y-auto" role="dialog" aria-modal="true" :aria-label="title">
+      <div class="flex items-end sm:items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
+        <!-- Backdrop -->
+        <div
+          class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-75 transition-opacity"
+          @click="$emit('close')"
+        ></div>
+
+        <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
+
+        <!-- Dialog -->
+        <div
+          class="inline-block align-bottom sm:align-middle bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 w-full sm:max-w-2xl"
+          @click.stop
+        >
+          <!-- Header -->
+          <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+            <h3 class="flex items-center gap-2 text-base font-medium text-gray-900 dark:text-white">
+              <span v-if="icon" class="text-lg leading-none" aria-hidden="true">{{ icon }}</span>
+              {{ title }}
+            </h3>
+            <button
+              type="button"
+              class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 focus:outline-none focus:ring-1 focus:ring-action-primary-500 rounded"
+              aria-label="Close"
+              @click="$emit('close')"
+            >
+              <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- Body (the channel config panel) -->
+          <div class="px-6 py-5 max-h-[70vh] overflow-y-auto">
+            <slot />
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { watch, onUnmounted } from 'vue'
+
+const props = defineProps({
+  open: { type: Boolean, default: false },
+  title: { type: String, required: true },
+  icon: { type: String, default: '' },
+})
+
+const emit = defineEmits(['close'])
+
+// Close on Escape while open.
+const onKey = (e) => {
+  if (e.key === 'Escape') emit('close')
+}
+watch(() => props.open, (isOpen) => {
+  if (isOpen) document.addEventListener('keydown', onKey)
+  else document.removeEventListener('keydown', onKey)
+})
+onUnmounted(() => document.removeEventListener('keydown', onKey))
+</script>
diff --git a/src/frontend/src/components/ChannelConfigRow.vue b/src/frontend/src/components/ChannelConfigRow.vue
new file mode 100644
index 000000000..8ddb1cf49
--- /dev/null
+++ b/src/frontend/src/components/ChannelConfigRow.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="flex items-center gap-3 px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800">
+    <!-- Channel glyph -->
+    <span class="shrink-0 text-xl leading-none" aria-hidden="true">{{ icon }}</span>
+
+    <!-- Title + status -->
+    <div class="min-w-0 flex-1">
+      <div class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">{{ title }}</div>
+      <div class="mt-0.5 flex items-center gap-1.5 text-xs">
+        <template v-if="loading">
+          <span class="inline-block w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-600 animate-pulse"></span>
+          <span class="text-gray-400 dark:text-gray-500">Checking…</span>
+        </template>
+        <template v-else-if="status.connected">
+          <span
+            class="inline-block w-2 h-2 rounded-full"
+            :class="status.warn ? 'bg-status-warning-500' : 'bg-status-success-500'"
+          ></span>
+          <span class="text-gray-600 dark:text-gray-300 truncate">{{ status.label || 'Connected' }}</span>
+          <span v-if="status.warn" class="text-status-warning-600 dark:text-status-warning-400">· setup needed</span>
+        </template>
+        <template v-else>
+          <span class="inline-block w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-600"></span>
+          <span class="text-gray-400 dark:text-gray-500">Not connected</span>
+        </template>
+      </div>
+    </div>
+
+    <!-- Configure -->
+    <button
+      type="button"
+      class="shrink-0 inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-1 focus:ring-action-primary-500"
+      @click="dialogOpen = true"
+    >
+      {{ status.connected ? 'Manage' : 'Configure' }}
+    </button>
+
+    <!-- Config dialog: the channel panel renders inside, untouched -->
+    <ChannelConfigDialog :open="dialogOpen" :title="title" :icon="icon" @close="onDialogClose">
+      <slot />
+    </ChannelConfigDialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, watch } from 'vue'
+import api from '../api'
+
+const props = defineProps({
+  title: { type: String, required: true },
+  icon: { type: String, default: '🔗' },
+  agentName: { type: String, required: true },
+  // Channel status endpoint (e.g. `/api/agents/{name}/slack/channel`).
+  statusUrl: { type: String, required: true },
+  // (responseData) => ({ connected: boolean, label?: string, warn?: boolean })
+  deriveStatus: { type: Function, required: true },
+})
+
+const loading = ref(true)
+const dialogOpen = ref(false)
+const status = reactive({ connected: false, label: '', warn: false })
+
+async function fetchStatus() {
+  loading.value = true
+  try {
+    const { data } = await api.get(props.statusUrl)
+    const s = props.deriveStatus(data) || {}
+    status.connected = !!s.connected
+    status.label = s.label || ''
+    status.warn = !!s.warn
+  } catch {
+    // Not configured / not permitted / feature off — show "Not connected".
+    status.connected = false
+    status.label = ''
+    status.warn = false
+  } finally {
+    loading.value = false
+  }
+}
+
+// Refetch after the dialog closes so the row reflects edits made inside it.
+function onDialogClose() {
+  dialogOpen.value = false
+  fetchStatus()
+}
+
+watch(() => [props.agentName, props.statusUrl], fetchStatus, { immediate: true })
+</script>
diff --git a/src/frontend/src/components/SharingPanel.vue b/src/frontend/src/components/SharingPanel.vue
index 4ea8becd1..379101241 100644
--- a/src/frontend/src/components/SharingPanel.vue
+++ b/src/frontend/src/components/SharingPanel.vue
@@ -96,33 +96,53 @@
       </div>
     </div>
 
-    <!-- Channels: compact summary rows (detailed config moves to dialogs in #19) -->
+    <!-- Channels: compact summary rows; config opens in a dialog (#19) -->
     <div>
       <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-1">Channels</h4>
       <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
-        Connect this agent to messaging channels. Expand a row to configure it.
+        Connect this agent to messaging channels. Use <strong>Configure</strong> to set one up.
       </p>
       <div class="space-y-2">
-        <ChannelDisclosure title="Slack" subtitle="@mentions in a Slack channel" icon="💬">
+        <ChannelConfigRow
+          title="Slack"
+          icon="💬"
+          :agent-name="agentName"
+          :status-url="`/api/agents/${agentName}/slack/channel`"
+          :derive-status="slackStatus"
+        >
           <SlackChannelPanel :agent-name="agentName" />
-        </ChannelDisclosure>
+        </ChannelConfigRow>
 
-        <ChannelDisclosure title="Telegram" subtitle="DMs and group chats via a bot" icon="✈️">
+        <ChannelConfigRow
+          title="Telegram"
+          icon="✈️"
+          :agent-name="agentName"
+          :status-url="`/api/agents/${agentName}/telegram`"
+          :derive-status="telegramStatus"
+        >
           <TelegramChannelPanel :agent-name="agentName" />
-        </ChannelDisclosure>
+        </ChannelConfigRow>
 
-        <ChannelDisclosure title="WhatsApp" subtitle="DMs via Twilio" icon="📱">
+        <ChannelConfigRow
+          title="WhatsApp"
+          icon="📱"
+          :agent-name="agentName"
+          :status-url="`/api/agents/${agentName}/whatsapp`"
+          :derive-status="whatsappStatus"
+        >
           <WhatsAppChannelPanel :agent-name="agentName" />
-        </ChannelDisclosure>
+        </ChannelConfigRow>
 
-        <ChannelDisclosure
+        <ChannelConfigRow
           v-if="sessionsStore.voipAvailable"
           title="Voice calls"
-          subtitle="Outbound phone calls via Twilio + Gemini Live"
           icon="📞"
+          :agent-name="agentName"
+          :status-url="`/api/agents/${agentName}/voip`"
+          :derive-status="voipStatus"
         >
           <VoipChannelPanel :agent-name="agentName" />
-        </ChannelDisclosure>
+        </ChannelConfigRow>
       </div>
     </div>
 
@@ -152,6 +172,7 @@ import { useAuthStore } from '../stores/auth'
 import { useNotification } from '../composables'
 import { useSessionsStore } from '../stores/sessions'
 import ChannelDisclosure from './ChannelDisclosure.vue'
+import ChannelConfigRow from './ChannelConfigRow.vue'
 import PublicLinksPanel from './PublicLinksPanel.vue'
 import SlackChannelPanel from './SlackChannelPanel.vue'
 import TelegramChannelPanel from './TelegramChannelPanel.vue'
@@ -182,6 +203,30 @@ const loadAgent = () => {
   emit('agent-updated')
 }
 
+// ---------------------------------------------------------------------------
+// Channel summary-row status derivations (#19). Each maps a channel's GET
+// response to { connected, label, warn } for the compact row; the full config
+// panel renders in the row's Configure dialog.
+// ---------------------------------------------------------------------------
+const slackStatus = (d) => ({
+  connected: !!d?.bound,
+  label: d?.bound ? `#${d.channel_name}` : '',
+})
+const telegramStatus = (d) => ({
+  connected: !!d?.configured,
+  label: d?.configured && d.bot_username ? `@${d.bot_username}` : '',
+  warn: !!d?.configured && !d?.webhook_url,
+})
+const whatsappStatus = (d) => ({
+  connected: !!d?.configured,
+  label: d?.configured ? (d.from_number || '') : '',
+})
+const voipStatus = (d) => ({
+  connected: !!d?.configured,
+  label: d?.configured ? `${d.from_number || ''}${d.enabled ? '' : ' (disabled)'}` : '',
+  warn: !!d?.configured && !d?.enabled,
+})
+
 // ---------------------------------------------------------------------------
 // External access policy + pending requests (Issue #311, reframed by #18)
 // ---------------------------------------------------------------------------

From bf5234f7364e29ac0ce24b1c927dc8c55ddb124e Mon Sep 17 00:00:00 2001
From: Oleksii Dolhov <oleksii.dolhov@gmail.com>
Date: Thu, 25 Jun 2026 13:02:19 +0300
Subject: [PATCH 2/4] fix(ui): mount channel config dialog only when open (no
 row layout collapse)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A closed ChannelConfigDialog should collapse to Teleport comment nodes, but
under some dev-server HMR states its slotted panel rendered inline as a flex
child of the channel row, squeezing the label (esp. WhatsApp, whose panel is
the widest) to zero width.

Gate the dialog with v-if="dialogOpen" in ChannelConfigRow so the closed dialog
— and its slotted panel — never participates in the row's flex layout, and
mount the panel on demand. Make the dialog's Escape handler bind immediately so
it still works when mounted already-open.

Related to abilityai/trinity-enterprise#19

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/frontend/src/components/ChannelConfigDialog.vue | 5 +++--
 src/frontend/src/components/ChannelConfigRow.vue    | 6 ++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/components/ChannelConfigDialog.vue b/src/frontend/src/components/ChannelConfigDialog.vue
index 8116bfe39..3967e6fce 100644
--- a/src/frontend/src/components/ChannelConfigDialog.vue
+++ b/src/frontend/src/components/ChannelConfigDialog.vue
@@ -54,13 +54,14 @@ const props = defineProps({
 
 const emit = defineEmits(['close'])
 
-// Close on Escape while open.
+// Close on Escape while open. `immediate` so it also binds when the dialog is
+// mounted already-open (parent gates mount with v-if="dialogOpen").
 const onKey = (e) => {
   if (e.key === 'Escape') emit('close')
 }
 watch(() => props.open, (isOpen) => {
   if (isOpen) document.addEventListener('keydown', onKey)
   else document.removeEventListener('keydown', onKey)
-})
+}, { immediate: true })
 onUnmounted(() => document.removeEventListener('keydown', onKey))
 </script>
diff --git a/src/frontend/src/components/ChannelConfigRow.vue b/src/frontend/src/components/ChannelConfigRow.vue
index 8ddb1cf49..6c5bca1f4 100644
--- a/src/frontend/src/components/ChannelConfigRow.vue
+++ b/src/frontend/src/components/ChannelConfigRow.vue
@@ -35,8 +35,10 @@
       {{ status.connected ? 'Manage' : 'Configure' }}
     </button>
 
-    <!-- Config dialog: the channel panel renders inside, untouched -->
-    <ChannelConfigDialog :open="dialogOpen" :title="title" :icon="icon" @close="onDialogClose">
+    <!-- Config dialog: mounted only while open so the closed dialog (and its
+         slotted panel) never participates in this row's flex layout. The
+         channel panel renders inside the modal, untouched. -->
+    <ChannelConfigDialog v-if="dialogOpen" :open="dialogOpen" :title="title" :icon="icon" @close="onDialogClose">
       <slot />
     </ChannelConfigDialog>
   </div>

From 304c1a1f402fdbaa6571f1311d82a576cf3ac9d9 Mon Sep 17 00:00:00 2001
From: Oleksii Dolhov <oleksii.dolhov@gmail.com>
Date: Thu, 25 Jun 2026 13:15:45 +0300
Subject: [PATCH 3/4] fix(ui): truncate long channel status labels + collapse
 redundant dialog gating
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Addresses code-review findings on PR #1348:

- [Medium] The connected-status label was a flex child without `min-w-0`, so a
  long label (e.g. WhatsApp `whatsapp:+14155238886`) overflowed the row instead
  of clipping. Add `min-w-0` to the label and `shrink-0` to the status dots and
  the "· setup needed" span.
- [Low] Collapse the redundant triple-gating to a single mechanism: the dialog
  is mounted only via the parent `v-if="dialogOpen"`, so drop the now always-true
  `:open` prop and ChannelConfigDialog's internal `v-if="open"` (Escape binds for
  the component's lifetime via onMounted/onUnmounted).

(Skipped the a11y note — focus-trap/scroll-lock would be new behavior beyond the
existing ConfirmDialog parity; not a regression.)

Related to abilityai/trinity-enterprise#19

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/components/ChannelConfigDialog.vue     | 16 ++++++----------
 .../src/components/ChannelConfigRow.vue        | 18 +++++++++---------
 2 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/frontend/src/components/ChannelConfigDialog.vue b/src/frontend/src/components/ChannelConfigDialog.vue
index 3967e6fce..da7401e06 100644
--- a/src/frontend/src/components/ChannelConfigDialog.vue
+++ b/src/frontend/src/components/ChannelConfigDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <div v-if="open" class="fixed z-50 inset-0 overflow-y-auto" role="dialog" aria-modal="true" :aria-label="title">
+    <div class="fixed z-50 inset-0 overflow-y-auto" role="dialog" aria-modal="true" :aria-label="title">
       <div class="flex items-end sm:items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
         <!-- Backdrop -->
         <div
@@ -44,24 +44,20 @@
 </template>
 
 <script setup>
-import { watch, onUnmounted } from 'vue'
+import { onMounted, onUnmounted } from 'vue'
 
-const props = defineProps({
-  open: { type: Boolean, default: false },
+defineProps({
   title: { type: String, required: true },
   icon: { type: String, default: '' },
 })
 
 const emit = defineEmits(['close'])
 
-// Close on Escape while open. `immediate` so it also binds when the dialog is
-// mounted already-open (parent gates mount with v-if="dialogOpen").
+// The dialog only exists while open (the parent gates mount via
+// v-if="dialogOpen"), so bind Escape-to-close for its whole lifetime.
 const onKey = (e) => {
   if (e.key === 'Escape') emit('close')
 }
-watch(() => props.open, (isOpen) => {
-  if (isOpen) document.addEventListener('keydown', onKey)
-  else document.removeEventListener('keydown', onKey)
-}, { immediate: true })
+onMounted(() => document.addEventListener('keydown', onKey))
 onUnmounted(() => document.removeEventListener('keydown', onKey))
 </script>
diff --git a/src/frontend/src/components/ChannelConfigRow.vue b/src/frontend/src/components/ChannelConfigRow.vue
index 6c5bca1f4..34e3b83bc 100644
--- a/src/frontend/src/components/ChannelConfigRow.vue
+++ b/src/frontend/src/components/ChannelConfigRow.vue
@@ -8,19 +8,19 @@
       <div class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">{{ title }}</div>
       <div class="mt-0.5 flex items-center gap-1.5 text-xs">
         <template v-if="loading">
-          <span class="inline-block w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-600 animate-pulse"></span>
+          <span class="inline-block shrink-0 w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-600 animate-pulse"></span>
           <span class="text-gray-400 dark:text-gray-500">Checking…</span>
         </template>
         <template v-else-if="status.connected">
           <span
-            class="inline-block w-2 h-2 rounded-full"
+            class="inline-block shrink-0 w-2 h-2 rounded-full"
             :class="status.warn ? 'bg-status-warning-500' : 'bg-status-success-500'"
           ></span>
-          <span class="text-gray-600 dark:text-gray-300 truncate">{{ status.label || 'Connected' }}</span>
-          <span v-if="status.warn" class="text-status-warning-600 dark:text-status-warning-400">· setup needed</span>
+          <span class="min-w-0 truncate text-gray-600 dark:text-gray-300">{{ status.label || 'Connected' }}</span>
+          <span v-if="status.warn" class="shrink-0 text-status-warning-600 dark:text-status-warning-400">· setup needed</span>
         </template>
         <template v-else>
-          <span class="inline-block w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-600"></span>
+          <span class="inline-block shrink-0 w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-600"></span>
           <span class="text-gray-400 dark:text-gray-500">Not connected</span>
         </template>
       </div>
@@ -35,10 +35,10 @@
       {{ status.connected ? 'Manage' : 'Configure' }}
     </button>
 
-    <!-- Config dialog: mounted only while open so the closed dialog (and its
-         slotted panel) never participates in this row's flex layout. The
-         channel panel renders inside the modal, untouched. -->
-    <ChannelConfigDialog v-if="dialogOpen" :open="dialogOpen" :title="title" :icon="icon" @close="onDialogClose">
+    <!-- Config dialog: mounted only while open (single gate) so the closed
+         dialog and its slotted panel never participate in this row's flex
+         layout. The channel panel renders inside the modal, untouched. -->
+    <ChannelConfigDialog v-if="dialogOpen" :title="title" :icon="icon" @close="onDialogClose">
       <slot />
     </ChannelConfigDialog>
   </div>

From 4828ddc66b3cf51aea89fdf00125de633cda3344 Mon Sep 17 00:00:00 2001
From: Oleksii Dolhov <oleksii.dolhov@gmail.com>
Date: Fri, 26 Jun 2026 15:37:53 +0300
Subject: [PATCH 4/4] =?UTF-8?q?fix(ui):=20modal=20a11y=20for=20ChannelConf?=
 =?UTF-8?q?igDialog=20=E2=80=94=20focus=20mgmt,=20trap,=20scroll=20lock=20?=
 =?UTF-8?q?(#19=20review)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Addresses the open review finding: the dialog had Esc-to-close but no focus
management. Now on open it moves focus into the dialog (first focusable, else
the panel), traps Tab within it (wrap-around), locks background scroll, and
restores focus to the opener (Configure/Manage button) + the prior body
overflow on close. Findings #1 (status-label truncation) and #2 (redundant
dialog gating) were already addressed in earlier commits.

ConfirmDialog.vue shares the same gap; a shared modal primitive applying this
to both is the cleaner longer-term fix.

Verified: 3 SFCs compile, check:tokens passes, clean npm ci + vite build green.
---
 .../src/components/ChannelConfigDialog.vue    | 66 +++++++++++++++++--
 1 file changed, 61 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/components/ChannelConfigDialog.vue b/src/frontend/src/components/ChannelConfigDialog.vue
index da7401e06..dfd5cf8aa 100644
--- a/src/frontend/src/components/ChannelConfigDialog.vue
+++ b/src/frontend/src/components/ChannelConfigDialog.vue
@@ -12,7 +12,9 @@
 
         <!-- Dialog -->
         <div
-          class="inline-block align-bottom sm:align-middle bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 w-full sm:max-w-2xl"
+          ref="panelEl"
+          tabindex="-1"
+          class="inline-block align-bottom sm:align-middle bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 w-full sm:max-w-2xl focus:outline-none"
           @click.stop
         >
           <!-- Header -->
@@ -44,7 +46,7 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted } from 'vue'
+import { onMounted, onUnmounted, nextTick, ref } from 'vue'
 
 defineProps({
   title: { type: String, required: true },
@@ -53,11 +55,65 @@ defineProps({
 
 const emit = defineEmits(['close'])
 
+const panelEl = ref(null)
+// Element to restore focus to on close (the Configure/Manage button), and the
+// body overflow value to restore after the scroll lock.
+let prevActive = null
+let prevOverflow = ''
+
+const FOCUSABLE =
+  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+
+const focusables = () => {
+  const root = panelEl.value
+  if (!root) return []
+  return Array.from(root.querySelectorAll(FOCUSABLE)).filter((el) => el.offsetParent !== null)
+}
+
+// Keep Tab within the dialog (simple wrap-around trap).
+const trapTab = (e) => {
+  const items = focusables()
+  if (items.length === 0) {
+    e.preventDefault()
+    panelEl.value?.focus()
+    return
+  }
+  const first = items[0]
+  const last = items[items.length - 1]
+  const active = document.activeElement
+  const outside = !panelEl.value?.contains(active)
+  if (e.shiftKey && (active === first || outside)) {
+    e.preventDefault()
+    last.focus()
+  } else if (!e.shiftKey && (active === last || outside)) {
+    e.preventDefault()
+    first.focus()
+  }
+}
+
 // The dialog only exists while open (the parent gates mount via
-// v-if="dialogOpen"), so bind Escape-to-close for its whole lifetime.
+// v-if="dialogOpen"), so bind these for its whole lifetime.
 const onKey = (e) => {
   if (e.key === 'Escape') emit('close')
+  else if (e.key === 'Tab') trapTab(e)
 }
-onMounted(() => document.addEventListener('keydown', onKey))
-onUnmounted(() => document.removeEventListener('keydown', onKey))
+
+onMounted(() => {
+  prevActive = document.activeElement
+  prevOverflow = document.body.style.overflow
+  document.body.style.overflow = 'hidden'        // scroll lock
+  document.addEventListener('keydown', onKey)
+  // Move focus into the dialog (first focusable, else the panel itself).
+  nextTick(() => {
+    const items = focusables()
+    ;(items[0] || panelEl.value)?.focus()
+  })
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', onKey)
+  document.body.style.overflow = prevOverflow
+  // Restore focus to whatever opened the dialog.
+  if (prevActive && typeof prevActive.focus === 'function') prevActive.focus()
+})
 </script>