@wangyaoshen/remux 0.3.8-dev.29e114b

package/apps/macos/Sources/Remux/Views/SplitTree/MarkdownPanel.swift

@@ -0,0 +1,277 @@
+import SwiftUI
+import AppKit
+import Foundation
+
+/// Markdown file viewer panel for the split pane system.
+/// Renders .md files using SwiftUI's AttributedString with markdown parsing.
+/// Supports file picker and auto-reload on file change (FSEvents).
+///
+/// Conforms to PanelProtocol.
+/// Adapted from Marked.app / MacDown conceptual design.
+@MainActor
+final class MarkdownPanel: PanelProtocol {
+    let id: UUID
+    private(set) var isFocused = false
+    private(set) var filePath: URL?
+    private(set) var content: String = ""
+    private(set) var fileName: String = "Markdown"
+
+    var title: String { fileName }
+    var canClose: Bool { true }
+
+    /// Called when the content changes (for view refresh).
+    var onContentChange: (() -> Void)?
+
+    /// File system event source for auto-reload.
+    nonisolated(unsafe) private var fsEventStream: FSEventStreamRef?
+
+    init(id: UUID = UUID(), filePath: URL? = nil) {
+        self.id = id
+        if let filePath {
+            self.filePath = filePath
+            self.fileName = filePath.lastPathComponent
+            loadFile(at: filePath)
+            watchFile(at: filePath)
+        }
+    }
+
+    deinit {
+        if let stream = fsEventStream {
+            FSEventStreamStop(stream)
+            FSEventStreamInvalidate(stream)
+            FSEventStreamRelease(stream)
+        }
+    }
+
+    func focus() { isFocused = true }
+    func blur() { isFocused = false }
+
+    // MARK: - File operations
+
+    func openFile() {
+        let panel = NSOpenPanel()
+        panel.allowedContentTypes = [.init(filenameExtension: "md")!]
+        panel.allowsMultipleSelection = false
+        panel.canChooseDirectories = false
+
+        panel.begin { [weak self] response in
+            guard response == .OK, let url = panel.url else { return }
+            Task { @MainActor in
+                self?.setFile(url)
+            }
+        }
+    }
+
+    func setFile(_ url: URL) {
+        stopWatching()
+        filePath = url
+        fileName = url.lastPathComponent
+        loadFile(at: url)
+        watchFile(at: url)
+    }
+
+    private func loadFile(at url: URL) {
+        do {
+            content = try String(contentsOf: url, encoding: .utf8)
+            onContentChange?()
+        } catch {
+            content = "Failed to load file: \(error.localizedDescription)"
+            onContentChange?()
+        }
+    }
+
+    // MARK: - File watching (FSEvents)
+
+    private func watchFile(at url: URL) {
+        let dirPath = url.deletingLastPathComponent().path as CFString
+        var context = FSEventStreamContext()
+
+        let rawSelf = Unmanaged.passUnretained(self).toOpaque()
+        context.info = rawSelf
+
+        let callback: FSEventStreamCallback = { _, info, numEvents, eventPaths, _, _ in
+            guard let info else { return }
+            let panel = Unmanaged<MarkdownPanel>.fromOpaque(info).takeUnretainedValue()
+            let count = numEvents
+            _ = count
+            Task { @MainActor in
+                if let path = panel.filePath {
+                    panel.loadFile(at: path)
+                }
+            }
+        }
+
+        var paths = [dirPath] as CFArray
+        let stream = FSEventStreamCreate(
+            nil,
+            callback,
+            &context,
+            paths,
+            FSEventStreamEventId(kFSEventStreamEventIdSinceNow),
+            1.0,  // 1 second latency
+            FSEventStreamCreateFlags(kFSEventStreamCreateFlagFileEvents | kFSEventStreamCreateFlagUseCFTypes)
+        )
+
+        if let stream {
+            fsEventStream = stream
+            FSEventStreamScheduleWithRunLoop(stream, CFRunLoopGetMain(), CFRunLoopMode.defaultMode.rawValue)
+            FSEventStreamStart(stream)
+        }
+    }
+
+    private func stopWatching() {
+        if let stream = fsEventStream {
+            FSEventStreamStop(stream)
+            FSEventStreamInvalidate(stream)
+            FSEventStreamRelease(stream)
+            fsEventStream = nil
+        }
+    }
+}
+
+// MARK: - MarkdownPanelView (SwiftUI)
+
+/// SwiftUI view wrapping a MarkdownPanel with toolbar and rendered content.
+struct MarkdownPanelView: View {
+    @State private var panel: MarkdownPanel
+    @State private var refreshID: UUID = UUID()
+
+    init(panel: MarkdownPanel) {
+        _panel = State(initialValue: panel)
+    }
+
+    var body: some View {
+        VStack(spacing: 0) {
+            // Toolbar
+            HStack(spacing: 8) {
+                Image(systemName: "doc.text")
+                    .foregroundStyle(.secondary)
+
+                Text(panel.fileName)
+                    .font(.system(size: 12, weight: .medium))
+                    .lineLimit(1)
+
+                Spacer()
+
+                Button(action: { panel.openFile() }) {
+                    Image(systemName: "folder")
+                        .font(.system(size: 11))
+                }
+                .buttonStyle(.borderless)
+                .help("Open Markdown File")
+
+                if panel.filePath != nil {
+                    Button(action: { reloadContent() }) {
+                        Image(systemName: "arrow.clockwise")
+                            .font(.system(size: 11))
+                    }
+                    .buttonStyle(.borderless)
+                    .help("Reload")
+                }
+            }
+            .padding(.horizontal, 10)
+            .padding(.vertical, 6)
+            .background(.bar)
+
+            Divider()
+
+            // Content
+            if panel.content.isEmpty && panel.filePath == nil {
+                ContentUnavailableView(
+                    "No File Open",
+                    systemImage: "doc.text",
+                    description: Text("Click the folder icon to open a Markdown file.")
+                )
+            } else {
+                ScrollView {
+                    MarkdownRenderedContent(markdown: panel.content)
+                        .padding(16)
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                        .id(refreshID)
+                }
+            }
+        }
+        .onAppear {
+            panel.onContentChange = {
+                refreshID = UUID()
+            }
+        }
+    }
+
+    private func reloadContent() {
+        if let path = panel.filePath {
+            panel.setFile(path)
+            refreshID = UUID()
+        }
+    }
+}
+
+/// Renders markdown text as attributed content using SwiftUI's built-in markdown parser.
+struct MarkdownRenderedContent: View {
+    let markdown: String
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 8) {
+            // Split by blank lines to create paragraph blocks
+            let blocks = markdown.components(separatedBy: "\n\n")
+            ForEach(Array(blocks.enumerated()), id: \.offset) { _, block in
+                let trimmed = block.trimmingCharacters(in: .whitespacesAndNewlines)
+                if trimmed.hasPrefix("# ") {
+                    Text(trimmed.dropFirst(2))
+                        .font(.title)
+                        .fontWeight(.bold)
+                        .padding(.top, 8)
+                } else if trimmed.hasPrefix("## ") {
+                    Text(trimmed.dropFirst(3))
+                        .font(.title2)
+                        .fontWeight(.semibold)
+                        .padding(.top, 6)
+                } else if trimmed.hasPrefix("### ") {
+                    Text(trimmed.dropFirst(4))
+                        .font(.title3)
+                        .fontWeight(.medium)
+                        .padding(.top, 4)
+                } else if trimmed.hasPrefix("```") {
+                    // Code block
+                    let code = trimmed
+                        .replacingOccurrences(of: "```\\w*\n?", with: "", options: .regularExpression)
+                        .replacingOccurrences(of: "```", with: "")
+                    Text(code)
+                        .font(.system(size: 12, design: .monospaced))
+                        .padding(10)
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                        .background(Color.primary.opacity(0.05))
+                        .cornerRadius(6)
+                } else if trimmed.hasPrefix("- ") || trimmed.hasPrefix("* ") {
+                    // List items
+                    let items = trimmed.components(separatedBy: "\n")
+                    ForEach(Array(items.enumerated()), id: \.offset) { _, item in
+                        let cleaned = item
+                            .replacingOccurrences(of: "^[\\-\\*]\\s+", with: "", options: .regularExpression)
+                        HStack(alignment: .top, spacing: 6) {
+                            Text("\u{2022}")
+                                .foregroundStyle(.secondary)
+                            if let attrStr = try? AttributedString(markdown: cleaned) {
+                                Text(attrStr)
+                            } else {
+                                Text(cleaned)
+                            }
+                        }
+                    }
+                } else if trimmed.hasPrefix("---") || trimmed.hasPrefix("***") {
+                    Divider()
+                        .padding(.vertical, 4)
+                } else if !trimmed.isEmpty {
+                    // Regular paragraph with inline markdown
+                    if let attrStr = try? AttributedString(markdown: trimmed) {
+                        Text(attrStr)
+                            .textSelection(.enabled)
+                    } else {
+                        Text(trimmed)
+                            .textSelection(.enabled)
+                    }
+                }
+            }
+        }
+    }
+}

