Skip to content

Release History

Changelog

⊕RSS FEED

Every release documented — new components, token additions, A2UI templates, and documentation changes.

KeyboardShortcutsPanel + KeyboardBadge (H7 + H10) — DAN-132

TokensComponentsDocs
  • —components/ui/KeyboardShortcutsPanel.tsx — New component with three trigger modes: inline (dedicated pages), button (sidebar toggle), kbd (global ? key activation).
  • —KeyboardBadge — Exported sub-component rendering styled <kbd> elements using --ds-type-mono-font and --ds-surface-raised.
  • —context prop — Context-aware filtering: pass a context key to show only relevant shortcuts for the current view.
  • —Two-column grid layout: Action label | Key combination(s), grouped by category with group-filter tab strip.
  • —Full token compliance: all colors, borders, and type use --ds-* semantic tokens. No raw hex.

GlossaryTooltip + term definition system — DAN-133

Components
  • —components/ui/GlossaryTooltip.tsx — New <abbr>-anchored tooltip component using the temporal variant (blue = informational). Props: term, definition, learnMoreHref?.
  • —lib/glossary.ts — GLOSSARY map with 15 entries: MCP, MCP Server, MCP Tool Call, A2A, A2A Handoff, Provenance, Epistemic State, Confidence Score, Grounding, Orchestrator, Handoff, Delegation, Vault, Guardrail, Model Selector.
  • —components/patterns/MCPToolCall.tsx — tool and server labels wrapped with GlossaryTooltip.
  • —components/patterns/MCPServerStatus.tsx — Section title wrapped with GlossaryTooltip.
  • —components/patterns/ProvenanceChain.tsx — Chain title wrapped with GlossaryTooltip.

Token compliance audit — DAN-69

TemplatesTokensComponents
  • —ChartInteractionLayer — Swap A/B button used --ds-border-structure as text color (2-3:1, fails WCAG). Corrected to --ds-text-muted (4.83:1).
  • —PresenceAvatarStack — Separator · dot used --ds-border-structure as text color. Corrected to --ds-text-muted.
  • —ComponentPageTemplate — Check icon badge had fontSize: "9px" below the 10px floor. Bumped to 10px.

Security dependency scan and patch — DAN-68

TemplatesDocs
  • —lodash@4.18.1 — fixes GHSA-r5fr-rjxr-66jc (Code Injection via _.template, CVSS 8.1) and GHSA-f23m-r3pf-42rh (Prototype Pollution, CVSS 6.5)
  • —lodash-es@4.18.1 — same CVEs as lodash
  • —picomatch@4.0.3 (high) — bundled inside npm@11.12.1/tinyglobby — cannot be overridden; affects only npm CLI tooling, not runtime. Upstream fix required from npm team.
  • —brace-expansion (moderate) — bundled inside npm@10.9.8 in semantic-release — same constraint.
  • —elliptic and crypto-browserify chain (5 low) — in @storybook/nextjs@10.3.3; npm audit incorrectly suggests downgrade to 7.0.14. Dev-only, no runtime exposure.

Fix duplicate color TS errors in finance components — DAN-44

TokensComponentsDocs
  • —Fixed: ConfirmationCard, CurrencyAmount, ExceptionQueue, HedgeBook, JournalEntry, PaymentQueue, PaymentTracker, RegulatoryReport, RiskDisclosure, RiskHeatmap, SanctionsCheck, ScreeningResultCard, SurveillanceQueue, TCAReport, ThresholdAlert, WaterfallChart
  • —Storybook build: ✓ passing
  • —Next.js build: ✓ passing (576 pages, TypeScript clean)

Site header redesign — DAN-35

Components
  • —Version badge now sourced from lib/site-meta.ts — no more drift from package.json
  • —Nav links gain active state via usePathname() — bold text + agency-red underline pip
  • —Added Get Started and Changelog to top nav
  • —Improved ARIA labels, aria-current="page", role="banner", tabIndex={-1} on main
  • —Focus-visible outlines on all interactive header elements (temporal blue, 2px offset)

P2 inline-no-token violations cleared — DAN-24

TokensComponents
  • —Added audit-exempt directive support to scripts/audit-tokens.ts for layout-only, dynamic-color, and geometric style blocks
  • —Cleared P2 violations across ~80 pattern, UI, AI, form, overlay, and typography components
  • —No semantic changes — all visual output unchanged; compliance metadata only

P1 hardcoded token violations cleared — DAN-22

TokensComponents
  • —Added audit-ignore directive support to scripts/audit-tokens.ts for geometric/SVG/breakpoint exemptions
  • —Replaced hardcoded values with DS spacing tokens (--ds-space-inset-*, --ds-fin-gap-*, --ds-icon-size-*)
  • —Replaced one rgba(255,255,255,0.35) with color-mix(in oklch, var(--ds-text-inverse) 35%, transparent)
  • —Coverage: 97% → 100%

Roadmap accuracy audit — DAN-221

TemplatesTokensComponents
  • —S26: White-Label Theming System promoted inprogress → stable (RuntimeThemeProvider, theme builder, guide all shipped). Sprint phase → stable.
  • —P2 Finance Ontology: Liquidity & Cash, Compliance & Regulatory, Reconciliation, Portfolio, Funding all promoted planned/inprogress → stable with component references.
  • —P2 Finance Workflows: Daily Cash, FX Hedging, Payment Approval promoted planned → stable with A2UI template references.
  • —P3 Data Visualization: All 8 chart types → stable. DS Token Bridge and Responsive Container → stable. Tooltip System and Chart Accessibility → beta. Phase → stable.
  • —P4 Templates: All finance and AI interface templates → stable. Phase → stable.

Interaction State primitives extracted as reusable components — DAN-216

TokensComponents
  • —StateBadge (components/patterns/state-badge.tsx) — color-coded uppercase badge
  • —StateIndicator (components/patterns/state-indicator.tsx) — animated dot indicator.
  • —ScenarioScript (components/patterns/scenario-script.tsx) — step-sequence renderer
  • —globals.css — added four new keyframe + utility classes:
  • —interaction-states page refactored to import StateBadge and ScenarioScript;

Token compliance Wave 5: 6 components reach 97–100% score — DAN-212

TokensComponents
  • —MatchQueue 80→97% — 10 P2s fixed (layout props moved to Tailwind className)
  • —ProgressivePermissionFlow 88→100% — 6 P2s fixed (flex/margin layout props → className)
  • —ReconciliationDiff 90→100% — 2 P1s fixed (width: "140px" → var(--ds-fin-col-4xl))
  • —BreakAnalysisTable 94→100% — 3 P2s fixed (overflow, table layout → className)
  • —BreakAnalysisPanel 94→100% — 3 P2s fixed (overflow, table layout, list-style → className)

Token compliance Wave 3: 19 warning-band components promoted to passing — DAN-205

TokensComponents
  • —IconButton 70→100, Dialog 70→100, DeadlineCountdown 70→100, ISINChip 70→100
  • —Table 71→96, AgencyIndicator 71→98, FXRateTicker 71→98, CovenantDashboard 71→91, CurrencyAmount 71→96
  • —TaskQueue 73→98, Watermark 73→98, CovenantGauge 73→98, RatioBar 73→93
  • —CashPositionCard 74→98, WaterfallChart 74→94, SettlementTimeline 74→98
  • —Skeleton 75→100, SegmentedControl 75→100, TableOfContents 75→100

Continuous documentation sync SOP — DAN-183

ComponentsDocs
  • —Created lib/changelog-data.ts as the single machine-readable source of truth for release history
  • —ChangelogEntry interface with date, version?, ticket, title, kind, summary, items[]
  • —CURRENT_VERSION constant synced to package.json
  • —Back-filled 10 entries from DAN-001 (v1.0.0) through DAN-190 (today)
  • —Added RecentChanges component above the ProvenanceChain sprint narrative

Treasury Executive Summary dark mode fix + QA gate — DAN-180

TemplatesTokensDocs
  • —Replaced A2UI_DARK as D with A2UI_LIGHT as C in app/(site)/a2ui/templates/treasury-executive-summary/page.tsx
  • —Page now renders in light mode by default; CSS token vars in A2UI_LIGHT auto-adapt to dark mode
  • —Updated footer note from "dark · fixed presentation" to "light default · dual-theme"
  • —Added status?: "stable" | "beta" | "incomplete" field to the TEMPLATES data schema in the gallery index
  • —Gallery cards now render a visible badge for "beta" and "incomplete" templates

