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/ReconnectBanner.swift

@@ -25,42 +25,50 @@ struct ReconnectBanner: View {
     /// asks the user to change a knob first, not to spawn again.
     var onNewSession: (@MainActor () -> Void)? = nil
 
-    private enum Metrics {
-        static let contentSpacing: CGFloat = 8
-        static let horizontalPadding: CGFloat = 14
-        static let verticalPadding: CGFloat = 8
-        static let backgroundOpacity = 0.9
-    }
-
     private enum Copy {
         static let newSession = "开新会话"
     }
 
+    /// 精致原生：材质胶囊 + 发丝描边，状态只由前导指示色（+ 图标形状）表达，
+    /// 而非整块告警底色 —— 重连读作「安静的进行中」，不惊扰（GROUP BRIEF）。
     var body: some View {
-        HStack(spacing: Metrics.contentSpacing) {
-            if isSpinning {
-                ProgressView()
-                    .controlSize(.small)
-            } else {
-                Image(systemName: iconName)
-            }
+        HStack(spacing: DS.Space.sm8) {
+            leadingIndicator
             Text(text)
-                .font(.footnote)
+                .font(DS.Typography.callout)
+                .foregroundStyle(DS.Palette.textPrimary)
                 .multilineTextAlignment(.leading)
             if let onNewSession, Self.isNewSessionActionAvailable(for: model) {
                 Button(Copy.newSession) { onNewSession() }
-                    .font(.footnote.bold())
+                    .font(DS.Typography.callout.weight(.semibold))
+                    .foregroundStyle(DS.Palette.accent)
                     .buttonStyle(.plain)
                     .accessibilityIdentifier("terminal.exitNewSessionButton")
             }
         }
-        .padding(.horizontal, Metrics.horizontalPadding)
-        .padding(.vertical, Metrics.verticalPadding)
-        .background(tint.opacity(Metrics.backgroundOpacity), in: Capsule())
-        .foregroundStyle(.white)
+        .padding(.horizontal, DS.Space.lg16)
+        .padding(.vertical, DS.Space.sm8)
+        .background(.regularMaterial, in: Capsule())
+        .overlay(
+            Capsule().strokeBorder(DS.Palette.hairline, lineWidth: DS.Stroke.hairline)
+        )
         .accessibilityElement(children: .combine)
     }
 
+    /// Spinner while a connection is in flight, otherwise the state's icon —
+    /// both painted in the semantic indicator color (shape + color, never color
+    /// alone).
+    @ViewBuilder private var leadingIndicator: some View {
+        if isSpinning {
+            ProgressView()
+                .controlSize(.small)
+                .tint(indicatorColor)
+        } else {
+            Image(systemName: iconName)
+                .foregroundStyle(indicatorColor)
+        }
+    }
+
     /// The new-session affordance appears on the `.exited` banner only —
     /// pure predicate so the T-iOS-29 tests pin the rule.
     static func isNewSessionActionAvailable(for model: Model) -> Bool {
@@ -83,12 +91,15 @@ struct ReconnectBanner: View {
         }
     }
 
-    private var tint: Color {
+    /// Semantic indicator color (DS only): connecting is quiet gray, reconnecting
+    /// is the calm accent (not an orange alarm), failed is the stuck red, exited
+    /// is dimmed secondary. Paired with a distinct icon so it is never color-only.
+    private var indicatorColor: Color {
         switch model {
-        case .connecting: return .gray
-        case .reconnecting: return .orange
-        case .failed: return .red
-        case .exited: return .indigo
+        case .connecting: return DS.Palette.textSecondary
+        case .reconnecting: return DS.Palette.accent
+        case .failed: return DS.Palette.statusStuck
+        case .exited: return DS.Palette.statusExited
         }
     }