57a09c31dd
Three new primitives — every product chat / agent surface should
adopt these to make the model honest about what it is doing.
──────────────────────────────────────────────────────────────────
<CostMeter> · Wave 13.C.1
──────────────────────────────────────────────────────────────────
packages/ai-ui/src/CostMeter.tsx (new)
- Live token + (optional) USD readout
- 4 tiers: neutral (no budget) · ok (<70 %) · warn (>=70 %) ·
danger (>=95 %) — token-tinted via color-mix() so all four
palettes degrade gracefully on browsers without var() support
- NaN-safe — non-finite / negative inputs floor to 0
- role=status + aria-live=polite + aria-label assembles a
screen-reader-friendly sentence
- Mini-bar visual indicator at the end of the pill when budget
is provided
- Pure passive surface — never warns / prompts / blocks
──────────────────────────────────────────────────────────────────
<ConfidenceTag> · Wave 13.C.2
──────────────────────────────────────────────────────────────────
packages/ai-ui/src/ConfidenceTag.tsx (new)
- Accepts `number | 'high' | 'medium' | 'low' | 'unknown'`
- Default thresholds 0.8 / 0.5 — both overridable
- Out-of-range numerics map to `unknown` (no false confidence)
- Optional `showScore` renders a tabular-nums percent suffix
- 4 token-tinted palettes (success / warning / danger /
neutral) — pair naturally with <CitationChip> for the full
'show your work' story
──────────────────────────────────────────────────────────────────
<RefusalCard> · Wave 13.C.3
──────────────────────────────────────────────────────────────────
packages/ai-ui/src/RefusalCard.tsx (new)
- 6 reason archetypes — safety / policy / capability /
authorization / rate-limit / unknown — each with a typed
heading + glyph
- Calm warning palette (never red) — refusals are not errors
- Up to 3 actionable next steps (further entries silently
clipped) — one is markable `primary` to render as filled CTA
- Optional `footer` slot for policy doc links
- role=note + composite aria-label covering heading +
explanation
──────────────────────────────────────────────────────────────────
Quality gates
──────────────────────────────────────────────────────────────────
✓ pnpm -F @bytelyst/ai-ui test → 67/67 passing (was 53/53)
+14 new trust-surface tests in src/__tests__/trust.test.tsx
✓ Exports wired in src/index.ts under '0.5 surfaces' section
✓ package.json 0.4.0 → 0.5.0
──────────────────────────────────────────────────────────────────
Roadmap tracker — 5 boxes flipped (§11)
──────────────────────────────────────────────────────────────────
13.C.1 CostMeter shipped
13.C.2 ConfidenceTag shipped
13.C.3 RefusalCard shipped
13.C.7 trust-surfaces showcase (lands in paired showcase commit)
MAG.3 the trust-surfaces customer-magnet ✨
Wave 13 Futurism: 5/39 → 9/39 (23%)
Magnet demos: 1/8 → 2/8 (25%)
TOTAL: 19/202 → 24/202 (12%)
Vendored snapshot + showcase /ai-ui/* + /futurism/trust-surfaces
routes land in the paired showcase commit.
Pending in 13.C: ProvenanceDrawer (.4) · DebugOverlay (.5) ·
PrivacyBadge (.6).
37 lines
885 B
JSON
37 lines
885 B
JSON
{
|
|
"name": "@bytelyst/ai-ui",
|
|
"version": "0.5.0",
|
|
"type": "module",
|
|
"description": "AI-native UI primitives — ChatStream, MessageBubble, PromptComposer, useChat. Transport-agnostic; adopts Vercel AI SDK hook shape.",
|
|
"exports": {
|
|
".": {
|
|
"import": "./dist/index.js",
|
|
"types": "./dist/index.d.ts"
|
|
}
|
|
},
|
|
"main": "./dist/index.js",
|
|
"types": "./dist/index.d.ts",
|
|
"files": [
|
|
"dist"
|
|
],
|
|
"scripts": {
|
|
"build": "tsc",
|
|
"test": "vitest run --pool forks",
|
|
"typecheck": "tsc --noEmit"
|
|
},
|
|
"peerDependencies": {
|
|
"react": ">=18.0.0",
|
|
"react-dom": ">=18.0.0"
|
|
},
|
|
"devDependencies": {
|
|
"@testing-library/react": "^16.3.2",
|
|
"@types/react": "^19.2.14",
|
|
"@types/react-dom": "^19.2.3",
|
|
"happy-dom": "^18.0.1",
|
|
"react": "^19.2.4",
|
|
"react-dom": "^19.2.4",
|
|
"typescript": "^5.7.3",
|
|
"vitest": "^4.0.18"
|
|
}
|
|
}
|