dsh-ptc-plus 0.4.8 → 0.5.0

package/src/client-tool-hover.js

@@ -0,0 +1,185 @@
+const HOVER_DWELL_MS = 400
+const SCROLL_IDLE_MS = 350
+
+/** Presentation excerpt only; the expanded row retains the complete record. */
+export function toolHoverExcerpt(text, maxLines) {
+  const prefix = text.slice(0, 1800).replace(/[\uD800-\uDBFF]$/, '')
+  const lines = prefix.split(/\r\n|\r|\n/)
+  const selected = lines.slice(0, maxLines)
+  let truncated = prefix.length < text.length || lines.length > maxLines
+  const bounded = selected.map(line => {
+    if (line.length <= 100) return line
+    truncated = true
+    // Do not leave a dangling UTF-16 high surrogate at the cut.
+    return line.slice(0, 99).replace(/[\uD800-\uDBFF]$/, '') + '…'
+  })
+  return { text: bounded.join('\n'), truncated }
+}
+
+/** Only the owned anchor and preview participate in placement. */
+function placeToolHover(anchor, preview, pointer) {
+  const margin = 12
+  const gap = 10
+  const viewport = window.visualViewport
+  const leftEdge = viewport?.offsetLeft ?? 0
+  const topEdge = viewport?.offsetTop ?? 0
+  const width = viewport?.width ?? window.innerWidth
+  const height = viewport?.height ?? window.innerHeight
+  const rect = anchor.getBoundingClientRect()
+  const previewWidth = Math.min(420, width - margin * 2)
+  const right = pointer === null ? rect.right + gap : pointer[0] + 16
+  const onRight = right + previewWidth <= leftEdge + width - margin
+  const below = Math.max(0, topEdge + height - rect.bottom - gap - margin)
+  const above = Math.max(0, rect.top - topEdge - gap - margin)
+  const onTop = below < 340 && above > below
+  const available = Math.min(360, onRight ? height - margin * 2 : onTop ? above : below)
+  if (available < 100 || width < 100) return false
+  preview.style.width = `${previewWidth}px`
+  preview.style.maxHeight = `${available}px`
+  preview.style.left = onRight ? `${right}px` : `${Math.max(leftEdge + margin,
+    Math.min(rect.left + 16, leftEdge + width - previewWidth - margin))}px`
+  preview.style.top = onRight
+    ? `${Math.max(topEdge + margin, Math.min(pointer?.[1] ?? rect.top,
+      topEdge + height - margin - Math.min(preview.offsetHeight, available)))}px`
+    : onTop ? `${rect.top - gap - Math.min(preview.offsetHeight, available)}px`
+      : `${rect.bottom + gap}px`
+  preview.dataset.placement = onRight ? 'right' : onTop ? 'top' : 'bottom'
+  preview.style.visibility = 'visible'
+  preview.dataset.clipped = String([...preview.querySelectorAll(
+    '.ptcPlusToolHoverContent,.ptcPlusToolHoverSection,.ptcPlusToolHoverDescription,.ptcPlusFeatures,pre',
+  )].some(element => element.scrollHeight > element.clientHeight + 1
+    || element.scrollWidth > element.clientWidth + 1))
+  return true
+}
+
+/**
+ * Passive quick peeks never enter hit testing. Shared capture observers cancel
+ * every pending/visible tool preview on wheel or scroll without cancelling or
+ * redispatching the event. A fresh pointer gesture after idle owns reopening.
+ */
+export function createToolHover(React, createPortal) {
+  const h = React.createElement
+  const subscribers = new Set()
+  let lastScroll = -Infinity
+  const scrolling = () => {
+    lastScroll = Date.now()
+    for (const cancel of subscribers) cancel()
+  }
+  const escaping = event => {
+    if (event.key === 'Escape') for (const cancel of subscribers) cancel()
+  }
+  const subscribe = cancel => {
+    if (subscribers.size === 0) {
+      window.addEventListener('wheel', scrolling, { capture: true, passive: true })
+      window.addEventListener('scroll', scrolling, { capture: true, passive: true })
+      window.addEventListener('keydown', escaping)
+    }
+    subscribers.add(cancel)
+    return () => {
+      subscribers.delete(cancel)
+      if (subscribers.size === 0) {
+        window.removeEventListener('wheel', scrolling, true)
+        window.removeEventListener('scroll', scrolling, true)
+        window.removeEventListener('keydown', escaping)
+        lastScroll = -Infinity
+      }
+    }
+  }
+
+  function ToolHoverAnchor({ disabled, content, children }) {
+    const [visible, setVisible] = React.useState(false)
+    const anchorRef = React.useRef(null)
+    const previewRef = React.useRef(null)
+    const pending = React.useRef(null)
+    const visibleRef = React.useRef(false)
+    const lastPointer = React.useRef(null)
+    const cancelled = React.useRef(false)
+    const clearPending = React.useCallback(() => {
+      if (pending.current !== null) clearTimeout(pending.current)
+      pending.current = null
+    }, [])
+    const dismiss = React.useCallback(() => {
+      clearPending()
+      visibleRef.current = false
+      // Hide the owned surface immediately, even before React's next render.
+      if (previewRef.current !== null) previewRef.current.hidden = true
+      setVisible(false)
+    }, [clearPending])
+    const cancel = React.useCallback(() => {
+      cancelled.current = true
+      dismiss()
+    }, [dismiss])
+    React.useEffect(() => disabled ? undefined : subscribe(cancel), [disabled, cancel])
+    React.useEffect(() => () => clearPending(), [clearPending])
+    React.useLayoutEffect(() => {
+      if (disabled) cancel()
+    }, [disabled, cancel])
+    const show = () => {
+      if (disabled) return
+      cancelled.current = false
+      visibleRef.current = true
+      setVisible(true)
+    }
+    const arm = event => {
+      if (disabled || event.pointerType === 'touch' || visibleRef.current
+        || pending.current !== null || Date.now() - lastScroll < SCROLL_IDLE_MS) return
+      cancelled.current = false
+      pending.current = setTimeout(() => {
+        pending.current = null
+        if (Date.now() - lastScroll >= SCROLL_IDLE_MS && !cancelled.current) show()
+      }, HOVER_DWELL_MS)
+    }
+    React.useLayoutEffect(() => {
+      if (!visible || disabled) return
+      const preview = previewRef.current
+      const anchor = anchorRef.current
+      if (preview === null || anchor === null) return
+      preview.hidden = false
+      if (typeof preview.showPopover === 'function') preview.showPopover()
+      const place = () => {
+        if (!placeToolHover(anchor, preview, lastPointer.current)) dismiss()
+      }
+      place()
+      const observer = typeof ResizeObserver === 'function' ? new ResizeObserver(place) : null
+      observer?.observe(anchor)
+      observer?.observe(preview)
+      window.addEventListener('resize', place)
+      window.visualViewport?.addEventListener('resize', place)
+      return () => {
+        observer?.disconnect()
+        window.removeEventListener('resize', place)
+        window.visualViewport?.removeEventListener('resize', place)
+      }
+    }, [visible, disabled, dismiss, cancel])
+    const preview = !visible || disabled ? null : h('div', {
+      ref: previewRef, className: 'ptcPlusToolHover',
+      popover: typeof HTMLElement.prototype.showPopover === 'function' ? 'manual' : undefined,
+      style: { visibility: 'hidden' },
+      role: 'tooltip',
+    }, content)
+    return h('div', {
+      className: 'ptcPlusTool', ref: anchorRef,
+      onPointerEnter: event => {
+        lastPointer.current = [event.clientX, event.clientY]
+        arm(event)
+      },
+      onPointerMove: event => {
+        const point = lastPointer.current
+        lastPointer.current = [event.clientX, event.clientY]
+        if (point === null || point[0] !== event.clientX || point[1] !== event.clientY) arm(event)
+      },
+      onPointerLeave: () => { lastPointer.current = null; dismiss() },
+      onPointerDownCapture: cancel,
+      onKeyDownCapture: event => { if (event.key === 'Escape') cancel() },
+      onFocusCapture: event => {
+        if (event.target.matches(':focus-visible')) { lastPointer.current = null; clearPending(); show() }
+      },
+      onBlurCapture: event => {
+        if (!event.currentTarget.contains(event.relatedTarget)) dismiss()
+      },
+    }, children, preview === null ? null : typeof createPortal === 'function'
+      ? createPortal(preview, document.body) : preview)
+  }
+
+  return { ToolHoverAnchor }
+}

