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

import Observation
import SwiftUI

struct SybilWorkspaceView: View {
    @Bindable var viewModel: SybilViewModel
    @FocusState private var composerFocused: Bool

    private var isSettingsSelected: Bool {
        if case .settings = viewModel.selectedItem {
            return true
        }
        return false
    }

    private var showsHeader: Bool {
        viewModel.errorMessage != nil
    }

    var body: some View {
        VStack(spacing: 0) {
            if showsHeader {
                header

                Divider()
                    .overlay(SybilTheme.border)
            }

            Group {
                if isSettingsSelected {
                    SybilSettingsView(viewModel: viewModel)
                } else if viewModel.isSearchMode {
                    SybilSearchResultsView(
                        search: viewModel.selectedSearch,
                        isLoading: viewModel.isLoadingSelection,
                        isRunning: viewModel.isSending
                    )
                } else {
                    SybilChatTranscriptView(
                        messages: viewModel.displayedMessages,
                        isLoading: viewModel.isLoadingSelection,
                        isSending: viewModel.isSending
                    )
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)

            if viewModel.showsComposer {
                Divider()
                    .overlay(SybilTheme.border)
                composerBar
            }
        }
        .navigationTitle("")
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
            ToolbarItem(placement: .principal) {
                Text(viewModel.selectedTitle)
                    .font(.sybil(.headline, weight: .semibold))
                    .foregroundStyle(SybilTheme.text)
                    .lineLimit(1)
            }

            if !isSettingsSelected {
                ToolbarItem(placement: .topBarTrailing) {
                    if viewModel.isSearchMode {
                        searchModeChip
                    } else {
                        providerModelMenu
                    }
                }
            }
        }
        .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 let error = viewModel.errorMessage {
                Text(error)
                    .font(.sybil(.footnote))
                    .foregroundStyle(SybilTheme.danger)
                    .frame(maxWidth: .infinity, alignment: .leading)
            }
        }
        .padding(.horizontal, 16)
        .padding(.vertical, 12)
        .background(SybilTheme.panelGradient.opacity(0.58))
    }

    private var providerModelMenu: some View {
        Menu {
            Text("\(viewModel.provider.displayName) • \(viewModel.model)")
                .font(.sybil(.caption))

            Divider()

            ForEach(Provider.allCases, id: \.self) { candidate in
                Menu(candidate.displayName) {
                    let models = viewModel.modelOptions(for: candidate)
                    if models.isEmpty {
                        Text("No models")
                    } else {
                        ForEach(models, id: \.self) { candidateModel in
                            Button {
                                viewModel.setProvider(candidate, model: candidateModel)
                            } label: {
                                if viewModel.provider == candidate && viewModel.model == candidateModel {
                                    Label(candidateModel, systemImage: "checkmark")
                                } else {
                                    Text(candidateModel)
                                }
                            }
                        }
                    }
                }
            }
        } label: {
            Image(systemName: "ellipsis")
                .font(.system(size: 18, weight: .semibold))
                .foregroundStyle(SybilTheme.text)
                .frame(width: 34, height: 34)
                .background(
                    Circle()
                        .fill(SybilTheme.surface.opacity(0.78))
                )
                .overlay(
                    Circle()
                        .stroke(SybilTheme.border.opacity(0.82), lineWidth: 1)
                )
        }
        .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 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()
                }
            }
            .padding(.horizontal, 12)
            .padding(.vertical, 10)
            .background(
                RoundedRectangle(cornerRadius: 12)
                    .fill(SybilTheme.composerGradient)
                    .overlay(
                        RoundedRectangle(cornerRadius: 12)
                            .stroke(SybilTheme.primary.opacity(0.34), lineWidth: 1)
                    )
            )
            .foregroundStyle(SybilTheme.text)

            Button {
                Task {
                    await viewModel.sendComposer()
                }
            } label: {
                Image(systemName: viewModel.isSearchMode ? "magnifyingglass" : "arrow.up")
                    .font(.system(size: 17, weight: .semibold))
                    .frame(width: 40, height: 40)
                    .background(
                        Circle()
                            .fill(
                                viewModel.composer.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty || viewModel.isSending
                                    ? AnyShapeStyle(SybilTheme.surface)
                                    : AnyShapeStyle(SybilTheme.primaryGradient)
                            )
                    )
                    .foregroundStyle(viewModel.composer.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty || viewModel.isSending ? SybilTheme.textMuted : SybilTheme.text)
            }
            .buttonStyle(.plain)
            .disabled(viewModel.composer.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty || viewModel.isSending)
        }
        .padding(.horizontal, 14)
        .padding(.vertical, 12)
        .background(
            LinearGradient(
                colors: [
                    SybilTheme.background.opacity(0.18),
                    SybilTheme.background.opacity(0.96)
                ],
                startPoint: .top,
                endPoint: .bottom
            )
        )
    }
}