dsh-ptc-plus 0.4.8 → 0.5.0

package/src/client-authoring-view.js

@@ -1,8 +1,10 @@
 import { bindingDraftProjection, bindingReviewStatus } from './client-binding-review.js'
 import { bindingModelPreferences } from '../internal/user-binding-model-context.js'
+import { capabilityCommandText } from './client-capabilities-view.js'
 import { featureEnabled } from './client-feature-gates.js'
 import {
   MENU_CHILDREN_PROBE_SENTINEL,
+  isHostComponent,
   isHostIconComponent,
   readMenuChildrenProbe,
 } from './client-host-compat.js'
@@ -22,9 +24,9 @@ const HOVER_DWELL_MS = 150
  */
 export function createAuthoringView(React, deps) {
   const {
-    ActionButton, IconButton, Menu, Toast, Tooltip, CodeBlock, BindingsDialog, PTCPlusSettingsDialog,
+    ActionButton, IconButton, Menu, MenuFallback, Toast, Tooltip, CodeBlock, Modal, createPortal, BindingsDialog, PTCPlusSettingsDialog,
     useWorkbenchController, useBindingReview, catalogOwner, callUserBindings, subscribeReset,
-    settingsCardSeat, updateSetting, menuChildren,
+    settingsCardSeat, updateSetting, updateCapabilityConfiguration, menuChildren, SessionCapabilityControls,
     icons: {
       sparkle: IconSparkle16, chevron: IconChevronDownOutline14,
       close: IconCloseOutline16, check: IconCheckOutline14,
@@ -32,6 +34,24 @@ export function createAuthoringView(React, deps) {
   } = deps
   const h = React.createElement
 
+  function EnlargeIcon() {
+    return h('svg', { width: 16, height: 16, viewBox: '0 0 16 16', fill: 'none', 'aria-hidden': true },
+      h('path', { d: 'M6 2H2v4m8-4h4v4M2 10v4h4m8-4v4h-4', stroke: 'currentColor', strokeWidth: 1.5,
+        strokeLinecap: 'round', strokeLinejoin: 'round' }))
+  }
+
+  function RestoreIcon() {
+    return h('svg', { width: 16, height: 16, viewBox: '0 0 16 16', fill: 'none', 'aria-hidden': true },
+      h('path', { d: 'M2 6h4V2m4 0v4h4M6 14v-4H2m12 0h-4v4', stroke: 'currentColor', strokeWidth: 1.5,
+        strokeLinecap: 'round', strokeLinejoin: 'round' }))
+  }
+
+  function ReviewCloseIcon() {
+    return h('svg', { width: 16, height: 16, viewBox: '0 0 16 16', fill: 'none', 'aria-hidden': true },
+      h('path', { d: 'm4 4 8 8m0-8-8 8', stroke: 'currentColor', strokeWidth: 1.5,
+        strokeLinecap: 'round' }))
+  }
+
   /**
    * Where the settings card lives on the installed generation.
    *
@@ -45,10 +65,11 @@ export function createAuthoringView(React, deps) {
   }[settingsCardSeat?.()] ?? 'settings.menuEntry')
 
   function BindingAuthorButton({
-    sessionId, t, useInput, inputActions, usePtcSettings, useBindingCommand,
+    sessionId, t, useInput, inputActions, usePtcSettings, useBindingCommand, useCapabilityCommand,
   }) {
     const input = useInput?.(snapshot => snapshot)
     const available = useBindingCommand(snapshot => snapshot)
+    const capabilityAvailable = useCapabilityCommand?.(snapshot => snapshot) === true
     const settings = usePtcSettings(snapshot => snapshot)
     const [review, view] = useBindingReview(sessionId)
     const anchorRef = React.useRef(null)
@@ -56,20 +77,21 @@ export function createAuthoringView(React, deps) {
       anchorRef.current = element
       review.access = element
     }, [review])
-    const firstItemRef = React.useRef(null)
-    const manageItemRef = React.useRef(null)
+    const menuBodyRef = React.useRef(null)
     const reloadItemRef = React.useRef(null)
-    const settingsItemRef = React.useRef(null)
+    const disabledGroupRef = React.useRef(null)
+    const [disabledOpen, setDisabledOpen] = React.useState(false)
     const focused = React.useRef(false)
     const dialogReturnFocus = React.useRef(null)
     const hoverTimer = React.useRef(undefined)
     const [menu, setMenu] = React.useState(null)
     const [managing, setManaging] = React.useState(false)
+    const [capabilitiesOpen, setCapabilitiesOpen] = React.useState(false)
     const [settingsOpen, setSettingsOpen] = React.useState(false)
     // The composer entry's four actions live in the host Menu's `children`
     // region. Preceding Clients accept that prop and mount nothing, so the entry
-    // probes the installed primitive once and, when it renders no such region,
-    // keeps the same actions reachable through the Menu's pinned rows.
+    // probes the installed primitive once and uses its own Menu fallback when
+    // that public region is absent.
     const probeRef = React.useRef(null)
     const [probing, setProbing] = React.useState(() => menuChildren.supported() === undefined)
     const menuChildrenRegion = menuChildren.supported() !== false
@@ -86,16 +108,25 @@ export function createAuthoringView(React, deps) {
     const catalogFocus = React.useRef(null)
     const toastSequence = React.useRef(0)
     const [toast, setToast] = React.useState(null)
-    const hasDraft = view.mounted && view.candidate !== null && view.action === null
+    const hasDraft = featureEnabled(settings, 'bindings') && view.mounted && view.candidate !== null && view.action === null
     const quickAccess = featureEnabled(settings, 'authorButton')
-    const canAuthor = quickAccess && available && typeof useInput === 'function' && typeof inputActions?.setDraft === 'function'
-    const menuOpen = (hasDraft || quickAccess) && view.reachable && !managing && !settingsOpen
+    const pluginEnabled = featureEnabled(settings, 'plugin') && (hasDraft || featureEnabled(settings, 'ptcMenu'))
+    const canPrefill = typeof useInput === 'function' && typeof inputActions?.setDraft === 'function'
+    const canAuthor = quickAccess && available && canPrefill
+    const canRefresh = pluginEnabled && settings.status === 'ready' && settings.writable === true
+      && capabilityAvailable && canPrefill
+    const menuOpen = pluginEnabled && view.reachable && !managing && !capabilitiesOpen && !settingsOpen
       && menu !== null && menu.key === view.candidateKey
     // The dialog owns the management session; losing the input surface only
     // suspends reads, so a draft survives a temporary Host takeover.
     const workbench = useWorkbenchController({
       enabled: quickAccess && managing, active: view.reachable, callUserBindings,
     })
+    React.useEffect(() => {
+      if (!quickAccess) {
+        setManaging(false)
+      }
+    }, [quickAccess])
     const refreshCatalog = React.useCallback(async (reload = false) => {
       if (reload) captureCatalogFocus()
       await catalogSource.read({ reload })
@@ -105,6 +136,7 @@ export function createAuthoringView(React, deps) {
         catalogSource.reset()
         setMenu(null)
         setManaging(false)
+        setCapabilitiesOpen(false)
         setSettingsOpen(false)
       }
       const unsubscribe = subscribeReset(reset)
@@ -116,9 +148,14 @@ export function createAuthoringView(React, deps) {
     const toggleBinding = async entry => {
       if (!catalogReady || !quickAccess) return
       captureCatalogFocus()
-      await catalogSource.write(() => callUserBindings(entry.enabled ? 'disable' : 'enable', {
+      const next = await catalogSource.write(() => callUserBindings(entry.enabled ? 'disable' : 'enable', {
         id: entry.id, expectedRevision: catalog.revision,
       }))
+      const saved = next?.entries.find(item => item.id === entry.id)
+      if (saved) {
+        toastSequence.current++
+        setToast({ sequence: toastSequence.current, key: saved.enabled ? 'bindings.toggleEnabled' : 'bindings.toggleDisabled', params: { name: saved.name } })
+      }
     }
     const cancelHoverOpen = React.useCallback(() => {
       if (hoverTimer.current === undefined) return
@@ -128,7 +165,10 @@ export function createAuthoringView(React, deps) {
     React.useEffect(() => cancelHoverOpen, [cancelHoverOpen])
     const showMenu = mode => {
       cancelHoverOpen()
-      if (!menuOpen && quickAccess) void refreshCatalog()
+      if (!menuOpen) {
+        setDisabledOpen(false)
+        if (quickAccess) void refreshCatalog()
+      }
       setMenu({ key: view.candidateKey, mode, step: 'root' })
     }
     // Touch has no hover: its tap reaches the same menu through the click path.
@@ -140,11 +180,24 @@ export function createAuthoringView(React, deps) {
         showMenu('hover')
       }, HOVER_DWELL_MS)
     }
-    const menuElement = () => manageItemRef.current?.closest('[role=menu]')
-      ?? firstItemRef.current?.closest('[role=menu]')
+    const menuElement = () => menuBodyRef.current
     const captureCatalogFocus = () => {
       catalogFocus.current = menuElement()?.contains(document.activeElement) ? document.activeElement : null
     }
+    const focusMenuItem = next => {
+      next?.focus({ preventScroll: true })
+      const scroll = menuElement()?.querySelector('.ptcPlusBindingMenuScroll')
+      if (!scroll?.contains(next)) return
+      const viewport = scroll.getBoundingClientRect()
+      const item = next.getBoundingClientRect()
+      // Reveal only inside the owned catalog. Browser focus scrolling can also
+      // scroll the outer menu or transcript and move the fixed actions.
+      const offset = item.height > scroll.clientHeight
+        ? item.top + item.height / 2 - (viewport.top + viewport.height / 2)
+        : item.top < viewport.top ? item.top - viewport.top
+          : item.bottom > viewport.bottom ? item.bottom - viewport.bottom : 0
+      scroll.scrollTop += offset
+    }
     // The list must sit next to the entry that opened it. The published Menu reads
     // this rect on open and on every scroll/resize, and re-runs placement whenever
     // the prop identity changes, so measuring the trigger each render also keeps an
@@ -190,19 +243,22 @@ export function createAuthoringView(React, deps) {
       if (!menuOpen) { catalogFocus.current = null; return }
       if (catalogStatus === 'writing' || catalogStatus === 'loading') return
       const target = catalogFocus.current
-      catalogFocus.current = null
-      if (!target || document.activeElement !== document.body) return
+      if (!target || (document.activeElement !== document.body && document.activeElement !== target)) return
       const root = menuElement()
+      const bindingId = target.dataset.bindingId
+      const currentRow = bindingId === undefined ? null
+        : [...(root?.querySelectorAll('[data-binding-id]') ?? [])].find(row => row.dataset.bindingId === bindingId)
       const next = root?.contains(target) && !target.disabled ? target
-        : reloadItemRef.current?.closest('button') ?? root?.querySelector('button:not(:disabled)')
-      next?.focus({ preventScroll: true })
+        : currentRow ?? (bindingId !== undefined && catalog?.entries.some(entry => entry.id === bindingId && !entry.enabled)
+          ? disabledGroupRef.current : null) ?? reloadItemRef.current ?? root?.querySelector('button:not(:disabled)')
+      focusMenuItem(next)
     }, [catalogStatus, menuOpen])
     React.useLayoutEffect(() => {
       if (!menuOpen || menu.mode === 'hover') return
       // The public Menu commits its measured position before keyboard focus enters it.
       let cancelled = false
       queueMicrotask(() => {
-        if (!cancelled && anchorRef.current?.getClientRects().length) menuElement()?.querySelector('button:not(:disabled)')?.focus({ preventScroll: true })
+        if (!cancelled && anchorRef.current?.getClientRects().length) focusMenuItem(menuElement()?.querySelector('button:not(:disabled)'))
       })
       return () => { cancelled = true }
     }, [menuOpen, menu?.mode, menu?.step])
@@ -217,18 +273,17 @@ export function createAuthoringView(React, deps) {
       setProbing(false)
     }, [probing, menuChildren])
     React.useEffect(() => {
-      if (toast === null || typeof Toast === 'function') return undefined
+      if (toast === null || isHostComponent(Toast)) return undefined
       const timer = setTimeout(() => setToast(null), 2_500)
       return () => clearTimeout(timer)
     }, [toast])
     const label = hasDraft ? t('bindings.reviewMenuLabel', { count: 1 })
-      + (view.message ? ` · ${t('bindings.reviewAttention')}` : '') : t('bindings.open')
-    const hint = t(hasDraft ? 'bindings.draftHint' : 'bindings.openHint')
-    // Every authoring action goes through the same busy guard and input owner, so a
-    // new or revision request can never overwrite an unsent user draft.
-    const prefillAuthoring = value => {
+      + (view.message ? ` · ${t('bindings.reviewAttention')}` : '') : t(quickAccess ? 'bindings.open' : 'settings.toolsMenu')
+    const hint = t(hasDraft ? 'bindings.draftHint' : quickAccess ? 'bindings.openHint' : 'settings.toolsMenu')
+    // Command shortcuts share the composer guard; submission remains the user's action.
+    const prefillCommand = (value, allowed) => {
       hideMenu()
-      if (!canAuthor) return
+      if (!allowed) return
       if (typeof input?.draft === 'string' && input.draft.trim() !== '') {
         toastSequence.current += 1
         setToast({ sequence: toastSequence.current, text: t('bindings.composerBusy') })
@@ -236,12 +291,12 @@ export function createAuthoringView(React, deps) {
       }
       inputActions.setDraft(value)
     }
-    const openAuthoring = () => prefillAuthoring('/binding new ')
-    const openAuthoringEdit = entry => prefillAuthoring(`/binding edit ${entry.id} `)
+    const openAuthoring = () => prefillCommand('/binding new ', canAuthor)
+    const openAuthoringEdit = entry => prefillCommand(`/binding edit ${entry.id} `, canAuthor)
     const starButton = h('button', {
       type: 'button', className: 'ptcPlusAuthorButton', 'aria-label': label,
       // Older UI-kit lines ship no Tooltip primitive; the native title carries the hint there.
-      title: typeof Tooltip === 'function' || menuOpen || managing || settingsOpen ? undefined : hint,
+      title: isHostComponent(Tooltip) || menuOpen || managing || settingsOpen ? undefined : hint,
       'aria-haspopup': 'menu', 'aria-expanded': menuOpen,
       onPointerEnter: hoverMenu,
       onPointerLeave: cancelHoverOpen,
@@ -261,15 +316,30 @@ export function createAuthoringView(React, deps) {
     // and drops a duplicate, while disabling rows would dim every row and add a
     // pending row for the duration of the request: both read as the popover
     // flickering when the user toggles an entry.
+    const catalogRow = entry => ({ id: `global:${entry.id}`, bindingId: entry.id,
+      disabled: catalog === null,
+      label: h('span', { className: 'ptcPlusBindingQuickRow', 'data-enabled': entry.enabled },
+        h('span', { className: 'ptcPlusBindingQuickName' }, h('strong', { title: entry.name }, entry.name),
+          h('span', { className: 'ptcPlusBindingQuickState' }, t(entry.enabled ? 'bindings.enabled' : 'bindings.disabledEntry'))),
+        h('span', { className: 'ptcPlusBindingQuickPurpose', title: entry.purpose }, entry.purpose)),
+    })
+    const enabledEntries = (catalog?.entries ?? []).filter(entry => entry.enabled)
+    const disabledEntries = (catalog?.entries ?? []).filter(entry => !entry.enabled)
     const catalogItems = !quickAccess ? [] : [
-      { id: 'global-heading', type: 'label', text: t('bindings.quickHeading') },
-      ...(catalog?.entries ?? []).map(entry => ({ id: `global:${entry.id}`,
-        disabled: catalog === null,
-        label: h('span', { className: 'ptcPlusBindingQuickRow', 'data-enabled': entry.enabled },
-          h('span', { className: 'ptcPlusBindingQuickName' }, h('strong', { title: entry.name }, entry.name),
-            h('span', { className: 'ptcPlusBindingQuickState' }, t(entry.enabled ? 'bindings.enabled' : 'bindings.disabledEntry'))),
-          h('span', { className: 'ptcPlusBindingQuickPurpose', title: entry.purpose }, entry.purpose)),
-      })),
+      ...(catalog === null || catalog.entries.length === 0 ? [] : [
+        { id: 'enabled-heading', type: 'label', text: t('bindings.quickEnabled', { count: enabledEntries.length }) },
+        ...enabledEntries.map(catalogRow),
+        ...(enabledEntries.length === 0 ? [{ id: 'no-enabled', type: 'label', text: t('bindings.quickNoEnabled') }] : []),
+        ...(disabledEntries.length === 0 ? [] : [
+          { id: 'disabled-group', label: h(React.Fragment, null,
+            h('svg', { className: 'ptcPlusMenuGroupChevron', 'aria-hidden': true,
+              width: 14, height: 14, viewBox: '0 0 14 14', fill: 'none', 'data-expanded': disabledOpen },
+            h('path', { d: 'm5 3 4 4-4 4', stroke: 'currentColor', strokeWidth: 1.5,
+              strokeLinecap: 'round', strokeLinejoin: 'round' })),
+            h('span', null, t('bindings.quickDisabled', { count: disabledEntries.length }))) },
+          ...(disabledOpen ? disabledEntries.map(catalogRow) : []),
+        ]),
+      ]),
       ...(catalog !== null && catalog.entries.length === 0
         ? [{ id: 'empty', type: 'label', text: t('memory.globalEmpty') }] : []),
       ...(catalog === null && catalogStatus !== 'error'
@@ -281,20 +351,11 @@ export function createAuthoringView(React, deps) {
     // submenu here would lose the bounded, scrollable catalog this step needs.
     const editItems = [
       { id: 'edit-heading', type: 'label', text: t('bindings.quickEditHeading') },
-      ...(catalog?.entries ?? []).map(entry => ({
-        id: `edit:${entry.id}`,
-        disabled: catalog === null,
-        label: h('span', { className: 'ptcPlusBindingQuickRow' },
-          h('span', { className: 'ptcPlusBindingQuickName' }, h('strong', { title: entry.name }, entry.name),
-            h('span', { className: 'ptcPlusBindingQuickState' }, t(entry.enabled ? 'bindings.enabled' : 'bindings.disabledEntry'))),
-          h('span', { className: 'ptcPlusBindingQuickPurpose', title: entry.purpose }, entry.purpose)),
-      })),
-      // The back row also anchors menu lookup, so the step still owns its list
-      // when the catalog is momentarily empty.
-      { id: 'edit-back', label: h('span', { className: 'ptcPlusBindingMenuAction', ref: firstItemRef }, t('bindings.back')) },
+      ...(catalog?.entries ?? []).map(entry => ({ ...catalogRow(entry), id: `edit:${entry.id}` })),
     ]
     const selectMenuItem = id => {
       if (!anchorRef.current?.getClientRects().length) return
+      if (id === 'disabled-group') { setDisabledOpen(open => !open); return }
       if (id === 'edit') {
         setMenu(current => current === null ? current : { ...current, step: 'edit' })
         return
@@ -319,6 +380,8 @@ export function createAuthoringView(React, deps) {
         setSettingsOpen(true)
         return
       }
+      if (id === 'capabilities') { hideMenu(); setCapabilitiesOpen(true); return }
+      if (id === 'refresh') { prefillCommand('/capabilities refresh', canRefresh); return }
       hideMenu()
       if (id === 'new') openAuthoring()
       else if (id === 'manage') {
@@ -329,14 +392,29 @@ export function createAuthoringView(React, deps) {
     }
     // One copy of each action label serves the grid the plugin renders itself,
     // in whichever carrier the installed Menu publishes for it.
-    const actionCopy = (id, copy, ref) => h('span', {
-      ref, className: 'ptcPlusBindingMenuAction',
+    const actionPaths = {
+      new: 'M8 3v10M3 8h10',
+      edit: 'm10 3 3 3M3 13l3-.7 7-7a1.4 1.4 0 0 0-3-3l-7 7L3 13Z',
+      refresh: 'M13 6a5 5 0 0 0-9-2L2 6m0-3v3h3M3 10a5 5 0 0 0 9 2l2-2m0 3v-3h-3',
+      manage: 'M2 4h5l1.5 2H14v7H2V4Z',
+      capabilities: 'M3 4h10M3 8h10M3 12h10M6 2v4M10 6v4M6 10v4',
+      settings: 'M6 2h4l.5 2 1.5 1.5 2 .5v4l-2 .5-1.5 1.5-.5 2H6l-.5-2L4 10.5 2 10V6l2-.5L5.5 4 6 2ZM10 8a2 2 0 1 0-4 0 2 2 0 0 0 4 0Z',
+      'edit-back': 'm7 3-5 5 5 5M2 8h12',
+    }
+    const actionCopy = (id, copy) => h(React.Fragment, null,
+      h('svg', { className: 'ptcPlusMenuActionIcon', width: 16, height: 16, viewBox: '0 0 16 16',
+        fill: 'none', 'aria-hidden': true }, h('path', { d: actionPaths[id], stroke: 'currentColor',
+        strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round' })), h('span', {
+      className: 'ptcPlusBindingMenuAction',
       title: id === 'settings' ? settingsPath(t) : undefined,
-    }, t(copy))
-    const actionButton = (id, copy, ref) => h('button', {
+    }, t(copy)))
+    const actionButton = (id, copy) => h('button', {
       type: 'button', role: 'menuitem', className: 'ptcPlusMenuButton',
+      disabled: id === 'refresh' && !canRefresh,
+      title: id === 'refresh' && !capabilityAvailable ? t('capabilities.refreshUnavailable')
+        : id === 'settings' ? settingsPath(t) : t(copy),
       onClick: () => selectMenuItem(id),
-    }, actionCopy(id, copy, ref))
+    }, actionCopy(id, copy))
     const actionSections = [
       canAuthor ? h('div', { key: 'authoring', className: 'ptcPlusMenuAuthoring', role: 'group', 'aria-label': t('bindings.authorGroup') },
         h('div', { className: 'ptcPlusMenuGroupLabel' }, t('bindings.authorGroup')),
@@ -344,49 +422,61 @@ export function createAuthoringView(React, deps) {
           actionButton('new', 'bindings.authorNewDraft'),
           (catalog?.entries?.length ?? 0) > 0 ? actionButton('edit', 'bindings.authorEdit') : null)) : null,
       h('div', { key: 'utilities', className: 'ptcPlusMenuUtilities' },
-        quickAccess ? actionButton('manage', 'bindings.manage', manageItemRef) : null,
-        actionButton('settings', 'settings.menuEntry', settingsItemRef)),
+        actionButton('refresh', 'capabilities.applySession'),
+        quickAccess ? actionButton('manage', 'bindings.manage') : null,
+        SessionCapabilityControls ? actionButton('capabilities', 'capabilities.quick.title') : null,
+        actionButton('settings', 'settings.menuEntry')),
+    ]
+    const menuEntries = menu?.step === 'edit' ? editItems : [
+      ...(hasDraft ? [{ id: 'draft-heading', type: 'label', text: t('bindings.quickDrafts') }, {
+        id: view.candidateKey,
+        label: h('span', { className: 'ptcPlusDraftMenuItem' },
+          h('strong', null, view.candidate.entry.name), h('span', null, t(bindingReviewStatus(view)))),
+      }, ...(quickAccess ? [{ id: 'draft-separator', type: 'separator' }] : [])] : []),
+      ...catalogItems,
+      ...(quickAccess && catalogError !== null ? [{ id: 'reload', label: t('bindings.reload') }] : []),
     ]
-    const actionsInRegion = menu?.step === 'edit'
-      ? null : h('div', { className: 'ptcPlusMenuActions' }, actionSections)
-    // The plugin's own action area, never a row list. A Client that mounts no
-    // `children` region still renders the pinned entry area, which carries the
-    // same grouped grid; the published `text` type names a string while the
-    // implementation renders the value, so this stays the plugin's own markup
-    // rather than a set of host-styled rows. Neither carrier enters the draft
-    // menu's second step, which owns its own rows.
-    const actionsPinned = menuChildrenRegion || menu?.step === 'edit' ? [] : [{
-      id: 'ptc-plus-actions',
-      type: 'label',
-      text: h('div', { className: 'ptcPlusMenuActions ptcPlusMenuActionsPinned' }, actionSections),
-    }]
+    const menuContent = h('div', { className: 'ptcPlusBindingMenuContent', ref: menuBodyRef,
+      // A reopened menu can acquire foreground focus while an earlier write is
+      // pending. Recovery follows the live menu, not the initiating operation.
+      onFocusCapture: event => { catalogFocus.current = event.target },
+      onBlurCapture: event => {
+        if (!event.currentTarget.contains(event.relatedTarget)) catalogFocus.current = null
+      },
+    },
+      h('div', { className: 'ptcPlusBindingMenuScroll' }, ...menuEntries.map(entry => entry.type === 'separator'
+        ? h('div', { key: entry.id, role: 'separator', className: 'ptcPlusOwnedMenuSeparator' })
+        : entry.type === 'label'
+          ? h('div', { key: entry.id, className: 'ptcPlusMenuGroupLabel' }, entry.text)
+          : h('button', {
+            key: entry.id, type: 'button', role: 'menuitem',
+            className: entry.id === 'disabled-group' ? 'ptcPlusOwnedMenuRow ptcPlusMenuDisclosure' : 'ptcPlusOwnedMenuRow',
+            disabled: entry.disabled, 'data-binding-id': entry.bindingId,
+            ref: entry.id === 'reload' ? reloadItemRef : entry.id === 'disabled-group' ? disabledGroupRef : undefined,
+            'aria-expanded': entry.id === 'disabled-group' ? disabledOpen : undefined,
+            onClick: () => selectMenuItem(entry.id),
+          }, entry.label))),
+      h('div', { className: 'ptcPlusMenuActions' }, menu?.step === 'edit'
+        ? h('div', { className: 'ptcPlusMenuUtilities' }, actionButton('edit-back', 'bindings.back')) : actionSections))
     return h('span', {
       className: 'ptcPlusComposerBindingAnchor', tabIndex: -1,
       onFocusCapture: () => { focused.current = true }, onBlurCapture: () => { focused.current = false },
       'data-text': isHostIconComponent(IconSparkle16) ? undefined : true,
       ref: attachAnchor,
     },
-      !hasDraft && !quickAccess ? null : h(Menu, {
+      !pluginEnabled ? null : h(menuChildrenRegion ? Menu : MenuFallback, {
         className: 'ptcPlusAuthorButtonShell', open: menuOpen,
-        anchor: typeof Tooltip === 'function'
+        anchor: isHostComponent(Tooltip)
           ? h(Tooltip, { label: hint, delayMs: 700, disabled: menuOpen || managing || settingsOpen }, starButton) : starButton,
         portal: true, side: 'top', dense: true,
+        listClassName: 'ptcPlusBindingMenu',
         // A hovered menu leaves with the pointer once it leaves the trigger and the
         // list for the published grace, which re-entering either cancels; click and
         // keyboard menus stay until dismissed.
         closeOnPointerLeave: menu !== null && menu.mode === 'hover',
         getAnchorRect: menuAnchorRect,
         onClose: hideMenu,
-        items: menu?.step === 'edit' ? editItems : [...(hasDraft ? [{ id: 'draft-heading', type: 'label', text: t('bindings.quickDrafts') }, { id: view.candidateKey,
-          label: h('span', { className: 'ptcPlusDraftMenuItem', ref: firstItemRef },
-            h('strong', null, view.candidate.entry.name),
-            h('span', null, t(bindingReviewStatus(view)))) },
-            ...(quickAccess ? [{ id: 'draft-separator', type: 'separator' }] : [])] : []), ...catalogItems,
-          ...(quickAccess && catalogError !== null
-            ? [{ id: 'reload', label: h('span', { ref: reloadItemRef }, t('bindings.reload')) }] : []),
-        ],
-        children: actionsInRegion,
-        ...(actionsPinned.length === 0 ? {} : { footer: actionsPinned }),
+        items: [], children: menuContent,
         onSelect: selectMenuItem,
       }),
       // The probe mounts the host Menu's own `children` region inside a hidden
@@ -404,25 +494,33 @@ export function createAuthoringView(React, deps) {
           controller: workbench, t, onClose: () => setManaging(false), returnFocusRef: dialogReturnFocus,
           getReturnFocus: () => anchorRef.current?.querySelector('.ptcPlusAuthorButton'),
         }) : null,
+      SessionCapabilityControls && capabilitiesOpen && view.reachable
+        ? h(SessionCapabilityControls, { sessionId, open: true, t,
+          enabled: pluginEnabled && settings.status === 'ready' && settings.writable === true,
+          onClose: () => {
+            setCapabilitiesOpen(false)
+            queueMicrotask(() => anchorRef.current?.querySelector('.ptcPlusAuthorButton')
+              ?.focus({ preventScroll: true }))
+          } }) : null,
       settingsOpen && view.reachable
         ? h(PTCPlusSettingsDialog, {
-          t, usePtcSettings, updateSetting, callUserBindings,
+          t, usePtcSettings, updateSetting, updateCapabilityConfiguration, callUserBindings,
           onClose: () => {
             setSettingsOpen(false)
             queueMicrotask(() => anchorRef.current?.querySelector('.ptcPlusAuthorButton')
               ?.focus({ preventScroll: true }))
           },
         }) : null,
-      toast === null ? null : typeof Toast === 'function'
+      toast === null ? null : isHostComponent(Toast)
         ? h(Toast, {
           key: toast.sequence,
-          text: toast.text,
+          text: toast.key ? t(toast.key, toast.params) : capabilityCommandText(t, toast.text),
           anchor: anchorRef.current,
           onDone: () => setToast(null),
         })
         : h('span', {
           key: toast.sequence, className: 'ptcPlusComposerNotice', role: 'status',
-        }, toast.text))
+        }, toast.key ? t(toast.key, toast.params) : capabilityCommandText(t, toast.text)))
   }
 
   function BindingCandidateContent({ candidate, t, showName = true }) {
@@ -432,7 +530,7 @@ export function createAuthoringView(React, deps) {
       showName ? h('strong', null, candidate.entry.name) : null,
       h('span', { className: 'ptcPlusBindingMeta' }, `${candidate.entry.scope} - ${candidate.entry.symbols.join(', ')}`),
       candidate.entry.purpose ? h('p', { className: 'ptcPlusMessage' }, candidate.entry.purpose) : null,
-      typeof CodeBlock === 'function'
+      isHostComponent(CodeBlock)
         ? h(CodeBlock, { code: candidate.entry.source, lang: 'typescript', className: 'ptcPlusBindingCommandCode',
           copyLabel: t('tool.copy'), copiedLabel: t('tool.copied') })
         : h('pre', { className: 'ptcPlusBindingCommandSource' }, candidate.entry.source),
@@ -450,22 +548,20 @@ export function createAuthoringView(React, deps) {
               preferences.instructions || t('bindings.noInstructions'))))))
   }
 
-  // Native editable semantics are enough to restore focus; no Host class, store or editor internals are used.
   function focusComposer(anchor) {
     if (!anchor || anchor.getClientRects().length === 0) return
-    for (let parent = anchor.parentElement; parent; parent = parent.parentElement) {
-      const editable = [...parent.querySelectorAll('textarea, [contenteditable="true"]')]
-        .find(element => element.getClientRects().length > 0 && !element.disabled)
-      if (editable) { editable.focus({ preventScroll: true }); return }
-    }
     anchor.focus({ preventScroll: true })
   }
 
-  function openBindingReview(review, candidate = review.getSnapshot().candidate) {
-    if (!review.display('expanded', candidate)) return
+  function openBindingReview(review, candidate = review.getSnapshot().candidate,
+    visibility = 'enlarged') {
+    if (!review.display(visibility, candidate)) return
     requestAnimationFrame(() => {
-      if (review.getSnapshot().candidate === candidate && review.panel?.getClientRects().length) {
-        review.panel.focus({ preventScroll: true })
+      const current = review.getSnapshot()
+      if (review.isCurrentCandidate(candidate) && current.reachable && current.visibility === 'expanded'
+        && review.panel?.getClientRects().length) {
+        if (review.previewAvailable === false) focusBindingReviewAccess(review)
+        else review.panel.focus({ preventScroll: true })
       }
     })
   }
@@ -477,60 +573,6 @@ export function createAuthoringView(React, deps) {
     else focusComposer(anchor)
   }
 
-  function fitBindingReview(panel) {
-    const body = panel?.querySelector('.ptcPlusBindingDockBody')
-    const anchor = panel?.parentElement
-    if (!anchor || typeof ResizeObserver !== 'function') return undefined
-    const ancestors = []
-    let seat = panel
-    let viewport
-    for (let parent = panel.parentElement; parent; parent = parent.parentElement) {
-      ancestors.push(parent)
-      if (/auto|scroll|hidden|clip/.test(getComputedStyle(parent).overflowY)) {
-        viewport = parent
-        break
-      }
-      seat = parent
-    }
-    if (!viewport) return undefined
-    let frame
-    const update = () => {
-      if (!panel.getClientRects().length) return
-      const top = Math.max(viewport.getBoundingClientRect().top + viewport.clientTop,
-        window.visualViewport?.offsetTop ?? 0)
-      // Float above the complete composer stack without changing its height or covering other docks.
-      const offset = anchor.getBoundingClientRect().bottom - seat.getBoundingClientRect().top + 8
-      panel.style.setProperty('--ptc-plus-review-offset', `${Math.max(8, Math.ceil(offset))}px`)
-      const room = Math.max(0, seat.getBoundingClientRect().top - top - 16)
-      panel.style.setProperty('--ptc-plus-review-height', `${Math.floor(room)}px`)
-      if (body) {
-        const chrome = panel.scrollHeight - body.offsetHeight + 2
-        const available = Math.max(0, room - chrome)
-        // In short viewports one scroller keeps source and actions reachable together.
-        panel.dataset.scroll = available < 80 ? 'panel' : 'body'
-        body.style.setProperty('--ptc-plus-review-space', `${Math.floor(available)}px`)
-      }
-    }
-    const schedule = () => {
-      cancelAnimationFrame(frame)
-      frame = requestAnimationFrame(update)
-    }
-    const observer = new ResizeObserver(schedule)
-    for (const element of [panel, ...panel.children, ...ancestors]) observer.observe(element)
-    window.visualViewport?.addEventListener('resize', schedule)
-    window.visualViewport?.addEventListener('scroll', schedule)
-    update()
-    return () => {
-      observer.disconnect()
-      cancelAnimationFrame(frame)
-      window.visualViewport?.removeEventListener('resize', schedule)
-      window.visualViewport?.removeEventListener('scroll', schedule)
-      panel.style.removeProperty('--ptc-plus-review-offset')
-      panel.style.removeProperty('--ptc-plus-review-height')
-      delete panel.dataset.scroll
-      body?.style.removeProperty('--ptc-plus-review-space')
-    }
-  }
 
   function BindingReviewDock({ sessionId, useProjection, t }) {
     const raw = useProjection('ptcPlusBindingDraft')
@@ -549,10 +591,75 @@ export function createAuthoringView(React, deps) {
     React.useLayoutEffect(() => { review.sync(projection) }, [review, projection])
     const title = React.useId()
     const content = React.useId()
-    const expanded = view.visibility === 'expanded'
+    const anchor = React.useRef(null)
+    const layer = React.useRef(null)
+    const [compact, setCompact] = React.useState(false)
+    const enlarged = view.visibility === 'enlarged'
+    const expanded = enlarged || view.visibility === 'expanded' && !compact
     const candidateKey = view.candidateKey
-    React.useLayoutEffect(() => fitBindingReview(review.panel),
-      [review, candidateKey, expanded, view.visibility, view.message])
+    React.useLayoutEffect(() => {
+      if (enlarged || !view.reachable || view.visibility === 'hidden' || view.candidate === null) return undefined
+      let frame
+      let previous
+      // A dock can move when input or sibling cards grow without a scroll/resize.
+      // Track only our own anchor while visible; no Host node owns this placement.
+      const place = () => {
+        const rect = anchor.current?.getBoundingClientRect()
+        const surface = layer.current
+        if (rect && surface) {
+          const viewport = window.visualViewport
+          const leftEdge = (viewport?.offsetLeft ?? 0) + 8
+          const topEdge = (viewport?.offsetTop ?? 0) + 8
+          const rightEdge = leftEdge + (viewport?.width ?? window.innerWidth) - 16
+          const bottomEdge = topEdge + (viewport?.height ?? window.innerHeight) - 16
+          const width = Math.min(rect.width, rightEdge - leftEdge)
+          const left = Math.max(leftEdge, Math.min(rect.left, rightEdge - width))
+          if (surface.style.width !== `${width}px`) surface.style.width = `${width}px`
+          const panel = surface.querySelector('.ptcPlusBindingDock')
+          const head = panel?.querySelector('.ptcPlusBindingDockHead')
+          const actions = panel?.querySelector('.ptcPlusBindingDockActions')
+          const body = panel?.querySelector('.ptcPlusBindingDockBody')
+          const panelStyle = panel && getComputedStyle(panel)
+          const border = (parseFloat(panelStyle?.borderTopWidth) || 0) + (parseFloat(panelStyle?.borderBottomWidth) || 0)
+          const chrome = (head?.getBoundingClientRect().height ?? 0) + border
+          const bottom = Math.max(topEdge, Math.min(Math.max(topEdge + chrome, rect.top - 8), rect.top, bottomEdge))
+          const height = bottom - topEdge
+          const geometry = [width, left, bottom, height, chrome].join(',')
+          if (geometry !== previous) {
+            previous = geometry
+            surface.style.left = `${left}px`
+            surface.style.bottom = `${window.innerHeight - bottom}px`
+            surface.style.setProperty('--ptc-plus-review-space', `${height}px`)
+          }
+          if (rect.width > 0) {
+            const available = surface.getBoundingClientRect().height >= chrome && bottom <= rect.top
+            review.previewAvailable = available
+            if (surface.dataset.available !== String(available)) {
+              surface.dataset.available = String(available)
+              if (available) {
+                surface.removeAttribute('inert')
+                surface.removeAttribute('aria-hidden')
+              } else {
+                surface.setAttribute('inert', '')
+                surface.setAttribute('aria-hidden', 'true')
+              }
+            }
+          }
+          // CSS owns the viewport cap. Full chrome stays measurable in compact
+          // mode so hiding it cannot make the layout classification oscillate.
+          if (head && actions && body && rect.width > 0) {
+            const minimumBody = parseFloat(getComputedStyle(body).minBlockSize)
+            const required = chrome + actions.getBoundingClientRect().height + minimumBody
+            setCompact(surface.getBoundingClientRect().height < required)
+          }
+        }
+        frame = requestAnimationFrame(place)
+      }
+      place()
+      return () => {
+        cancelAnimationFrame(frame)
+      }
+    }, [candidateKey, enlarged, view.reachable, view.visibility, view.candidate === null])
     const close = () => {
       review.display('hidden')
       requestAnimationFrame(() => focusBindingReviewAccess(review))
@@ -562,44 +669,55 @@ export function createAuthoringView(React, deps) {
       if (review.panel?.contains(document.activeElement)) review.panel.focus({ preventScroll: true })
       void review.act(operation, activate)
     }
+    const restorePreview = () => openBindingReview(review, view.candidate, 'expanded')
     if (view.candidate === null || view.visibility === 'hidden') return null
-    return h('div', { className: 'ptcPlusBindingDockAnchor' },
-      h('section', { key: candidateKey, className: 'ptcPlusBindingDock', 'aria-labelledby': title, tabIndex: -1,
+    const panel = h('section', { key: candidateKey, className: 'ptcPlusBindingDock', 'aria-labelledby': title, tabIndex: -1,
       ref: element => { review.panel = element },
       onFocusCapture: () => { focused.current = true },
       onBlurCapture: event => {
         // Blink blurs the removed panel before layout effects; completion still owns that lost focus.
         if (event.relatedTarget || review.getSnapshot().action === null) focused.current = false
       },
-      'aria-busy': view.busy },
+      'aria-busy': view.busy, 'data-compact': !enlarged && compact },
       h('div', { className: 'ptcPlusBindingDockHead' },
-        h('button', { type: 'button', className: 'ptcPlusBindingDockToggle',
-          'aria-label': t(expanded ? 'bindings.reviewCollapse' : 'bindings.reviewExpand'),
-          'aria-expanded': expanded, 'aria-controls': expanded ? content : undefined,
-          onClick: () => review.display(expanded ? 'collapsed' : 'expanded') },
+        h(enlarged ? 'div' : 'button', { type: enlarged ? undefined : 'button', className: 'ptcPlusBindingDockToggle',
+          'aria-label': enlarged ? undefined : t(expanded ? 'bindings.reviewCollapse' : 'bindings.reviewExpand'),
+          'aria-expanded': enlarged ? undefined : expanded, 'aria-controls': expanded && !enlarged ? content : undefined,
+          onClick: enlarged ? undefined : () => review.display(compact ? 'enlarged' : expanded ? 'collapsed' : 'expanded') },
           h('span', { className: 'ptcPlusBindingDockSymbol', 'aria-hidden': true }, '</>'),
           h('span', { className: 'ptcPlusBindingDockHeading' },
             h('strong', { id: title, title: view.candidate.entry.name }, view.candidate.entry.name),
             h('span', { role: 'status', title: t(bindingReviewStatus(view)) },
               `${t('bindings.reviewTitle')} · ${t(bindingReviewStatus(view))}`)),
-          h('span', { className: 'ptcPlusBindingDockChevron', 'aria-hidden': true },
+          enlarged ? null : h('span', { className: 'ptcPlusBindingDockChevron', 'aria-hidden': true },
             h(IconChevronDownOutline14, { size: 16 }))),
-        h(IconButton, { icon: IconCloseOutline16, label: t('bindings.reviewClose'), onClick: close })),
-      !expanded ? null : h(React.Fragment, null,
+        h('div', { className: 'ptcPlusBindingDockControls' },
+          h(IconButton, { icon: enlarged ? RestoreIcon : EnlargeIcon,
+            label: t(enlarged ? 'bindings.reviewRestore' : 'bindings.reviewEnlarge'),
+            onClick: enlarged ? restorePreview : () => review.display('enlarged', view.candidate) }),
+          h(IconButton, { icon: isHostIconComponent(IconCloseOutline16) ? IconCloseOutline16 : ReviewCloseIcon,
+            label: t('bindings.reviewClose'), onClick: close }))),
+      !enlarged && view.visibility !== 'expanded' ? null : h(React.Fragment, null,
         h('div', { className: 'ptcPlusBindingDockBody', id: content, tabIndex: 0,
+          inert: !expanded ? '' : undefined, 'aria-hidden': !expanded ? true : undefined,
           role: 'region', 'aria-label': t('bindings.source') },
+          view.message === null ? null : h('p', { className: 'ptcPlusMessage ptcPlusDanger', role: 'status' }, t(view.message)),
+          view.message === null ? null : h(ActionButton, { disabled: view.busy,
+            onClick: () => review.reset() }, t('bindings.reviewRetry')),
           h(BindingCandidateContent, { candidate: view.candidate, t, showName: false })),
-        view.message === null ? null : h('p', { className: 'ptcPlusMessage ptcPlusDanger', role: 'status' }, t(view.message)),
-        h('div', { className: 'ptcPlusBindingDockActions' },
+        h('div', { className: 'ptcPlusBindingDockActions',
+          inert: !expanded ? '' : undefined, 'aria-hidden': !expanded ? true : undefined },
           h(ActionButton, { className: 'ptcPlusBindingDockDiscard', 'data-kind': 'ghost',
             disabled: !view.writable || view.busy,
             onClick: () => act('discard-draft') }, t('bindings.draftDiscard')),
           h(ActionButton, { disabled: !view.writable || view.busy,
             onClick: () => act('save-draft', false) }, t('bindings.draftSave')),
           h(ActionButton, { 'data-kind': 'primary', disabled: !view.writable || view.busy,
-            onClick: () => act('save-draft', true) }, t('bindings.draftSaveEnable')),
-          view.message === null ? null : h(ActionButton, { disabled: view.busy,
-            onClick: () => review.reset() }, t('bindings.reviewRetry'))))))
+            onClick: () => act('save-draft', true) }, t('bindings.draftSaveEnable')))))
+    return h('div', { className: 'ptcPlusBindingDockAnchor', ref: anchor }, enlarged
+      ? h(Modal, { open: view.reachable, title: `${view.candidate.entry.name} · ${t('bindings.reviewTitle')}`,
+        headless: true, className: 'ptcPlusBindingReviewModal', onClose: restorePreview }, panel)
+      : !view.reachable ? null : createPortal(h('div', { className: 'ptcPlusBindingPreviewLayer', ref: layer }, panel), document.body))
   }
 
   function BindingCommandCard({ node, sessionId, t, useProjection }) {