@wangyaoshen/remux 0.3.8-dev.a8ceb0c

package/apps/ios/Sources/Remux/MainTabView.swift

@@ -0,0 +1,32 @@
+import SwiftUI
+import RemuxKit
+
+/// Main 5-tab navigation: Now / Inspect / Live / Control / Me
+struct MainTabView: View {
+    @Environment(RemuxState.self) private var state
+    @State private var selectedTab = 0
+
+    var body: some View {
+        TabView(selection: $selectedTab) {
+            NowView()
+                .tabItem { Label("Now", systemImage: "house.fill") }
+                .tag(0)
+
+            InspectView()
+                .tabItem { Label("Inspect", systemImage: "doc.text.magnifyingglass") }
+                .tag(1)
+
+            LiveTerminalView()
+                .tabItem { Label("Live", systemImage: "terminal.fill") }
+                .tag(2)
+
+            ControlView()
+                .tabItem { Label("Control", systemImage: "slider.horizontal.3") }
+                .tag(3)
+
+            MeView()
+                .tabItem { Label("Me", systemImage: "person.fill") }
+                .tag(4)
+        }
+    }
+}

package/apps/ios/Sources/Remux/Remux.entitlements

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>aps-environment</key>
+	<string>development</string>
+</dict>
+</plist>

package/apps/ios/Sources/Remux/RemuxiOSApp.swift

@@ -0,0 +1,14 @@
+import SwiftUI
+import RemuxKit
+
+@main
+struct RemuxiOSApp: App {
+    @State private var state = RemuxState()
+
+    var body: some Scene {
+        WindowGroup {
+            RootView()
+                .environment(state)
+        }
+    }
+}

package/apps/ios/Sources/Remux/RootView.swift

@@ -0,0 +1,130 @@
+import SwiftUI
+import RemuxKit
+
+/// Root view: onboarding → Face ID → main app.
+/// iPad uses NavigationSplitView, iPhone uses TabView.
+struct RootView: View {
+    @Environment(RemuxState.self) private var state
+    @Environment(\.horizontalSizeClass) private var sizeClass
+    @State private var isLocked = true
+    @State private var faceIdManager = FaceIDManager()
+    private let keychain = KeychainStore()
+
+    var body: some View {
+        Group {
+            if isLocked {
+                LockedView { unlock() }
+            } else if case .connected = state.connectionStatus {
+                adaptiveMainView
+            } else if case .reconnecting = state.connectionStatus {
+                adaptiveMainView
+                    .overlay(ReconnectingBanner())
+            } else {
+                OnboardingView()
+            }
+        }
+        .onAppear {
+            Task { await checkAuth() }
+        }
+        .onChange(of: state.connectionStatus) { _, newStatus in
+            if case .disconnected = newStatus,
+               let snapshot = state.inspectSnapshot,
+               let server = state.serverURL?.absoluteString {
+                Task {
+                    await InspectCache.shared.save(
+                        snapshot: snapshot, server: server, tabIndex: state.activeTabIndex
+                    )
+                }
+            }
+        }
+    }
+
+    @ViewBuilder
+    private var adaptiveMainView: some View {
+        if sizeClass == .regular {
+            iPadLayout
+        } else {
+            MainTabView()
+        }
+    }
+
+    /// iPad multi-column: sidebar (tabs) + terminal + inspect
+    private var iPadLayout: some View {
+        NavigationSplitView {
+            List {
+                Section("Session: \(state.currentSession)") {
+                    ForEach(state.tabs, id: \.index) { tab in
+                        Button {
+                            if let pane = tab.panes.first { state.switchTab(id: pane.id) }
+                        } label: {
+                            HStack {
+                                Image(systemName: tab.active ? "terminal.fill" : "terminal")
+                                Text(tab.name)
+                                Spacer()
+                                if tab.hasBell { Circle().fill(.red).frame(width: 6, height: 6) }
+                            }
+                        }
+                    }
+                }
+                Section {
+                    Button { state.createTab() } label: {
+                        Label("New Tab", systemImage: "plus")
+                    }
+                }
+            }
+            .navigationTitle("Remux")
+        } content: {
+            LiveTerminalView()
+        } detail: {
+            InspectView()
+        }
+    }
+
+    private func checkAuth() async {
+        let authed = await faceIdManager.authenticateIfNeeded()
+        isLocked = !authed
+        if authed { tryAutoConnect() }
+    }
+
+    private func unlock() {
+        Task {
+            let authed = await faceIdManager.authenticateIfNeeded()
+            if authed { isLocked = false; tryAutoConnect() }
+        }
+    }
+
+    private func tryAutoConnect() {
+        let servers = keychain.savedServers()
+        if let server = servers.first,
+           let token = keychain.loadResumeToken(forServer: server) ?? keychain.loadServerToken(forServer: server),
+           let url = URL(string: server) {
+            state.connect(url: url, credential: .token(token))
+        }
+    }
+}
+
+struct LockedView: View {
+    let onUnlock: () -> Void
+    var body: some View {
+        VStack(spacing: 20) {
+            Image(systemName: "lock.fill").font(.system(size: 48)).foregroundStyle(.secondary)
+            Text("Remux is Locked").font(.title2)
+            Button("Unlock with Face ID") { onUnlock() }
+                .buttonStyle(.borderedProminent)
+        }
+    }
+}
+
+struct ReconnectingBanner: View {
+    var body: some View {
+        VStack {
+            HStack {
+                ProgressView().scaleEffect(0.8)
+                Text("Reconnecting...").font(.caption).foregroundStyle(.secondary)
+            }
+            .padding(8).background(.ultraThinMaterial).cornerRadius(8)
+            Spacer()
+        }
+        .padding(.top, 8)
+    }
+}