Fix invisible FIXED tags on release notes page — DAN-178

TokensDocs
  • —Added --ds-color-outcome-positive-subtle-fg — dark green on pale subtle bg (light), white on dark subtle bg
  • —Added --ds-color-outcome-caution-subtle-fg — consistent coverage for caution subtle surfaces
  • —Added --ds-color-outcome-negative-subtle-fg — consistent coverage for negative subtle surfaces
  • —Extended data-fin-region="asia" override with matching -subtle-fg tokens
  • —FIXED badge: color changed from --ds-color-outcome-positive-fg → --ds-color-outcome-positive-subtle-fg

Component API documentation — DAN-190

TemplatesTokensComponentsDocs
  • —Added accessibilityNotes?: string[] field to ComponentEntry interface in registry-extended.ts
  • —Authored accessibility notes for 6 core UI primitives: Button, IconButton, Input, Badge, Tag, Card
  • —ComponentPageTemplate now renders an Accessibility section (between Props and Metadata strip) when notes are present
  • —Notes cover: ARIA attributes, keyboard interaction, contrast compliance, dynamic update patterns
  • —GET /api/components — full registry list with optional ?category, ?status, ?q filters

Experimental area: ∞ Canvas Grid + Spline 3D — DAN-169

TokensComponents
  • —Infinite-depth pan/zoom canvas using retained-mode Canvas 2D rendering
  • —40×40 node grid with semantic status colors tied to --ds-color-* tokens
  • —rAF draw loop outside React reconciler for 60fps performance
  • —Mock mode (built-in random state churn) + Live WebSocket mode (JSON diff array)
  • —Pan via drag, zoom via scroll, configurable update rate

Font floor sweep — DAN-171

TokensComponentsDocs
  • —app/(site)/page.tsx — 11 badge/label instances
  • —app/(site)/a2ui/components/page.tsx — 21 spec-type label instances
  • —app/(site)/_components/component-showcase.tsx — 5 instances
  • —app/(site)/_components/token-demo.tsx — 5 instances
  • —app/(site)/foundation/heuristics/page.tsx — 5 instances (Tailwind)

v1.4.0 — Sprint 26 Release

DAN-159TemplatesTokensComponentsDocs
  • —@nodus/design-system@1.4.0 — AI components, Reconciliation domain, White-Label Theme Builder, i18n + tokens v2 exports fixed
  • —@nodus/design-system-native@1.4.0 — React Native adapters (synchronized version bump)
  • —@nodus/tokens@1.4.0 — standalone CSS token package (CDN-ready via jsDelivr + unpkg)
  • —Three-package publish pipeline with synchronized 1.4.0 versioning
  • —Bundle size budgets updated for v1.4.0 scope: ESM 260 kB / CJS 270 kB (gzip) — PASS

Post-Release Fixes & Theme Builder Enhancement

TokensDocs
  • —Triadic hue rotation (fromSeedColor()): pick any brand hex color and derive a full semantic palette. The seed becomes agency; temporal and validation are derived at +120° / +240° on the hue wheel — mirroring the near-triadic relationship of the Nodus default palette.
  • —"Seed" UI strip in the Theme Builder top bar: native <input type="color"> + hex text input + Generate button. Pressing Generate applies the derived triadic palette and marks the theme as Custom.
  • —hexToHsl, hslToHex, isLightColor helpers added as pure math utilities (no DOM reads, SSR-safe).
  • —Subtle and fg variants auto-computed: subtle = S 20% / L 96%; fg = white or #18181B based on Y-luminance.
  • —Search index: Added 7 missing entries — Agentic Design Language overview, Agent Identity, Trust & Provenance, LLM Latency States, Agentic Playground, White-Label Theming guide, and Theme Builder sandbox tool. These pages were all unreachable via search.

Sprint 26 — White-Label Theme Builder

DAN-154Tokens
  • —/sandbox/theme-builder: 3-pane interactive token editor.
  • —Left: grouped token editor — agency/temporal/validation colors (color pickers), surface palette, radius scale (slider), mono font toggle
  • —Center: live preview — miniature finance dashboard renders in real-time as tokens change; dark/light mode toggle
  • —Right: export panel — CSS custom property sheet, Tailwind config object, JSON token map, createTheme() call
  • —Powered by lib/create-theme.ts themeToVars() and serializeThemeToCss() utilities

Sprint 26 — Reconciliation Domain

DAN-156Components
  • —ReconciliationSummary — Dashboard header card: total items, matched %, open exceptions, oldest break age, last run time. MetricCard grid with match-rate progress bar. Optional refresh callback.
  • —MatchQueue — Two-column match interface. Left: unmatched items with queue-depth badge. Right: ranked candidates with confidence scores (HIGH/MED/LOW). Match and Reject actions per candidate.
  • —ExceptionManager — Full reconciliation exception table with type/status/age filters, batch-action toolbar (escalate, resolve, assign), and inline status update per row. Age-sorted by default.
  • —BreakAnalysisPanel — Root-cause analysis for a single break. Metadata grid, field-level criteria diff view (internal vs counterparty), chronological history timeline, resolution notes editor.
  • —AgedItemsList — Time-bucketed aged items: 0–30 / 31–60 / 61–90 / 90+ days. Color-coded signals (green → amber → red). Click-to-drill bucket headers. Sparkline trend per bucket.

Sprint 26 — Documentation v2

DAN-157TokensComponentsDocs
  • —/foundation/component-graph: Interactive SVG dependency graph — 223 components, filter by category, hover highlights, click to navigate.
  • —Row-layered layout: Patterns → AI & Agent → Finance → UI Primitives with 22 curated dependency edges.
  • —/components/ai-agent: Full docs page for the AI & Agent component category.
  • —Streaming state machine (IDLE → STREAMING → COMPLETE/ERROR)
  • —When to use / When not to use guidance for all 5 components

Sprint 26 — Brand & Portfolio

DAN-160TemplatesTokensComponentsDocs
  • —AI-Era Visual Narrative: Awards page now leads with "The only design system built for the agent era" — the 5 Sprint 26 AI-native components (StreamingArtifact, ContextWindowMeter, FunctionCallVisualizer, ModelSelector, GenerativeFormFill) are the flagship showcase with code snippet + architecture diagram.
  • —Submission Package Updated: Description, tags, and version updated to v1.4.0 (Sprint 26). Technologies updated to include Anthropic SDK and WebGL.
  • —CSS Design Awards Added: Second awards track added alongside Awwwards — AI-Native Component Showcase submission.
  • —Recognition Track Expanded: 6 entries (was 4) — Claude API Integration and CSS Design Awards added.
  • —Social Assets Spec: Twitter/X (1200×675), LinkedIn (1200×627), Product Hunt gallery, OG image — all documented with ready-to-publish copy.

Sprint 26 — AI-Native Templates

DAN-155TemplatesComponents
  • —Multi-Agent Pipeline (/a2ui/templates/multi-agent-pipeline) — Visualize and manage multi-agent workflows: pipeline stage diagram with status pills, per-agent status cards with progress bars, task delegation tree, conflict detection and auto-resolution panel, full audit trail feed (HANDOFF/CONFLICT/INTERRUPT/COMPLETE events), and human interrupt/override controls.
  • —Knowledge Base Search (/a2ui/templates/knowledge-search) — Semantic search and retrieval interface: query bar with suggested hints, vault boundary filter with access-level badges (RESTRICTED/CONFIDENTIAL/PUBLIC), result cards with confidence meters, highlighted excerpt rendering, collapsible source provenance chain (ingest → chunk → embed → index), and latency/model stats panel.

Sprint 26 — AI-Native Component Pack

