Add tailscale plugin

shell/plugins/README.md

@@ -25,6 +25,7 @@ User-installed plugins live alongside these conceptually but on disk under
 | Monitor       | `omarchy.monitor`         | `bar-widget`            | `panels/monitor/Panel.qml`            |
 | Network       | `omarchy.network`         | `bar-widget`            | `panels/network/Panel.qml`            |
 | Power         | `omarchy.power`           | `bar-widget`            | `panels/power/Panel.qml`              |
+| Tailscale     | `omarchy.tailscale`       | `bar-widget`            | `tailscale/Widget.qml`                |
 | Weather       | `omarchy.weather`         | `bar-widget`            | `panels/weather/BarWidget.qml`        |
 | Media         | `omarchy.media`           | `service`, `bar-widget` | `services/media/Service.qml`, `services/media/BarWidget.qml` |
 | Battery       | `omarchy.battery`         | `service`               | `services/battery/Service.qml`        |

shell/plugins/bar/README.md

@@ -8,7 +8,7 @@ the shell for its whole session.
 - `manifest.json` declares the plugin (`id: omarchy.bar`, `kind: bar`) and points at `Bar.qml` as the entry point.
 - `Bar.qml` is Omarchy-owned bar engine code, loaded by the omarchy-shell host. Users should not edit it directly.
 - `widgets/` holds simple first-party bar widgets with sibling manifests.
-- Feature plugins such as `../panels/audio/`, `../panels/network/`, and `../panels/power/` provide richer popup bar widgets.
+- Feature plugins such as `../panels/audio/`, `../panels/network/`, `../panels/power/`, and `../tailscale/` provide richer popup bar plugins.
 - The bar receives its config from the host shell as a `barConfig` property; the host loads it from `~/.config/omarchy/shell.json` (or `config/omarchy/shell.json` when the user has no file).
 - `omarchy-style-bar-position` updates only the user shell.json file.
 
@@ -68,6 +68,7 @@ Example `shell.json` (bar subtree only shown):
 
 | `omarchy.audio` | Volume icon + popup with master slider, output-device picker, per-app mixer | left = popup · right = mute · middle = popup · scroll = volume |
 | `omarchy.network` | Wi-Fi/Ethernet icon + popup with Wi-Fi scan, signal, connect, DNS provider selection | left = popup · right = nmtui |
+| `omarchy.tailscale` | Tailscale status, account switcher, peer browser, and copy actions | left = popup · right = toggle · middle = refresh |
 | `omarchy.power` | Battery/AC icon + popup with battery stats, power profiles, and system info | left = popup |
 | `omarchy.bluetooth` | Bluetooth icon + popup with device list, connect/disconnect, battery | left = popup · right = toggle radio · middle = bluetoothctl TUI |
 | `omarchy.monitor` | Brightness and laptop display controls | left = popup |
