flea-qml 0.0.0-stage → 0.2.0

package/ui/TabDragGeometry.qml

@@ -0,0 +1,60 @@
+import QtQuick
+import Quickshell
+import Quickshell.Io
+
+// Wayland window positions are not QWindow positions. Match the one source client
+// by pid using Theme's hyprctl Process pattern, once per lift, never on motion.
+Item {
+    id: root
+    property string token: ""
+    property string queryToken: ""
+    property bool queryDrained: true
+    property var rect: null
+    property var strip: null
+
+    function begin(lift, band) {
+        root.token = lift
+        root.rect = null
+        root.strip = band
+        // An old query drains before the latest token starts its own query.
+        if (query.running || !root.queryDrained)
+            return
+        root.queryDrained = false
+        root.queryToken = lift
+        query.running = true
+    }
+
+    // Exit must clear running and drain old stdout before the next token starts.
+    function restartLatest() {
+        if (!query.running && root.queryDrained && root.queryToken !== root.token) root.begin(root.token, root.strip)
+    }
+
+    Process {
+        id: query
+        command: ["hyprctl", "clients", "-j"]
+        onExited: Qt.callLater(root.restartLatest)
+        stdout: StdioCollector {
+            waitForEnd: true
+            onStreamFinished: {
+                root.queryDrained = true
+                Qt.callLater(root.restartLatest)
+                if (root.queryToken !== root.token)
+                    return
+                try {
+                    // Sample input: [{"pid":111,"at":[0,0],"size":[900,500],"mapped":true,"hidden":false}].
+                    var clients = JSON.parse(text)
+                    var matches = clients.filter(function (client) {
+                        return String(client.pid) === String(Quickshell.processId)
+                            && client.mapped !== false && client.hidden !== true
+                    })
+                    if (matches.length === 1) {
+                        var client = matches[0]
+                        if (client.at && client.size && isFinite(client.at[0]) && isFinite(client.at[1])
+                                && client.size[0] > 0 && client.size[1] > 0)
+                            root.rect = { x: client.at[0], y: client.at[1], width: client.size[0], height: client.size[1] }
+                    }
+                } catch (error) { root.rect = null }
+            }
+        }
+    }
+}

package/ui/TagMenuMark.qml

@@ -0,0 +1,52 @@
+import QtQuick
+import "js/Tags.js" as Tags
+
+// A Tags flyout row's rule-14 box and swatch, built only for those rows; the box is the root so it anchors as a sibling of the hint.
+Item {
+    id: root
+    required property Item row
+    required property Item mark
+    required property Item hint
+    readonly property var tagRow: root.row.entry.tagRow || ({ swatch: "", fallback: false, state: Tags.ABSENT, digit: "" })
+    readonly property color ink: root.row.labelColor
+    // The thinnest mixed bar.
+    readonly property int mixedBarMin: 2
+    visible: root.row.entry.tagRow !== undefined
+    anchors.right: root.hint.left
+    anchors.rightMargin: Theme.spacing.gap
+    anchors.verticalCenter: parent.verticalCenter
+    width: Tags.SWATCH_SIZE
+    height: Tags.SWATCH_SIZE
+
+    Rectangle {
+        anchors.fill: parent
+        color: "transparent"
+        border.width: Theme.spacing.hairline
+        border.color: root.ink
+        opacity: root.row.available ? 1 : Theme.disabledOpacity
+    }
+    Glyph {
+        anchors.fill: parent
+        visible: root.tagRow.state === Tags.APPLIED
+        name: "check"
+        color: root.ink
+    }
+    Rectangle {
+        visible: root.tagRow.state === Tags.MIXED
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        height: Math.max(root.mixedBarMin, Theme.spacing.hairline * 2)
+        color: root.ink
+    }
+    // Reparented to the mark slot, so the swatch is centred in it as the glyph would be.
+    TagSwatch {
+        parent: root.mark
+        anchors.centerIn: parent
+        visible: root.visible
+        swatch: root.tagRow.swatch
+        fallback: root.tagRow.fallback
+        digit: root.tagRow.digit
+        tagColors: Theme.tag.menuColors
+    }
+}

