Brand and design · Hi-fi screens · Hi-fi screens

Hi-fi: S21 Feedback · Feedback

Contract, a board per state (full, low-confidence, achieved, playback, exemplar-pending, exemplar-failed, loading, empty, error, offline), tokens and strings.

Generated by botgumi-design index from ../../screens.json. Edit that file, not this page.

Stage: hifi · Key: feedback/feedback · Data-binding map: bindings.md

Drawn in the gallery: Feedback. Each board is the committed HTML in screens/, drawn on the example data in docs/api/examples/.

Contract

  • full: Summary → 4 dimensions (each with evidence) → one action (ink) → evidence → key points → model answer (labelled reference) → helpful?
  • low-confidence: confidence = low: warning banner with confidence_note; a dimension without evidence shows 'not enough evidence' and does not lower the score; one action still shown.
  • achieved: achieved_previous_action = true: 'You did it ✓' banner comes first; the new one-action moves to the next micro-skill.
  • playback: Evidence row tapped: signed audio URL fetched, playback seeks to start_ms and stops at end_ms; row highlighted.
  • exemplar-pending: TTS is async (voice per article language): exemplar.status = pending → skeleton + spinner; poll until ready.
  • exemplar-failed: exemplar.status = failed: text fallback + retry; never blocks the second take.

Flows: F2 Daily quest.

Reads and calls:

  • GET /v1/attempts/{id} → assessment
  • GET /v1/attempts/{id}/exemplar
  • GET /v1/attempts/{id}/audio
  • POST /v1/assessments/{id}/feedback {helpful, reason?}

Local state:

  • local:player.state
  • local:player.positionMs

Boards

One row per state. A state without boards of its own says what shows it.

State Board Example data
full zh-Hans · en assessment-round1.json (zh-Hans · en), assessment-round1-achieved.json (zh-Hans · en), assessment-round1-lowconf.json (zh-Hans · en), exemplar-failed.json (zh-Hans · en), exemplar-pending.json (zh-Hans · en), exemplar-ready.json (zh-Hans · en), article-long.json (zh-Hans · en), article-product.json (zh-Hans · en)
low-confidence zh-Hans · en assessment-round1.json (zh-Hans · en), assessment-round1-achieved.json (zh-Hans · en), assessment-round1-lowconf.json (zh-Hans · en), exemplar-failed.json (zh-Hans · en), exemplar-pending.json (zh-Hans · en), exemplar-ready.json (zh-Hans · en), article-long.json (zh-Hans · en), article-product.json (zh-Hans · en)
achieved zh-Hans · en assessment-round1-achieved.json (zh-Hans · en), exemplar-failed.json (zh-Hans · en), exemplar-pending.json (zh-Hans · en), exemplar-ready.json (zh-Hans · en), article-long.json (zh-Hans · en), article-product.json (zh-Hans · en)
playback zh-Hans · en assessment-round1.json (zh-Hans · en), assessment-round1-achieved.json (zh-Hans · en), assessment-round1-lowconf.json (zh-Hans · en), exemplar-failed.json (zh-Hans · en), exemplar-pending.json (zh-Hans · en), exemplar-ready.json (zh-Hans · en), article-long.json (zh-Hans · en), article-product.json (zh-Hans · en)
exemplar-pending zh-Hans · en assessment-round1.json (zh-Hans · en), assessment-round1-achieved.json (zh-Hans · en), assessment-round1-lowconf.json (zh-Hans · en), exemplar-pending.json (zh-Hans · en), article-long.json (zh-Hans · en), article-product.json (zh-Hans · en)
exemplar-failed zh-Hans · en assessment-round1.json (zh-Hans · en), assessment-round1-achieved.json (zh-Hans · en), assessment-round1-lowconf.json (zh-Hans · en), exemplar-failed.json (zh-Hans · en), article-long.json (zh-Hans · en), article-product.json (zh-Hans · en)
loading no board of its own: From states.md (Feedback): not reachable before assessed
empty no board of its own: From states.md (Feedback): —
error no board of its own: From states.md (Feedback): exemplar feedback--exemplar-failed; audio URL failure → toast · fatal: —
offline no board of its own: From states.md (Feedback): cached assessment; playback & exemplar disabled with "needs network"

The boards

Each state as drawn (393 × 852), one board per locale. Open a board on its own for its spec panel.

full

low-confidence

achieved

playback

exemplar-pending