package/apps/macos/Sources/Remux/Views/SplitTree/PanelProtocol.swift

@@ -0,0 +1,14 @@
+import Foundation
+
+/// Protocol for panels displayed in split panes.
+/// TerminalPanel is the primary conformer; BrowserPanel, MarkdownPanel, etc.
+/// can be added later.
+@MainActor
+protocol PanelProtocol: Identifiable {
+    var id: UUID { get }
+    var title: String { get }
+    var canClose: Bool { get }
+
+    func focus()
+    func blur()
+}

package/apps/macos/Sources/Remux/Views/SplitTree/SplitNode.swift

@@ -0,0 +1,149 @@
+import Foundation
+
+/// Recursive binary tree for split pane layout.
+/// Adapted from ghostty-org/ghostty SplitNode design pattern.
+indirect enum SplitNode: Identifiable, Sendable {
+    case leaf(LeafData)
+    case branch(BranchData)
+
+    struct LeafData: Identifiable, Sendable {
+        var id: UUID
+        var tabIndex: Int
+        var panelType: PanelType
+
+        init(id: UUID = UUID(), tabIndex: Int, panelType: PanelType = .terminal) {
+            self.id = id
+            self.tabIndex = tabIndex
+            self.panelType = panelType
+        }
+    }
+
+    struct BranchData: Identifiable, Sendable {
+        var id: UUID
+        var orientation: Orientation
+        var ratio: CGFloat
+        var first: SplitNode
+        var second: SplitNode
+
+        init(
+            id: UUID = UUID(),
+            orientation: Orientation,
+            ratio: CGFloat = 0.5,
+            first: SplitNode,
+            second: SplitNode
+        ) {
+            self.id = id
+            self.orientation = orientation
+            self.ratio = ratio
+            self.first = first
+            self.second = second
+        }
+    }
+
+    enum Orientation: String, Sendable, Codable {
+        case horizontal  // side by side (split right)
+        case vertical    // top and bottom (split down)
+    }
+
+    var id: UUID {
+        switch self {
+        case .leaf(let data): data.id
+        case .branch(let data): data.id
+        }
+    }
+
+    // MARK: - Tree operations
+
+    /// Find a leaf by its ID.
+    func findLeaf(id: UUID) -> LeafData? {
+        switch self {
+        case .leaf(let data):
+            return data.id == id ? data : nil
+        case .branch(let data):
+            return data.first.findLeaf(id: id) ?? data.second.findLeaf(id: id)
+        }
+    }
+
+    /// Collect all leaf nodes in order.
+    var allLeaves: [LeafData] {
+        switch self {
+        case .leaf(let data):
+            return [data]
+        case .branch(let data):
+            return data.first.allLeaves + data.second.allLeaves
+        }
+    }
+
+    /// Split a leaf node into a branch with the original leaf and a new leaf.
+    func split(leafID: UUID, orientation: Orientation, newTabIndex: Int, panelType: PanelType = .terminal) -> SplitNode {
+        switch self {
+        case .leaf(let data):
+            guard data.id == leafID else { return self }
+            let newLeaf = SplitNode.leaf(LeafData(tabIndex: newTabIndex, panelType: panelType))
+            return .branch(BranchData(
+                orientation: orientation,
+                first: self,
+                second: newLeaf
+            ))
+
+        case .branch(var data):
+            data.first = data.first.split(leafID: leafID, orientation: orientation, newTabIndex: newTabIndex, panelType: panelType)
+            data.second = data.second.split(leafID: leafID, orientation: orientation, newTabIndex: newTabIndex, panelType: panelType)
+            return .branch(data)
+        }
+    }
+
+    /// Remove a leaf node by its ID. Returns nil if the tree becomes empty.
+    func removeLeaf(id leafID: UUID) -> SplitNode? {
+        switch self {
+        case .leaf(let data):
+            return data.id == leafID ? nil : self
+
+        case .branch(let data):
+            let firstResult = data.first.removeLeaf(id: leafID)
+            let secondResult = data.second.removeLeaf(id: leafID)
+
+            // If either child was removed, return the remaining one
+            if firstResult == nil { return secondResult }
+            if secondResult == nil { return firstResult }
+
+            // Both still exist — reconstruct the branch
+            var newData = data
+            newData.first = firstResult!
+            newData.second = secondResult!
+            return .branch(newData)
+        }
+    }
+
+    /// Update the split ratio for a specific branch.
+    func updateRatio(branchID: UUID, ratio: CGFloat) -> SplitNode {
+        switch self {
+        case .leaf:
+            return self
+        case .branch(var data):
+            if data.id == branchID {
+                data.ratio = max(0.1, min(0.9, ratio))
+                return .branch(data)
+            }
+            data.first = data.first.updateRatio(branchID: branchID, ratio: ratio)
+            data.second = data.second.updateRatio(branchID: branchID, ratio: ratio)
+            return .branch(data)
+        }
+    }
+
+    /// Get the next leaf after the given leaf ID (for focus navigation).
+    func nextLeaf(after leafID: UUID) -> LeafData? {
+        let leaves = allLeaves
+        guard let idx = leaves.firstIndex(where: { $0.id == leafID }) else { return nil }
+        let nextIdx = (idx + 1) % leaves.count
+        return leaves[nextIdx]
+    }
+
+    /// Get the previous leaf before the given leaf ID.
+    func previousLeaf(before leafID: UUID) -> LeafData? {
+        let leaves = allLeaves
+        guard let idx = leaves.firstIndex(where: { $0.id == leafID }) else { return nil }
+        let prevIdx = (idx - 1 + leaves.count) % leaves.count
+        return leaves[prevIdx]
+    }
+}