package/ui/TagRailSection.qml

@@ -0,0 +1,53 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import qs.Commons
+import "js/Tags.js" as Tags
+
+// The rail's TAGS section: the heading and one row per tag in use. The rail builds it once, when the setting is on and a tag is in use.
+Column {
+    id: root
+    required property var sidebar
+    width: parent.width
+    // A rail that follows a pane with no tag in use draws no heading, and the network gap reserves no height for it.
+    visible: sidebar.placesState.showTags === true && root.entries.length > 0
+    height: root.visible ? root.implicitHeight : 0
+    // Guarded as Sidebar.tagsListed is, because the rail can move to a pane that has built no tag state.
+    readonly property var entries: Tags.railEntries(root.sidebar.navigationPane !== null && root.sidebar.navigationPane.tagState !== null
+        ? root.sidebar.navigationPane.tagState.inUse : ({}))
+    // Where this section's first row stands among the rail's entries.
+    readonly property int base: root.sidebar.placesEntries.length - root.entries.length
+    function itemAt(i) { return tagRepeater.itemAt(i) }
+    // The Loader sizes its item to the 13 px slot, so the 14 px swatch is a child the Loader leaves alone.
+    Component {
+        id: markComponent
+        Item {
+            id: slot
+            property var entry: ({})
+            TagSwatch {
+                anchors.centerIn: parent
+                swatch: slot.entry.swatch || ""
+                fallback: Theme.tag.fallback
+                digit: slot.entry.digit || ""
+                tagColors: Theme.tag.menuColors
+            }
+        }
+    }
+
+    RailHeading {
+        text: "TAGS"
+        topExtra: Style.spacing.panelGap
+    }
+    Repeater {
+        id: tagRepeater
+        model: root.entries
+        delegate: SidebarRow {
+            lit: index + root.base === root.sidebar.litIndex
+            highlighted: index + root.base === root.sidebar.highlightedIndex
+            cursor: root.sidebar.cursorDrawn && index + root.base === root.sidebar.cursorIndex
+            focused: root.sidebar.focused
+            tagMark: markComponent
+            onActivated: function (idx) { root.sidebar.activate(idx + root.base) }
+        }
+    }
+}

package/ui/TagSlot.qml

@@ -0,0 +1,40 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import "js/Tags.js" as Tags
+
+// One row's tag swatches: 14 px squares at 3 px gaps, each carrying its digit in the fallback.
+Item {
+    id: root
+    readonly property int swatchGap: 3
+    property var tags: []
+    // A row reserves the 88 px slot and a tile its own cell, so only the whole swatches that fit are drawn, with no counter.
+    readonly property real room: root.below && root.parent ? root.parent.width : Theme.tagSlotWidth
+    readonly property var drawn: root.tags.slice(0, Math.max(0, Math.floor((root.room + root.swatchGap) / (Tags.SWATCH_SIZE + root.swatchGap))))
+    // The item this slot follows on a row, or the caption it sits under on a tile; hug follows a text's own end.
+    property Item after: null
+    property Item below: null
+    property bool hug: false
+    visible: root.tags.length > 0
+    width: Math.max(0, root.drawn.length * (Tags.SWATCH_SIZE + root.swatchGap) - root.swatchGap)
+    height: Tags.SWATCH_SIZE
+    anchors.left: root.after ? (root.hug ? root.after.left : root.after.right) : undefined
+    anchors.leftMargin: root.after && root.hug ? root.after.contentWidth + Theme.spacing.gap : Theme.spacing.gap
+    anchors.verticalCenter: root.after ? root.after.verticalCenter : undefined
+    anchors.top: root.below ? root.below.bottom : undefined
+    anchors.horizontalCenter: root.below ? parent.horizontalCenter : undefined
+
+    Repeater {
+        model: root.drawn
+        delegate: TagSwatch {
+            id: cell
+            required property int index
+            required property string modelData
+            x: cell.index * (Tags.SWATCH_SIZE + root.swatchGap)
+            swatch: cell.modelData
+            fallback: Theme.tag.fallback
+            digit: Tags.keyFor(cell.modelData)
+            tagColors: Theme.tag.colors
+        }
+    }
+}

