Show clear synthetic-demo and real-call provenance in the Web UI

[engkimo]

Problem

A synthetic three-second diagnostic run and a real AudioSocket call can currently look similar after either one becomes the Primary run. The always-visible diagnostic-demo panel makes it easy to mistake its “3-second” copy for the selected run duration.

Goal

Make run provenance obvious wherever an operator selects or inspects a run.

Suggested scope

• Derive a small display-only provenance label from existing environment metadata and tags.
• Show a prominent Synthetic demo badge for the built-in quick demo.
• Show a distinct Real call or neutral Observed call badge for AudioSocket runs when the existing metadata supports that claim.
• Place the badge near the Primary run summary and Call inspector heading.
• Keep unknown provenance explicit rather than guessing.

Likely files:

• web/src/App.tsx
• web/src/styles.css
• web/src/types.ts only if a local display type is useful

Acceptance criteria

• The built-in three-second demo is visibly labeled Synthetic demo.
• A real AudioSocket run is not labeled synthetic.
• Unknown metadata renders a neutral label and does not claim a real call.
• The badge remains legible on narrow layouts.
• Web production build passes.
• Add a focused test if a Web test harness is introduced; otherwise document manual verification with redacted screenshots.

Out of scope

• Changing persisted run schemas solely for presentation.
• Inferring caller-side playout.
• Redesigning the complete header or timeline.

This is a good first issue because the evidence already exists; the task is a bounded presentation and UX change.