Scrubbed extract of ADP-Orchestration-UI/Epic-1-Stories/US-OUI-1.7-Sensitivity-Classification-UI.md — cited by the Chronicle (03-the-platform-rises). Redactions: phone / service detail / secrets / clearance / personal / internal hosts.

type: implementation-plan category: Work project: ADP-Orchestration-UI priority: High status: done created: 2026-05-14 epic: Epic-1-Foundation user-story: US-OUI-1.7 effort: 6h precedence:

• “[[Projects/ADP-Orchestration-UI/Epic-1-Stories/US-OUI-1.2-Design-System]]” parallel_group: review-profile: standard source: wireframe-gap-analysis-2026-05 depends-on:
• ADR-015 tags:
• implementation-plan
• epic-1
• design-system
• sensitivity
• cross-cutting

US-OUI-1.7: Sensitivity Classification UI Primitives

Epic: [[README|Epic 1: Project Foundation & Design System]] Owner Agent: \xe2\x80\x94 Effort: 6h Priority: 🔼 High Status: 🔵 Backlog

Mission

Extend the design system with the cross-cutting sensitivity primitives — <SensitivityBadge>, <SensitivityBorder>, tokens, and a useSensitivity(doc) resolver — so every downstream surface that renders a vault doc, citation, or session context preview can show the public vs sensitive classification consistently. The visual treatment must be distinctive but accessible (color + icon + label, not color alone). Do not invent a new classification scheme; consume the two-category public | sensitive model from [[../../AI-Dev-Platform/ADR/ADR-015-Sensitive-Data-Classification-And-Handling|ADR-015]] §1.

Context

The Wireframe Gap Analysis §10 calls out sensitivity-aware rendering across vault registry, citations, injection preview, and gate detail panels. ADR-015 §1 fixes the two-category model and the YAML frontmatter field; §3e adds a server-side ISensitivityRedactor that downstream surfaces depend on. This story owns the visual contract only — server-side redaction is a separate concern handled in US-OUI-2.10 (audit feed) and US-AIS-7.6 (routing tier visualization). The badge needs to compose with the existing design system tokens from US-OUI-1.2 without forking color scales.

Context Bootstrap

Read the following before writing any code, in order:

1. [[../../AI-Dev-Platform/ADR/ADR-017-Human-Review-Branching-And-TDD-Workflow|ADR-017]] — review profile, four-checkpoint workflow, PR schema
2. [[../../AI-Dev-Platform/ADR/ADR-015-Sensitive-Data-Classification-And-Handling|ADR-015]] — §1 (classification field), §3a–§3g (downstream consumers this primitive must compose with)
3. [[../Wireframe-Gap-Analysis|Wireframe Gap Analysis]] §10 — sensitivity capability rows + out-of-scope list
4. [[Projects/ADP-Orchestration-UI/Epic-1-Stories/US-OUI-1.2-Design-System]] — token scale, base component conventions
5. [[../_pkf|OUI _pkf]] — current project state

Gate Policy

Deliverables

src/design-system/sensitivity/SensitivityBadge.tsx (new)

• Renders icon + label SENSITIVE (uppercase, condensed) for sensitive
• Renders nothing for public (default omission, not an empty span)
• Accessible: aria-label="Sensitive content", role="status"
• Compact and full variants via size: 'sm' | 'md'

src/design-system/sensitivity/SensitivityBorder.tsx (new)

• Wraps a child element with an amber-warning border + corner indicator when sensitivity === 'sensitive'
• Passes children through transparently when sensitivity === 'public'

src/design-system/sensitivity/tokens.ts (new)

• sensitivityTokens.sensitive = { border, bg, fg, icon } referencing the existing US-OUI-1.2 amber-warning scale
• No new color values introduced; all references resolve to existing tokens

src/design-system/sensitivity/useSensitivity.ts (new)

• useSensitivity(doc: { frontmatter?: { sensitivity?: string } }) returns 'public' | 'sensitive'
• Defaults to 'public' when frontmatter is missing per ADR-015 §1
• Treats any non-sensitive string as 'public' (one-way ratchet: only explicit sensitive opts in)

src/design-system/sensitivity/__tests__/sensitivity.test.tsx (new)

• Snapshot tests for badge in both states, both sizes
• useSensitivity defaults missing/unknown frontmatter to 'public'
• <SensitivityBorder sensitivity="public"> is visually a no-op (transparent pass-through)
• <SensitivityBadge sensitivity="sensitive"> has aria-label and is keyboard-discoverable
• Token snapshot pinned to ADR-015 §1 (proves no third category leaks in)

Execution Phases

TDD-ordered per [[../../AI-Dev-Platform/ADR/ADR-017-Human-Review-Branching-And-TDD-Workflow|ADR-017]] §4.

1. Branch Creation — agent/US-OUI-1.7-sensitivity-classification from main.
2. Load Context — Read Context Bootstrap files. (Plan Review.)
3. Write Failing Tests — Tests above. Run pnpm test --run; all fail. Log TestTransition. (Test Review.)
4. Implement — Add tokens, badge, border, hook.
5. Verify & Refactor — pnpm build && pnpm test --run && pnpm lint && pnpm typecheck. Update status to review.
6. PR Submission — Push branch; open one PR with the structured PR description. (PR Review.)

PR Submission Requirements

PR description per ADR-017 §5 with Reasoning Chain, Gate History (origin review/<phase>), Citations, Review Profile, Test Plan with TestTransition rows.

Implementation Notes

Visual treatment

Single amber-warning hue from US-OUI-1.2; icon = lock-with-eye glyph at 12px; label SENSITIVE in condensed uppercase. Border uses 2px solid amber on left edge plus a corner badge in the top-right. Public state renders nothing (no neutral badge — absence is the public signal).

Composition pattern

Consumers wrap their existing components: <SensitivityBorder sensitivity={s}><CitationRow … /></SensitivityBorder>. Downstream stories (US-OUI-2.9 vault context, US-OUI-2.10 audit feed, US-OUI-3.7 risk surface) consume this without re-implementing the visual.

Files to Modify

• src/design-system/sensitivity/* — all new
• src/design-system/index.ts — re-export the four entry points

Definition of Done

• All Deliverables checked
• All Execution Phases verified
• No new color tokens introduced
• Tests pass: pnpm test --run src/design-system/sensitivity
• ADR-015 §1 two-category invariant verified by token snapshot
• Status updated to review

Related

• [[../../AI-Dev-Platform/ADR/ADR-015-Sensitive-Data-Classification-And-Handling|ADR-015]] — classification model
• [[US-OUI-1.6-Permission-Scoping-Enforcement]] — sibling cross-cutting primitive
• [[../Wireframe-Gap-Analysis|Wireframe Gap Analysis]] §10
• [[../_pkf|OUI _pkf]]