php-qml/framework/skeleton/qml/Main.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window

import PhpQml.Bridge

ApplicationWindow {
    id: window
    width: 760
    height: 540
    visible: true
    title: "php-qml — skeleton"

    RestClient {
        id: rest
        baseUrl: BackendConnection.url
        token: BackendConnection.token
    }

    MercureClient {
        id: mercure
        hubUrl: BackendConnection.url + "/.well-known/mercure"
        topic: "app://ping"
        // No token in Phase 1 dev mode — Caddyfile enables `anonymous`
        // for Mercure subscribers. Phase 4 swaps in a Mercure-issued JWT
        // when the bundled mode tightens auth.
        onUpdate: function(data, id) {
            log.append("← mercure " + (id ? id.split(":").pop() : "") + "  " + data)
        }
        onError: function(detail) {
            log.append("× mercure error: " + detail)
        }
    }

    Connections {
        target: BackendConnection
        function onConnectionStateChanged() {
            if (BackendConnection.connectionState === BackendConnection.Online) {
                if (!mercure.active) mercure.start()
            } else {
                if (mercure.active) mercure.stop()
            }
        }
    }

    Connections {
        target: SingleInstance
        function onLaunchArgsReceived(args) {
            window.requestActivate()
            log.append("· launch args from peer: " + args.join(" "))
        }
    }

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 16
        spacing: 12

        RowLayout {
            spacing: 10
            Layout.fillWidth: true

            Rectangle {
                width: 12; height: 12; radius: 6
                color: BackendConnection.connectionState === BackendConnection.Online
                       ? "#3ab36c"
                       : (BackendConnection.connectionState === BackendConnection.Error ? "#d8503c" : "#d89614")
            }
            Label { text: "Backend: " + window._stateName(BackendConnection.connectionState) }

            Item { width: 12 }

            Rectangle {
                width: 12; height: 12; radius: 6
                color: mercure.active ? "#3ab36c" : "#666"
            }
            Label { text: "Mercure: " + (mercure.active ? "subscribed" : "off") }

            Item { Layout.fillWidth: true }

            Button {
                text: "Ping"
                enabled: BackendConnection.connectionState === BackendConnection.Online
                onClicked: {
                    const t0 = Date.now()
                    rest.get("/api/ping").then(function(r) {
                        const dt = Date.now() - t0
                        log.append("→ ping " + dt + "ms  " + JSON.stringify(r.body))
                    }).catch(function(e) {
                        log.append("× ping " + e.status + "  " + JSON.stringify(e.problem || e.raw))
                    })
                }
            }
        }

        Label {
            text: "URL: " + BackendConnection.url
                  + (BackendConnection.error ? "    error: " + BackendConnection.error : "")
            color: BackendConnection.error ? "#d8503c" : "#888"
            font.pixelSize: 12
            elide: Text.ElideRight
            Layout.fillWidth: true
        }

        Frame {
            Layout.fillWidth: true
            Layout.fillHeight: true
            padding: 0
            ScrollView {
                anchors.fill: parent
                TextArea {
                    id: log
                    readOnly: true
                    wrapMode: TextArea.Wrap
                    font.family: "monospace"
                    font.pixelSize: 12
                    placeholderText: "events will appear here…"
                }
            }
        }
    }

    function _stateName(s) {
        switch (s) {
            case BackendConnection.Connecting: return "connecting"
            case BackendConnection.Online:     return "online"
            case BackendConnection.Error:      return "error"
        }
        return "?"
    }
}