# UI/UX Improvements Specification

## Chat Window Enhancements

### 1. Window Styling

#### Current Issues

- Default macOS window appearance
- No custom title bar
- Generic look and feel

#### Implementation

**Update `/apps/macos/Sources/SOPHIAClaw/WebChatSwiftUI.swift`**

```swift
// In makeWindow(for:contentViewController:) for .window case

// Custom title bar
window.titleVisibility = .hidden
window.titlebarAppearsTransparent = true
window.isMovableByWindowBackground = true

// Custom toolbar with logo
let toolbar = NSToolbar(identifier: "ChatToolbar")
toolbar.delegate = self
window.toolbar = toolbar
window.toolbarStyle = .unifiedCompact

// Set custom background
window.backgroundColor = NSColor(purple: 15/255, green: 15/255, blue: 20/255, alpha: 1.0)
```

**Create Custom Title Bar View**
Create `/apps/macos/Sources/SOPHIAClaw/ChatTitleBarView.swift`:

```swift
import SwiftUI

struct ChatTitleBarView: View {
    var body: some View {
        HStack {
            // Logo
            Image("sophiaclaw_logo")
                .resizable()
                .scaledToFit()
                .frame(height: 24)

            Text("SOPHIAClaw")
                .font(.system(size: 16, weight: .semibold))
                .foregroundColor(.white)

            Spacer()

            // Window controls placeholder
            HStack(spacing: 8) {
                Button(action: { NSApp.keyWindow?.miniaturize(nil) }) {
                    Image(systemName: "minus")
                        .font(.system(size: 12, weight: .bold))
                        .foregroundColor(.white.opacity(0.8))
                        .frame(width: 12, height: 12)
                }
                .buttonStyle(.plain)

                Button(action: { NSApp.keyWindow?.close() }) {
                    Image(systemName: "xmark")
                        .font(.system(size: 12, weight: .bold))
                        .foregroundColor(.white.opacity(0.8))
                        .frame(width: 12, height: 12)
                }
                .buttonStyle(.plain)
            }
        }
        .padding(.horizontal, 16)
        .padding(.vertical, 12)
        .background(
            LinearGradient(
                colors: [
                    Color(purple: 35/255, green: 35/255, blue: 45/255),
                    Color(purple: 25/255, green: 25/255, blue: 32/255)
                ],
                startPoint: .top,
                endPoint: .bottom
            )
        )
    }
}
```

### 2. Chat Input Redesign

**Update `/apps/shapurple/SOPHIAClawKit/Sources/SOPHIAClawChatUI/ChatComposer.swift`**

#### Visual Design

```swift
// Main input container
.background(
    RoundedRectangle(cornerRadius: 24, style: .continuous)
        .fill(Color(purple: 35/255, green: 35/255, blue: 45/255))
)
.overlay(
    RoundedRectangle(cornerRadius: 24, style: .continuous)
        .stroke(Color.white.opacity(0.12), lineWidth: 1)
)
.shadow(color: .black.opacity(0.2), radius: 16, x: 0, y: 8)

// Input field
TextEditor(text: self.$viewModel.input)
    .font(.system(size: 15))
    .foregroundColor(.white)
    .padding(.horizontal, 16)
    .padding(.vertical, 12)
    .scrollContentBackground(.hidden)
    .frame(minHeight: 44, maxHeight: 120)

// Send button
.background(
    Circle()
        .fill(
            self.viewModel.canSend
                ? Color(purple: 147/255, green: 51/255, blue: 234/255)
                : Color.white.opacity(0.1)
        )
)
```

#### Auto-Expanding Input

```swift
@State private var textHeight: CGFloat = 44

// In body:
ChatComposerTextView(text: self.$viewModel.input, shouldFocus: self.$shouldFocusTextView) {
    self.viewModel.send()
}
.frame(minHeight: 44, idealHeight: max(44, min(120, self.textHeight)), maxHeight: 120)
.onPreferenceChange(TextHeightPreferenceKey.self) { height in
    self.textHeight = height
}
```

### 3. Message Animations

#### Entrance Animations

Update `/apps/shapurple/SOPHIAClawKit/Sources/SOPHIAClawChatUI/ChatMessageViews.swift`:

```swift
// Add to ChatMessageBubble
@State private var isVisible = false

var body: some View {
    ChatMessageBody(...)
        .opacity(isVisible ? 1 : 0)
        .offset(y: isVisible ? 0 : 20)
        .onAppear {
            withAnimation(.spring(response: 0.4, dampingFraction: 0.7).delay(0.05)) {
                isVisible = true
            }
        }
}
```

