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

@@ -318,38 +318,47 @@ struct SessionThumbnailView: View {
     let request: SessionThumbnailRequest
     let pipeline: SessionThumbnailPipeline
     @State private var image: SessionThumbnailImage?
+    @Environment(\.accessibilityReduceMotion) private var reduceMotion
 
+    /// 媒体尺寸：宽度锁死在 `SessionThumbnailRenderer.snapshotTargetWidth`（=2×88）
+    /// 的一半，快照 2x 后像素密度足够；非设计 token（缩略图固有尺寸）。
     private enum Metrics {
         static let width: CGFloat = 88
         static let height: CGFloat = 56
-        static let cornerRadius: CGFloat = 6
-        /// 镜像 web 预览卡的暗底（public/preview-grid.ts PREVIEW_THEME）。
-        static let placeholderBackground = Color(
-            red: 14 / 255, green: 15 / 255, blue: 19 / 255
-        )
     }
 
     var body: some View {
-        content
-            .frame(width: Metrics.width, height: Metrics.height)
-            .clipShape(RoundedRectangle(cornerRadius: Metrics.cornerRadius))
-            .accessibilityLabel(SessionThumbnailCopy.thumbnailLabel)
-            .task(id: request.key) {
-                image = await pipeline.thumbnail(for: request)
+        ZStack {
+            placeholder
+            if let snapshot = image?.uiImage {
+                Image(uiImage: snapshot)
+                    .resizable()
+                    .aspectRatio(contentMode: .fill)
+                    .transition(.opacity)
             }
+        }
+        .frame(width: Metrics.width, height: Metrics.height)
+        .clipShape(RoundedRectangle(cornerRadius: DS.Radius.sm8))
+        .overlay(
+            RoundedRectangle(cornerRadius: DS.Radius.sm8)
+                .strokeBorder(DS.Palette.hairline, lineWidth: DS.Stroke.hairline)
+        )
+        // 快照淡入（遵守 Reduce Motion，塌成即时切换）。
+        .animation(DS.Motion.gated(DS.Motion.base, reduceMotion: reduceMotion), value: image)
+        .accessibilityLabel(SessionThumbnailCopy.thumbnailLabel)
+        .task(id: request.key) {
+            image = await pipeline.thumbnail(for: request)
+        }
     }
 
-    @ViewBuilder private var content: some View {
-        if let snapshot = image?.uiImage {
-            Image(uiImage: snapshot)
-                .resizable()
-                .aspectRatio(contentMode: .fill)
-        } else {
-            ZStack {
-                Metrics.placeholderBackground
-                Image(systemName: "terminal")
-                    .foregroundStyle(.secondary)
-            }
+    /// 加载中 / 失败 / 无预览的占位：卡片底 + 发丝边（overlay 提供）+ 终端图标。
+    /// 用 DS 卡片色，不再是硬编码黑块（direction: "not a raw black rect"）。
+    private var placeholder: some View {
+        ZStack {
+            DS.Palette.card
+            Image(systemName: "terminal")
+                .imageScale(.large)
+                .foregroundStyle(DS.Palette.textTertiary)
         }
     }
 }