dsh-ptc-plus 0.3.2 → 0.4.1

package/src/client-binding-review.js

@@ -0,0 +1,230 @@
+import { normalizeUserBindingDraftView } from '../internal/user-binding-draft-projection.js'
+import { bindingModelPreferences } from '../internal/user-binding-model-context.js'
+
+export function bindingDraftProjection(value) {
+  try { return normalizeUserBindingDraftView(value) } catch { return undefined }
+}
+
+function candidateIdentity(candidate) {
+  return candidate ? JSON.stringify([candidate.requestId, candidate.commandId, candidate.version]) : null
+}
+
+function entryIdentity(entry) {
+  return JSON.stringify([entry?.id, entry?.name, entry?.scope, entry?.purpose, entry?.source,
+    entry?.symbols, entry?.enabled, bindingModelPreferences(entry?.modelContext)])
+}
+
+function sameCandidate(left, right) {
+  return left != null && right != null && candidateIdentity(left) === candidateIdentity(right)
+    && left.mode === right.mode && entryIdentity(left.entry) === entryIdentity(right.entry)
+}
+
+function matchesDraft(candidate, draft) {
+  return candidate != null && draft != null && candidate.version === draft.version
+    && candidate.mode === draft.mode && entryIdentity(candidate.entry) === entryIdentity(draft.entry)
+}
+
+function matchesAction(candidate, action) {
+  return action != null && action.requestId === candidate?.requestId && action.id === candidate?.entry.id
+    && (action.state === 'saved' || action.state === 'discarded') && typeof action.enabled === 'boolean'
+    && (action.state !== 'discarded' || action.enabled === false)
+}
+
+export function bindingReviewStatus(view) {
+  return view.action?.state === 'saved'
+    ? view.action.enabled ? 'bindings.commandSavedEnabled' : 'bindings.commandSaved'
+    : view.action?.state === 'discarded' ? 'bindings.commandDiscarded'
+      : view.busy ? 'bindings.reviewSaving' : view.message ? 'bindings.reviewAttention'
+        : view.writable ? 'bindings.commandReady'
+          : view.loading ? 'bindings.reviewLoading' : 'bindings.reviewReadOnly'
+}
+
+/** One Client review per session. Display choices and receipts never grant Host authority. */
+export function createBindingReviews(call) {
+  const sessions = new Map()
+  let disposed = false
+  function forSession(sessionId) {
+    if (sessions.has(sessionId)) return sessions.get(sessionId)
+    const listeners = new Set()
+    const choices = new Map()
+    let snapshot = { candidate: null, candidateKey: null, action: null, writable: false, busy: false, loading: false,
+      message: null, messageSource: null, visibility: 'expanded', mounted: false, reachable: false }
+    let projection
+    let authority = null
+    let revoked = false
+    let epoch = 0
+    let reading
+    const pending = new Map()
+    let timer
+    let attached = false
+    const publish = patch => {
+      if (disposed) return
+      snapshot = { ...snapshot, ...patch }
+      // Completed candidates belong to history, regardless of which Host evidence settled them.
+      if (snapshot.action !== null) snapshot.visibility = 'hidden'
+      for (const listener of listeners) listener()
+    }
+    const invalidate = () => {
+      epoch++
+      reading?.abort()
+      reading = undefined
+      clearInterval(timer)
+      timer = undefined
+    }
+    const select = (candidate, action = null) => {
+      const same = sameCandidate(candidate, snapshot.candidate)
+      const visibility = choices.get(candidateIdentity(candidate)) ?? 'expanded'
+      publish({ candidate, candidateKey: candidateIdentity(candidate), action: action ?? (same ? snapshot.action : null), visibility,
+        ...(!same ? { message: null, messageSource: null, writable: false, loading: false } : {}),
+        busy: pending.has(candidateIdentity(candidate)) })
+    }
+    const refresh = async () => {
+      if (!attached || authority === null || reading || pending.has(candidateIdentity(snapshot.candidate))
+        || snapshot.action !== null || disposed) return
+      const currentEpoch = epoch
+      const capability = authority
+      const commandId = projection.commandId
+      const controller = new AbortController()
+      reading = controller
+      const results = await Promise.allSettled(['list', 'draft', 'draft-review'].map(endpoint => (
+        call(endpoint, endpoint === 'list' ? {} : { capability }, controller.signal)
+      )))
+      if (disposed || epoch !== currentEpoch || controller.signal.aborted) return
+      reading = undefined
+      const [catalogResult, draftResult, reviewResult] = results
+      const review = reviewResult.status === 'fulfilled' ? reviewResult.value : null
+      const candidate = review?.candidate
+      const known = snapshot.candidate
+      const matches = candidate?.commandId === commandId && typeof candidate?.requestId === 'string'
+        && Number.isSafeInteger(candidate.version) && candidate.version > 0 && typeof candidate.entry?.source === 'string'
+        && (known === null || sameCandidate(known, candidate))
+      if (matches && matchesAction(candidate, review.action)) {
+        clearInterval(timer)
+        timer = undefined
+        publish({ ...(known !== null ? { action: review.action } : {}),
+          writable: false, loading: false, message: null, messageSource: null })
+        return
+      }
+      if (matches && known === null) select(candidate)
+      const draft = draftResult.status === 'fulfilled' ? draftResult.value : null
+      if (draftResult.status === 'fulfilled' && draft === null) revoked = true
+      const catalog = catalogResult.status === 'fulfilled' ? catalogResult.value : null
+      const writable = !revoked && matches && review.action === null && matchesDraft(candidate, draft)
+        && Number.isSafeInteger(catalog?.revision)
+      const error = results.find(result => result.status === 'rejected')
+      publish({ writable, loading: false, revision: writable ? catalog.revision : undefined,
+        ...(snapshot.messageSource === 'write' ? {} : {
+          message: error ? String(error.reason?.message ?? error.reason) : null,
+          messageSource: error ? 'read' : null,
+        }) })
+    }
+    const start = () => {
+      clearInterval(timer)
+      timer = undefined
+      if (!attached || authority === null || snapshot.action !== null) return
+      void refresh()
+      // Retain the existing bounded-frequency eligibility refresh, including during composer takeovers.
+      timer = setInterval(() => { void refresh() }, 1500)
+    }
+    const sync = next => {
+      projection = next
+      const historical = next?.history?.find(record => record.commandId === next.commandId)
+      const nextAuthority = next?.phase === 'ready' && next.commandId !== null && !historical?.action
+        ? next.capability : null
+      const previousKey = candidateIdentity(snapshot.candidate)
+      const recorded = next?.history?.find(record => sameCandidate(record.candidate, snapshot.candidate))
+      if (recorded?.action) publish({ action: recorded.action, writable: false, message: null, messageSource: null })
+      if (historical && next.phase === 'ready') {
+        // Historical receipts reconcile an existing review; they do not create a new dock.
+        if (!historical.action || sameCandidate(historical.candidate, snapshot.candidate)) {
+          select(historical.candidate, historical.action)
+        } else select(null)
+      }
+      else if (next?.commandId != null && next.commandId !== snapshot.candidate?.commandId) select(null)
+      else if (next === undefined || (next?.phase !== 'ready' && snapshot.candidate !== null
+        && snapshot.action === null && !next?.history?.some(record => sameCandidate(record.candidate, snapshot.candidate)))) {
+        select(null)
+      }
+      const nextKey = candidateIdentity(snapshot.candidate)
+      if (authority !== nextAuthority || previousKey !== nextKey) {
+        invalidate()
+        if (authority !== nextAuthority) revoked = false
+        authority = nextAuthority
+        publish({ writable: false, loading: nextAuthority !== null && snapshot.action === null })
+        start()
+      }
+    }
+    const act = async (operation, activate = false) => {
+      const key = candidateIdentity(snapshot.candidate)
+      if (!attached || disposed || !snapshot.writable || snapshot.action !== null || pending.has(key) || authority === null) return
+      const transaction = { candidate: snapshot.candidate, capability: authority }
+      pending.set(key, transaction)
+      invalidate()
+      publish({ busy: true, writable: false, message: null, messageSource: null })
+      try {
+        await call(operation, { capability: transaction.capability, version: transaction.candidate.version,
+          ...(operation === 'save-draft' ? { expectedRevision: snapshot.revision, activate } : {}) })
+        // Save returns only after persistence. Discard can also return for an absent locator,
+        // so it needs the existing review receipt before claiming a completed discard.
+        const receipt = operation === 'save-draft'
+          ? { requestId: transaction.candidate.requestId, id: transaction.candidate.entry.id, state: 'saved', enabled: activate }
+          : (await call('draft-review', { capability: transaction.capability }))
+        const action = operation === 'save-draft' ? receipt
+          : sameCandidate(receipt?.candidate, transaction.candidate) && matchesAction(transaction.candidate, receipt?.action)
+            ? receipt.action : null
+        if (!disposed && sameCandidate(snapshot.candidate, transaction.candidate) && snapshot.action === null) {
+          publish({ action, writable: false, loading: false,
+            message: action === null ? 'bindings.reviewUnconfirmed' : null,
+            messageSource: action === null ? 'write' : null })
+        }
+      } catch (error) {
+        if (!disposed && sameCandidate(snapshot.candidate, transaction.candidate) && snapshot.action === null) {
+          publish({ message: String(error?.message ?? error), messageSource: 'write', writable: false, loading: false })
+        }
+      } finally {
+        pending.delete(key)
+        if (!disposed && sameCandidate(snapshot.candidate, transaction.candidate)) {
+          publish({ busy: false })
+          start()
+        }
+      }
+    }
+    const review = {
+      getSnapshot: () => snapshot,
+      subscribe(listener) { listeners.add(listener); return () => listeners.delete(listener) },
+      sync,
+      attach() {
+        attached = true
+        publish({ mounted: true })
+        start()
+        return () => {
+          attached = false
+          invalidate()
+          publish({ mounted: false, reachable: false, writable: false })
+        }
+      },
+      reset() {
+        invalidate()
+        publish({ writable: false, loading: authority !== null && snapshot.action === null })
+        start()
+      },
+      reachable(value) { if (snapshot.reachable !== value) publish({ reachable: value }) },
+      display(visibility, candidate = snapshot.candidate) {
+        if (snapshot.candidate === null || snapshot.action !== null || !sameCandidate(snapshot.candidate, candidate)) return false
+        choices.set(candidateIdentity(snapshot.candidate), visibility)
+        publish({ visibility })
+        return true
+      },
+      act,
+      refresh,
+      dispose() { invalidate(); attached = false; listeners.clear(); choices.clear() },
+    }
+    sessions.set(sessionId, review)
+    return review
+  }
+  return {
+    forSession,
+    reset() { for (const review of sessions.values()) review.reset() },
+    dispose() { disposed = true; for (const review of sessions.values()) review.dispose(); sessions.clear() },
+  }
+}