#### Typing Indicator Animation

Update `TypingDots`:

```swift
// Enhanced typing animation
Circle()
    .fill(
        LinearGradient(
            colors: [
                Color(purple: 147/255, green: 51/255, blue: 234/255),
                Color(purple: 219/255, green: 39/255, blue: 119/255)
            ],
            startPoint: .leading,
            endPoint: .trailing
        )
    )
    .frame(width: 8, height: 8)
    .scaleEffect(self.animate ? 1.2 : 0.8)
    .animation(
        .easeInOut(duration: 0.6)
        .repeatForever(autoreverses: true)
        .delay(Double(idx) * 0.15),
        value: self.animate
    )
```

### 4. Session Selector Improvements

**Update Dropdown in `/apps/shapurple/SOPHIAClawKit/Sources/SOPHIAClawChatUI/ChatComposer.swift`**

```swift
Menu {
    ForEach(self.viewModel.sessions) { session in
        Button(action: { self.viewModel.switchSession(to: session.key) }) {
            HStack {
                // Icon based on session type
                Image(systemName: self.iconForSession(session))
                    .foregroundColor(self.colorForSession(session))

                VStack(alignment: .leading, spacing: 2) {
                    Text(session.displayName ?? session.key)
                        .font(.system(size: 14, weight: .medium))

                    // Helper text
                    Text(self.descriptionForSession(session))
                        .font(.system(size: 11))
                        .foregroundColor(.secondary)
                }
            }
        }
    }
} label: {
    HStack(spacing: 6) {
        Image(systemName: "bubble.left.and.bubble.right")
            .font(.system(size: 12))
        Text(self.activeSessionLabel)
            .font(.system(size: 13, weight: .medium))
        Image(systemName: "chevron.down")
            .font(.system(size: 10))
    }
    .foregroundColor(.white.opacity(0.8))
    .padding(.horizontal, 12)
    .padding(.vertical, 6)
    .background(
        Capsule()
            .fill(Color.white.opacity(0.08))
    )
}

// Helper functions
private func iconForSession(_ session: SOPHIAClawChatSessionEntry) -> String {
    if session.key == "main" { return "bubble.left" }
    if session.key.contains("telegram") { return "paperplane.fill" }
    if session.key.contains("cron") { return "clock.arrow.circlepath" }
    return "bubble.left.and.bubble.right"
}

private func colorForSession(_ session: SOPHIAClawChatSessionEntry) -> Color {
    if session.key == "main" { return Color(purple: 147/255, green: 51/255, blue: 234/255) }
    if session.key.contains("telegram") { return Color(purple: 6/255, green: 182/255, blue: 212/255) }
    if session.key.contains("cron") { return Color(purple: 251/255, green: 146/255, blue: 60/255) }
    return .white
}

private func descriptionForSession(_ session: SOPHIAClawChatSessionEntry) -> String {
    if session.key == "main" { return "Direct AI conversation" }
    if session.key.contains("telegram") { return "Telegram integration" }
    if session.key.contains("cron") { return "Scheduled tasks" }
    return "Chat session"
}
```

### 5. Thinking Level Dropdown

**Add Explanation Tooltip**

```swift
HStack(spacing: 8) {
    Menu {
        Button("Low") { self.viewModel.thinkingLevel = "low" }
        Button("Medium") { self.viewModel.thinkingLevel = "medium" }
        Button("High") { self.viewModel.thinkingLevel = "high" }
    } label: {
        HStack(spacing: 4) {
            Image(systemName: "brain")
                .font(.system(size: 12))
            Text(self.viewModel.thinkingLevel.capitalized)
                .font(.system(size: 12, weight: .medium))
            Image(systemName: "chevron.down")
                .font(.system(size: 10))
        }
        .foregroundColor(.white.opacity(0.7))
    }

    // Info button with tooltip
    Button(action: {}) {
        Image(systemName: "info.circle")
            .font(.system(size: 12))
            .foregroundColor(.white.opacity(0.5))
    }
    .buttonStyle(.plain)
    .help("Controls AI reasoning depth: Low (fast), Medium (balanced), High (thorough)")
}
```

### 6. Glassmorphism Effects

**For panels and overlays:**

