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/WebTermTests/DesignSystemTests.swift

@@ -0,0 +1,158 @@
+import SwiftUI
+import Testing
+import UIKit
+import WireProtocol
+@testable import WebTerm
+
+/// UX-A · Proves the FROZEN design system: the status mapping is complete and
+/// "color + shape" (never color alone), the token scales are well-formed, and
+/// the adaptive accent resolves distinctly in light vs dark. Pure logic — runs
+/// on both iPhone and iPad sims with no rendering.
+@Suite("DesignSystem")
+struct DesignSystemTests {
+
+    // MARK: - StatusStyle: complete, distinct, color + shape
+
+    @Test("every status maps to a non-empty symbol + Chinese label")
+    func everyStatusHasSymbolAndLabel() {
+        for status in DisplayStatus.allCases {
+            let style = StatusStyle.style(for: status)
+            #expect(!style.symbolName.isEmpty, "\(status) has no symbol")
+            #expect(!style.label.isEmpty, "\(status) has no label")
+        }
+    }
+
+    @Test("status is never color-alone — all seven symbols are distinct")
+    func symbolsAreDistinctAcrossStatuses() {
+        let symbols = DisplayStatus.allCases.map { StatusStyle.style(for: $0).symbolName }
+        #expect(Set(symbols).count == DisplayStatus.allCases.count)
+    }
+
+    @Test("Chinese labels are all distinct")
+    func labelsAreDistinct() {
+        let labels = DisplayStatus.allCases.map { StatusStyle.style(for: $0).label }
+        #expect(Set(labels).count == DisplayStatus.allCases.count)
+    }
+
+    @Test("the critical trio working/waiting/stuck use distinct colors")
+    func criticalColorsAreDistinct() {
+        let working = rgba(StatusStyle.style(for: DisplayStatus.working).color)
+        let waiting = rgba(StatusStyle.style(for: DisplayStatus.waiting).color)
+        let stuck = rgba(StatusStyle.style(for: DisplayStatus.stuck).color)
+        #expect(!approxEqual(working, waiting))
+        #expect(!approxEqual(working, stuck))
+        #expect(!approxEqual(waiting, stuck))
+    }
+
+    @Test("semantic status colors match the direction's hex")
+    func statusColorsMatchDirection() {
+        assertColor(StatusStyle.style(for: DisplayStatus.working).color, r: 52, g: 199, b: 89)   // #34C759
+        assertColor(StatusStyle.style(for: DisplayStatus.waiting).color, r: 255, g: 159, b: 10)  // #FF9F0A
+        assertColor(StatusStyle.style(for: DisplayStatus.stuck).color, r: 255, g: 69, b: 58)     // #FF453A
+    }
+
+    @Test("the wire ClaudeStatus bridge covers all five cases")
+    func wireBridgeCoversEveryCase() {
+        let pairs: [(ClaudeStatus, DisplayStatus)] = [
+            (.working, .working), (.waiting, .waiting), (.idle, .idle),
+            (.stuck, .stuck), (.unknown, .unknown),
+        ]
+        for (wire, expected) in pairs {
+            #expect(DisplayStatus(wire) == expected)
+            #expect(StatusStyle.style(for: wire) == StatusStyle.style(for: expected))
+        }
+    }
+
+    // MARK: - Token scales are well-formed
+
+    @Test("spacing scale is exactly 2·4·8·12·16·20·24 and strictly increasing")
+    func spacingScaleIsMonotonic() {
+        let scale: [CGFloat] = [
+            DS.Space.xs2, DS.Space.xs4, DS.Space.sm8,
+            DS.Space.md12, DS.Space.lg16, DS.Space.xl20, DS.Space.xxl24,
+        ]
+        #expect(scale == [2, 4, 8, 12, 16, 20, 24])
+        #expect(isStrictlyIncreasing(scale))
+    }
+
+    @Test("radius scale is strictly increasing sm8 < md12 < lg16 < pill")
+    func radiusScaleIsMonotonic() {
+        let scale: [CGFloat] = [DS.Radius.sm8, DS.Radius.md12, DS.Radius.lg16, DS.Radius.pill]
+        #expect(scale == [8, 12, 16, 999])
+        #expect(isStrictlyIncreasing(scale))
+    }
+
+    @Test("opacity dimming tokens are within (0, 1)")
+    func opacityTokensAreFractions() {
+        for value in [DS.Opacity.stale, DS.Opacity.exited, DS.Opacity.pressed] {
+            #expect(value > 0 && value < 1)
+        }
+    }
+
+    @Test("minimum hit target meets the 44pt HIG floor")
+    func hitTargetMeetsHIG() {
+        #expect(DS.Layout.minHitTarget >= 44)
+    }
+
+    // MARK: - Motion honors Reduce Motion
+
+    @Test("motion collapses to nil under Reduce Motion, animates otherwise")
+    func motionGating() {
+        #expect(DS.Motion.gated(DS.Motion.base, reduceMotion: true) == nil)
+        #expect(DS.Motion.gated(DS.Motion.base, reduceMotion: false) != nil)
+        #expect(DS.Motion.fastDuration < DS.Motion.baseDuration)
+    }
+
+    // MARK: - Adaptive accent resolves for both schemes
+
+    @Test("accent is defined and distinct in light vs dark")
+    func accentIsAdaptive() {
+        let accent = DS.Palette.accentUIColor()
+        let dark = accent.resolvedColor(with: UITraitCollection(userInterfaceStyle: .dark))
+        let light = accent.resolvedColor(with: UITraitCollection(userInterfaceStyle: .light))
+
+        let darkRGBA = rgba(dark)
+        let lightRGBA = rgba(light)
+        // Both fully opaque, and visibly different between schemes.
+        #expect(darkRGBA.a == 1)
+        #expect(lightRGBA.a == 1)
+        #expect(!approxEqual(darkRGBA, lightRGBA))
+        // On-brand indigo: dark ≈ #7C8CFF, light ≈ #4F5BD5.
+        assertRGBA(darkRGBA, r: 0x7C, g: 0x8C, b: 0xFF)
+        assertRGBA(lightRGBA, r: 0x4F, g: 0x5B, b: 0xD5)
+    }
+
+    // MARK: - Helpers
+
+    private typealias RGBA = (r: CGFloat, g: CGFloat, b: CGFloat, a: CGFloat)
+
+    private func isStrictlyIncreasing(_ values: [CGFloat]) -> Bool {
+        zip(values, values.dropFirst()).allSatisfy { $0 < $1 }
+    }
+
+    private func rgba(_ color: Color) -> RGBA {
+        rgba(UIColor(color))
+    }
+
+    private func rgba(_ color: UIColor) -> RGBA {
+        var r: CGFloat = 0, g: CGFloat = 0, b: CGFloat = 0, a: CGFloat = 0
+        color.getRed(&r, green: &g, blue: &b, alpha: &a)
+        return (r, g, b, a)
+    }
+
+    private func approxEqual(_ lhs: RGBA, _ rhs: RGBA, tolerance: CGFloat = 0.02) -> Bool {
+        abs(lhs.r - rhs.r) < tolerance
+            && abs(lhs.g - rhs.g) < tolerance
+            && abs(lhs.b - rhs.b) < tolerance
+    }
+
+    private func assertColor(_ color: Color, r: Int, g: Int, b: Int) {
+        assertRGBA(rgba(color), r: r, g: g, b: b)
+    }
+
+    private func assertRGBA(_ value: RGBA, r: Int, g: Int, b: Int, tolerance: CGFloat = 0.02) {
+        #expect(abs(value.r - CGFloat(r) / 255) < tolerance)
+        #expect(abs(value.g - CGFloat(g) / 255) < tolerance)
+        #expect(abs(value.b - CGFloat(b) / 255) < tolerance)
+    }
+}