package/ui/TagState.qml

@@ -0,0 +1,150 @@
+import QtQuick
+import "js/Filter.js" as Filter
+import "js/Menu.js" as Menu
+import "js/Ops.js" as Ops
+import "js/Search.js" as Search
+import "js/Tags.js" as Tags
+
+// One pane's file tags, built only when a listing first carries one or a tag key or menu first asks.
+Item {
+    id: root
+    required property var pane
+    // The 88 px slot stands on every row of a folder once a tagged row has been seen in it.
+    property bool latched: false
+    // Every tag this session has seen set, which is what the rail's TAGS section lists.
+    property var inUse: ({})
+    // The changes sent and not yet answered, oldest first; each settagged answer or settags refusal takes the oldest.
+    property var pending: []
+    // The backend's read of a selection reaching past the held window, and the one still out.
+    property var asked: null
+    property var asking: null
+    property int askId: 0
+
+    // A rows reply is the whole held window; a fresh listing starts the latch over.
+    function take(items, fresh) {
+        var seen = Tags.stamp(items, root.latched, root.inUse, fresh)
+        root.latched = seen.latched
+        if (seen.grew) root.inUse = Object.assign({}, root.inUse)
+    }
+
+    // Each target's tags while every target is in the held window; null once one is outside it, where only the backend knows.
+    function filesFor(indices) {
+        var files = []
+        for (var i = 0; i < indices.length; i++) {
+            var row = root.pane.rowFor(indices[i])
+            if (!row) return null
+            files.push(row.tg || [])
+        }
+        return files
+    }
+
+    // Names the selection a backend read answers for: the numbering, the selection's version and, with no selection, the cursor.
+    function selectionKey() {
+        var pane = root.pane
+        return pane.backend.heldListing + ":" + pane.selectionVersion + ":" + (pane.selectionCount() > 0 ? "" : pane.cursorIndex)
+    }
+
+    // The flyout's rows for the selection: seven tags with digit hints, then Remove all tags; absent until a backend read lands.
+    function flyout() {
+        var files = root.filesFor(Ops.targetIndices(root.pane))
+        if (files !== null) return Tags.tagEntries(Tags.statesFor(files), Theme.tag.fallback)
+        var asked = root.asked !== null && root.asked.key === root.selectionKey() ? root.asked : null
+        return Tags.tagEntries(asked ? Tags.statesFrom(asked.applied, asked.mixed) : {}, Theme.tag.fallback)
+    }
+
+    // A selection past the held window asks what its rows carry (again: re-ask after a write); the answer redraws the flyout.
+    function ask(again) {
+        var rows = Ops.targetIndices(root.pane)
+        if (rows.length === 0 || root.filesFor(rows) !== null) return
+        var key = root.selectionKey()
+        if (again !== true && ((root.asked !== null && root.asked.key === key) || (root.asking !== null && root.asking.key === key))) return
+        root.askId += 1
+        root.asking = { id: root.askId, key: key, listing: root.pane.backend.heldListing }
+        root.pane.backend.send({ c: "tagstates", rows: rows, id: root.askId })
+    }
+
+    // A flyout choice toggles that tag over the selection, or clears every tag off it; the backend decides add or remove for all.
+    function choose(name) {
+        var rows = Ops.targetIndices(root.pane)
+        if (rows.length === 0) return
+        var clear = name === Tags.CLEAR_ID
+        root.pending = root.pending.concat([{ tag: clear ? "" : name }])
+        root.pane.backend.send({ c: "settags", rows: rows, op: clear ? "clear" : "toggle", tag: clear ? "" : name })
+    }
+
+    // T opens the Tags flyout straight from the listing, the same list the menu's Tags row opens.
+    function openMenu() {
+        var pane = root.pane
+        if (pane.lockedTarget.length > 0) return
+        if (!pane.canTag) {
+            pane.message("This filesystem does not support file tags.", true)
+            return
+        }
+        var menu = pane.contextMenu()
+        if (!Menu.openAtCursor(pane, menu, Theme.spacing.rowPaddingX)) return
+        for (var i = 0; i < menu.entries.length; i++) {
+            if (menu.entries[i].action === "tags") {
+                menu.openSubmenu(i)
+                return
+            }
+        }
+    }
+
+    // A tag walks Home for that tag, an explicit walk like any search; esc returns to the listing.
+    function openTag(name) {
+        if (!name || !Search.takesQuery(root.pane)) return
+        Filter.close(root.pane)
+        Search.openQuery(root.pane, "tag:" + name)
+    }
+
+    // A tagstates answer for the read still out lands only in the numbering it was asked in.
+    function statesDone(message) {
+        var asking = root.asking
+        if (asking === null || message.id !== asking.id) return
+        root.asking = null
+        if (message.listing !== asking.listing) return
+        root.asked = { key: asking.key, applied: message.applied || [], mixed: message.mixed || [] }
+        root.pane.contextMenu().refreshProviderRows()
+    }
+
+    // A settagged answer lands the oldest pending change: forget every read made before it, ask the visible window again, and say it when a file changed or a row was skipped.
+    function setTaggedDone(message) {
+        var change = root.pending.length > 0 ? root.pending[0] : null
+        root.pending = root.pending.slice(1)
+        var flyoutUp = root.pane.menuVisible === true
+        // An open flyout keeps drawing its last read until the fresh one lands, so no box blanks between the two.
+        if (!flyoutUp) root.asked = null
+        root.asking = null
+        if (!change) return
+        root.pane.backend.window(root.pane.held, root.pane.windowSize)
+        if (flyoutUp) root.ask(true)
+        // The backend sends data and the UI words it: the changed sentence, the skipped one, or both.
+        var line = Tags.doneLine(message.op, message.ok || 0, change.tag, message.skipped)
+        if (line !== "") root.pane.message(line, false)
+    }
+
+    // A held window that lands while a flyout is up carries the tags just written; the menu's rows source follows it a turn later, so the redraw waits for that turn.
+    Connections {
+        target: root.pane
+        function onRowsChanged() {
+            var menu = root.pane.contextMenu()
+            if (menu.submenuOpen === true) Qt.callLater(function() { menu.refreshProviderRows() })
+        }
+    }
+
+    Connections {
+        target: root.pane.backend
+        function onTagStatesResult(message) { root.statesDone(message) }
+        function onSettagged(message) { root.setTaggedDone(message) }
+        // A refused settags answers its own pending change; a backend that stopped answers none of them.
+        function onFailed(where, input) {
+            if (where === "backend" || where === "read") {
+                root.pending = []
+                root.asked = null
+                root.asking = null
+            } else if (where === "settags" || (where === "stale" && input === "settags")) {
+                root.pending = root.pending.slice(1)
+            }
+        }
+    }
+}