@@ -167,8 +168,8 @@ Widgets receive `bar` (the shell root), `moduleName` (string), and `settings` (o
 
 First-party bar widgets are manifest-backed just like third-party widgets.
 Simple widgets carry sibling manifests such as `widgets/Clock.manifest.json`;
-richer popup widgets live in feature directories such as `../panels/audio/` and
-`../panels/network/`; and feature plugins such as `omarchy.menu`, `omarchy.media`, and
+richer popup plugins live in feature directories such as `../panels/audio/`,
+`../panels/network/`, and `../tailscale/`; and feature plugins such as `omarchy.menu`, `omarchy.media`, and
 `omarchy.notifications` declare their bar-widget entry points in their own
 `manifest.json`. Bar layout ids are namespaced, e.g. `omarchy.audio`,
 `omarchy.network`, and `omarchy.clock`. Older UpperCamelCase ids such as

shell/plugins/tailscale/Main.qml

@@ -0,0 +1,497 @@
+import QtQuick
+import Quickshell
+import Quickshell.Io
+import qs.Commons
+
+Item {
+  id: root
+  visible: false
+
+  property var settings: ({})
+
+  property bool installed: false
+  property bool running: false
+  property bool needsLogin: false
+  property bool refreshing: false
+  property string backendState: "Unknown"
+  property string statusText: "Checking…"
+  property string selfName: ""
+  property string selfDnsName: ""
+  property string selfIp: ""
+  property string authUrl: ""
+  property var peers: []
+  property var accounts: []
+  property string selectedAccountId: ""
+  property string selectedAccountLabel: ""
+  property string actionStatus: ""
+  property string lastError: ""
+
+  readonly property int refreshIntervalSec: intSetting("refreshIntervalSec", 30, 5, 3600)
+  readonly property bool busy: whichProcess.running || statusProcess.running || accountsProcess.running || actionProcess.running || loginProcess.running || switchProcess.running
+
+  property string _statusOutput: ""
+  property string _statusError: ""
+  property string _accountsOutput: ""
+  property string _actionOutput: ""
+  property string _actionError: ""
+  property string _loginOutput: ""
+  property string _loginError: ""
+  property bool _loginInProgress: false
+  property bool _loginUrlOpened: false
+  property string _preLoginAuthUrl: ""
+  property double _lastAccountsRefreshMs: 0
+  property string _switchOutput: ""
+  property string _switchError: ""
+
+  function setting(name, fallback) {
+    var value = settings ? settings[name] : undefined
+    return value === undefined || value === null ? fallback : value
+  }
+
+  function intSetting(name, fallback, min, max) {
+    var n = parseInt(String(setting(name, fallback)), 10)
+    if (!isFinite(n)) n = fallback
+    if (n < min) n = min
+    if (n > max) n = max
+    return n
+  }
+
+  function filterIPv4(ips) {
+    var result = []
+    if (!ips || typeof ips.length !== "number") return result
+    for (var i = 0; i < ips.length; i++) {
+      var ip = String(ips[i] || "")
+      if (/^100\./.test(ip)) result.push(ip)
+    }
+    return result
+  }
+
+  function cleanDnsName(name) {
+    var value = String(name || "")
+    return value.charAt(value.length - 1) === "." ? value.slice(0, -1) : value
+  }
+
+  function shortDnsName(name) {
+    var clean = cleanDnsName(name)
+    if (clean === "") return ""
+    return clean.split(".")[0] || clean
+  }
+
+  function displayHostName(hostName, dnsName) {
+    var host = String(hostName || "")
+    if (host !== "" && host.toLowerCase() !== "localhost") return host
+    return shortDnsName(dnsName) || host || "Unknown"
+  }
+
+  function osIcon(os) {
+    var value = String(os || "").toLowerCase()
+    if (value === "linux") return "󰌽"
+    if (value === "macos" || value === "ios") return "󰀵"
+    if (value === "windows") return "󰍲"
+    if (value === "android") return "󰀲"
+    return "󰟀"
+  }
+
+  function accountLabel(account) {
+    if (!account) return "Unknown account"
+    var parts = []
+    if (account.nickname) parts.push(String(account.nickname))
+    if (account.tailnet && String(account.tailnet) !== String(account.nickname || "")) parts.push(String(account.tailnet))
+    if (account.account) parts.push(String(account.account))
+    return parts.length > 0 ? parts.join(" · ") : String(account.id || "Unknown account")
+  }
+
+  function copyToClipboard(value, label) {
+    var text = String(value || "")
+    if (text === "") return
+    Quickshell.execDetached(["bash", "-c", "printf %s " + Util.shellQuote(text) + " | wl-copy"])
+    actionStatus = elideStatus("Copied " + (label || text))
+    actionStatusTimer.restart()
+  }
+
+  function copyPeerIp(peer) {
+    if (!peer) return
+    var ips = filterIPv4(peer.TailscaleIPs || [])
+    copyToClipboard(ips.length > 0 ? ips[0] : "", displayHostName(peer.HostName, peer.DNSName) + " IP")
+  }
+
+  function copyPeerName(peer) {
+    if (!peer) return
+    copyToClipboard(displayHostName(peer.HostName, peer.DNSName), displayHostName(peer.HostName, peer.DNSName) + " name")
+  }
+
+  function copyPeerDnsName(peer) {
+    if (!peer) return
+    copyToClipboard(cleanDnsName(peer.DNSName), displayHostName(peer.HostName, peer.DNSName) + " DNS name")
+  }
+
+  function refresh(forceAccounts) {
+    if (installed) {
+      refreshStatusAndAccounts(forceAccounts === true)
+      return
+    }
+    if (!whichProcess.running) {
+      refreshing = true
+      whichProcess.command = ["which", "tailscale"]
+      whichProcess.running = true
+    }
+  }
+
+  function refreshStatusAndAccounts(forceAccounts) {
+    if (!installed) return
+    if (!statusProcess.running) {
+      _statusOutput = ""
+      _statusError = ""
+      refreshing = true
+      statusProcess.command = ["tailscale", "status", "--json"]
+      statusProcess.running = true
+    }
+    var now = Date.now()
+    var shouldRefreshAccounts = forceAccounts === true || accounts.length === 0 || now - _lastAccountsRefreshMs > 60000
+    if (shouldRefreshAccounts && !accountsProcess.running) {
+      _accountsOutput = ""
+      _lastAccountsRefreshMs = now
+      accountsProcess.command = ["tailscale", "switch", "--list", "--json"]
+      accountsProcess.running = true
+    }
+  }
+
+  function elideStatus(text) {
+    var value = String(text || "").replace(/\s+/g, " ").trim()
+    return value.length > 140 ? value.substring(0, 137) + "…" : value
+  }
+
+  function resetUnavailable(message) {
+    running = false
+    needsLogin = false
+    backendState = "Unavailable"
+    statusText = message
+    selfName = ""
+    selfDnsName = ""
+    selfIp = ""
+    authUrl = ""
+    peers = []
+    accounts = []
+    selectedAccountId = ""
+    selectedAccountLabel = ""
+  }
+
+  function parseStatus(raw) {
+    var text = String(raw || "").trim()
+    if (text === "") {
+      resetUnavailable("Disconnected")
+      return
+    }
+
+    try {
+      var data = JSON.parse(text)
+      backendState = String(data.BackendState || "Unknown")
+      running = backendState === "Running"
+      needsLogin = backendState === "NeedsLogin"
+      authUrl = String(data.AuthURL || "")
+      if (needsLogin && _loginInProgress && !_loginUrlOpened && authUrl !== "" && authUrl !== _preLoginAuthUrl) {
+        openAuthUrlFrom(authUrl, false)
+      }
+
+      var self = data.Self || {}
+      selfName = displayHostName(self.HostName, self.DNSName)
+      selfDnsName = cleanDnsName(self.DNSName)
+      var selfIps = filterIPv4(self.TailscaleIPs || data.TailscaleIPs || [])
+      selfIp = selfIps.length > 0 ? selfIps[0] : ""
+
+      var nextPeers = []
+      var rawPeers = data.Peer || {}
+      for (var id in rawPeers) {
+        var peer = rawPeers[id] || {}
+        var ipv4s = filterIPv4(peer.TailscaleIPs || [])
+        nextPeers.push({
+          id: id,
+          HostName: displayHostName(peer.HostName, peer.DNSName),
+          DNSName: cleanDnsName(peer.DNSName),
+          TailscaleIPs: ipv4s,
+          Online: peer.Online === true,
+          OS: String(peer.OS || ""),
+          Tags: peer.Tags || [],
+          ExitNodeOption: peer.ExitNodeOption === true,
+          ExitNode: peer.ExitNode === true
+        })
+      }
+      nextPeers.sort(function(a, b) {
+        if (a.Online !== b.Online) return a.Online ? -1 : 1
+        return String(a.HostName).localeCompare(String(b.HostName))
+      })
+      peers = nextPeers
+
+      if (needsLogin) statusText = "Needs login"
+      else if (running) {
+        statusText = "Connected"
+        _loginInProgress = false
+        _loginUrlOpened = false
+        _preLoginAuthUrl = ""
+        loginTimeoutTimer.stop()
+      } else if (backendState === "Stopped") statusText = "Disconnected"
+      else statusText = backendState
+      lastError = ""
+    } catch (e) {
+      resetUnavailable("Status error")
+      lastError = "Failed to parse tailscale status"
+      console.warn("tailscale", lastError, e)
+    }
+  }
+
+  function parseAccounts(raw) {
+    var text = String(raw || "").trim()
+    if (text === "") {
+      accounts = []
+      selectedAccountId = ""
+      selectedAccountLabel = ""
+      return
+    }
+
+    try {
+      var parsed = JSON.parse(text)
+      var next = []
+      var selected = null
+      if (parsed && typeof parsed.length === "number") {
+        for (var i = 0; i < parsed.length; i++) {
+          var raw = parsed[i] || {}
+          var account = {
+            id: String(raw.id || raw.ID || ""),
+            nickname: String(raw.nickname || raw.Nickname || raw.name || raw.Name || ""),
+            tailnet: String(raw.tailnet || raw.Tailnet || ""),
+            account: String(raw.account || raw.Account || raw.loginName || raw.LoginName || raw.user || raw.User || ""),
+            selected: raw.selected === true || raw.Selected === true
+          }
+          next.push(account)
+          if (account.selected === true) selected = account
+        }
+      }
+      accounts = next
+      selectedAccountId = selected ? String(selected.id || "") : ""
+      selectedAccountLabel = selected ? accountLabel(selected) : ""
+    } catch (e) {
+      accounts = []
+      selectedAccountId = ""
+      selectedAccountLabel = ""
+      console.warn("tailscale", "Failed to parse account list", e)
+    }
+  }
+
+  function toggleTailscale() {
+    if (!installed) return
+    if (running) {
+      runAction(["tailscale", "down"], "Turning Tailscale off…")
+    } else {
+      loginOrUp()
+    }
+  }
+
+  function loginOrUp() {
+    if (!installed || loginProcess.running) return
+    _loginOutput = ""
+    _loginError = ""
+    actionStatus = needsLogin ? "Starting Tailscale login…" : "Turning Tailscale on…"
+    _loginInProgress = needsLogin
+    _loginUrlOpened = false
+    _preLoginAuthUrl = authUrl
+    var command = ["tailscale", "up"]
+    if (needsLogin) command.push("--force-reauth")
+    loginProcess.command = command
+    loginProcess.running = true
+    if (needsLogin) loginTimeoutTimer.restart()
+  }
+
+  function switchAccount(id) {
+    var accountId = String(id || "")
+    if (!installed || accountId === "" || accountId === selectedAccountId || switchProcess.running) return
+    _switchOutput = ""
+    _switchError = ""
+    actionStatus = "Switching Tailscale account…"
+    switchProcess.command = ["tailscale", "switch", accountId]
+    switchProcess.running = true
+  }
+
+  function runAction(command, label) {
+    if (actionProcess.running) return
+    _actionOutput = ""
+    _actionError = ""
+    actionStatus = label || "Working…"
+    actionProcess.command = command
+    actionProcess.running = true
+  }
+
+  function openAuthUrlFrom(text, allowFallback) {
+    if (_loginUrlOpened) return true
+    var match = String(text || "").match(/https?:\/\/\S+/)
+    var url = match && match[0] ? match[0] : (allowFallback === true ? authUrl : "")
+    if (url !== "") {
+      _loginUrlOpened = true
+      _loginInProgress = false
+      loginTimeoutTimer.stop()
+      Qt.openUrlExternally(url)
+      actionStatus = "Opened login link"
+      actionStatusTimer.restart()
+      return true
+    }
+    return false
+  }
+
+  function handleLoginOutput(data, isError) {
+    var text = String(data || "")
+    if (isError) _loginError += text + "\n"
+    else _loginOutput += text + "\n"
+    if (_loginInProgress && !_loginUrlOpened) openAuthUrlFrom(text, false)
+  }
+
+  Timer {
+    id: refreshTimer
+    interval: root.refreshIntervalSec * 1000
+    repeat: true
+    running: true
+    triggeredOnStart: true
+    onTriggered: root.refresh()
+  }
+
+  Timer {
+    id: delayedRefresh
+    interval: 600
+    repeat: false
+    onTriggered: root.refresh()
+  }
+
+  Timer {
+    id: actionStatusTimer
+    interval: 2200
+    repeat: false
+    onTriggered: root.actionStatus = ""
+  }
+
+  Timer {
+    id: loginTimeoutTimer
+    interval: 10000
+    repeat: false
+    onTriggered: {
+      if (!root._loginInProgress || root._loginUrlOpened) return
+      if (!root.openAuthUrlFrom(root.authUrl, true)) {
+        root._loginInProgress = false
+        root.actionStatus = "Tailscale login link not available yet"
+      }
+    }
+  }
+
+  Process {
+    id: whichProcess
+    running: false
+    command: []
+    onExited: function(exitCode) {
+      root.installed = exitCode === 0
+      if (root.installed) root.refreshStatusAndAccounts()
+      else {
+        root.refreshing = false
+        root.resetUnavailable("Not installed")
+      }
+    }
+  }
+
+  Process {
+    id: statusProcess
+    running: false
+    command: []
+    stdout: StdioCollector { id: statusStdout; waitForEnd: true; onStreamFinished: root._statusOutput = text }
+    stderr: StdioCollector { id: statusStderr; waitForEnd: true; onStreamFinished: root._statusError = text }
+    onExited: function(exitCode) {
+      root.refreshing = false
+      var stdout = String(statusStdout.text || root._statusOutput || "")
+      var stderr = String(statusStderr.text || root._statusError || "")
+      if (exitCode === 0) root.parseStatus(stdout)
+      else {
+        root.resetUnavailable("Disconnected")
+        root.lastError = stderr.trim()
+      }
+    }
+  }
+
+  Process {
+    id: accountsProcess
+    running: false
+    command: []
+    stdout: StdioCollector { id: accountsStdout; waitForEnd: true; onStreamFinished: root._accountsOutput = text }
+    onExited: function(exitCode) {
+      var stdout = String(accountsStdout.text || root._accountsOutput || "")
+      if (exitCode === 0) root.parseAccounts(stdout)
+      else root.parseAccounts("")
+    }
+  }
+
+  Process {
+    id: actionProcess
+    running: false
+    command: []
+    stdout: StdioCollector { id: actionStdout; waitForEnd: true; onStreamFinished: root._actionOutput = text }
+    stderr: StdioCollector { id: actionStderr; waitForEnd: true; onStreamFinished: root._actionError = text }
+    onExited: function(exitCode) {
+      var stdout = String(actionStdout.text || root._actionOutput || "")
+      var stderr = String(actionStderr.text || root._actionError || "")
+      if (exitCode !== 0) {
+        root.lastError = elideStatus(stderr || stdout || "Tailscale command failed")
+        root.actionStatus = root.lastError
+      } else {
+        root.lastError = ""
+        root.actionStatus = ""
+      }
+      delayedRefresh.restart()
+    }
+  }
+
+  Process {
+    id: loginProcess
+    running: false
+    command: []
+    stdout: SplitParser { onRead: function(data) { root.handleLoginOutput(data, false) } }
+    stderr: SplitParser { onRead: function(data) { root.handleLoginOutput(data, true) } }
+    onExited: function(exitCode) {
+      var combined = String(root._loginOutput || "") + "\n" + String(root._loginError || "")
+      var opened = root.openAuthUrlFrom(combined, true)
+      if (exitCode !== 0 && !opened) {
+        root._loginInProgress = false
+        root.lastError = elideStatus(combined || "tailscale up failed")
+        root.actionStatus = root.lastError
+      } else if (!opened) {
+        root.lastError = ""
+        root.actionStatus = ""
+      }
+      delayedRefresh.restart()
+    }
+  }
+
+  Process {
+    id: switchProcess
+    running: false
+    command: []
+    stdout: StdioCollector { id: switchStdout; waitForEnd: true; onStreamFinished: root._switchOutput = text }
+    stderr: StdioCollector { id: switchStderr; waitForEnd: true; onStreamFinished: root._switchError = text }
+    onExited: function(exitCode) {
+      var stdout = String(switchStdout.text || root._switchOutput || "")
+      var stderr = String(switchStderr.text || root._switchError || "")
+      if (exitCode !== 0) {
+        root.lastError = elideStatus(stderr || stdout || "Account switch failed")
+        root.actionStatus = root.lastError
+      } else {
+        root.lastError = ""
+        root.actionStatus = "Switched account"
+        actionStatusTimer.restart()
+        root._lastAccountsRefreshMs = 0
+      }
+      delayedRefresh.restart()
+    }
+  }
+
+  IpcHandler {
+    target: "omarchy.tailscale"
+    function refresh(): string { root.refresh(); return "ok" }
+    function toggle(): string { root.toggleTailscale(); return "ok" }
+    function up(): string { root.loginOrUp(); return "ok" }
+    function down(): string { root.runAction(["tailscale", "down"], "Turning Tailscale off…"); return "ok" }
+    function status(): string { return root.statusText }
+  }
+}

shell/plugins/tailscale/README.md

@@ -0,0 +1,38 @@
+# Tailscale Omarchy Widget
+
+Native Omarchy bar widget for Tailscale.
+
+## Features
+
+- Shows Tailscale connection state in the bar
+- Left click opens a keyboard-friendly panel
+- Right click toggles Tailscale on/off
+- Switch between logged-in Tailscale accounts when multiple are available
+- Browse peers from `tailscale status --json`
+- Copy a peer's Tailscale IP, host name, or DNS name
+
+## Keyboard shortcuts
+
+Inside the panel:
+
+- `j` / `k` or arrows: move cursor
+- `enter` / `space`: activate current row
+- `c`: copy selected peer IP
+- `n`: copy selected peer name
+- `d`: copy selected peer DNS name
+- `t`: toggle Tailscale
+- `r`: refresh status
+- `esc`: close
+
+## Requirements
+
+- `tailscale` CLI on `PATH`
+- `wl-copy` for clipboard copy actions
+
+## Icon
+
+Renders the Tailscale mark natively as a theme-colored 3×3 dot grid, matching the official SVG silhouette while avoiding tiny-SVG rendering quirks in the bar.
+
+## Add to the bar
+
+This widget ships as first-party plugin `omarchy.tailscale`. Add it through Omarchy's bar settings UI, or add an entry such as `{ "id": "omarchy.tailscale" }` to one of the `bar.layout` sections in `~/.config/omarchy/shell.json` and restart the shell.

shell/plugins/tailscale/TailscaleIcon.qml

@@ -0,0 +1,72 @@
+import QtQuick
+import qs.Commons
+
+Item {
+  id: root
+
+  property real iconSize: Style.font.icon
+  property color color: Color.foreground
+  property color badgeColor: Color.urgent
+  property bool crossed: false
+  property bool warning: false
+
+  width: iconSize
+  height: iconSize
+  implicitWidth: iconSize
+  implicitHeight: iconSize
+
+  readonly property real dotSize: Math.max(2, root.iconSize * 0.24)
+  readonly property real mid: (root.iconSize - dotSize) / 2
+  readonly property real end: root.iconSize - dotSize
+
+  // Native rendering of the Tailscale mark from the SVG: a 3×3 dot grid
+  // with the inactive dots faded. This avoids Qt SVG/effect rendering quirks
+  // in tiny bar slots while keeping the official silhouette.
+  Dot { x: 0; y: 0; opacity: 0.24 }
+  Dot { x: root.mid; y: 0; opacity: 0.24 }
+  Dot { x: root.end; y: 0; opacity: 0.24 }
+  Dot { x: 0; y: root.mid; opacity: 1.0 }
+  Dot { x: root.mid; y: root.mid; opacity: 1.0 }
+  Dot { x: root.end; y: root.mid; opacity: 1.0 }
+  Dot { x: 0; y: root.end; opacity: 0.24 }
+  Dot { x: root.mid; y: root.end; opacity: 1.0 }
+  Dot { x: root.end; y: root.end; opacity: 0.24 }
+
+  Rectangle {
+    visible: root.crossed
+    anchors.centerIn: parent
+    width: parent.width * 1.22
+    height: Math.max(2, parent.height * 0.14)
+    radius: height / 2
+    color: root.badgeColor
+    rotation: -45
+  }
+
+  Rectangle {
+    visible: root.warning
+    width: Math.max(7, parent.width * 0.42)
+    height: width
+    radius: width / 2
+    color: root.badgeColor
+    anchors.right: parent.right
+    anchors.bottom: parent.bottom
+    border.color: Color.popups.background
+    border.width: 1
+
+    Text {
+      anchors.centerIn: parent
+      text: "!"
+      color: Color.background
+      font.family: Style.font.family
+      font.pixelSize: Math.max(6, parent.height * 0.72)
+      font.bold: true
+    }
+  }
+
+  component Dot: Rectangle {
+    width: root.dotSize
+    height: root.dotSize
+    radius: width / 2
+    color: root.color
+  }
+}

shell/plugins/tailscale/Widget.qml

@@ -0,0 +1,637 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import qs.Commons
+import qs.Ui
+
+BarWidget {
+  id: root
+  moduleName: "omarchy.tailscale"
+
+  property bool popupOpen: false
+  property string focusSection: "header"
+  property int headerIndex: 0
+  property int accountIndex: 0
+  property int peerIndex: 0
+
+  readonly property color foreground: bar ? bar.foreground : Color.foreground
+  readonly property color urgent: bar ? bar.urgent : Color.urgent
+  readonly property color dim: Qt.darker(foreground, 1.55)
+  readonly property color card: Qt.rgba(foreground.r, foreground.g, foreground.b, 0.055)
+  readonly property string fontFamily: bar ? bar.fontFamily : Style.font.family
+  readonly property bool showAccounts: tailscale.accounts.length > 1
+  readonly property bool showPeers: tailscale.peers.length > 0
+  readonly property color iconColor: tailscale.running ? foreground : (tailscale.needsLogin ? urgent : dim)
+
+  function close() { popupOpen = false }
+
+  function openPanel() {
+    popupOpen = true
+    tailscale.refresh()
+  }
+
+  function togglePanel() {
+    if (popupOpen) close()
+    else openPanel()
+  }
+
+  function tooltipText() {
+    var lines = ["Tailscale: " + tailscale.statusText]
+    if (tailscale.selfIp !== "") lines.push(tailscale.selfName + " · " + tailscale.selfIp)
+    if (tailscale.selectedAccountLabel !== "") lines.push(tailscale.selectedAccountLabel)
+    if (tailscale.running) lines.push(tailscale.peers.length + " peer" + (tailscale.peers.length === 1 ? "" : "s"))
+    return lines.join("\n")
+  }
+
+  function selectedPeer() {
+    if (tailscale.peers.length === 0) return null
+    return tailscale.peers[Math.max(0, Math.min(peerIndex, tailscale.peers.length - 1))]
+  }
+
+  function selectedAccount() {
+    if (tailscale.accounts.length === 0) return null
+    return tailscale.accounts[Math.max(0, Math.min(accountIndex, tailscale.accounts.length - 1))]
+  }
+
+  function ensureCursor() {
+    if (headerIndex < 0) headerIndex = 0
+    if (headerIndex > 1) headerIndex = 1
+    if (accountIndex >= tailscale.accounts.length) accountIndex = Math.max(0, tailscale.accounts.length - 1)
+    if (peerIndex >= tailscale.peers.length) peerIndex = Math.max(0, tailscale.peers.length - 1)
+    if (focusSection === "accounts" && !showAccounts) focusSection = showPeers ? "peers" : "header"
+    if (focusSection === "peers" && !showPeers) focusSection = showAccounts ? "accounts" : "header"
+  }
+
+  function moveCursor(dx, dy) {
+    ensureCursor()
+    if (dy !== 0) {
+      if (focusSection === "header") {
+        if (dy > 0) {
+          if (showAccounts) focusSection = "accounts"
+          else if (showPeers) focusSection = "peers"
+        }
+      } else if (focusSection === "accounts") {
+        if (dy < 0) {
+          if (accountIndex <= 0) focusSection = "header"
+          else accountIndex--
+        } else {
+          if (accountIndex < tailscale.accounts.length - 1) accountIndex++
+          else if (showPeers) focusSection = "peers"
+        }
+      } else if (focusSection === "peers") {
+        if (dy < 0) {
+          if (peerIndex <= 0) focusSection = showAccounts ? "accounts" : "header"
+          else peerIndex--
+        } else if (peerIndex < tailscale.peers.length - 1) {
+          peerIndex++
+        }
+      }
+    }
+    if (dx !== 0 && focusSection === "header") headerIndex = (headerIndex + dx + 2) % 2
+    ensureCursor()
+    scrollPeerIntoView()
+  }
+
+  function activateCursor() {
+    ensureCursor()
+    if (focusSection === "header") {
+      if (headerIndex === 0) tailscale.toggleTailscale()
+      else tailscale.refresh()
+    } else if (focusSection === "accounts") {
+      var account = selectedAccount()
+      if (account) tailscale.switchAccount(account.id)
+    } else if (focusSection === "peers") {
+      tailscale.copyPeerIp(selectedPeer())
+    }
+  }
+
+  function scrollPeerIntoView() {
+    if (focusSection !== "peers" || !peerFlick || !peerColumn) return
+    Qt.callLater(function() {
+      if (root.focusSection !== "peers" || root.peerIndex < 0 || root.peerIndex >= peerColumn.children.length) return
+      var item = peerColumn.children[root.peerIndex]
+      if (!item) return
+      var margin = Style.space(6)
+      var top = item.y
+      var bottom = top + item.height
+      var viewTop = peerFlick.contentY
+      var viewBottom = viewTop + peerFlick.height
+      var maxY = Math.max(0, peerFlick.contentHeight - peerFlick.height)
+      if (top < viewTop + margin) peerFlick.contentY = Math.max(0, top - margin)
+      else if (bottom > viewBottom - margin) peerFlick.contentY = Math.min(maxY, bottom + margin - peerFlick.height)
+    })
+  }
+
+  function setPeerCursor(index) {
+    focusSection = "peers"
+    peerIndex = index
+    scrollPeerIntoView()
+  }
+
+  function setAccountCursor(index) {
+    focusSection = "accounts"
+    accountIndex = index
+  }
+
+  implicitWidth: button.implicitWidth
+  implicitHeight: button.implicitHeight
+
+  onPopupOpenChanged: if (popupOpen) Qt.callLater(function() { keyCatcher.forceActiveFocus() })
+  onPeerIndexChanged: scrollPeerIntoView()
+  onShowAccountsChanged: ensureCursor()
+  onShowPeersChanged: ensureCursor()
+
+  Main {
+    id: tailscale
+    settings: root.settings
+    onPeersChanged: root.ensureCursor()
+    onAccountsChanged: root.ensureCursor()
+  }
+
+  Item {
+    id: button
+    anchors.fill: parent
+    implicitWidth: root.bar && root.bar.vertical ? root.bar.barSize : Style.space(26)
+    implicitHeight: root.bar && root.bar.vertical ? Style.space(26) : (root.bar ? root.bar.barSize : Style.space(26))
+
+    property var registeredBar: null
+    readonly property bool tooltipHovered: mouseArea.containsMouse
+
+    function triggerPress(buttonCode) {
+      if (root.bar) root.bar.hideTooltip(button)
+      if (buttonCode === Qt.RightButton) tailscale.toggleTailscale()
+      else if (buttonCode === Qt.MiddleButton) tailscale.refresh()
+      else root.togglePanel()
+    }
+
+    function syncClickRegistration() {
+      if (registeredBar && registeredBar.unregisterClickTarget) registeredBar.unregisterClickTarget(button)
+      registeredBar = root.bar
+      if (registeredBar && registeredBar.registerClickTarget) registeredBar.registerClickTarget(button)
+    }
+
+    Component.onCompleted: syncClickRegistration()
+    Component.onDestruction: if (registeredBar && registeredBar.unregisterClickTarget) registeredBar.unregisterClickTarget(button)
+
+    Connections {
+      target: root
+      function onBarChanged() { button.syncClickRegistration() }
+    }
+
+    TailscaleIcon {
+      anchors.centerIn: parent
+      iconSize: Style.space(12)
+      color: root.iconColor
+      badgeColor: root.urgent
+      crossed: !tailscale.running && !tailscale.needsLogin
+      warning: tailscale.needsLogin
+    }
+
+    MouseArea {
+      id: mouseArea
+      anchors.fill: parent
+      acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+      hoverEnabled: true
+      cursorShape: Qt.PointingHandCursor
+      onEntered: if (root.bar) root.bar.showTooltip(button, root.tooltipText())
+      onExited: if (root.bar) root.bar.hideTooltip(button)
+      onClicked: function(mouse) { button.triggerPress(mouse.button) }
+    }
+  }
+
+  KeyboardPanel {
+    id: panel
+    anchorItem: button
+    owner: root
+    bar: root.bar
+    open: root.popupOpen
+    focusTarget: keyCatcher
+    contentWidth: panel.fittedContentWidth(Style.space(400))
+    contentHeight: panel.fittedContentHeight(column.implicitHeight, Style.space(580))
+
+    PanelKeyCatcher {
+      id: keyCatcher
+      anchors.fill: parent
+      onMoveRequested: function(dx, dy) { root.moveCursor(dx, dy) }
+      onActivateRequested: root.activateCursor()
+      onCloseRequested: root.close()
+      onTextKey: function(t) {
+        if (t === "r" || t === "R") tailscale.refresh()
+        else if (t === "t" || t === "T") tailscale.toggleTailscale()
+        else if (t === "c" || t === "C") tailscale.copyPeerIp(root.selectedPeer())
+        else if (t === "n" || t === "N") tailscale.copyPeerName(root.selectedPeer())
+        else if (t === "d" || t === "D") tailscale.copyPeerDnsName(root.selectedPeer())
+      }
+
+      Flickable {
+        id: panelFlick
+        anchors.fill: parent
+        contentWidth: width
+        contentHeight: column.implicitHeight
+        clip: true
+        boundsBehavior: Flickable.StopAtBounds
+        flickableDirection: Flickable.VerticalFlick
+        ScrollBar.vertical: ScrollBar { policy: ScrollBar.AsNeeded }
+
+        Column {
+          id: column
+          width: panelFlick.width
+          spacing: Style.space(12)
+
+          Item {
+            id: header
+            width: parent.width
+            implicitHeight: Math.max(heroIcon.implicitHeight, heroText.implicitHeight, headerActions.implicitHeight)
+
+            TailscaleIcon {
+              id: heroIcon
+              iconSize: Style.font.display
+              color: root.iconColor
+              badgeColor: root.urgent
+              crossed: !tailscale.running && !tailscale.needsLogin
+              warning: tailscale.needsLogin
+              anchors.left: parent.left
+              anchors.verticalCenter: parent.verticalCenter
+            }
+
+            Column {
+              id: heroText
+              anchors.left: heroIcon.right
+              anchors.leftMargin: Style.space(12)
+              anchors.right: headerActions.left
+              anchors.rightMargin: Style.space(10)
+              anchors.verticalCenter: parent.verticalCenter
+              spacing: Style.space(2)
+
+              Text {
+                width: parent.width
+                text: tailscale.installed ? (tailscale.selfName || "Tailscale") : "Tailscale"
+                color: root.foreground
+                font.family: root.fontFamily
+                font.pixelSize: Style.font.title
+                font.bold: true
+                elide: Text.ElideRight
+              }
+
+              Text {
+                width: parent.width
+                text: {
+                  var parts = [tailscale.statusText]
+                  if (tailscale.selfIp !== "") parts.push(tailscale.selfIp)
+                  if (tailscale.running) parts.push(tailscale.peers.length + " peer" + (tailscale.peers.length === 1 ? "" : "s"))
+                  return parts.join(" · ").toUpperCase()
+                }
+                color: root.dim
+                font.family: root.fontFamily
+                font.pixelSize: Style.font.caption
+                font.bold: true
+                font.letterSpacing: 1.2
+                elide: Text.ElideRight
+              }
+            }
+
+            Row {
+              id: headerActions
+              anchors.right: parent.right
+              anchors.verticalCenter: parent.verticalCenter
+              spacing: Style.space(5)
+
+              PanelActionButton {
+                id: toggleBtn
+                anchors.verticalCenter: parent.verticalCenter
+                iconText: "⏻"
+                fontSize: Style.font.heading
+                size: Style.space(30)
+                tooltipText: tailscale.running ? "Disconnect Tailscale" : (tailscale.needsLogin ? "Log in to Tailscale" : "Connect Tailscale")
+                foreground: root.foreground
+                hoverColor: tailscale.running ? root.urgent : root.foreground
+                fontFamily: root.fontFamily
+                hasCursor: root.focusSection === "header" && root.headerIndex === 0
+                enabled: tailscale.installed && !tailscale.busy
+                onHovered: function(h) {
+                  if (!h) return
+                  root.focusSection = "header"
+                  root.headerIndex = 0
+                }
+                onClicked: tailscale.toggleTailscale()
+              }
+
+              PanelActionButton {
+                id: refreshBtn
+                anchors.verticalCenter: parent.verticalCenter
+                iconText: "󰑐"
+                fontSize: Style.font.heading
+                size: Style.space(30)
+                tooltipText: "Refresh"
+                foreground: root.foreground
+                fontFamily: root.fontFamily
+                hasCursor: root.focusSection === "header" && root.headerIndex === 1
+                enabled: !tailscale.busy
+                onHovered: function(h) {
+                  if (!h) return
+                  root.focusSection = "header"
+                  root.headerIndex = 1
+                }
+                onClicked: tailscale.refresh()
+              }
+            }
+          }
+
+          Text {
+            visible: tailscale.actionStatus !== "" || tailscale.lastError !== ""
+            width: parent.width
+            text: tailscale.actionStatus !== "" ? tailscale.actionStatus : tailscale.lastError
+            color: tailscale.lastError !== "" && tailscale.actionStatus === "" ? root.urgent : root.dim
+            font.family: root.fontFamily
+            font.pixelSize: Style.font.bodySmall
+            wrapMode: Text.WordWrap
+          }
+
+          Rectangle {
+            visible: !tailscale.installed
+            width: parent.width
+            implicitHeight: missingText.implicitHeight + Style.space(24)
+            color: root.card
+            border.color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.06)
+            border.width: Style.normalBorderWidth
+            radius: Style.cornerRadius
+
+            Text {
+              id: missingText
+              anchors.left: parent.left
+              anchors.right: parent.right
+              anchors.verticalCenter: parent.verticalCenter
+              anchors.margins: Style.space(12)
+              text: "Tailscale CLI is not installed or not on PATH."
+              color: root.dim
+              font.family: root.fontFamily
+              font.pixelSize: Style.font.bodySmall
+              wrapMode: Text.WordWrap
+            }
+          }
+
+          PanelSeparator {
+            visible: root.showAccounts
+            foreground: root.foreground
+          }
+
+          Column {
+            visible: root.showAccounts
+            width: parent.width
+            spacing: Style.space(10)
+
+            PanelSectionHeader {
+              text: "ACCOUNTS"
+              foreground: root.foreground
+              fontFamily: root.fontFamily
+            }
+
+            Repeater {
+              model: tailscale.accounts
+              AccountRow {
+                required property var modelData
+                required property int index
+                width: parent.width
+                account: modelData
+                rowIndex: index
+              }
+            }
+          }
+
+          PanelSeparator {
+            visible: tailscale.installed
+            foreground: root.foreground
+          }
+
+          Column {
+            visible: tailscale.installed
+            width: parent.width
+            spacing: Style.space(10)
+
+            PanelSectionHeader {
+              text: "PEERS"
+              foreground: root.foreground
+              fontFamily: root.fontFamily
+            }
+
+            Text {
+              visible: tailscale.installed && tailscale.running && tailscale.peers.length === 0
+              width: parent.width
+              text: "No peers found on this tailnet."
+              color: root.dim
+              font.family: root.fontFamily
+              font.pixelSize: Style.font.bodySmall
+              horizontalAlignment: Text.AlignHCenter
+            }
+
+            Text {
+              visible: tailscale.installed && !tailscale.running
+              width: parent.width
+              text: tailscale.needsLogin ? "Log in to see tailnet peers." : "Turn Tailscale on to see tailnet peers."
+              color: root.dim
+              font.family: root.fontFamily
+              font.pixelSize: Style.font.bodySmall
+              horizontalAlignment: Text.AlignHCenter
+            }
+
+            Flickable {
+              id: peerFlick
+              visible: tailscale.peers.length > 0
+              width: parent.width
+              height: Math.min(peerColumn.implicitHeight, Style.space(340))
+              contentWidth: width
+              contentHeight: peerColumn.implicitHeight
+              clip: true
+              boundsBehavior: Flickable.StopAtBounds
+              ScrollBar.vertical: ScrollBar { policy: ScrollBar.AsNeeded }
+
+              Column {
+                id: peerColumn
+                width: peerFlick.width
+                spacing: Style.space(6)
+
+                Repeater {
+                  model: tailscale.peers
+                  PeerRow {
+                    required property var modelData
+                    required property int index
+                    width: peerColumn.width
+                    peer: modelData
+                    rowIndex: index
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  component AccountRow: Rectangle {
+    id: accountRow
+    property var account: null
+    property int rowIndex: 0
+    readonly property bool selectedAccount: account && account.selected === true
+    readonly property bool hasCursor: root.focusSection === "accounts" && root.accountIndex === rowIndex
+
+    implicitHeight: row.implicitHeight + Style.space(12)
+    color: hasCursor ? Style.hoverFillFor(root.foreground, root.urgent) : (selectedAccount ? root.card : "transparent")
+    border.color: hasCursor ? Style.hoverBorderFor(root.foreground, root.urgent) : "transparent"
+    border.width: hasCursor ? Style.hoverBorderWidth : 0
+    radius: Style.cornerRadius
+
+    RowLayout {
+      id: row
+      anchors.left: parent.left
+      anchors.right: parent.right
+      anchors.verticalCenter: parent.verticalCenter
+      anchors.leftMargin: Style.space(10)
+      anchors.rightMargin: Style.space(10)
+      spacing: Style.space(8)
+
+      Text {
+        text: accountRow.selectedAccount ? "●" : "○"
+        color: accountRow.selectedAccount ? root.foreground : root.dim
+        font.family: root.fontFamily
+        font.pixelSize: Style.font.bodySmall
+        Layout.alignment: Qt.AlignVCenter
+      }
+
+      ColumnLayout {
+        Layout.fillWidth: true
+        spacing: Style.space(1)
+        Text {
+          Layout.fillWidth: true
+          text: account ? (account.nickname || account.tailnet || account.account || account.id || "Account") : "Account"
+          color: root.foreground
+          font.family: root.fontFamily
+          font.pixelSize: Style.font.bodySmall
+          font.bold: true
+          elide: Text.ElideRight
+        }
+        Text {
+          Layout.fillWidth: true
+          text: account ? [account.tailnet || "", account.account || ""].filter(function(x) { return String(x) !== "" }).join(" · ") : ""
+          color: root.dim
+          font.family: root.fontFamily
+          font.pixelSize: Style.font.caption
+          elide: Text.ElideRight
+        }
+      }
+    }
+
+    MouseArea {
+      anchors.fill: parent
+      hoverEnabled: true
+      cursorShape: Qt.PointingHandCursor
+      onEntered: root.setAccountCursor(accountRow.rowIndex)
+      onClicked: if (accountRow.account) tailscale.switchAccount(accountRow.account.id)
+    }
+  }
+
+  component PeerRow: Rectangle {
+    id: peerRow
+    property var peer: null
+    property int rowIndex: 0
+    readonly property bool online: peer && peer.Online === true
+    readonly property bool hasCursor: root.focusSection === "peers" && root.peerIndex === rowIndex
+    readonly property string peerName: peer ? String(peer.HostName || "Unknown") : "Unknown"
+    readonly property string peerIp: peer && peer.TailscaleIPs && peer.TailscaleIPs.length > 0 ? String(peer.TailscaleIPs[0]) : ""
+    readonly property string peerDns: peer ? String(peer.DNSName || "") : ""
+
+    implicitHeight: Math.max(peerContent.implicitHeight, actions.implicitHeight) + Style.space(12)
+    color: hasCursor ? Style.hoverFillFor(root.foreground, root.urgent) : root.card
+    border.color: hasCursor ? Style.hoverBorderFor(root.foreground, root.urgent) : Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.04)
+    border.width: hasCursor ? Style.hoverBorderWidth : Style.normalBorderWidth
+    radius: Style.cornerRadius
+    opacity: online ? 1.0 : 0.62
+
+    RowLayout {
+      anchors.left: parent.left
+      anchors.right: parent.right
+      anchors.verticalCenter: parent.verticalCenter
+      anchors.leftMargin: Style.space(10)
+      anchors.rightMargin: Style.space(8)
+      spacing: Style.space(8)
+
+      Text {
+        text: tailscale.osIcon(peer ? peer.OS : "")
+        color: root.foreground
+        font.family: root.fontFamily
+        font.pixelSize: Style.font.icon
+        Layout.alignment: Qt.AlignVCenter
+      }
+
+      ColumnLayout {
+        id: peerContent
+        Layout.fillWidth: true
+        spacing: Style.space(1)
+
+        Text {
+          Layout.fillWidth: true
+          text: peerRow.peerName
+          color: root.foreground
+          font.family: root.fontFamily
+          font.pixelSize: Style.font.bodySmall
+          font.bold: true
+          elide: Text.ElideRight
+        }
+
+        Text {
+          Layout.fillWidth: true
+          text: {
+            var parts = []
+            if (peerRow.peerIp !== "") parts.push(peerRow.peerIp)
+            if (peerRow.peerDns !== "") parts.push(peerRow.peerDns)
+            if (!peerRow.online) parts.push("offline")
+            return parts.join(" · ")
+          }
+          color: root.dim
+          font.family: root.fontFamily
+          font.pixelSize: Style.font.caption
+          elide: Text.ElideRight
+        }
+      }
+
+      Row {
+        id: actions
+        spacing: Style.space(2)
+        Layout.alignment: Qt.AlignVCenter
+
+        PanelActionButton {
+          iconText: "󰆏"
+          tooltipText: "Copy IP"
+          foreground: root.foreground
+          fontFamily: root.fontFamily
+          enabled: peerRow.peerIp !== ""
+          onClicked: tailscale.copyPeerIp(peerRow.peer)
+        }
+
+        PanelActionButton {
+          iconText: "󰉿"
+          tooltipText: "Copy name"
+          foreground: root.foreground
+          fontFamily: root.fontFamily
+          enabled: peerRow.peerName !== ""
+          onClicked: tailscale.copyPeerName(peerRow.peer)
+        }
+      }
+    }
+
+    MouseArea {
+      anchors.fill: parent
+      acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+      hoverEnabled: true
+      cursorShape: Qt.PointingHandCursor
+      z: -1
+      onEntered: root.setPeerCursor(peerRow.rowIndex)
+      onClicked: function(mouse) {
+        if (mouse.button === Qt.RightButton) tailscale.copyPeerName(peerRow.peer)
+        else if (mouse.button === Qt.MiddleButton) tailscale.copyPeerDnsName(peerRow.peer)
+        else tailscale.copyPeerIp(peerRow.peer)
+      }
+    }
+  }
+}

shell/plugins/tailscale/manifest.json

@@ -0,0 +1,35 @@
+{
+  "schemaVersion": 1,
+  "id": "omarchy.tailscale",
+  "name": "Tailscale",
+  "version": "1.0.0",
+  "author": "Omarchy",
+  "license": "MIT",
+  "description": "Tailscale status, account switching, peer browsing, and quick copy actions in the Omarchy bar.",
+  "kinds": [
+    "bar-widget"
+  ],
+  "entryPoints": {
+    "barWidget": "Widget.qml"
+  },
+  "barWidget": {
+    "displayName": "Tailscale",
+    "description": "Toggle Tailscale, switch accounts, browse peers, and copy peer IPs or names.",
+    "category": "Network",
+    "allowMultiple": false,
+    "defaults": {
+      "refreshIntervalSec": 30
+    },
+    "schema": [
+      {
+        "key": "refreshIntervalSec",
+        "type": "integer",
+        "label": "Refresh interval (seconds)",
+        "min": 5,
+        "max": 3600,
+        "step": 5,
+        "defaultValue": 30
+      }
+    ]
+  }
+}