package/src/client-bindings-data.js

@@ -0,0 +1,29 @@
+import { bindingModelPreferences } from '../internal/user-binding-model-context.js'
+
+      const blankBinding = () => ({
+        id: '',
+        name: '',
+        scope: 'namespace',
+        symbolsText: '',
+        purpose: '',
+        enabled: false,
+        source: 'export function helper() {\n  return undefined\n}\n',
+        modelContext: bindingModelPreferences(),
+      })
+      const editableBinding = value => ({
+        id: value.id,
+        name: value.name,
+        scope: value.scope,
+        symbolsText: Array.isArray(value.symbols) ? value.symbols.join(', ') : '',
+        purpose: value.purpose,
+        enabled: value.enabled,
+        source: value.source,
+        modelContext: bindingModelPreferences(value.modelContext),
+      })
+      const bindingPayload = (value) => {
+        const { symbolsText, ...entry } = value
+        const symbols = symbolsText.split(',').map(symbol => symbol.trim()).filter(Boolean)
+        return symbols.length === 0 ? entry : { ...entry, symbols }
+      }
+
+export { blankBinding, editableBinding, bindingPayload }

package/src/client-catalog.js

@@ -0,0 +1,127 @@
+/**
+ * Global User Bindings catalog owner. One source per consumer: reads are
+ * latest-wins inside that source (a newer read, write or reset aborts the
+ * previous one and its response is dropped), writes are serialized per source,
+ * and every state change publishes an immutable snapshot to its subscribers.
+ * Consumers therefore keep no epoch of their own, and a slow request in one
+ * surface can never invalidate another surface's request.
+ */
+export function createCatalogOwner({ callUserBindings }) {
+  const sources = new Set()
+
+  const createSource = () => {
+    let state = Object.freeze({ status: 'loading', catalog: null, error: null })
+    let epoch = 0
+    let controller
+    let writing = false
+    let inactive = false
+    const listeners = new Set()
+
+    const publish = next => {
+      state = Object.freeze({ ...state, ...next })
+      for (const listener of [...listeners]) listener()
+    }
+    // Any new read/write/reset invalidates every older response in this source.
+    const invalidate = () => {
+      epoch += 1
+      const previous = controller
+      controller = undefined
+      previous?.abort()
+      return epoch
+    }
+    const message = error => (error instanceof Error ? error.message : String(error))
+
+    const source = {
+      getSnapshot: () => state,
+      subscribe(listener) {
+        // A mounted consumer makes the source live again after a release, and
+        // keeps it inside owner disposal.
+        if (inactive) {
+          inactive = false
+          sources.add(source)
+        }
+        listeners.add(listener)
+        return () => {
+          listeners.delete(listener)
+          if (listeners.size === 0) invalidate()
+        }
+      },
+      /** Latest-wins catalog read; resolves to the catalog only when it still owns the source. */
+      async read({ reload = false } = {}) {
+        if (inactive || writing) return undefined
+        const current = invalidate()
+        const read = new AbortController()
+        controller = read
+        publish({ status: 'loading', error: null })
+        try {
+          const catalog = await callUserBindings(reload ? 'reload' : 'list', {}, read.signal)
+          if (epoch !== current || controller !== read) return undefined
+          controller = undefined
+          if (catalog?.error !== undefined) {
+            publish({ status: 'error', catalog: null, error: String(catalog.error) })
+            return undefined
+          }
+          publish({ status: 'ready', catalog, error: null })
+          return catalog
+        } catch (error) {
+          if (epoch !== current || controller !== read) return undefined
+          controller = undefined
+          publish({ status: 'error', catalog: null, error: message(error) })
+          return undefined
+        }
+      },
+      /** Serialized compare-and-swap write; a failed write becomes the source error state. */
+      async write(operation) {
+        if (inactive || writing) return undefined
+        writing = true
+        const current = invalidate()
+        publish({ status: 'writing', error: null })
+        try {
+          const catalog = await operation()
+          if (epoch !== current) return undefined
+          publish({ status: 'ready', catalog, error: null })
+          return catalog
+        } catch (error) {
+          if (epoch !== current) return undefined
+          publish({ status: 'error', catalog: null, error: message(error) })
+          return undefined
+        } finally {
+          writing = false
+          // A reset landed while writing: the state it dropped has to be read again.
+          if (!inactive && epoch !== current) void source.read()
+        }
+      },
+      /** Publish a catalog produced outside this source (the workbench owns its own writes). */
+      accept(catalog) {
+        if (inactive) return
+        invalidate()
+        publish({ status: 'ready', catalog, error: null })
+      },
+      /** Drop in-flight work and require a fresh read before the next render trusts the catalog. */
+      reset() {
+        if (inactive) return
+        invalidate()
+        publish({ status: 'loading', catalog: null, error: null })
+      },
+      release() {
+        if (inactive) return
+        inactive = true
+        invalidate()
+        listeners.clear()
+        sources.delete(source)
+      },
+    }
+    sources.add(source)
+    return source
+  }
+
+  return {
+    /** Claim an independent catalog source; the consumer releases it when it unmounts. */
+    claim() {
+      return createSource()
+    },
+    dispose() {
+      for (const source of [...sources]) source.release()
+    },
+  }
+}