package/apps/macos/Sources/Remux/Views/SplitTree/SplitView.swift

@@ -0,0 +1,234 @@
+import SwiftUI
+import RemuxKit
+
+/// Recursive SwiftUI view that renders a SplitNode tree.
+/// Leaf nodes render a TerminalContainerView; branch nodes render two
+/// children with a draggable divider between them.
+///
+/// Architecture ref: ghostty-org/ghostty SplitView (recursive split pattern)
+struct SplitView: View {
+    let node: SplitNode
+    @Binding var focusedLeafID: UUID?
+    var onSplit: (UUID, SplitNode.Orientation) -> Void
+    var onClose: (UUID) -> Void
+    var onRatioChange: (UUID, CGFloat) -> Void
+
+    var body: some View {
+        switch node {
+        case .leaf(let data):
+            SplitLeafView(
+                data: data,
+                isFocused: focusedLeafID == data.id,
+                onFocus: { focusedLeafID = data.id }
+            )
+
+        case .branch(let data):
+            SplitBranchView(
+                data: data,
+                focusedLeafID: $focusedLeafID,
+                onSplit: onSplit,
+                onClose: onClose,
+                onRatioChange: onRatioChange
+            )
+        }
+    }
+}
+
+/// Renders a single leaf in the split tree — dispatches by panel type.
+struct SplitLeafView: View {
+    let data: SplitNode.LeafData
+    let isFocused: Bool
+    var onFocus: () -> Void
+
+    /// Browser panels keyed by leaf ID (kept alive across re-renders).
+    @State private var browserPanel: BrowserPanel?
+    /// Markdown panels keyed by leaf ID.
+    @State private var markdownPanel: MarkdownPanel?
+
+    var body: some View {
+        panelContent
+            .overlay(alignment: .topLeading) {
+                if isFocused {
+                    RoundedRectangle(cornerRadius: 0)
+                        .stroke(Color.accentColor.opacity(0.4), lineWidth: 2)
+                        .allowsHitTesting(false)
+                }
+            }
+            .contentShape(Rectangle())
+            .onTapGesture {
+                onFocus()
+            }
+    }
+
+    @ViewBuilder
+    private var panelContent: some View {
+        switch data.panelType {
+        case .terminal:
+            TerminalContainerView()
+
+        case .browser:
+            let panel = getBrowserPanel()
+            BrowserPanelView(panel: panel)
+
+        case .markdown:
+            let panel = getMarkdownPanel()
+            MarkdownPanelView(panel: panel)
+        }
+    }
+
+    private func getBrowserPanel() -> BrowserPanel {
+        if let existing = browserPanel { return existing }
+        let panel = BrowserPanel(id: data.id)
+        DispatchQueue.main.async { browserPanel = panel }
+        return panel
+    }
+
+    private func getMarkdownPanel() -> MarkdownPanel {
+        if let existing = markdownPanel { return existing }
+        let panel = MarkdownPanel(id: data.id)
+        DispatchQueue.main.async { markdownPanel = panel }
+        return panel
+    }
+}
+
+/// Renders a branch node: two children separated by a draggable divider.
+struct SplitBranchView: View {
+    let data: SplitNode.BranchData
+    @Binding var focusedLeafID: UUID?
+    var onSplit: (UUID, SplitNode.Orientation) -> Void
+    var onClose: (UUID) -> Void
+    var onRatioChange: (UUID, CGFloat) -> Void
+
+    @State private var dividerDragging = false
+
+    var body: some View {
+        GeometryReader { geometry in
+            let isHorizontal = data.orientation == .horizontal
+            let totalSize = isHorizontal ? geometry.size.width : geometry.size.height
+            let dividerThickness: CGFloat = 4
+            let availableSize = totalSize - dividerThickness
+            let firstSize = availableSize * data.ratio
+            let secondSize = availableSize * (1 - data.ratio)
+
+            if isHorizontal {
+                HStack(spacing: 0) {
+                    // First child
+                    SplitView(
+                        node: data.first,
+                        focusedLeafID: $focusedLeafID,
+                        onSplit: onSplit,
+                        onClose: onClose,
+                        onRatioChange: onRatioChange
+                    )
+                    .frame(width: max(30, firstSize))
+
+                    // Draggable divider
+                    SplitDivider(isHorizontal: true, isDragging: $dividerDragging)
+                        .gesture(
+                            DragGesture()
+                                .onChanged { value in
+                                    dividerDragging = true
+                                    let newRatio = (firstSize + value.translation.width) / availableSize
+                                    onRatioChange(data.id, newRatio)
+                                }
+                                .onEnded { _ in
+                                    dividerDragging = false
+                                }
+                        )
+
+                    // Second child
+                    SplitView(
+                        node: data.second,
+                        focusedLeafID: $focusedLeafID,
+                        onSplit: onSplit,
+                        onClose: onClose,
+                        onRatioChange: onRatioChange
+                    )
+                    .frame(width: max(30, secondSize))
+                }
+            } else {
+                VStack(spacing: 0) {
+                    // First child
+                    SplitView(
+                        node: data.first,
+                        focusedLeafID: $focusedLeafID,
+                        onSplit: onSplit,
+                        onClose: onClose,
+                        onRatioChange: onRatioChange
+                    )
+                    .frame(height: max(30, firstSize))
+
+                    // Draggable divider
+                    SplitDivider(isHorizontal: false, isDragging: $dividerDragging)
+                        .gesture(
+                            DragGesture()
+                                .onChanged { value in
+                                    dividerDragging = true
+                                    let newRatio = (firstSize + value.translation.height) / availableSize
+                                    onRatioChange(data.id, newRatio)
+                                }
+                                .onEnded { _ in
+                                    dividerDragging = false
+                                }
+                        )
+
+                    // Second child
+                    SplitView(
+                        node: data.second,
+                        focusedLeafID: $focusedLeafID,
+                        onSplit: onSplit,
+                        onClose: onClose,
+                        onRatioChange: onRatioChange
+                    )
+                    .frame(height: max(30, secondSize))
+                }
+            }
+        }
+    }
+}
+
+/// The visual divider between split panes, with hover and drag states.
+struct SplitDivider: View {
+    let isHorizontal: Bool
+    @Binding var isDragging: Bool
+    @State private var isHovering = false
+
+    var body: some View {
+        Rectangle()
+            .fill(fillColor)
+            .frame(
+                width: isHorizontal ? 4 : nil,
+                height: isHorizontal ? nil : 4
+            )
+            .onHover { hovering in
+                isHovering = hovering
+                if hovering {
+                    NSCursor.resizeLeftRight.push()
+                } else {
+                    NSCursor.pop()
+                }
+            }
+            .onContinuousHover { phase in
+                switch phase {
+                case .active:
+                    if isHorizontal {
+                        NSCursor.resizeLeftRight.set()
+                    } else {
+                        NSCursor.resizeUpDown.set()
+                    }
+                case .ended:
+                    NSCursor.arrow.set()
+                }
+            }
+    }
+
+    private var fillColor: Color {
+        if isDragging {
+            return Color.accentColor.opacity(0.6)
+        } else if isHovering {
+            return Color.accentColor.opacity(0.3)
+        } else {
+            return Color.primary.opacity(0.08)
+        }
+    }
+}

package/apps/macos/Sources/Remux/Views/SplitTree/TerminalPanel.swift

@@ -0,0 +1,26 @@
+import Foundation
+
+/// Terminal panel conforming to PanelProtocol.
+/// Wraps the terminal state for a single pane in the split tree.
+@MainActor
+final class TerminalPanel: PanelProtocol {
+    let id: UUID
+    let tabIndex: Int
+    private(set) var isFocused = false
+
+    var title: String { "Terminal \(tabIndex)" }
+    var canClose: Bool { true }
+
+    init(id: UUID = UUID(), tabIndex: Int) {
+        self.id = id
+        self.tabIndex = tabIndex
+    }
+
+    func focus() {
+        isFocused = true
+    }
+
+    func blur() {
+        isFocused = false
+    }
+}