package/apps/ios/Sources/Remux/Views/Control/ControlView.swift

@@ -0,0 +1,102 @@
+import SwiftUI
+import RemuxKit
+
+/// Control tab: session/tab management with swipe actions.
+struct ControlView: View {
+    @Environment(RemuxState.self) private var state
+    @State private var showNewSession = false
+
+    var body: some View {
+        NavigationStack {
+            List {
+                sessionSection
+                tabsSection
+                actionsSection
+            }
+            .navigationTitle("Control")
+            .alert("New Session", isPresented: $showNewSession) {
+                Button("Create") {
+                    state.createSession(name: "session-\(Int.random(in: 1000...9999))")
+                }
+                Button("Cancel", role: .cancel) {}
+            }
+        }
+    }
+
+    private var sessionSection: some View {
+        Section("Session") {
+            HStack {
+                Image(systemName: "server.rack")
+                Text(state.currentSession)
+                    .font(.headline)
+                Spacer()
+            }
+        }
+    }
+
+    private var tabsSection: some View {
+        Section("Tabs (\(state.tabs.count))") {
+            ForEach(state.tabs, id: \.index) { tab in
+                TabRow(tab: tab, isActive: tab.index == state.activeTabIndex)
+                    .contentShape(Rectangle())
+                    .onTapGesture {
+                        if let pane = tab.panes.first {
+                            state.switchTab(id: pane.id)
+                        }
+                    }
+                    .swipeActions(edge: .trailing) {
+                        Button(role: .destructive) {
+                            if let pane = tab.panes.first {
+                                state.closeTab(id: pane.id)
+                            }
+                        } label: {
+                            Label("Close", systemImage: "xmark")
+                        }
+                    }
+            }
+        }
+    }
+
+    private var actionsSection: some View {
+        Section {
+            Button(action: { state.createTab() }) {
+                Label("New Tab", systemImage: "plus")
+            }
+            Button(action: { showNewSession = true }) {
+                Label("New Session", systemImage: "plus.rectangle.on.folder")
+            }
+        }
+    }
+}
+
+struct TabRow: View {
+    let tab: WorkspaceTab
+    let isActive: Bool
+
+    var body: some View {
+        HStack {
+            Image(systemName: isActive ? "terminal.fill" : "terminal")
+                .foregroundStyle(isActive ? Color.accentColor : Color.secondary)
+            VStack(alignment: .leading) {
+                Text(tab.name)
+                if let pane = tab.panes.first {
+                    Text("\(pane.cols)×\(pane.rows)")
+                        .font(.caption)
+                        .foregroundStyle(.tertiary)
+                }
+            }
+            Spacer()
+            if isActive {
+                Text("Active")
+                    .font(.caption2)
+                    .padding(.horizontal, 6)
+                    .padding(.vertical, 2)
+                    .background(.tint.opacity(0.15))
+                    .cornerRadius(4)
+            }
+            if tab.hasBell {
+                Circle().fill(.red).frame(width: 6, height: 6)
+            }
+        }
+    }
+}