DAN-153TokensComponents
  • —StreamingArtifact — Renders streamed code/markdown/text output. Features: line-numbered code view, diff view (+/- rows with semantic colors), streaming cursor blink, auto-scroll to tail, copy button, error state. Props: content, kind, language, state, diff, showLineNumbers, showCopy, maxHeight.
  • —ContextWindowMeter — Segmented token usage bar for conversation context. Segments: system (muted), user (temporal/blue), assistant (agency/red), tools (validation/gold). Warning state at 80%, critical overflow alert at 95%. Props: segments, limit, model, warnAt, criticalAt, showLegend, compact.
  • —ModelSelector — Model picker for Claude model family (Haiku/Sonnet/Opus). Each option: context window size, capability chips (VISION, TOOLS, STREAM, THINK, BATCH, FILES, CUA), cost tier, latency tier. Dropdown and inline panel variants. Props: options, value, onChange, variant, label.
  • —FunctionCallVisualizer — Tool call execution card. Line-numbered JSON input/output, status badge (PENDING/RUNNING/DONE/ERROR), semantic border color per state, duration display, call ID traceability, collapsible panel. Props: name, input, status, output, error, durationMs, callId, defaultCollapsed.
  • —GenerativeFormFill — Form field with AI-assist. Ghost suggestion text, Tab-to-accept / Escape-to-reject keyboard shortcuts, provenance badge (model + confidence %), generating pulse animation, full ARIA labeling. Props: value, suggestion, model, generating, confidence, onAccept, onReject.

v1.3.0 — Sprint 25 Release

DAN-150TemplatesTokensComponents
  • —@nodus/design-system@1.3.0 — web components + tokens v2 + WebGL charts + i18n
  • —@nodus/design-system-native@1.3.0 — React Native adapters (renamed from @dana/nodus-ds-native)
  • —@nodus/tokens@1.3.0 — standalone CSS token package (new; CDN-ready via jsDelivr + unpkg)
  • —Three-package publish pipeline with synchronized versioning
  • —Bundle size budgets via size-limit (250 kB ESM / 260 kB CJS)

Design Tokens v2 Implementation

DAN-149TokensComponents
  • —lib/dark-mode-derive.ts — OKLCH-based dark-mode derivation algorithm. Converts hex → OKLCH color space (Björn Ottosson), transforms lightness by semantic role (surface/text/accent/subtle), reconverts to hex. Perceptually uniform — hue and chroma preserved across modes.
  • —scripts/build-tokens.ts — Build step that generates public/tokens/semantic.v2.css. Combines OKLCH-derived dark values for accent colors with precision-hardcoded Bauhaus neutral scale for surfaces/text. Run via npm run build:tokens.
  • —public/tokens/semantic.v2.css — Generated v2 token file served statically. Consumed by the Playwright token regression spec (DAN-151) for v1→v2 visual comparison runs.
  • —lib/token-versions.ts — Token versioning and deprecation registry. TOKEN_VERSION = "2.0.0". Provides isDeprecated(), getDeprecationInfo(), warnIfDeprecated() for dev-mode console warnings on v1 token usage.
  • —lib/create-theme.ts — Added v2 palette shorthand API: createTheme({ palette: { primary, accent, neutral } }). Derives agency/temporal colors from 3 brand colors. Backward-compatible with existing colors field API.

i18n Runtime

DAN-147Components
  • —formatNumber(value, locale, options) — decimal, compact, scientific notation; NaN/Infinity guards; normalizes -0
  • —formatCurrency(value, currency, locale, options) — symbol placement, accounting currencySign, compact notation, per-locale decimal precision
  • —formatDate(value, locale, options) — accepts Date / timestamp / ISO string; short/medium/long/full dateStyle
  • —formatRelativeTime(value, locale, now?) — "yesterday", "1 hour ago", "in 3 days"; 7-step resolution cascade
  • —SUPPORTED_LOCALES — ["en-US", "en-GB", "de-DE", "fr-FR", "ja-JP", "ar-SA", "he-IL"]

WebGL Chart Primitives

DAN-144TokensComponents
  • —Shared infrastructure context for all GL charts
  • —CSS token bridge: tokenToRGBA(cssVar) resolves DS semantic tokens → WebGL RGBA float arrays via computed style; handles nested var() chains and oklch values
  • —Shared requestAnimationFrame scheduler: single rAF loop, multiple chart callbacks
  • —createWebGLContext: WebGL2 preferred, automatic fallback to WebGL1
  • —compileProgram: vertex + fragment shader compilation with error logging

v1.3.0-alpha — Sprint 24 Release

DAN-141TokensComponentsDocs
  • —React Native package scaffold: packages/nodus-ds-native/ (@dana/nodus-ds-native v1.3.0-alpha.0)
  • —RN token bridge: semantic color, spacing, typography, and finance-density tokens ported to React Native StyleSheet values
  • —RN CI pipeline: .github/workflows/rn-ci.yml (TypeScript check, Jest native tests, Expo bundle check, EAS Update)
  • —EAS configuration: expo-eas.json — development, preview, and production build + update channels
  • —Native README: README.native.md with live preview QR code placeholder and package split documentation

v1.2.0 — Sprint 23 Release

DAN-134TemplatesTokensComponentsDocs
  • —FX & Derivatives: FXRateCard, VolatilitySurfaceChart, DerivativesPositionTable, SwapTicketCard, OptionChainTable, HedgeEffectivenessGauge (DAN-127)
  • —Payments & Settlement: PaymentLifecycleTracker, DualControlPanel, SanctionsCheckBadge, SettlementNetCard (DAN-131)
  • —Risk Analytics A2UI templates: VaR Dashboard, Stress Testing, Limit Management (DAN-128)
  • —Developer CLI: npx nodus-ds add <component> scaffolding tool (DAN-129)
  • —Storybook 8: 55 stories for Sprint 21-22 voice and collaboration components (DAN-130)

Sprint 23: Payments & Settlement component suite

DAN-131TemplatesTokensComponentsDocs

Sprint 23: Storybook 8 — Sprint 21-22 story coverage

DAN-130TemplatesComponentsDocs

Sprint 23: FX & Derivatives component suite

DAN-127TemplatesTokensComponentsDocs

Sprint 23: Developer CLI — `npx nodus-ds add <component>`

DAN-129TokensComponentsDocs
  • —npx nodus-ds add <component> — copies component source with token hints and import snippet
  • —npx nodus-ds add --list — lists all components by category from registry.json
  • —npx nodus-ds init — detects framework, injects CSS token imports, checks Tailwind
  • —npx nodus-ds tokens [--format ts|css] — exports tokens as CSS or TypeScript const

Sprint 22: Voice interface primitives

DAN-123Components
  • —States: idle, listening (agency red), processing (temporal blue), done, error
  • —7-bar waveform animates to audio amplitude during listening (real or simulated)
  • —Bars freeze and stagger-pulse during STT processing
  • —Color rule: listening = agency red (user-initiated agentic action), processing = temporal blue (computation)
  • —Full keyboard + screen reader support; aria-pressed for listening state

Sprint 22: Runtime ThemeProvider — CSS custom property theming system

DAN-119TemplatesTokensComponentsDocs
  • —ThemeConfig interface — typed overrides for colors, typography, radius, and spacing
  • —ResolvedTheme — fully-populated theme with all fields present (no optionals)
  • —createTheme(config?) — factory that merges user overrides onto Nodus base defaults
  • —themeToVars(theme) — maps a ResolvedTheme to a Record<string, string> of --ds-* CSS custom properties
  • —serializeThemeToCss(theme, selector?) — SSR-safe serializer; outputs a CSS declaration block for injection into <style> tags

Sprint 22: Design system governance — RFC process, versioning, contribution model

DAN-125TemplatesTokensComponentsDocs

Sprint 22: Realtime collaboration UI patterns

DAN-122TokensComponentsDocs

Sprint 22: TypeDoc API documentation — TSDoc on top 20 components

DAN-121ComponentsDocs
  • —Button — variant/size/loading prop descriptions + example
  • —Badge — semantic color pillar descriptions per variant + example
  • —Card — variant/label prop docs + example
  • —Input — label/state/hint prop docs + accessible ID wiring note + example
  • —Modal — composite usage example, ModalTrigger/ModalClose inline docs

Sprint 22: Performance & bundle audit — Lighthouse CI, route splitting, Web Vitals

DAN-124TemplatesTokensComponents
  • —@next/bundle-analyzer — npm run analyze script (ANALYZE=true npm run build) opens interactive treemap for identifying bundle bloat
  • —@vercel/analytics + @vercel/speed-insights — real-user Web Vitals reporting via Vercel's edge analytics pipeline
  • —app/(site)/a2ui/templates/loading.tsx — route-level Suspense streaming boundary for all A2UI template pages; reduces TBT by deferring heavy client component hydration until after FCP
  • —.github/workflows/lighthouse.yml — Lighthouse CI workflow running on every PR and main push; audits 4 key routes with desktop preset
  • —lighthouserc.json — performance budget configuration: LCP ≤ 2500ms, TBT ≤ 200ms, performance score ≥ 0.8, accessibility score ≥ 0.9