package/ui/TagSwatch.qml

@@ -0,0 +1,28 @@
+import QtQuick
+import "js/Tags.js" as Tags
+
+// One tag swatch: the fill, the fallback border, the digit text.
+Rectangle {
+    id: root
+    property string swatch: ""
+    property bool fallback: false
+    property string digit: ""
+    required property var tagColors
+    property int size: Tags.SWATCH_SIZE
+    readonly property int fallbackBorder: 2
+    width: root.size
+    height: root.size
+    color: root.fallback ? "transparent" : root.tagColors[root.swatch] || "transparent"
+    border.width: root.fallback ? root.fallbackBorder : 0
+    border.color: root.tagColors[root.swatch] || "transparent"
+    Text {
+        visible: root.fallback
+        anchors.centerIn: parent
+        text: root.digit
+        color: root.tagColors[root.swatch] || "transparent"
+        font.family: Theme.font.family
+        font.pixelSize: Theme.font.caption
+        font.bold: true
+        textFormat: Text.PlainText
+    }
+}

package/ui/Taildrop.qml

@@ -0,0 +1,86 @@
+import QtQuick
+import Quickshell
+import Quickshell.Io
+import "js/Taildrop.js" as TaildropJs
+
+// The context menu's own Service, the same shape as ui/NetworkMounts.qml: this is the only thing
+// here that touches tailscale, ui/ContextMenu.qml only reads "peers" and renders it.
+Item {
+    id: root
+
+    property var peers: []
+    property string reason: "checking"
+    // What state the reason is, for logic: ui/js/Taildrop.js status() names the codes.
+    property string code: ""
+    property string sendCommand: ""
+    property bool checking: false
+    property bool _awaitingStart: false
+    // The OEM Tailscale service's pollWatchdog bounds status queries at fifteen seconds.
+    readonly property int statusTimeoutSeconds: 15
+    signal refreshed()
+    // onExited can race the StdioCollector's own text, see ui/NetworkMounts.qml's header comment.
+    property string _statusOutput: ""
+    property string _statusError: ""
+
+    function refresh(facts) {
+        if (checking) return false
+        peers = []
+        var provider = facts.taildrop || {}, sender = facts.taildropSend || {}
+        sendCommand = sender.command || ""
+        reason = provider.reason || sender.reason || "checking"
+        code = ""
+        if (!provider.command || !sendCommand) return true
+        checking = true
+        _awaitingStart = true
+        _statusOutput = ""
+        _statusError = ""
+        statusProcess.command = ["timeout", "--signal=KILL", String(statusTimeoutSeconds), provider.command, "status", "--json"]
+        statusProcess.running = true
+        return true
+    }
+
+    // argv-direct and detached: the script owns its own success/failure notification, see
+    // docs/superpowers/specs/2026-08-31-flea-operations-design.md "4.1 Taildrop".
+    function send(peerId, paths) {
+        var peer = TaildropJs.byId(root.peers, peerId)
+        if (!peer || !sendCommand || checking) return false
+        Quickshell.execDetached([sendCommand, peer.address].concat(paths))
+        return true
+    }
+
+    // ui/Pane.qml's own dispatch-confirmation message reads a name, not the id chosen() carries.
+    function labelFor(peerId) {
+        var peer = TaildropJs.byId(root.peers, peerId)
+        return peer ? peer.label : "that peer"
+    }
+
+    Process {
+        id: statusProcess
+        stdout: StdioCollector {
+            id: statusOut
+            waitForEnd: true
+            onStreamFinished: root._statusOutput = text
+        }
+        stderr: StdioCollector { id: statusErr; waitForEnd: true; onStreamFinished: root._statusError = text }
+        onStarted: root._awaitingStart = false
+        onRunningChanged: {
+            if (root._awaitingStart && !running) {
+                root._awaitingStart = false
+                root.checking = false
+                root.reason = "Tailscale could not be checked"
+                root.code = ""
+                root.refreshed()
+            }
+        }
+        onExited: function (exitCode) {
+            root._awaitingStart = false
+            var state = TaildropJs.status(statusOut.text || root._statusOutput, exitCode,
+                exitCode === 137 || exitCode === 9 ? "Tailscale did not answer in time" : statusErr.text || root._statusError)
+            root.peers = state.peers
+            root.reason = state.reason
+            root.code = state.code
+            root.checking = false
+            root.refreshed()
+        }
+    }
+}