package/apps/ios/Sources/Remux/Views/Inspect/InspectView.swift

@@ -0,0 +1,98 @@
+import SwiftUI
+import RemuxKit
+
+/// Inspect tab: readable terminal content with badges, search, pagination.
+struct InspectView: View {
+    @Environment(RemuxState.self) private var state
+    @State private var searchQuery = ""
+
+    var body: some View {
+        NavigationStack {
+            VStack(spacing: 0) {
+                // Tab selector
+                ScrollView(.horizontal, showsIndicators: false) {
+                    HStack(spacing: 8) {
+                        ForEach(state.tabs, id: \.index) { tab in
+                            Button {
+                                state.requestInspect(tabIndex: tab.index)
+                            } label: {
+                                Text(tab.name)
+                                    .font(.caption)
+                                    .padding(.horizontal, 12)
+                                    .padding(.vertical, 6)
+                                    .background(tab.index == state.activeTabIndex ? Color.accentColor : Color.secondary.opacity(0.15))
+                                    .foregroundStyle(tab.index == state.activeTabIndex ? .white : .primary)
+                                    .cornerRadius(16)
+                            }
+                            .buttonStyle(.plain)
+                        }
+                    }
+                    .padding(.horizontal)
+                    .padding(.vertical, 8)
+                }
+
+                // Descriptor badges
+                if let snapshot = state.inspectSnapshot {
+                    HStack(spacing: 6) {
+                        Badge(text: snapshot.descriptor.source, color: .blue)
+                        Badge(text: snapshot.descriptor.precision, color: snapshot.descriptor.precision == "precise" ? .green : .yellow)
+                        Badge(text: snapshot.descriptor.staleness, color: snapshot.descriptor.staleness == "fresh" ? .green : .orange)
+                        Spacer()
+                        Text(snapshot.descriptor.capturedAt.prefix(19).replacingOccurrences(of: "T", with: " "))
+                            .font(.caption2)
+                            .foregroundStyle(.tertiary)
+                    }
+                    .padding(.horizontal)
+                    .padding(.bottom, 4)
+                }
+
+                Divider()
+
+                // Content
+                if let snapshot = state.inspectSnapshot {
+                    List {
+                        ForEach(Array(snapshot.items.enumerated()), id: \.offset) { _, item in
+                            Text(item.content)
+                                .font(.system(.caption, design: .monospaced))
+                                .foregroundStyle(item.type == "output" ? .primary : .secondary)
+                                .listRowInsets(EdgeInsets(top: 1, leading: 12, bottom: 1, trailing: 12))
+                        }
+                    }
+                    .listStyle(.plain)
+                } else {
+                    ContentUnavailableView(
+                        "No Inspect Data",
+                        systemImage: "doc.text",
+                        description: Text("Pull to refresh or switch tabs above.")
+                    )
+                }
+            }
+            .navigationTitle("Inspect")
+            .searchable(text: $searchQuery, prompt: "Search terminal content")
+            .onSubmit(of: .search) {
+                state.requestInspect(tabIndex: state.activeTabIndex, query: searchQuery.isEmpty ? nil : searchQuery)
+            }
+            .refreshable {
+                state.requestInspect(tabIndex: state.activeTabIndex, query: searchQuery.isEmpty ? nil : searchQuery)
+            }
+            .onAppear {
+                state.requestInspect(tabIndex: state.activeTabIndex)
+            }
+        }
+    }
+}
+
+struct Badge: View {
+    let text: String
+    let color: Color
+
+    var body: some View {
+        Text(text)
+            .font(.system(size: 10))
+            .padding(.horizontal, 6)
+            .padding(.vertical, 2)
+            .background(color.opacity(0.15))
+            .foregroundStyle(color)
+            .cornerRadius(4)
+    }
+}

package/apps/ios/Sources/Remux/Views/Live/LiveTerminalView.swift

