[dashboard-components] Extract shared renderLabeledSpan primitive for repeated inline label/value pairs

[cao-githubnext-gh-aw-cao-write]

Duplicated call sites

Three places in the dashboard site rendered the same <span><strong>{label}</strong>{value}</span> inline metadata-pair markup by hand:

• presenter.js — horizon tooltip window summary (Start / End / Duration)
• components/ui-elements.js — control-plane readiness snapshot meta row (Snapshot / Evidence)

Extraction

Added renderLabeledSpan(label, value) to components/ui-primitives.js, alongside the existing renderDlRow/renderVitalStat shared primitives, and replaced the three duplicated call sites with it. No markup, class names, or DOM structure changed — only the construction site moved into a single shared helper.

Preserved behavior

• Rendered output is byte-identical to before (<span><strong>label</strong>value</span>).
• No public module API, accessibility semantics, or Dashboard Language behavior changed.
• Added a focused unit test in test/unit/ui-primitives.test.js covering the new primitive (string value and node value).

Validation (from dashboard/site)

• npm run typecheck ✅
• npm run lint ✅
• npm test ✅ 451/451 passed
• npm run test:e2e ✅ 25/25 passed

Control Plane

• Correlation ID: 34013618261-264
• Central repository: githubnext/gh-aw-cao
• Control plane run: https://github.com/githubnext/gh-aw-cao/actions/runs/34013618261

Generated by SelfCare / Code Quality · copilot · auto · 102.8 AIC · ⌖ 8.1 AIC · ⊞ 12.4K · ◷

• expires on Sep 13, 2026, 5:31 AM UTC

[Copilot]

🟢 Approval recommended

The change is a small refactor with added unit coverage; only a minor JSDoc accuracy tweak was identified.

Pull request overview

This PR reduces duplicated inline “label/value” span markup in the dashboard site by extracting a shared renderLabeledSpan(label, value) helper into ui-primitives.js and updating existing call sites to use it.

Changes:

• Added renderLabeledSpan(label, value) UI primitive for <span><strong>{label}</strong>{value}</span> rendering.
• Replaced repeated inline metadata span construction in the horizon tooltip and readiness snapshot meta row with the new primitive.
• Added a unit test covering string and Node values for the new primitive.

File summaries

File	Description
dashboard/site/src/components/ui-primitives.js	Adds the new shared renderLabeledSpan primitive and documents its intended usage.
dashboard/site/src/presenter.js	Refactors horizon tooltip summary spans (Start/End/Duration) to use renderLabeledSpan.
dashboard/site/src/components/ui-elements.js	Refactors readiness snapshot meta spans (Snapshot/Evidence) to use renderLabeledSpan.
dashboard/site/test/unit/ui-primitives.test.js	Adds unit coverage for renderLabeledSpan with both string and Node values.

Review details

• Files reviewed: 4/4 changed files
• Comments generated: 1
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[github-actions]

Reviewed with codebase-design lens (refactor classification): this is a clean, low-risk extraction of a repeated <span><strong>{label}</strong>{value}</span> pattern into renderLabeledSpan in ui-primitives.js, alongside existing renderDlRow/renderVitalStat primitives — consistent with existing domain vocabulary. Output is byte-identical at all three call sites, imports are updated correctly, and a focused unit test covers both string and node value arguments. No authority/credential boundaries, workflow markdown sources, or generated lock files are touched. No actionable defects found.

Generated by Matt Pocock Skills Reviewer for #3224 · copilot · auto · 13.5 AIC · ⌖ 5.86 AIC · ⊞ 7.2K
_{Comment /matt to run again}