ios: send from software keyboard

Tiltfile

@@ -1,8 +1,5 @@
 update_settings(max_parallel_updates=4)
 
-load('ext://dotenv', 'dotenv')
-dotenv()                    # defaults to .env in the current directory
-
 local_resource(
     "server",
     cmd="npm ci --no-audit --no-fund",

ios/Packages/Sybil/Sources/Sybil/SplitView.swift

@@ -4,9 +4,8 @@ public struct SplitView: View {
     @State private var viewModel = SybilViewModel()
     @Environment(\.horizontalSizeClass) private var horizontalSizeClass
 
-    @MainActor public init() {
+    public init() {
         SybilFontRegistry.registerIfNeeded()
-        SybilTheme.applySystemAppearance()
     }
 
     public var body: some View {
@@ -26,6 +25,7 @@ public struct SplitView: View {
             } else {
                 NavigationSplitView {
                     SybilSidebarView(viewModel: viewModel)
+                        .navigationTitle("Sybil")
                 } detail: {
                     SybilWorkspaceView(viewModel: viewModel)
                 }
@@ -34,7 +34,6 @@ public struct SplitView: View {
             }
         }
         .font(.sybil(.body))
-        .preferredColorScheme(.dark)
         .task {
             await viewModel.bootstrap()
         }

ios/Packages/Sybil/Sources/Sybil/SybilChatTranscriptView.swift

@@ -25,7 +25,6 @@ struct SybilChatTranscriptView: View {
 
                     ForEach(messages) { message in
                         MessageBubble(message: message, isSending: isSending)
-                            .frame(maxWidth: .infinity)
                             .id(message.id)
                     }
 
@@ -87,8 +86,10 @@ private struct MessageBubble: View {
     }
 
     var body: some View {
-        HStack(alignment: .top, spacing: 0) {
-            leadingSpacer
+        HStack(alignment: .top) {
+            if isUser {
+                Spacer(minLength: 44)
+            }
 
             if let toolCallMetadata {
                 ToolCallActivityChip(
@@ -135,24 +136,12 @@ private struct MessageBubble: View {
                 .frame(maxWidth: isUser ? 420 : nil, alignment: isUser ? .trailing : .leading)
             }
 
-            trailingSpacer
+            if !isUser {
+                Spacer(minLength: 0)
+            }
         }
         .frame(maxWidth: .infinity, alignment: isUser ? .trailing : .leading)
     }
-
-    @ViewBuilder
-    private var leadingSpacer: some View {
-        if isUser {
-            Spacer(minLength: 44)
-        }
-    }
-
-    @ViewBuilder
-    private var trailingSpacer: some View {
-        if !isUser {
-            Spacer(minLength: 0)
-        }
-    }
 }
 
 private struct ToolCallActivityChip: View {

ios/Packages/Sybil/Sources/Sybil/SybilMarkdownTheme.swift

@@ -10,7 +10,6 @@ extension Theme {
             .text {
                 FontFamily(.custom("Inter"))
                 FontSize(15)
-                ForegroundColor(SybilTheme.text)
             }
             .code {
                 FontFamilyVariant(.monospaced)

ios/Packages/Sybil/Sources/Sybil/SybilPhoneShellView.swift

@@ -30,8 +30,8 @@ struct SybilPhoneShellView: View {
                 .navigationTitle("")
                 .navigationBarTitleDisplayMode(.inline)
                 .toolbar {
-                    ToolbarItem(placement: .topBarLeading) {
-                        SybilWordmark(size: 18)
+                    ToolbarItem(placement: .principal) {
+                        SybilWordmark(size: 19)
                     }
                 }
                 .navigationDestination(for: PhoneRoute.self) { route in

ios/Packages/Sybil/Sources/Sybil/SybilSidebarView.swift

@@ -18,6 +18,8 @@ struct SybilSidebarView: View {
     var body: some View {
         VStack(spacing: 0) {
             VStack(alignment: .leading, spacing: 14) {
+                SybilWordmark(size: 31)
+
                 VStack(spacing: 10) {
                     sidebarActionButton(
                         title: "New chat",
@@ -172,13 +174,6 @@ struct SybilSidebarView: View {
             .padding(10)
         }
         .background(SybilTheme.panelGradient)
-        .navigationTitle("")
-        .navigationBarTitleDisplayMode(.inline)
-        .toolbar {
-            ToolbarItem(placement: .topBarLeading) {
-                SybilWordmark(size: 18)
-            }
-        }
     }
 
     private func sidebarActionButton(

ios/Packages/Sybil/Sources/Sybil/SybilTheme.swift

@@ -1,7 +1,6 @@
 import CoreText
 import Foundation
 import SwiftUI
-import UIKit
 
 enum SybilFontRegistry {
     static func registerIfNeeded() {
@@ -79,23 +78,6 @@ enum SybilTheme {
     static let userBubble = Color(red: 0.29, green: 0.13, blue: 0.65)
     static let danger = Color(red: 0.96, green: 0.32, blue: 0.40)
 
-    @MainActor static func applySystemAppearance() {
-        let navAppearance = UINavigationBarAppearance()
-        navAppearance.configureWithOpaqueBackground()
-        navAppearance.backgroundColor = UIColor(red: 0.02, green: 0.02, blue: 0.05, alpha: 1)
-        navAppearance.shadowColor = UIColor(red: 0.24, green: 0.20, blue: 0.38, alpha: 0.9)
-        navAppearance.titleTextAttributes = [
-            .foregroundColor: UIColor(red: 0.96, green: 0.94, blue: 1.0, alpha: 1)
-        ]
-        navAppearance.largeTitleTextAttributes = navAppearance.titleTextAttributes
-
-        UINavigationBar.appearance().prefersLargeTitles = false
-        UINavigationBar.appearance().standardAppearance = navAppearance
-        UINavigationBar.appearance().compactAppearance = navAppearance
-        UINavigationBar.appearance().scrollEdgeAppearance = navAppearance
-        UINavigationBar.appearance().compactScrollEdgeAppearance = navAppearance
-    }
-
     static var backgroundGradient: LinearGradient {
         LinearGradient(
             colors: [

ios/Packages/Sybil/Sources/Sybil/SybilWorkspaceView.swift

@@ -1,10 +1,16 @@
 import Observation
 import SwiftUI
+import UIKit
 
 struct SybilWorkspaceView: View {
     @Bindable var viewModel: SybilViewModel
+    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
     @FocusState private var composerFocused: Bool
 
+    private var isCompact: Bool {
+        horizontalSizeClass == .compact
+    }
+
     private var isSettingsSelected: Bool {
         if case .settings = viewModel.selectedItem {
             return true
@@ -13,7 +19,7 @@ struct SybilWorkspaceView: View {
     }
 
     private var showsHeader: Bool {
-        viewModel.errorMessage != nil
+        !isCompact || viewModel.errorMessage != nil
     }
 
     var body: some View {
@@ -50,26 +56,58 @@ struct SybilWorkspaceView: View {
                 composerBar
             }
         }
-        .navigationTitle(viewModel.selectedTitle)
-        .navigationBarTitleDisplayMode(.inline)
-        .toolbarRole(.editor)
+        .navigationTitle(isCompact ? "" : viewModel.selectedTitle)
         .toolbar {
-            if !isSettingsSelected {
+            if isCompact {
+                ToolbarItem(placement: .principal) {
+                    Text(viewModel.selectedTitle)
+                        .font(.sybil(.headline, weight: .semibold))
+                        .foregroundStyle(SybilTheme.text)
+                        .lineLimit(1)
+                }
+            }
+
+            if isCompact && !viewModel.isSearchMode && !isSettingsSelected {
                 ToolbarItem(placement: .topBarTrailing) {
-                    if viewModel.isSearchMode {
-                        searchModeChip
-                    } else {
-                        providerModelMenu
-                    }
+                    compactProviderModelMenu
                 }
             }
         }
         .background(SybilTheme.background)
         .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
+        .onChange(of: viewModel.isSending) { _, isSending in
+            if !isSending, viewModel.showsComposer {
+                composerFocused = true
+            }
+        }
     }
 
     private var header: some View {
         VStack(alignment: .leading, spacing: 12) {
+            if !isCompact {
+                HStack(alignment: .top, spacing: 12) {
+                    Spacer()
+
+                    if !viewModel.isSearchMode && !isSettingsSelected {
+                        providerControls
+                    } else if viewModel.isSearchMode {
+                        Label("Search mode", systemImage: "globe")
+                            .font(.sybil(.caption, weight: .medium))
+                            .foregroundStyle(SybilTheme.accent)
+                            .padding(.horizontal, 10)
+                            .padding(.vertical, 7)
+                            .background(
+                                RoundedRectangle(cornerRadius: 10)
+                                    .fill(SybilTheme.accent.opacity(0.10))
+                                    .overlay(
+                                        RoundedRectangle(cornerRadius: 10)
+                                            .stroke(SybilTheme.accent.opacity(0.24), lineWidth: 1)
+                                    )
+                            )
+                    }
+                }
+            }
+
             if let error = viewModel.errorMessage {
                 Text(error)
                     .font(.sybil(.footnote))
@@ -82,7 +120,7 @@ struct SybilWorkspaceView: View {
         .background(SybilTheme.panelGradient.opacity(0.58))
     }
 
-    private var providerModelMenu: some View {
+    private var compactProviderModelMenu: some View {
         Menu {
             Text("\(viewModel.provider.displayName) • \(viewModel.model)")
                 .font(.sybil(.caption))
@@ -126,37 +164,76 @@ struct SybilWorkspaceView: View {
         .accessibilityLabel("Provider and model")
     }
 
-    private var searchModeChip: some View {
-        Label("Search", systemImage: "globe")
-            .font(.sybil(.caption, weight: .medium))
-            .foregroundStyle(SybilTheme.accent)
-            .padding(.horizontal, 10)
-            .padding(.vertical, 7)
-            .background(
-                Capsule()
-                    .fill(SybilTheme.accent.opacity(0.10))
-                    .overlay(
-                        Capsule()
-                            .stroke(SybilTheme.accent.opacity(0.24), lineWidth: 1)
+    private var providerControls: some View {
+        HStack(spacing: 8) {
+            Menu {
+                ForEach(Provider.allCases, id: \.self) { candidate in
+                    Button(candidate.displayName) {
+                        viewModel.setProvider(candidate)
+                    }
+                }
+            } label: {
+                Label(viewModel.provider.displayName, systemImage: "chevron.down")
+                    .labelStyle(.titleAndIcon)
+                    .font(.sybil(.caption, weight: .medium))
+                    .foregroundStyle(SybilTheme.text)
+                    .padding(.horizontal, 10)
+                    .padding(.vertical, 7)
+                    .background(
+                        RoundedRectangle(cornerRadius: 10)
+                            .fill(SybilTheme.surface.opacity(0.78))
+                            .overlay(
+                                RoundedRectangle(cornerRadius: 10)
+                                    .stroke(SybilTheme.border.opacity(0.88), lineWidth: 1)
+                            )
                     )
-            )
+            }
+
+            Menu {
+                ForEach(viewModel.providerModelOptions, id: \.self) { model in
+                    Button(model) {
+                        viewModel.setModel(model)
+                    }
+                }
+            } label: {
+                Label(viewModel.model, systemImage: "chevron.down")
+                    .labelStyle(.titleAndIcon)
+                    .font(.sybil(.caption, weight: .medium))
+                    .foregroundStyle(SybilTheme.text)
+                    .lineLimit(1)
+                    .padding(.horizontal, 10)
+                    .padding(.vertical, 7)
+                    .background(
+                        RoundedRectangle(cornerRadius: 10)
+                            .fill(SybilTheme.surface.opacity(0.78))
+                            .overlay(
+                                RoundedRectangle(cornerRadius: 10)
+                                    .stroke(SybilTheme.border.opacity(0.88), lineWidth: 1)
+                            )
+                    )
+            }
+        }
     }
 
     private var composerBar: some View {
         HStack(alignment: .bottom, spacing: 10) {
-            TextField(
-                viewModel.isSearchMode ? "Search the web" : "Message Sybil",
-                text: $viewModel.composer,
-                axis: .vertical
-            )
-            .focused($composerFocused)
-            .textInputAutocapitalization(.sentences)
-            .autocorrectionDisabled(false)
-            .lineLimit(1 ... 6)
-            .submitLabel(.send)
-            .onSubmit {
-                Task {
-                    await viewModel.sendComposer()
+            ZStack(alignment: .topLeading) {
+                ComposerTextView(
+                    text: $viewModel.composer,
+                    isFocused: $composerFocused,
+                    isDisabled: viewModel.isSending
+                ) {
+                    Task {
+                        await viewModel.sendComposer()
+                    }
+                }
+                .frame(minHeight: 24, maxHeight: 132)
+
+                if viewModel.composer.isEmpty {
+                    Text(viewModel.isSearchMode ? "Search the web" : "Message Sybil")
+                        .font(.body)
+                        .foregroundStyle(SybilTheme.textMuted.opacity(0.72))
+                        .allowsHitTesting(false)
                 }
             }
             .padding(.horizontal, 12)
@@ -206,3 +283,91 @@ struct SybilWorkspaceView: View {
         )
     }
 }
+
+private struct ComposerTextView: UIViewRepresentable {
+    @Binding var text: String
+    var isFocused: FocusState<Bool>.Binding
+    var isDisabled: Bool
+    var onSubmit: () -> Void
+
+    func makeUIView(context: Context) -> UITextView {
+        let textView = UITextView()
+        textView.delegate = context.coordinator
+        textView.backgroundColor = .clear
+        textView.font = .preferredFont(forTextStyle: .body)
+        textView.textColor = UIColor(SybilTheme.text)
+        textView.tintColor = UIColor(SybilTheme.primary)
+        textView.textContainerInset = .zero
+        textView.textContainer.lineFragmentPadding = 0
+        textView.isScrollEnabled = true
+        textView.alwaysBounceVertical = false
+        textView.keyboardDismissMode = .interactive
+        textView.returnKeyType = .send
+        textView.enablesReturnKeyAutomatically = true
+        textView.autocapitalizationType = .sentences
+        textView.autocorrectionType = .default
+        textView.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
+        return textView
+    }
+
+    func updateUIView(_ textView: UITextView, context: Context) {
+        context.coordinator.parent = self
+
+        if textView.text != text {
+            textView.text = text
+        }
+
+        textView.isEditable = !isDisabled
+        textView.alpha = isDisabled ? 0.74 : 1
+
+        if isFocused.wrappedValue, !textView.isFirstResponder {
+            textView.becomeFirstResponder()
+        } else if !isFocused.wrappedValue, textView.isFirstResponder {
+            textView.resignFirstResponder()
+        }
+    }
+
+    func sizeThatFits(_ proposal: ProposedViewSize, uiView: UITextView, context: Context) -> CGSize? {
+        let width = proposal.width ?? uiView.bounds.width
+        let fittingSize = uiView.sizeThatFits(
+            CGSize(width: width, height: CGFloat.greatestFiniteMagnitude)
+        )
+        return CGSize(width: width, height: min(max(fittingSize.height, 24), 132))
+    }
+
+    func makeCoordinator() -> Coordinator {
+        Coordinator(parent: self)
+    }
+
+    final class Coordinator: NSObject, UITextViewDelegate {
+        var parent: ComposerTextView
+
+        init(parent: ComposerTextView) {
+            self.parent = parent
+        }
+
+        func textViewDidChange(_ textView: UITextView) {
+            parent.text = textView.text
+        }
+
+        func textViewDidBeginEditing(_ textView: UITextView) {
+            parent.isFocused.wrappedValue = true
+        }
+
+        func textViewDidEndEditing(_ textView: UITextView) {
+            parent.isFocused.wrappedValue = false
+        }
+
+        func textView(
+            _ textView: UITextView,
+            shouldChangeTextIn range: NSRange,
+            replacementText replacement: String
+        ) -> Bool {
+            if replacement == "\n" {
+                parent.onSubmit()
+                return false
+            }
+            return true
+        }
+    }
+}