dsh-ptc-plus 0.4.8 → 0.5.0

package/src/client-feature-gates.js

@@ -1,3 +1,5 @@
+import { CONFIG_DEFAULTS } from '../internal/config-spec.js'
+
 /**
  * Settings snapshot to feature eligibility. Each feature names the settings that
  * gate exactly one contribution, so a new gated surface reads one table instead
@@ -11,22 +13,30 @@ const FEATURE_SETTINGS = Object.freeze({
   bindings: ['userBindingsEnabled'],
   // Enhanced run_code tool rows.
   toolView: ['enhancedToolView'],
+  toolHover: ['enhancedToolView', 'toolHoverPreviewEnabled'],
   // The REPL view tab; the session preset condition is added by its registration.
   replView: ['replViewEnabled'],
   // The composer authoring menu.
   authorButton: ['userBindingsEnabled', 'bindingAuthorButtonVisible'],
+  // Settings and capability refresh do not require Global User Bindings.
+  ptcMenu: ['bindingAuthorButtonVisible'],
 })
 
 /**
- * Pure settings projection: a feature is eligible only from a ready snapshot
- * with the master switch on. These features default to on unless the user
- * turned them off. Writability gates setting writes, not contribution presence.
+ * Pure settings projection: a feature is eligible unless the settings say
+ * otherwise. Only a readable snapshot can turn a feature off — an unreadable or
+ * not-yet-arrived settings transport falls back to the defaults the plugin ships
+ * in `CONFIG_FIELDS`, so a transport outage degrades the settings surface
+ * instead of removing every contribution the plugin owns. Writability gates
+ * setting writes, not contribution presence.
  */
 export function featureEnabled(snapshot, feature) {
   const rule = FEATURE_SETTINGS[feature]
   if (rule === undefined) throw new Error(`Unknown client feature: ${feature}`)
-  if (snapshot?.status !== 'ready' || snapshot.value?.enabled !== true) return false
-  const value = snapshot.value
+  const value = snapshot?.status === 'ready' && snapshot.value !== undefined
+    ? snapshot.value
+    : CONFIG_DEFAULTS
+  if (value.enabled === false) return false
   return rule.every(key => value[key] !== false)
 }
 

package/src/client-host-compat.js

@@ -1,4 +1,25 @@
 import { SETTINGS_NAMESPACE } from '../internal/config-spec.js'
