Skip to content

feat(front): show the decoded Passport on screen (PassportCard, WO-13) - #118

Merged
sergi-torres merged 1 commit into
mainfrom
fix/wo-13-passport-card
Jul 28, 2026
Merged

feat(front): show the decoded Passport on screen (PassportCard, WO-13)#118
sergi-torres merged 1 commit into
mainfrom
fix/wo-13-passport-card

Conversation

@sergi-torres

@sergi-torres sergi-torres commented Jul 28, 2026

Copy link
Copy Markdown
Owner

Base is fix/wo-12-distinctive-vocab, not main. Stacked PR — it shares GenerateStudio.tsx and style-dna.ts with #117.

What

PassportCard component: puts the decoded Passport on screen instead of leaving it as JSON nobody sees.

Why

Closes #94

How IBM Bob helped

  • Custom Mode used: none
  • Bob session export: n/a

Claude Code agents, with ui-ux-pro-max restricted to accessibility verification and docs/design-system.md as the styling authority.

Screenshots / output

UI change: the JWS/ES256-signed Passport becomes readable on screen. This is the deliverable that carries the EU AI Act Art. 50 angle in front of the jury — until now the Passport existed but was never visible.

Checklist

  • Tests pass locally (make test)
  • Lint passes (make lint)
  • If schema changed (StyleProfile / Passport) → bumped version + updated docs/
  • If new env var → added to .env.example
  • If new/changed endpoint → updated docs/api_contract.yaml
  • Documentation in the relevant README.md updated
  • At least one teammate reviewed

Checkboxes deliberately unticked. This is a sibling of #119, not an ancestor: both descend from #117 and they collide with each other in style-dna.ts, page.tsx and GenerateStudio.tsx. Merge this one first and rebase the other.

"Download Passport" wrote the envelope to disk and rendered nothing, so the
demo beat "Generate Passport -> the JSON appears" (docs/MVP.md 01:40) never
happened on screen.

Adds `PassportCard` (design-system §7 inventory, Sprint 2: "Mono JSON block +
Download action"):
- Collapsible `font-mono` block with the decoded `json_payload` (§3 Forensic).
- Starts COLLAPSED: the full payload is long and would push the studio out of
  the viewport, breaking the demo framing (#94 regression risk).
- Discriminated-union props (§7 rule 6): `ready` carries the envelope,
  `unavailable` covers the contract-nullable `GenerateResponse.passport`.
- Tokens only (§7 rule 3): rounded-lg, border-border, bg-card, shadow-paper-sm,
  bg-muted/50. No raw Tailwind colors.
- A11y floor (§7 rule 7): aria-expanded/aria-controls toggle, focusable
  scrollable region with aria-label, visible focus ring, ChevronDown (§6).

The existing Download action is preserved verbatim (same handler, same i18n
copy, same aria-label, same disabled-when-null behaviour) and now lives inside
the card, as §7 specifies.

The equivalent raw-JSON toggle in app/verify/page.tsx is NOT factored out: that
file is outside this work order's allowed file set. The duplication is
deliberate and documented in the component JSDoc.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@vercel

vercel Bot commented Jul 28, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
author-ai Ready Ready Preview, Comment Jul 28, 2026 4:21pm

Base automatically changed from fix/wo-12-distinctive-vocab to main July 28, 2026 16:48
@sergi-torres
sergi-torres merged commit 3f4126d into main Jul 28, 2026
3 checks passed
@sergi-torres
sergi-torres deleted the fix/wo-13-passport-card branch July 28, 2026 16:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[frontend] WO-13 — Mostrar el Passport decodificado en pantalla (componente PassportCard)

1 participant