sdm-dashboard-parityrun.md01_define/output/spec.mdWeb's SDM dashboard has regressed from the demo design that is meant to be its source of truth,
weakening the at-a-glance supply/quality signal the SDM relies on to manage expert supply. The
action strip lost all RAG colouring (red revenue / amber risk / emerald gaps became three plain
uncoloured cards, with dead transition-colors remnants); the market-signals and
service-performance StatBoxes were forced to variant="neutral", dropping demo's
info/warning/expansion colour coding; the service-performance "Revenue at risk" rows lost
their red emphasis; and the vendor-take % / margin % subtexts are no longer displayed. Separately
the expert-strength table has diverged into a different shape (demo 6-col ranked vs web 12-col
server-driven) and the demand coverage vocabulary differs between the two apps. This advances
Refine the Bridge / Q2 2026 — O1 vendor engagement: the SDM manages expert supply and quality,
and a dashboard whose RAG signal is broken directly blunts that objective.
Restore demo's SDM dashboard design in web and reconcile the two apps to a single agreed shape:
transition-colors remnants.info/warning/expansion) on the market-signals and
service-performance sections, and make the vendor-take % / margin % subtexts visible again.var(--bg-card) onto semantic tokens.transition-colors classes remaining.info/warning/expansion
variants, and the vendor-take % / margin % subtexts are visible.var(--bg-card).csm-sdm-panels-in-demo.02_build/output/notes.mdDirection of parity (per spec): demo is the design source of truth for styling, so web adopts demo for the visual items (action strip, StatBox variants, red risk rows, demand table). The one explicit exception is the expert-strength table, where web's richer 12-col server-driven shape wins and is back-ported into demo.
apps/web/.../sdm/action-strip.tsx: re-applied demo's conditional RAG colouring — red "Revenue
at risk" card, amber/neutral "Immediate risks", amber/emerald "Gaps not covered" — with coloured
icons and value text. The dead transition-colors remnants are now live conditional classes.apps/web/.../sdm/market-signals-section.tsx: Low bids → info, Market bids → warning, High
bids → expansion StatBox variants (were all neutral); the by-band table wrapper moved off raw
var(--border)/var(--bg-card) onto border-border/bg-card and gained min-w-max.apps/web/.../sdm/service-performance-section.tsx: Vendor take → warning, Estimated margin →
expansion StatBox variants, each with its %-subtext visible (mapped demo's subtext onto web
StatBox's hint prop — web's StatBox has no subtext/className prop). "Revenue at risk" rows
restored to demo's red emphasis (red border/bg/text). Removed all raw var(--*) tokens
(--text-primary, --text-secondary, --bg-card, --bg, --bg-hover); link recoloured
blue-600 → text-primary.apps/web/.../sdm/demand-table.tsx: adopted demo's two-badge coverage presentation — Coverage
status now renders a badge off readinessStatus (green→Covered, amber→At risk, red→Not
coverable), and Coverage gap renders a badge off coverageStatus (Fully covered→Covered,
Partial→Partial, Not covered→Not covered), replacing the old red −{shortfall} text. This makes
the coverage-status vocabulary and gap rendering identical to demo. Added min-w-max + matched
the tab-toggle styling.apps/web/.../sdm/expert-strength-row.tsx: status badge moved to the soft semantic vocabulary
(ok → info "Ok"; at-risk → error "At risk") so both apps share one status rendering. The
12-col table itself was already canonical, so no structural change.apps/demo/.../sdm/expert-strength-table.tsx + expert-strength-row.tsx: back-ported web's
12-col table (Expert · Skills · Region · Active work · SLA % · CSAT · Escalation % · Completion
% · Repeat % · Demand/supply/gap · Availability · Status) replacing the old 6-col SLA-ranked
view. The demo mock already carried every column, so no mock reshape was needed. Status badge
matches web (strong→success, ok→info, at-risk→error); row highlight via the shared
rowBg(status). Subtitle updated to web's "Per-expert supply quality across the SDM's area".transition-colors classes remaining — the classes are now driven by
immediateRisks/gapsNotCovered.info/warning/expansion
variants, and the vendor-take % / margin % subtexts are visible (via StatBox hint).var(--bg-card) — no var(--*)
remains under apps/web/components/dashboard/sdm/.--max-warnings 0 — the demo expert-strength files were
rewritten with no unused imports, so this is expected clean.rowBg semantics (only at-risk rows get
an amber tint; the old demo view also tinted strong rows emerald). This is intentional — web is
canonical for this table.hint vs
subtext); parity is at the rendered level, not the prop level. No StatBox component was changed.bg-red-50, border-amber-200…) to match demo exactly — this is in apps/web (the demo-only
"use tokens" rule does not apply here) and is what pixel-parity with the demo design requires.03_release/output/changelog.mdYour SDM dashboard now reads at a glance again. The top action cards are colour-coded once more — red for revenue at risk, amber for immediate risks, and green when gaps are covered — each with a matching icon. Market and service figures carry their colour coding back, and vendor take and margin now show their percentages beneath the amount. Revenue-at-risk rows stand out in red, the coverage labels for go-live demand read the same everywhere, and the expert strength table shows the fuller per-expert view — skills, region, SLA, CSAT, escalation, completion, repeat rate, and demand versus supply — so you can see where your expert supply is strong and where it needs attention.
03_release/output/investor-update.mdWho it's for: SDMs (service delivery managers) What shipped: The SDM dashboard's colour-coded RAG signals, percentage subtexts, and fuller expert-strength view are restored and reconciled across web and demo. Why it matters: Sharper dashboard usability under Refine the Bridge, supporting Q2 Objective 1 — establish product-market fit with vendor partners.
All six acceptance criteria met; previews build clean.
Dig deeper: <merged-PR URL> · <changelog entry URL>
03_release/output/release.mdexpert-strength-row copied web's raw <span> for the expert name — switched to Typography as="span" to follow the dashboards Typography convention (and the original demo row's style). Fixed on branch. (Not lint-enforced; demo raw spans exist elsewhere, so not CI-blocking, but corrected for consistency.)bg-red-50, border-amber-200…) — accepted: this is apps/web (the token-only rule is demo-only) and pixel-parity with the demo design requires the same classes.var(--*) usages and the old demo 6-col ranking logic.transition-colors — classes now driven by immediateRisks/gapsNotCovered.info/warning/expansion variants; vendor-take % / margin % subtexts visible (via StatBox hint).var(--*) remains under apps/web/components/dashboard/sdm/.