+import { ForwardRef, Lazy, Memo, isValidElementType } from 'react-is'
+
+/** Host exports are components, including React's wrapped object types. */
+export function isHostComponent(component) {
+  if (typeof component === 'function') return true
+  if (typeof component !== 'object' || component === null) return false
+  const seen = new Set()
+  while (isValidElementType(component)) {
+    if (typeof component !== 'object' || component === null) return true
+    if (seen.has(component)) return false
+    seen.add(component)
+    // react-is also admits server references and wrappers with missing payloads.
+    if (component.$$typeof === ForwardRef) return typeof component.render === 'function'
+    if (component.$$typeof === Lazy) return typeof component._init === 'function'
+      && typeof component._payload === 'object' && component._payload !== null
+    if (component.$$typeof !== Memo) return false
+    if (component.compare != null && typeof component.compare !== 'function') return false
+    component = component.type
+  }
+  return false
+}
 
 const HOST_ICON_EXPORTS = Object.freeze({
   check: ['IconCheckOutlineRegular', 'IconCheckOutline14'],
@@ -28,7 +49,7 @@ ABSENT_HOST_ICON.absentHostIcon = true
 
 /** Whether a normalized icon entry is a glyph the host actually published. */
 export function isHostIconComponent(icon) {
-  return typeof icon === 'function' && icon.absentHostIcon !== true
+  return isHostComponent(icon) && icon.absentHostIcon !== true
 }
 
 /**
@@ -42,7 +63,7 @@ export function hostIconComponents(primitives) {
   return Object.fromEntries(Object.entries(HOST_ICON_EXPORTS).map(([name, candidates]) => [
     name,
     candidates.map(candidate => primitives?.[candidate])
-      .find(value => typeof value === 'function') ?? ABSENT_HOST_ICON,
+      .find(isHostComponent) ?? ABSENT_HOST_ICON,
   ]))
 }
 

package/src/client-indicator-view.js

@@ -22,6 +22,7 @@ export function createIndicatorView(React, deps) {
     normalizeReplMemorySnapshot, unavailableReplMemorySnapshot,
     ReplMemoryCard, replPopoverIsOpen, placeReplPopover,
     catalogOwner, subscribeReset,
+    useObservedReplMemory, observeRepl,
   } = deps
   const h = React.createElement
 
@@ -225,13 +226,10 @@ export function createIndicatorView(React, deps) {
         }
       }
     }, [cancelClose, cancelOpen, schedulePlacement])
+    const memory = useObservedReplMemory({ sessionId, projected: projectionMemory,
+      active: expanded && sessionUsesPtcPreset(preset) && featureEnabled(settings, 'plugin'),
+      elementRef: popoverRef, observeRepl })
     if (!sessionUsesPtcPreset(preset) || !featureEnabled(settings, 'plugin')) return null
-    let memory
-    try {
-      memory = normalizeReplMemorySnapshot(projectionMemory)
-    } catch {
-      memory = unavailableReplMemorySnapshot()
-    }
     const popoverId = `ptc-plus-repl-${String(resolvedSessionId).replace(/[^A-Za-z0-9_-]/g, '-')}`
     const titleId = `${popoverId}-title`
     return h('span', { className: 'ptcPlusActiveShell', ref: shellRef },

package/src/client-primitives.js

@@ -0,0 +1,280 @@
+import { isHostComponent } from './client-host-compat.js'
+import * as RadixSelect from '@radix-ui/react-select'
+
+/**
+ * Resolve the Harness Client components this plugin renders against the
+ * installed generation.
+ *
+ * The plugin may load a generation that renamed, removed, or reshaped a
+ * primitive; a missing component would otherwise throw while rendering and take
+ * the whole slot entry down with it. Each component therefore resolves to the
+ * shipped primitive when that generation provides it and to a plugin-local
+ * fallback otherwise, so a primitive change degrades one control instead of
+ * blanking the entry that renders it.
+ */
+
+/** One menu row: separators and labels paint; every other row selects by id. */
+function menuEntry(React, item, onSelect) {
+  const h = React.createElement
+  const content = item.label ?? item.text ?? null
+  if (item.type === 'separator') {
+    return h('div', { key: item.id, className: 'ptcPlusFallbackMenuSeparator', role: 'separator' })
+  }
+  if (item.type === 'label') {
+    return h('div', { key: item.id, className: 'ptcPlusFallbackMenuLabel' }, content)
+  }
+  return h('button', {
+    key: item.id, type: 'button', role: 'menuitem', className: 'ptcPlusFallbackMenuItem',
+    disabled: item.disabled === true,
+    onClick: () => onSelect?.(item.id),
+  }, content)
+}
+
+function useCompositionGuard(React, open) {
+  const composing = React.useRef(false)
+  const ended = React.useRef(false)
+  React.useEffect(() => {
+    composing.current = false
+    ended.current = false
+    if (!open) return undefined
+    const start = () => { composing.current = true }
+    const end = () => { composing.current = false; ended.current = true }
+    const release = () => { ended.current = false }
+    const blur = () => { composing.current = false; ended.current = false }
+    document.addEventListener('compositionstart', start, true)
+    document.addEventListener('compositionend', end, true)
+    document.addEventListener('keyup', release, true)
+    window.addEventListener('blur', blur)
+    return () => {
+      document.removeEventListener('compositionstart', start, true)
+      document.removeEventListener('compositionend', end, true)
+      document.removeEventListener('keyup', release, true)
+      window.removeEventListener('blur', blur)
+      composing.current = false
+      ended.current = false
+    }
+  }, [open])
+  return event => {
+    const guarded = composing.current || ended.current || event.isComposing === true || event.keyCode === 229
+    ended.current = false
+    return guarded
+  }
+}
+
+/** Menu fallback: the anchor, the item list, the pinned footer and the children region. */
+function createFallbackMenu(React, createPortal = content => content) {
+  const h = React.createElement
+  return function FallbackMenu({ open, items = [], children, footer, className, listClassName, autoFocus, anchor,
+    onClose, onSelect, portal = false, side = 'bottom', align = 'start', getAnchorRect, closeOnPointerLeave = false }) {
+    const root = React.useRef(null)
+    const list = React.useRef(null)
+    const closeTimer = React.useRef(null)
+    const close = React.useRef(onClose)
+    close.current = onClose
+    const isComposing = useCompositionGuard(React, open)
+    const cancelClose = () => { clearTimeout(closeTimer.current); closeTimer.current = null }
+    const scheduleClose = () => {
+      if (!closeOnPointerLeave) return
+      cancelClose()
+      closeTimer.current = setTimeout(() => close.current?.(), 180)
+    }
+    React.useEffect(() => cancelClose, [open])
+    React.useLayoutEffect(() => {
+      if (!open) return undefined
+      const place = () => {
+        const rect = getAnchorRect?.() ?? root.current?.getBoundingClientRect()
+        const surface = list.current
+        if (!rect || !surface) return
+        const viewport = window.visualViewport
+        const viewportTop = viewport?.offsetTop ?? 0
+        const viewportLeft = viewport?.offsetLeft ?? 0
+        const viewportHeight = viewport?.height ?? window.innerHeight
+        const viewportWidth = viewport?.width ?? window.innerWidth
+        const available = Math.max(0, side === 'top' ? rect.top - viewportTop - 12
+          : viewportTop + viewportHeight - rect.bottom - 12)
+        surface.style.maxHeight = `${available}px`
+        const measured = surface.getBoundingClientRect()
+        const left = align === 'end' ? rect.right - measured.width : rect.left
+        surface.style.left = `${Math.max(viewportLeft + 8, Math.min(left, viewportLeft + viewportWidth - measured.width - 8))}px`
+        surface.style.top = `${side === 'top' ? Math.max(viewportTop + 8, rect.top - measured.height - 4) : rect.bottom + 4}px`
+      }
+      place()
+      window.addEventListener('resize', place)
+      window.addEventListener('scroll', place, true)
+      window.visualViewport?.addEventListener('resize', place)
+      window.visualViewport?.addEventListener('scroll', place)
+      return () => {
+        window.removeEventListener('resize', place)
+        window.removeEventListener('scroll', place, true)
+        window.visualViewport?.removeEventListener('resize', place)
+        window.visualViewport?.removeEventListener('scroll', place)
+      }
+    }, [open, side, align, getAnchorRect, children, items, footer])
+    React.useEffect(() => {
+      if (!open) return undefined
+      if (autoFocus) list.current?.querySelector('button:not(:disabled)')?.focus()
+      const onKeyDown = event => {
+        if (event.defaultPrevented || isComposing(event)) return
+        if (event.key === 'Escape') {
+          event.preventDefault()
+          event.stopPropagation()
+          if (!event.repeat) close.current?.()
+          return
+        }
+        if (!root.current?.contains(event.target) && !list.current?.contains(event.target)) return
+        if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return
+        const controls = [...list.current.querySelectorAll('button:not(:disabled)')]
+        if (controls.length === 0) return
+        const current = controls.indexOf(document.activeElement)
+        const next = event.key === 'Home' ? 0 : event.key === 'End' ? controls.length - 1
+          : (current + (event.key === 'ArrowDown' ? 1 : -1) + controls.length) % controls.length
+        event.preventDefault()
+        controls[next].focus()
+      }
+      const onPointerDown = event => {
+        if (root.current?.contains(event.target) || list.current?.contains(event.target)) return
+        close.current?.()
+      }
+      document.addEventListener('keydown', onKeyDown)
+      document.addEventListener('pointerdown', onPointerDown, true)
+      return () => {
+        document.removeEventListener('keydown', onKeyDown)
+        document.removeEventListener('pointerdown', onPointerDown, true)
+      }
+    }, [open, autoFocus])
+    const rows = list => list.map(item => menuEntry(React, item, onSelect))
+    const surface = open ? h('div', { ref: list, className: ['ptcPlusFallbackMenuList', listClassName].filter(Boolean).join(' '),
+      role: 'menu', onPointerEnter: cancelClose, onPointerLeave: scheduleClose }, ...rows(items),
+      ...(Array.isArray(footer) ? rows(footer) : []),
+      children ?? null) : null
+    return h('span', { ref: root, className: ['ptcPlusFallbackMenu', className].filter(Boolean).join(' '),
+      onPointerEnter: cancelClose, onPointerLeave: scheduleClose }, anchor ?? null,
+      portal && surface !== null ? createPortal(surface, document.body) : surface)
+  }
+}
+
+/** Modal fallback: headless content or a titled dialog that closes on Escape and backdrop. */
+function createFallbackModal(React, createPortal = content => content) {
+  const h = React.createElement
+  const modalStack = []
+  return function FallbackModal({ open, onClose, title, closeLabel, description, className, contentClassName, headless, children }) {
+    const root = React.useRef(null)
+    const close = React.useRef(onClose)
+    close.current = onClose
+    const isComposing = useCompositionGuard(React, open)
+    const focusable = 'button:not(:disabled),input:not(:disabled),textarea:not(:disabled),select:not(:disabled),[href],[tabindex]:not([tabindex="-1"]),[contenteditable=true],summary'
+    React.useLayoutEffect(() => {
+      if (!open) return undefined
+      const previous = document.activeElement
+      const surface = root.current
+      const target = surface?.querySelector('[data-modal-autofocus]:not(:disabled)') ?? surface?.querySelector(focusable) ?? surface
+      target?.focus({ preventScroll: true })
+      modalStack.push(surface)
+      const onDocumentKeyDown = event => {
+        if (modalStack.at(-1) === surface) onKeyDown(event)
+      }
+      document.addEventListener('keydown', onDocumentKeyDown)
+      return () => {
+        document.removeEventListener('keydown', onDocumentKeyDown)
+        modalStack.splice(modalStack.indexOf(surface), 1)
+        if (document.activeElement === document.body || surface?.contains(document.activeElement)) previous?.focus?.({ preventScroll: true })
+      }
+    }, [open])
+    const onKeyDown = event => {
+      if (event.defaultPrevented || isComposing(event)) return
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        event.stopPropagation()
+        if (!event.repeat) close.current?.()
+      } else if (event.key === 'Tab') {
+        const controls = [...root.current.querySelectorAll(focusable)]
+          .filter(control => control.getClientRects().length > 0 && !control.closest('[aria-hidden=true],[hidden]'))
+        const target = event.shiftKey ? controls.at(-1) : controls[0]
+        const boundary = event.shiftKey ? controls[0] : controls.at(-1)
+        if (controls.length === 0 || document.activeElement === boundary || !root.current.contains(document.activeElement)) {
+          event.preventDefault()
+          ;(target ?? root.current).focus({ preventScroll: true })
+        }
+      }
+    }
+    if (!open) return null
+    const body = h('div', { className: contentClassName ?? 'ptcPlusFallbackModalBody' }, children)
+    const surface = ['ptcPlusFallbackModal', className].filter(Boolean).join(' ')
+    return createPortal(h('div', {
+      className: 'ptcPlusFallbackModalBackdrop',
+      onPointerDown: event => { if (event.target === event.currentTarget) onClose?.() },
+    }, h('div', { ref: root, tabIndex: -1, className: surface, role: 'dialog', 'aria-modal': 'true', 'aria-label': title },
+      headless === true ? null : h('div', { className: 'ptcPlusFallbackModalHead' },
+        h('h2', null, title),
+        h('button', { type: 'button', className: 'ptcPlusDialogClose', 'aria-label': closeLabel ?? title, onClick: () => onClose?.() },
+          closeLabel ?? '\u00d7')),
+      headless === true || description === undefined ? null : h('p', { className: 'ptcPlusDetail' }, description),
+      headless === true ? children : body)), document.body)
+  }
+}
+
+/**
+ * Resolve every component the plugin renders.
+ * @param primitives - the installed generation's Client primitives.
+ * @param React - the browser React instance.
+ * @returns the component set the views consume.
+ */
+export function resolvePrimitives(primitives, React, createPortal) {
+  return Object.freeze({
+    Button: primitives.Button,
+    CodeBlock: primitives.CodeBlock,
+    DisclosureRow: primitives.DisclosureRow,
+    Menu: isHostComponent(primitives.Menu) ? primitives.Menu : createFallbackMenu(React, createPortal),
+    MenuFallback: createFallbackMenu(React, createPortal),
+    Select: createSelect(React),
+    Modal: isHostComponent(primitives.Modal) ? primitives.Modal : createFallbackModal(React, createPortal),
+    Toast: primitives.Toast,
+    Tooltip: primitives.Tooltip,
+  })
+}
+
+/** Shared themed choice control; Radix owns listbox focus, typeahead, and dismissal. */
+export function createSelect(React) {
+  const h = React.createElement
+  return function Select({ value, options, onChange, label, disabled = false, className = '',
+    placeholder, dataStrategy, autoFocus = false }) {
+    const [open, setOpen] = React.useState(false)
+    React.useEffect(() => { if (disabled) setOpen(false) }, [disabled])
+    const chosen = options.find(option => option.value === value)
+    let emptyToken = '__ptc_plus_empty_choice__'
+    while (options.some(option => option.value === emptyToken)) emptyToken += '_'
+    return h(RadixSelect.Root, { value: value === '' ? emptyToken : value, open, disabled,
+      onOpenChange: setOpen, onValueChange: next => onChange(next === emptyToken ? '' : next) },
+      h(RadixSelect.Trigger, { className: ['ptcPlusSelectTrigger', className].filter(Boolean).join(' '),
+        'aria-label': label, 'data-strategy': dataStrategy, 'data-modal-autofocus': autoFocus || undefined },
+      h(RadixSelect.Value, { placeholder: placeholder ?? chosen?.label ?? '' }),
+      h(RadixSelect.Icon, { className: 'ptcPlusSelectChevron', 'aria-hidden': true },
+        h('svg', { viewBox: '0 0 16 16', width: 16, height: 16, fill: 'none' },
+          h('path', { d: 'm4 6 4 4 4-4', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' })))),
+      h(RadixSelect.Portal, null,
+        h(RadixSelect.Content, { className: 'ptcPlusSelectMenu', position: 'popper', sideOffset: 4,
+          onEscapeKeyDown: event => event.stopPropagation() },
+        h(RadixSelect.Viewport, { className: 'ptcPlusSelectViewport' },
+          ...options.map(option => h(RadixSelect.Item, { key: option.value, value: option.value === '' ? emptyToken : option.value,
+            disabled: option.disabled === true, className: 'ptcPlusSelectOption' },
+          h(RadixSelect.ItemText, null, option.label),
+          h(RadixSelect.ItemIndicator, { className: 'ptcPlusSelectCheck' }, '✓')))))))
+  }
+}
+
+/** Adapt host action styling, or own it completely when the primitive is absent. */
+export function createActionButton(React, Button) {
+  const h = React.createElement
+  return function ActionButton({ className = '', 'data-kind': kind, ...props }) {
+    const classes = className.split(/\s+/).filter(name => name !== '' && name !== 'ptcPlusButton')
+    return isHostComponent(Button)
+      ? h(Button, {
+        type: 'button', ...props, size: 'sm',
+        variant: kind === 'primary' ? 'primary' : kind === 'ghost' ? 'ghost' : 'outline',
+        className: classes.join(' '),
+      })
+      : h('button', { type: 'button', ...props, className: ['ptcPlusButton', ...classes].join(' '), 'data-kind': kind })
+  }
+}
+
+export { createFallbackMenu, createFallbackModal }

package/src/client-repl-view.js

@@ -1,4 +1,4 @@
-import { isHostIconComponent } from './client-host-compat.js'
+import { isHostComponent, isHostIconComponent } from './client-host-compat.js'
 
 /**
  * REPL surface views: the conversation tab (session bindings + global workbench)
@@ -7,7 +7,7 @@ import { isHostIconComponent } from './client-host-compat.js'
  */
 export function createReplView(React, deps) {
   const {
-    CodeBlock, featureEnabled, normalizeReplMemorySnapshot,
+    CodeBlock, Select, featureEnabled, normalizeReplMemorySnapshot,
     unavailableReplMemorySnapshot, useSessionPreset, sessionUsesPtcPreset,
     useWorkbenchController, UserBindingsWorkbench,
     icons: { search: IconSearchOutline16, chevron: IconChevronDownOutline14 },
@@ -16,6 +16,18 @@ export function createReplView(React, deps) {
 
   function ReplComposer() { return null }
 
+  function useObservedReplMemory({ sessionId, projected, active, elementRef, observeRepl }) {
+    const memory = React.useMemo(() => {
+      try { return normalizeReplMemorySnapshot(projected) } catch { return unavailableReplMemorySnapshot() }
+    }, [projected])
+    const [observed, setObserved] = React.useState(null)
+    React.useEffect(() => active && typeof observeRepl === 'function'
+      ? observeRepl(sessionId, elementRef.current, memory,
+        value => setObserved({ sessionId, source: memory, value }))
+      : undefined, [active, observeRepl, sessionId, memory, elementRef])
+    return observed?.sessionId === sessionId && observed.source === memory ? observed.value : memory
+  }
+
   function ReplBindingInspector({ entry, preview, t }) {
     const readable = preview?.status === 'readable'
     return h('aside', { className: 'ptcPlusBindingInspector', 'aria-label': entry.name },
@@ -23,7 +35,7 @@ export function createReplView(React, deps) {
         h('strong', null, entry.name),
         h('span', null, t('memory.location', entry.definition))),
       h('div', { className: 'ptcPlusObservationLabel' }, t('console.definition')),
-      typeof CodeBlock === 'function'
+      isHostComponent(CodeBlock)
         ? h(CodeBlock, { code: entry.definition.source, lang: 'typescript', className: 'ptcPlusObservationCode',
             copyLabel: t('tool.copy'), copiedLabel: t('tool.copied') })
         : h('pre', { className: 'ptcPlusObservationCode' }, entry.definition.source),
@@ -61,10 +73,9 @@ export function createReplView(React, deps) {
               isHostIconComponent(IconSearchOutline16) ? h(IconSearchOutline16, { size: 16 }) : null,
               h('input', { value: query, onChange: event => setQuery(event.target.value),
                 placeholder: t('console.search'), 'aria-label': t('console.search') })),
-            h('select', { className: 'ptcPlusSelect', value: kind, onChange: event => setKind(event.target.value),
-              'aria-label': t('console.kind') },
-              ['all', 'variable', 'function', 'class', 'import'].map(value => h('option', { key: value, value },
-                t(value === 'all' ? 'console.allKinds' : `memory.kind.${value}`))))),
+            h(Select, { value: kind, onChange: setKind, label: t('console.kind'),
+              options: ['all', 'variable', 'function', 'class', 'import'].map(value => ({ value,
+                label: t(value === 'all' ? 'console.allKinds' : `memory.kind.${value}`) })) })),
           h('div', { className: 'ptcPlusObservations' },
             h('table', { className: 'ptcPlusObservationTable', 'aria-label': t('console.session') },
               h('thead', null, h('tr', null,
@@ -98,18 +109,14 @@ export function createReplView(React, deps) {
     const globalEnabled = featureEnabled(settings, 'bindings')
     const workbench = useWorkbenchController({ enabled: globalEnabled, active: true, callUserBindings })
     const eligible = featureEnabled(settings, 'replView') && sessionUsesPtcPreset(preset)
-    const memory = React.useMemo(() => {
-      try { return normalizeReplMemorySnapshot(projected) } catch { return unavailableReplMemorySnapshot() }
-    }, [projected])
-    const [observed, setObserved] = React.useState(null)
     const observationRegion = React.useRef(null)
+    const memory = useObservedReplMemory({ sessionId, projected, active: eligible,
+      elementRef: observationRegion, observeRepl })
     React.useEffect(() => eligible ? hideComposer(sessionId) : undefined, [eligible, hideComposer, sessionId])
-    React.useEffect(() => eligible ? observeRepl(sessionId, observationRegion.current, memory,
-      value => setObserved({ sessionId, source: memory, value })) : undefined, [eligible, observeRepl, sessionId, memory])
     if (!eligible) return null
     return h('div', { className: 'ptcPlusConsole', 'data-conversation-composer-overlay': '' },
       h('div', { className: 'ptcPlusConsoleSection', ref: observationRegion }, h(ReplSessionBindings, {
-        key: sessionId, memory: observed?.sessionId === sessionId && observed.source === memory ? observed.value : memory, t })),
+        key: sessionId, memory, t })),
       globalEnabled ? h('div', { className: 'ptcPlusConsoleSection ptcPlusBindingsSurface' },
         h(UserBindingsWorkbench, { controller: workbench, t, headingLabel: t('console.global') })) : null)
   }
@@ -275,7 +282,7 @@ export function createReplView(React, deps) {
                       line: binding.definition.line,
                       column: binding.definition.column,
                     })),
-                    typeof CodeBlock === 'function'
+                    isHostComponent(CodeBlock)
                       ? h(CodeBlock, {
                         code: binding.definition.source,
                         lang: 'typescript',
@@ -290,5 +297,5 @@ export function createReplView(React, deps) {
         : h('span', { className: 'ptcPlusReplMore' }, t('memory.more', { count: memory.omitted }))))
   }
 
-  return { ReplComposer, ReplConsole, ReplMemoryCard, replPopoverIsOpen, placeReplPopover }
+  return { ReplComposer, ReplConsole, ReplMemoryCard, replPopoverIsOpen, placeReplPopover, useObservedReplMemory }
 }