add dms-plugin-dev agent skill for plugin development (#2394)

.agents/skills/dms-plugin-dev/references/advanced-patterns.md

@@ -0,0 +1,320 @@
+# Advanced Patterns
+
+Patterns observed in production DMS plugins that go beyond the basics.
+
+## Plugin Variants
+
+Create multiple widget instances from a single plugin definition. Each variant has its own configuration.
+
+### Manifest
+
+No special manifest changes needed - the variant system is built into PluginComponent.
+
+### Widget with Variant Support
+
+```qml
+PluginComponent {
+    property string variantId: ""
+    property var variantData: ({})
+
+    property string displayText: variantData?.text || "Default"
+
+    horizontalBarPill: Component {
+        StyledRect {
+            width: label.implicitWidth + Theme.spacingM * 2
+            height: parent.widgetThickness
+
+            StyledText {
+                id: label
+                anchors.centerIn: parent
+                text: root.displayText
+            }
+        }
+    }
+}
+```
+
+Widget format in bar config: `pluginId:variantId` (e.g., `exampleVariants:variant_1234567890`)
+
+### Settings with Variant Management
+
+```qml
+PluginSettings {
+    pluginId: "exampleVariants"
+
+    // Variant creation UI
+    DankButton {
+        text: "Add New Instance"
+        onClicked: {
+            var id = "variant_" + Date.now()
+            root.createVariant(id, { name: "New Instance", text: "Hello" })
+        }
+    }
+
+    // Per-variant configuration
+    Repeater {
+        model: root.variants
+        delegate: Column {
+            StringSetting {
+                settingKey: modelData.id + "_text"
+                label: modelData.name || modelData.id
+            }
+        }
+    }
+}
+```
+
+## JavaScript Utility Files
+
+For complex logic, split into `.js` files:
+
+### utils.js
+
+```javascript
+.pragma library
+
+function formatDuration(ms) {
+    if (ms < 60000) return "just now"
+    if (ms < 3600000) return Math.floor(ms / 60000) + "m ago"
+    return Math.floor(ms / 3600000) + "h ago"
+}
+
+function parseResponse(json) {
+    try {
+        return JSON.parse(json)
+    } catch (e) {
+        return null
+    }
+}
+```
+
+### Using in QML
+
+```qml
+import "utils.js" as Utils
+
+Item {
+    StyledText {
+        text: Utils.formatDuration(Date.now() - timestamp)
+    }
+}
+```
+
+The `.pragma library` directive makes the JS file a shared singleton - it is loaded once and shared across all QML instances that import it.
+
+## qmldir for Singleton Services
+
+For plugins with internal singleton services:
+
+### qmldir
+
+```
+singleton MyService 1.0 MyService.qml
+```
+
+### MyService.qml
+
+```qml
+pragma Singleton
+import QtQuick
+
+QtObject {
+    property var cache: ({})
+
+    function getData(key) {
+        return cache[key] || null
+    }
+
+    function setData(key, value) {
+        cache[key] = value
+    }
+}
+```
+
+### Using the singleton
+
+```qml
+import "." as Local
+
+Item {
+    Component.onCompleted: {
+        Local.MyService.setData("key", "value")
+    }
+}
+```
+
+## Inline Component Declarations
+
+Reusable sub-components defined inline:
+
+```qml
+Item {
+    component StatusBadge: Rectangle {
+        property string label: ""
+        property color badgeColor: Theme.primary
+
+        width: badgeText.implicitWidth + Theme.spacingM * 2
+        height: 24
+        radius: 12
+        color: badgeColor
+
+        StyledText {
+            id: badgeText
+            anchors.centerIn: parent
+            text: label
+            color: Theme.onPrimary
+            font.pixelSize: Theme.fontSizeSmall
+        }
+    }
+
+    Row {
+        spacing: Theme.spacingS
+        StatusBadge { label: "Running"; badgeColor: Theme.success }
+        StatusBadge { label: "Stopped"; badgeColor: Theme.error }
+    }
+}
+```
+
+## Multi-Provider Adapter Pattern
+
+For plugins supporting multiple backends (AI providers, API services):
+
+### apiAdapters.js
+
+```javascript
+.pragma library
+
+function createAdapter(provider) {
+    switch (provider) {
+        case "openai": return {
+            url: "https://api.openai.com/v1/chat/completions",
+            headers: (key) => ({ "Authorization": "Bearer " + key }),
+            formatRequest: (messages) => JSON.stringify({ model: "gpt-4", messages: messages }),
+            parseResponse: (text) => JSON.parse(text).choices[0].message.content
+        }
+        case "anthropic": return {
+            url: "https://api.anthropic.com/v1/messages",
+            headers: (key) => ({ "x-api-key": key, "anthropic-version": "2023-06-01" }),
+            formatRequest: (messages) => JSON.stringify({ model: "claude-sonnet-4-20250514", messages: messages }),
+            parseResponse: (text) => JSON.parse(text).content[0].text
+        }
+        default: return null
+    }
+}
+```
+
+## IPC Integration
+
+For plugins that respond to keyboard shortcuts or external commands:
+
+```qml
+PluginComponent {
+    Connections {
+        target: DMSIpc
+        function onCommandReceived(command, args) {
+            if (command === "myPlugin.toggle") {
+                doToggle()
+            } else if (command === "myPlugin.next") {
+                goNext()
+            }
+        }
+    }
+}
+```
+
+External trigger: `dms ipc call myPlugin.toggle`
+
+## Networking with Quickshell.Networking
+
+For API calls using the built-in networking module:
+
+```qml
+import Quickshell.Networking
+
+Item {
+    NetworkRequest {
+        id: request
+        url: "https://api.example.com/data"
+        method: "GET"
+
+        onResponseReceived: (response) => {
+            const data = JSON.parse(response.body)
+            processData(data)
+        }
+
+        onErrorOccurred: (error) => {
+            console.error("Network error:", error)
+        }
+    }
+
+    function fetchData() {
+        request.send()
+    }
+}
+```
+
+## Toast Notifications
+
+Show user feedback:
+
+```qml
+import qs.Services
+
+// Info toast
+ToastService?.showInfo("Operation completed")
+
+// With title
+ToastService?.showInfo("Plugin Name", "Data refreshed successfully")
+```
+
+Always use optional chaining since ToastService may not be available in all contexts.
+
+## Clipboard Operations
+
+```qml
+import Quickshell
+
+function copyToClipboard(text) {
+    Quickshell.execDetached(["dms", "cl", "copy", text])
+    ToastService?.showInfo("Copied to clipboard")
+}
+```
+
+Do NOT use `globalThis.clipboard`, `navigator.clipboard`, or any browser API - they do not exist in the QML runtime.
+
+## Multi-File Plugin Architecture
+
+Large plugins can be split across multiple files:
+
+```
+MyPlugin/
+  plugin.json
+  Main.qml           # Main widget component
+  Settings.qml       # Settings UI
+  DetailView.qml     # Popout detail view
+  utils.js            # Utility functions
+  apiAdapter.js       # API adapter layer
+  qmldir              # Optional: singleton registrations
+```
+
+Import sibling files:
+
+```qml
+// In Main.qml
+import "." as Local
+
+Item {
+    Loader {
+        source: "DetailView.qml"
+    }
+}
+```
+
+## Performance Tips
+
+1. Use `Proc.runCommand` with appropriate debounce for external commands
+2. Pre-cache images and thumbnails for image-heavy plugins
+3. Limit concurrent network requests
+4. Use `Timer` with reasonable intervals (don't poll faster than needed)
+5. Lazy-load heavy content (use `Loader` for complex popout content)
+6. Avoid blocking the UI thread with synchronous operations

.agents/skills/dms-plugin-dev/references/daemon-plugin-guide.md

@@ -0,0 +1,272 @@
+# Daemon Plugin Guide
+
+Daemon plugins are invisible background services that react to events and execute actions. They have no bar pills or desktop presence.
+
+## Base Component
+
+Daemons use `PluginComponent` with no bar pills:
+
+```qml
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Modules.Plugins
+
+PluginComponent {
+    id: root
+    property var popoutService: null
+
+    // Event-driven logic goes here
+}
+```
+
+## When to Use Daemons
+
+- Monitor system events (wallpaper changes, battery level, notifications)
+- Run periodic background tasks (polling APIs, checking system state)
+- Execute scripts in response to events
+- Control shell UI via PopoutService based on conditions
+
+## Event-Driven Pattern
+
+Use `Connections` to react to service signals:
+
+```qml
+PluginComponent {
+    property var popoutService: null
+
+    Connections {
+        target: SessionData
+        function onWallpaperPathChanged() {
+            console.log("Wallpaper changed to:", SessionData.wallpaperPath)
+            runScript(SessionData.wallpaperPath)
+        }
+    }
+
+    Connections {
+        target: BatteryService
+        function onPercentageChanged() {
+            if (BatteryService.percentage < 10 && !BatteryService.isCharging) {
+                popoutService?.openBattery()
+            }
+        }
+    }
+}
+```
+
+## Available Services
+
+Common services daemons can connect to:
+
+| Service | Signals/Properties | Description |
+|---------|-------------------|-------------|
+| `SessionData` | `wallpaperPath`, `onWallpaperPathChanged` | Desktop session state |
+| `BatteryService` | `percentage`, `isCharging`, `batteryAvailable` | Battery status |
+| `NotificationService` | `onNotificationReceived(notification)` | Desktop notifications |
+| `PluginService` | `onPluginLoaded`, `onGlobalVarChanged` | Plugin lifecycle |
+
+Import services from `qs.Services`.
+
+## Process Execution
+
+### Simple command with Proc
+
+```qml
+import qs.Common
+
+PluginComponent {
+    function runScript(arg) {
+        Proc.runCommand(
+            "myDaemon.script",
+            ["bash", "-c", "echo 'Processing: " + arg + "'"],
+            (stdout, exitCode) => {
+                if (exitCode === 0) {
+                    console.log("Script output:", stdout)
+                } else {
+                    ToastService?.showInfo("Script failed: exit " + exitCode)
+                }
+            }
+        )
+    }
+}
+```
+
+### Long-running process with Process component
+
+```qml
+import Quickshell.Io
+
+PluginComponent {
+    property string scriptPath: ""
+
+    Process {
+        id: proc
+        command: ["bash", scriptPath]
+        running: false
+
+        stdout: StdioCollector {
+            onTextReceived: (text) => {
+                console.log("stdout:", text)
+            }
+        }
+
+        stderr: StdioCollector {
+            onTextReceived: (text) => {
+                console.error("stderr:", text)
+            }
+        }
+
+        onExited: (exitCode) => {
+            if (exitCode !== 0) {
+                ToastService?.showInfo("Process failed: exit " + exitCode)
+            }
+        }
+    }
+
+    function startProcess() {
+        if (scriptPath && !proc.running) {
+            proc.running = true
+        }
+    }
+}
+```
+
+## Timer-Based Polling
+
+```qml
+PluginComponent {
+    Timer {
+        interval: 60000  // every minute
+        running: true
+        repeat: true
+        onTriggered: checkStatus()
+    }
+
+    function checkStatus() {
+        Proc.runCommand(
+            "myDaemon.check",
+            ["sh", "-c", "systemctl is-active myservice"],
+            (stdout, exitCode) => {
+                const active = stdout.trim() === "active"
+                PluginService.setGlobalVar("myDaemon", "serviceActive", active)
+            }
+        )
+    }
+}
+```
+
+## Data Persistence
+
+Daemons access PluginService directly (it's injected via PluginComponent):
+
+```qml
+PluginComponent {
+    property string configuredScript: pluginData?.scriptPath || ""
+
+    Connections {
+        target: pluginService
+        function onPluginDataChanged(changedId) {
+            if (changedId === pluginId) {
+                configuredScript = pluginService.loadPluginData(pluginId, "scriptPath", "")
+            }
+        }
+    }
+}
+```
+
+## PopoutService Usage
+
+Daemons can control shell UI via the injected popoutService:
+
+```qml
+PluginComponent {
+    property var popoutService: null
+
+    function showAlert() {
+        popoutService?.openNotificationCenter()
+    }
+
+    function openSettings() {
+        popoutService?.openSettings()
+    }
+}
+```
+
+See [popout-service-reference.md](popout-service-reference.md) for the full API.
+
+## Complete Example
+
+Based on the WallpaperWatcherDaemon:
+
+```qml
+import QtQuick
+import Quickshell
+import Quickshell.Io
+import qs.Common
+import qs.Services
+import qs.Modules.Plugins
+
+PluginComponent {
+    id: root
+    property var popoutService: null
+
+    property string scriptPath: pluginData?.scriptPath || ""
+
+    Connections {
+        target: pluginService
+        function onPluginDataChanged(changedId) {
+            if (changedId === pluginId) {
+                scriptPath = pluginService.loadPluginData(pluginId, "scriptPath", "")
+            }
+        }
+    }
+
+    Connections {
+        target: SessionData
+        function onWallpaperPathChanged() {
+            if (scriptPath) {
+                runWallpaperScript(SessionData.wallpaperPath)
+            }
+        }
+    }
+
+    function runWallpaperScript(wallpaperPath) {
+        console.log("[WallpaperWatcher] Running script:", scriptPath, wallpaperPath)
+
+        Proc.runCommand(
+            "wallpaperWatcher.run",
+            ["bash", scriptPath, wallpaperPath],
+            (stdout, exitCode) => {
+                if (exitCode === 0) {
+                    console.log("[WallpaperWatcher] Script output:", stdout)
+                } else {
+                    console.error("[WallpaperWatcher] Script failed:", exitCode)
+                    ToastService?.showInfo("Wallpaper script failed")
+                }
+            }
+        )
+    }
+
+    Component.onCompleted: {
+        console.log("[WallpaperWatcher] Daemon started")
+    }
+}
+```
+
+## Manifest Example
+
+```json
+{
+    "id": "wallpaperWatcher",
+    "name": "Wallpaper Watcher",
+    "description": "Runs a script when the wallpaper changes",
+    "version": "1.0.0",
+    "author": "Developer",
+    "type": "daemon",
+    "capabilities": ["wallpaper-automation"],
+    "component": "./WallpaperWatcher.qml",
+    "icon": "wallpaper",
+    "settings": "./Settings.qml",
+    "permissions": ["settings_read", "settings_write", "process"]
+}
+```

.agents/skills/dms-plugin-dev/references/data-persistence-guide.md

@@ -0,0 +1,176 @@
+# Data Persistence Guide
+
+DMS plugins have three tiers of data persistence, each suited for different use cases.
+
+## Tier 1: Plugin Data (Settings)
+
+Persisted to `settings.json`. Use for user preferences and configuration.
+
+### Saving
+
+```qml
+pluginService.savePluginData(pluginId, "key", value)
+```
+
+### Loading
+
+```qml
+var value = pluginService.loadPluginData(pluginId, "key", defaultValue)
+```
+
+### Reactive Access via pluginData
+
+`PluginComponent` has a reactive `pluginData` property that auto-loads from settings:
+
+```qml
+PluginComponent {
+    property string displayText: pluginData?.text || "Default"
+    property bool showIcon: pluginData?.showIcon !== undefined ? pluginData.showIcon : true
+}
+```
+
+### Reacting to Settings Changes
+
+When settings are changed (e.g., from the settings UI), react with `Connections`:
+
+```qml
+Connections {
+    target: pluginService
+    function onPluginDataChanged(changedId) {
+        if (changedId !== pluginId) return
+        displayText = pluginService.loadPluginData(pluginId, "text", "Default")
+        showIcon = pluginService.loadPluginData(pluginId, "showIcon", true)
+    }
+}
+```
+
+## Tier 2: Plugin State
+
+Persisted to a separate state file. Use for runtime state that should survive restarts but is not user-configurable (history, cache, counters).
+
+### Saving
+
+```qml
+pluginService.savePluginState(pluginId, "key", value)
+```
+
+### Loading
+
+```qml
+var state = pluginService.loadPluginState(pluginId, "key", defaultValue)
+```
+
+### Additional Methods
+
+```qml
+pluginService.clearPluginState(pluginId)
+pluginService.removePluginStateKey(pluginId, "key")
+```
+
+### Example: Persistent History
+
+```qml
+Item {
+    property var history: []
+
+    Component.onCompleted: {
+        history = pluginService?.loadPluginState(pluginId, "history", []) || []
+    }
+
+    function addToHistory(entry) {
+        history.unshift({
+            text: entry,
+            timestamp: Date.now()
+        })
+        if (history.length > 100) history = history.slice(0, 100)
+        pluginService?.savePluginState(pluginId, "history", history)
+    }
+
+    function clearHistory() {
+        history = []
+        pluginService?.removePluginStateKey(pluginId, "history")
+    }
+}
+```
+
+## Tier 3: Global Variables (Runtime Only)
+
+NOT persisted. Shared across all instances of a plugin. Use for cross-instance state synchronization (multi-monitor consistency, multi-instance widgets).
+
+### Using PluginGlobalVar Component
+
+```qml
+import qs.Modules.Plugins
+
+PluginComponent {
+    PluginGlobalVar {
+        id: globalCounter
+        varName: "counter"
+        defaultValue: 0
+    }
+
+    horizontalBarPill: Component {
+        StyledRect {
+            // ...
+            StyledText {
+                text: "Count: " + globalCounter.value
+            }
+
+            MouseArea {
+                onClicked: globalCounter.set(globalCounter.value + 1)
+            }
+        }
+    }
+}
+```
+
+**PluginGlobalVar properties:**
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `varName` | string | Required: name of the global variable |
+| `defaultValue` | any | Optional: default if not set |
+| `value` | any | Readonly: current value |
+
+**Methods:**
+- `set(newValue)` - update the value (triggers reactivity across all instances)
+
+### Using PluginService API Directly
+
+```qml
+import qs.Services
+
+property int counter: PluginService.getGlobalVar("myPlugin", "counter", 0)
+
+Connections {
+    target: PluginService
+    function onGlobalVarChanged(pluginId, varName) {
+        if (pluginId === "myPlugin" && varName === "counter") {
+            counter = PluginService.getGlobalVar("myPlugin", "counter", 0)
+        }
+    }
+}
+
+function increment() {
+    var current = PluginService.getGlobalVar("myPlugin", "counter", 0)
+    PluginService.setGlobalVar("myPlugin", "counter", current + 1)
+}
+```
+
+## Decision Matrix
+
+| Need | API | Persisted | Scope |
+|------|-----|-----------|-------|
+| User preferences (API keys, themes, intervals) | `savePluginData` / `loadPluginData` | Yes (settings.json) | Per plugin |
+| Runtime state (history, cache, counters) | `savePluginState` / `loadPluginState` | Yes (state file) | Per plugin |
+| Cross-instance sync (multi-monitor data) | `PluginGlobalVar` or `getGlobalVar`/`setGlobalVar` | No (runtime only) | All instances |
+| Quick reactive reads from settings | `pluginData` property | N/A (read-only) | Per instance |
+
+## Important Notes
+
+1. **pluginData is reactive** - bindings update automatically when data changes
+2. **Global vars are NOT persistent** - they reset when the shell restarts
+3. **State vs Data** - data is for user-facing settings, state is for internal runtime data
+4. **Null safety** - always check `pluginService` is not null before calling methods
+5. **Signal namespacing** - global var signals include `pluginId` to filter for your plugin
+6. **Performance** - global vars are efficient for frequent updates; settings writes are batched

.agents/skills/dms-plugin-dev/references/desktop-plugin-guide.md

@@ -0,0 +1,240 @@
+# Desktop Plugin Guide
+
+Desktop plugins are widgets that appear on the desktop background layer. They support drag-and-drop positioning and resize via corner handles.
+
+## Base Component
+
+Desktop widgets use a plain `Item` with injected properties:
+
+```qml
+import QtQuick
+import qs.Common
+
+Item {
+    id: root
+
+    property var pluginService: null
+    property string pluginId: ""
+    property bool editMode: false
+    property real widgetWidth: 200
+    property real widgetHeight: 200
+    property real minWidth: 150
+    property real minHeight: 150
+
+    Rectangle {
+        anchors.fill: parent
+        radius: Theme.cornerRadius
+        color: Theme.surfaceContainer
+        opacity: 0.85
+
+        // Your content here
+    }
+}
+```
+
+## Injected Properties
+
+These are set automatically by the DesktopPluginWrapper:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `pluginService` | object | PluginService reference for data persistence |
+| `pluginId` | string | Plugin's unique identifier |
+| `editMode` | bool | `true` when user is dragging/resizing |
+| `widgetWidth` | real | Current widget container width |
+| `widgetHeight` | real | Current widget container height |
+
+## Optional Properties
+
+Define these on your root item to customize behavior:
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `minWidth` | real | 100 | Minimum allowed width during resize |
+| `minHeight` | real | 100 | Minimum allowed height during resize |
+
+## Position and Size Persistence
+
+Position (`desktopX`, `desktopY`) and size (`desktopWidth`, `desktopHeight`) are automatically managed by the DesktopPluginWrapper. You do not need to handle persistence for positioning.
+
+## Edit Mode
+
+When `editMode` is true, the user is repositioning or resizing. Use this to:
+- Show visual indicators (borders, handles)
+- Disable interactive elements to prevent accidental actions
+- Display additional controls
+
+```qml
+Rectangle {
+    anchors.fill: parent
+    border.color: root.editMode ? Theme.primary : "transparent"
+    border.width: root.editMode ? 2 : 0
+
+    MouseArea {
+        anchors.fill: parent
+        enabled: !root.editMode
+        onClicked: doSomething()
+    }
+}
+```
+
+## Loading and Saving Data
+
+Use the injected `pluginService` for data persistence:
+
+```qml
+property string displayMode: {
+    if (!pluginService) return "default"
+    return pluginService.loadPluginData(pluginId, "displayMode", "default")
+}
+
+Connections {
+    target: pluginService
+    function onPluginDataChanged(changedId) {
+        if (changedId !== pluginId) return
+        root.displayMode = pluginService.loadPluginData(pluginId, "displayMode", "default")
+    }
+}
+
+function saveMode(mode) {
+    pluginService?.savePluginData(pluginId, "displayMode", mode)
+}
+```
+
+## Settings Component
+
+Desktop plugin settings use the same `PluginSettings` wrapper as other types:
+
+```qml
+import QtQuick
+import qs.Common
+import qs.Widgets
+import qs.Modules.Plugins
+
+PluginSettings {
+    pluginId: "myDesktopWidget"
+
+    SliderSetting {
+        settingKey: "opacity"
+        label: "Opacity"
+        description: "Widget background opacity"
+        defaultValue: 85
+        minimum: 10
+        maximum: 100
+        unit: "%"
+    }
+
+    SelectionSetting {
+        settingKey: "style"
+        label: "Display Style"
+        options: [
+            { label: "Compact", value: "compact" },
+            { label: "Expanded", value: "expanded" }
+        ]
+        defaultValue: "compact"
+    }
+}
+```
+
+## User Interaction
+
+Desktop widgets support:
+1. **Drag** - click and drag anywhere (in edit mode)
+2. **Resize** - drag bottom-right corner handle (in edit mode)
+3. **Edit mode toggle** - via the desktop edit button
+
+## Complete Example
+
+Based on the ExampleDesktopClock pattern:
+
+```qml
+import QtQuick
+import qs.Common
+
+Item {
+    id: root
+
+    property var pluginService: null
+    property string pluginId: ""
+    property bool editMode: false
+    property real widgetWidth: 250
+    property real widgetHeight: 250
+    property real minWidth: 150
+    property real minHeight: 150
+
+    property string clockStyle: {
+        if (!pluginService) return "digital"
+        return pluginService.loadPluginData(pluginId, "clockStyle", "digital")
+    }
+
+    property real bgOpacity: {
+        if (!pluginService) return 0.85
+        var val = pluginService.loadPluginData(pluginId, "opacity", 85)
+        return val / 100
+    }
+
+    Connections {
+        target: pluginService
+        function onPluginDataChanged(changedId) {
+            if (changedId !== pluginId) return
+            clockStyle = pluginService.loadPluginData(pluginId, "clockStyle", "digital")
+            var val = pluginService.loadPluginData(pluginId, "opacity", 85)
+            bgOpacity = val / 100
+        }
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        radius: Theme.cornerRadius
+        color: Theme.surfaceContainer
+        opacity: root.bgOpacity
+        border.color: root.editMode ? Theme.primary : "transparent"
+        border.width: root.editMode ? 2 : 0
+
+        Column {
+            anchors.centerIn: parent
+            spacing: Theme.spacingS
+
+            Text {
+                anchors.horizontalCenter: parent.horizontalCenter
+                text: Qt.formatTime(new Date(), "hh:mm:ss")
+                color: Theme.surfaceText
+                font.pixelSize: root.widgetWidth * 0.15
+                font.weight: Font.Bold
+            }
+
+            Text {
+                anchors.horizontalCenter: parent.horizontalCenter
+                text: Qt.formatDate(new Date(), "ddd, MMM d")
+                color: Theme.onSurfaceVariant
+                font.pixelSize: Theme.fontSizeMedium
+            }
+        }
+    }
+
+    Timer {
+        interval: 1000
+        running: true
+        repeat: true
+        onTriggered: root.widgetWidth = root.widgetWidth // force update
+    }
+}
+```
+
+## Manifest Example
+
+```json
+{
+    "id": "myDesktopClock",
+    "name": "Desktop Clock",
+    "description": "Analog and digital clock for the desktop",
+    "version": "1.0.0",
+    "author": "Developer",
+    "type": "desktop",
+    "capabilities": ["desktop-widget"],
+    "component": "./ClockWidget.qml",
+    "icon": "schedule",
+    "settings": "./Settings.qml",
+    "permissions": ["settings_read", "settings_write"]
+}
+```

.agents/skills/dms-plugin-dev/references/launcher-plugin-guide.md

@@ -0,0 +1,308 @@
+# Launcher Plugin Guide
+
+Launcher plugins extend the DMS launcher with custom searchable items and actions. They use trigger-based filtering and integrate directly into the app drawer.
+
+## Base Component
+
+Launchers use a plain `Item` (not PluginComponent):
+
+```qml
+import QtQuick
+import qs.Services
+
+Item {
+    id: root
+
+    property var pluginService: null
+    property string trigger: "#"
+
+    signal itemsChanged()
+
+    function getItems(query) {
+        // Return array of items
+        return []
+    }
+
+    function executeItem(item) {
+        // Handle item selection
+    }
+}
+```
+
+## Required Interface
+
+| Member | Type | Description |
+|--------|------|-------------|
+| `pluginService` | property | Injected PluginService reference (declare as `null`) |
+| `trigger` | property | Trigger string for activation |
+| `itemsChanged` | signal | Emit when item list changes (triggers UI refresh) |
+| `getItems(query)` | function | Return array of items matching query |
+| `executeItem(item)` | function | Handle item selection |
+
+## Item Structure
+
+Each item returned by `getItems()`:
+
+```javascript
+{
+    name: "Item Display Name",       // Required: shown in launcher
+    icon: "material:star",           // Optional: icon specification
+    comment: "Description text",     // Required: subtitle text
+    action: "type:data",             // Required: action identifier
+    categories: ["MyPlugin"],        // Required: array with plugin category
+    imageUrl: "https://..."          // Optional: image for tile view
+}
+```
+
+## Icon Types
+
+### 1. Material Design Icons
+
+```javascript
+{ icon: "material:lightbulb" }
+{ icon: "material:terminal" }
+{ icon: "material:translate" }
+```
+
+Uses the Material Symbols Rounded font.
+
+### 2. Unicode / Emoji Icons
+
+```javascript
+{ icon: "unicode:smile_face" }
+```
+
+Rendered at 70-80% of icon size with theming.
+
+### 3. Desktop Theme Icons
+
+```javascript
+{ icon: "firefox" }
+{ icon: "folder" }
+```
+
+Uses the user's installed icon theme.
+
+### 4. No Icon
+
+Omit the `icon` field entirely. The launcher hides the icon area and gives full width to the item name.
+
+## Trigger System
+
+**Custom trigger** (items only appear when trigger is typed):
+
+```json
+{ "trigger": "#" }
+```
+
+- Type `#` alone: shows all plugin items
+- Type `# query`: filters plugin items by query
+- The query string (without trigger) is passed to `getItems(query)`
+
+**No trigger** (items always visible alongside regular apps):
+
+```json
+{ "trigger": "" }
+```
+
+Save empty trigger at runtime:
+```qml
+Component.onCompleted: {
+    trigger = pluginService?.loadPluginData(pluginId, "trigger", "#") ?? "#"
+}
+```
+
+## Action Execution
+
+Parse action strings in `executeItem()`:
+
+```qml
+function executeItem(item) {
+    const actionParts = item.action.split(":")
+    const actionType = actionParts[0]
+    const actionData = actionParts.slice(1).join(":")
+
+    switch (actionType) {
+        case "toast":
+            ToastService?.showInfo(actionData)
+            break
+        case "copy":
+            Quickshell.execDetached(["dms", "cl", "copy", actionData])
+            ToastService?.showInfo("Copied to clipboard")
+            break
+        case "exec":
+            Quickshell.execDetached(actionData.split(" "))
+            break
+        case "url":
+            Quickshell.execDetached(["xdg-open", actionData])
+            break
+        default:
+            console.warn("Unknown action type:", actionType)
+    }
+}
+```
+
+## Search / Filtering
+
+The `query` parameter in `getItems()` contains the user's search text (without the trigger prefix).
+
+```qml
+function getItems(query) {
+    const allItems = [
+        { name: "Calculator", icon: "material:calculate",
+          comment: "Open calculator", action: "exec:gnome-calculator",
+          categories: ["Tools"] },
+        { name: "Terminal", icon: "material:terminal",
+          comment: "Open terminal", action: "exec:alacritty",
+          categories: ["Tools"] }
+    ]
+
+    if (!query || query.length === 0) return allItems
+
+    const q = query.toLowerCase()
+    return allItems.filter(item =>
+        item.name.toLowerCase().includes(q) ||
+        item.comment.toLowerCase().includes(q)
+    )
+}
+```
+
+## Context Menu Actions
+
+Add right-click actions to launcher items:
+
+```qml
+function getContextMenuActions(item) {
+    return [
+        { name: "Copy", icon: "material:content_copy",
+          action: "copy:" + item.name },
+        { name: "Open in Browser", icon: "material:open_in_new",
+          action: "url:" + item.url }
+    ]
+}
+```
+
+Context menu actions use the same `executeItem()` handler.
+
+## Image Tile View
+
+For image-heavy launchers (GIF search, sticker pickers), use tile view:
+
+In `plugin.json`:
+```json
+{
+    "viewMode": "tile",
+    "viewModeEnforced": true
+}
+```
+
+In items:
+```javascript
+{
+    name: "Image Title",
+    imageUrl: "https://example.com/image.png",
+    comment: "Description",
+    action: "copy:https://example.com/image.png",
+    categories: ["MyPlugin"]
+}
+```
+
+## State Persistence
+
+For plugins with persistent state (notes, history, favorites):
+
+```qml
+property var notes: []
+
+Component.onCompleted: {
+    const saved = pluginService?.loadPluginState(pluginId, "notes", [])
+    if (saved) notes = saved
+}
+
+function addNote(text) {
+    notes.push({ text: text, timestamp: Date.now() })
+    pluginService?.savePluginState(pluginId, "notes", notes)
+    itemsChanged()
+}
+```
+
+Use `savePluginState/loadPluginState` for runtime data and `savePluginData/loadPluginData` for user preferences.
+
+## Settings for Trigger Configuration
+
+Provide a PluginSettings component for trigger customization:
+
+```qml
+import QtQuick
+import qs.Common
+import qs.Widgets
+import qs.Modules.Plugins
+
+PluginSettings {
+    pluginId: "myLauncher"
+
+    StringSetting {
+        settingKey: "trigger"
+        label: "Trigger"
+        description: "Type this prefix to activate the launcher plugin"
+        placeholder: "#"
+        defaultValue: "#"
+    }
+
+    ToggleSetting {
+        settingKey: "noTrigger"
+        label: "Always Visible"
+        description: "Show items alongside regular apps (no trigger needed)"
+        defaultValue: false
+    }
+}
+```
+
+## Complete Example
+
+```qml
+import QtQuick
+import Quickshell
+import qs.Services
+
+Item {
+    id: root
+
+    property var pluginService: null
+    property string trigger: "!"
+
+    signal itemsChanged()
+
+    property var commands: [
+        { name: "Lock Screen", icon: "material:lock",
+          comment: "Lock the session", action: "exec:loginctl lock-session" },
+        { name: "Screenshot", icon: "material:screenshot_monitor",
+          comment: "Take a screenshot", action: "exec:grim" },
+        { name: "File Manager", icon: "material:folder",
+          comment: "Open file manager", action: "exec:nautilus" }
+    ]
+
+    function getItems(query) {
+        if (!query) return commands
+        const q = query.toLowerCase()
+        return commands.filter(c =>
+            c.name.toLowerCase().includes(q) ||
+            c.comment.toLowerCase().includes(q)
+        )
+    }
+
+    function executeItem(item) {
+        const [type, ...rest] = item.action.split(":")
+        const data = rest.join(":")
+        if (type === "exec") {
+            Quickshell.execDetached(data.split(" "))
+        }
+    }
+
+    Component.onCompleted: {
+        if (pluginService) {
+            trigger = pluginService.loadPluginData("quickCommands", "trigger", "!")
+        }
+    }
+}
+```

.agents/skills/dms-plugin-dev/references/plugin-manifest-reference.md

@@ -0,0 +1,119 @@
+# Plugin Manifest Reference (plugin.json)
+
+## Required Fields
+
+| Field | Type | Description | Validation |
+|-------|------|-------------|------------|
+| `id` | string | Unique plugin identifier | camelCase, pattern `^[a-zA-Z][a-zA-Z0-9]*$` |
+| `name` | string | Human-readable name | Non-empty |
+| `description` | string | Short description (shown in UI) | Non-empty |
+| `version` | string | Semantic version | Pattern `^\d+\.\d+\.\d+(-[a-zA-Z0-9.-]+)?(\+[a-zA-Z0-9.-]+)?$` |
+| `author` | string | Creator name or email | Non-empty |
+| `type` | string | Plugin type | One of: `widget`, `daemon`, `launcher`, `desktop` |
+| `capabilities` | array | Plugin capabilities | At least 1 string item |
+| `component` | string | Path to main QML file | Must start with `./`, end with `.qml` |
+
+## Conditional Requirements
+
+| Condition | Required Field | Description |
+|-----------|---------------|-------------|
+| `type: "launcher"` | `trigger` | Trigger string for launcher activation (e.g., `=`, `#`, `!`) |
+
+## Optional Fields
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `icon` | string | Material Design icon name (displayed in plugin list UI) |
+| `settings` | string | Path to settings QML file (must start with `./`, end with `.qml`) |
+| `requires_dms` | string | Minimum DMS version (e.g., `>=0.1.18`), pattern `^(>=?\|<=?\|=\|>\|<)\d+\.\d+\.\d+$` |
+| `requires` | array | System tool dependencies (e.g., `["curl", "jq"]`) |
+| `permissions` | array | Required permissions |
+| `trigger` | string | Launcher trigger string (required for launcher type) |
+
+## Permissions
+
+| Permission | Description | Enforced |
+|------------|-------------|----------|
+| `settings_read` | Read plugin configuration | No (not currently enforced) |
+| `settings_write` | Write plugin configuration / use PluginSettings | **Yes** |
+| `process` | Execute system commands | No (not currently enforced) |
+| `network` | Network access | No (not currently enforced) |
+
+If your plugin has a `settings` component but does not declare `settings_write`, users will see an error instead of the settings UI.
+
+## Capabilities
+
+Capabilities are free-form strings that describe what the plugin does. Common values:
+
+- `dankbar-widget` - general bar widget
+- `control-center` - integrates with Control Center
+- `monitoring` - system/service monitoring
+- `launcher` - launcher search provider
+- `desktop-widget` - desktop background widget
+- `ai` - AI/LLM integration
+- `slideout` - uses slideout panel
+
+## Complete Example
+
+```json
+{
+    "id": "myPlugin",
+    "name": "My Plugin",
+    "description": "A sample plugin demonstrating all fields",
+    "version": "1.0.0",
+    "author": "Developer Name",
+    "type": "widget",
+    "capabilities": ["dankbar-widget", "control-center"],
+    "component": "./MyWidget.qml",
+    "icon": "extension",
+    "settings": "./Settings.qml",
+    "requires_dms": ">=0.1.18",
+    "requires": ["curl", "jq"],
+    "permissions": ["settings_read", "settings_write", "process", "network"]
+}
+```
+
+## Launcher Example
+
+```json
+{
+    "id": "myLauncher",
+    "name": "My Launcher",
+    "description": "Search and execute custom actions",
+    "version": "1.0.0",
+    "author": "Developer Name",
+    "type": "launcher",
+    "capabilities": ["launcher"],
+    "component": "./MyLauncher.qml",
+    "trigger": "#",
+    "icon": "search",
+    "settings": "./Settings.qml",
+    "requires_dms": ">=0.1.18",
+    "permissions": ["settings_read", "settings_write"]
+}
+```
+
+## JSON Schema
+
+The complete JSON schema is available at `assets/plugin-schema.json` in this skill. Validate with:
+
+```bash
+# Using python
+python3 -c "
+import json, jsonschema
+schema = json.load(open('path/to/plugin-schema.json'))
+manifest = json.load(open('plugin.json'))
+jsonschema.validate(manifest, schema)
+print('Valid!')
+"
+
+# Using jq (syntax check only)
+jq . plugin.json
+```
+
+## Additional Properties
+
+The schema allows additional properties (`"additionalProperties": true`), so plugins can include custom fields. Common custom fields seen in production plugins:
+
+- `viewMode` - launcher display mode (`"tile"` for image grids)
+- `viewModeEnforced` - lock launcher to specific view mode (`true`/`false`)

.agents/skills/dms-plugin-dev/references/popout-service-reference.md

@@ -0,0 +1,120 @@
+# PopoutService Reference
+
+The `PopoutService` singleton lets plugins control all DMS popouts and modals. It is automatically injected into widget, daemon, and settings components.
+
+## Setup
+
+Declare the property in your component for injection to work:
+
+```qml
+property var popoutService: null
+```
+
+Without this declaration, injection fails with: `Cannot assign to non-existent property "popoutService"`
+
+## Popouts (DankPopout-based)
+
+| Component | Open | Close | Toggle |
+|-----------|------|-------|--------|
+| Control Center | `openControlCenter()` | `closeControlCenter()` | `toggleControlCenter()` |
+| Notification Center | `openNotificationCenter()` | `closeNotificationCenter()` | `toggleNotificationCenter()` |
+| App Drawer | `openAppDrawer()` | `closeAppDrawer()` | `toggleAppDrawer()` |
+| Process List | `openProcessList()` | `closeProcessList()` | `toggleProcessList()` |
+| DankDash | `openDankDash(tab)` | `closeDankDash()` | `toggleDankDash(tab)` |
+| Battery | `openBattery()` | `closeBattery()` | `toggleBattery()` |
+| VPN | `openVpn()` | `closeVpn()` | `toggleVpn()` |
+| System Update | `openSystemUpdate()` | `closeSystemUpdate()` | `toggleSystemUpdate()` |
+
+## Modals (DankModal-based)
+
+| Modal | Show | Hide | Notes |
+|-------|------|------|-------|
+| Settings | `openSettings()` | `closeSettings()` | Full settings interface |
+| Clipboard History | `openClipboardHistory()` | `closeClipboardHistory()` | Clipboard integration |
+| Launcher | `openDankLauncherV2()` | `closeDankLauncherV2()` | Also has `toggleDankLauncherV2()` |
+| Power Menu | `openPowerMenu()` | `closePowerMenu()` | Also has `togglePowerMenu()` |
+| Process List Modal | `showProcessListModal()` | `hideProcessListModal()` | Has `toggleProcessListModal()` |
+| Color Picker | `showColorPicker()` | `hideColorPicker()` | Theme color selection |
+| Notification | `showNotificationModal()` | `hideNotificationModal()` | Notification details |
+| WiFi Password | `showWifiPasswordModal()` | `hideWifiPasswordModal()` | Network auth |
+| Network Info | `showNetworkInfoModal()` | `hideNetworkInfoModal()` | Network details |
+
+## Slideouts
+
+| Component | Open | Close | Toggle |
+|-----------|------|-------|--------|
+| Notepad | `openNotepad()` | `closeNotepad()` | `toggleNotepad()` |
+
+## Usage Examples
+
+### Simple toggle
+
+```qml
+MouseArea {
+    onClicked: popoutService?.toggleControlCenter()
+}
+```
+
+### Conditional popout
+
+```qml
+Connections {
+    target: BatteryService
+    function onPercentageChanged() {
+        if (BatteryService.percentage < 10 && !BatteryService.isCharging) {
+            popoutService?.openBattery()
+        }
+    }
+}
+```
+
+### Context menu with multiple actions
+
+```qml
+MouseArea {
+    acceptedButtons: Qt.LeftButton | Qt.RightButton
+    onClicked: (mouse) => {
+        if (mouse.button === Qt.RightButton) contextMenu.popup()
+        else popoutService?.toggleControlCenter()
+    }
+}
+
+Menu {
+    id: contextMenu
+    MenuItem { text: "Settings"; onClicked: popoutService?.openSettings() }
+    MenuItem { text: "Notifications"; onClicked: popoutService?.toggleNotificationCenter() }
+    MenuItem { text: "Power"; onClicked: popoutService?.openPowerMenu() }
+}
+```
+
+### Position-aware toggle (from bar pill)
+
+Some toggle functions accept position parameters for proper popout placement:
+
+```qml
+pillClickAction: (x, y, width, section, screen) => {
+    popoutService?.toggleControlCenter(x, y, width, section, screen)
+}
+```
+
+## Best Practices
+
+1. **Always use optional chaining** (`?.`) - the service may not be injected yet
+2. **Check feature availability** before opening feature-specific popouts:
+   ```qml
+   if (BatteryService.batteryAvailable) {
+       popoutService?.openBattery()
+   }
+   ```
+3. **Lazy loading** - first access may activate lazy loaders; this is normal
+4. **Popouts are shared** - avoid opening conflicting popouts simultaneously
+5. **User intent** - only trigger popouts from user actions or critical system events
+6. **Multi-monitor** - positioned popouts are screen-aware when using position parameters
+
+## Injection Locations
+
+The service is injected at these points:
+- `DMSShell.qml` - daemon plugins
+- `WidgetHost.qml` - widget plugins in left/right bar sections
+- `CenterSection.qml` - center bar widgets
+- `PluginsTab.qml` - settings components

.agents/skills/dms-plugin-dev/references/settings-components-reference.md

@@ -0,0 +1,273 @@
+# Settings Components Reference
+
+All plugin settings use the `PluginSettings` wrapper. Setting components auto-save on change and auto-load on creation.
+
+## PluginSettings Wrapper
+
+```qml
+import QtQuick
+import qs.Common
+import qs.Widgets
+import qs.Modules.Plugins
+
+PluginSettings {
+    pluginId: "yourPlugin"  // Required: must match plugin.json id
+
+    // Setting components go here
+}
+```
+
+**Important:** The plugin must declare `"permissions": ["settings_write"]` in plugin.json for the settings UI to render. Without it, users see an error.
+
+**PluginSettings provides to children:**
+- `saveValue(key, value)` - save a setting value
+- `loadValue(key, defaultValue)` - load a setting value
+- `saveState(key, value)` - save plugin state (separate file)
+- `loadState(key, defaultValue)` - load plugin state
+- `clearState()` - clear all plugin state
+- Variant management functions (for variant plugins)
+
+## StringSetting
+
+Text input field.
+
+```qml
+StringSetting {
+    settingKey: "apiKey"        // Required: storage key
+    label: "API Key"            // Required: display label
+    description: "Your API key" // Optional: help text
+    placeholder: "sk-..."      // Optional: input placeholder
+    defaultValue: ""            // Optional: default (default: "")
+}
+```
+
+**Layout:** Vertical stack - label, description, input field.
+
+## ToggleSetting
+
+Boolean toggle switch.
+
+```qml
+ToggleSetting {
+    settingKey: "notifications"    // Required: storage key
+    label: "Enable Notifications"  // Required: display label
+    description: "Show alerts"     // Optional: help text
+    defaultValue: true             // Optional: default (default: false)
+}
+```
+
+**Layout:** Horizontal - label/description on left, toggle on right.
+
+## SelectionSetting
+
+Dropdown menu.
+
+```qml
+SelectionSetting {
+    settingKey: "theme"           // Required: storage key
+    label: "Theme"                // Required: display label
+    description: "Color scheme"   // Optional: help text
+    options: [                    // Required: array of options
+        { label: "Dark", value: "dark" },
+        { label: "Light", value: "light" },
+        { label: "Auto", value: "auto" }
+    ]
+    defaultValue: "dark"          // Optional: default value
+}
+```
+
+Options can be `{ label, value }` objects or simple strings. Stores the `value` field, displays the `label` field.
+
+**Layout:** Horizontal - label/description on left, dropdown on right.
+
+**Reacting to changes:**
+```qml
+SelectionSetting {
+    settingKey: "updateInterval"
+    label: "Update Interval"
+    options: [
+        { label: "1 minute", value: "60" },
+        { label: "5 minutes", value: "300" }
+    ]
+    defaultValue: "300"
+    onValueChanged: (newValue) => {
+        console.log("Interval changed to:", newValue)
+    }
+}
+```
+
+## SliderSetting
+
+Numeric slider with min/max.
+
+```qml
+SliderSetting {
+    settingKey: "opacity"      // Required: storage key
+    label: "Opacity"           // Required: display label
+    description: "Background"  // Optional: help text
+    defaultValue: 85           // Optional: default value
+    minimum: 0                 // Required: min value
+    maximum: 100               // Required: max value
+    unit: "%"                  // Optional: unit label shown after value
+    leftIcon: "dark_mode"      // Optional: Material icon on left
+    rightIcon: "light_mode"    // Optional: Material icon on right
+}
+```
+
+## ColorSetting
+
+Color picker.
+
+```qml
+ColorSetting {
+    settingKey: "accentColor"      // Required: storage key
+    label: "Accent Color"          // Required: display label
+    description: "Custom accent"   // Optional: help text
+    defaultValue: "#ff5722"        // Optional: default hex color
+}
+```
+
+Displays a color swatch that opens a color picker dialog.
+
+## ListSetting
+
+Manage a list of items with manual add/remove. Use when you need custom UI for adding items.
+
+```qml
+ListSetting {
+    id: itemList
+    settingKey: "items"           // Required: storage key
+    label: "Saved Items"          // Required: display label
+    description: "Your items"     // Optional: help text
+    defaultValue: []              // Optional: default array
+    delegate: Component {         // Optional: custom item display
+        StyledRect {
+            width: parent.width
+            height: 40
+            radius: Theme.cornerRadius
+            color: Theme.surfaceContainerHigh
+
+            StyledText {
+                anchors.left: parent.left
+                anchors.leftMargin: Theme.spacingM
+                anchors.verticalCenter: parent.verticalCenter
+                text: modelData.name
+                color: Theme.surfaceText
+            }
+
+            Rectangle {
+                anchors.right: parent.right
+                anchors.rightMargin: Theme.spacingM
+                anchors.verticalCenter: parent.verticalCenter
+                width: 60
+                height: 28
+                color: removeArea.containsMouse ? Theme.errorHover : Theme.error
+                radius: Theme.cornerRadius
+
+                StyledText {
+                    anchors.centerIn: parent
+                    text: "Remove"
+                    color: Theme.errorText
+                    font.pixelSize: Theme.fontSizeSmall
+                    font.weight: Font.Medium
+                }
+
+                MouseArea {
+                    id: removeArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: itemList.removeItem(index)
+                }
+            }
+        }
+    }
+}
+```
+
+**Methods:**
+- `addItem(item)` - add an item to the list
+- `removeItem(index)` - remove item at index
+
+## ListSettingWithInput
+
+Complete list management with built-in form. Best for collecting structured data.
+
+```qml
+ListSettingWithInput {
+    settingKey: "locations"        // Required: storage key
+    label: "Locations"             // Required: display label
+    description: "Track zones"     // Optional: help text
+    defaultValue: []               // Optional: default array
+    fields: [                      // Required: field definitions
+        {
+            id: "name",            // Required: key in saved object
+            label: "Name",         // Required: column header
+            placeholder: "Home",   // Optional: input placeholder
+            width: 150,            // Optional: column width (default: 200)
+            required: true         // Optional: must have value to add
+        },
+        {
+            id: "timezone",
+            label: "Timezone",
+            placeholder: "America/New_York",
+            width: 200,
+            required: true
+        }
+    ]
+}
+```
+
+Automatically generates: column headers, input fields, add button with validation, list display, remove buttons.
+
+## Mixing Custom UI with Settings
+
+You can interleave regular QML elements with setting components:
+
+```qml
+PluginSettings {
+    pluginId: "myPlugin"
+
+    StyledText {
+        width: parent.width
+        text: "General Settings"
+        font.pixelSize: Theme.fontSizeLarge
+        font.weight: Font.Bold
+        color: Theme.surfaceText
+    }
+
+    StringSetting {
+        settingKey: "name"
+        label: "Display Name"
+    }
+
+    StyledText {
+        width: parent.width
+        text: "Advanced Settings"
+        font.pixelSize: Theme.fontSizeLarge
+        font.weight: Font.Bold
+        color: Theme.surfaceText
+        topPadding: Theme.spacingL
+    }
+
+    ToggleSetting {
+        settingKey: "debug"
+        label: "Debug Mode"
+        defaultValue: false
+    }
+}
+```
+
+## Default Values
+
+Define sensible defaults in every setting component. The default is used when no saved value exists:
+
+```qml
+StringSetting { settingKey: "text"; defaultValue: "Hello" }
+ToggleSetting { settingKey: "enabled"; defaultValue: true }
+SelectionSetting { settingKey: "mode"; defaultValue: "auto" }
+SliderSetting { settingKey: "opacity"; defaultValue: 85 }
+ColorSetting { settingKey: "color"; defaultValue: "#ff5722" }
+ListSetting { settingKey: "items"; defaultValue: [] }
+ListSettingWithInput { settingKey: "data"; defaultValue: [] }
+```

.agents/skills/dms-plugin-dev/references/theme-reference.md

@@ -0,0 +1,216 @@
+# Theme Property Reference
+
+All theme properties are accessed via the `Theme` singleton from `qs.Common`. Always use these instead of hardcoded values.
+
+## Font Sizes
+
+```qml
+Theme.fontSizeSmall     // 12px (scaled by SettingsData.fontScale)
+Theme.fontSizeMedium    // 14px (scaled)
+Theme.fontSizeLarge     // 16px (scaled)
+Theme.fontSizeXLarge    // 20px (scaled)
+```
+
+## Icon Sizes
+
+```qml
+Theme.iconSizeSmall     // 16px
+Theme.iconSize          // 24px (default)
+Theme.iconSizeLarge     // 32px
+```
+
+## Spacing
+
+```qml
+Theme.spacingXS         // Extra small
+Theme.spacingS          // Small
+Theme.spacingM          // Medium
+Theme.spacingL          // Large
+Theme.spacingXL         // Extra large
+```
+
+## Border Radius
+
+```qml
+Theme.cornerRadius      // Standard
+Theme.cornerRadiusSmall // Smaller
+Theme.cornerRadiusLarge // Larger
+```
+
+## Surface Colors
+
+```qml
+Theme.surface
+Theme.surfaceContainerLow
+Theme.surfaceContainer
+Theme.surfaceContainerHigh
+Theme.surfaceContainerHighest
+```
+
+## Text Colors
+
+```qml
+Theme.onSurface          // Primary text on surface
+Theme.onSurfaceVariant   // Secondary text on surface
+Theme.surfaceText        // Alias for primary surface text
+Theme.surfaceVariantText // Alias for secondary surface text
+Theme.outline            // Border/divider color
+```
+
+## Semantic Colors
+
+```qml
+Theme.primary
+Theme.onPrimary
+Theme.secondary
+Theme.onSecondary
+Theme.error
+Theme.errorHover
+Theme.errorText
+Theme.warning
+Theme.success
+```
+
+## Special Functions
+
+```qml
+Theme.popupBackground()  // Popup background with proper opacity
+```
+
+## Common Widget Patterns
+
+### Icon with Text
+
+```qml
+import qs.Widgets
+
+Row {
+    spacing: Theme.spacingS
+
+    DankIcon {
+        name: "icon_name"
+        color: Theme.onSurface
+        font.pixelSize: Theme.iconSize
+    }
+
+    StyledText {
+        text: "Label"
+        color: Theme.onSurface
+        font.pixelSize: Theme.fontSizeMedium
+    }
+}
+```
+
+### Container with Border
+
+```qml
+Rectangle {
+    color: Theme.surfaceContainerHigh
+    radius: Theme.cornerRadius
+    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.width: 1
+}
+```
+
+### Hover Effect
+
+```qml
+Rectangle {
+    id: container
+    color: Theme.surfaceContainerHigh
+
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        onEntered: container.color = Qt.lighter(Theme.surfaceContainerHigh, 1.1)
+        onExited: container.color = Theme.surfaceContainerHigh
+    }
+}
+```
+
+### Clickable Pill
+
+```qml
+StyledRect {
+    width: content.implicitWidth + Theme.spacingM * 2
+    height: parent.widgetThickness
+    radius: Theme.cornerRadius
+    color: mouseArea.containsMouse
+        ? Qt.lighter(Theme.surfaceContainerHigh, 1.1)
+        : Theme.surfaceContainerHigh
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+    }
+
+    Row {
+        id: content
+        anchors.centerIn: parent
+        spacing: Theme.spacingS
+
+        DankIcon {
+            name: "star"
+            color: Theme.surfaceText
+            font.pixelSize: Theme.iconSize
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        StyledText {
+            text: "Label"
+            color: Theme.surfaceText
+            font.pixelSize: Theme.fontSizeMedium
+            anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+}
+```
+
+## Common Mistakes
+
+**Wrong property names** (these do NOT exist):
+```qml
+Theme.fontSizeS        // Use Theme.fontSizeSmall
+Theme.iconSizeS        // Use Theme.iconSizeSmall
+Theme.spacingSmall     // Use Theme.spacingS
+Theme.borderRadius     // Use Theme.cornerRadius
+```
+
+**Hardcoded values** (do NOT do this):
+```qml
+color: "#1e1e1e"       // Use Theme.surfaceContainerHigh
+color: "white"         // Use Theme.surfaceText
+font.pixelSize: 14     // Use Theme.fontSizeMedium
+```
+
+## Available Widgets from qs.Widgets
+
+| Widget | Description |
+|--------|-------------|
+| `StyledText` | Themed text with proper color defaults |
+| `StyledRect` | Themed rectangle |
+| `DankIcon` | Material Symbols icon renderer |
+| `DankNFIcon` | Nerd Font icon renderer |
+| `DankButton` | Themed button |
+| `DankToggle` | Toggle switch |
+| `DankTextField` | Text input field |
+| `DankSlider` | Slider control |
+| `DankDropdown` | Dropdown menu |
+| `DankGridView` | Grid layout view |
+| `DankListView` | List layout view |
+| `DankFlickable` | Scrollable container |
+| `DankTabBar` | Tab bar navigation |
+| `DankCollapsibleSection` | Collapsible content section |
+| `DankTooltip` | Hover tooltip |
+| `DankNumberStepper` | Number +/- control |
+| `DankFilterChips` | Filter chip row |
+| `CachingImage` | Image with disk cache |
+| `NumericText` | Fixed-width numeric display |
+
+## Checking All Properties
+
+```bash
+grep "property" Common/Theme.qml
+```

.agents/skills/dms-plugin-dev/references/widget-plugin-guide.md

@@ -0,0 +1,369 @@
+# Widget Plugin Guide
+
+Widgets are bar plugins that display pills in DankBar, optionally open popouts, and can integrate with the Control Center.
+
+## Base Component
+
+Widgets use `PluginComponent` from `qs.Modules.Plugins`.
+
+```qml
+import QtQuick
+import qs.Common
+import qs.Widgets
+import qs.Modules.Plugins
+
+PluginComponent {
+    property var popoutService: null
+
+    horizontalBarPill: Component { /* ... */ }
+    verticalBarPill: Component { /* ... */ }
+    popoutContent: Component { /* ... */ }
+    popoutWidth: 400
+    popoutHeight: 300
+}
+```
+
+## Injected Properties
+
+These are automatically set by the plugin host:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `axis` | object | Bar axis info (horizontal/vertical) |
+| `section` | string | Bar section: `"left"`, `"center"`, or `"right"` |
+| `parentScreen` | object | Screen reference for multi-monitor |
+| `widgetThickness` | real | Widget size perpendicular to bar edge |
+| `barThickness` | real | Bar thickness parallel to edge |
+| `pluginId` | string | This plugin's ID |
+| `pluginService` | object | PluginService reference |
+| `pluginData` | object | Reactive plugin settings data |
+
+## Bar Pills
+
+Define `horizontalBarPill` (for top/bottom bars) and `verticalBarPill` (for left/right bars).
+
+### Horizontal Bar Pill
+
+```qml
+horizontalBarPill: Component {
+    StyledRect {
+        width: content.implicitWidth + Theme.spacingM * 2
+        height: parent.widgetThickness
+        radius: Theme.cornerRadius
+        color: Theme.surfaceContainerHigh
+
+        Row {
+            id: content
+            anchors.centerIn: parent
+            spacing: Theme.spacingS
+
+            DankIcon {
+                name: "star"
+                color: Theme.surfaceText
+                font.pixelSize: Theme.iconSize
+                anchors.verticalCenter: parent.verticalCenter
+            }
+
+            StyledText {
+                text: "Label"
+                color: Theme.surfaceText
+                font.pixelSize: Theme.fontSizeMedium
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
+    }
+}
+```
+
+### Vertical Bar Pill
+
+```qml
+verticalBarPill: Component {
+    StyledRect {
+        width: parent.widgetThickness
+        height: content.implicitHeight + Theme.spacingM * 2
+        radius: Theme.cornerRadius
+        color: Theme.surfaceContainerHigh
+
+        Column {
+            id: content
+            anchors.centerIn: parent
+            spacing: Theme.spacingS
+
+            DankIcon {
+                name: "star"
+                color: Theme.surfaceText
+                font.pixelSize: Theme.iconSizeSmall
+            }
+        }
+    }
+}
+```
+
+**Important:** Always define both pills. If a pill is missing, the widget disappears when the bar is on that orientation's edge.
+
+## Popout Content
+
+Open a popout window when the bar pill is clicked:
+
+```qml
+PluginComponent {
+    popoutWidth: 400
+    popoutHeight: 300
+
+    popoutContent: Component {
+        PopoutComponent {
+            headerText: "My Plugin"
+            detailsText: "Optional subtitle"
+            showCloseButton: true
+
+            Column {
+                width: parent.width
+                spacing: Theme.spacingM
+
+                StyledText {
+                    text: "Content here"
+                    color: Theme.surfaceText
+                    font.pixelSize: Theme.fontSizeMedium
+                }
+            }
+        }
+    }
+}
+```
+
+**PopoutComponent properties:**
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `headerText` | string | `""` | Main header (bold, large). Hidden if empty. |
+| `detailsText` | string | `""` | Subtitle below header. Hidden if empty. |
+| `showCloseButton` | bool | `false` | Show X button in top-right corner. |
+| `closePopout` | function | (injected) | Call to close the popout programmatically. |
+| `headerHeight` | int | (readonly) | Height of header area (0 if hidden). |
+| `detailsHeight` | int | (readonly) | Height of details area (0 if hidden). |
+
+**Content sizing:** Content children render below the header/details. Calculate available height: `popoutHeight - headerHeight - detailsHeight - spacing`
+
+## Custom Click Actions
+
+Override the default popout behavior:
+
+```qml
+PluginComponent {
+    // Simple no-args handler
+    pillClickAction: () => {
+        popoutService?.toggleControlCenter()
+    }
+
+    // With position params (x, y, width, section, screen)
+    pillClickAction: (x, y, width, section, screen) => {
+        popoutService?.toggleControlCenter(x, y, width, section, screen)
+    }
+
+    pillRightClickAction: () => {
+        popoutService?.openSettings()
+    }
+}
+```
+
+## Control Center Integration
+
+Add CC properties to show your widget in the Control Center grid:
+
+```qml
+PluginComponent {
+    ccWidgetIcon: "toggle_on"
+    ccWidgetPrimaryText: "Feature Name"
+    ccWidgetSecondaryText: isActive ? "Active" : "Off"
+    ccWidgetIsActive: isActive
+
+    onCcWidgetToggled: {
+        isActive = !isActive
+        pluginService?.savePluginData(pluginId, "active", isActive)
+    }
+}
+```
+
+**CC properties:**
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `ccWidgetIcon` | string | Material icon name |
+| `ccWidgetPrimaryText` | string | Main label |
+| `ccWidgetSecondaryText` | string | Subtitle / status text |
+| `ccWidgetIsActive` | bool | Active state (changes styling) |
+
+**CC signals:**
+
+| Signal | When fired |
+|--------|-----------|
+| `ccWidgetToggled()` | Icon area clicked |
+| `ccWidgetExpanded()` | Expand area clicked (CompoundPill only) |
+
+**CC sizing rules:**
+- 25% width - SmallToggleButton (icon only)
+- 50% width - ToggleButton (no detail) or CompoundPill (with ccDetailContent)
+- Users can resize in CC edit mode
+
+### Detail Content (CompoundPill)
+
+Add an expandable panel below the CC widget:
+
+```qml
+ccDetailContent: Component {
+    Rectangle {
+        implicitHeight: 200
+        color: Theme.surfaceContainerHigh
+        radius: Theme.cornerRadius
+
+        Column {
+            anchors.fill: parent
+            anchors.margins: Theme.spacingM
+            spacing: Theme.spacingS
+
+            // Detail UI here
+        }
+    }
+}
+```
+
+## Visibility Control
+
+Conditionally show/hide the bar pill:
+
+```qml
+PluginComponent {
+    visibilityCommand: "pgrep -x myapp"
+    visibilityInterval: 5000  // check every 5 seconds
+}
+```
+
+## Popout Namespace
+
+For plugins with multiple popout instances, use `layerNamespacePlugin` to isolate popout state:
+
+```qml
+PluginComponent {
+    layerNamespacePlugin: true
+}
+```
+
+## Reading Plugin Data
+
+Access saved settings reactively via the injected `pluginData`:
+
+```qml
+PluginComponent {
+    property string displayText: pluginData?.text || "Default"
+
+    Connections {
+        target: pluginService
+        function onPluginDataChanged(changedId) {
+            if (changedId === pluginId)
+                displayText = pluginService.loadPluginData(pluginId, "text", "Default")
+        }
+    }
+}
+```
+
+## Complete Example
+
+Based on the ExampleEmojiPlugin pattern:
+
+```qml
+import QtQuick
+import Quickshell
+import qs.Common
+import qs.Widgets
+import qs.Services
+import qs.Modules.Plugins
+
+PluginComponent {
+    id: root
+    property var popoutService: null
+
+    property var emojis: ["star", "heart", "smile"]
+    property int currentIndex: 0
+
+    Timer {
+        interval: 2000
+        running: true
+        repeat: true
+        onTriggered: currentIndex = (currentIndex + 1) % emojis.length
+    }
+
+    popoutWidth: 350
+    popoutHeight: 400
+
+    horizontalBarPill: Component {
+        StyledRect {
+            width: label.implicitWidth + Theme.spacingM * 2
+            height: parent.widgetThickness
+            radius: Theme.cornerRadius
+            color: Theme.surfaceContainerHigh
+
+            StyledText {
+                id: label
+                anchors.centerIn: parent
+                text: root.emojis[root.currentIndex]
+                font.pixelSize: Theme.fontSizeLarge
+            }
+        }
+    }
+
+    verticalBarPill: Component {
+        StyledRect {
+            width: parent.widgetThickness
+            height: label.implicitHeight + Theme.spacingM * 2
+            radius: Theme.cornerRadius
+            color: Theme.surfaceContainerHigh
+
+            StyledText {
+                id: label
+                anchors.centerIn: parent
+                text: root.emojis[root.currentIndex]
+                font.pixelSize: Theme.fontSizeMedium
+            }
+        }
+    }
+
+    popoutContent: Component {
+        PopoutComponent {
+            headerText: "Emoji Picker"
+            showCloseButton: true
+
+            DankGridView {
+                width: parent.width
+                height: 300
+                cellWidth: 50
+                cellHeight: 50
+                model: root.emojis
+
+                delegate: Rectangle {
+                    width: 48
+                    height: 48
+                    radius: Theme.cornerRadius
+                    color: mouseArea.containsMouse ? Theme.surfaceContainerHighest : "transparent"
+
+                    Text {
+                        anchors.centerIn: parent
+                        text: modelData
+                        font.pixelSize: 24
+                    }
+
+                    MouseArea {
+                        id: mouseArea
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        onClicked: {
+                            Quickshell.execDetached(["dms", "cl", "copy", modelData])
+                            ToastService?.showInfo("Copied " + modelData)
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+```