exemplar-failed

Tokens used

By path in ../../system/tokens.source.json.

Token Where
color.accentPrimary .btn--primary
color.accentPrimaryPressed .btn--primary
color.bandBasic inline
color.bandClear inline
color.bgCanvas .device, .dock, .navbar, .screen
color.bgInverse .one-action, .pbtn, .player
color.bgInverseRaised .icon-btn, .oa-example, .one-action, .skel …
color.bgSunken .btn, .card--sunken, .dim-bar, .dim-row …
color.bgSurface .btn--secondary, .card, .list, inline
color.dimEfficiency inline
color.dimFluency inline
color.dimKeyInfo inline
color.dimStructure inline
color.lineHairline .btn--secondary, .btn--sm, .dim-row, .evidence …
color.lineStrong .btn--secondary, .player, .tag--line, .track
color.reward .oa-head, .one-action, inline
color.statusInfoSoft .banner--info
color.statusSuccess .banner--success, .c-success
color.statusSuccessSoft .banner--success
color.statusWarning .banner--warning, .c-warning
color.statusWarningSoft .banner--warning
color.textDisabled .btn
color.textOnAccent .btn--primary
color.textOnInverse .icon-btn, .oa-example, .one-action, .pbtn …
color.textOnInverseSecondary .c-on-inverse-2
color.textPrimary .banner--info, .banner--success, .banner--warning, .btn--secondary …
color.textSecondary .c-secondary, .tag
color.textTertiary .c-tertiary, .list-row, .score-ring, .step-count …
color.topicViolet .evidence, .is-playing, .ts-chip
color.topicVioletSoft .evidence, .is-playing
radius.button .btn
radius.card .card
radius.lg .one-action
radius.md .card--md, .list
radius.pill .btn--sm
radius.sm .banner, .oa-example, .one-action
radius.xs .tag
space.gutter .dock, .navbar, .pad, .section-head
space.s3 .section-head
space.s5 .card
space.s6 .screen
space.safeBottom .dock, .has-dock, .screen
space.safeTop .device, .screen
space.section .section-head
space.sizeCtaHeight .btn, .has-dock, .screen
space.sizeHitMin .icon-btn
space.sizeNavbarHeight .navbar
space.sizeTabbarHeight .screen
typography.callout .t-callout
typography.caption1 .t-caption
typography.footnote .t-footnote
typography.headline .t-headline
typography.subheadline .t-subhead
typography.title3 .t-title3

Strings

app.name, band.basic, band.clear, common.back, common.retry, common.step_of.a11y, diag.result.ring_label, dimension.efficiency, dimension.fluency, dimension.insufficient, dimension.key_info, dimension.structure, dimension.weights, feedback.achieved, feedback.confidence.high, feedback.confidence.low, feedback.cta, feedback.dims.title, feedback.evidence.hint, feedback.evidence.pause.a11y, feedback.evidence.title, feedback.exemplar.failed, feedback.exemplar.intro, feedback.exemplar.pending, feedback.exemplar.play.a11y, feedback.exemplar.tag, feedback.exemplar.title, feedback.helpful.no.a11y, feedback.helpful.title, feedback.helpful.yes.a11y, feedback.keypoints.count, feedback.keypoints.title, feedback.low_confidence, feedback.meta, feedback.nav, feedback.not_achieved, feedback.one_action.basis, feedback.one_action.listen, feedback.ring_label, home.greeting.format, home.quest.focus.last, micro.conclusion_first, micro.three_points, notif.daily.title, onboarding.progress.a11y, paywall.calendar.rest, paywall.projection.score, processing.nav.round1

Notes for the app tracks

Motion, haptics, Dynamic Type and VoiceOver: engagement.md, tokens.md §6–7 and ios-handoff.md. Open a board with ?theme=dark&dt=1.35&binds=1 to see dark mode, the largest tested type size and every bound element.

Tracking-plan events: no tracking plan page exists yet; ADR-001 D12 names the events.

Tokens with no group in system/tokens.source.json yet (they stay in tokens.css): --dt, --elevation-1, --elevation-2, --fill, --font-family-numeric, --font-family-reading, --font-family-text, --font-weight-bold, --font-weight-medium, --font-weight-regular, --font-weight-semibold, --motion-duration-countup, --motion-duration-fast, --motion-duration-instant, --motion-duration-slow, --motion-ease-emphasized, --motion-ease-standard.