Polish every product workflow across desktop and mobile

Reframe each screen around the decisions compute brokers make: sellable capacity, full-cost margin, pipeline movement, contract deadlines, evidence review, staged imports, and controlled agent access. Group the shell by operating domain, strengthen mobile navigation and sheets, add responsive record treatments, and make loading, error, empty, readiness, and retry states explicit.

The visual audit exposed sortable table targets and an unnamed file input only after exercising the rendered app, so this commit also pins those accessibility decisions at their actual interaction boundaries. Manrope is self-hosted as a single Latin variable subset to keep the stronger hierarchy without shipping unused font payloads.

apps/web/src/components/SourcedValue.tsx

@@ -1,5 +1,5 @@
 import type { FactBand, FactStatus } from '@pig/core';
-import { ExternalLink, Link2, ScanSearch } from 'lucide-react';
+import { Clock3, ExternalLink, Link2, ScanSearch } from 'lucide-react';
 import type { ReactNode } from 'react';
 import { Badge } from '@/components/ui';
 import {
@@ -66,6 +66,9 @@ export function SourcedValue({ value, fact, className }: SourcedValueProps) {
   const summary = evidenceSummary(fact.evidence);
   const score = Number(fact.score);
   const confidence = Number.isFinite(score) ? `${Math.round(score * 100)}%` : 'Not scored';
+  const observedDate = new Date(fact.observedAt);
+  const observedLabel = Number.isNaN(observedDate.getTime()) ? 'Observation date unavailable' : observedDate.toLocaleDateString(undefined, { dateStyle: 'medium' });
+  const sourceHost = sourceUrl ? new URL(sourceUrl).hostname.replace(/^www\./, '') : null;
 
   return (
     <span className={cn('inline-flex min-w-0 items-center gap-1.5', className)}>
@@ -74,8 +77,8 @@ export function SourcedValue({ value, fact, className }: SourcedValueProps) {
         <PopoverTrigger asChild>
           <button
             type="button"
-            className="tap -m-2 inline-flex shrink-0 items-center justify-center rounded-md p-2 text-accent-fg hover:bg-accent-subtle"
-            aria-label={`View evidence for ${fact.field}`}
+            className="tap -my-2 inline-flex size-11 shrink-0 items-center justify-center rounded-md text-accent-fg hover:bg-accent-subtle"
+            aria-label={`View ${fact.band} evidence for ${fact.field}`}
           >
             <Link2 className="size-3.5" aria-hidden />
           </button>
@@ -88,7 +91,7 @@ export function SourcedValue({ value, fact, className }: SourcedValueProps) {
             <div className="flex min-w-0 items-start justify-between gap-3">
               <div className="min-w-0">
                 <p className="text-xs font-medium uppercase tracking-wide text-muted">
-                  {humanise(fact.field)}
+                  Source evidence · {humanise(fact.field)}
                 </p>
                 <p className="mt-1 break-words text-sm font-medium">{fact.value}</p>
               </div>
@@ -109,6 +112,7 @@ export function SourcedValue({ value, fact, className }: SourcedValueProps) {
               <Badge tone="neutral">{humanise(fact.status)}</Badge>
               {fact.method ? <span>via {humanise(fact.method)}</span> : null}
             </div>
+            <div className="flex items-center gap-2 text-xs text-muted"><Clock3 className="size-3.5 shrink-0" aria-hidden /><span>Observed <time dateTime={fact.observedAt}>{observedLabel}</time></span></div>
             {sourceUrl ? (
               <a
                 href={sourceUrl}
@@ -116,7 +120,7 @@ export function SourcedValue({ value, fact, className }: SourcedValueProps) {
                 rel="noreferrer"
                 className="inline-flex min-h-11 items-center gap-2 break-all text-sm font-medium text-accent-fg hover:underline"
               >
-                Open source
+                Open source{sourceHost ? ` · ${sourceHost}` : ''}
                 <ExternalLink className="size-3.5 shrink-0" aria-hidden />
               </a>
             ) : null}