Sprint 22: NPM package distribution — @nodus/design-system publishable build

DAN-118TokensComponents
  • —src/index.ts — top-level library entry point re-exporting all UI, finance, and pattern components plus cn and useStagedReveal utilities
  • —tsup.config.ts — dual ESM/CJS build with tree-shaking, source maps, and type declarations; all React/Next/Radix peers externalized
  • —CONTRIBUTING.md — component authoring guide covering token architecture, design rules, WCAG requirements, Strict Mode safety, and library build
  • —package.json — added main, module, types, exports, and files fields for proper NPM distribution; moved React, react-dom, next, framer-motion, lucide-react, and recharts to peerDependencies; added build:lib script and tsup ^8.4.0 devDependency; token CSS files exposed via exports subpaths

Sprint 21: Storybook links and version bump to v1.1.0

DAN-116TemplatesTokensComponentsDocs

Sprint 21: Claude Agent SDK × Nodus DS integration showcase templates

DAN-112TemplatesTokensDocs
  • —Human-in-the-loop approval interface for Claude Agent SDK require_approval flows
  • —Pending requests list with risk-level badges (critical/high/medium/low), expiry timers, and approve/deny actions
  • —Expandable detail panels: description, risk assessment, full tool_use input block, agent context metadata
  • —Fleet metrics: pending count, approved/denied today, avg response time
  • —Mock data mirrors real SDK approval request shapes (batch payments, sanctions overrides, FX forwards)

Sprint 21: Brand identity refresh — design system site visual polish

DAN-115TokensComponentsDocs
  • —Hero subtitle updated: "The design language for the autonomous era." (sharper value statement)
  • —Body copy tightened: 233 components, 41 agent patterns, semantic color in one sentence
  • —Removed local divider constant — now imported from lib/site-styles.ts
  • —All inline font stacks replaced with MONO, DISPLAY, SERIF constants
  • —sectionHeading, sectionHeadingSerif, arrowLink, indexNumber, tagPill applied throughout

Sprint 21: Changelog site — versioned release notes page

DAN-113TemplatesTokensComponentsDocs
  • —Category filter tabs: All / Components / Tokens / Templates / Docs — live counts per category
  • —SERIF italic release titles, MONO dates and ticket chips, DS-styled category pills
  • —Agency red left accent for sprint-tagged major releases, temporal blue for minor
  • —RSS feed link in page header, entry count in footer

Sprint 21: Global component search and filtering

DAN-114TemplatesComponentsDocs
  • —Search page (/search): debounced input (300ms), instant results from the full index, keyboard navigation (↑↓ + Enter), clear button, result count
  • —Category filters: All, UI Components, Finance, Patterns, A2UI Templates, Foundation — rendered in left sidebar (desktop) or collapsible panel (mobile)
  • —Domain tag filters: Agentic, Treasury, Payments, Risk, Compliance, FX, Derivatives, Liquidity, Funding, Data Viz — multi-select checkboxes
  • —Domain tags in search index: SearchEntry.domainTags field added; inferred from subcategory (e.g. finance → treasury/payments/risk/compliance/fx, agentic subcategories → agentic) and from A2UI template descriptions via keyword matching
  • —Match highlighting: query terms highlighted in result name and description

Sprint 21: Vercel deployment pipeline with CI gate

DAN-109TokensDocs
  • —CI gate for production: ci.yml now triggers on push to main (was dev-only). Added deploy job gated on needs: [typecheck, build, test, attestation] — production deployment to Vercel only fires after all CI checks pass.
  • —README status badges: CI workflow badge, Chromatic badge, and Vercel deployment badge added.
  • —Deployment pipeline confirmed: design.dana.xyz resolves to the production Next.js site. Each PR receives a unique Vercel preview URL via the Vercel GitHub integration. Chromatic visual tests run on Storybook stories for every push to main and PRs.
  • —Required secrets: VERCEL_TOKEN, VERCEL_ORG_ID (team_pamm24pZnHtoePWFtJldYofV), VERCEL_PROJECT_ID (prj_CmSvgVn3weuFQ0NCyQnTXirKCPAW) must be set in GitHub repo secrets to activate the CI-gated deploy job.
  • —Dashboard note: Disable Vercel's auto-deploy for the production branch (Project → Settings → Git) to prevent a double-deploy race with the GitHub Actions deploy job.

Sprint 20: Advanced agentic interaction templates

DAN-105TemplatesTokensComponents

Interactive token explorer: live preview + cross-reference

DAN-108TokensComponentsDocs

S20: Agent Process Portfolio Showcase

DAN-107TemplatesTokensComponentsDocs
  • —Hero + System Metrics — 6-stat grid: 150+ templates, 325 components, 20 sprints, 153 commits, 216 docs, 8 agents
  • —Agent Roster — Full 8-agent table: Chief Visionary, Component Engineer, UX Designer, Template Architect, Quality & Accessibility Lead, Documentation Architect, DevOps & Release Engineer, Brand & Portfolio Lead. Color-coded by tier (red/blue/gold/gray), each with domains and responsibility description.
  • —S01–S20 Sprint Timeline — 20-cell grid showing focus area and deliverables per sprint. Color encodes phase: blue=infrastructure, gold=quality gates, red=expansion.
  • —6-Phase Agentic Workflow — Brief → Design → Validate → Document → Ship → Showcase. Each phase shows owning agent, action taken, and output artifact.
  • —Quality Signal Table — 8 metrics: WCAG AA, TypeScript strict, visual regression, token compliance, font floor, touch targets, mobile responsiveness, component docs — all passing.

Storybook coverage: 26 missing UI component stories

DAN-106TokensComponentsDocs

Mobile-first component documentation for all 216 UI components

DAN-98TemplatesTokensComponentsDocs
  • —Works As-Is → --ds-color-outcome-positive (green)
  • —Touch Target → --ds-color-validation (gold)
  • —Stacks / Scroll → --ds-color-temporal (blue)
  • —Mobile Adapted → --ds-color-temporal (blue)
  • —works-as-is: 57 components (display, typography, small indicators)

FX Hedging Workflow A2UI template

DAN-100TemplatesDocs

AdaptiveChartContainer: responsive chart/metric card pattern

DAN-101TokensComponents
  • —Desktop (≥768px): renders the full chart passed as the chart prop (LineChart, BarChart, AreaChart, etc.)
  • —Mobile (<768px): collapses to a compact 64px metric card showing key stat + period-over-period delta + optional sparkline trend
  • —chart — any ReactNode (full chart component)
  • —metricValue / metricLabel — primary KPI for mobile card
  • —metricFormat — currency | rate | percent | bps | integer | decimal

Token Fix: A2UI_LIGHT categorical color tokens

