fix(web): show run provenance badges (#10)

Co-authored-by: 9o6 <3710814+9o6@users.noreply.github.com>

Author: 9o6

web/src/App.tsx

@@ -103,6 +103,11 @@ type QuickDemoResponse = {
   status: string
 }
 
+type RunProvenance = {
+  label: 'Synthetic demo' | 'Observed call' | 'Unknown provenance'
+  tone: 'synthetic' | 'observed' | 'unknown'
+}
+
 const ENVIRONMENT_PROFILES: EnvironmentProfile[] = [
   'local',
   'dev',
@@ -780,7 +785,12 @@ export function App() {
       />
 
       <section className="summaryGrid">
-        <SummaryTile icon={<Database size={18} />} label="Run" value={timeline?.run_id ?? '-'} />
+        <SummaryTile
+          accessory={timeline ? <ProvenanceBadge environment={timeline.environment} /> : null}
+          icon={<Database size={18} />}
+          label="Run"
+          value={timeline?.run_id ?? '-'}
+        />
         <SummaryTile icon={<Database size={18} />} label="Compare" value={compareTimeline?.run_id ?? '-'} />
         <SummaryTile
           icon={<Server size={18} />}
@@ -1120,6 +1130,7 @@ function LinkedCallInspector({
       <div className="sectionHeader compact">
         <Activity size={17} />
         <h2>Call inspector</h2>
+        <ProvenanceBadge environment={timeline.environment} />
         <span className="inspectorCursorReadout">Cursor {formatTimelineTime(cursorMs)}</span>
       </div>
       <p className="panelLead">
@@ -1901,10 +1912,12 @@ function RecentRuns({
 }
 
 function SummaryTile({
+  accessory,
   icon,
   label,
   value,
 }: {
+  accessory?: React.ReactNode
   icon: React.ReactNode
   label: string
   value: React.ReactNode
@@ -1914,10 +1927,23 @@ function SummaryTile({
       <span className="summaryIcon">{icon}</span>
       <span className="summaryLabel">{label}</span>
       <strong>{value}</strong>
+      {accessory ? <span className="summaryAccessory">{accessory}</span> : null}
     </div>
   )
 }
 
+function ProvenanceBadge({ environment }: { environment: RunEnvironmentMetadata }) {
+  const provenance = runProvenance(environment)
+  return (
+    <span
+      aria-label={`Run provenance: ${provenance.label}`}
+      className={`provenanceBadge ${provenance.tone}`}
+    >
+      {provenance.label}
+    </span>
+  )
+}
+
 function StatusPanel({ state, detail }: { state: 'idle' | 'loading' | 'error'; detail?: string }) {
   const copy = {
     idle: ['Ready', 'Enter a run_id'],
@@ -3000,6 +3026,23 @@ function environmentHeadline(environment: RunEnvironmentMetadata) {
   return server ? `${environment.environment_profile} / ${server}` : environment.environment_profile
 }
 
+function runProvenance(environment: RunEnvironmentMetadata): RunProvenance {
+  const tags = new Set(environment.tags.map((tag) => tag.toLowerCase()))
+  if (
+    environment.started_from === 'live-demo-simulated-bridge' ||
+    tags.has('simulated-audio')
+  ) {
+    return { label: 'Synthetic demo', tone: 'synthetic' }
+  }
+  if (
+    environment.started_from?.startsWith('voxbench-audiosocket-') ||
+    tags.has('audiosocket')
+  ) {
+    return { label: 'Observed call', tone: 'observed' }
+  }
+  return { label: 'Unknown provenance', tone: 'unknown' }
+}
+
 function readinessHeadline(summary: ReadinessSummary) {
   if (summary.incomplete_count === 0) {
     return 'ready'

web/src/styles.css

@@ -169,7 +169,8 @@ a {
   grid-template-columns: auto 1fr;
   grid-template-areas:
     "icon label"
-    "icon value";
+    "icon value"
+    "icon accessory";
   column-gap: 10px;
   min-height: 74px;
   padding: 13px;
@@ -178,6 +179,11 @@ a {
   background: #ffffff;
 }
 
+.summaryAccessory {
+  grid-area: accessory;
+  margin-top: 5px;
+}
+
 .summaryIcon {
   grid-area: icon;
   display: inline-flex;
@@ -318,6 +324,35 @@ a {
   margin: 4px 0 10px;
 }
 
+.provenanceBadge {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  max-width: 100%;
+  min-height: 24px;
+  border: 1px solid #a7b3c0;
+  border-radius: 999px;
+  padding: 3px 9px;
+  color: #405064;
+  background: #f3f5f7;
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1.2;
+  white-space: normal;
+}
+
+.provenanceBadge.synthetic {
+  border-color: #d79d3a;
+  color: #704812;
+  background: #fff4d8;
+}
+
+.provenanceBadge.observed {
+  border-color: #4f9b75;
+  color: #1d5c3c;
+  background: #e8f7ee;
+}
+
 .stageStack {
   display: grid;
   gap: 10px;