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

@@ -35,11 +35,13 @@ struct GateBanner: View {
     let gate: GateState
     let onDecide: (GateState.Affordance, Int) -> Void
 
+    private enum Copy {
+        /// Chinese lead-in above the (web-mirrored) English tool line — makes the
+        /// "this needs me" intent unmissable at a glance.
+        static let heading = "需要你的确认"
+    }
+
     private enum Metrics {
-        static let spacing: CGFloat = 8
-        static let horizontalPadding: CGFloat = 14
-        static let verticalPadding: CGFloat = 10
-        static let cornerRadius: CGFloat = 12
         static let messageLineLimit = 2
     }
 
@@ -50,38 +52,57 @@ struct GateBanner: View {
         "Claude wants to use \(gate.detail ?? "a tool")"
     }
 
+    /// A prominent Card (the gate is THE core action — approve/reject a shell
+    /// command). An amber "needs me" badge heads it, the tool line reads big and
+    /// clear, and full-width DS buttons give unmissable tap targets.
     var body: some View {
-        VStack(alignment: .leading, spacing: Metrics.spacing) {
-            Text(Self.message(for: gate))
-                .font(.footnote.weight(.semibold))
-                .lineLimit(Metrics.messageLineLimit)
-            HStack(spacing: Metrics.spacing) {
-                ForEach(GateChoiceSpec.specs(for: gate), id: \.affordance) { spec in
-                    decisionButton(spec)
-                }
+        Card {
+            VStack(alignment: .leading, spacing: DS.Space.md12) {
+                header
+                Text(Self.message(for: gate))
+                    .font(DS.Typography.body.weight(.semibold))
+                    .foregroundStyle(DS.Palette.textPrimary)
+                    .lineLimit(Metrics.messageLineLimit)
+                    .fixedSize(horizontal: false, vertical: true)
+                buttonRow
             }
         }
-        .padding(.horizontal, Metrics.horizontalPadding)
-        .padding(.vertical, Metrics.verticalPadding)
-        .background(.thinMaterial, in: RoundedRectangle(cornerRadius: Metrics.cornerRadius))
         .accessibilityElement(children: .contain)
     }
 
+    private var header: some View {
+        HStack(spacing: DS.Space.sm8) {
+            StatusBadge(status: .pendingApproval)
+            Text(Copy.heading)
+                .font(DS.Typography.caption)
+                .foregroundStyle(DS.Palette.textSecondary)
+        }
+    }
+
+    private var buttonRow: some View {
+        HStack(spacing: DS.Space.sm8) {
+            ForEach(GateChoiceSpec.specs(for: gate), id: \.affordance) { spec in
+                decisionButton(spec)
+            }
+        }
+    }
+
     private func decisionButton(_ spec: GateChoiceSpec) -> some View {
         Button(spec.label) {
             onDecide(spec.affordance, gate.epoch) // epoch of the RENDERED gate
         }
+        .buttonStyle(DSButtonStyle(kind: kind(for: spec.affordance)))
         .accessibilityIdentifier("gate.decision.\(spec.affordance)")
-        .buttonStyle(.borderedProminent)
-        .controlSize(.small)
-        .tint(tint(for: spec.affordance))
     }
 
-    private func tint(for affordance: GateState.Affordance) -> Color {
+    /// Approve reads as the accent-filled primary, Reject as the destructive
+    /// red; Keep Planning (never on a tool gate, but mapped for completeness)
+    /// is the tinted secondary.
+    private func kind(for affordance: GateState.Affordance) -> DSButtonStyle.Kind {
         switch affordance {
-        case .approve, .approveAuto, .approveReview: return .green
-        case .reject: return .red
-        case .keepPlanning: return .indigo
+        case .approve, .approveAuto, .approveReview: return .primary
+        case .reject: return .destructive
+        case .keepPlanning: return .secondary
         }
     }
 }