feat(desktop): add input detection UI and active pane indicator

grokify · claude · grokify · commit 2f5f35332bf0 · 2026-03-29T21:18:29.000-07:00
Add visual feedback for AI input prompts and keyboard focus:

Input Detection:
- InputIndicatorView overlay shows when AI is waiting for input
- Displays pattern type (permission, yes/no, question, etc.)
- Quick action buttons for common responses
- Expandable view with matched text preview

Active Pane Indicator:
- Accent-colored border (2px) on focused pane
- Subtle glow shadow effect
- Header background tint and focus dot
- Bold pane number when focused
- Smooth 150ms animation on focus change

Implementation:
- TerminalContainerView tracks and broadcasts focus state
- PaneView listens for focus notifications
- 500ms polling for focus state changes
- Pass inputMonitor through view hierarchy

Co-Authored-By: Claude Opus 4.5 &lt;noreply@anthropic.com&gt;
diff --git a/apps/desktop/Sources/PlexusOneDesktop/Views/ContentView.swift b/apps/desktop/Sources/PlexusOneDesktop/Views/ContentView.swift
@@ -18,6 +18,10 @@ struct ContentView: View {
         appState.windowStateManager
     }
 
+    private var inputMonitor: InputMonitor {
+        appState.inputMonitor
+    }
+
     var body: some View {
         VStack(spacing: 0) {
             if !isReady {
@@ -34,6 +38,7 @@ struct ContentView: View {
                     config: gridConfig,
                     sessions: sessionManager.sessions,
                     sessionManager: sessionManager,
+                    inputMonitor: inputMonitor,
                     paneManager: paneManager,
                     onRequestNewSession: {
                         showNewSessionSheet = true
diff --git a/apps/desktop/Sources/PlexusOneDesktop/Views/GridLayoutView.swift b/apps/desktop/Sources/PlexusOneDesktop/Views/GridLayoutView.swift
@@ -54,6 +54,7 @@ struct GridLayoutView: View {
     let config: GridConfig
     let sessions: [Session]
     let sessionManager: SessionManager
+    let inputMonitor: InputMonitor
     @Bindable var paneManager: PaneManager
     let onRequestNewSession: () -> Void
 
@@ -72,6 +73,7 @@ struct GridLayoutView: View {
                                 paneId: paneId,
                                 sessions: sessions,
                                 sessionManager: sessionManager,
+                                inputMonitor: inputMonitor,
                                 attachedSession: paneManager.binding(for: paneId),
                                 onRequestNewSession: onRequestNewSession
                             )
@@ -141,6 +143,7 @@ struct LayoutPickerView: View {
             Session(name: "reviewer", status: .stuck)
         ],
         sessionManager: SessionManager(),
+        inputMonitor: InputMonitor(),
         paneManager: PaneManager(),
         onRequestNewSession: {}
     )
diff --git a/apps/desktop/Sources/PlexusOneDesktop/Views/InputIndicatorView.swift b/apps/desktop/Sources/PlexusOneDesktop/Views/InputIndicatorView.swift
@@ -0,0 +1,202 @@
+import SwiftUI
+import AssistantKit
+
+/// Compact indicator showing an input prompt was detected.
+/// Appears as an overlay on the terminal pane.
+struct InputIndicatorView: View {
+    let result: DetectionResult
+    let onDismiss: () -> Void
+
+    @State private var isExpanded = false
+
+    var body: some View {
+        VStack(alignment: .trailing, spacing: 4) {
+            // Compact badge
+            Button(action: { isExpanded.toggle() }) {
+                HStack(spacing: 4) {
+                    Image(systemName: iconName)
+                        .font(.system(size: 10, weight: .bold))
+                    Text(shortLabel)
+                        .font(.system(size: 10, weight: .medium))
+                    Image(systemName: isExpanded ? "chevron.up" : "chevron.down")
+                        .font(.system(size: 8))
+                }
+                .padding(.horizontal, 8)
+                .padding(.vertical, 4)
+                .background(backgroundColor)
+                .foregroundColor(.white)
+                .cornerRadius(4)
+            }
+            .buttonStyle(.plain)
+
+            // Expanded view with actions
+            if isExpanded {
+                VStack(alignment: .leading, spacing: 8) {
+                    // Matched text preview
+                    Text(result.matchedText.trimmingCharacters(in: .whitespacesAndNewlines))
+                        .font(.system(size: 11, design: .monospaced))
+                        .lineLimit(3)
+                        .foregroundColor(.primary)
+
+                    // Quick actions
+                    if !result.suggestedActions.isEmpty {
+                        Divider()
+
+                        HStack(spacing: 8) {
+                            ForEach(Array(result.suggestedActions.prefix(3).enumerated()), id: \.offset) { _, action in
+                                ActionButton(action: action)
+                            }
+
+                            Spacer()
+
+                            Button(action: onDismiss) {
+                                Text("Dismiss")
+                                    .font(.system(size: 10))
+                            }
+                            .buttonStyle(.plain)
+                            .foregroundColor(.secondary)
+                        }
+                    }
+                }
+                .padding(8)
+                .background(Color(nsColor: .controlBackgroundColor))
+                .cornerRadius(6)
+                .shadow(color: .black.opacity(0.2), radius: 4, x: 0, y: 2)
+                .frame(maxWidth: 280)
+            }
+        }
+    }
+
+    private var iconName: String {
+        switch result.pattern.type {
+        case .permission:
+            return "lock.shield"
+        case .yesNo:
+            return "questionmark.circle"
+        case .question:
+            return "questionmark.bubble"
+        case .raisedHand:
+            return "hand.raised"
+        case .continuePrompt:
+            return "arrow.right.circle"
+        case .selection:
+            return "list.number"
+        case .inputCursor:
+            return "keyboard"
+        case .toolUsage:
+            return "gearshape"
+        }
+    }
+
+    private var shortLabel: String {
+        switch result.pattern.type {
+        case .permission:
+            return "Permission"
+        case .yesNo:
+            return "Y/N"
+        case .question:
+            return "Question"
+        case .raisedHand:
+            return "Attention"
+        case .continuePrompt:
+            return "Continue"
+        case .selection:
+            return "Select"
+        case .inputCursor:
+            return "Input"
+        case .toolUsage:
+            return "Tool"
+        }
+    }
+
+    private var backgroundColor: Color {
+        switch result.pattern.type {
+        case .permission:
+            return .orange
+        case .yesNo, .question:
+            return .blue
+        case .raisedHand:
+            return .red
+        case .continuePrompt:
+            return .green
+        case .selection:
+            return .purple
+        case .inputCursor:
+            return .gray
+        case .toolUsage:
+            return Color(nsColor: .systemGray)
+        }
+    }
+}
+
+/// Button for a suggested action
+struct ActionButton: View {
+    let action: SuggestedAction
+
+    var body: some View {
+        Button(action: {
+            // Send the action input to the terminal
+            // This would need to be wired up to the terminal view
+            print("Action: \(action.label) -> send: \(action.input.debugDescription)")
+        }) {
+            HStack(spacing: 2) {
+                Text(action.label)
+                    .font(.system(size: 10, weight: action.isDefault ? .semibold : .regular))
+                if let shortcut = action.shortcut {
+                    Text(shortcut)
+                        .font(.system(size: 9))
+                        .foregroundColor(.secondary)
+                }
+            }
+            .padding(.horizontal, 6)
+            .padding(.vertical, 3)
+            .background(action.isDefault ? Color.accentColor.opacity(0.2) : Color(nsColor: .controlBackgroundColor))
+            .cornerRadius(4)
+            .overlay(
+                RoundedRectangle(cornerRadius: 4)
+                    .stroke(Color(nsColor: .separatorColor), lineWidth: 0.5)
+            )
+        }
+        .buttonStyle(.plain)
+    }
+}
+
+#Preview("Permission Alert") {
+    let permissionPattern = try! InputPattern(
+        id: "test-permission",
+        pattern: "Allow",
+        type: .permission,
+        priority: 100
+    )
+    let result = DetectionResult(
+        pattern: permissionPattern,
+        matchedText: "? Allow Read access to config.json",
+        range: "? Allow Read access to config.json".startIndex..<"? Allow Read access to config.json".endIndex,
+        confidence: 1.0,
+        suggestedActions: [.yes, .no]
+    )
+
+    return InputIndicatorView(result: result, onDismiss: {})
+        .padding()
+        .background(Color(nsColor: .textBackgroundColor))
+}
+
+#Preview("Yes/No Alert") {
+    let yesNoPattern = try! InputPattern(
+        id: "test-yesno",
+        pattern: "Continue",
+        type: .yesNo,
+        priority: 90
+    )
+    let result = DetectionResult(
+        pattern: yesNoPattern,
+        matchedText: "Continue? [Y/n]",
+        range: "Continue? [Y/n]".startIndex..<"Continue? [Y/n]".endIndex,
+        confidence: 1.0,
+        suggestedActions: [.yes, .no]
+    )
+
+    return InputIndicatorView(result: result, onDismiss: {})
+        .padding()
+        .background(Color(nsColor: .textBackgroundColor))
+}
diff --git a/apps/desktop/Sources/PlexusOneDesktop/Views/PaneView.swift b/apps/desktop/Sources/PlexusOneDesktop/Views/PaneView.swift
@@ -1,14 +1,18 @@
 import SwiftUI
+import AssistantKit
 
 /// A single pane with a compact session dropdown header and terminal view
 struct PaneView: View {
     let paneId: Int
     let sessions: [Session]
     let sessionManager: SessionManager
+    let inputMonitor: InputMonitor
     @Binding var attachedSession: Session?
     let onRequestNewSession: () -> Void
 
     @State private var isHovering = false
+    @State private var currentInputAlert: DetectionResult?
+    @State private var isFocused = false
 
     var body: some View {
         VStack(spacing: 0) {
@@ -17,6 +21,7 @@ struct PaneView: View {
                 paneId: paneId,
                 sessions: sessions,
                 currentSession: attachedSession,
+                isFocused: isFocused,
                 onSelectSession: { session in
                     attachedSession = session
                 },
@@ -38,13 +43,28 @@ struct PaneView: View {
 
             // Terminal or detached placeholder
             if attachedSession != nil {
-                AppTerminalViewRepresentable(
-                    attachedSession: $attachedSession,
-                    sessionManager: sessionManager,
-                    onSessionEnded: {
-                        attachedSession = nil
+                ZStack(alignment: .topTrailing) {
+                    AppTerminalViewRepresentable(
+                        attachedSession: $attachedSession,
+                        sessionManager: sessionManager,
+                        inputMonitor: inputMonitor,
+                        onSessionEnded: {
+                            attachedSession = nil
+                        },
+                        onInputDetected: { result in
+                            currentInputAlert = result
+                        }
+                    )
+
+                    // Input indicator overlay
+                    if let alert = currentInputAlert {
+                        InputIndicatorView(
+                            result: alert,
+                            onDismiss: { currentInputAlert = nil }
+                        )
+                        .padding(8)
                     }
-                )
+                }
             } else {
                 // Compact detached state
                 CompactDetachedView(
@@ -60,8 +80,31 @@ struct PaneView: View {
         .cornerRadius(4)
         .overlay(
             RoundedRectangle(cornerRadius: 4)
-                .stroke(Color(nsColor: .separatorColor), lineWidth: 1)
+                .stroke(
+                    isFocused ? Color.accentColor : Color(nsColor: .separatorColor),
+                    lineWidth: isFocused ? 2 : 1
+                )
         )
+        .shadow(color: isFocused ? Color.accentColor.opacity(0.3) : .clear, radius: 4)
+        .onReceive(NotificationCenter.default.publisher(for: .paneFocusChanged)) { notification in
+            guard let userInfo = notification.userInfo,
+                  let sessionId = userInfo["sessionId"] as? UUID,
+                  let focused = userInfo["focused"] as? Bool else {
+                return
+            }
+
+            // Update focus state if this notification is for our session
+            if sessionId == attachedSession?.id {
+                withAnimation(.easeInOut(duration: 0.15)) {
+                    isFocused = focused
+                }
+            } else if focused {
+                // Another pane gained focus, so we lose it
+                withAnimation(.easeInOut(duration: 0.15)) {
+                    isFocused = false
+                }
+            }
+        }
     }
 }
 
@@ -70,13 +113,20 @@ struct PaneHeaderView: View {
     let paneId: Int
     let sessions: [Session]
     let currentSession: Session?
+    let isFocused: Bool
     let onSelectSession: (Session) -> Void
     let onDetach: () -> Void
     let onPopOut: () -> Void
     let onNewSession: () -> Void
 
     var body: some View {
         HStack(spacing: 4) {
+            // Focus indicator dot
+            Circle()
+                .fill(isFocused ? Color.accentColor : Color.clear)
+                .frame(width: 6, height: 6)
+                .padding(.leading, 2)
+
             // Session dropdown
             Menu {
                 if sessions.isEmpty {
@@ -130,10 +180,10 @@ struct PaneHeaderView: View {
 
             Spacer()
 
-            // Pane number indicator
+            // Pane number indicator with focus highlight
             Text("#\(paneId)")
-                .font(.system(size: 9, weight: .medium))
-                .foregroundColor(Color(nsColor: .tertiaryLabelColor))
+                .font(.system(size: 9, weight: isFocused ? .bold : .medium))
+                .foregroundColor(isFocused ? Color.accentColor : Color(nsColor: .tertiaryLabelColor))
                 .padding(.horizontal, 4)
 
             // Pop-out and Detach buttons (only show if attached)
@@ -157,11 +207,11 @@ struct PaneHeaderView: View {
         }
         .padding(.horizontal, 6)
         .padding(.vertical, 4)
-        .background(Color(nsColor: .windowBackgroundColor))
+        .background(isFocused ? Color.accentColor.opacity(0.1) : Color(nsColor: .windowBackgroundColor))
         .overlay(
             Rectangle()
                 .frame(height: 1)
-                .foregroundColor(Color(nsColor: .separatorColor)),
+                .foregroundColor(isFocused ? Color.accentColor.opacity(0.3) : Color(nsColor: .separatorColor)),
             alignment: .bottom
         )
     }
@@ -232,6 +282,7 @@ struct CompactDetachedView: View {
             Session(name: "reviewer", status: .idle)
         ],
         sessionManager: SessionManager(),
+        inputMonitor: InputMonitor(),
         attachedSession: .constant(nil),
         onRequestNewSession: {}
     )
diff --git a/apps/desktop/Sources/PlexusOneDesktop/Views/TerminalViewRepresentable.swift b/apps/desktop/Sources/PlexusOneDesktop/Views/TerminalViewRepresentable.swift