package/ui/TailscaleMark.qml

@@ -0,0 +1,50 @@
+import QtQuick
+import qs.Commons
+
+// The Tailscale mark, reproduced from the official artwork rather than recut. Decided on the
+// reproduction after both recuts were rendered beside the original at the sizes this actually draws
+// at: a stroked mark spends most of a small glyph on outline, and a one-weight language cannot carry
+// the mark's own emphasis. It sits where FleaMark sits, outside the cut and outside Glyph.qml.
+Item {
+    id: root
+
+    // The type scale, not the slot, and clamped so a reproduction can never out-size the cut glyph
+    // beside it. A smaller caller slot still wins, the way Glyph's own min() lets it.
+    property real iconSize: Theme.markSize
+    property color color: "transparent"
+
+    // The official file's own box and geometry: circles of radius 18 at 30.5, 84.5 and 138.5.
+    readonly property real grid: 169
+    readonly property real dotRadius: 18
+    readonly property var centres: [30.5, 84.5, 138.5]
+    // The official draws the middle row plus the bottom centre solid and the rest at 0.4; the two
+    // opacities are the mark, because the brand toolkit says the gray dots adapt in opacity.
+    readonly property real mutedOpacity: 0.4
+    readonly property real drawn: Math.min(Theme.markSize, root.iconSize)
+    readonly property real unit: root.drawn / root.grid
+
+    implicitWidth: root.drawn
+    implicitHeight: root.drawn
+    width: root.drawn
+    height: root.drawn
+
+    Repeater {
+        model: 9
+
+        delegate: Rectangle {
+            required property int index
+            readonly property int row: Math.floor(index / 3)
+            readonly property int col: index % 3
+            // Row 1 is the middle row, and column 1 of row 2 is the bottom centre.
+            readonly property bool solid: row === 1 || (row === 2 && col === 1)
+
+            width: 2 * root.dotRadius * root.unit
+            height: width
+            radius: width / 2
+            x: root.centres[col] * root.unit - width / 2
+            y: root.centres[row] * root.unit - height / 2
+            color: root.color
+            opacity: solid ? 1.0 : root.mutedOpacity
+        }
+    }
+}