@@ -0,0 +1,132 @@
+import SwiftUI
+import RemuxKit
+
+/// Live terminal tab: full-screen ghostty-web terminal via WKWebView.
+struct LiveTerminalView: View {
+    @Environment(RemuxState.self) private var state
+    @State private var bridge: GhosttyBridge?
+    @State private var showKeyboardAccessory = true
+
+    var body: some View {
+        ZStack {
+            // Terminal
+            if let bridge {
+                GhosttyTerminalView(bridge: bridge)
+                    .ignoresSafeArea(.keyboard)
+                    .onReceive(NotificationCenter.default.publisher(for: .remuxTerminalData)) { notification in
+                        if let data = notification.userInfo?["data"] as? Data {
+                            bridge.writeToTerminal(data: data)
+                        }
+                    }
+            }
+
+            // Connection status overlay
+            if case .disconnected = state.connectionStatus {
+                Color.black.opacity(0.7)
+                    .ignoresSafeArea()
+                VStack {
+                    Image(systemName: "wifi.slash")
+                        .font(.largeTitle)
+                        .foregroundStyle(.white)
+                    Text("Disconnected")
+                        .foregroundStyle(.white)
+                }
+            }
+        }
+        .safeAreaInset(edge: .bottom) {
+            if showKeyboardAccessory {
+                TerminalKeyboardAccessory(bridge: bridge)
+            }
+        }
+        .onAppear { setupBridge() }
+        .navigationBarHidden(true)
+    }
+
+    private func setupBridge() {
+        let b = GhosttyBridge()
+        b.onInput = { input in
+            if let data = input.data(using: .utf8) {
+                state.sendTerminalData(data)
+            }
+        }
+        b.onResize = { cols, rows in
+            state.sendJSON(["type": "resize", "cols": cols, "rows": rows])
+        }
+        b.onReady = {
+            // Terminal initialized — attach to current tab
+        }
+        b.onBell = {
+            UIImpactFeedbackGenerator(style: .heavy).impactOccurred()
+        }
+        bridge = b
+    }
+}
+
+/// Keyboard accessory bar with Esc, Tab, Ctrl, arrows.
+/// Design ref: Termius / Blink terminal keyboard accessory.
+struct TerminalKeyboardAccessory: View {
+    let bridge: GhosttyBridge?
+    @State private var ctrlActive = false
+
+    var body: some View {
+        ScrollView(.horizontal, showsIndicators: false) {
+            HStack(spacing: 8) {
+                AccessoryButton("Esc") { send("\u{1b}") }
+                AccessoryButton("Tab") { send("\t") }
+
+                AccessoryButton(ctrlActive ? "Ctrl ●" : "Ctrl") {
+                    ctrlActive.toggle()
+                }
+
+                Divider().frame(height: 20)
+
+                AccessoryButton("↑") { send("\u{1b}[A") }
+                AccessoryButton("↓") { send("\u{1b}[B") }
+                AccessoryButton("←") { send("\u{1b}[D") }
+                AccessoryButton("→") { send("\u{1b}[C") }
+
+                Divider().frame(height: 20)
+
+                AccessoryButton("Ctrl+C") { send("\u{03}") }
+                AccessoryButton("Ctrl+D") { send("\u{04}") }
+                AccessoryButton("Ctrl+Z") { send("\u{1a}") }
+            }
+            .padding(.horizontal, 8)
+            .padding(.vertical, 4)
+        }
+        .background(.bar)
+    }
+
+    private func send(_ text: String) {
+        if ctrlActive, text.count == 1, let ascii = text.first?.asciiValue {
+            // Ctrl+key: send control character (ascii - 64)
+            let ctrl = Character(UnicodeScalar(ascii &- 64))
+            bridge?.writeString(String(ctrl))
+            ctrlActive = false
+        } else {
+            bridge?.writeString(text)
+        }
+    }
+}
+
+struct AccessoryButton: View {
+    let title: String
+    let action: () -> Void
+
+    init(_ title: String, action: @escaping () -> Void) {
+        self.title = title
+        self.action = action
+    }
+
+    var body: some View {
+        Button(action: action) {
+            Text(title)
+                .font(.system(size: 13, weight: .medium, design: .monospaced))
+                .padding(.horizontal, 10)
+                .padding(.vertical, 6)
+                .background(.quaternary)
+                .cornerRadius(6)
+        }
+        .buttonStyle(.plain)
+    }
+}

package/apps/ios/Sources/Remux/Views/Now/NowView.swift

