# Threema UX v3 — three real fixes

## What this fixes vs v2

| # | Issue | Fix |
|---|-------|-----|
| 1 | QR image 404'd as `GET /en/threema/qr_code_AIAGENT.png` | Middleware matcher now excludes paths with file extensions, so static files in `public/` are not locale-prefixed |
| 2 | Displayed gateway name as `AIAGENT` (without asterisk) | `displayName` is now `*AIAGENT` (with asterisk) — what users actually see in their Threema contacts |
| 3 | "Show QR" hyperlink — too small, unclear what it does | Replaced with a proper accent-bordered info banner: icon + title + body explaining what to do + prominent "Show QR code" button |

## Files

```
src/middleware.ts                                       # MODIFIED — matcher excludes dot-paths (static files)
src/lib/threema-gateway-config.ts                       # MODIFIED — displayName: "*AIAGENT"
src/components/channel-users/channel-users.tsx          # MODIFIED — banner replaces inline hyperlink
src/components/channel-users/threema-qr-modal.tsx       # UNCHANGED from v2 (label now reads "*AIAGENT" automatically via config)
deploy/patch-i18n-threema.mjs                           # MODIFIED — new bannerTitle/bannerBody/bannerButton keys, showQr dropped
public/threema/qr_code_AIAGENT.png                      # UNCHANGED
```

## Apply

```bash
cd /path/to/pieced-portal

unzip -o /path/to/threema-ux-v3.zip
node deploy/patch-i18n-threema.mjs
npx tsc --noEmit
git add -A
git status   # eyeball
git commit -m "Threema UX: middleware static fix, *AIAGENT display, info banner"
git push
```

## Layout after redeploy

```
┌─────────────────────────────────────────────────────────┐
│ threema                                       2 users   │
├─────────────────────────────────────────────────────────┤
│ ╔═══════════════════════════════════════════════════════╗│
│ ║ [icon]  Set up Threema           [ Show QR code ]    ║│ ← prominent banner, accent border
│ ║         Open Threema on your phone and scan our      ║│
│ ║         QR code to add the assistant as a contact.   ║│
│ ║         Then add your own Threema ID below.          ║│
│ ╚═══════════════════════════════════════════════════════╝│
├─────────────────────────────────────────────────────────┤
│ <help: "Enter your own Threema ID...">                  │
│ ┌───────┐ ┌───────┐                                     │
│ │USER01 ✕│ │USER02 ✕│                                   │
│ └───────┘ └───────┘                                     │
│ [ A8K2P3X7        ] [ Add ]                             │
└─────────────────────────────────────────────────────────┘
```

The banner is always visible whenever the threema channel is enabled.
Clicking "Show QR code" opens the modal with the QR and 3-step
instructions. ESC, overlay click, or × button closes.

Auto-open on first focus of the add-ID input is preserved from v2 —
the modal pops once when a customer clicks into the input to add their
first ID, so a brand-new customer who skipped the banner still gets
the QR right when they need it.

## Verification

After redeploy:

1. Open `https://app.pieced.ch/en/tenants/acme-gmbh-2acf4612` in the browser.
2. Scroll to the **Authorized Users → threema** card.
3. Visible banner with icon, title "Set up Threema", body text, and a
   clearly clickable "Show QR code" button on the right.
4. Click the button → modal with the QR shows.
5. The label under the QR reads `*AIAGENT` (with asterisk).
6. Browser DevTools → Network → `GET /threema/qr_code_AIAGENT.png` is
   `200`, not `404`, and not redirected to `/en/threema/...`.