package/src/client-tool-view.js

@@ -1,4 +1,6 @@
 import { derivePtcToolView } from './client-activity.js'
+import { isHostComponent } from './client-host-compat.js'
+import { createToolHover, toolHoverExcerpt } from './client-tool-hover.js'
 
 /**
  * run_code / edit_run_code tool rows. The row is a pure projection of the
@@ -6,15 +8,16 @@ import { derivePtcToolView } from './client-activity.js'
  * DisclosureRow when the host provides it and an accessible fallback otherwise.
  */
 export function createPtcToolView(React, deps) {
-  const { CodeBlock, DisclosureRow, icons } = deps
+  const { CodeBlock, DisclosureRow, createPortal, icons } = deps
   const h = React.createElement
-  const hasDisclosureRow = typeof DisclosureRow === 'function'
-    || (typeof DisclosureRow === 'object' && DisclosureRow !== null)
+  const hasDisclosureRow = isHostComponent(DisclosureRow)
+  const { ToolHoverAnchor } = createToolHover(React, createPortal)
 
-  function PTCPlusToolRow({ toolName, block, inspect, t }) {
+  function PTCPlusToolRow({ toolName, block, inspect, t, hoverEnabled = true }) {
     const [open, setOpen] = React.useState(false)
     const view = derivePtcToolView(block, toolName)
-    const expandable = view.code !== '' || view.output !== '' || typeof inspect === 'function'
+    const previewable = view.code !== '' || view.output !== ''
+    const expandable = previewable || typeof inspect === 'function'
     const stateKey = {
       running: 'tool.running',
       ok: 'tool.completed',
@@ -35,10 +38,10 @@ export function createPtcToolView(React, deps) {
         stateText === null ? null : h('span', { className: 'ptcPlusToolState' }, stateText),
         summaryText === null ? null : h('span', { className: 'ptcPlusToolSep', 'aria-hidden': true }),
         summaryText === null ? null : h('span', { className: 'ptcPlusToolDescription' }, summaryText))
-    const body = !open ? null : h('div', { className: 'ptcPlusToolBody' },
+    const renderBody = (withInspect) => h('div', { className: 'ptcPlusToolBody' },
       view.code === '' ? null : h('div', { className: 'ptcPlusToolSection' },
         h('span', { className: 'ptcPlusToolSectionLabel' }, t('tool.source')),
-        typeof CodeBlock === 'function'
+        isHostComponent(CodeBlock)
           ? h(CodeBlock, {
             code: view.code, lang: 'typescript', className: 'ptcPlusToolCode',
             copyLabel: t('tool.copy'), copiedLabel: t('tool.copied'),
@@ -51,7 +54,7 @@ export function createPtcToolView(React, deps) {
             className: 'ptcPlusIoText',
             'data-error': view.state === 'error' || undefined,
           }, view.output))),
-      typeof inspect !== 'function' ? null : h('button', {
+      !withInspect || typeof inspect !== 'function' ? null : h('button', {
         type: 'button', className: 'ptcPlusInspect', onClick: inspect,
       }, h(icons.inspect, { 'aria-hidden': true }), t('tool.inspect')))
     const features = view.features.length === 0 ? null : h('div', { className: 'ptcPlusFeatures' },
@@ -62,8 +65,34 @@ export function createPtcToolView(React, deps) {
       feature.detail === '' ? null
         : h('span', { className: 'ptcPlusFeatureDetail', title: feature.detail }, feature.detail))))
     const collapsedContent = h('div', { className: 'ptcPlusToolPreview' }, summaryLine, features)
+    const body = open ? renderBody(true) : null
+    const sourceExcerpt = toolHoverExcerpt(view.code, 6)
+    const outputExcerpt = toolHoverExcerpt(view.output, 3)
+    const preview = h(React.Fragment, null,
+      h('div', { className: 'ptcPlusToolHoverHeader', 'data-state': view.state },
+        h('span', { className: 'ptcPlusToolHoverHeading' },
+          t(toolName === 'edit_run_code' ? 'tool.editPreview' : 'tool.preview')),
+        h('span', { className: 'ptcPlusToolHoverState' }, t(stateKey))),
+      h('div', { className: 'ptcPlusToolHoverContent' },
+        view.description === '' ? null : h('div', { className: 'ptcPlusToolHoverDescription' }, view.description),
+        view.code === '' ? null : h('div', { className: 'ptcPlusToolHoverSection' },
+          h('span', { className: 'ptcPlusToolSectionLabel' }, `${t('tool.source')} · TypeScript`),
+          isHostComponent(CodeBlock) ? h(CodeBlock, {
+            code: sourceExcerpt.text, lang: 'typescript', showHeader: false, lineNumbers: true,
+            className: 'ptcPlusToolCode ptcPlusToolHoverCode',
+          }) : h('pre', { className: 'ptcPlusToolCode ptcPlusToolHoverCode' }, sourceExcerpt.text)),
+        view.output === '' ? null : h('div', { className: 'ptcPlusToolHoverSection' },
+          h('span', { className: 'ptcPlusToolSectionLabel' }, t('tool.result')),
+          h('pre', { className: 'ptcPlusIoText', 'data-error': view.state === 'error' || undefined }, outputExcerpt.text)),
+        features),
+      h('div', { className: 'ptcPlusToolHoverFooter' },
+        h('span', null, t('tool.previewHint')),
+        h('span', { className: 'ptcPlusToolHoverBounded',
+          'data-truncated': sourceExcerpt.truncated || outputExcerpt.truncated || undefined,
+        }, t('tool.previewBounded'))))
+    const wrapRow = anchor => h(ToolHoverAnchor, { disabled: !hoverEnabled || open || !previewable, content: preview }, anchor)
     if (hasDisclosureRow) {
-      return h('div', { className: 'ptcPlusTool' },
+      return wrapRow(
         h(DisclosureRow, {
           icon: expandable
             ? h(icons.chevron, { size: 14 })
@@ -75,11 +104,16 @@ export function createPtcToolView(React, deps) {
           expandOnRowClick: true,
           previewChevron: false,
           keepContentWhenOpen: true,
+          className: 'ptcPlusToolDisclosure',
+          rowClassName: 'ptcPlusToolRow',
+          contentClassName: 'ptcPlusToolDisclosureContent',
+          contentLayoutClassName: 'ptcPlusToolDisclosureLayout',
+          titleClassName: 'ptcPlusToolTitle',
           collapsedContent,
           children: body,
         }))
     }
-    return h('div', { className: 'ptcPlusTool' },
+    return wrapRow(h(React.Fragment, null,
       h('div', {
         className: 'ptcPlusToolSummary', 'data-state': view.state,
         'data-expandable': expandable || undefined,
@@ -103,7 +137,7 @@ export function createPtcToolView(React, deps) {
       h('span', { className: 'ptcPlusToolSep', 'aria-hidden': true }),
       h('span', { className: 'ptcPlusToolDescription' }, summary)),
       features,
-      body)
+      body))
   }
 
   return { PTCPlusToolRow }

package/src/client-transport.js

@@ -7,9 +7,9 @@ import { normalizeReplMemorySnapshot } from '../internal/repl-memory-projection.
  * - observeRepl watches one visible REPL region, retries the watch with bounded
  *   backoff and only reports an observation that still matches the requested
  *   inventory. Everything it starts is aborted by its disposer.
- * - createBindingCommandAvailability publishes one boolean per session for the
- *   `binding` command, keyed by epoch so a late `commands.list` answer can never
- *   revive a subscription that already ended.
+ * - createCommandAccess publishes command availability per session, keyed by
+ *   epoch so late directory replies cannot revive an ended subscription.
+ *   Execution receipts must also match the connection and preset generations.
  */
 export function createReplObserver({ rpc, ctx }) {
   function observeRepl(sessionId, element, memory, onObservation) {
@@ -28,25 +28,33 @@ export function createReplObserver({ rpc, ctx }) {
       previous?.abort()
     }
     const watch = async current => {
+      let receipt
       try {
-        await rpc.call(RPC_CONTRACTS.repl, 'watch', { sessionId }, current.signal)
+        receipt = await rpc.call(RPC_CONTRACTS.repl, 'watch', { sessionId }, current.signal)
       } catch {}
       if (disposed || controller !== current) return
       controller = undefined
       current.abort()
       if (!visible || document.visibilityState === 'hidden') { stop(); return }
+      if (receipt?.ok === true && receipt.value?.changed === true) {
+        retries = 0
+        sync()
+        return
+      }
       const delay = retryDelays[retries++]
       if (delay === undefined) return
       retryTimer = setTimeout(() => { retryTimer = undefined; sync() }, delay)
     }
     const read = async current => {
-      if (!memory.available || memory.entries.length === 0 || memory.observation !== undefined) return
+      if (!memory.available || memory.entries.length === 0) return
       try {
         const result = await rpc.call(RPC_CONTRACTS.repl, 'observe', { sessionId, memory }, current.signal)
         if (disposed || controller !== current || current.signal.aborted || result?.ok !== true || result.value === null) return
         const observed = normalizeReplMemorySnapshot(result.value)
         const { observation, ...inventory } = observed
-        if (observation !== undefined && JSON.stringify(inventory) === JSON.stringify(memory)) onObservation(observed)
+        const { observation: _previousObservation, ...expected } = memory
+        if (!observed.available || (observation !== undefined
+          && JSON.stringify(inventory) === JSON.stringify(expected))) onObservation(observed)
       } catch {}
     }
     const sync = () => {
@@ -78,14 +86,15 @@ export function createReplObserver({ rpc, ctx }) {
   return { observeRepl }
 }
 
-export function createBindingCommandAvailability(scope) {
+export function createCommandAccess(scope, name) {
   const entries = new Map()
   let commandRemote
+  let connectionGeneration = 0
   const entryFor = (sessionId) => {
     const id = String(sessionId)
     let entry = entries.get(id)
     if (entry === undefined) {
-      entry = { available: false, epoch: 0, listeners: new Set() }
+      entry = { available: false, epoch: 0, commandGeneration: 0, listeners: new Set() }
       entry.source = {
         getSnapshot: () => entry.available,
         subscribe(listener) {
@@ -119,7 +128,7 @@ export function createBindingCommandAvailability(scope) {
       const result = await commandRemote?.list(String(sessionId))
       available = result?.ok === true
         && Array.isArray(result.value)
-        && result.value.some(command => command?.name === 'binding')
+        && result.value.some(command => command?.name === name)
     } catch {}
     if (entry.epoch === epoch) publish(entry, available)
   }
@@ -128,10 +137,12 @@ export function createBindingCommandAvailability(scope) {
     const entry = entries.get(String(sessionId))
     if (entry === undefined || entry.listeners.size === 0) return
     entry.epoch += 1
+    entry.commandGeneration += 1
     publish(entry, false)
     void refresh(sessionId)
   }
   scope.inject(['remote', 'remote.commands'], commandScope => {
+    connectionGeneration++
     commandRemote = commandScope.get('remote.commands')
     commandScope.effect(() => commandScope.remote.$on('commands/change', () => {
       for (const sessionId of entries.keys()) void refresh(sessionId)
@@ -139,6 +150,7 @@ export function createBindingCommandAvailability(scope) {
     commandScope.effect(() => commandScope.remote.$on('agent-preset/selected', reset))
     for (const sessionId of entries.keys()) void refresh(sessionId)
     commandScope.effect(() => () => {
+      connectionGeneration++
       commandRemote = undefined
       for (const entry of entries.values()) {
         entry.epoch++
@@ -147,13 +159,36 @@ export function createBindingCommandAvailability(scope) {
     })
   })
   scope.on('connection/reset', () => {
+    connectionGeneration++
     for (const sessionId of entries.keys()) reset(sessionId)
   })
   scope.effect(() => () => {
+    connectionGeneration++
     for (const entry of entries.values()) entry.epoch++
     entries.clear()
   })
   return Object.freeze({
     source: sessionId => entryFor(sessionId).source,
+    async run(sessionId, input, signal) {
+      signal?.throwIfAborted()
+      const remote = commandRemote
+      const generation = connectionGeneration
+      const entry = entries.get(String(sessionId))
+      const commandGeneration = entry?.commandGeneration
+      if (!entries.get(String(sessionId))?.available || typeof remote?.execute !== 'function') {
+        throw new Error(`/${name} is unavailable in this session`)
+      }
+      const result = await remote.execute(String(sessionId), `/${name}${input ? ` ${input}` : ''}`, [], signal)
+      signal?.throwIfAborted()
+      if (remote !== commandRemote || generation !== connectionGeneration
+        || commandGeneration !== entry?.commandGeneration) throw new Error('Command connection changed')
+      if (result?.ok !== true || !result.value) throw new Error(result?.error?.message ?? 'Command was not accepted')
+      if (result.value.result?.kind !== 'success') throw new Error(result.value.result?.text ?? 'Command failed')
+      return result.value.result
+    },
   })
 }
+
+export function createBindingCommandAvailability(scope) {
+  return createCommandAccess(scope, 'binding')
+}

package/src/client-workbench.js

@@ -1,5 +1,5 @@
 import { blankBinding, editableBinding, bindingPayload } from './client-bindings-data.js'
-import { isHostIconComponent } from './client-host-compat.js'
+import { isHostComponent, isHostIconComponent } from './client-host-compat.js'
 
 /**
  * User Bindings workbench. The controller owns every piece of edit state in one
@@ -12,7 +12,7 @@ import { isHostIconComponent } from './client-host-compat.js'
  * discard an unsaved draft.
  */
 export function createUserBindingsWorkbench(React, deps) {
-  const { TypeScriptEditor, BindingConsole, IconButton, ActionButton, CodeBlock, Modal, icons, catalogOwner } = deps
+  const { TypeScriptEditor, BindingConsole, IconButton, ActionButton, CodeBlock, Modal, Select, icons, catalogOwner } = deps
   const h = React.createElement
 
   const initialState = Object.freeze({
@@ -120,7 +120,7 @@ export function createUserBindingsWorkbench(React, deps) {
         }
         if (action.imported === true) next.importPath = ''
         next.message = action.removed === true ? { key: 'bindings.removed' }
-          : action.imported === true ? { key: 'bindings.imported' } : state.message
+          : action.imported === true ? { key: 'bindings.imported' } : stored ? { key: stored.enabled ? 'bindings.toggleEnabled' : 'bindings.toggleDisabled', params: { name: stored.name } } : state.message
         return next
       }
       case 'reloadResult': {
@@ -391,7 +391,7 @@ export function createUserBindingsWorkbench(React, deps) {
               h('details', { className: 'ptcPlusBindingSection ptcPlusBindingSourcePreview', open: true },
                 h('summary', { className: 'ptcPlusBindingFieldLabel' }, t('bindings.declaration')),
                 state.declaration === '' ? h('p', { className: 'ptcPlusMessage' }, t('bindings.unvalidated'))
-                  : typeof CodeBlock === 'function'
+                  : isHostComponent(CodeBlock)
                     ? h(CodeBlock, { code: state.declaration, lang: 'typescript', className: 'ptcPlusCodeBlock',
                       copyLabel: t('tool.copy'), copiedLabel: t('tool.copied') })
                     : h('pre', { className: 'ptcPlusDeclaration' }, state.declaration)),
@@ -420,7 +420,7 @@ export function createUserBindingsWorkbench(React, deps) {
                   state.editing
                     ? h(TypeScriptEditor, { documentId: state.documentId, value: state.draft.source, disabled: state.busy,
                       label: t('bindings.source'), onChange: value => edit('source', value) })
-                    : state.sourceOpen && typeof CodeBlock === 'function'
+                    : state.sourceOpen && isHostComponent(CodeBlock)
                       ? h(CodeBlock, { code: state.draft.source, lang: 'typescript', className: 'ptcPlusSourceCode',
                         copyLabel: t('tool.copy'), copiedLabel: t('tool.copied') })
                       : state.sourceOpen ? h('pre', { className: 'ptcPlusSourceCode' }, state.draft.source) : null)),
@@ -450,10 +450,9 @@ export function createUserBindingsWorkbench(React, deps) {
                     })),
                   h('label', { className: 'ptcPlusBindingField' },
                     h('span', { className: 'ptcPlusBindingFieldLabel' }, t('bindings.scope')),
-                    h('select', {
-                      className: 'ptcPlusSelect', value: state.draft.scope, disabled: state.busy || !state.editing,
-                      onChange: event => edit('scope', event.target.value),
-                    }, h('option', { value: 'namespace' }, 'namespace'), h('option', { value: 'top-level' }, 'top-level'))),
+                    h(Select, { value: state.draft.scope, disabled: state.busy || !state.editing,
+                      label: t('bindings.scope'), onChange: next => edit('scope', next),
+                      options: [{ value: 'namespace', label: 'namespace' }, { value: 'top-level', label: 'top-level' }] })),
                   h('label', { className: 'ptcPlusBindingField' },
                     h('span', { className: 'ptcPlusBindingFieldLabel' }, t('bindings.symbols')),
                     h('input', {
@@ -502,7 +501,7 @@ export function createUserBindingsWorkbench(React, deps) {
     const trapFocus = event => {
       if (event.key !== 'Tab') return
       const controls = [...content.current.querySelectorAll('button:not(:disabled),input:not(:disabled),textarea:not(:disabled),select:not(:disabled),[contenteditable=true],summary')]
-        .filter(element => element.getClientRects().length > 0)
+        .filter(element => element.getClientRects().length > 0 && !element.closest('[aria-hidden=true],[hidden]'))
       const first = controls[0]
       const last = controls.at(-1)
       if ((event.shiftKey && document.activeElement === first) || (!event.shiftKey && document.activeElement === last)) {