@@ -0,0 +1,173 @@
+import SwiftUI
+import RemuxKit
+
+/// Now tab: shows current status, active session, recent activity.
+/// Design ref: hapi's Now first screen — focus on the 3 most important things.
+struct NowView: View {
+    @Environment(RemuxState.self) private var state
+
+    var body: some View {
+        NavigationStack {
+            ScrollView {
+                VStack(spacing: 16) {
+                    // Connection status card
+                    ConnectionStatusCard()
+
+                    // Active session card
+                    if !state.currentSession.isEmpty {
+                        SessionCard(
+                            sessionName: state.currentSession,
+                            tabCount: state.tabs.count,
+                            activeTab: state.tabs.first { $0.index == state.activeTabIndex }
+                        )
+                    }
+
+                    // Client role
+                    HStack {
+                        Image(systemName: state.clientRole == "active" ? "hand.raised.fill" : "eye.fill")
+                        Text(state.clientRole == "active" ? "Active" : "Observer")
+                            .font(.subheadline)
+                        Spacer()
+                        if state.clientRole == "observer" {
+                            Button("Request Control") {
+                                state.requestControl()
+                            }
+                            .buttonStyle(.bordered)
+                            .controlSize(.small)
+                        }
+                    }
+                    .padding()
+                    .background(.regularMaterial)
+                    .cornerRadius(12)
+
+                    // Quick actions
+                    QuickActionsSection()
+                }
+                .padding()
+            }
+            .navigationTitle("Now")
+            .refreshable {
+                state.requestInspect(tabIndex: state.activeTabIndex)
+            }
+        }
+    }
+}
+
+struct ConnectionStatusCard: View {
+    @Environment(RemuxState.self) private var state
+
+    var body: some View {
+        HStack {
+            Circle()
+                .fill(statusColor)
+                .frame(width: 10, height: 10)
+            Text(statusText)
+                .font(.subheadline.bold())
+            Spacer()
+            if let url = state.serverURL {
+                Text(url.host ?? "")
+                    .font(.caption)
+                    .foregroundStyle(.secondary)
+            }
+        }
+        .padding()
+        .background(.regularMaterial)
+        .cornerRadius(12)
+    }
+
+    private var statusColor: Color {
+        switch state.connectionStatus {
+        case .connected: .green
+        case .reconnecting: .yellow
+        case .connecting, .authenticating: .orange
+        case .disconnected: .red
+        }
+    }
+
+    private var statusText: String {
+        switch state.connectionStatus {
+        case .connected: "Connected"
+        case .reconnecting(let n): "Reconnecting (\(n))..."
+        case .connecting: "Connecting..."
+        case .authenticating: "Authenticating..."
+        case .disconnected: "Disconnected"
+        }
+    }
+}
+
+struct SessionCard: View {
+    let sessionName: String
+    let tabCount: Int
+    let activeTab: WorkspaceTab?
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 8) {
+            HStack {
+                Image(systemName: "terminal")
+                Text(sessionName)
+                    .font(.headline)
+                Spacer()
+                Text("\(tabCount) tab\(tabCount == 1 ? "" : "s")")
+                    .font(.caption)
+                    .foregroundStyle(.secondary)
+            }
+            if let tab = activeTab {
+                HStack {
+                    Text("Active: \(tab.name)")
+                        .font(.subheadline)
+                        .foregroundStyle(.secondary)
+                    if let cwd = tab.panes.first?.cwd {
+                        Text(cwd)
+                            .font(.caption)
+                            .foregroundStyle(.tertiary)
+                            .lineLimit(1)
+                    }
+                }
+            }
+        }
+        .padding()
+        .background(.regularMaterial)
+        .cornerRadius(12)
+    }
+}
+
+struct QuickActionsSection: View {
+    @Environment(RemuxState.self) private var state
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 8) {
+            Text("Quick Actions")
+                .font(.caption)
+                .foregroundStyle(.secondary)
+
+            LazyVGrid(columns: [.init(.flexible()), .init(.flexible())], spacing: 8) {
+                QuickActionButton(icon: "plus", title: "New Tab") {
+                    state.createTab()
+                }
+                QuickActionButton(icon: "doc.text.magnifyingglass", title: "Inspect") {
+                    // Switch to inspect tab — handled by parent TabView
+                }
+            }
+        }
+    }
+}
+
+struct QuickActionButton: View {
+    let icon: String
+    let title: String
+    let action: () -> Void
+
+    var body: some View {
+        Button(action: action) {
+            VStack(spacing: 6) {
+                Image(systemName: icon)
+                    .font(.title3)
+                Text(title)
+                    .font(.caption)
+            }
+            .frame(maxWidth: .infinity)
+            .padding(.vertical, 12)
+        }
+        .buttonStyle(.bordered)
+    }
+}