ios: use editor toolbar title

Tiltfile

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

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

@@ -15,7 +15,7 @@ struct SybilChatTranscriptView: View {
     var body: some View {
         ScrollViewReader { proxy in
             ScrollView {
-                LazyVStack(alignment: .leading, spacing: 24) {
+                LazyVStack(alignment: .leading, spacing: 26) {
                     if isLoading && messages.isEmpty {
                         Text("Loading messages…")
                             .font(.sybil(.footnote))
@@ -25,6 +25,7 @@ struct SybilChatTranscriptView: View {
 
                     ForEach(messages) { message in
                         MessageBubble(message: message, isSending: isSending)
+                            .frame(maxWidth: .infinity)
                             .id(message.id)
                     }
 
@@ -86,10 +87,8 @@ private struct MessageBubble: View {
     }
 
     var body: some View {
-        HStack(alignment: .top) {
+        HStack(alignment: .top, spacing: 0) {
-            if isUser {
+            leadingSpacer
-                Spacer(minLength: 44)
-            }
 
             if let toolCallMetadata {
                 ToolCallActivityChip(
@@ -113,13 +112,11 @@ private struct MessageBubble: View {
                         Markdown(message.content)
                             .tint(SybilTheme.primary)
                             .foregroundStyle(isUser ? SybilTheme.text : SybilTheme.text.opacity(0.95))
-                            .markdownTextStyle {
+                            .markdownTheme(.sybilReadable)
-                                FontSize(15)
-                            }
                     }
                 }
                 .padding(.horizontal, isUser ? 14 : 2)
-                .padding(.vertical, isUser ? 11 : 2)
+                .padding(.vertical, isUser ? 13 : 2)
                 .background(
                     Group {
                         if isUser {
@@ -138,12 +135,24 @@ private struct MessageBubble: View {
                 .frame(maxWidth: isUser ? 420 : nil, alignment: isUser ? .trailing : .leading)
             }
 
-            if !isUser {
+            trailingSpacer
-                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 {
@@ -224,6 +233,7 @@ private struct ToolCallActivityChip: View {
                 Text(summary)
                     .font(.sybil(.subheadline))
                     .foregroundStyle(isFailed ? SybilTheme.danger.opacity(0.96) : SybilTheme.text.opacity(0.94))
+                    .lineSpacing(3)
                     .fixedSize(horizontal: false, vertical: true)
 
                 HStack(spacing: 6) {

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

@@ -0,0 +1,165 @@
+import MarkdownUI
+import SwiftUI
+
+@MainActor
+extension Theme {
+    static let sybilReadable: Theme = {
+        SybilFontRegistry.registerIfNeeded()
+
+        return Theme()
+            .text {
+                FontFamily(.custom("Inter"))
+                FontSize(15)
+                ForegroundColor(SybilTheme.text)
+            }
+            .code {
+                FontFamilyVariant(.monospaced)
+                FontSize(.em(0.88))
+                BackgroundColor(SybilTheme.surfaceStrong.opacity(0.78))
+            }
+            .strong {
+                FontWeight(.semibold)
+            }
+            .link {
+                ForegroundColor(SybilTheme.accent)
+            }
+            .heading1 { configuration in
+                configuration.label
+                    .fixedSize(horizontal: false, vertical: true)
+                    .relativeLineSpacing(.em(0.18))
+                    .markdownMargin(top: .em(1.1), bottom: .em(0.5))
+                    .markdownTextStyle {
+                        FontWeight(.semibold)
+                        FontSize(.em(1.45))
+                    }
+            }
+            .heading2 { configuration in
+                configuration.label
+                    .fixedSize(horizontal: false, vertical: true)
+                    .relativeLineSpacing(.em(0.18))
+                    .markdownMargin(top: .em(1.0), bottom: .em(0.45))
+                    .markdownTextStyle {
+                        FontWeight(.semibold)
+                        FontSize(.em(1.25))
+                    }
+            }
+            .heading3 { configuration in
+                configuration.label
+                    .fixedSize(horizontal: false, vertical: true)
+                    .relativeLineSpacing(.em(0.18))
+                    .markdownMargin(top: .em(0.9), bottom: .em(0.4))
+                    .markdownTextStyle {
+                        FontWeight(.semibold)
+                        FontSize(.em(1.12))
+                    }
+            }
+            .heading4 { configuration in
+                configuration.label
+                    .fixedSize(horizontal: false, vertical: true)
+                    .relativeLineSpacing(.em(0.18))
+                    .markdownMargin(top: .em(0.85), bottom: .em(0.35))
+                    .markdownTextStyle {
+                        FontWeight(.semibold)
+                    }
+            }
+            .heading5 { configuration in
+                configuration.label
+                    .fixedSize(horizontal: false, vertical: true)
+                    .relativeLineSpacing(.em(0.18))
+                    .markdownMargin(top: .em(0.8), bottom: .em(0.35))
+                    .markdownTextStyle {
+                        FontWeight(.semibold)
+                        FontSize(.em(0.92))
+                    }
+            }
+            .heading6 { configuration in
+                configuration.label
+                    .fixedSize(horizontal: false, vertical: true)
+                    .relativeLineSpacing(.em(0.18))
+                    .markdownMargin(top: .em(0.8), bottom: .em(0.35))
+                    .markdownTextStyle {
+                        FontWeight(.semibold)
+                        FontSize(.em(0.86))
+                    }
+            }
+            .paragraph { configuration in
+                configuration.label
+                    .fixedSize(horizontal: false, vertical: true)
+                    .relativeLineSpacing(.em(0.36))
+                    .markdownMargin(top: .zero, bottom: .em(0.82))
+            }
+            .blockquote { configuration in
+                HStack(alignment: .top, spacing: 10) {
+                    RoundedRectangle(cornerRadius: 2)
+                        .fill(SybilTheme.primary.opacity(0.55))
+                        .frame(width: 3)
+                    configuration.label
+                        .markdownTextStyle {
+                            ForegroundColor(SybilTheme.textMuted)
+                        }
+                }
+                .fixedSize(horizontal: false, vertical: true)
+                .markdownMargin(top: .em(0.25), bottom: .em(0.9))
+            }
+            .codeBlock { configuration in
+                ScrollView(.horizontal) {
+                    configuration.label
+                        .fixedSize(horizontal: false, vertical: true)
+                        .relativeLineSpacing(.em(0.28))
+                        .markdownTextStyle {
+                            FontFamilyVariant(.monospaced)
+                            FontSize(.em(0.88))
+                        }
+                        .padding(12)
+                }
+                .background(
+                    RoundedRectangle(cornerRadius: 10)
+                        .fill(SybilTheme.surfaceStrong.opacity(0.82))
+                )
+                .overlay(
+                    RoundedRectangle(cornerRadius: 10)
+                        .stroke(SybilTheme.border.opacity(0.72), lineWidth: 1)
+                )
+                .markdownMargin(top: .em(0.2), bottom: .em(1))
+            }
+            .list { configuration in
+                configuration.label
+                    .fixedSize(horizontal: false, vertical: true)
+                    .markdownMargin(top: .em(0.08), bottom: .em(0.78))
+            }
+            .listItem { configuration in
+                configuration.label
+                    .markdownMargin(top: .em(0.28))
+            }
+            .table { configuration in
+                configuration.label
+                    .fixedSize(horizontal: false, vertical: true)
+                    .markdownTableBorderStyle(.init(color: SybilTheme.border.opacity(0.85)))
+                    .markdownTableBackgroundStyle(
+                        .alternatingRows(
+                            SybilTheme.surface.opacity(0.72),
+                            SybilTheme.surfaceStrong.opacity(0.62)
+                        )
+                    )
+                    .markdownMargin(top: .em(0.2), bottom: .em(1))
+            }
+            .tableCell { configuration in
+                configuration.label
+                    .markdownTextStyle {
+                        if configuration.row == 0 {
+                            FontWeight(.semibold)
+                        }
+                        BackgroundColor(nil)
+                    }
+                    .fixedSize(horizontal: false, vertical: true)
+                    .relativeLineSpacing(.em(0.30))
+                    .padding(.vertical, 7)
+                    .padding(.horizontal, 11)
+            }
+            .thematicBreak {
+                Divider()
+                    .overlay(SybilTheme.border.opacity(0.82))
+                    .markdownMargin(top: .em(1.2), bottom: .em(1.2))
+            }
+    }()
+}

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

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

ios/Packages/Sybil/Sources/Sybil/SybilSearchResultsView.swift

@@ -97,9 +97,7 @@ struct SybilSearchResultsView: View {
                 Markdown(answer)
                     .tint(SybilTheme.primary)
                     .foregroundStyle(SybilTheme.text)
-                    .markdownTextStyle {
+                    .markdownTheme(.sybilReadable)
-                        FontSize(15)
-                    }
             }
 
             if let answerError = search?.answerError, !answerError.isEmpty {
@@ -180,6 +178,7 @@ private struct SearchResultCard: View {
                         Text(result.title.orEmpty.orFallback(result.url))
                             .font(.sybil(.headline))
                             .foregroundStyle(SybilTheme.primary.opacity(0.96))
+                            .lineSpacing(2)
                             .multilineTextAlignment(.leading)
                     }
                     .buttonStyle(.plain)
@@ -187,6 +186,7 @@ private struct SearchResultCard: View {
                     Text(result.title.orEmpty.orFallback(result.url))
                         .font(.sybil(.headline))
                         .foregroundStyle(SybilTheme.primary.opacity(0.96))
+                        .lineSpacing(2)
                 }
                 
                 if let date = result.publishedDate, !date.isEmpty {
@@ -202,6 +202,7 @@ private struct SearchResultCard: View {
                 Text(result.url)
                     .font(.sybil(.footnote))
                     .foregroundStyle(SybilTheme.text.opacity(0.92))
+                    .lineSpacing(2)
                     .lineLimit(3)
                     .textSelection(.enabled)
                 
@@ -210,6 +211,7 @@ private struct SearchResultCard: View {
                         Text("• \(highlight)")
                             .font(.sybil(.caption))
                             .foregroundStyle(SybilTheme.textMuted)
+                            .lineSpacing(2)
                             .fixedSize(horizontal: false, vertical: true)
                     }
                 }

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

@@ -18,8 +18,6 @@ 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",
@@ -174,6 +172,13 @@ 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,6 +1,7 @@
 import CoreText
 import Foundation
 import SwiftUI
+import UIKit
 
 enum SybilFontRegistry {
     static func registerIfNeeded() {
@@ -78,6 +79,23 @@ 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

@@ -3,13 +3,8 @@ import SwiftUI
 
 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
@@ -18,7 +13,7 @@ struct SybilWorkspaceView: View {
     }
 
     private var showsHeader: Bool {
-        !isCompact || viewModel.errorMessage != nil
+        viewModel.errorMessage != nil
     }
 
     var body: some View {
@@ -55,20 +50,17 @@ struct SybilWorkspaceView: View {
                 composerBar
             }
         }
-        .navigationTitle(isCompact ? "" : viewModel.selectedTitle)
+        .navigationTitle(viewModel.selectedTitle)
+        .navigationBarTitleDisplayMode(.inline)
+        .toolbarRole(.editor)
         .toolbar {
-            if isCompact {
+            if !isSettingsSelected {
-                ToolbarItem(placement: .principal) {
-                    Text(viewModel.selectedTitle)
-                        .font(.sybil(.headline, weight: .semibold))
-                        .foregroundStyle(SybilTheme.text)
-                        .lineLimit(1)
-                }
-            }
-
-            if isCompact && !viewModel.isSearchMode && !isSettingsSelected {
                 ToolbarItem(placement: .topBarTrailing) {
-                    compactProviderModelMenu
+                    if viewModel.isSearchMode {
+                        searchModeChip
+                    } else {
+                        providerModelMenu
+                    }
                 }
             }
         }
@@ -83,30 +75,6 @@ struct SybilWorkspaceView: View {
 
     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))
@@ -119,7 +87,7 @@ struct SybilWorkspaceView: View {
         .background(SybilTheme.panelGradient.opacity(0.58))
     }
 
-    private var compactProviderModelMenu: some View {
+    private var providerModelMenu: some View {
         Menu {
             Text("\(viewModel.provider.displayName) • \(viewModel.model)")
                 .font(.sybil(.caption))
@@ -163,55 +131,20 @@ struct SybilWorkspaceView: View {
         .accessibilityLabel("Provider and model")
     }
 
-    private var providerControls: some View {
+    private var searchModeChip: some View {
-        HStack(spacing: 8) {
+        Label("Search", systemImage: "globe")
-            Menu {
+            .font(.sybil(.caption, weight: .medium))
-                ForEach(Provider.allCases, id: \.self) { candidate in
+            .foregroundStyle(SybilTheme.accent)
-                    Button(candidate.displayName) {
+            .padding(.horizontal, 10)
-                        viewModel.setProvider(candidate)
+            .padding(.vertical, 7)
-                    }
+            .background(
-                }
+                Capsule()
-            } label: {
+                    .fill(SybilTheme.accent.opacity(0.10))
-                Label(viewModel.provider.displayName, systemImage: "chevron.down")
+                    .overlay(
-                    .labelStyle(.titleAndIcon)
+                        Capsule()
-                    .font(.sybil(.caption, weight: .medium))
+                            .stroke(SybilTheme.accent.opacity(0.24), lineWidth: 1)
-                    .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 {