Add support for plugin registry + install + management

DMSShell.qml

@@ -32,16 +32,21 @@ import qs.Services
 ShellRoot {
   id: root
 
+  property bool servicesReady: false
+
   Component.onCompleted: {
     PortalService.init()
     DisplayService.nightModeEnabled
     WallpaperCyclingService.cyclingActive
     PluginService.pluginDirectory
+    Qt.callLater(() => {
+      servicesReady = true
+    })
   }
 
   Instantiator {
       id: daemonPluginInstantiator
-      model: Object.keys(PluginService.pluginDaemonComponents)
+      model: servicesReady ? Object.keys(PluginService.pluginDaemonComponents) : []
 
       delegate: Loader {
           id: daemonLoader
@@ -74,17 +79,22 @@ ShellRoot {
       asynchronous: false
 
       property var currentPosition: SettingsData.dankBarPosition
+      property bool initialized: false
 
       sourceComponent: DankBar {
           onColorPickerRequested: colorPickerModal.show()
       }
 
+      Component.onCompleted: {
+          initialized = true
+      }
+
       onCurrentPositionChanged: {
+          if (!initialized) return
+
           const component = sourceComponent
           sourceComponent = null
-          Qt.callLater(() => {
+          sourceComponent = component
-              sourceComponent = component
-          })
       }
   }
 
@@ -94,6 +104,7 @@ ShellRoot {
       asynchronous: false
 
       property var currentPosition: SettingsData.dockPosition
+      property bool initialized: false
 
       sourceComponent: Dock {
           contextMenu: dockContextMenuLoader.item ? dockContextMenuLoader.item : null
@@ -105,13 +116,17 @@ ShellRoot {
           }
       }
 
+      Component.onCompleted: {
+          initialized = true
+      }
+
       onCurrentPositionChanged: {
+          if (!initialized) return
+
           console.log("DEBUG: Dock position changed to:", currentPosition, "- recreating dock")
           const comp = sourceComponent
           sourceComponent = null
-          Qt.callLater(() => {
+          sourceComponent = comp
-              sourceComponent = comp
-          })
       }
   }
 

Modals/Common/DankModal.qml

@@ -167,12 +167,24 @@ PanelWindow {
             y: root.shouldBeVisible ? 0 : -30
         }
 
-        Loader {
+        FocusScope {
-            id: contentLoader
-
             anchors.fill: parent
-            active: root.keepContentLoaded || root.shouldBeVisible || root.visible
+            focus: root.shouldBeVisible
-            asynchronous: false
+
+            Loader {
+                id: contentLoader
+
+                anchors.fill: parent
+                active: root.keepContentLoaded || root.shouldBeVisible || root.visible
+                asynchronous: false
+                focus: true
+
+                onLoaded: {
+                    if (item) {
+                        Qt.callLater(() => item.forceActiveFocus())
+                    }
+                }
+            }
         }
 
         layer.effect: MultiEffect {

Modals/Settings/SettingsContent.qml

@@ -2,11 +2,12 @@ import QtQuick
 import qs.Common
 import qs.Modules.Settings
 
-Item {
+FocusScope {
     id: root
 
     property int currentIndex: 0
     property var parentModal: null
+    focus: true
 
     Rectangle {
         anchors.fill: parent
@@ -163,6 +164,7 @@ Item {
             asynchronous: true
 
             sourceComponent: PluginsTab {
+                parentModal: root.parentModal
             }
 
         }

Modals/Settings/SettingsModal.qml

@@ -115,7 +115,7 @@ DankModal {
     }
 
     settingsContent: Component {
-        Item {
+        FocusScope {
             anchors.fill: parent
             focus: true
 

Modules/Plugins/PluginComponent.qml

@@ -18,7 +18,7 @@ Item {
     property Component verticalBarPill: null
     property Component popoutContent: null
     property real popoutWidth: 400
-    property real popoutHeight: 400
+    property real popoutHeight: 0
     property var pillClickAction: null
 
     property Component controlCenterWidget: null

Modules/Plugins/PluginPopout.qml

@@ -8,7 +8,7 @@ DankPopout {
     property var triggerScreen: null
     property Component pluginContent: null
     property real contentWidth: 400
-    property real contentHeight: 400
+    property real contentHeight: 0
 
     function setTriggerPosition(x, y, width, section, screen) {
         triggerX = x
@@ -63,13 +63,12 @@ DankPopout {
             Column {
                 id: popoutColumn
                 width: parent.width - Theme.spacingS * 2
-                height: parent.height - Theme.spacingS * 2
                 x: Theme.spacingS
                 y: Theme.spacingS
                 spacing: Theme.spacingS
 
                 Loader {
-                    id: popoutContent
+                    id: popoutContentLoader
                     width: parent.width
                     sourceComponent: root.pluginContent
 
@@ -79,6 +78,9 @@ DankPopout {
                                 root.close()
                             }
                         }
+                        if (root.contentHeight === 0 && item) {
+                            root.contentHeight = item.implicitHeight + Theme.spacingS * 2
+                        }
                     }
                 }
             }

Modules/Settings/PluginsTab.qml

@@ -2,13 +2,17 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import qs.Common
+import qs.Modals.Common
 import qs.Services
 import qs.Widgets
 
-Item {
+FocusScope {
     id: pluginsTab
 
     property string expandedPluginId: ""
+    property bool isRefreshingPlugins: false
+    property var parentModal: null
+    focus: true
 
 
     DankFlickable {
@@ -68,21 +72,78 @@ Item {
                         }
                     }
 
-                    Row {
+                    StyledRect {
+                        width: parent.width
+                        height: dmsWarningColumn.implicitHeight + Theme.spacingM * 2
+                        radius: Theme.cornerRadius
+                        color: Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.1)
+                        border.color: Theme.warning
+                        border.width: 1
+                        visible: !DMSService.dmsAvailable
+
+                        Column {
+                            id: dmsWarningColumn
+                            anchors.fill: parent
+                            anchors.margins: Theme.spacingM
+                            spacing: Theme.spacingXS
+
+                            Row {
+                                spacing: Theme.spacingXS
+
+                                DankIcon {
+                                    name: "warning"
+                                    size: 16
+                                    color: Theme.warning
+                                    anchors.verticalCenter: parent.verticalCenter
+                                }
+
+                                StyledText {
+                                    text: "DMS Plugin Manager Unavailable"
+                                    font.pixelSize: Theme.fontSizeSmall
+                                    color: Theme.warning
+                                    font.weight: Font.Medium
+                                    anchors.verticalCenter: parent.verticalCenter
+                                }
+                            }
+
+                            StyledText {
+                                text: "The DMS_SOCKET environment variable is not set or the socket is unavailable. Automated plugin management requires the DMS_SOCKET."
+                                font.pixelSize: Theme.fontSizeSmall - 1
+                                color: Theme.surfaceVariantText
+                                wrapMode: Text.WordWrap
+                                width: parent.width
+                            }
+                        }
+                    }
+
+                    Flow {
                         width: parent.width
                         spacing: Theme.spacingM
 
                         DankButton {
-                            text: "Scan for Plugins"
+                            text: "Browse"
-                            iconName: "refresh"
+                            iconName: "store"
+                            enabled: DMSService.dmsAvailable
                             onClicked: {
-                                PluginService.scanPlugins()
+                                pluginBrowserModal.show()
-                                ToastService.showInfo("Scanning for plugins...")
                             }
                         }
 
                         DankButton {
-                            text: "Create Plugin Directory"
+                            text: "Scan"
+                            iconName: "refresh"
+                            onClicked: {
+                                pluginsTab.isRefreshingPlugins = true
+                                PluginService.scanPlugins()
+                                if (DMSService.dmsAvailable) {
+                                    DMSService.listInstalled()
+                                }
+                                pluginsTab.refreshPluginList()
+                            }
+                        }
+
+                        DankButton {
+                            text: "Create Dir"
                             iconName: "create_new_folder"
                             onClicked: {
                                 PluginService.createPluginDirectory()
@@ -168,6 +229,13 @@ Item {
 
                                 property var pluginData: modelData
                                 property string pluginId: pluginData ? pluginData.id : ""
+                                property string pluginDirectoryName: {
+                                    if (pluginData && pluginData.pluginDirectory) {
+                                        var path = pluginData.pluginDirectory
+                                        return path.substring(path.lastIndexOf('/') + 1)
+                                    }
+                                    return pluginId
+                                }
                                 property string pluginName: pluginData ? (pluginData.name || pluginData.id) : ""
                                 property string pluginVersion: pluginData ? (pluginData.version || "1.0.0") : ""
                                 property string pluginAuthor: pluginData ? (pluginData.author || "Unknown") : ""
@@ -254,6 +322,77 @@ Item {
                                             anchors.verticalCenter: parent.verticalCenter
                                             spacing: Theme.spacingXS
 
+                                            Rectangle {
+                                                width: 28
+                                                height: 28
+                                                radius: 14
+                                                color: updateArea.containsMouse ? Theme.surfaceContainerHighest : "transparent"
+                                                visible: DMSService.dmsAvailable && PluginService.isPluginLoaded(pluginDelegate.pluginId)
+
+                                                DankIcon {
+                                                    anchors.centerIn: parent
+                                                    name: "download"
+                                                    size: 16
+                                                    color: updateArea.containsMouse ? Theme.primary : Theme.surfaceVariantText
+                                                }
+
+                                                MouseArea {
+                                                    id: updateArea
+                                                    anchors.fill: parent
+                                                    hoverEnabled: true
+                                                    cursorShape: Qt.PointingHandCursor
+                                                    onClicked: {
+                                                        const currentPluginDirName = pluginDelegate.pluginDirectoryName
+                                                        const currentPluginName = pluginDelegate.pluginName
+                                                        DMSService.update(currentPluginDirName, response => {
+                                                            if (response.error) {
+                                                                ToastService.showError("Update failed: " + response.error)
+                                                            } else {
+                                                                ToastService.showInfo("Plugin updated: " + currentPluginName)
+                                                                PluginService.scanPlugins()
+                                                            }
+                                                        })
+                                                    }
+                                                }
+                                            }
+
+                                            Rectangle {
+                                                width: 28
+                                                height: 28
+                                                radius: 14
+                                                color: uninstallArea.containsMouse ? Theme.surfaceContainerHighest : "transparent"
+                                                visible: DMSService.dmsAvailable
+
+                                                DankIcon {
+                                                    anchors.centerIn: parent
+                                                    name: "delete"
+                                                    size: 16
+                                                    color: uninstallArea.containsMouse ? Theme.error : Theme.surfaceVariantText
+                                                }
+
+                                                MouseArea {
+                                                    id: uninstallArea
+                                                    anchors.fill: parent
+                                                    hoverEnabled: true
+                                                    cursorShape: Qt.PointingHandCursor
+                                                    onClicked: {
+                                                        const currentPluginDirName = pluginDelegate.pluginDirectoryName
+                                                        const currentPluginName = pluginDelegate.pluginName
+                                                        DMSService.uninstall(currentPluginDirName, response => {
+                                                            if (response.error) {
+                                                                ToastService.showError("Uninstall failed: " + response.error)
+                                                            } else {
+                                                                ToastService.showInfo("Plugin uninstalled: " + currentPluginName)
+                                                                PluginService.scanPlugins()
+                                                                if (pluginDelegate.isExpanded) {
+                                                                    pluginsTab.expandedPluginId = ""
+                                                                }
+                                                            }
+                                                        })
+                                                    }
+                                                }
+                                            }
+
                                             Rectangle {
                                                 width: 28
                                                 height: 28
@@ -356,13 +495,14 @@ Item {
                                 }
 
                                 // Settings container
-                                Item {
+                                FocusScope {
                                     id: settingsContainer
                                     anchors.bottom: parent.bottom
                                     anchors.left: parent.left
                                     anchors.right: parent.right
                                     height: pluginDelegate.isExpanded && pluginDelegate.hasSettings ? (settingsLoader.item ? settingsLoader.item.implicitHeight + Theme.spacingL * 2 : 0) : 0
                                     clip: true
+                                    focus: pluginDelegate.isExpanded && pluginDelegate.hasSettings
 
                                     Rectangle {
                                         anchors.fill: parent
@@ -378,7 +518,6 @@ Item {
                                         anchors.margins: Theme.spacingL
                                         active: pluginDelegate.isExpanded && pluginDelegate.hasSettings && PluginService.isPluginLoaded(pluginDelegate.pluginId)
                                         asynchronous: false
-                                        focus: true
 
                                         source: {
                                             if (active && pluginDelegate.pluginSettingsPath) {
@@ -399,8 +538,10 @@ Item {
                                                 item.popoutService = PopoutService
                                             }
                                             if (item) {
-                                                item.focus = true
+                                                Qt.callLater(() => {
-                                                item.forceActiveFocus()
+                                                    settingsContainer.focus = true
+                                                    item.forceActiveFocus()
+                                                })
                                             }
                                         }
                                     }
@@ -426,7 +567,7 @@ Item {
                             font.pixelSize: Theme.fontSizeMedium
                             color: Theme.surfaceVariantText
                             horizontalAlignment: Text.AlignHCenter
-                            visible: pluginRepeater.model.length === 0
+                            visible: pluginRepeater.model && pluginRepeater.model.length === 0
                         }
                     }
                 }
@@ -436,19 +577,550 @@ Item {
 
     property bool isReloading: false
 
+    function refreshPluginList() {
+        Qt.callLater(() => {
+            var plugins = PluginService.getAvailablePlugins()
+            pluginRepeater.model = null
+            pluginRepeater.model = plugins
+            pluginsTab.isRefreshingPlugins = false
+        })
+    }
+
     Connections {
         target: PluginService
         function onPluginLoaded() {
-            pluginRepeater.model = PluginService.getAvailablePlugins()
+            refreshPluginList()
             if (isReloading) {
                 isReloading = false
             }
         }
         function onPluginUnloaded() {
-            pluginRepeater.model = PluginService.getAvailablePlugins()
+            refreshPluginList()
             if (!isReloading && pluginsTab.expandedPluginId !== "" && !PluginService.isPluginLoaded(pluginsTab.expandedPluginId)) {
                 pluginsTab.expandedPluginId = ""
             }
         }
     }
+
+    Connections {
+        target: DMSService
+        function onPluginsListReceived(plugins) {
+            pluginBrowserModal.isLoading = false
+            pluginBrowserModal.allPlugins = plugins
+            pluginBrowserModal.updateFilteredPlugins()
+        }
+        function onOperationSuccess(message) {
+            ToastService.showInfo(message)
+        }
+        function onOperationError(error) {
+            ToastService.showError(error)
+        }
+    }
+
+    Component.onCompleted: {
+        pluginBrowserModal.parentModal = pluginsTab.parentModal
+    }
+
+    DankModal {
+        id: pluginBrowserModal
+
+        property var allPlugins: []
+        property string searchQuery: ""
+        property var filteredPlugins: []
+        property int selectedIndex: -1
+        property bool keyboardNavigationActive: false
+        property bool isLoading: false
+        property var parentModal: null
+
+        function updateFilteredPlugins() {
+            if (!searchQuery || searchQuery.length === 0) {
+                filteredPlugins = allPlugins.slice()
+                return
+            }
+
+            var filtered = []
+            var query = searchQuery.toLowerCase()
+
+            for (var i = 0; i < allPlugins.length; i++) {
+                var plugin = allPlugins[i]
+                var name = plugin.name ? plugin.name.toLowerCase() : ""
+                var description = plugin.description ? plugin.description.toLowerCase() : ""
+                var author = plugin.author ? plugin.author.toLowerCase() : ""
+
+                if (name.indexOf(query) !== -1 ||
+                    description.indexOf(query) !== -1 ||
+                    author.indexOf(query) !== -1) {
+                    filtered.push(plugin)
+                }
+            }
+
+            filteredPlugins = filtered
+            selectedIndex = -1
+            keyboardNavigationActive = false
+        }
+
+        function selectNext() {
+            if (filteredPlugins.length === 0) return
+            keyboardNavigationActive = true
+            selectedIndex = Math.min(selectedIndex + 1, filteredPlugins.length - 1)
+        }
+
+        function selectPrevious() {
+            if (filteredPlugins.length === 0) return
+            keyboardNavigationActive = true
+            selectedIndex = Math.max(selectedIndex - 1, -1)
+            if (selectedIndex === -1) {
+                keyboardNavigationActive = false
+            }
+        }
+
+        function installPlugin(pluginName) {
+            ToastService.showInfo("Installing plugin: " + pluginName)
+            DMSService.install(pluginName, response => {
+                if (response.error) {
+                    ToastService.showError("Install failed: " + response.error)
+                } else {
+                    ToastService.showInfo("Plugin installed: " + pluginName)
+                    PluginService.scanPlugins()
+                    pluginBrowserModal.refreshPlugins()
+                }
+            })
+        }
+
+        function refreshPlugins() {
+            isLoading = true
+            DMSService.listPlugins()
+        }
+
+        function show() {
+            if (parentModal) {
+                parentModal.shouldHaveFocus = false
+            }
+            open()
+            Qt.callLater(() => {
+                if (contentLoader.item && contentLoader.item.searchField) {
+                    contentLoader.item.searchField.forceActiveFocus()
+                }
+            })
+        }
+
+        function hide() {
+            close()
+            if (parentModal) {
+                parentModal.shouldHaveFocus = Qt.binding(() => {
+                    return parentModal.shouldBeVisible
+                })
+            }
+        }
+
+        onOpened: {
+            refreshPlugins()
+        }
+
+        width: 600
+        height: 650
+        allowStacking: true
+        backgroundOpacity: 0
+        closeOnEscapeKey: false
+        onDialogClosed: () => {
+            allPlugins = []
+            searchQuery = ""
+            filteredPlugins = []
+            selectedIndex = -1
+            keyboardNavigationActive = false
+            isLoading = false
+        }
+        onBackgroundClicked: () => {
+            hide()
+        }
+
+        content: Component {
+            FocusScope {
+                id: browserKeyHandler
+                property alias searchField: browserSearchField
+
+                anchors.fill: parent
+                focus: true
+
+                Keys.onPressed: event => {
+                    if (event.key === Qt.Key_Escape) {
+                        pluginBrowserModal.close()
+                        event.accepted = true
+                    } else if (event.key === Qt.Key_Down) {
+                        pluginBrowserModal.selectNext()
+                        event.accepted = true
+                    } else if (event.key === Qt.Key_Up) {
+                        pluginBrowserModal.selectPrevious()
+                        event.accepted = true
+                    }
+                }
+
+                Column {
+                    id: browserContent
+
+                    spacing: Theme.spacingM
+                    anchors.fill: parent
+                    anchors.margins: Theme.spacingL
+
+                    Item {
+                        width: parent.width
+                        height: Math.max(headerIcon.height, headerText.height, refreshButton.height, closeButton.height)
+
+                        DankIcon {
+                            id: headerIcon
+                            name: "store"
+                            size: Theme.iconSize
+                            color: Theme.primary
+                            anchors.left: parent.left
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        StyledText {
+                            id: headerText
+                            text: "Browse Plugins"
+                            font.pixelSize: Theme.fontSizeLarge
+                            font.weight: Font.Medium
+                            color: Theme.surfaceText
+                            anchors.left: headerIcon.right
+                            anchors.leftMargin: Theme.spacingM
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        Row {
+                            anchors.right: parent.right
+                            anchors.verticalCenter: parent.verticalCenter
+                            spacing: Theme.spacingXS
+
+                            DankActionButton {
+                                id: refreshButton
+                                iconName: "refresh"
+                                iconSize: 18
+                                iconColor: Theme.primary
+                                visible: !pluginBrowserModal.isLoading
+                                onClicked: pluginBrowserModal.refreshPlugins()
+                            }
+
+                            DankActionButton {
+                                id: closeButton
+                                iconName: "close"
+                                iconSize: Theme.iconSize - 2
+                                iconColor: Theme.outline
+                                onClicked: pluginBrowserModal.close()
+                            }
+                        }
+                    }
+
+                    StyledText {
+                        text: "Install plugins from the DMS plugin registry"
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.outline
+                        width: parent.width
+                        wrapMode: Text.WordWrap
+                    }
+
+                    DankTextField {
+                        id: browserSearchField
+                        width: parent.width
+                        height: 48
+                        cornerRadius: Theme.cornerRadius
+                        backgroundColor: Theme.surfaceContainerHigh
+                        normalBorderColor: Theme.outlineMedium
+                        focusedBorderColor: Theme.primary
+                        leftIconName: "search"
+                        leftIconSize: Theme.iconSize
+                        leftIconColor: Theme.surfaceVariantText
+                        leftIconFocusedColor: Theme.primary
+                        showClearButton: true
+                        textColor: Theme.surfaceText
+                        font.pixelSize: Theme.fontSizeMedium
+                        placeholderText: "Search plugins..."
+                        text: pluginBrowserModal.searchQuery
+                        focus: true
+                        ignoreLeftRightKeys: true
+                        keyForwardTargets: [browserKeyHandler]
+                        onTextEdited: {
+                            pluginBrowserModal.searchQuery = text
+                            pluginBrowserModal.updateFilteredPlugins()
+                        }
+                    }
+
+                    Item {
+                        width: parent.width
+                        height: parent.height - y
+                        visible: pluginBrowserModal.isLoading
+
+                        Column {
+                            anchors.centerIn: parent
+                            spacing: Theme.spacingM
+
+                            DankIcon {
+                                name: "sync"
+                                size: 48
+                                color: Theme.primary
+                                anchors.horizontalCenter: parent.horizontalCenter
+
+                                RotationAnimator on rotation {
+                                    from: 0
+                                    to: 360
+                                    duration: 1000
+                                    loops: Animation.Infinite
+                                    running: pluginBrowserModal.isLoading
+                                }
+                            }
+
+                            StyledText {
+                                text: "Loading plugins..."
+                                font.pixelSize: Theme.fontSizeMedium
+                                color: Theme.surfaceVariantText
+                                anchors.horizontalCenter: parent.horizontalCenter
+                            }
+                        }
+                    }
+
+                    DankListView {
+                        id: pluginBrowserList
+
+                        width: parent.width
+                        height: parent.height - y
+                        spacing: Theme.spacingS
+                        model: pluginBrowserModal.filteredPlugins
+                        clip: true
+                        visible: !pluginBrowserModal.isLoading
+
+                        delegate: Rectangle {
+                            width: pluginBrowserList.width
+                            height: pluginDelegateColumn.implicitHeight + Theme.spacingM * 2
+                            radius: Theme.cornerRadius
+                            property bool isSelected: pluginBrowserModal.keyboardNavigationActive && index === pluginBrowserModal.selectedIndex
+                            property bool isInstalled: modelData.installed || false
+                            property bool isFirstParty: modelData.firstParty || false
+                            color: isSelected ? Theme.primarySelected :
+                                   Qt.rgba(Theme.surfaceVariant.r,
+                                           Theme.surfaceVariant.g,
+                                           Theme.surfaceVariant.b,
+                                           0.3)
+                            border.color: isSelected ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g,
+                                            Theme.outline.b, 0.2)
+                            border.width: isSelected ? 2 : 1
+
+                            Column {
+                                id: pluginDelegateColumn
+                                anchors.fill: parent
+                                anchors.margins: Theme.spacingM
+                                spacing: Theme.spacingXS
+
+                                Row {
+                                    width: parent.width
+                                    spacing: Theme.spacingM
+
+                                    DankIcon {
+                                        name: modelData.icon || "extension"
+                                        size: Theme.iconSize
+                                        color: Theme.primary
+                                        anchors.verticalCenter: parent.verticalCenter
+                                    }
+
+                                    Column {
+                                        width: parent.width - Theme.iconSize - Theme.spacingM - installButton.width - Theme.spacingM
+                                        spacing: 2
+
+                                        Row {
+                                            spacing: Theme.spacingXS
+
+                                            StyledText {
+                                                text: modelData.name
+                                                font.pixelSize: Theme.fontSizeMedium
+                                                font.weight: Font.Medium
+                                                color: Theme.surfaceText
+                                                elide: Text.ElideRight
+                                                anchors.verticalCenter: parent.verticalCenter
+                                            }
+
+                                            Rectangle {
+                                                height: 16
+                                                width: firstPartyText.implicitWidth + Theme.spacingXS * 2
+                                                radius: 8
+                                                color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.15)
+                                                border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.4)
+                                                border.width: 1
+                                                visible: isFirstParty
+                                                anchors.verticalCenter: parent.verticalCenter
+
+                                                StyledText {
+                                                    id: firstPartyText
+                                                    anchors.centerIn: parent
+                                                    text: "official"
+                                                    font.pixelSize: Theme.fontSizeSmall - 2
+                                                    color: Theme.primary
+                                                    font.weight: Font.Medium
+                                                }
+                                            }
+
+                                            Rectangle {
+                                                height: 16
+                                                width: thirdPartyText.implicitWidth + Theme.spacingXS * 2
+                                                radius: 8
+                                                color: Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.15)
+                                                border.color: Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.4)
+                                                border.width: 1
+                                                visible: !isFirstParty
+                                                anchors.verticalCenter: parent.verticalCenter
+
+                                                StyledText {
+                                                    id: thirdPartyText
+                                                    anchors.centerIn: parent
+                                                    text: "3rd party"
+                                                    font.pixelSize: Theme.fontSizeSmall - 2
+                                                    color: Theme.warning
+                                                    font.weight: Font.Medium
+                                                }
+                                            }
+                                        }
+
+                                        StyledText {
+                                            text: {
+                                                const author = "by " + (modelData.author || "Unknown")
+                                                const source = modelData.repo ? ` • <a href="${modelData.repo}" style="text-decoration:none; color:${Theme.primary};">source</a>` : ""
+                                                return author + source
+                                            }
+                                            font.pixelSize: Theme.fontSizeSmall
+                                            color: Theme.outline
+                                            linkColor: Theme.primary
+                                            textFormat: Text.RichText
+                                            elide: Text.ElideRight
+                                            width: parent.width
+                                            onLinkActivated: url => Qt.openUrlExternally(url)
+
+                                            MouseArea {
+                                                anchors.fill: parent
+                                                cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
+                                                acceptedButtons: Qt.NoButton
+                                                propagateComposedEvents: true
+                                            }
+                                        }
+                                    }
+
+                                    Rectangle {
+                                        id: installButton
+                                        width: 80
+                                        height: 32
+                                        radius: Theme.cornerRadius
+                                        anchors.verticalCenter: parent.verticalCenter
+                                        color: isInstalled ? Theme.surfaceVariant : Theme.primary
+                                        opacity: isInstalled ? 1 : (installMouseArea.containsMouse ? 0.9 : 1)
+                                        border.width: isInstalled ? 1 : 0
+                                        border.color: Theme.outline
+
+                                        Behavior on opacity {
+                                            NumberAnimation {
+                                                duration: Theme.shortDuration
+                                                easing.type: Theme.standardEasing
+                                            }
+                                        }
+
+                                        Row {
+                                            anchors.centerIn: parent
+                                            spacing: Theme.spacingXS
+
+                                            DankIcon {
+                                                name: isInstalled ? "check" : "download"
+                                                size: 14
+                                                color: isInstalled ? Theme.surfaceText : Theme.surface
+                                                anchors.verticalCenter: parent.verticalCenter
+                                            }
+
+                                            StyledText {
+                                                text: isInstalled ? "Installed" : "Install"
+                                                font.pixelSize: Theme.fontSizeSmall
+                                                font.weight: Font.Medium
+                                                color: isInstalled ? Theme.surfaceText : Theme.surface
+                                                anchors.verticalCenter: parent.verticalCenter
+                                            }
+                                        }
+
+                                        MouseArea {
+                                            id: installMouseArea
+                                            anchors.fill: parent
+                                            hoverEnabled: true
+                                            cursorShape: isInstalled ? Qt.ArrowCursor : Qt.PointingHandCursor
+                                            enabled: !isInstalled
+                                            onClicked: {
+                                                if (!isInstalled) {
+                                                    pluginBrowserModal.installPlugin(modelData.name)
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+
+                                StyledText {
+                                    text: modelData.description || ""
+                                    font.pixelSize: Theme.fontSizeSmall
+                                    color: Theme.outline
+                                    width: parent.width
+                                    wrapMode: Text.WordWrap
+                                    visible: modelData.description && modelData.description.length > 0
+                                }
+
+                                StyledRect {
+                                    width: parent.width
+                                    height: warningText.implicitHeight + Theme.spacingS * 2
+                                    radius: Theme.cornerRadius
+                                    color: Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.1)
+                                    border.color: Theme.warning
+                                    border.width: 1
+                                    visible: !isFirstParty
+
+                                    StyledText {
+                                        id: warningText
+                                        anchors.fill: parent
+                                        anchors.margins: Theme.spacingS
+                                        text: "⚠ Third-party plugin - install at your own risk"
+                                        font.pixelSize: Theme.fontSizeSmall - 1
+                                        color: Theme.warning
+                                        wrapMode: Text.WordWrap
+                                    }
+                                }
+
+                                Flow {
+                                    width: parent.width
+                                    spacing: Theme.spacingXS
+                                    visible: modelData.capabilities && modelData.capabilities.length > 0
+
+                                    Repeater {
+                                        model: modelData.capabilities || []
+
+                                        Rectangle {
+                                            height: 18
+                                            width: capabilityText.implicitWidth + Theme.spacingXS * 2
+                                            radius: 9
+                                            color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1)
+                                            border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3)
+                                            border.width: 1
+
+                                            StyledText {
+                                                id: capabilityText
+                                                anchors.centerIn: parent
+                                                text: modelData
+                                                font.pixelSize: Theme.fontSizeSmall - 2
+                                                color: Theme.primary
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                    StyledText {
+                        text: "No plugins found"
+                        font.pixelSize: Theme.fontSizeMedium
+                        color: Theme.surfaceVariantText
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        visible: !pluginBrowserModal.isLoading && pluginBrowserModal.filteredPlugins.length === 0
+                    }
+                }
+            }
+        }
+    }
 }

Services/DMSService.qml

@@ -0,0 +1,221 @@
+pragma Singleton
+
+pragma ComponentBehavior: Bound
+
+import QtCore
+import QtQuick
+import Quickshell
+import Quickshell.Io
+
+Singleton {
+    id: root
+
+    property bool dmsAvailable: false
+    property var availablePlugins: []
+    property var installedPlugins: []
+    property bool isConnected: false
+    property bool isConnecting: false
+
+    readonly property string socketPath: Quickshell.env("DMS_SOCKET")
+
+    property int nextRequestId: 1
+    property var pendingRequests: ({})
+
+    signal pluginsListReceived(var plugins)
+    signal installedPluginsReceived(var plugins)
+    signal searchResultsReceived(var plugins)
+    signal operationSuccess(string message)
+    signal operationError(string error)
+
+    Component.onCompleted: {
+        if (socketPath && socketPath.length > 0) {
+            checkSocket()
+        }
+    }
+
+    function checkSocket() {
+        testProcess.running = true
+    }
+
+    Process {
+        id: testProcess
+        command: ["test", "-S", root.socketPath]
+
+        onExited: exitCode => {
+            if (exitCode === 0) {
+                root.dmsAvailable = true
+                connectSocket()
+            } else {
+                root.dmsAvailable = false
+            }
+        }
+    }
+
+    function connectSocket() {
+        if (!dmsAvailable || isConnected || isConnecting) {
+            return
+        }
+
+        isConnecting = true
+        socket.connected = true
+    }
+
+    Socket {
+        id: socket
+        path: root.socketPath
+        connected: false
+
+        onConnectionStateChanged: {
+            if (connected) {
+                root.isConnected = true
+                root.isConnecting = false
+            } else {
+                root.isConnected = false
+                root.isConnecting = false
+            }
+        }
+
+        parser: SplitParser {
+            onRead: line => {
+                if (!line || line.length === 0) {
+                    return
+                }
+
+                try {
+                    const response = JSON.parse(line)
+                    handleResponse(response)
+                } catch (e) {
+                    console.warn("DMSService: Failed to parse response:", line, e)
+                }
+            }
+        }
+    }
+
+    function sendRequest(method, params, callback) {
+        if (!isConnected) {
+            if (callback) {
+                callback({
+                             "error": "not connected to DMS socket"
+                         })
+            }
+            return
+        }
+
+        const id = nextRequestId++
+        const request = {
+            "id": id,
+            "method": method
+        }
+
+        if (params) {
+            request.params = params
+        }
+
+        if (callback) {
+            pendingRequests[id] = callback
+        }
+
+        const json = JSON.stringify(request) + "\n"
+        socket.write(json)
+    }
+
+    function handleResponse(response) {
+        const callback = pendingRequests[response.id]
+
+        if (callback) {
+            delete pendingRequests[response.id]
+            callback(response)
+        }
+    }
+
+    function ping(callback) {
+        sendRequest("ping", null, callback)
+    }
+
+    function listPlugins(callback) {
+        sendRequest("plugins.list", null, response => {
+                        if (response.result) {
+                            availablePlugins = response.result
+                            pluginsListReceived(response.result)
+                        }
+                        if (callback) {
+                            callback(response)
+                        }
+                    })
+    }
+
+    function listInstalled(callback) {
+        sendRequest("plugins.listInstalled", null, response => {
+                        if (response.result) {
+                            installedPlugins = response.result
+                            installedPluginsReceived(response.result)
+                        }
+                        if (callback) {
+                            callback(response)
+                        }
+                    })
+    }
+
+    function search(query, category, compositor, capability, callback) {
+        const params = {
+            "query": query
+        }
+        if (category) {
+            params.category = category
+        }
+        if (compositor) {
+            params.compositor = compositor
+        }
+        if (capability) {
+            params.capability = capability
+        }
+
+        sendRequest("plugins.search", params, response => {
+                        if (response.result) {
+                            searchResultsReceived(response.result)
+                        }
+                        if (callback) {
+                            callback(response)
+                        }
+                    })
+    }
+
+    function install(pluginName, callback) {
+        sendRequest("plugins.install", {
+                        "name": pluginName
+                    }, response => {
+                        if (callback) {
+                            callback(response)
+                        }
+                        if (!response.error) {
+                            listInstalled()
+                        }
+                    })
+    }
+
+    function uninstall(pluginName, callback) {
+        sendRequest("plugins.uninstall", {
+                        "name": pluginName
+                    }, response => {
+                        if (callback) {
+                            callback(response)
+                        }
+                        if (!response.error) {
+                            listInstalled()
+                        }
+                    })
+    }
+
+    function update(pluginName, callback) {
+        sendRequest("plugins.update", {
+                        "name": pluginName
+                    }, response => {
+                        if (callback) {
+                            callback(response)
+                        }
+                        if (!response.error) {
+                            listInstalled()
+                        }
+                    })
+    }
+}

shell.qml

@@ -6,17 +6,27 @@ ShellRoot {
 
     readonly property bool runGreeter: Quickshell.env("DMS_RUN_GREETER") === "1" || Quickshell.env("DMS_RUN_GREETER") === "true"
 
+    Component {
+        id: shellComponent
+        DMSShell {}
+    }
+
+    Component {
+        id: greeterComponent
+        DMSGreeter {}
+    }
+
     Loader {
         id: dmsShellLoader
         asynchronous: false
-        sourceComponent: DMSShell{}
+        sourceComponent: shellComponent
         active: !entrypoint.runGreeter
     }
 
     Loader {
         id: dmsGreeterLoader
         asynchronous: false
-        sourceComponent: DMSGreeter{}
+        sourceComponent: greeterComponent
         active: entrypoint.runGreeter
     }
 }