package/src/client-code-editor.js

@@ -0,0 +1,84 @@
+import { basicSetup } from 'codemirror'
+import { Compartment, EditorState, Transaction } from '@codemirror/state'
+import { EditorView, keymap } from '@codemirror/view'
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
+import { javascript } from '@codemirror/lang-javascript'
+import { tags } from '@lezer/highlight'
+
+const editorTheme = EditorView.theme({
+  '&': { backgroundColor: 'var(--dsw-alias-bg-layer-3)', color: 'var(--dsw-alias-label-primary)', fontSize: '12px' },
+  '&.cm-focused': { outline: 'none' },
+  '.cm-scroller': { fontFamily: 'ui-monospace, SFMono-Regular, Consolas, monospace', lineHeight: '20px', overflow: 'auto' },
+  '.cm-content': { minHeight: '320px', padding: '10px 0', caretColor: 'var(--dsw-alias-label-primary)' },
+  '.cm-line': { padding: '0 12px' },
+  '.cm-gutters': { backgroundColor: 'var(--dsw-alias-bg-layer-3)', color: 'var(--dsw-alias-label-tertiary)', border: 'none' },
+  '.cm-activeLine, .cm-activeLineGutter': { backgroundColor: 'var(--dsw-alias-interactive-bg-hover)' },
+  '.cm-cursor': { borderLeftColor: 'var(--dsw-alias-label-primary)' },
+  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection': {
+    backgroundColor: 'color-mix(in srgb, var(--dsw-alias-interactive-primary, #4d6bfe) 22%, transparent)',
+  },
+  '.cm-panels, .cm-tooltip': { backgroundColor: 'var(--dsw-alias-bg-layer-3)', color: 'var(--dsw-alias-label-primary)' },
+  '.cm-searchMatch': { backgroundColor: 'color-mix(in srgb, #e3b24e 30%, transparent)' },
+})
+
+const editorHighlight = HighlightStyle.define([
+  { tag: [tags.keyword, tags.modifier], color: 'var(--ptc-code-keyword)' },
+  { tag: [tags.string, tags.regexp], color: 'var(--ptc-code-string)' },
+  { tag: [tags.number, tags.bool, tags.null], color: 'var(--ptc-code-number)' },
+  { tag: [tags.typeName, tags.className], color: 'var(--ptc-code-type)' },
+  { tag: [tags.function(tags.variableName), tags.function(tags.propertyName)], color: 'var(--ptc-code-function)' },
+  { tag: [tags.comment, tags.meta], color: 'var(--dsw-alias-label-tertiary)', fontStyle: 'italic' },
+])
+
+export function createTypeScriptEditor(React) {
+  return function TypeScriptEditor({ value, onChange, disabled, label, documentId, onRun }) {
+    const parent = React.useRef(null)
+    const view = React.useRef(null)
+    const latest = React.useRef({ value, onChange })
+    const access = React.useRef(new Compartment())
+    latest.current = { value, onChange, onRun }
+    const accessExtensions = () => [EditorState.readOnly.of(disabled), EditorView.editable.of(!disabled)]
+
+    React.useLayoutEffect(() => {
+      const editor = new EditorView({
+        parent: parent.current,
+        state: EditorState.create({ doc: value, extensions: [
+          keymap.of([{ key: 'Mod-Enter', run: () => {
+            if (!latest.current.onRun) return false
+            void latest.current.onRun()
+            return true
+          } }]),
+          basicSetup,
+          javascript({ typescript: true }),
+          editorTheme,
+          syntaxHighlighting(editorHighlight),
+          EditorView.lineWrapping,
+          EditorView.contentAttributes.of({ 'aria-label': label }),
+          access.current.of(accessExtensions()),
+          EditorView.updateListener.of(update => {
+            if (update.docChanged) {
+              const next = update.state.doc.toString()
+              if (next !== latest.current.value) latest.current.onChange(next)
+            }
+          }),
+        ] }),
+      })
+      view.current = editor
+      return () => { view.current = null; editor.destroy() }
+    }, [documentId])
+
+    React.useLayoutEffect(() => {
+      const editor = view.current
+      const current = editor.state.doc.toString()
+      if (current !== value) editor.dispatch({
+        changes: { from: 0, to: current.length, insert: value },
+        annotations: Transaction.addToHistory.of(false),
+      })
+    }, [value])
+    React.useLayoutEffect(() => {
+      view.current.dispatch({ effects: access.current.reconfigure(accessExtensions()) })
+      view.current.contentDOM.setAttribute('aria-label', label)
+    }, [disabled, label])
+    return React.createElement('div', { className: 'ptcPlusCodeEditor', ref: parent })
+  }
+}

