feat(ios): comprehensive iPhone+iPad UX polish — refined-native design system

Freeze a shared design system (DesignSystem/{Tokens,Typography,StatusStyle,
Primitives}.swift): indigo #7C8CFF accent (root .tint), semantic status colors,
2-4-8-12-16-20-24 spacing + sm8/md12/lg16 radii scale, SF Mono tabular numbers,
reduce-motion-gated animations, haptics, reusable StatusBadge/TelemetryChip/Card/
SectionHeader/DSButtonStyle/ContinueLastBanner. Every changed view consumes tokens
— no hardcoded colors/spacing.

Applied across all surfaces (visual only — zero behavior/logic change, all suites
green): session list rows + status system (shape+color, not color-alone) +
telemetry chips + thumbnail placeholders; terminal gate card (≥44pt approve/reject)
+ keybar + reconnect + quick-reply + digest + SwiftTerm accent theme; pairing hero
+ warning tiers + Projects cards + Timeline/Diff; nav chrome + iPad split placeholder
+ privacy shade + motion. Chinese gate copy. UX finding fixed: timeline class colors
now via DS.Palette (+timelineTool/timelineUser tokens).

Design review 8.5/10. Verified: iPhone 16 290 + iPad Pro 11 290 tests green;
packages + integration green; consistency audit ~clean; zero changes under
ios/Packages, src/, public/.

ios/App/WebTerm/Components/TelemetryChips.swift

@@ -71,50 +71,52 @@ struct TelemetryChips: View {
 
     let model: Model
 
+    /// Composed from the frozen `TelemetryChip` primitive — each chip is
+    /// mono-tabular, greys itself out when `isStale`, and the context chip goes
+    /// amber over the warn threshold. The PR chip becomes a tappable `Link`
+    /// only when the VM handed us an https URL (SEC-L5 boundary stays in Model).
     var body: some View {
-        HStack(spacing: Metrics.chipSpacing) {
+        HStack(spacing: DS.Space.xs4) {
             if let contextText = model.contextText {
-                Text(contextText)
-                    .foregroundStyle(model.isContextWarning ? Color.orange : Color.secondary)
+                TelemetryChip(
+                    systemImage: Symbols.context,
+                    text: contextText,
+                    isStale: model.isStale,
+                    isWarning: model.isContextWarning
+                )
             }
             if let costText = model.costText {
-                chip(costText)
+                TelemetryChip(text: costText, isStale: model.isStale)
             }
             if let modelName = model.modelName {
-                chip(modelName)
+                TelemetryChip(
+                    systemImage: Symbols.model, text: modelName, isStale: model.isStale
+                )
             }
             prBadge
         }
-        .font(.caption2.monospacedDigit())
-        .lineLimit(1)
-        .opacity(model.isStale ? Metrics.staleOpacity : 1)
-        .grayscale(model.isStale ? 1 : 0)
     }
 
     @ViewBuilder private var prBadge: some View {
         if let prText = model.prText {
             let label = model.prReviewState.map { "\(prText) · \($0)" } ?? prText
+            let chip = TelemetryChip(
+                systemImage: Symbols.pr, text: label, isStale: model.isStale
+            )
             if let url = model.prURL {
-                Link(label, destination: url)
+                Link(destination: url) { chip }
             } else {
-                chip(label)
+                chip
             }
         }
     }
 
-    private func chip(_ text: String) -> some View {
-        Text(text)
-            .foregroundStyle(.secondary)
-            .padding(.horizontal, Metrics.chipHorizontalPadding)
-            .background(.quaternary, in: Capsule())
-    }
+    // MARK: - Chip icons (SF Symbols, no magic numbers/colors — DS owns those)
 
-    // MARK: - Named constants (no magic numbers, plan §4)
-
-    private enum Metrics {
-        static let chipSpacing: CGFloat = 6
-        static let chipHorizontalPadding: CGFloat = 5
-        static let staleOpacity = 0.45
+    private enum Symbols {
+        static let context = "gauge.medium"
+        static let model = "cpu"
+        static let pr = "arrow.triangle.branch"
     }
 
     private enum Format {