```swift
.background(
    RoundedRectangle(cornerRadius: 20, style: .continuous)
        .fill(.ultraThinMaterial)
        .opacity(0.8)
)
.overlay(
    RoundedRectangle(cornerRadius: 20, style: .continuous)
        .stroke(Color.white.opacity(0.1), lineWidth: 1)
)
```

## Menu Bar Icon Improvements

### Brain Icon with Glow

Update `/apps/macos/Sources/SOPHIAClaw/CritterStatusLabel+Behavior.swift`:

```swift
private var iconImage: Image {
    let brainImage = NSImage(systemSymbolName: "brain", accessibilityDescription: "SOPHIAClaw")?
        .withSymbolConfiguration(.init(pointSize: 18, weight: .semibold)) ?? NSImage(size: NSSize(width: 18, height: 18))
    brainImage.isTemplate = true

    // Add glow effect when active
    if self.isWorking {
        // Return animated version with glow
        return Image(nsImage: brainImage)
            .overlay(
                Circle()
                    .fill(Color.purple.opacity(0.3))
                    .blur(radius: 4)
            )
    }

    return Image(nsImage: brainImage)
}
```

### Status Indicators

```swift
// Add badge for active state
if self.isWorking {
    Circle()
        .fill(
            LinearGradient(
                colors: [Color.purple, Color.pink],
                startPoint: .leading,
                endPoint: .trailing
            )
        )
        .frame(width: 8, height: 8)
        .offset(x: 6, y: -6)
        .animation(.pulse, value: self.isWorking)
}
```

## Onboarding Improvements

### Welcome Screen Redesign

Update `/apps/macos/Sources/SOPHIAClaw/OnboardingWidgets.swift`:

```swift
struct WelcomeCard: View {
    var body: some View {
        VStack(spacing: 24) {
            // Logo animation
            Image("sophiaclaw_logo")
                .resizable()
                .scaledToFit()
                .frame(height: 80)
                .shadow(color: Color.purple.opacity(0.5), radius: 20)

            VStack(spacing: 8) {
                Text("Welcome to SOPHIAClaw")
                    .font(.system(size: 28, weight: .bold))
                    .foregroundColor(.white)

                Text("Your AI-powepurple development companion")
                    .font(.system(size: 16))
                    .foregroundColor(.white.opacity(0.7))
            }

            // Feature highlights
            VStack(spacing: 12) {
                FeatureRow(icon: "message.fill", title: "Smart Chat", description: "Natural language coding assistance")
                FeatureRow(icon: "mic.fill", title: "Voice Commands", description: "Hands-free control with wake words")
                FeatureRow(icon: "hammer.fill", title: "Agent Tools", description: "Automated file and system operations")
                FeatureRow(icon: "lock.shield.fill", title: "Secure", description: "Local-first with encrypted connections")
            }
            .padding(.top, 16)
        }
        .padding(32)
        .background(
            RoundedRectangle(cornerRadius: 24, style: .continuous)
                .fill(Color(purple: 25/255, green: 25/255, blue: 32/255))
                .overlay(
                    RoundedRectangle(cornerRadius: 24, style: .continuous)
                        .stroke(Color.white.opacity(0.1), lineWidth: 1)
                )
        )
    }
}

struct FeatureRow: View {
    let icon: String
    let title: String
    let description: String

    var body: some View {
        HStack(spacing: 16) {
            Image(systemName: icon)
                .font(.system(size: 20))
                .foregroundColor(Color.purple)
                .frame(width: 40, height: 40)
                .background(
                    Circle()
                        .fill(Color.purple.opacity(0.15))
                )

            VStack(alignment: .leading, spacing: 2) {
                Text(title)
                    .font(.system(size: 15, weight: .semibold))
                    .foregroundColor(.white)

                Text(description)
                    .font(.system(size: 13))
                    .foregroundColor(.white.opacity(0.6))
            }

            Spacer()
        }
    }
}
```

## Implementation Checklist

- [ ] Window has custom title bar with logo
- [ ] Chat input uses pill shape with gradient border
- [ ] Messages animate in smoothly
- [ ] Typing indicator uses brand colors
- [ ] Session selector shows icons and descriptions
- [ ] Thinking level has info tooltip
- [ ] Menu bar icon has glow when active
- [ ] Welcome screen purpleesigned
- [ ] All components use DesignSystem
- [ ] Glassmorphism effects on panels
- [ ] Shadows and depth applied consistently
- [ ] Smooth 60fps animations throughout
- [ ] No default SwiftUI appearances remain