package/src/client-console.js

@@ -0,0 +1,112 @@
+const MAX_HISTORY_ENTRIES = 40
+const MAX_HISTORY_CHARACTERS = 128 * 1024
+const MAX_RECORD_CHARACTERS = MAX_HISTORY_CHARACTERS / 2
+
+export function createBindingConsole(React, { TypeScriptEditor, IconButton, ActionButton, icons }) {
+  const h = React.createElement
+  return function BindingConsole({ source, entryId, resetVersion, callUserBindings, t }) {
+    const [code, setCode] = React.useState('')
+    const [records, setRecords] = React.useState([])
+    const [running, setRunning] = React.useState(false)
+    const [state, setState] = React.useState('ready')
+    const [open, setOpen] = React.useState(true)
+    const environment = React.useRef(null)
+    const request = React.useRef(null)
+    const idleTimer = React.useRef(null)
+    const alive = React.useRef(false)
+    const history = React.useRef(null)
+    const release = () => {
+      clearTimeout(idleTimer.current)
+      const capability = environment.current
+      environment.current = null
+      request.current?.abort()
+      if (capability !== null) void callUserBindings('console-release', { environment: capability }).catch(() => {})
+    }
+    React.useEffect(() => {
+      alive.current = true
+      return () => { alive.current = false; release() }
+    }, [])
+    React.useEffect(() => { release(); setState('ready') }, [resetVersion])
+    React.useEffect(() => {
+      if (history.current) history.current.scrollTop = history.current.scrollHeight
+    }, [records, running])
+    const append = record => setRecords(current => {
+      const truncated = record.code.length + record.text.length > MAX_RECORD_CHARACTERS
+      const code = record.code.slice(0, MAX_RECORD_CHARACTERS / 2)
+      const bounded = { ...record, code, text: record.text.slice(0, MAX_RECORD_CHARACTERS - code.length),
+        truncated: truncated || code.length < record.code.length }
+      const next = [...current, bounded].slice(-MAX_HISTORY_ENTRIES)
+      let length = next.reduce((total, item) => total + item.code.length + item.text.length, 0)
+      while (next.length > 1 && length > MAX_HISTORY_CHARACTERS) {
+        const removed = next.shift()
+        length -= removed.code.length + removed.text.length
+      }
+      return next
+    })
+    const run = async () => {
+      if (request.current !== null || code.trim() === '' || source.trim() === '') return
+      clearTimeout(idleTimer.current)
+      const controller = new AbortController()
+      request.current = controller
+      setRunning(true)
+      setState('running')
+      const submitted = code
+      try {
+        const result = await callUserBindings('console-run', {
+          ...(environment.current === null ? {} : { environment: environment.current }), source, code: submitted,
+        }, controller.signal)
+        if (!alive.current || controller.signal.aborted) {
+          if (result.environment) void callUserBindings('console-release', { environment: result.environment }).catch(() => {})
+          if (alive.current) append({ code: submitted, text: t('execution.stopped'), error: true })
+          return
+        }
+        environment.current = result.environment
+        const text = [...result.logs.map(log => log.text), result.error ?? result.output ?? ''].join('\n')
+        append({ code: submitted, text, error: result.error !== undefined,
+          reset: result.reset, durationMs: result.durationMs })
+        setCode('')
+        setState(result.environment === null ? 'released' : 'ready')
+        if (result.expiresAt !== null) idleTimer.current = setTimeout(() => {
+          release()
+          if (alive.current) setState('released')
+        }, Math.max(0, result.expiresAt - Date.now()))
+      } catch (error) {
+        const stopped = controller.signal.aborted
+        release()
+        if (alive.current) {
+          append({ code: submitted, text: stopped ? t('execution.stopped') : String(error), error: true })
+          setState('released')
+        }
+      } finally {
+        if (request.current === controller) request.current = null
+        if (alive.current) setRunning(false)
+      }
+    }
+    return h('details', { className: 'ptcPlusExecution', open, onToggle: event => setOpen(event.currentTarget.open) },
+      h('summary', null, t('bindings.debug')),
+      h('div', { className: 'ptcPlusExecutionToolbar' },
+        h('span', { className: 'ptcPlusExecutionLanguage' }, 'TypeScript'),
+        h('span', { className: 'ptcPlusExecutionState', role: 'status' }, t(`execution.${state}`)),
+        h('div', { className: 'ptcPlusExecutionActions' },
+          running
+            ? h(ActionButton, { onClick: () => { release(); setState('released') } }, typeof icons.stop === 'function' ? h(icons.stop, { size: 14 }) : null, t('execution.stop'))
+            : h(ActionButton, { 'data-kind': 'primary', onClick: run, disabled: !code.trim() || !source.trim() },
+              typeof icons.play === 'function' ? h(icons.play, { size: 14 }) : null, t('bindings.run')),
+          h(IconButton, { icon: icons.reset, label: t('execution.reset'), onClick: () => { release(); setState('ready') } }),
+          h(IconButton, { icon: icons.clear, label: t('execution.clear'), onClick: () => setRecords([]) }))),
+      h('div', { className: 'ptcPlusExecutionHistory', ref: history, 'aria-label': t('execution.history') },
+        records.map((record, index) => h('div', { className: 'ptcPlusExecutionRecord', key: index },
+          record.reset ? h('span', { className: 'ptcPlusMessage' }, t('execution.restarted')) : null,
+          h('pre', { className: 'ptcPlusExecutionCommand' }, h('span', { 'aria-hidden': true }, '> '), record.code),
+          h('div', { className: 'ptcPlusIoCard ptcPlusExecutionResult' },
+            h('span', { className: 'ptcPlusExecutionOutputLabel' }, t('execution.output')),
+            h('pre', { className: 'ptcPlusExecutionOutput', 'data-error': record.error,
+              tabIndex: 0, 'aria-label': t('execution.output') }, record.text)),
+          record.truncated ? h('span', { className: 'ptcPlusMessage' }, t('execution.truncated')) : null,
+          record.durationMs === undefined ? null : h('span', { className: 'ptcPlusExecutionDuration' }, `${record.durationMs} ms`)))),
+      h('div', { className: 'ptcPlusExecutionInput' }, open ? h(TypeScriptEditor, {
+        documentId: entryId, value: code, onChange: setCode, disabled: running,
+        label: t('execution.input'), onRun: run,
+      }) : null))
+  }
+}