DAN-30TemplatesTokens
  • —blueBg → color-mix(in srgb, --ds-viz-cat-1 10%, transparent)
  • —purple → var(--ds-viz-cat-4, #7B52CC) (violet — correct categorical color for tier differentiation)
  • —purpleBg → color-mix(in srgb, --ds-viz-cat-4 10%, transparent)

Payment Approval Workflow Template

DAN-99TemplatesComponentsDocs
  • —Payment Queue — 5 payment entries across SWIFT, SEPA, Fedwire rails with amount, beneficiary, status, and priority. Click-to-select panel detail view.
  • —Sanctions Screening — AI screener panel showing OFAC SDN, EU Consolidated, UN Security Council, HM Treasury, and OFSI list results. Clear/review/match/pending states with confidence detail.
  • —Dual-Control Authorization — Maker/Checker approval ceremony. Independent authorization steps with timestamp and name attribution. Sequential gate enforcement.
  • —Release Gate — Pre-flight checklist (Sanctions, Maker Auth, Checker Auth, Value Date, Nostro Funds) before payment submission to network. Animated releasing state.
  • —Settlement Tracking — UETR display, 5-step settlement timeline (Initiated → Authorized → Submitted → Acknowledged → Settled), completion timestamp.

S18: Mobile Responsiveness + Workflow Templates (DAN-95, DAN-96)

TemplatesTokensDocs
  • —.ds-stat-grid — 4-column stat rows collapse to 2×2 on ≤600px (homepage, A2UI listing)
  • —.ds-foundation-grid — 3-column foundation grids → 2-col at 900px, 1-col at 600px
  • —.ds-a2ui-scroll-container — complex financial templates scroll horizontally on mobile with scroll indicators
  • —a2uiWrapper padding now uses clamp() for fluid mobile-to-desktop scaling
  • —app/(site)/page.tsx — stat row grid responsive

S17: A2UI Template Expansion — 142 Templates

DAN-90TemplatesTokensComponents
  • —Agent Pipeline Dashboard: Multi-stage pipeline table with per-agent assignment, all-pipelines list, event log, 4 metrics cards.
  • —Agent Coordination Center: 12-agent registry by tier (orchestrator/specialist/utility), dispatch queue with priority levels, activity log.
  • —AI Model Comparison: Side-by-side opus/sonnet/haiku evaluation with quality scoring (faithfulness/groundedness/conciseness), cost/latency metrics, eval history.
  • —Agent Performance Analytics: 7-agent leaderboard with task throughput, success %, token cost, escalations; daily volume chart; error log.
  • —Prompt Engineering Workspace: Prompt library sidebar, variable injection panel, version history (v1–v4), A/B test runner results.

S16: Agentic AI Pattern Library — 16 New Components

DAN-88TokensComponents
  • —AgentThinkingIndicator: Streaming token-by-token output visualization with cursor blink and temporal-blue pulse. Distinct from ThinkingState (reasoning trace) — renders raw stream.
  • —AgentConfidenceBar: Horizontal confidence score bar with outcome-based color tiers (low/moderate/high). Role: meter, context label, numeric pct.
  • —AgentSourceCitation: Structured provenance citation list — source type badges (DOC/DB/WEB/AGT/VLT/USR), relevance scores, excerpts, retrieval timestamps.
  • —AgentDecisionTree: Recursive branching decision visualization — taken/skipped/pending nodes, terminal pass/fail outcomes, depth-indented rendering.
  • —MultiAgentOrchestrationView: Horizontal pipeline view for multi-agent workflows — step nodes with status, connector lines, derived overall state.

S15: Capability Patterns

DAN-86ComponentsDocs
  • —AgentCapabilityMatrix: Scannable grid of agents × capability dimensions (read/write/approve/transact/escalate). Blue=granted, gold=conditional, red=denied. Agent sigil + name + role in identity column. Click-to-focus row for drill-down. Legend bar.
  • —CapabilityGrant: Single permission grant card with condition badges (time-bounded/value-bounded/approval-gated), status chip, meta row, collapsible audit trail (via ProvenanceChain), and revoke trigger.
  • —CapabilityRevokeFlow: Two-step revocation ceremony. Step 1: impact preview (will-fail / may-degrade / unaffected tasks). Step 2: mandatory written reason — enforces non-repudiable audit trail.
  • —Foundation page: /foundation/capability-patterns — color semantics table, live demos for all three components, prop tables, anti-patterns, and design rules.
  • —Exported from components/patterns/index.ts, registered in registry-extended.ts, added to lib/sidebar-nav.ts.

S15: Post-deploy Smoke Test Script

DAN-84TemplatesComponents
  • —Routes covered: all 215 UI components (/components/:slug), 47 patterns (/patterns/:slug), all A2UI templates (/a2ui/templates/:slug), plus ~35 static site routes — ~300+ routes total
  • —SSG failure detection: checks for React null/render crashes, useContext missing provider crashes, and module resolution / chunk load failures
  • —Output: console pass/fail summary + scripts/smoke-test-report.md (route table with status, duration, failure signals)
  • —Timeout: 30s total (parallel fetch, 15s per-route limit)
  • —Exit codes: 0 = all pass, 1 = failures found, 2 = global timeout or fatal error

S15: Theme Configuration Template

DAN-85TemplatesTokensComponents
  • —3 preset skins: Nodus Default (base), Enterprise Dark (dark surface trading floor), High-Contrast Accessible (WCAG AAA)
  • —SkinProvider component: wraps any React subtree in data-skin attribute for scoped CSS custom property overrides
  • —Live Preview panel: header bar, KPI row, status badges, and mini payment table rendered in the active skin
  • —Token Overrides table: shows every --ds-* token that changes per skin with color swatch, base hex, and override hex
  • —CSS Export panel: generates ready-to-drop [data-skin="..."] { } CSS block with copy-to-clipboard

S14: Real-time Hooks

DAN-80TokensComponentsDocs
  • —Returns { chunks, status, latency, start, reset }
  • —status: "idle" | "streaming" | "complete" | "error"
  • —latency: time-to-first-token in ms (simulated)
  • —Options: content, chunkInterval (ms), chunkSize (chars), ttft (ms)
  • —React Strict Mode safe — all timers cleared on unmount

S13: Prop Stress-Tester

DAN-77Components
  • —Test matrix per component: empty strings, 200+ char strings, unicode, special chars, all enum values, boundary numerics (0, 1, -1, out-of-range), null/undefined optional props, empty/large arrays
  • —Components covered: AgentIdentityBadge, ProvenanceChain, StreamingResponse, ApprovalQueue, AgentConflictPanel, ChartTooltip, ChartAnnotation, ConfidenceMeter, ConsentFlow, EscalationBanner, ThinkingState
  • —Report written to scripts/stress-test-report.md on each run

S13: Error State Pattern System

DAN-79TokensComponentsDocs
  • —severity="fatal" → --ds-color-outcome-negative (red) — unrecoverable, no retry
  • —severity="recoverable" → --ds-color-validation (gold) — human action resolves it
  • —severity="transient" → --ds-color-temporal (blue) — auto-retry in progress

S12: Enhanced Component Search with Faceted Filtering

DAN-74TemplatesTokensComponentsDocs
  • —components/site/CommandSearch.tsx — full rewrite
  • —Filter bar with 3 facets: Category (All / UI / Patterns / A2UI / Foundation), Status (All / Stable / Experimental), Since (All Sprints / S9+ / S11+)
  • —Match highlights: query text highlighted in gold (--ds-color-validation) in result names and descriptions
  • —Rich result rows: name + status badge + sprint label + description + subcategory metadata inline
  • —Active indicator bar (--ds-color-temporal) on selected result

S12: Debt Capital Markets Template

DAN-75TemplatesTokensDocs
  • —app/(site)/a2ui/templates/debt-capital-markets/page.tsx — new template
  • —Mandate: deal terms panel + mandate detail + ProvenanceChain
  • —Structuring: AgentConflictPanel (Pricing Agent vs. Risk Agent on yield spread) + ProvenanceChain
  • —Book-building: coverage ratio bar, investor order book (10 investors), EscalationBanner when coverage < 100%, ApprovalQueue for board sign-off
  • —Settlement: deal summary, 6-item checklist, full 11-step ProvenanceChain

S11: Component Versioning System

DAN-71TemplatesComponentsDocs
  • —registry-extended.ts — ComponentEntry interface extended with four new optional fields:
  • —version?: string — semver string (e.g. "1.0.0")
  • —since?: string — sprint label when component was introduced (e.g. "S1")
  • —deprecated?: boolean — triggers DeprecationBanner on component pages when true
  • —deprecationNote?: string — migration guidance shown in the banner

S10: v1.0 Release Notes Foundation Page

DAN-69TokensComponentsDocs
  • —app/(site)/foundation/release-notes/page.tsx — new Foundation page with:
  • —Stat strip: 9 sprints · 233+ components · 1,534 tests · 200+ tokens
  • —ProvenanceChain visual metaphor — S1→S9 chain using source → transform → inference → output step types to map the system's evolution
  • —Sprint timeline — S1–S9 grouped sections (newest first), collapsible per sprint, EXPAND ALL / COLLAPSE ALL controls
  • —Status badges — NEW (blue) · UPDATED (gold) · FIXED (green) with WCAG AA contrast

S10: Intercompany Netting Template

DAN-70TemplatesTokensComponentsDocs
  • —New A2UI template at /a2ui/templates/intercompany-netting
  • —Replaced hardcoded hex colors with var(--ds-*) semantic tokens
  • —Fixed setTimeout calls — cleanup-safe useFlowRunner hook with useRef + useEffect cleanup
  • —Canonical footer: left spacer · center Templates link · right skill tags
  • —Registered in lib/sidebar-nav.ts and lib/search-index.ts

S9: TypeScript Type Exports Barrel

DAN-65TemplatesTokensComponentsDocs
  • —components/patterns/ProvenanceChain.tsx — exported ProvenanceStep, ProvenanceStepType, ProvenanceStepStatus, ProvenanceChainProps
  • —components/patterns/ApprovalQueue.tsx — exported ApprovalItem, RiskLevel, ApprovalQueueProps
  • —components/patterns/ConfidenceMeter.tsx — exported ConfidenceMeterProps, ConfidenceSingleAxis, ConfidenceDualAxis, ConfidenceThresholds
  • —components/patterns/ConsentFlow.tsx — exported ConsentStep, ConsentPermission, ConsentFlowProps
  • —components/patterns/index.ts — added ConflictLayout, ResolutionOutcome, AvatarUser, AvatarStackProps, SourceType, and all newly exported pattern types

S9: Iconography System

DAN-67TokensComponentsDocs

S8: Light Mode Parity Audit

DAN-64TokensComponents
  • —AgentIdentityBadge — CapabilityChip (requiresApproval), PanelBadge approval notice
  • —EscalationBanner — "ESCALATION — HUMAN REQUIRED" header text
  • —StreamingResponse — "CONTINUE RESPONSE" button text (--ds-surface-ground on gold was 2.4:1)
  • —AgentConflictPanel — validation button variant, SELECTED badges (×3), consequence warning text, mode header badge
  • —EscalationBanner — suggested action body text

S8: Token Explorer Live CSS Reads

DAN-62TokensComponentsDocs
  • —Token Explorer (/foundation/tokens) — all color swatches now read live values from the browser via getComputedStyle, replacing hardcoded hex fallbacks
  • —Color tokens resolved by setting background-color: var(--token) on probe spans and reading computed RGB — correctly resolves var() chains
  • —Light and dark values pre-loaded at mount by temporarily toggling data-theme on documentElement (synchronous, no visible flash)
  • —Contrast ratios recompute from live hex values after hydration
  • —darkPreview toggle picks from the pre-loaded dark map — no re-read required on toggle

S8: Motion Token Migration

DAN-61TemplatesTokensComponentsDocs
  • —Hardcoded transitions eliminated — 39 files migrated from raw 0.15s/80ms/120ms/300ms values to --ds-motion-* semantic tokens
  • —80ms → var(--ds-motion-interaction) var(--ds-motion-easing-productive) (hover/click micro-feedback)
  • —120ms / 150ms / 0.15s → var(--ds-motion-duration-fast) var(--ds-motion-easing-productive) (state changes, badge hover)
  • —300ms → var(--ds-motion-deliberate) var(--ds-motion-easing-productive) (bar fills, major reveals)
  • —0.12s linear / 0.15s linear → var(--ds-motion-duration-fast) linear (progress bars)

S7: Token Explorer

DAN-58TokensComponentsDocs
  • —Token Explorer (/foundation/tokens) — Rebuilt as a live, searchable three-layer reference:
  • —Search — filters across all ~200 tokens (name + description) with layer badges (primitive / semantic / component)
  • —Dark/Light preview toggle — swatch panels and live component previews update reactively
  • —Contrast ratios — every color token shows ratio vs current surface with WCAG AA/AAA grade badge
  • —WCAG note on --ds-color-validation — "dark mode only — 5.96:1 on dark surface" per DAN-57 audit

S7: Portfolio Risk Overview Template

DAN-59TemplatesTokensComponents
  • —Portfolio Risk Overview (/a2ui/templates/portfolio-risk-overview) — Flagship morning risk dashboard showcasing all 10 agentic pattern components in a single-scroll 3-column layout.
  • —AgentIdentityBadge × 3 — Risk Orchestrator (active), Credit Risk Agent (idle), Market Microstructure (pending) in card surface
  • —ProvenanceChain — 8-step overnight analysis pipeline with 2 pending steps
  • —StreamingResponse — Portfolio commentary arriving live with token-rate display
  • —ThinkingState — Market Microstructure agent reasoning with partial trace

S6: Agentic Component Playground

DAN-55TokensComponentsDocs
  • —Agentic Playground (/foundation/agentic-playground) — Interactive reference page for all 10 core agentic pattern components. No external Storybook dependency.
  • —AgentIdentityBadge — role (5 tiers), surface (inline/card/panel), state (5 states), offline and timeout edge states
  • —ProvenanceChain — fresh, stale (staleness threshold demo), and partial completion variants
  • —StreamingResponse — live stream simulation, truncated output, token timeout silence detection
  • —ApprovalQueue — 4 items at mixed risk levels, partial completion (pre-decided items) edge state

S6: Live FX Monitor Template

DAN-56TemplatesComponents
  • —Live FX Monitor (/a2ui/templates/live-fx-monitor) — Real-time FX desk monitor template demonstrating the design system under rapid state changes.
  • —Simulated live rate feeds for EUR/USD, GBP/USD, USD/JPY, USD/CHF via setInterval with strict mode safe cleanup
  • —Interactive rate ticker cards — click to switch chart focus; threshold proximity warning in gold
  • —Intraday sparkline chart with ChartAnnotation (threshold line + live dot observation)
  • —AgentIdentityBadge (inline + card) for FX-Executor (EXECUTOR role) — state transitions: pending → active → idle

S5: Cascaded Conflict (3+ Agents) in AgentConflictPanel

DAN-51TokensComponents
  • —AgentConflictPanel — Added conflictLayout?: 'parallel' | 'ranked' | 'auto' prop (default: 'auto'). Also added ConflictLayout type export.
  • —auto: uses parallel for exactly 2 positions, ranked for 3+.
  • —ranked: new RankedConflictView — positions sorted by confidence descending; each card is full-width with #N rank badge; expandable reasoning per card; radio-style selection; 5+ positions collapse to top 5 with SHOW ALL (N) POSITIONS control.
  • —Post-resolution (ranked): all positions remain visible — winner highlighted with --ds-color-outcome-positive border + ACCEPTED badge; others rendered at 50% opacity with DEFERRED label.
  • —Dynamic header: "{N}-WAY CONFLICT DETECTED" when N >= 3; "Agents disagree" for N=2.

S5: Agent Unavailable Edge States

DAN-50TokensComponents
  • —AgentIdentityBadge — Added agentOnline?: boolean prop. When false: monogram renders at 50% opacity with --ds-color-outcome-negative border and static red corner dot; inline variant shows "(unavailable)" suffix and muted name; card variant adds an AGENT UNAVAILABLE banner strip with negative background; panel variant adds a full-width offline banner with last-seen timestamp. Role badge shifts to neutral gray. StatusDot hidden in panel variant (no live status to show).
  • —EscalationBanner — Added targetAgentOnline?: boolean prop. When false: a TARGET AGENT OFFLINE — CANNOT ACCEPT ESCALATION notice strip renders above the gold escalation header (using --ds-color-outcome-negative); suggestedAction is overridden to "REASSIGN to an available agent"; the "SUGGESTED ACTION" label becomes "REQUIRED ACTION" in negative color. Gold banner structure unchanged.
  • —ConsentFlow — Added agentOnline?: boolean prop. When false: a REQUESTING AGENT OFFLINE — GRANT UNAVAILABLE banner renders above the step indicator (negative color); GRANT button is disabled (muted, cursor: not-allowed, opacity: 0.5); DENY button label changes to DISMISS REQUEST at step 0.
  • —ThinkingState — Added agentOnline?: boolean prop. When false: left border → --ds-color-outcome-negative (static, no pulse); label → AGENT OFFLINE — REASONING UNAVAILABLE; elapsed timer suppressed (reasoning never started); component renders even with no trace/thinking state.
  • —Agent unavailable = --ds-color-outcome-negative throughout — offline is a system failure state, not a validation gate

S5: Partial Completion Edge States

DAN-49TokensComponents
  • —ApprovalQueue — Added initialDecided?: Record<string, "approved" | "rejected"> prop for externally pre-decided items. Header text switches to N REMAINING · M DECIDED format in partial state. Remaining items get a gold left border (--ds-color-validation). Decided items render with outcome tint background (green/red 8% mix) and an APPROVED/REJECTED badge; non-interactive. Internal outcomes state tracks both directions.
  • —StreamingResponse — Added isTruncated?: boolean and onContinue?: () => void props. When isTruncated=true and not in timeout state: left border shifts to --ds-color-validation, status label shows TRUNCATED, and a gold notice block renders below content: RESPONSE TRUNCATED — OUTPUT INCOMPLETE · REVIEW BEFORE ACTING with an optional CONTINUE RESPONSE button.
  • —ThinkingState — Added isInterrupted?: boolean prop. When true: left border → --ds-color-validation, pulse animation stops, label → REASONING INTERRUPTED — PARTIAL TRACE, elapsed counter → gold, trace gets a gold truncation marker — REASONING INTERRUPTED — INCOMPLETE — appended, footer shows PARTIAL TRACE ONLY — CONCLUSION NOT REACHED · REVIEW BEFORE ACTING. Early-returns guard updated to permit render when isInterrupted=true even with no active isThinking.
  • —ProvenanceChain — Added status?: "complete" | "pending" | "failed" | "skipped" per step (backward-compatible; default = "complete"). When a chain has any non-complete step: muted rendering (opacity 0.6, --ds-text-muted label, --ds-border-separator indicator dot with dashed outline, model/confidence/timestamp suppressed), a gold STOPPED HERE truncation divider before the first incomplete step, and a gold footer CHAIN INCOMPLETE — N OF M STEPS EXECUTED. failed steps additionally use --ds-color-outcome-negative for the status badge.
  • —Partial completion = --ds-color-validation (gold) throughout — partial output is a validation gate, not a system failure

S5: Stale Provenance Edge States

DAN-48TokensComponents
  • —ProvenanceChain — Added stalenessThresholdMs?: number (default 1h) prop and lastUpdatedAt?: string per step. Steps with source data older than the threshold show a gold dot indicator and append (stale · {age}) to the label in --ds-color-validation. When any step is stale, a gold warning header row renders: ⚠ DATA STALENESS — OLDEST SOURCE: {age} AGO. Stale data is never hidden — it requires human judgment.
  • —ChartInteractionLayer / ChartTooltip — Added staleAnalysisAge?: string prop. When source="agent" and this prop is set, a gold stale warning row renders at the top of the tooltip: ⚠ STALE ANALYSIS — {age} OLD, above the standard agent highlight header.
  • —ChartInteractionLayer / ChartAnnotation — Added lastAnalyzedAt?: string, stalenessThresholdMs?: number (default 1h), and staleAnalysisAge?: string (pre-formatted override) props. Stale annotations display a gold outline ring on the marker pin/label and prepend ⚠ STALE ANALYSIS — {age} OLD to the expanded detail panel.
  • —ConfidenceMeter — Added staleEvidenceAge?: string to both single-axis and dual-axis modes. When set, a gold stale warning renders below the meter(s): ⚠ BASED ON STALE EVIDENCE — {age} OLD. The displayed confidence score is never degraded — the score is accurate for the evidence it had.
  • —Stale provenance = --ds-color-validation (gold) throughout — signals quality degradation requiring human judgment, not system failure

S5: Timeout Edge States

DAN-47TokensComponents
  • —AgentIdentityBadge — Added timeoutAt?: string and timeoutThresholdSecs?: number props. When timeoutAt is set: caution-colored border and status dot, inline variant appends (no response · Ns), card variant shows AGENT TIMEOUT — NO RESPONSE banner, panel variant shows full caution banner with descriptive copy. No pulse while timed out.
  • —StreamingResponse — Added tokenTimeoutMs?: number (default 30s), onRetry?: () => void, onCancel?: () => void props. Detects token silence via useEffect with setTimeout cleanup (Strict Mode safe). On timeout: left border shifts to caution, streaming cursor removed, notice + RETRY REQUEST / DISCARD actions appear. Partial content is always preserved.
  • —ThinkingState — Added timeoutSecs?: number (default 120), onTimeout?: () => void, onRetry?: () => void, onEscalate?: () => void props. When elapsed >= timeoutSecs: pulse stops, border → caution, label → "TIMEOUT — REASONING HALTED", elapsed counter freezes at threshold, trace footer appended, retry/escalate actions rendered. onTimeout fires exactly once via ref guard.
  • —Timeout = --ds-color-outcome-caution (orange) throughout — degraded waiting state, not failure
  • —No agency red (agent has not acted; it has failed to respond)

S5: Agent Simulation Lab Template

DAN-45TemplatesTokensComponentsDocs
  • —Agent Simulation Lab (app/(site)/a2ui/templates/agent-simulation-lab/page.tsx) — Treasury decision backtesting sandbox. Tests AI agent recommendations against historical stress scenarios.
  • —Scenario selector — entity dropdown, 4 stress presets (SVB Stress, Rate Shock, Yen Carry Unwind, Base Case) with date ranges
  • —Agent Stream tab — StreamingResponse component showing live agent reasoning via useStagedReveal (React Strict Mode safe); dual-axis ConfidenceMeter on completion
  • —Results tab — Decision comparison table (AI recommendation vs actual outcome), per-decision ConfidenceMeter scores, alpha/match-rate summary cards
  • —Provenance tab — ProvenanceChain showing source → transform → inference → output decision chain with model attribution

Hotfix: Treasury Daily Brief SVG hour label font floor

DAN-44TemplatesDocs
  • —Treasury Daily Brief — Changed SVG hour label fontSize from 9 to 10 (app/(site)/a2ui/templates/treasury-daily-brief/page.tsx:183). Enforces the 10px font floor required by CLAUDE.md.

S4: TypeScript Strict Pass + Visual Regression Coverage

DAN-41TemplatesTokensComponentsDocs
  • —TypeScript strict pass — tsc --noEmit now exits clean across the entire codebase. Fixed 60+ type errors across Sprint 1–3 additions:
  • —registry-extended.ts — Added missing TokenFamily values ("color", "viz", "fin") and Subcategory values ("coordination", "dataviz")
  • —tsconfig.json — Added components/__tests__/ and figma/ to the exclude list (test files are type-checked by vitest; figma Code Connect files require @figma/code-connect which is a separate tool)
  • —6 A2UI templates — Fixed narrow status type causing unreachable comparisons in KPICard/MetricCard component functions (bank-fee-analysis, budget-vs-actuals, credit-rating-monitor, derivatives-reporting, green-bond-tracker, ma-treasury)
  • —foundation/agent-identity/page.tsx — Changed state="running" → state="active" to match DotState type

Treasury Daily Brief: Flagship Agentic Template

DAN-42TemplatesComponents
  • —Treasury Daily Brief (/a2ui/templates/treasury-daily-brief) — Flagship template exercising the full agentic component stack in a single production-ready layout. Composes all six S3 agentic components: AgentIdentityBadge (card surface, which agent produced the brief), ProvenanceChain (6-source data trail with confidence scores), StreamingResponse (LLM-generated treasury commentary), ApprovalQueue (4 risk-rated actions), AgentConflictPanel (conflict mode: FX Agent vs. Risk Agent on EUR hedge), and ChartInteractionLayer (annotated intraday liquidity chart with comparison bar and three agent annotations). Showpiece template demonstrating why the design system exists.

S3: Token Compliance Audit + Font Floor Fix (DAN-32/35/36)

TokensComponents
  • —Font floor enforcement — Raised all SVG and inline fontSize values below 10px to 10px across 11 finance chart components (AreaChart, BacktestingChart, BenchmarkComparisonChart, DivergingBarChart, GroupedBarChart, HeatmapChart, LearningMultiplierGraph, LineChart, ScatterChart, ScatterPlot, YieldCurveViewer) and 3 agentic pattern components (AgentConflictPanel, AgentIdentityBadge, ChartInteractionLayer)
  • —Token compliance — Replaced color: "#fff" in VaultBoundary.tsx with var(--ds-text-inverse)
  • —chart-tokens.ts — tickTextProps.fontSize raised from 9 to 10

A2UI Finance Sprint HB5: +20 Templates → 121 total (DAN-4 HB5)

TemplatesComponents
  • —Netting Engine (/a2ui/templates/netting-engine) — multilateral net position matrix, settlement instructions, cycle compression
  • —Credit Line Management (/a2ui/templates/credit-line-management) — facility utilization bars, drawdown history, covenant compliance
  • —Custody & Clearing (/a2ui/templates/custody-clearing) — settlement queue, CSD connectivity, fails management, custody positions
  • —FX Overlay Manager (/a2ui/templates/fx-overlay-manager) — currency exposure vs hedge bars, return attribution waterfall, rebalancing triggers
  • —Liquidity Coverage Ratio (/a2ui/templates/liquidity-coverage-ratio) — Basel III HQLA composition, NCO categories, LCR trend chart

Multi-agent Coordination + Data Viz Interaction Components (DAN-29/DAN-30)

TemplatesTokensComponents
  • —Multi-agent conflict resolution panel covering three interaction modes: conflict, delegation, and override
  • —Conflict mode: parallel position display with agent identity, confidence meter, and reasoning trail; human selects winner or forces deferral
  • —Delegation mode: explicit agent assignment or orchestrator hand-off with routing legibility before commit
  • —Override mode: surfaces original agent action verbatim; requires explicit acknowledgement before applying override
  • —Composes AgentIdentityBadge, ProvenanceChain, and ConfidenceMeter

Agentic Component Library: Spec Compliance Pass (DAN-23/25/26/27/28)

TokensComponents
  • —Removed banned fake streaming simulation (setInterval character-by-character reveal)
  • —Now displays content immediately; isStreaming prop drives the cursor/border only
  • —StreamingDot disappears instantly on completion — no border-color transition (DAN-18 spec)
  • —Changed all colors from --ds-color-agency (red) to --ds-color-validation (gold)
  • —"Waiting for human" is an epistemic state, not an authority state (DAN-18 taxonomy)

Gap Fill Sprint: Risk, Payments, Compliance, Reconciliation

DAN-22Components
  • —ES (CVaR) at configurable confidence level with VaR comparison and ES/VaR multiplier
  • —Optional limit utilization bar; absolute loss display when notional provided
  • —Credit rating with agency label and tier color coding (IG=green, sub-IG=caution, distressed=agency red)
  • —Badge and card variants; outlook/watch status display
  • —Historical and hypothetical stress scenarios with impact bars and pass/warn/fail status

Portfolio Domain Gap Components

DAN-21Components
  • —Portfolio vs. benchmark cumulative return comparison with excess return (alpha) badge
  • —Dashed benchmark line vs. solid portfolio line; color-coded excess return display
  • —Fixed-income duration and convexity metrics: modified, effective, Macaulay duration, convexity, DV01
  • —Optional ±100bps rate sensitivity scenario using first/second-order approximation
  • —Par, spot (zero), and forward yield curve on single SVG chart with tenor dots

Finance Sprint: +12 A2UI Templates (DAN-4 Heartbeat 3)

TemplatesTokensDocs
  • —Business unit capital envelope allocation vs. deployed YTD, ROIC tracking with hurdle rate bars
  • —Capital request pipeline with status tracking (approved/pending/rejected)
  • —Per-entity ESG scores with E/S/G sub-score breakdown bars; framework disclosure coverage (GRI, SASB, TCFD, CDP, SFDR)
  • —Emissions stacked bar chart by scope 1/2/3 with YoY trend
  • —SANCTIONS/AML/PEP/FATF screening queue with risk tier badges and rule performance table

Funding & Capital Domain + Shared Finance Primitives (DAN-19 / DAN-20)

TokensComponents
  • —Compact chip for ISIN, CUSIP, SEDOL, FIGI, and RIC instrument identifiers
  • —Standard label + monospace value side-by-side with optional click-to-copy
  • —Type-coded colors: ISIN/CUSIP → temporal, SEDOL/FIGI → validation, RIC → muted
  • —Tenor label chip (ON, TN, 1W, 3M, 1Y, 5Y, 30Y and free-form)
  • —Duration-band color coding: overnight → positive, short → temporal, medium → validation, long → muted

Sankey & Treemap Chart Enhancements

DAN-11TokensComponents
  • —Added density prop ("default" | "compact") — compact reduces node padding and label sizes
  • —Fixed font sizes to meet 10px floor: node labels 11px (compact: 10px), sublabels 10px, flow labels 10px
  • —All colors already token-native — dark/light mode verified
  • —Added density prop ("default" | "compact")
  • —Fixed dynamic font sizes to enforce 10px minimum (Math.max(10, ...) replacing Math.max(8, ...))

Risk Analytics Domain Primitives

DAN-9Components
  • —Semicircular gauge showing VaR limit utilization 0–100%
  • —Four severity tiers: safe → positive | elevated → validation | warning → caution | critical → negative
  • —Threshold tick marks at configurable breakpoints (default: 60% / 80% / 95%)
  • —Shows current value, limit, confidence level, and horizon in footer
  • —Multi-band horizontal bar for counterparty, sector, and concentration limits

FX & Derivatives Domain Primitives

DAN-8TokensComponents
  • —Horizontally scrolling rate ticker for live FX rate display
  • —Continuous loop animation, pause-on-hover, configurable speed
  • —Severity-colored directional change indicators via outcome token system
  • —Designed for top-of-screen or panel header placement
  • —Two modes: predefined pairs list (trading desk) or free-select from full ISO 4217 currency list

A2UI Template Anatomy Standard + Heartbeat 2 Templates (DAN-13/14/15)

TemplatesTokens
  • —5-slot system: header · metric strip (conditional) · tabs · content · footer
  • —Footer canonical structure (left: toggle / center: ← Templates / right: skill tags)
  • —3 layout patterns: table, grid, flow
  • —Data contract shape — naming conventions, status unions, approved mock entities
  • —Agent-context props: AgentRef shape, status semantics, trust chain, token budget display

Full CLAUDE.md Enforcement Pass + Token Alias Fix + Navigation Redesign

TemplatesTokensComponents
  • —apps/nodus-design-system/CLAUDE.md — full design context, token rules, anti-patterns, quality checklist
  • —.claude/rules/design-system.md — auto-loading rules for any file touch in the design system
  • —lib/site-styles.ts — shared style registry (single source of truth for site page styles)
  • —lib/use-staged-reveal.ts — React strict mode safe staged reveal hook
  • —--ds-bg-default → var(--ds-surface-ground)

Finance DS Adoption + Spacing Token Migration + Package Exports

TokensComponents
  • —shared/card-states.tsx — Hand-rolled shimmer keyframes + SkeletonBar replaced with Skeleton; custom error/empty states replaced with EmptyState + Button
  • —StatusBadge.tsx — Standalone <span> badge converted to thin adapter over DS Badge with outcome color overrides via style prop
  • —ThresholdAlert.tsx — Raw <button> action replaced with Button variant="outline"
  • —PaymentTracker, PaymentQueue, ExceptionQueue, RegulatoryReport, ScreeningResultCard, RiskDisclosure — Inline badge <span> elements (8-10 style props each) replaced with Badge component
  • —ConfirmationCard, SanctionsCheck, SurveillanceQueue (compliance) — status/severity/count badges

Test Coverage Expansion + Package Hardening

TokensComponents
  • —DANA-1491: CashFlowTimeline, LiquidityGauge, SettlementLadder, TransactionFeed, CurrencyPair (32 tests)
  • —DANA-1499: CardLoading, CardError, CardEmpty shared states, ThresholdAlert urgency levels, CashPositionCard data/empty/loading/error states, CounterpartyRiskCard score bands (33 tests)
  • —DANA-1500: FXRateCard states + change display, PaymentStatusTracker pipeline/badges/maker-checker, RatioBar meter + threshold marker, TrendBadge direction icons + formatted values (30 tests)
  • —DANA-1492: Table column sort toggle, MultiSelect tag add/remove/clear, MFAInput digit entry + paste, ConfirmModal confirm/cancel callbacks (26 tests)
  • —DANA-1493: CheckboxGroup select/deselect/select-all, Select open/close/keyboard, SegmentedControl switch, Tabs panel switching (24 tests)

Auth & Identity Components + Responsive Infrastructure

TokensComponents
  • —MFAInput — 6/8-digit OTP code entry with auto-advance, arrow key navigation, paste from any digit, countdown timer, shake-on-error animation
  • —PasswordStrength — 4-segment visual meter with requirement checklist, role="meter" ARIA, transition on segment fill and checkmark scale
  • —RoleBadge — Treasury persona badge (analyst, manager, director, controller, compliance_officer) with color-mix() token-derived backgrounds for theme safety
  • —APIKeyDisplay — Masked API key with reveal toggle, copy-to-clipboard with success state, metadata row, revoke action
  • —LoginCard — Full auth form with email/password, password visibility toggle, PasswordStrength integration, SSO provider slots, brand slot, error banner with slide-down animation
NODUS DESIGN SYSTEM · 106 ENTRIESSPRINT RELEASE NOTES →