@lattices/cli 0.3.0 → 0.4.0

package/app/Sources/ScreenMapView.swift

@@ -7,6 +7,9 @@ struct ScreenMapView: View {
     @ObservedObject var controller: ScreenMapController
     var onNavigate: ((AppPage) -> Void)? = nil
     @ObservedObject private var daemon = DaemonServer.shared
+    @ObservedObject private var handsOff = HandsOffSession.shared
+    @ObservedObject private var diagnosticLog = DiagnosticLog.shared
+    @StateObject private var piChat = PiChatSession.shared
     @State private var eventMonitor: Any?
     @State private var mouseDownMonitor: Any?
     @State private var mouseDragMonitor: Any?
@@ -28,7 +31,7 @@ struct ScreenMapView: View {
     @State private var mouseMovedMonitor: Any?
     @State private var sidebarWidth: CGFloat = 180
     @State private var isDraggingSidebar: Bool = false
-    @State private var inspectorWidth: CGFloat = 200
+    @State private var inspectorWidth: CGFloat = 280
     @State private var isDraggingInspector: Bool = false
     @FocusState private var isSearchFieldFocused: Bool
     @State private var searchHoveredDisplayIndex: Int? = nil
@@ -70,13 +73,13 @@ struct ScreenMapView: View {
                     if controller.isSearchActive, let editor = controller.editor {
                         floatingSearchOverlay(editor: editor)
                     }
-                    // Zoom controls — bottom-right corner of canvas
+                    // Viewport controls — bottom-right corner of canvas
                     if let editor = controller.editor {
                         VStack {
                             Spacer()
                             HStack {
                                 Spacer()
-                                canvasZoomControls(editor: editor)
+                                canvasViewportDock(editor: editor)
                                     .padding(10)
                             }
                         }
@@ -84,10 +87,14 @@ struct ScreenMapView: View {
                 }
                 if let editor = controller.editor {
                     panelResizeHandle(isActive: $isDraggingInspector, width: $inspectorWidth,
-                                      range: 160...360, edge: .leading)
+                                      range: 220...480, edge: .leading)
                     inspectorPane(editor: editor)
                 }
             }
+            if piChat.isVisible {
+                PiChatDock(session: piChat)
+                    .transition(.move(edge: .bottom).combined(with: .opacity))
+            }
             footerBar
         }
         .background(Palette.bg)
@@ -111,6 +118,7 @@ struct ScreenMapView: View {
         HStack(spacing: 4) {
             Button {
                 editor.cyclePreviousDisplay()
+                controller.focusViewportPreset(editor.activeViewportPreset ?? .main, flashView: false)
                 controller.flash(editor.focusedDisplay?.label ?? "All displays")
                 controller.objectWillChange.send()
             } label: {
@@ -124,6 +132,7 @@ struct ScreenMapView: View {
 
             Button {
                 editor.focusDisplay(nil)
+                controller.focusViewportPreset(editor.activeViewportPreset ?? .main, flashView: false)
                 controller.objectWillChange.send()
             } label: {
                 displayToolbarPill(name: "All", isActive: editor.focusedDisplayIndex == nil)
@@ -134,6 +143,7 @@ struct ScreenMapView: View {
                 let isActive = editor.focusedDisplayIndex == disp.index
                 Button {
                     editor.focusDisplay(disp.index)
+                    controller.focusViewportPreset(editor.activeViewportPreset ?? .main, flashView: false)
                     controller.objectWillChange.send()
                 } label: {
                     displayToolbarPill(
@@ -147,6 +157,7 @@ struct ScreenMapView: View {
 
             Button {
                 editor.cycleNextDisplay()
+                controller.focusViewportPreset(editor.activeViewportPreset ?? .main, flashView: false)
                 controller.flash(editor.focusedDisplay?.label ?? "All displays")
                 controller.objectWillChange.send()
             } label: {
@@ -256,6 +267,8 @@ struct ScreenMapView: View {
                         .font(Typo.monoBold(9))
                         .foregroundColor(Palette.textMuted)
 
+                    inspectorCanvasContextCard(editor: editor, selectedCount: selectedWindows.count)
+
                     if selectedWindows.isEmpty {
                         VStack(spacing: 8) {
                             Text("No Selection")
@@ -268,7 +281,7 @@ struct ScreenMapView: View {
                                 .lineLimit(3)
                         }
                         .frame(maxWidth: .infinity)
-                        .padding(.top, 40)
+                        .padding(.top, 20)
                     }
 
                     ForEach(selectedWindows) { win in
@@ -284,27 +297,87 @@ struct ScreenMapView: View {
         .frame(width: inspectorWidth)
     }
 
+    private func inspectorCanvasContextCard(editor: ScreenMapEditorState, selectedCount: Int) -> some View {
+        let viewport = editor.viewportWorldRect
+        let world = editor.canvasWorldBounds
+        let scope = editor.focusedDisplay.map { "\(editor.spatialNumber(for: $0.index)). \($0.label)" } ?? "All Displays"
+        let layers = editor.selectedLayers.isEmpty
+            ? "All Layers"
+            : editor.selectedLayers.sorted().map { editor.layerDisplayName(for: $0) }.joined(separator: ", ")
+
+        return VStack(alignment: .leading, spacing: 4) {
+            inspectorRow(label: "Scope", value: scope)
+            inspectorRow(label: "Layers", value: layers)
+            inspectorRow(label: "View", value: "\(Int(viewport.midX)), \(Int(viewport.midY)) · \(Int(viewport.width))×\(Int(viewport.height))")
+            inspectorRow(label: "World", value: "\(Int(world.width))×\(Int(world.height))")
+            inspectorRow(label: "Set", value: controller.activeWindowSet?.name ?? "None")
+            inspectorRow(label: "Select", value: "\(selectedCount) window\(selectedCount == 1 ? "" : "s")")
+        }
+        .padding(8)
+        .background(
+            RoundedRectangle(cornerRadius: 6)
+                .fill(Color.black.opacity(0.25))
+                .overlay(
+                    RoundedRectangle(cornerRadius: 6)
+                        .strokeBorder(Color.white.opacity(0.06), lineWidth: 0.5)
+                )
+        )
+    }
+
     // MARK: - Inspector Window Card
 
     private func inspectorWindowCard(win: ScreenMapWindowEntry, editor: ScreenMapEditorState) -> some View {
-        VStack(alignment: .leading, spacing: 6) {
+        let desktopEntry = DesktopModel.shared.windows[UInt32(win.id)]
+        let ocrText = OcrModel.shared.results[UInt32(win.id)]?.fullText
+        let layerTag = DesktopModel.shared.windowLayerTags[UInt32(win.id)]
+
+        return VStack(alignment: .leading, spacing: 8) {
+            // Header: app + visibility
             HStack(spacing: 5) {
                 Circle()
                     .fill(Self.layerColor(for: win.layer))
                     .frame(width: 6, height: 6)
                 Text(win.app)
-                    .font(Typo.monoBold(10))
+                    .font(Typo.monoBold(11))
                     .foregroundColor(Palette.text)
                     .lineLimit(1)
+                Spacer()
+                if desktopEntry?.isOnScreen == true {
+                    Text("visible")
+                        .font(Typo.monoBold(7))
+                        .foregroundColor(Palette.running)
+                        .padding(.horizontal, 4)
+                        .padding(.vertical, 1)
+                        .background(
+                            RoundedRectangle(cornerRadius: 2)
+                                .fill(Palette.running.opacity(0.1))
+                        )
+                }
             }
+
+            // Title
             if !win.title.isEmpty {
                 Text(win.title)
-                    .font(Typo.mono(9))
+                    .font(Typo.mono(10))
                     .foregroundColor(Palette.textDim)
                     .lineLimit(3)
+                    .textSelection(.enabled)
             }
+
+            // Identity
+            HStack(spacing: 10) {
+                inspectorLabel(label: "wid", value: "\(win.id)")
+                if let entry = desktopEntry {
+                    inspectorLabel(label: "pid", value: "\(entry.pid)")
+                }
+            }
+
+            // Layout info
             VStack(alignment: .leading, spacing: 3) {
                 inspectorRow(label: "Layer", value: editor.layerDisplayName(for: win.layer))
+                if let tag = layerTag {
+                    inspectorRow(label: "Tag", value: tag)
+                }
                 inspectorRow(label: "Display", value: {
                     if let disp = editor.displays.first(where: { $0.index == win.displayIndex }) {
                         return "\(editor.spatialNumber(for: disp.index)). \(disp.label)"
@@ -312,15 +385,32 @@ struct ScreenMapView: View {
                     return "Display \(win.displayIndex)"
                 }())
                 inspectorRow(label: "Size",
-                             value: "\(Int(win.editedFrame.width))×\(Int(win.editedFrame.height))")
+                             value: "\(Int(win.virtualFrame.width))×\(Int(win.virtualFrame.height))")
                 inspectorRow(label: "Position",
-                             value: "(\(Int(win.editedFrame.origin.x)), \(Int(win.editedFrame.origin.y)))")
+                             value: "(\(Int(win.virtualFrame.origin.x)), \(Int(win.virtualFrame.origin.y)))")
                 inspectorRow(label: "Z-Index", value: "\(win.zIndex)")
                 if win.hasEdits {
                     inspectorRow(label: "Original",
                                  value: "\(Int(win.originalFrame.width))×\(Int(win.originalFrame.height))")
                 }
+                if let entry = desktopEntry, !entry.spaceIds.isEmpty {
+                    inspectorRow(label: "Spaces", value: entry.spaceIds.map(String.init).joined(separator: ", "))
+                }
+            }
+
+            // Session
+            if let session = desktopEntry?.latticesSession {
+                HStack(spacing: 4) {
+                    Text("session")
+                        .font(Typo.monoBold(8))
+                        .foregroundColor(Palette.textMuted)
+                    Text(session)
+                        .font(Typo.mono(9))
+                        .foregroundColor(Palette.running)
+                        .lineLimit(1)
+                }
             }
+
             if win.hasEdits {
                 HStack(spacing: 4) {
                     Circle()
@@ -331,8 +421,32 @@ struct ScreenMapView: View {
                         .foregroundColor(Color.orange)
                 }
             }
+
+            // OCR snippet
+            if let ocr = ocrText, !ocr.isEmpty {
+                VStack(alignment: .leading, spacing: 2) {
+                    Text("SCREEN TEXT")
+                        .font(Typo.monoBold(8))
+                        .foregroundColor(Palette.textMuted)
+                    Text(String(ocr.prefix(400)))
+                        .font(Typo.mono(8))
+                        .foregroundColor(Palette.textMuted)
+                        .lineLimit(8)
+                        .textSelection(.enabled)
+                }
+                .padding(6)
+                .background(
+                    RoundedRectangle(cornerRadius: 4)
+                        .fill(Palette.bg.opacity(0.5))
+                )
+            }
+
+            // Window actions — contextual to this card
+            if let entry = desktopEntry {
+                windowCardActions(wid: UInt32(win.id), entry: entry)
+            }
         }
-        .padding(8)
+        .padding(10)
         .background(
             RoundedRectangle(cornerRadius: 6)
                 .fill(Palette.surface)
@@ -343,6 +457,101 @@ struct ScreenMapView: View {
         )
     }
 
+    private func windowCardActions(wid: UInt32, entry: WindowEntry) -> some View {
+        let actions: [(key: String, label: String, action: () -> Void)] = [
+            ("f", "focus", { [controller] in
+                controller.focusWindowOnScreen(wid)
+            }),
+            ("h", "highlight", {
+                WindowTiler.highlightWindowById(wid: wid)
+            }),
+            ("←", "tile left", {
+                WindowTiler.focusWindow(wid: wid, pid: entry.pid)
+                WindowTiler.tileWindowById(wid: wid, pid: entry.pid, to: .left)
+            }),
+            ("→", "tile right", {
+                WindowTiler.focusWindow(wid: wid, pid: entry.pid)
+                WindowTiler.tileWindowById(wid: wid, pid: entry.pid, to: .right)
+            }),
+            ("m", "maximize", {
+                WindowTiler.focusWindow(wid: wid, pid: entry.pid)
+                WindowTiler.tileWindowById(wid: wid, pid: entry.pid, to: .maximize)
+            }),
+            ("r", "rescan", {
+                OcrModel.shared.scanSingle(wid: wid)
+            }),
+            ("c", "copy info", { [controller] in
+                let info = [
+                    "wid: \(wid)",
+                    "app: \(entry.app)",
+                    "title: \(entry.title)",
+                    "pid: \(entry.pid)",
+                    "frame: \(Int(entry.frame.x)),\(Int(entry.frame.y)) \(Int(entry.frame.w))×\(Int(entry.frame.h))",
+                    entry.latticesSession.map { "session: \($0)" },
+                    DesktopModel.shared.windowLayerTags[wid].map { "layer: \($0)" },
+                ].compactMap { $0 }.joined(separator: "\n")
+                NSPasteboard.general.clearContents()
+                NSPasteboard.general.setString(info, forType: .string)
+                controller.flash("Copied")
+            }),
+        ]
+
+        let columns = [GridItem(.flexible()), GridItem(.flexible())]
+
+        return VStack(spacing: 0) {
+            Rectangle().fill(Palette.border).frame(height: 0.5)
+                .padding(.horizontal, -10)
+                .padding(.top, 4)
+
+            LazyVGrid(columns: columns, spacing: 3) {
+                ForEach(Array(actions.enumerated()), id: \.offset) { _, item in
+                    let isHov = hoveredShelfAction == "w_\(wid)_\(item.label)"
+                    Button(action: item.action) {
+                        HStack(spacing: 4) {
+                            Text(item.key)
+                                .font(.system(size: 8))
+                                .foregroundColor(Self.shelfGreen)
+                                .frame(width: 14)
+                            Text(item.label)
+                                .font(Typo.mono(8))
+                                .foregroundColor(isHov ? Palette.text : Palette.textDim)
+                                .lineLimit(1)
+                            Spacer()
+                        }
+                        .padding(.horizontal, 6)
+                        .padding(.vertical, 4)
+                        .background(
+                            RoundedRectangle(cornerRadius: 4)
+                                .fill(isHov ? Palette.surfaceHov : Palette.surface)
+                                .overlay(
+                                    RoundedRectangle(cornerRadius: 4)
+                                        .strokeBorder(isHov ? Palette.borderLit : Palette.border, lineWidth: 0.5)
+                                )
+                        )
+                        .contentShape(Rectangle())
+                    }
+                    .buttonStyle(.plain)
+                    .onHover { h in
+                        let key = "w_\(wid)_\(item.label)"
+                        hoveredShelfAction = h ? key : (hoveredShelfAction == key ? nil : hoveredShelfAction)
+                    }
+                }
+            }
+            .padding(.top, 6)
+        }
+    }
+
+    private func inspectorLabel(label: String, value: String) -> some View {
+        HStack(spacing: 3) {
+            Text(label)
+                .font(Typo.monoBold(8))
+                .foregroundColor(Palette.textMuted)
+            Text(value)
+                .font(Typo.mono(9))
+                .foregroundColor(Palette.textDim)
+        }
+    }
+
     // MARK: - Floating Search Overlay
 
     private func floatingSearchOverlay(editor: ScreenMapEditorState) -> some View {
@@ -663,7 +872,7 @@ struct ScreenMapView: View {
         }
     }
 
-    // MARK: - Inspector Action Tray
+    // MARK: - Inspector Bottom Rail
 
     private func inspectorActionTray(editor: ScreenMapEditorState) -> some View {
         let actions: [(key: String, label: String, action: () -> Void)] = [
@@ -672,6 +881,8 @@ struct ScreenMapView: View {
             ("t", "tile", { [controller] in controller.tileLayer() }),
             ("d", "distrib", { [controller] in controller.distributeVisible() }),
             ("g", "grow", { [controller] in controller.fitAvailableSpace() }),
+            ("u", "set", { [controller] in controller.createWindowSetFromSelection() }),
+            ("m", "project", { [controller] in controller.materializeViewport() }),
             ("c", "merge", { [controller] in controller.consolidateLayers() }),
             ("f", "flatten", { [controller] in controller.flattenLayers() }),
             ("v", "preview", { [controller] in controller.previewLayer() }),
@@ -751,8 +962,7 @@ struct ScreenMapView: View {
                 }
                 if isZoomed {
                     Button {
-                        editor.resetZoomPan()
-                        controller.flash("Fit all")
+                        controller.focusViewportPreset(.overview)
                     } label: {
                         HStack(spacing: 4) {
                             Text("r")
@@ -850,10 +1060,171 @@ struct ScreenMapView: View {
             }
             .padding(.horizontal, 6)
             .padding(.bottom, 4)
+
+            Rectangle().fill(Palette.border).frame(height: 0.5)
+            inspectorVoiceTray
+
+            Rectangle().fill(Palette.border).frame(height: 0.5)
+            inspectorLogTray
         }
         .background(Color(red: 0.06, green: 0.06, blue: 0.07))
     }
 
+    private var inspectorVoiceStateLabel: String {
+        switch handsOff.state {
+        case .idle: return handsOff.lastTranscript == nil ? "ready" : "idle"
+        case .connecting: return "connecting"
+        case .listening: return "listening"
+        case .thinking: return "thinking"
+        }
+    }
+
+    private var inspectorVoiceColor: Color {
+        switch handsOff.state {
+        case .idle: return Palette.textMuted.opacity(0.55)
+        case .connecting: return Palette.detach
+        case .listening: return Palette.running
+        case .thinking: return Palette.detach
+        }
+    }
+
+    private var visibleDiagnosticEntries: [DiagnosticLog.Entry] {
+        let entries = diagnosticLog.entries
+        let tail = 8
+        if entries.count <= tail { return entries }
+        return Array(entries.suffix(tail))
+    }
+
+    private var inspectorVoiceTray: some View {
+        VStack(alignment: .leading, spacing: 6) {
+            HStack(spacing: 6) {
+                Text("VOICE")
+                    .font(Typo.monoBold(8))
+                    .foregroundColor(Palette.textMuted)
+                Spacer()
+                Circle()
+                    .fill(inspectorVoiceColor)
+                    .frame(width: 6, height: 6)
+                Text(inspectorVoiceStateLabel)
+                    .font(Typo.mono(8))
+                    .foregroundColor(inspectorVoiceColor)
+                Text("V")
+                    .font(Typo.monoBold(7))
+                    .foregroundColor(Palette.textDim)
+                    .padding(.horizontal, 4)
+                    .padding(.vertical, 2)
+                    .background(
+                        RoundedRectangle(cornerRadius: 3)
+                            .fill(Palette.surface)
+                            .overlay(
+                                RoundedRectangle(cornerRadius: 3)
+                                    .strokeBorder(Palette.border, lineWidth: 0.5)
+                            )
+                    )
+            }
+
+            if let transcript = handsOff.lastTranscript, !transcript.isEmpty {
+                VStack(alignment: .leading, spacing: 2) {
+                    Text("heard")
+                        .font(Typo.mono(7))
+                        .foregroundColor(Palette.textMuted)
+                    Text(transcript)
+                        .font(Typo.mono(8))
+                        .foregroundColor(Palette.text)
+                        .lineLimit(2)
+                }
+            } else {
+                Text("Voice activity will show up here. Press V to talk.")
+                    .font(Typo.mono(8))
+                    .foregroundColor(Palette.textMuted)
+                    .lineLimit(2)
+            }
+
+            if let response = handsOff.lastResponse, !response.isEmpty {
+                VStack(alignment: .leading, spacing: 2) {
+                    Text("response")
+                        .font(Typo.mono(7))
+                        .foregroundColor(Palette.textMuted)
+                    Text(response)
+                        .font(Typo.mono(8))
+                        .foregroundColor(Palette.textDim)
+                        .lineLimit(2)
+                }
+            }
+        }
+        .padding(.horizontal, 8)
+        .padding(.vertical, 8)
+    }
+
+    private var inspectorLogTray: some View {
+        VStack(alignment: .leading, spacing: 6) {
+            HStack(spacing: 6) {
+                Text("LOGS")
+                    .font(Typo.monoBold(8))
+                    .foregroundColor(Palette.textMuted)
+                Spacer()
+                if !visibleDiagnosticEntries.isEmpty {
+                    Button("copy") {
+                        let text = visibleDiagnosticEntries.map { entry in
+                            "\(Self.inspectorLogTimeFormatter.string(from: entry.time)) \(entry.icon) \(entry.message)"
+                        }.joined(separator: "\n")
+                        NSPasteboard.general.clearContents()
+                        NSPasteboard.general.setString(text, forType: .string)
+                        controller.flash("Copied logs")
+                    }
+                    .font(Typo.mono(7))
+                    .foregroundColor(Palette.textMuted)
+                    .buttonStyle(.plain)
+                }
+                Button("open") {
+                    DiagnosticWindow.shared.toggle()
+                }
+                .font(Typo.mono(7))
+                .foregroundColor(Palette.textMuted)
+                .buttonStyle(.plain)
+            }
+
+            if visibleDiagnosticEntries.isEmpty {
+                Text("Waiting for diagnostic activity.")
+                    .font(Typo.mono(8))
+                    .foregroundColor(Palette.textMuted)
+            } else {
+                VStack(alignment: .leading, spacing: 5) {
+                    ForEach(visibleDiagnosticEntries) { entry in
+                        HStack(alignment: .top, spacing: 6) {
+                            Text(Self.inspectorLogTimeFormatter.string(from: entry.time))
+                                .font(Typo.mono(7))
+                                .foregroundColor(Palette.textMuted)
+                                .frame(width: 52, alignment: .leading)
+                            Text(entry.icon)
+                                .font(Typo.monoBold(7))
+                                .foregroundColor(inspectorLogColor(entry.level))
+                                .frame(width: 8, alignment: .leading)
+                            Text(entry.message)
+                                .font(Typo.mono(8))
+                                .foregroundColor(inspectorLogColor(entry.level))
+                                .lineLimit(2)
+                                .frame(maxWidth: .infinity, alignment: .leading)
+                        }
+                    }
+                }
+                .frame(maxWidth: .infinity, alignment: .leading)
+            }
+        }
+        .padding(.horizontal, 8)
+        .padding(.vertical, 8)
+        .frame(maxWidth: .infinity, alignment: .leading)
+    }
+
+    private func inspectorLogColor(_ level: DiagnosticLog.Entry.Level) -> Color {
+        switch level {
+        case .info: return Palette.textDim
+        case .success: return Palette.running
+        case .warning: return Palette.detach
+        case .error: return Palette.kill
+        }
+    }
+
     private func inspectorRow(label: String, value: String) -> some View {
         HStack(alignment: .top, spacing: 0) {
             Text(label)
@@ -891,6 +1262,13 @@ struct ScreenMapView: View {
                     .font(Typo.mono(9))
                     .foregroundColor(Palette.textDim)
 
+                Text("·")
+                    .foregroundColor(Palette.textMuted)
+
+                Text(editor.viewportPresetSummary.uppercased())
+                    .font(Typo.monoBold(8))
+                    .foregroundColor(Palette.textMuted)
+
                 if let focused = editor.focusedDisplay {
                     Text("·")
                         .foregroundColor(Palette.textMuted)
@@ -1095,6 +1473,10 @@ struct ScreenMapView: View {
             }
             .coordinateSpace(name: "layerSidebar")
 
+            Spacer(minLength: 8)
+            windowSetsSection(editor: editor)
+            Spacer(minLength: 8)
+            canvasExplorer(editor: editor)
             Spacer(minLength: 8)
             sidebarMiniMap(editor: editor)
         }
@@ -1112,6 +1494,119 @@ struct ScreenMapView: View {
         return wins.sorted { $0.zIndex < $1.zIndex }
     }
 
+    private func windowSetsSection(editor: ScreenMapEditorState) -> some View {
+        let sets = controller.windowSets
+        let canSave = !controller.selectedWindowIds.isEmpty
+
+        return VStack(alignment: .leading, spacing: 4) {
+            HStack(spacing: 6) {
+                Text("SETS")
+                    .font(Typo.monoBold(8))
+                    .foregroundColor(Palette.textMuted)
+                Text("\(sets.count)")
+                    .font(Typo.mono(7))
+                    .foregroundColor(Palette.textDim)
+                Spacer()
+                Button {
+                    controller.createWindowSetFromSelection()
+                } label: {
+                    Text("u save")
+                        .font(Typo.monoBold(7))
+                        .foregroundColor(canSave ? Self.shelfGreen : Palette.textMuted)
+                        .padding(.horizontal, 5)
+                        .padding(.vertical, 3)
+                        .background(
+                            RoundedRectangle(cornerRadius: 4)
+                                .fill(canSave ? Self.shelfGreen.opacity(0.12) : Palette.surface.opacity(0.7))
+                                .overlay(
+                                    RoundedRectangle(cornerRadius: 4)
+                                        .strokeBorder(canSave ? Self.shelfGreen.opacity(0.25) : Palette.border, lineWidth: 0.5)
+                                )
+                        )
+                }
+                .buttonStyle(.plain)
+                .disabled(!canSave)
+            }
+
+            if sets.isEmpty {
+                Text("Save a selection to create a reusable cluster.")
+                    .font(Typo.mono(7))
+                    .foregroundColor(Palette.textMuted)
+                    .padding(.top, 2)
+            } else {
+                ForEach(sets) { set in
+                    windowSetRow(set: set, editor: editor)
+                }
+            }
+        }
+        .padding(6)
+        .background(
+            RoundedRectangle(cornerRadius: 6)
+                .fill(Color.black.opacity(0.4))
+                .overlay(
+                    RoundedRectangle(cornerRadius: 6)
+                        .strokeBorder(Color.white.opacity(0.06), lineWidth: 0.5)
+                )
+        )
+    }
+
+    private func windowSetRow(set: ScreenMapWindowSet, editor: ScreenMapEditorState) -> some View {
+        let liveCount = editor.windows(matching: set.windowIds).count
+        let isActive = controller.activeWindowSetID == set.id
+
+        return HStack(spacing: 6) {
+            Button {
+                controller.focusWindowSet(set)
+            } label: {
+                HStack(spacing: 6) {
+                    Circle()
+                        .fill(isActive ? Self.shelfGreen : Palette.textMuted.opacity(0.7))
+                        .frame(width: 6, height: 6)
+                    VStack(alignment: .leading, spacing: 1) {
+                        Text(set.name)
+                            .font(Typo.monoBold(8))
+                            .foregroundColor(isActive ? Palette.text : Palette.textDim)
+                            .lineLimit(1)
+                        Text("\(liveCount) window\(liveCount == 1 ? "" : "s")")
+                            .font(Typo.mono(7))
+                            .foregroundColor(Palette.textMuted)
+                            .lineLimit(1)
+                    }
+                    Spacer()
+                }
+                .padding(.horizontal, 6)
+                .padding(.vertical, 4)
+                .background(
+                    RoundedRectangle(cornerRadius: 4)
+                        .fill(isActive ? Self.shelfGreen.opacity(0.08) : Palette.surface.opacity(0.35))
+                        .overlay(
+                            RoundedRectangle(cornerRadius: 4)
+                                .strokeBorder(isActive ? Self.shelfGreen.opacity(0.2) : Color.white.opacity(0.04), lineWidth: 0.5)
+                        )
+                )
+            }
+            .buttonStyle(.plain)
+
+            Button {
+                controller.deleteWindowSet(set)
+            } label: {
+                Image(systemName: "xmark")
+                    .font(.system(size: 7, weight: .bold))
+                    .foregroundColor(Palette.textMuted)
+                    .frame(width: 16, height: 16)
+                    .background(
+                        RoundedRectangle(cornerRadius: 3)
+                            .fill(Palette.surface.opacity(0.8))
+                            .overlay(
+                                RoundedRectangle(cornerRadius: 3)
+                                    .strokeBorder(Palette.border, lineWidth: 0.5)
+                            )
+                    )
+            }
+            .buttonStyle(.plain)
+        }
+    }
+
     private func layerTreeHeader(label: String, count: Int, isActive: Bool, color: Color,
                                    isExpandable: Bool = false, isExpanded: Bool = false,
                                    onToggleExpand: (() -> Void)? = nil,
@@ -1165,8 +1660,8 @@ struct ScreenMapView: View {
 
             let bboxPad: CGFloat = (!isFocused && displays.count > 1) ? 40 : 0
             let bbox: CGRect = {
-                if let focused = editor?.focusedDisplay {
-                    return focused.cgRect
+                if let editor {
+                    return editor.canvasWorldBounds
                 }
                 guard !displays.isEmpty else {
                     let s = NSScreen.main?.frame ?? CGRect(x: 0, y: 0, width: 1920, height: 1080)
@@ -1220,10 +1715,11 @@ struct ScreenMapView: View {
             .frame(width: mapW, height: mapH)
             .offset(x: centerX + panOffset.x, y: centerY + panOffset.y)
             .onAppear {
-                cacheGeometry(editor: editor, fitScale: fitScale, scale: effScale,
-                              offsetX: centerX, offsetY: centerY,
-                              screenSize: CGSize(width: screenW, height: screenH),
-                              bboxOrigin: bboxOriginPt)
+                syncCanvasGeometry(editor: editor, fitScale: fitScale, scale: effScale,
+                                   offsetX: centerX, offsetY: centerY,
+                                   viewportSize: CGSize(width: max(geo.size.width - 16, 1), height: max(geo.size.height - 16, 1)),
+                                   screenSize: CGSize(width: screenW, height: screenH),
+                                   bboxOrigin: bboxOriginPt)
             }
             .onChange(of: geo.size) { _ in
                 let newFitScale = min((geo.size.width - 24) / screenW, (geo.size.height - 16) / screenH)
@@ -1232,10 +1728,32 @@ struct ScreenMapView: View {
                 let newMapH = screenH * newEffScale
                 let newCX = (geo.size.width - newMapW) / 2
                 let newCY = (geo.size.height - newMapH) / 2
-                cacheGeometry(editor: editor, fitScale: newFitScale, scale: newEffScale,
-                              offsetX: newCX, offsetY: newCY,
-                              screenSize: CGSize(width: screenW, height: screenH),
-                              bboxOrigin: bboxOriginPt)
+                syncCanvasGeometry(editor: editor, fitScale: newFitScale, scale: newEffScale,
+                                   offsetX: newCX, offsetY: newCY,
+                                   viewportSize: CGSize(width: max(geo.size.width - 16, 1), height: max(geo.size.height - 16, 1)),
+                                   screenSize: CGSize(width: screenW, height: screenH),
+                                   bboxOrigin: bboxOriginPt)
+            }
+            .onChange(of: bbox) { _ in
+                syncCanvasGeometry(editor: editor, fitScale: fitScale, scale: effScale,
+                                   offsetX: centerX, offsetY: centerY,
+                                   viewportSize: CGSize(width: max(geo.size.width - 16, 1), height: max(geo.size.height - 16, 1)),
+                                   screenSize: CGSize(width: screenW, height: screenH),
+                                   bboxOrigin: bboxOriginPt)
+            }
+            .onChange(of: zoomLevel) { _ in
+                syncCanvasGeometry(editor: editor, fitScale: fitScale, scale: effScale,
+                                   offsetX: centerX, offsetY: centerY,
+                                   viewportSize: CGSize(width: max(geo.size.width - 16, 1), height: max(geo.size.height - 16, 1)),
+                                   screenSize: CGSize(width: screenW, height: screenH),
+                                   bboxOrigin: bboxOriginPt)
+            }
+            .onChange(of: editor?.canvasNavigationRevision ?? 0) { _ in
+                syncCanvasGeometry(editor: editor, fitScale: fitScale, scale: effScale,
+                                   offsetX: centerX, offsetY: centerY,
+                                   viewportSize: CGSize(width: max(geo.size.width - 16, 1), height: max(geo.size.height - 16, 1)),
+                                   screenSize: CGSize(width: screenW, height: screenH),
+                                   bboxOrigin: bboxOriginPt)
             }
         }
         .padding(8)
@@ -1371,7 +1889,7 @@ struct ScreenMapView: View {
 
     @ViewBuilder
     private func windowTile(win: ScreenMapWindowEntry, editor: ScreenMapEditorState?, scale: CGFloat, bboxOrigin: CGPoint = .zero) -> some View {
-        let f = win.editedFrame
+        let f = win.virtualFrame
         let x = (f.origin.x - bboxOrigin.x) * scale
         let y = (f.origin.y - bboxOrigin.y) * scale
         let w = max(f.width * scale, 4)
@@ -1426,7 +1944,7 @@ struct ScreenMapView: View {
                                     .lineLimit(1)
                             }
                             if h > 50 {
-                                Text("\(Int(win.originalFrame.width))x\(Int(win.originalFrame.height))")
+                                Text("\(Int(win.virtualFrame.width))x\(Int(win.virtualFrame.height))")
                                     .font(Typo.mono(6))
                                     .foregroundColor(Palette.textMuted)
                             }
@@ -1527,13 +2045,51 @@ struct ScreenMapView: View {
         .allowsHitTesting(false)
     }
 
-    // MARK: - Canvas Zoom Controls
+    // MARK: - Canvas Viewport Controls
+
+    private func canvasViewportDock(editor: ScreenMapEditorState) -> some View {
+        VStack(alignment: .trailing, spacing: 6) {
+            HStack(spacing: 4) {
+                ForEach(ScreenMapViewportPreset.allCases) { preset in
+                    canvasViewportPresetPill(preset, isActive: editor.activeViewportPreset == preset)
+                }
+            }
+            canvasZoomControls(editor: editor)
+        }
+    }
+
+    private func canvasViewportPresetPill(_ preset: ScreenMapViewportPreset, isActive: Bool) -> some View {
+        Button {
+            controller.focusViewportPreset(preset)
+        } label: {
+            HStack(spacing: 4) {
+                Text(preset.keyHint)
+                    .font(Typo.monoBold(8))
+                    .foregroundColor(isActive ? Color.black : Palette.textDim)
+                Text(preset.shortLabel)
+                    .font(Typo.monoBold(8))
+                    .foregroundColor(isActive ? Color.black : Palette.text)
+            }
+            .padding(.horizontal, 7)
+            .padding(.vertical, 4)
+            .background(
+                RoundedRectangle(cornerRadius: 5)
+                    .fill(isActive ? Self.shelfGreen.opacity(0.95) : Color(red: 0.1, green: 0.1, blue: 0.11).opacity(0.88))
+                    .overlay(
+                        RoundedRectangle(cornerRadius: 5)
+                            .strokeBorder(isActive ? Self.shelfGreen.opacity(0.95) : Palette.border, lineWidth: 0.5)
+                    )
+            )
+        }
+        .buttonStyle(.plain)
+    }
 
     private func canvasZoomControls(editor: ScreenMapEditorState) -> some View {
         let pct = Int(editor.zoomLevel * 100)
         return HStack(spacing: 0) {
             Button {
                 let newZoom = max(ScreenMapEditorState.minZoom, editor.zoomLevel - 0.25)
+                editor.activeViewportPreset = nil
                 editor.zoomLevel = newZoom
                 editor.objectWillChange.send()
                 controller.objectWillChange.send()
@@ -1548,9 +2104,7 @@ struct ScreenMapView: View {
             Rectangle().fill(Palette.border).frame(width: 0.5, height: 12)
 
             Button {
-                editor.resetZoomPan()
-                controller.flash("Fit all")
-                controller.objectWillChange.send()
+                controller.focusViewportPreset(.overview)
             } label: {
                 Text("\(pct)%")
                     .font(Typo.mono(9))
@@ -1563,6 +2117,7 @@ struct ScreenMapView: View {
 
             Button {
                 let newZoom = min(ScreenMapEditorState.maxZoom, editor.zoomLevel + 0.25)
+                editor.activeViewportPreset = nil
                 editor.zoomLevel = newZoom
                 editor.objectWillChange.send()
                 controller.objectWillChange.send()
@@ -1710,6 +2265,11 @@ struct ScreenMapView: View {
 
                 // Right: docs + logs
                 HStack(spacing: 10) {
+                    statusBarButton(icon: "terminal", label: piChat.isVisible ? "Hide Pi" : "Pi") {
+                        withAnimation(.easeOut(duration: 0.16)) {
+                            piChat.toggleVisibility()
+                        }
+                    }
                     statusBarButton(icon: "book", label: "Docs") {
                         onNavigate?(.docs)
                     }
@@ -1765,78 +2325,229 @@ struct ScreenMapView: View {
     @ViewBuilder
     private func sidebarMiniMap(editor: ScreenMapEditorState) -> some View {
         let displays = editor.displays
+        let windows = editor.focusedDisplayIndex != nil ? editor.focusedVisibleWindows : editor.visibleWindows
+        let world = editor.canvasWorldBounds
+        let viewport = editor.viewportWorldRect
+        let miniW: CGFloat = sidebarWidth - 28
+        let miniH: CGFloat = 118
+        let scaleW = miniW / max(world.width, 1)
+        let scaleH = miniH / max(world.height, 1)
+        let scale = min(scaleW, scaleH)
+        let drawW = world.width * scale
+        let drawH = world.height * scale
+        let offsetX = (miniW - drawW) / 2
+        let offsetY = (miniH - drawH) / 2
 
-        if displays.count > 1 {
-            let union: CGRect = {
-                var u = displays[0].cgRect
-                for d in displays.dropFirst() { u = u.union(d.cgRect) }
-                return u
-            }()
-            let miniW: CGFloat = sidebarWidth - 28
-            let scaleW = miniW / max(union.width, 1)
-            let scaleH: CGFloat = 80 / max(union.height, 1)
-            let scale = min(scaleW, scaleH)
-            let contentW = union.width * scale
-            let contentH = union.height * scale
-
-            VStack(spacing: 4) {
-                ZStack {
-                    ZStack(alignment: .topLeading) {
-                        ForEach(displays, id: \.index) { disp in
-                            let isFocused = editor.focusedDisplayIndex == disp.index
-                            let dx = (disp.cgRect.origin.x - union.origin.x) * scale
-                            let dy = (disp.cgRect.origin.y - union.origin.y) * scale
-                            let dw = disp.cgRect.width * scale
-                            let dh = disp.cgRect.height * scale
-                            let inset: CGFloat = 1.5
-                            let fontSize: CGFloat = min(dw, dh) > 28 ? 11 : (min(dw, dh) > 16 ? 9 : 7)
-
-                            Button {
-                                editor.focusDisplay(disp.index)
-                                controller.objectWillChange.send()
-                            } label: {
-                                ZStack {
-                                    RoundedRectangle(cornerRadius: 3)
-                                        .fill(isFocused ? Palette.running.opacity(0.15) : Color.white.opacity(0.06))
-                                    RoundedRectangle(cornerRadius: 3)
-                                        .strokeBorder(isFocused ? Palette.running.opacity(0.7) : Color.white.opacity(0.15), lineWidth: isFocused ? 1.5 : 0.5)
-                                    Text("\(editor.spatialNumber(for: disp.index))")
-                                        .font(.system(size: fontSize, weight: .bold, design: .monospaced))
-                                        .foregroundColor(isFocused ? Palette.running : Color.white.opacity(0.35))
-                                }
-                                .frame(width: max(dw - inset * 2, 12), height: max(dh - inset * 2, 12))
-                            }
-                            .buttonStyle(.plain)
-                            .offset(x: dx + inset, y: dy + inset)
-                        }
+        VStack(alignment: .leading, spacing: 6) {
+            HStack(spacing: 6) {
+                Text("MAP")
+                    .font(Typo.monoBold(8))
+                    .foregroundColor(Palette.textMuted)
+                Spacer()
+                Text("drag to pan")
+                    .font(Typo.mono(7))
+                    .foregroundColor(Palette.textMuted)
+            }
+
+            ZStack(alignment: .topLeading) {
+                RoundedRectangle(cornerRadius: 6)
+                    .fill(Color.black.opacity(0.28))
+
+                ZStack(alignment: .topLeading) {
+                    RoundedRectangle(cornerRadius: 5)
+                        .fill(Palette.bg.opacity(0.35))
+                        .frame(width: drawW, height: drawH)
+                        .offset(x: offsetX, y: offsetY)
+
+                    ForEach(displays, id: \.index) { disp in
+                        let dx = (disp.cgRect.origin.x - world.origin.x) * scale + offsetX
+                        let dy = (disp.cgRect.origin.y - world.origin.y) * scale + offsetY
+                        let dw = disp.cgRect.width * scale
+                        let dh = disp.cgRect.height * scale
+                        let isFocused = editor.focusedDisplayIndex == nil || editor.focusedDisplayIndex == disp.index
+
+                        RoundedRectangle(cornerRadius: 3)
+                            .fill(isFocused ? Color.white.opacity(0.05) : Color.white.opacity(0.02))
+                            .overlay(
+                                RoundedRectangle(cornerRadius: 3)
+                                    .strokeBorder(
+                                        editor.focusedDisplayIndex == disp.index ? Palette.running.opacity(0.55) : Color.white.opacity(0.12),
+                                        lineWidth: editor.focusedDisplayIndex == disp.index ? 1 : 0.5
+                                    )
+                            )
+                            .frame(width: max(dw, 12), height: max(dh, 12))
+                            .offset(x: dx, y: dy)
                     }
-                    .frame(width: contentW, height: contentH)
+
+                    ForEach(Array(windows.sorted(by: { $0.zIndex > $1.zIndex }).enumerated()), id: \.element.id) { _, win in
+                        let rect = win.virtualFrame
+                        let x = (rect.origin.x - world.origin.x) * scale + offsetX
+                        let y = (rect.origin.y - world.origin.y) * scale + offsetY
+                        let w = max(rect.width * scale, 2)
+                        let h = max(rect.height * scale, 2)
+                        let isSelected = controller.selectedWindowIds.contains(win.id)
+
+                        RoundedRectangle(cornerRadius: 1.5)
+                            .fill((isSelected ? Palette.running : Self.layerColor(for: win.layer)).opacity(isSelected ? 0.35 : 0.18))
+                            .overlay(
+                                RoundedRectangle(cornerRadius: 1.5)
+                                    .strokeBorder(isSelected ? Palette.running.opacity(0.85) : Color.white.opacity(0.12), lineWidth: isSelected ? 1 : 0.5)
+                            )
+                            .frame(width: w, height: h)
+                            .offset(x: x, y: y)
+                    }
+
+                    let viewportX = (viewport.origin.x - world.origin.x) * scale + offsetX
+                    let viewportY = (viewport.origin.y - world.origin.y) * scale + offsetY
+                    let viewportW = max(viewport.width * scale, 12)
+                    let viewportH = max(viewport.height * scale, 12)
+
+                    RoundedRectangle(cornerRadius: 4)
+                        .strokeBorder(Palette.running.opacity(0.9), lineWidth: 1.25)
+                        .background(
+                            RoundedRectangle(cornerRadius: 4)
+                                .fill(Palette.running.opacity(0.08))
+                        )
+                        .frame(width: viewportW, height: viewportH)
+                        .offset(x: viewportX, y: viewportY)
                 }
-                .frame(width: miniW, height: max(contentH, 48), alignment: .topLeading)
-                .clipped()
+            }
+            .frame(width: miniW, height: miniH)
+            .clipShape(RoundedRectangle(cornerRadius: 6))
+            .contentShape(Rectangle())
+            .gesture(
+                DragGesture(minimumDistance: 0)
+                    .onChanged { value in
+                        let localX = min(max(value.location.x - offsetX, 0), drawW)
+                        let localY = min(max(value.location.y - offsetY, 0), drawH)
+                        let worldPoint = CGPoint(
+                            x: world.origin.x + localX / max(scale, 0.0001),
+                            y: world.origin.y + localY / max(scale, 0.0001)
+                        )
+                        controller.recenterViewport(at: worldPoint)
+                    }
+            )
 
-                Button {
-                    editor.focusDisplay(nil)
-                    controller.objectWillChange.send()
-                } label: {
-                    Text("ALL")
-                        .font(Typo.monoBold(7))
-                        .foregroundColor(editor.focusedDisplayIndex == nil ? Palette.running : Palette.textDim)
-                        .frame(maxWidth: .infinity)
-                        .padding(.vertical, 2)
+            HStack(spacing: 6) {
+                mapScopePill("ALL", isActive: editor.focusedDisplayIndex == nil) {
+                    controller.focusCanvas(on: editor.canvasWorldBounds, focusDisplay: nil, zoomToFit: true)
                 }
-                .buttonStyle(.plain)
+                ForEach(editor.spatialDisplayOrder, id: \.index) { disp in
+                    mapScopePill("\(editor.spatialNumber(for: disp.index))", isActive: editor.focusedDisplayIndex == disp.index) {
+                        controller.focusCanvas(
+                            on: editor.canvasExplorerRegions.first(where: { $0.kind == .display && $0.displayIndex == disp.index })?.rect ?? disp.cgRect,
+                            focusDisplay: disp.index,
+                            zoomToFit: true
+                        )
+                    }
+                }
+            }
+        }
+        .padding(6)
+        .background(
+            RoundedRectangle(cornerRadius: 6)
+                .fill(Color.black.opacity(0.4))
+                .overlay(
+                    RoundedRectangle(cornerRadius: 6)
+                        .strokeBorder(Color.white.opacity(0.06), lineWidth: 0.5)
+                )
+        )
+    }
+
+    private func canvasExplorer(editor: ScreenMapEditorState) -> some View {
+        let regions = editor.canvasExplorerRegions
+
+        return VStack(alignment: .leading, spacing: 4) {
+            HStack {
+                Text("EXPLORER")
+                    .font(Typo.monoBold(8))
+                    .foregroundColor(Palette.textMuted)
+                Spacer()
+                if let viewport = controller.editor?.viewportWorldRect {
+                    Text("\(Int(viewport.midX)),\(Int(viewport.midY))")
+                        .font(Typo.mono(7))
+                        .foregroundColor(Palette.textMuted)
+                }
+            }
+
+            ForEach(regions.prefix(8)) { region in
+                canvasExplorerRow(region: region)
             }
-            .padding(6)
+        }
+        .padding(6)
+        .background(
+            RoundedRectangle(cornerRadius: 6)
+                .fill(Color.black.opacity(0.4))
+                .overlay(
+                    RoundedRectangle(cornerRadius: 6)
+                        .strokeBorder(Color.white.opacity(0.06), lineWidth: 0.5)
+                )
+        )
+    }
+
+    private func canvasExplorerRow(region: ScreenMapCanvasRegion) -> some View {
+        let tint: Color = {
+            switch region.kind {
+            case .overview: return Palette.running
+            case .display: return Color.blue.opacity(0.8)
+            case .layer: return Self.layerColor(for: region.layer ?? 0)
+            }
+        }()
+
+        return Button {
+            controller.jumpToCanvasRegion(region)
+            controller.flash(region.title)
+        } label: {
+            HStack(spacing: 6) {
+                Circle()
+                    .fill(tint)
+                    .frame(width: 6, height: 6)
+                VStack(alignment: .leading, spacing: 1) {
+                    Text(region.title)
+                        .font(Typo.monoBold(8))
+                        .foregroundColor(Palette.text)
+                        .lineLimit(1)
+                    Text(region.subtitle)
+                        .font(Typo.mono(7))
+                        .foregroundColor(Palette.textMuted)
+                        .lineLimit(1)
+                }
+                Spacer()
+                Text("\(region.count)")
+                    .font(Typo.mono(7))
+                    .foregroundColor(Palette.textDim)
+            }
+            .padding(.horizontal, 6)
+            .padding(.vertical, 4)
             .background(
-                RoundedRectangle(cornerRadius: 6)
-                    .fill(Color.black.opacity(0.4))
+                RoundedRectangle(cornerRadius: 4)
+                    .fill(tint.opacity(0.08))
                     .overlay(
-                        RoundedRectangle(cornerRadius: 6)
-                            .strokeBorder(Color.white.opacity(0.06), lineWidth: 0.5)
+                        RoundedRectangle(cornerRadius: 4)
+                            .strokeBorder(tint.opacity(0.18), lineWidth: 0.5)
                     )
             )
         }
+        .buttonStyle(.plain)
+    }
+
+    private func mapScopePill(_ label: String, isActive: Bool, action: @escaping () -> Void) -> some View {
+        Button(action: action) {
+            Text(label)
+                .font(Typo.monoBold(7))
+                .foregroundColor(isActive ? Palette.running : Palette.textDim)
+                .padding(.horizontal, 6)
+                .padding(.vertical, 3)
+                .background(
+                    RoundedRectangle(cornerRadius: 4)
+                        .fill(isActive ? Palette.running.opacity(0.12) : Palette.surface.opacity(0.7))
+                        .overlay(
+                            RoundedRectangle(cornerRadius: 4)
+                                .strokeBorder(isActive ? Palette.running.opacity(0.3) : Palette.border, lineWidth: 0.5)
+                        )
+                )
+        }
+        .buttonStyle(.plain)
     }
 
     // MARK: - Flash Overlay
@@ -1880,14 +2591,17 @@ struct ScreenMapView: View {
 
     // MARK: - Helpers
 
-    private func cacheGeometry(editor: ScreenMapEditorState?, fitScale: CGFloat? = nil, scale: CGFloat,
-                               offsetX: CGFloat, offsetY: CGFloat,
-                               screenSize: CGSize, bboxOrigin: CGPoint = .zero) {
+    private func syncCanvasGeometry(editor: ScreenMapEditorState?, fitScale: CGFloat? = nil, scale: CGFloat,
+                                    offsetX: CGFloat, offsetY: CGFloat,
+                                    viewportSize: CGSize,
+                                    screenSize: CGSize, bboxOrigin: CGPoint = .zero) {
         if let fs = fitScale { editor?.fitScale = fs }
         editor?.scale = scale
         editor?.mapOrigin = CGPoint(x: offsetX, y: offsetY)
+        editor?.viewportSize = viewportSize
         editor?.screenSize = screenSize
         editor?.bboxOrigin = bboxOrigin
+        controller.applyPendingCanvasNavigationIfNeeded()
     }
 
     // MARK: - Layer Colors
@@ -1896,6 +2610,12 @@ struct ScreenMapView: View {
         .green, .cyan, .orange, .purple, .pink, .yellow, .mint, .indigo
     ]
 
+    private static let inspectorLogTimeFormatter: DateFormatter = {
+        let formatter = DateFormatter()
+        formatter.dateFormat = "HH:mm:ss"
+        return formatter
+    }()
+
     private static func layerColor(for layer: Int) -> Color {
         layerColors[layer % layerColors.count]
     }
@@ -1904,10 +2624,10 @@ struct ScreenMapView: View {
         guard let disp = displays.first(where: { $0.index == win.displayIndex }) else { return nil }
         let screenW = disp.cgRect.width
         let screenH = disp.cgRect.height
-        let relX = win.originalFrame.origin.x - disp.cgRect.origin.x
-        let relY = win.originalFrame.origin.y - disp.cgRect.origin.y
-        let winW = win.originalFrame.width
-        let winH = win.originalFrame.height
+        let relX = win.virtualFrame.origin.x - disp.cgRect.origin.x
+        let relY = win.virtualFrame.origin.y - disp.cgRect.origin.y
+        let winW = win.virtualFrame.width
+        let winH = win.virtualFrame.height
         let tolerance: CGFloat = 30
 
         for pos in TilePosition.allCases {
@@ -1975,6 +2695,9 @@ struct ScreenMapView: View {
             // Only handle keys when our window is the key window
             guard let win = ScreenMapWindowController.shared.nsWindow,
                   win.isKeyWindow else { return event }
+            if isEditableTextResponder(win.firstResponder) {
+                return event
+            }
             // Track space key for canvas drag-to-pan
             if event.keyCode == 49 && !controller.isSearchActive {
                 if event.type == .keyDown && !event.isARepeat {
@@ -1994,6 +2717,20 @@ struct ScreenMapView: View {
         }
     }
 
+    private func isEditableTextResponder(_ responder: NSResponder?) -> Bool {
+        if let textView = responder as? NSTextView {
+            return textView.isEditable || textView.isFieldEditor
+        }
+
+        if let textField = responder as? NSTextField {
+            return textField.isEditable
+        }
+
+        guard let responder else { return false }
+        let className = NSStringFromClass(type(of: responder))
+        return className.contains("FieldEditor") || className.contains("TextView")
+    }
+
     private func removeKeyHandler() {
         if let monitor = eventMonitor {
             NSEvent.removeMonitor(monitor)
@@ -2038,6 +2775,7 @@ struct ScreenMapView: View {
             if isSpaceHeld, let start = spaceDragStart, let editor = controller.editor {
                 let dx = event.locationInWindow.x - start.x
                 let dy = event.locationInWindow.y - start.y
+                editor.activeViewportPreset = nil
                 editor.panOffset = CGPoint(x: spaceDragPanStart.x + dx, y: spaceDragPanStart.y - dy)
                 editor.objectWillChange.send()
                 controller.objectWillChange.send()
@@ -2053,7 +2791,7 @@ struct ScreenMapView: View {
             if editor.draggingWindowId != hitId {
                 editor.draggingWindowId = hitId
                 if let idx = editor.windows.firstIndex(where: { $0.id == hitId }) {
-                    editor.dragStartFrame = editor.windows[idx].editedFrame
+                    editor.dragStartFrame = editor.windows[idx].virtualFrame
                 }
                 controller.selectSingle(hitId)
             }
@@ -2110,7 +2848,7 @@ struct ScreenMapView: View {
                 newFrame.size.height = max(minH, startFrame.height + screenDy)
             }
 
-            editor.windows[idx].editedFrame = newFrame
+            editor.syncLayoutFrame(at: idx, to: newFrame)
             editor.objectWillChange.send()
             controller.objectWillChange.send()
             return nil
@@ -2197,11 +2935,13 @@ struct ScreenMapView: View {
                 let newPanX = cursorFromCenter.x - ratio * (cursorFromCenter.x - editor.panOffset.x)
                 let newPanY = cursorFromCenter.y - ratio * (cursorFromCenter.y - editor.panOffset.y)
 
+                editor.activeViewportPreset = nil
                 editor.zoomLevel = newZoom
                 editor.panOffset = CGPoint(x: newPanX, y: newPanY)
                 editor.objectWillChange.send()
                 controller.objectWillChange.send()
             } else {
+                editor.activeViewportPreset = nil
                 editor.panOffset = CGPoint(
                     x: editor.panOffset.x + event.scrollingDeltaX,
                     y: editor.panOffset.y - event.scrollingDeltaY
@@ -2289,7 +3029,7 @@ struct ScreenMapView: View {
         let windowPool = editor.focusedDisplayIndex != nil ? editor.focusedVisibleWindows : editor.windows
         let sorted = windowPool.sorted(by: { $0.zIndex < $1.zIndex })
         for win in sorted {
-            let f = win.editedFrame
+            let f = win.virtualFrame
             let mapRect = CGRect(
                 x: (f.origin.x - bboxOrig.x) * effScale,
                 y: (f.origin.y - bboxOrig.y) * effScale,
@@ -2320,7 +3060,7 @@ struct ScreenMapView: View {
         let windowPool = editor.focusedDisplayIndex != nil ? editor.focusedVisibleWindows : editor.windows
         let sorted = windowPool.sorted(by: { $0.zIndex < $1.zIndex })
         for win in sorted {
-            let f = win.editedFrame
+            let f = win.virtualFrame
             let mapRect = CGRect(
                 x: (f.origin.x - bboxOrig.x) * effScale,
                 y: (f.origin.y - bboxOrig.y) * effScale,
@@ -2468,7 +3208,7 @@ struct ScreenMapPreviewOverlay: View {
             Color.black.opacity(0.88)
 
             ForEach(windows) { win in
-                let f = win.editedFrame
+                let f = win.virtualFrame
                 let x = f.origin.x - screenCGOrigin.x
                 let y = f.origin.y - screenCGOrigin.y
                 let w = f.width