dsh-bettertaskgraphs 0.0.0-stage → 0.2.3

package/client.source.mjs

@@ -0,0 +1,318 @@
+// SPDX-License-Identifier: GPL-3.0-only
+// Loaded in the existing DSH browser seat, without a separate React root.
+export function createClientPlugin(React, z, createRemoteContribution, graphPresentation, branchLayout) {
+  const { createElement: h, useEffect, useId, useMemo, useRef, useState } = React
+  const locale = {
+    zh: {
+      title: '事务图', progress: '任务成功 {done}/{total}', active: '当前事务', ready: '可开始', noReady: '暂无可开始事务',
+      retry: '刷新', unavailable: '暂时无法读取事务图', stale: '显示上次读取的状态', recovering: '当前事务等待恢复对账',
+      pending: '状态更新待对账', waiting: '暂时没有可执行步骤，等待当前状态核对',
+      tree: '事务层级', details: '事务关系', incoming: '进入条件：', conditionSeparator: '：',
+      noEdges: '无进入条件',
+      complete: '完成', inProgress: '执行中', pendingNode: '待执行', inactive: '分支尚未激活', incomplete: '未完成',
+      branchWaiting: '等待分支选择', branchExcluded: '未选分支', branchChosen: '已选路径', graphComplete: '选中路径已完成',
+      skipped: '跳过，未执行', failed: '失败', blocked: '受阻', unsatisfied: '未满足', grouped: '组内尚有未完成',
+      fullscreen: '全屏', exitFullscreen: '退出全屏', branchGraph: '事务分支图',
+      prerequisiteMet: '前置已满足', edgeWaiting: '等待条件',
+      additionalPrerequisites: '另有 {count} 项前置',
+      requires: '前置完成后', onComplete: '完成时', onIncomplete: '未完成时', onCase: '分支 {value}',
+      totalIncomplete: '{count} 项未完成', totalSkipped: '{count} 项跳过', totalInactive: '{count} 项分支未激活',
+      totalExcluded: '{count} 项属于未选分支',
+      revision: '版本 {revision}',
+    },
+    en: {
+      title: 'Transaction graph', progress: '{done}/{total} tasks successful', active: 'Current transaction', ready: 'Ready to start',
+      noReady: 'No transaction ready to start', retry: 'Refresh', unavailable: 'Transaction graph is unavailable', stale: 'Showing last known state',
+      recovering: 'Current transaction awaits reconciliation', pending: 'Status update awaits reconciliation',
+      waiting: 'Execution is on hold until the current state is reconciled',
+      tree: 'Transaction hierarchy', details: 'Transaction relationships', incoming: 'Entry conditions:', conditionSeparator: ': ',
+      noEdges: 'No entry conditions',
+      complete: 'Complete', inProgress: 'In progress', pendingNode: 'Pending', inactive: 'Branch not activated',
+      incomplete: 'Incomplete', skipped: 'Skipped', failed: 'Failed', blocked: 'Blocked', unsatisfied: 'Unsatisfied', grouped: 'Group incomplete',
+      fullscreen: 'Full screen', exitFullscreen: 'Exit full screen', branchGraph: 'Transaction branch graph',
+      prerequisiteMet: 'Prerequisite met', edgeWaiting: 'Awaiting condition',
+      additionalPrerequisites: '+{count} prerequisites',
+      branchWaiting: 'Awaiting branch selection', branchExcluded: 'Branch not selected',
+      branchChosen: 'Selected path', graphComplete: 'Selected paths complete',
+      requires: 'After prerequisite', onComplete: 'On completion', onIncomplete: 'On incomplete', onCase: 'Case {value}',
+      totalIncomplete: '{count} incomplete', totalSkipped: '{count} skipped', totalInactive: '{count} inactive branches',
+      totalExcluded: '{count} on unselected paths',
+      revision: 'Revision {revision}',
+    },
+  }
+  const statusLabels = {
+    ACTIVE: 'inProgress', COMPLETE: 'complete', CONTAINER_INCOMPLETE: 'grouped', INACTIVE: 'inactive',
+    INCOMPLETE: 'incomplete', PENDING: 'pendingNode', SKIPPED: 'skipped',
+  }
+  const dispositions = { FAILED: 'failed', UNSATISFIED: 'unsatisfied', SKIPPED_NOT_RUN: 'skipped' }
+  const styles = `
+    .tg-dock{--tg-border:var(--dsw-alias-border-l1,#8885);--tg-panel:var(--dsw-specific-menu,Canvas);--tg-muted:var(--dsw-alias-label-secondary,inherit);container-type:inline-size;box-sizing:border-box;width:calc(100% - 24px);max-width:var(--dsh-composer-card-max-width,860px);margin:0 auto;border:1px solid var(--tg-border);border-radius:var(--dsw-radius-lg,12px);background:var(--tg-panel);color:var(--dsw-alias-label-primary,CanvasText);font:inherit}
+    .tg-dock button{font:inherit;color:inherit;cursor:pointer}
+    .tg-dock button:focus-visible,.tg-canvas-scroll:focus-visible{outline:2px solid #4f91ed;outline-offset:-2px}
+    .tg-top{display:flex;align-items:center;gap:3px;padding-inline-end:8px}
+    .tg-header{display:flex;align-items:center;gap:10px;flex:1 1 auto;padding:7px 10px;border:0;border-radius:8px;background:transparent;text-align:left;font-size:13px!important;min-width:0}
+    .tg-heading{font-weight:600;flex:none}.tg-summary{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tg-muted)}.tg-count{flex:none;font-size:12px;color:var(--tg-muted)}
+    .tg-chevron{display:inline-block;flex:none;transition:transform 180ms ease}.tg-header[aria-expanded=true] .tg-chevron{transform:rotate(180deg)}
+    .tg-fold{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 180ms ease,opacity 150ms ease}
+    .tg-fold[data-expanded=true]{grid-template-rows:1fr;opacity:1}.tg-fold-clip{min-height:0;overflow:hidden}
+    .tg-body{padding:0 12px 10px;max-height:min(46vh,440px);overflow:auto;overscroll-behavior:contain}.tg-overview{display:flex;align-items:center;gap:8px;justify-content:space-between;margin:4px 0 7px;overflow-wrap:anywhere}
+    .tg-overview h3,.tg-area h4,.tg-condition-heading{font-size:13px;margin:0;font-weight:600}
+    .tg-actions{display:flex;align-items:center;gap:7px;flex:none;font-size:11px}
+    .tg-dock .tg-control{border:1px solid var(--tg-border);padding:3px 7px;border-radius:6px;background:transparent;font-size:12px;flex:none}
+    .tg-control:disabled{cursor:default;opacity:.6}
+    .tg-notice{padding:6px 8px;background:#d78c0c20;border-radius:6px;margin:4px 0;font-size:12px;overflow-wrap:anywhere}
+    .tg-progress,.tg-ready{display:flex;flex-wrap:wrap;gap:5px 12px;margin:5px 0;font-size:12px;align-items:baseline}.tg-progress{color:var(--tg-muted)}
+    .tg-ready button,.tg-link-button{border:0;background:transparent;padding:0;text-align:left;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;overflow-wrap:anywhere;max-width:100%}
+    .tg-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:8px;margin-top:8px}
+    .tg-area{min-width:0;padding:8px;border:1px solid var(--tg-border);border-radius:8px;overflow-wrap:anywhere}
+    .tg-area h4{margin-bottom:6px}
+    .tg-tree,.tg-tree ol{list-style:none;margin:0;padding:0}.tg-tree ol{margin-inline-start:8px;padding-inline-start:8px;border-inline-start:1px solid var(--tg-border)}
+    .tg-node{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;width:100%;text-align:left;border:0;border-radius:5px;background:transparent;padding:4px 3px;font-size:12px!important;overflow-wrap:anywhere;transition:background-color 140ms ease}
+    .tg-node:hover,.tg-node[aria-pressed=true]{background:#4f91ed21}.tg-node[aria-current=step]{outline:1px solid #4f91ed;outline-offset:-1px}.tg-node-name{min-width:0;max-width:100%;overflow-wrap:anywhere}.tg-node[data-kind=container] .tg-node-name{font-weight:650}
+    .tg-badge{padding:0 4px;border-radius:4px;background:#8882;font-size:10px;line-height:16px}
+    .tg-badge[data-state=complete]{background:#3399682c}.tg-badge[data-state=inProgress]{background:#4f91ed35}
+    .tg-badge:is([data-state=blocked],[data-state=incomplete],[data-state=unsatisfied]){background:#d78c0c2c}
+    .tg-badge[data-state=failed]{background:#d452522f}
+    .tg-current,.tg-conditions{font-size:12px;line-height:1.4;overflow-wrap:anywhere}.tg-current{margin-bottom:7px}.tg-current .tg-badge{margin-inline-start:6px}
+    .tg-conditions{list-style:decimal;margin:4px 0 0;padding-inline-start:1.7em}.tg-conditions li+li{margin-top:4px}.tg-no-conditions{margin:4px 0 0;color:var(--tg-muted);font-size:12px}
+
+    .tg-viewer{
+      --tg-panel:var(--dsw-alias-bg-base,Canvas);
+      --tg-card-fill:color-mix(in srgb,var(--tg-panel),currentColor 7%);
+      --tg-card-border:color-mix(in srgb,var(--tg-panel),currentColor 32%);
+      --tg-complete:light-dark(#287552,#6acda0);
+      --tg-active:light-dark(#296ac4,#80b2ff);
+      --tg-blocked:light-dark(#a36119,#edab5b);
+      --tg-failed:light-dark(#aa4242,#fa8585);
+      box-sizing:border-box;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:14px 18px;border:0;overflow:hidden;background:linear-gradient(var(--tg-panel),var(--tg-panel)),Canvas;color:inherit;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:10px;opacity:0;transform:translateY(8px) scale(.995);transition:opacity 180ms ease,transform 180ms ease,display 180ms allow-discrete,overlay 180ms allow-discrete
+    }
+    .tg-viewer:not([open]){display:none}.tg-viewer[open]{opacity:1;transform:none}
+    @starting-style{.tg-viewer[open]{opacity:0;transform:translateY(8px) scale(.995)}}
+    .tg-viewer-header{display:flex;align-items:center;justify-content:space-between;gap:10px 20px;flex-wrap:wrap}
+    .tg-viewer-header h2{margin:2px 0;font-size:20px;overflow-wrap:anywhere}.tg-viewer-eyebrow{color:var(--tg-muted);font-size:12px}
+    .tg-viewer-header .tg-actions{flex:0 1 auto;flex-wrap:wrap}.tg-viewer .tg-area{max-height:min(28vh,210px);overflow:auto}
+    .tg-legend{display:flex;flex-wrap:wrap;gap:5px 16px;margin:0;padding:0;list-style:none;color:var(--tg-muted);font-size:12px}
+    .tg-legend li{display:flex;align-items:center;gap:5px}
+    .tg-wire,.tg-legend-mark{--tg-line:light-dark(#676d76,#b0b8c6);--tg-line-opacity:.78}
+    :is(.tg-wire,.tg-legend-mark)[data-state=branchChosen]{--tg-line:var(--tg-active);--tg-line-opacity:1}
+    :is(.tg-wire,.tg-legend-mark)[data-state=prerequisiteMet]{--tg-line:var(--tg-complete);--tg-line-opacity:1}
+    :is(.tg-wire,.tg-legend-mark)[data-state=blocked]{--tg-line:var(--tg-blocked);--tg-line-opacity:1}
+    :is(.tg-wire,.tg-legend-mark)[data-state=branchExcluded]{--tg-line-opacity:.62}
+    .tg-legend-mark{width:16px;border-top:2px solid var(--tg-line);opacity:var(--tg-line-opacity)}
+    .tg-legend-mark[data-state=branchExcluded]{border-top-style:dashed}
+    .tg-canvas-scroll{display:flex;min-height:0;overflow:auto;overscroll-behavior:contain;border:1px solid var(--tg-border);border-radius:10px;background-color:color-mix(in srgb,var(--tg-panel),currentColor 2%);background-image:radial-gradient(var(--tg-border) .65px,transparent .65px);background-size:15px 15px}
+    .tg-canvas{flex:none;position:relative;margin:auto}.tg-wires{position:absolute;inset:0;pointer-events:none}
+    .tg-wire{fill:none;stroke:var(--tg-line);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:var(--tg-line-opacity);pointer-events:stroke}
+    .tg-wire[data-state=branchExcluded]{stroke-dasharray:5 5}.tg-wire[data-state=branchChosen]{stroke-width:2.6}
+    .tg-wire-label{fill:currentColor;stroke:var(--tg-panel);stroke-width:4;stroke-linejoin:round;paint-order:stroke;font-size:11px}
+    .tg-dock .tg-card{--tg-card-accent:var(--tg-card-border);box-sizing:border-box;position:absolute;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:5px 9px;overflow:hidden;text-align:left;border:1px solid var(--tg-card-border);border-inline-start:4px solid var(--tg-card-accent);border-radius:9px;background:var(--tg-card-fill);box-shadow:0 2px 5px #0002;transition:background-color 140ms ease,border-color 140ms ease}
+    .tg-dock .tg-card[data-state=complete]{--tg-card-accent:var(--tg-complete)}
+    .tg-dock .tg-card[data-state=failed]{--tg-card-accent:var(--tg-failed)}
+    .tg-dock .tg-card[data-state=blocked]{--tg-card-accent:var(--tg-blocked)}
+    .tg-dock .tg-card[data-state=inProgress]{--tg-card-accent:var(--tg-active)}
+    .tg-dock .tg-card[data-state=branchExcluded]{border-style:dashed;box-shadow:none}
+    .tg-dock .tg-card:hover{background:color-mix(in srgb,var(--tg-card-fill),var(--tg-active) 8%)}
+    .tg-dock .tg-card[aria-pressed=true]{background:color-mix(in srgb,var(--tg-card-fill),var(--tg-active) 15%);border-color:var(--tg-active);border-inline-start-color:var(--tg-card-accent);box-shadow:0 0 0 1px var(--tg-active)}
+    .tg-card-title{font-size:14px;line-height:1.2;font-weight:650;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
+    .tg-card-group{font-size:11px;line-height:1.2;color:var(--tg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
+    .tg-card-states{display:flex;gap:5px;max-width:100%;white-space:nowrap}.tg-card-states .tg-badge{min-width:0;overflow:hidden;text-overflow:ellipsis}
+    .tg-card-states .tg-badge[data-state]{font-size:11px;line-height:18px;background:color-mix(in srgb,var(--tg-card-fill),var(--tg-card-accent) 20%)}
+    @container (max-width:580px){.tg-grid{grid-template-columns:minmax(0,1fr)}.tg-tree ol{margin-inline-start:3px;padding-inline-start:4px}}
+    @container (max-width:250px){.tg-top,.tg-header,.tg-overview,.tg-actions{flex-wrap:wrap}.tg-top{padding:4px;gap:3px}.tg-header{padding:3px;gap:4px}.tg-summary{flex-basis:100%;order:1}.tg-count{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.tg-body{padding-inline:4px}.tg-area{padding:4px}.tg-tree ol{margin-inline-start:1px;padding-inline-start:2px}.tg-actions{flex:0 1 auto;min-width:0}}
+    @media(max-width:580px){.tg-viewer{padding:8px;gap:7px}.tg-viewer-header h2{font-size:16px}}
+    @media(prefers-reduced-motion:reduce){.tg-viewer,.tg-fold,.tg-chevron,.tg-node,.tg-dock .tg-card{transition:none}}
+  `
+
+  const contribution = createRemoteContribution(z)
+  const statusResult = contribution.descriptors[0].result.create()
+  function nodeState(node) {
+    if (node.branchState === 'NOT_SELECTED') return 'branchExcluded'
+    if (node.branchState === 'WAITING' && !node.disposition) return 'branchWaiting'
+    return dispositions[node.disposition] ?? (node.blocked ? 'blocked' : statusLabels[node.status])
+  }
+  function badge(node, t) {
+    const state = nodeState(node)
+    return h('span', { className: 'tg-badge', 'data-state': state }, t(state))
+  }
+  function edgeText(edge, t) {
+    if (edge.kind === 'prerequisite') return t('requires')
+    if (edge.kind === 'case') return t('onCase', { value: edge.case })
+    return t(edge.outcome === 'complete' ? 'onComplete' : 'onIncomplete')
+  }
+  function Conditions({ selected, conditions, t, onSelect }) {
+    if (!selected) return null
+    return h('section', { className: 'tg-area', 'aria-label': t('details') },
+      h('h4', null, t('details')),
+      h('div', { className: 'tg-current' }, h('strong', null, selected.label), badge(selected, t)),
+      h('h5', { className: 'tg-condition-heading' }, t('incoming')),
+      conditions.length ? h('ol', { className: 'tg-conditions' }, conditions.map(node =>
+        h('li', { key: node.id },
+          h('button', { type: 'button', className: 'tg-link-button', onClick: () => onSelect(node.id) }, node.label),
+          t('conditionSeparator'), t(nodeState(node))))) :
+        h('p', { className: 'tg-no-conditions' }, t('noEdges')))
+  }
+  function BranchCanvas({ graph, selected, active, t, onSelect }) {
+    const layout = useMemo(() => branchLayout(graph), [graph])
+    const arrowId = useId()
+    const wires = layout.wires.map(wire => h('g', { key: wire.key },
+      h('path', { className: 'tg-wire', 'data-state': wire.state, d: wire.path, markerEnd: `url(#${arrowId})` },
+        h('title', null, `${wire.from.label} → ${wire.to.label} · ${edgeText(wire.edge, t)} · ${t(wire.state)}`)),
+      wire.showLabel && h('text', { className: 'tg-wire-label', x: wire.labelX, y: wire.labelY, textAnchor: 'middle' },
+        edgeText(wire.edge, t))))
+    const cards = layout.cards.map(({ node, group, x, y, additionalPrerequisites }) => h('button', {
+      key: node.id, type: 'button', className: 'tg-card', 'data-state': nodeState(node),
+      'aria-pressed': selected?.id === node.id, 'aria-current': active?.id === node.id ? 'step' : undefined,
+      style: { left: x, top: y, width: layout.cardWidth, height: layout.cardHeight },
+      onClick: () => onSelect(node.id), title: node.label,
+    }, group && h('span', { className: 'tg-card-group' }, group),
+    h('strong', { className: 'tg-card-title' }, node.label),
+    h('span', { className: 'tg-card-states' }, badge(node, t),
+      additionalPrerequisites > 0 && h('span', { className: 'tg-badge' },
+        t('additionalPrerequisites', { count: additionalPrerequisites })))))
+    return h('div', { className: 'tg-canvas-scroll', tabIndex: 0, role: 'region', 'aria-label': t('branchGraph') },
+      h('div', { className: 'tg-canvas', style: { width: layout.width, height: layout.height } },
+        h('svg', { className: 'tg-wires', 'aria-hidden': true, width: layout.width, height: layout.height },
+          h('defs', null, h('marker', { id: arrowId, viewBox: '0 0 8 8', refX: 7, refY: 4, markerWidth: 5, markerHeight: 5, orient: 'auto' },
+            h('path', { d: 'M 0 0 L 8 4 L 0 8 Z', fill: 'context-stroke' }))),
+          wires),
+        cards))
+  }
+  function GraphPanel({ graph, t, busy, failed, refresh }) {
+    const [expanded, setExpanded] = useState(false)
+    const [selectedId, setSelected] = useState(null)
+    const [viewerVisited, setViewerVisited] = useState(false)
+    const viewer = useRef(null)
+    const bodyId = useId()
+    const viewerId = useId()
+    const viewerTitleId = useId()
+    const model = graphPresentation(graph, selectedId)
+    const { active, selected, progress } = model
+    let current = t('noReady')
+    if (active) current = `${t(graph.active.recoveryRequired ? 'recovering' : 'active')} · ${active.label}`
+    else if (graph.pending) current = t('pending')
+    else if (model.children.get(null)?.[0]?.status === 'COMPLETE') current = t('graphComplete')
+    else if (progress.ready) current = `${t('ready')} · ${progress.ready}`
+    const title = failed ? `${t('stale')} · ${current}` : current
+    const progressText = t('progress', { done: progress.complete, total: progress.total })
+    const conditionProps = { selected, conditions: model.conditions, t, onSelect: setSelected }
+    const refreshButton = () => h('button', { className: 'tg-control', type: 'button', disabled: busy, onClick: refresh }, t('retry'))
+    const notices = () => h(React.Fragment, null,
+      failed && h('p', { className: 'tg-notice', role: 'status' }, t('unavailable')),
+      graph.pending && h('p', { className: 'tg-notice', role: 'status' }, t('waiting')))
+    function openViewer() {
+      const dialog = viewer.current
+      if (dialog.open) return
+      setViewerVisited(true)
+      dialog.showModal()
+      dialog.querySelector('[data-tg-close]').focus()
+    }
+    function branch(parent, depth = 0) {
+      const rows = model.children.get(parent)
+      if (!rows || depth >= 16) return null
+      return h('ol', { className: parent === null ? 'tg-tree' : undefined }, rows.map(node =>
+        h('li', { key: node.id },
+          h('button', { className: 'tg-node', type: 'button', 'data-kind': node.kind,
+            'aria-pressed': selected?.id === node.id,
+            'aria-current': active?.id === node.id ? 'step' : undefined,
+            onClick: () => setSelected(node.id) },
+          h('span', { className: 'tg-node-name' }, node.label), badge(node, t),
+          model.legal.has(node.id) && h('span', { className: 'tg-badge' }, t('ready'))),
+          branch(node.id, depth + 1))))
+    }
+    return h('section', { className: 'tg-dock', 'data-testid': 'transaction-graph-dock', 'aria-label': t('title') },
+      h('style', null, styles),
+      h('div', { className: 'tg-top' },
+        h('button', { type: 'button', className: 'tg-header', 'aria-expanded': expanded, 'aria-controls': bodyId,
+          onClick: () => setExpanded(value => !value) },
+          h('span', { className: 'tg-heading' }, t('title')),
+          h('span', { className: 'tg-summary', title, role: 'status' }, title),
+          h('span', { className: 'tg-count' }, progressText),
+          h('span', { className: 'tg-chevron', 'aria-hidden': true }, '⌄')),
+        h('button', { type: 'button', className: 'tg-control', 'aria-haspopup': 'dialog', 'aria-controls': viewerId,
+          onClick: openViewer }, t('fullscreen'))),
+      h('div', { id: bodyId, className: 'tg-fold', 'data-expanded': expanded, 'aria-hidden': !expanded,
+        ref: element => { if (element) element.inert = !expanded } },
+        h('div', { className: 'tg-fold-clip' }, h('div', { className: 'tg-body' },
+          h('div', { className: 'tg-overview' }, h('h3', null, graph.title),
+            h('div', { className: 'tg-actions' }, h('span', null, t('revision', { revision: graph.revision })), refreshButton())),
+          notices(),
+          (progress.incomplete > 0 || progress.skipped > 0 || progress.inactive > 0 || progress.excluded > 0) &&
+            h('p', { className: 'tg-progress' },
+              progress.incomplete > 0 && h('span', null, t('totalIncomplete', { count: progress.incomplete })),
+              progress.skipped > 0 && h('span', null, t('totalSkipped', { count: progress.skipped })),
+              progress.inactive > 0 && h('span', null, t('totalInactive', { count: progress.inactive })),
+              progress.excluded > 0 && h('span', null, t('totalExcluded', { count: progress.excluded }))),
+          graph.legalNext.length > 0 && h('div', { className: 'tg-ready' }, h('strong', null, t('ready')),
+            graph.legalNext.map(choice => h('button', { type: 'button', className: 'tg-link-button', key: choice.id,
+              onClick: () => setSelected(choice.id) }, model.nodes.get(choice.id)?.label))),
+          h('div', { className: 'tg-grid' },
+            h('section', { className: 'tg-area', 'aria-label': t('tree') }, h('h4', null, t('tree')), branch(null)),
+            h(Conditions, conditionProps))))),
+      h('dialog', { id: viewerId, ref: viewer, className: 'tg-viewer', 'aria-labelledby': viewerTitleId },
+        h('div', { className: 'tg-viewer-header' },
+          h('div', null, h('div', { className: 'tg-viewer-eyebrow' }, t('branchGraph')), h('h2', { id: viewerTitleId }, graph.title)),
+          h('div', { className: 'tg-actions' },
+            h('span', null, progressText), h('span', null, t('revision', { revision: graph.revision })), refreshButton(),
+            h('button', { className: 'tg-control', type: 'button', 'data-tg-close': true,
+              onClick: () => viewer.current.close() }, t('exitFullscreen')))),
+        h('div', null, notices(),
+          h('ul', { className: 'tg-legend' }, ['branchChosen', 'prerequisiteMet', 'blocked', 'edgeWaiting', 'branchExcluded'].map(state =>
+            h('li', { key: state }, h('span', { className: 'tg-legend-mark', 'data-state': state, 'aria-hidden': true }), t(state))))),
+        viewerVisited && h(BranchCanvas, { graph, selected, active, t, onSelect: setSelected }),
+        h(Conditions, conditionProps)))
+  }
+
+  function makeDock(api) {
+    return function TransactionGraphDock({ sessionId, useSession, useAccess, t }) {
+      const canRead = useAccess('transactionGraphView/status')
+      const opened = useSession(session => session.openState === 'open' && !session.removed)
+      const running = useSession(session => session.running)
+      const [result, setResult] = useState(null)
+      const [refreshCount, requestRefresh] = useState(0)
+      const refresh = () => requestRefresh(value => value + 1)
+      useEffect(() => {
+        if (!canRead || !opened) return
+        const controller = new AbortController()
+        let timer
+        async function refreshStatus() {
+          const signal = AbortSignal.any([controller.signal, AbortSignal.timeout(8000)])
+          setResult(value => ({
+            sessionId, graph: value?.sessionId === sessionId ? value.graph : null,
+            busy: true, failed: value?.sessionId === sessionId && value.failed,
+          }))
+          try {
+            const response = await api.status({ sessionId }, signal)
+            if (controller.signal.aborted) return
+            const parsed = response?.ok ? statusResult.safeParse(response.value) : null
+            if (!parsed?.success || parsed.data.sessionId !== sessionId || parsed.data.status === 'unavailable') throw new Error('Unavailable')
+            setResult({ sessionId, graph: parsed.data.graph, busy: false, failed: false })
+          } catch {
+            if (controller.signal.aborted) return
+            setResult(value => ({ sessionId, graph: value?.sessionId === sessionId ? value.graph : null, busy: false, failed: true }))
+          } finally {
+            if (running && !controller.signal.aborted) timer = setTimeout(refreshStatus, 2500)
+          }
+        }
+        void refreshStatus()
+        return () => { controller.abort(); clearTimeout(timer) }
+      }, [canRead, opened, running, sessionId, refreshCount])
+      if (!canRead || !opened || result?.sessionId !== sessionId || !result.graph) return null
+      return h(GraphPanel, { key: sessionId, graph: result.graph, t, busy: result.busy, failed: result.failed, refresh })
+    }
+  }
+
+  return {
+    inject: ['slots', 'locale', 'remote'],
+    async apply(ctx) {
+      ctx.effect(() => ctx.locale.register('projectTransactionGraph', locale))
+      const unmount = await ctx.remote.$mount(contribution)
+      ctx.effect(() => unmount)
+      ctx.inject(['remote.transactionGraphView'], mounted => {
+        const Dock = makeDock(mounted.remote.transactionGraphView)
+        mounted.slots.inject('conversation.input.dock', () => mounted.slots.register({
+          name: 'conversation.input.dock', id: 'project-transaction-graph', locale: 'projectTransactionGraph', order: 10,
+        }, Dock))
+      })
+    },
+  }
+}

package/cordis.patch.yml

@@ -0,0 +1,5 @@
+- insert:
+    - id: dsh-bettertaskgraphs
+      name: dsh-bettertaskgraphs
+      config:
+        enableSwitch: false