package/ui/TerminalService.qml

@@ -0,0 +1,69 @@
+pragma Singleton
+import QtQuick
+import Quickshell
+import Quickshell.Io
+
+// All terminal views share this one server; each has its own reconnect token/PTY.
+QtObject {
+    id: root
+    property var tabs: ({})
+    property int serial: 0
+    property bool ready: false
+    property bool stopping: false
+    function acquire(path) {
+        var id = "terminal-" + (++serial)
+        var next = Object.assign({}, tabs)
+        next[id] = { path: path, url: "", error: "" }
+        tabs = next
+        if (!server.running && !stopping) server.running = true
+        if (ready) server.write(JSON.stringify({id:id,path:path}) + "\n")
+        return id
+    }
+    function release(id) {
+        var next = Object.assign({}, tabs)
+        delete next[id]
+        tabs = next
+        if (Object.keys(next).length === 0) {
+            ready = false
+            if (server.running && !stopping) {
+                stopping = true
+                server.write(JSON.stringify({shutdown:true}) + "\n")
+            }
+        } else if (ready) server.write(JSON.stringify({id:id,close:true}) + "\n")
+    }
+    function fail(message) {
+        ready = false
+        var next = {}
+        for (var id in tabs) next[id] = { path: tabs[id].path, url: "", error: message }
+        tabs = next
+    }
+    property var process: Process {
+        id: server
+        stdinEnabled: true
+        command: [Quickshell.env("BUNINU_BUN") || "bun", Quickshell.shellDir + "/../../src/terminal-server.js"]
+        stdout: SplitParser {
+            onRead: function(line) {
+                try {
+                    var result = JSON.parse(line)
+                    if (result.ready) {
+                        if (root.stopping) return
+                        root.ready = true
+                        for (var id in root.tabs) if (!root.tabs[id].error) server.write(JSON.stringify({id:id,path:root.tabs[id].path}) + "\n")
+                    } else if (result.id && root.tabs[result.id]) {
+                        var next = Object.assign({}, root.tabs)
+                        next[result.id] = { path: next[result.id].path, url: result.url || "", error: result.error || "" }
+                        root.tabs = next
+                    } else if (!result.id && result.error) root.fail(result.error)
+                } catch(e) { root.fail("Invalid terminal server response.") }
+            }
+        }
+        onExited: {
+            if (root.stopping) {
+                root.stopping = false
+                root.ready = false
+                // A tab opened during shutdown waits for the old listener to exit.
+                if (Object.keys(root.tabs).length) Qt.callLater(function() { server.running = true })
+            } else root.fail("Terminal server exited.")
+        }
+    }
+}

package/ui/TerminalTab.qml

@@ -0,0 +1,48 @@
+import QtQuick
+import QtWebEngine
+import Quickshell
+import "." as Flea
+import Quickshell.Io
+import qs.Commons
+
+// Kept alive while another tab is selected; destroyed only when this tab closes.
+Item {
+    id: root
+    property string directory: ""
+    property string sessionId: ""
+    readonly property var session: Flea.TerminalService.tabs[sessionId] || ({})
+    readonly property string address: session.url || ""
+    readonly property string status: session.error || "Starting terminal…"
+    property bool selected: false
+    function focusTerminal() {
+        if (selected && address.length) Qt.callLater(function() {
+            if (root.selected && root.address.length) web.forceActiveFocus()
+        })
+    }
+    onSelectedChanged: focusTerminal()
+    onAddressChanged: focusTerminal()
+    visible: selected
+    anchors.fill: parent
+    Rectangle { anchors.fill: parent; color: Theme.color.background }
+    WebEngineView {
+        id: web
+        anchors.fill: parent
+        visible: root.address.length > 0
+        url: root.address
+        backgroundColor: Theme.color.background
+        settings.javascriptEnabled: true
+        onLoadingChanged: function(info) { if(info.errorCode) console.warn("Terminal WebEngineView:", info.errorString) }
+    }
+    Text {
+        anchors.centerIn: parent
+        width: Math.max(0, parent.width - 32)
+        horizontalAlignment: Text.AlignHCenter
+        wrapMode: Text.Wrap
+        textFormat: Text.PlainText
+        color: Theme.color.foreground
+        font.family: Theme.font.family
+        font.pixelSize: Theme.font.body
+        visible: root.address.length === 0
+        text: root.status
+    }
+}

package/ui/TerminalTabs.qml

@@ -0,0 +1,27 @@
+import QtQuick
+import "." as Flea
+
+// Dynamic objects preserve each iframe/PTY when tab order or selection changes.
+Item {
+    id: root
+    property var pane: null
+    property var sessions: ({})
+    function open(directory) {
+        var component = Qt.createComponent("TerminalTab.qml")
+        if (component.status !== Component.Ready) {
+            pane.message(component.errorString(), true)
+            return ""
+        }
+        var key = Flea.TerminalService.acquire(directory)
+        var item = component.createObject(root, { directory: directory, sessionId: key })
+        if (!item) { Flea.TerminalService.release(key); pane.message("Could not create the terminal view.", true); return "" }
+        item.selected = Qt.binding(function() { return root.pane.terminalId === key })
+        sessions[key] = item
+        return key
+    }
+    Component.onDestruction: { for (var key in sessions) Flea.TerminalService.release(key) }
+    function close(key) {
+        var item = sessions[key]
+        if (item) { Flea.TerminalService.release(key); delete sessions[key]; item.destroy() }
+    }
+}