feat: add an auto or fixed columns picker to card grids

chore: add six new plugins to the readme table
fix: let the repair screen turn the layout plugin back on
2026-10-28 14:15:24 +00:00 · 2026-10-21 21:35:25 -05:00 · 2026-10-21 16:25:59 -05:00 · 2026-10-21 11:55:50 -05:00 · 2026-10-21 10:44:53 -05:00 · 2026-10-21 09:54:43 -05:00
34 changed files with 594 additions and 124 deletions
@@ -1,5 +1,17 @@
 # Changelog

+## 26.10.5
+
+### Changed
+
+- Card grids in the Plugins tab and in plugins can show Auto (as many as fit) or a set number of cards per row
+
+## 26.10.4
+
+### Fixed
+
+- Pin classic layout plugin (fixes proxmox install)
+
 ## 26.10.3

 ### Added
@@ -1,6 +1,6 @@
 cask "termix" do
-  version "26.10.2"
-  sha256 "9df1850b5f75a3c0a1b3876847d46b7b4ff993aa1e50da55f4c88819308ba223"
+  version "26.10.3"
+  sha256 "a0c9db16f144c1e2be6ce2f4ead9268a010d12e0d0608feb34976750661a2239"

  url "https://github.com/Termix-SSH/Termix/releases/download/v#{version}/termix_macos_universal_dmg.dmg"
  name "Termix"
@@ -66,7 +66,9 @@ Plugins add everything else. The official ones ship with Termix, and admins can
 | [Automations](https://github.com/Termix-SSH/Plugin-Automations)             | Run steps on your hosts on a schedule or when something happens.                                                                |
 | [Classic Layout](https://github.com/Termix-SSH/Plugin-Classic-Layout)       | The classic Termix layout with an icon rail, sidebar, tab bar and dock.                                                         |
 | [Classic Themes](https://github.com/Termix-SSH/Plugin-Classic-Themes)       | Light, dark and seven more color themes for Termix.                                                                             |
+| [Cloud Providers](https://github.com/Termix-SSH/Plugin-Cloud-Providers)     | Add hosts from AWS, Azure, Google Cloud, DigitalOcean, Hetzner and other clouds, and keep them in sync.                         |
 | [Credential Tools](https://github.com/Termix-SSH/Plugin-Credential-Tools)   | Generate SSH keys, check them and copy a public key to a host.                                                                  |
+| [Databases](https://github.com/Termix-SSH/Plugin-Databases)                 | Browse and edit MySQL, MariaDB, PostgreSQL and SQLite databases on your hosts from one tab.                                     |
 | [Docker](https://github.com/Termix-SSH/Plugin-Docker)                       | Manage Docker and Podman containers on your hosts over SSH, with logs, stats and a console.                                     |
 | [File Manager](https://github.com/Termix-SSH/Plugin-File-Manager)           | Browse, edit and move files over SFTP, including straight from one server to another.                                           |
 | [Fleets](https://github.com/Termix-SSH/Plugin-Fleets)                       | Group hosts into fleets and run commands, package actions and file transfers on all of them at once.                            |
@@ -76,6 +78,7 @@ Plugins add everything else. The official ones ship with Termix, and admins can
 | [Host Status](https://github.com/Termix-SSH/Plugin-Host-Status)             | Shows if each host is online with a dot in the host list, checked by connecting to its port.                                    |
 | [Hosts Config](https://github.com/Termix-SSH/Plugin-Hosts-Config)           | Keep hosts, folders and sharing in a YAML or JSON file. Termix loads them as read only hosts and reloads when the file changes. |
 | [Import and Export](https://github.com/Termix-SSH/Plugin-Import-Export)     | Import hosts from a JSON file or an SSH config file and export them to share or back up.                                        |
+| [Kubernetes](https://github.com/Termix-SSH/Plugin-Kubernetes)               | Manage Kubernetes clusters from your hosts over SSH, with logs, metrics, YAML and a shell.                                      |
 | [LDAP](https://github.com/Termix-SSH/Plugin-LDAP)                           | Sign in with your LDAP or Active Directory username and password.                                                               |
 | [Login Security](https://github.com/Termix-SSH/Plugin-Login-Security)       | Sign people out when idle, limit session length, turn off remember me and require a second factor at login.                     |
 | [Network Topology](https://github.com/Termix-SSH/Plugin-Network-Topology)   | Draws your hosts and the links between them as a live, interactive graph.                                                       |
@@ -83,8 +86,11 @@ Plugins add everything else. The official ones ship with Termix, and admins can
 | [Passkeys](https://github.com/Termix-SSH/Plugin-WebAuthn)                   | Sign in with a passkey or security key instead of a password.                                                                   |
 | [Proxmox](https://github.com/Termix-SSH/Plugin-Proxmox)                     | Import Proxmox VE guests as hosts, keep them in sync and watch node stats.                                                      |
 | [Remote Desktop](https://github.com/Termix-SSH/Plugin-Remote-Desktop)       | RDP, VNC and Telnet sessions in your browser, with clipboard, file transfer, sharing and recording.                             |
+| [Reverse Proxy](https://github.com/Termix-SSH/Plugin-Reverse-Proxy)         | Reverse proxy for TCP, UDP, HTTP and HTTPS with free certificates and Termix login, managed per host.                           |
+| [Samba Shares](https://github.com/Termix-SSH/Plugin-Samba)                  | Create and manage Samba (SMB) file shares, users and permissions on your hosts from one tab.                                    |
 | [Secret Sources](https://github.com/Termix-SSH/Plugin-Secret-Sources)       | Pull host passwords and keys from 1Password when you connect instead of storing them in Termix.                                 |
 | [Serial](https://github.com/Termix-SSH/Plugin-Serial)                       | Open a serial console to a router, switch or other device plugged into your computer.                                           |
+| [Services](https://github.com/Termix-SSH/Plugin-Service-Manager)            | Manage services, timers and logs on your hosts over SSH.                                                                        |
 | [Session Recording](https://github.com/Termix-SSH/Plugin-Session-Recording) | Record terminal and remote desktop sessions and play them back or download them later.                                          |
 | [Session Sharing](https://github.com/Termix-SSH/Plugin-Session-Sharing)     | Share live sessions by link or with another user, and present sessions to a group in meeting rooms.                             |
 | [Single sign-on](https://github.com/Termix-SSH/Plugin-SSO)                  | Sign in with any OpenID Connect provider, GitHub or Google.                                                                     |
@@ -9,8 +9,8 @@
    {
      "id": "ai",
      "source": "tmxplug",
-      "url": "https://github.com/Termix-SSH/Plugin-AI/releases/download/v1.1.0/ai-1.1.0.tmxplug",
-      "sha256": "71dda6940d62c9eede7821bbac21e99443fbc08728a47759f215e2416f1d162f"
+      "url": "https://github.com/Termix-SSH/Plugin-AI/releases/download/v1.2.0/ai-1.2.0.tmxplug",
+      "sha256": "3b486133af78ae5168e6f5b8a4c71f3db3403cfdae537ed1ca8d6cc16035d8dd"
    },
    {
      "id": "alerts",
@@ -22,31 +22,43 @@
        "consent": false
      }
    },
+    {
+      "id": "audit-tools",
+      "source": "tmxplug",
+      "url": "https://github.com/Termix-SSH/Plugin-Audit-Tools/releases/download/v1.0.0/audit-tools-1.0.0.tmxplug",
+      "sha256": "131479c294d692b1c0ed4d6cec273730a3a67a28ecd44825ffd36bade9aa863b"
+    },
    {
      "id": "automations",
      "source": "tmxplug",
-      "url": "https://github.com/Termix-SSH/Plugin-Automations/releases/download/v1.0.2/automations-1.0.2.tmxplug",
-      "sha256": "674eb04276b4a0c77c794b30647f8680218a78de8d52b73e99ec900cc1b3fdb3"
+      "url": "https://github.com/Termix-SSH/Plugin-Automations/releases/download/v1.0.3/automations-1.0.3.tmxplug",
+      "sha256": "b5e5b39a053010b72ad1ba03ea6bb05afbbb2b789a86e0e98634d9ada543d02d"
    },
    {
      "id": "classic-layout",
      "source": "tmxplug",
-      "url": "https://github.com/Termix-SSH/Plugin-Classic-Layout/releases/download/v1.0.0/classic-layout-1.0.0.tmxplug",
-      "sha256": "3a51cc9a4c966478f2ebfd58dbbe025ff0ebe8bbdcd3ba73156151e555f62dec",
+      "url": "https://github.com/Termix-SSH/Plugin-Classic-Layout/releases/download/v1.0.1/classic-layout-1.0.1.tmxplug",
+      "sha256": "6b2d9acd77ef4b33fa0761c1aea7ed3c6171c325ee8febcedff94b5b2bc7be34",
      "defaultLook": true
    },
    {
      "id": "classic-themes",
      "source": "tmxplug",
      "url": "https://github.com/Termix-SSH/Plugin-Classic-Themes/releases/download/v1.0.0/classic-themes-1.0.0.tmxplug",
-      "sha256": "17561e569811476ea4e1f7cdf8d9afbe33edf061bd09f6b05699b44968da41ad",
+      "sha256": "919283f95701d41727c826637a7d349bd6a646abd61f9ac9017149bd0bee782c",
      "defaultLook": true
    },
+    {
+      "id": "credential-tools",
+      "source": "tmxplug",
+      "url": "https://github.com/Termix-SSH/Plugin-Credential-Tools/releases/download/v1.0.0/credential-tools-1.0.0.tmxplug",
+      "sha256": "413eff710b5c832a2575a890bbab1c90d28ea55f10cd7a7b94b851d51dd77dce"
+    },
    {
      "id": "docker",
      "source": "tmxplug",
-      "url": "https://github.com/Termix-SSH/Plugin-Docker/releases/download/v1.0.2/docker-1.0.2.tmxplug",
-      "sha256": "0e1c722682faac6a027fd9b01e6910eb53ce5acb13332c6c8d8868554f3701ab",
+      "url": "https://github.com/Termix-SSH/Plugin-Docker/releases/download/v1.1.0/docker-1.1.0.tmxplug",
+      "sha256": "da32dfbe9d4cffec5d80c4a1037a79e7591a3d16c50f882db6a146322a50c2b7",
      "onboarding": {
        "recommended": true,
        "consent": false
@@ -55,8 +67,8 @@
    {
      "id": "file-manager",
      "source": "tmxplug",
-      "url": "https://github.com/Termix-SSH/Plugin-File-Manager/releases/download/v1.0.3/file-manager-1.0.3.tmxplug",
-      "sha256": "250e9779a6b1caf11721f1ee2baf76655ae6e52d963e894d8db84eb9677cf0b3",
+      "url": "https://github.com/Termix-SSH/Plugin-File-Manager/releases/download/v1.1.0/file-manager-1.1.0.tmxplug",
+      "sha256": "807e9ffa80d6054a5911522721a555e0daa3e50f6edffdebe97efe7c91aea7a2",
      "onboarding": {
        "recommended": true,
        "consent": false
@@ -71,25 +83,49 @@
    {
      "id": "homepage",
      "source": "tmxplug",
-      "url": "https://github.com/Termix-SSH/Plugin-Homepage/releases/download/v1.0.2/homepage-1.0.2.tmxplug",
-      "sha256": "88cdea8ba8f458fcf124e7ab97e3d419896d8d22ffa9a372af34f1818872975b"
+      "url": "https://github.com/Termix-SSH/Plugin-Homepage/releases/download/v1.1.0/homepage-1.1.0.tmxplug",
+      "sha256": "5a9d5d2cc337fcee5590ea957e35ddeea5a71596aeb59410bf1420065b9b5b00"
    },
    {
      "id": "host-metrics",
      "source": "tmxplug",
-      "url": "https://github.com/Termix-SSH/Plugin-Host-Metrics/releases/download/v1.0.3/host-metrics-1.0.3.tmxplug",
-      "sha256": "8f6022568349fc4318d509781bdb9d5b40973c010a9e27f720eed6baf68b881e",
+      "url": "https://github.com/Termix-SSH/Plugin-Host-Metrics/releases/download/v1.1.0/host-metrics-1.1.0.tmxplug",
+      "sha256": "4f1d422ec1d0565c79f94fa814ee0864d556d7367793b11035e68239e49e297f",
      "onboarding": {
        "recommended": true,
        "consent": false
      }
    },
+    {
+      "id": "host-status",
+      "source": "tmxplug",
+      "url": "https://github.com/Termix-SSH/Plugin-Host-Status/releases/download/v1.0.0/host-status-1.0.0.tmxplug",
+      "sha256": "1ba62577dc7373a2a2787bab7efdb89b544a30a8003b1de91ce51f372fc4f170"
+    },
+    {
+      "id": "hosts-config",
+      "source": "tmxplug",
+      "url": "https://github.com/Termix-SSH/Plugin-Hosts-Config/releases/download/v1.0.0/hosts-config-1.0.0.tmxplug",
+      "sha256": "60a2b2a6d9ba13bad12a511c93af70a30a10fbc560066b6419acf533d806a3ad"
+    },
+    {
+      "id": "import-export",
+      "source": "tmxplug",
+      "url": "https://github.com/Termix-SSH/Plugin-Import-Export/releases/download/v1.0.0/import-export-1.0.0.tmxplug",
+      "sha256": "6670b6c147e81eed0ddfd249f9a7c9564f1ab50e45f2771161d2e30c47f6fd58"
+    },
    {
      "id": "ldap",
      "source": "tmxplug",
      "url": "https://github.com/Termix-SSH/Plugin-LDAP/releases/download/v1.0.2/ldap-1.0.2.tmxplug",
      "sha256": "9ef269ad281f1c68cea53e0d43ccb7a5d4f949f11b30b22eac3d01047b20eb03"
    },
+    {
+      "id": "login-security",
+      "source": "tmxplug",
+      "url": "https://github.com/Termix-SSH/Plugin-Login-Security/releases/download/v1.0.0/login-security-1.0.0.tmxplug",
+      "sha256": "b21dff5722e72a02022d563ef27130e8b56a53e273f1668fade4ec7d030374aa"
+    },
    {
      "id": "network-topology",
      "source": "tmxplug",
@@ -111,8 +147,8 @@
    {
      "id": "remote-desktop",
      "source": "tmxplug",
-      "url": "https://github.com/Termix-SSH/Plugin-Remote-Desktop/releases/download/v1.1.0/remote-desktop-1.1.0.tmxplug",
-      "sha256": "6f74f1d26f91a43b2d2203417d744211f366c335d5fff7bed34bfce33874dd01",
+      "url": "https://github.com/Termix-SSH/Plugin-Remote-Desktop/releases/download/v1.2.0/remote-desktop-1.2.0.tmxplug",
+      "sha256": "0de40896bfeb4b1a702c3ce815355b7b7b0bb4bfe424f33e905bb5a0209d02f6",
      "onboarding": {
        "recommended": true,
        "consent": false
@@ -159,8 +195,8 @@
    {
      "id": "ssh-terminal",
      "source": "tmxplug",
-      "url": "https://github.com/Termix-SSH/Plugin-SSH-Terminal/releases/download/v1.0.3/ssh-terminal-1.0.3.tmxplug",
-      "sha256": "bc288bd843e37b64bcda7462d175039147b75dc6de8866769e4a938036a9d023",
+      "url": "https://github.com/Termix-SSH/Plugin-SSH-Terminal/releases/download/v1.1.0/ssh-terminal-1.1.0.tmxplug",
+      "sha256": "dacdbadb3c6a0d7014b1de4f62b499f80abf358c7799a6e6326674660b055e4a",
      "onboarding": {
        "recommended": true,
        "consent": false
@@ -183,6 +219,12 @@
      "url": "https://github.com/Termix-SSH/Plugin-Step-CA/releases/download/v1.0.2/step-ca-1.0.2.tmxplug",
      "sha256": "685b644fe44c2d3fa007baee16e8ea8a7d5204f039ebc8aa65e8093ad93adf8a"
    },
+    {
+      "id": "sync",
+      "source": "tmxplug",
+      "url": "https://github.com/Termix-SSH/Plugin-Sync/releases/download/v1.0.0/sync-1.0.0.tmxplug",
+      "sha256": "12ced05523f7c1a9151b5e680726bd31f53888e8bb0047d7bd12a2570ea168bf"
+    },
    {
      "id": "tailscale",
      "source": "tmxplug",
@@ -208,8 +250,8 @@
    {
      "id": "tmux-monitor",
      "source": "tmxplug",
-      "url": "https://github.com/Termix-SSH/Plugin-Tmux-Monitor/releases/download/v1.0.3/tmux-monitor-1.0.3.tmxplug",
-      "sha256": "f152d64f433d3f1de7c3fdf172e752ea7e333909f0fdda77336a6b8dddb9f242"
+      "url": "https://github.com/Termix-SSH/Plugin-Tmux-Monitor/releases/download/v1.0.4/tmux-monitor-1.0.4.tmxplug",
+      "sha256": "42b8a2284e68a321c1736984f5c641b1857c87c6a65ce8cf694c6bc946de2444"
    },
    {
      "id": "totp",
@@ -224,8 +266,8 @@
    {
      "id": "tunnels",
      "source": "tmxplug",
-      "url": "https://github.com/Termix-SSH/Plugin-Tunnels/releases/download/v1.0.3/tunnels-1.0.3.tmxplug",
-      "sha256": "d0de9e59ccc9e1a0f2817dd1ec9951021f2d7e89304894bb1e8cefd65aebff0b",
+      "url": "https://github.com/Termix-SSH/Plugin-Tunnels/releases/download/v1.1.0/tunnels-1.1.0.tmxplug",
+      "sha256": "b1e4f1b6dd2bbd15a9a240ae1c1d381111c3609258c8946d19493a83f861ea1e",
      "onboarding": {
        "recommended": true,
        "consent": false
@@ -252,14 +294,14 @@
    {
      "id": "web-endpoint",
      "source": "tmxplug",
-      "url": "https://github.com/Termix-SSH/Plugin-Web-Endpoint/releases/download/v1.0.2/web-endpoint-1.0.2.tmxplug",
-      "sha256": "0326edb1052d1debd083004c2dd1711d21a902cfacb55ce74d1a8856a5122477"
+      "url": "https://github.com/Termix-SSH/Plugin-Web-Endpoint/releases/download/v1.0.3/web-endpoint-1.0.3.tmxplug",
+      "sha256": "014cbf23c82cab20e485bc4f4c9b8baa779aee9bb3ed644b41f22a9b1be95687"
    },
    {
      "id": "webauthn",
      "source": "tmxplug",
-      "url": "https://github.com/Termix-SSH/Plugin-WebAuthn/releases/download/v1.0.2/webauthn-1.0.2.tmxplug",
-      "sha256": "8269f6e407897332648c8526b65383c4db071ea782bf1e58aa7c7c00627f3f4b",
+      "url": "https://github.com/Termix-SSH/Plugin-WebAuthn/releases/download/v1.1.0/webauthn-1.1.0.tmxplug",
+      "sha256": "83a61a530db0273f9fef2080d6aa027a82ef8374fb4e0f158a8559a2770299de",
      "onboarding": {
        "recommended": true,
        "consent": false
@@ -1,12 +1,12 @@
 {
  "name": "termix",
-  "version": "26.10.3",
+  "version": "26.10.5",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "termix",
-      "version": "26.10.3",
+      "version": "26.10.5",
      "hasInstallScript": true,
      "workspaces": [
        "packages/*"
@@ -4,7 +4,7 @@
  "workspaces": [
    "packages/*"
  ],
-  "version": "26.10.3",
+  "version": "26.10.5",
  "description": "Self-hosted, plugin-based server management.",
  "author": "Karmaa",
  "main": "electron/main.cjs",
@@ -18,7 +18,7 @@
    "postinstall": "node scripts/patch-app-builder-lib.cjs && node scripts/patch-better-sqlite3.cjs && node scripts/patch-nan.cjs && node scripts/patch-node-pty.cjs && node scripts/patch-ssh2-agent.cjs && node scripts/patch-ssh2-sk.cjs",
    "prepare": "husky || true",
    "prebuild": "node scripts/write-electron-build-info.cjs",
-    "lint": "node scripts/generate-dialect-schema.cjs --check && eslint . && node scripts/check-importmap-csp.cjs && node scripts/check-core-plugin-ids.cjs && node scripts/check-sdk-ui-exports.cjs && node scripts/check-sdk-guide.cjs && node scripts/check-test-locations.cjs && node scripts/check-changelog.cjs && node scripts/check-env-catalog.cjs",
+    "lint": "node scripts/generate-dialect-schema.cjs --check && eslint . && node scripts/check-importmap-csp.cjs && node scripts/check-core-plugin-ids.cjs && node scripts/check-sdk-ui-exports.cjs && node scripts/check-button-colors.cjs && node scripts/check-sdk-guide.cjs && node scripts/check-test-locations.cjs && node scripts/check-changelog.cjs && node scripts/check-env-catalog.cjs",
    "lint:fix": "eslint --fix .",
    "type-check": "npm run build:sdk && tsc -b --force",
    "test": "vitest run",
@@ -1,5 +1,15 @@
 # Changelog

+## 1.0.20
+
+Plugin API 1.12.0.
+
+### Added
+
+- `columns` and `onColumns` on `ViewToggle` show a cards per row picker: Auto fits as many as the pane has room for, or pick 1 to 6
+- `size` and `minCardWidth` on `DataView`, so a card grid follows that pick, and the `GridSize` type
+- `usePluginPanelView` also keeps `columns`, the cards per row pick, with `setColumns`
+
 ## 1.0.19

 Plugin API 1.11.0.
@@ -1,6 +1,6 @@
 # Termix plugin guide

-SDK 1.0.19 | Plugin API 1.11.0
+SDK 1.0.20 | Plugin API 1.12.0

 This guide is for anyone, person or AI coding tool, building a Termix plugin. It ships inside
 `@termix-ssh/plugin-sdk`, so the copy in your `node_modules` always matches the SDK you have installed.
@@ -643,6 +643,9 @@ exports with props is `ui.api.txt` in the Termix repo
  `PanePrompt` for small prompts.
 - Every tab or panel sits in `PanelShell`. Lists use `PanelList` and `ListRow`, add with `AddButton`,
  forms end with `FormFooter`, empty lists show `EmptyState`.
+- Card grids use `DataView` with `ViewToggle`. Pass `columns` and `onColumns` to `ViewToggle` and the same
+  value as `size` to `DataView`, so users can pick Auto (as many as fit) or a fixed number of cards per
+  row. `usePluginPanelView` keeps the choice as `columns`. Older Termix versions ignore both props.
 - Forms: `TextField`, `NumberField`, `SelectField`, `SwitchRow`, `SecretField`, `SettingRow` and friends.
 - Host sessions use `ConnectionGate` for the whole connect flow (host keys, TOTP, passphrases, errors).
 - Mobile: check `useIsMobile()` and give small screens a layout that works. The desktop app always uses the
@@ -1,6 +1,6 @@
 {
  "name": "@termix-ssh/plugin-sdk",
-  "version": "1.0.19",
+  "version": "1.0.20",
  "description": "The contract between Termix core and a plugin: types, the capability catalog and the manifest schema.",
  "license": "Apache-2.0",
  "repository": {
@@ -1711,28 +1711,49 @@ export function usePluginUiPreferences<
  return bridge.usePluginUiPreferences(bridge.usePluginId()) as never;
 }

+type PanelGridSize = "auto" | "1" | "2" | "3" | "4" | "5" | "6";
+const PANEL_GRID_SIZES: readonly string[] = [
+  "auto",
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+];
+
 /**
- * Grid or list and row density for one of this plugin's views, kept in its
- * Appearance area as `<prefix>viewMode` and `<prefix>density`. Declare those
- * keys in contributes.uiPresets so each preset level can pick a default.
+ * Grid or list, row density and cards per row for one of this plugin's
+ * views, kept in its Appearance area as `<prefix>viewMode`, `<prefix>density`
+ * and `<prefix>columns`. Declare those keys in contributes.uiPresets so each
+ * preset level can pick a default. Hand columns to ViewToggle and DataView.
 */
 export function usePluginPanelView(prefix = ""): {
  view: "grid" | "list";
  density: "comfortable" | "compact";
  compact: boolean;
+  columns: PanelGridSize;
  setView: (view: "grid" | "list") => void;
  setDensity: (density: "comfortable" | "compact") => void;
+  setColumns: (columns: PanelGridSize) => void;
 } {
  const { values, set } = usePluginUiPreferences();
  const view = values[`${prefix}viewMode`] === "list" ? "list" : "grid";
  const density =
    values[`${prefix}density`] === "compact" ? "compact" : "comfortable";
+  const saved = values[`${prefix}columns`];
+  const columns =
+    typeof saved === "string" && PANEL_GRID_SIZES.includes(saved)
+      ? (saved as PanelGridSize)
+      : "auto";
  return {
    view,
    density,
    compact: density === "compact",
+    columns,
    setView: (next) => set(`${prefix}viewMode`, next),
    setDensity: (next) => set(`${prefix}density`, next),
+    setColumns: (next) => set(`${prefix}columns`, next),
  };
 }

@@ -37,7 +37,7 @@ export {
 * "^1.2" needs 1.2 or later). engine.termix is checked against the core
 * version by the server.
 */
-export const PLUGIN_API_VERSION = "1.11.0";
+export const PLUGIN_API_VERSION = "1.12.0";

 /** The API major, the default engine.api for a new plugin. */
 export const SUPPORTED_PLUGIN_API_VERSION = String(
@@ -80,7 +80,7 @@ DEFAULT_FOLDER_COLOR (value): "#f59145"
 DEFAULT_FOLDER_ICON (value): "folder"
 DashboardCardId (type): DashboardCardId
 DataColumn (type): DataColumn<T>
-DataView (value): <T>({ items, view, density, getKey, renderCard, columns, listColumns, onRowClick, isRowActive, empty, className, }: { items: T[]; view: PanelViewMode; density?: PanelDensity; getKey: (item: T) => string; renderCard: (item: T) => ReactNode; columns: GridColumns; listColumns: DataColumn<T>[]; onRowClick?: (item: T) => void; isRowActive?: (item: T) => boolean; empty: ReactNode; className?: string; }) => Element
+DataView (value): <T>({ items, view, density, getKey, renderCard, columns, size, minCardWidth, listColumns, onRowClick, isRowActive, empty, className, }: { items: T[]; view: PanelViewMode; density?: PanelDensity; getKey: (item: T) => string; renderCard: (item: T) => ReactNode; columns: GridColumns; size?: GridSize; minCardWidth?: number; listColumns: DataColumn<T>[]; onRowClick?: (item: T) => void; isRowActive?: (item: T) => boolean; empty: ReactNode; className?: string; }) => Element
 DefaultOverrides (type): DefaultOverrides
 DefaultsOnly (value): ({ settingKey, children, }: { settingKey: string; children: ReactNode; }) => Element
 DesktopUpdateMode (type): DesktopUpdateMode
@@ -131,6 +131,7 @@ GridCardCatalogEntry (type): GridCardCatalogEntry
 GridColSpan (type): GridColSpan
 GridColumns (type): GridColumns
 GridLayout (type): GridLayout
+GridSize (type): GridSize
 GridSlot (type): GridSlot
 GroupHeading (value): ({ title, count, action, className, }: { title: string; count?: number; action?: ReactNode; className?: string; }) => Element
 HexColorPicker (value): ({ value, onChange, }: { value: string; onChange: (hex: string) => void; }) => Element
@@ -321,7 +322,7 @@ UserRole (type): UserRole
 UserSecondFactorSummary (type): UserSecondFactorSummary
 VersionBadge (value): ({ status, releaseUrl, className, }: VersionBadgeProps) => Element
 VersionInfo (type): VersionInfo
-ViewToggle (value): ({ view, onView, density, onDensity, }: { view: PanelViewMode; onView: (next: PanelViewMode) => void; density?: PanelDensity; onDensity?: (next: PanelDensity) => void; }) => Element
+ViewToggle (value): ({ view, onView, density, onDensity, columns, onColumns, }: { view: PanelViewMode; onView: (next: PanelViewMode) => void; density?: PanelDensity; onDensity?: (next: PanelDensity) => void; columns?: GridSize; onColumns?: (next: GridSize) => void; }) => Element
 WebSocketConnectionTarget (type): WebSocketConnectionTarget
 WidgetTitle (value): ({ title, icon, fallback }: WidgetTitleProps) => Element
 actionOrder (value): (action: HostActionDef) => number
@@ -0,0 +1,111 @@
+#!/usr/bin/env node
+/**
+ * Buttons are never white.
+ *
+ * Every Button variant is the brand orange with a different background
+ * opacity (or red for destructive, or transparent for ghost). Fails when a
+ * variant in src/ui/components/button.tsx uses a neutral fill, or when a
+ * <Button> anywhere in core or the local plugin checkouts sets a neutral fill
+ * in its className.
+ */
+
+const fs = require("node:fs");
+const path = require("node:path");
+
+const NEUTRAL =
+  /(?:^|[\s"'`])(?:dark:)?(?:bg-(?:primary|white|foreground|background|secondary|card|popover|muted|accent|input|neutral-\d+|zinc-\d+|gray-\d+|slate-\d+|stone-\d+)(?![\w-])|text-primary-foreground)/;
+
+/** The opening tag text of each <Button ...> in a source file. */
+function buttonTags(source) {
+  const tags = [];
+  const re = /<Button(?=[\s/>])/g;
+  let match;
+  while ((match = re.exec(source))) {
+    let depth = 0;
+    let quote = "";
+    let i = match.index + match[0].length;
+    for (; i < source.length; i++) {
+      const c = source[i];
+      if (quote) {
+        if (c === "\\") i++;
+        else if (c === quote) quote = "";
+      } else if (c === '"' || c === "'" || c === "`") quote = c;
+      else if (c === "{") depth++;
+      else if (c === "}") depth--;
+      else if (c === ">" && depth === 0) break;
+    }
+    tags.push(source.slice(match.index, i + 1));
+  }
+  return tags;
+}
+
+/** Variant strings from the cva block of button.tsx. */
+function variantLines(source) {
+  const start = source.indexOf("variant: {");
+  const end = source.indexOf("size: {");
+  if (start < 0 || end < 0) return [];
+  return source
+    .slice(start, end)
+    .split("\n")
+    .filter((line) => /["`]/.test(line) && !line.includes("variant: {"));
+}
+
+function walk(dir, out) {
+  if (!fs.existsSync(dir)) return;
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    if (["node_modules", "dist", "tests", "__fixtures__"].includes(entry.name))
+      continue;
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) walk(full, out);
+    else if (entry.name.endsWith(".tsx")) out.push(full);
+  }
+}
+
+/** Problems found under the given roots. */
+function scan(roots, buttonFile) {
+  const problems = [];
+  if (buttonFile && fs.existsSync(buttonFile)) {
+    for (const line of variantLines(fs.readFileSync(buttonFile, "utf8"))) {
+      if (NEUTRAL.test(line)) {
+        problems.push(
+          `${buttonFile}: neutral fill in a variant: ${line.trim()}`,
+        );
+      }
+    }
+  }
+  const files = [];
+  for (const root of roots) walk(root, files);
+  for (const file of files) {
+    for (const tag of buttonTags(fs.readFileSync(file, "utf8"))) {
+      if (NEUTRAL.test(tag)) {
+        problems.push(
+          `${file}: <Button> with a neutral fill: ${tag.slice(0, 120)}`,
+        );
+      }
+    }
+  }
+  return problems;
+}
+
+module.exports = { scan, buttonTags, variantLines };
+
+if (require.main === module) {
+  const core = path.resolve(__dirname, "..");
+  const plugins = path.resolve(core, "..", "Plugins");
+  const roots = [path.join(core, "src", "ui")];
+  if (fs.existsSync(plugins)) {
+    for (const entry of fs.readdirSync(plugins)) {
+      roots.push(path.join(plugins, entry, "src"));
+    }
+  }
+  const problems = scan(
+    roots,
+    path.join(core, "src", "ui", "components", "button.tsx"),
+  );
+  if (problems.length) {
+    console.error("Buttons must be the brand orange, never white or neutral:");
+    for (const p of problems) console.error("  " + p);
+    process.exit(1);
+  }
+  console.log("ok  button colors");
+}
@@ -0,0 +1,80 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createRequire } from "node:module";
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+
+const require = createRequire(import.meta.url);
+const { scan, buttonTags } = require("./check-button-colors.cjs") as {
+  scan: (roots: string[], buttonFile?: string) => string[];
+  buttonTags: (source: string) => string[];
+};
+
+let root: string | null = null;
+
+afterEach(() => {
+  if (root) fs.rmSync(root, { recursive: true, force: true });
+  root = null;
+});
+
+function fixture(files: Record<string, string>): string {
+  root = fs.mkdtempSync(path.join(os.tmpdir(), "button-colors-"));
+  for (const [file, content] of Object.entries(files)) {
+    const full = path.join(root, file);
+    fs.mkdirSync(path.dirname(full), { recursive: true });
+    fs.writeFileSync(full, content);
+  }
+  return root;
+}
+
+describe("buttonTags", () => {
+  it("reads a tag with arrow functions inside", () => {
+    const tags = buttonTags(
+      `<Button onClick={() => go(a > b)} className="x">Go</Button>`,
+    );
+    expect(tags).toHaveLength(1);
+    expect(tags[0]).toContain('className="x"');
+  });
+});
+
+describe("check-button-colors", () => {
+  it("accepts orange buttons and hover fills", () => {
+    const dir = fixture({
+      "a.tsx": `<Button className="bg-accent-brand/15 text-accent-brand hover:bg-muted" />`,
+    });
+    expect(scan([dir])).toEqual([]);
+  });
+
+  it("rejects a white or neutral fill on a Button", () => {
+    for (const cls of [
+      "bg-primary",
+      "bg-white",
+      "bg-foreground text-background",
+      "dark:bg-secondary",
+      "bg-muted",
+      "text-primary-foreground",
+    ]) {
+      const dir = fixture({ "a.tsx": `<Button className="${cls}">x</Button>` });
+      expect(scan([dir]), cls).toHaveLength(1);
+    }
+  });
+
+  it("rejects a neutral fill in a variant", () => {
+    const dir = fixture({
+      "button.tsx": `variant: {\n  default: "bg-primary text-primary-foreground",\n  ghost: "hover:bg-muted",\n},\nsize: {`,
+    });
+    expect(scan([], path.join(dir, "button.tsx"))).toHaveLength(1);
+  });
+
+  it("passes on the real button", () => {
+    const button = path.resolve(
+      __dirname,
+      "..",
+      "src",
+      "ui",
+      "components",
+      "button.tsx",
+    );
+    expect(scan([], button)).toEqual([]);
+  });
+});
@@ -151,6 +151,7 @@ const ALLOWED = [
  "GridCardCatalogEntry",
  "GridColSpan",
  "GridColumns",
+  "GridSize",
  "GridLayout",
  "GridSlot",
  "GroupHeading",
@@ -21,6 +21,8 @@ const packages = [
  "@img/sharp-win32-x64",
 ].map((name) => `${name}@${sharpPackage.optionalDependencies[name]}`);

+// A .cmd file only starts through a shell on current Node.
 execFileSync("npm.cmd", ["install", "--force", "--no-save", ...packages], {
  stdio: "inherit",
+  shell: true,
 });
@@ -137,9 +137,19 @@ function verifyArtifact(artifact) {
    console.log(`Verified macOS sharp packaging: ${path.basename(artifact)}`);
  } finally {
    if (mountedAt) {
-      spawnSync("hdiutil", ["detach", mountedAt], { stdio: "ignore" });
+      for (let attempt = 0; attempt < 5; attempt++) {
+        const args =
+          attempt < 3 ? ["detach", mountedAt] : ["detach", "-force", mountedAt];
+        if (spawnSync("hdiutil", args, { stdio: "ignore" }).status === 0) break;
+        Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, 2000);
+      }
    }
-    fs.rmSync(temporaryRoot, { recursive: true, force: true });
+    fs.rmSync(temporaryRoot, {
+      recursive: true,
+      force: true,
+      maxRetries: 5,
+      retryDelay: 1000,
+    });
  }
 }

@@ -56,7 +56,10 @@ import type { PluginTableDefinition } from "@termix-ssh/plugin-sdk/db";
 import * as syncRegistry from "./sync-registry.js";
 import { provideSync } from "../sync/provider.js";
 import { createSyncHost } from "../sync/host.js";
-import type { PluginSyncHost } from "@termix-ssh/plugin-sdk/backend";
+import type {
+  PluginSync,
+  PluginSyncHost,
+} from "@termix-ssh/plugin-sdk/backend";
 import {
  needsExplicitPersist,
  resolveDatabaseDialect,
@@ -193,7 +196,7 @@ export function createPluginContext(
 ): PluginContext {
  const pluginId = manifest.id;
  let syncHost: PluginSyncHost | undefined;
-  const syncApi: PluginContext["sync"] = {
+  const syncApi: PluginSync = {
    registerEntity: (entity) => {
      const dispose = syncRegistry.registerEntity(pluginId, entity);
      handle.bag.add(dispose, `sync entity ${entity.type}`);
@@ -209,7 +212,7 @@ export function createPluginContext(
        remove();
      };
    },
-  } as PluginContext["sync"];
+  } as PluginSync;
  // Not enumerable, so tools that walk the context do not trip the check.
  Object.defineProperty(syncApi, "host", {
    enumerable: false,
@@ -10,16 +10,17 @@ const buttonVariants = cva(
  {
    variants: {
      variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        default:
+          "border-accent-brand/40 bg-accent-brand/15 text-accent-brand hover:bg-accent-brand/25 aria-expanded:bg-accent-brand/25",
        outline:
-          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+          "border-accent-brand/40 bg-transparent text-accent-brand hover:bg-accent-brand/10 aria-expanded:bg-accent-brand/10",
        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+          "border-accent-brand/20 bg-accent-brand/10 text-accent-brand hover:bg-accent-brand/20 aria-expanded:bg-accent-brand/20",
        ghost:
          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
        destructive:
          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
-        link: "text-primary underline-offset-4 hover:underline",
+        link: "text-accent-brand underline-offset-4 hover:underline",
      },
      size: {
        default:
@@ -2,6 +2,8 @@ import type React from "react";
 import { cn } from "@/lib/utils";
 import {
  PANEL,
+  gridSizeStyle,
+  type GridSize,
  type PanelDensity,
  type PanelViewMode,
 } from "@/components/panel-layout";
@@ -67,6 +69,8 @@ export function DataView<T>({
  getKey,
  renderCard,
  columns,
+  size,
+  minCardWidth,
  listColumns,
  onRowClick,
  isRowActive,
@@ -78,7 +82,12 @@ export function DataView<T>({
  density?: PanelDensity;
  getKey: (item: T) => string;
  renderCard: (item: T) => React.ReactNode;
+  /** Breakpoint columns, used when no size is given. */
  columns: GridColumns;
+  /** Columns the user picked with ViewToggle. Wins over columns. */
+  size?: GridSize;
+  /** Narrowest card in auto mode, in px. */
+  minCardWidth?: number;
  listColumns: DataColumn<T>[];
  onRowClick?: (item: T) => void;
  isRowActive?: (item: T) => boolean;
@@ -93,9 +102,19 @@ export function DataView<T>({

  if (view === "grid") {
    return (
-      <div className={cn("grid", PANEL.gap, gridClass(columns), className)}>
+      <div
+        className={cn(
+          "grid",
+          PANEL.gap,
+          !size && gridClass(columns),
+          className,
+        )}
+        style={size ? gridSizeStyle(size, minCardWidth) : undefined}
+      >
        {items.map((item) => (
-          <div key={getKey(item)}>{renderCard(item)}</div>
+          <div key={getKey(item)} className="flex flex-col *:flex-1">
+            {renderCard(item)}
+          </div>
        ))}
      </div>
    );
@@ -1,11 +1,26 @@
 /* eslint-disable react-refresh/only-export-components */
 import { Children, Fragment, isValidElement, useRef } from "react";
 import type React from "react";
-import { ArrowLeft, Grid3X3, List, Rows3, Search, X } from "lucide-react";
+import {
+  ArrowLeft,
+  Columns3,
+  Grid3X3,
+  List,
+  Rows3,
+  Search,
+  X,
+} from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import { Separator } from "@/components/separator";
 import { DocsLink } from "@/components/docs-link";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/select";

 /** One spacing rhythm for every panel and tab. */
 export const PANEL = {
@@ -19,6 +34,37 @@ export const PANEL = {
 export type PanelViewMode = "grid" | "list";
 export type PanelDensity = "comfortable" | "compact";

+/** Cards per row. "auto" fits as many as the pane has room for. */
+export type GridSize = "auto" | "1" | "2" | "3" | "4" | "5" | "6";
+
+export const GRID_SIZES: readonly GridSize[] = [
+  "auto",
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+];
+
+// Sized off the pane's own width, not the window. Cards keep a min width,
+// so narrow panes drop columns on their own.
+export function gridSizeStyle(
+  size: GridSize,
+  minCardWidth = 320,
+  gap = "0.5rem",
+): React.CSSProperties {
+  if (size === "auto") {
+    return {
+      gridTemplateColumns: `repeat(auto-fill, minmax(min(100%, ${minCardWidth}px), 1fr))`,
+    };
+  }
+  const n = Number(size);
+  return {
+    gridTemplateColumns: `repeat(auto-fill, minmax(max(min(100%, 220px), calc((100% - ${n - 1} * ${gap}) / ${n} - 0.5px)), 1fr))`,
+  };
+}
+
 /** The header, toolbar band and body every tab and panel draws. */
 export function PanelShell({
  chrome = true,
@@ -308,20 +354,25 @@ export function Segmented<T extends string>({
  );
 }

-/** Grid or list, plus the compact rows toggle. */
+/** Grid or list, plus the compact rows toggle and the cards per row picker. */
 export function ViewToggle({
  view,
  onView,
  density,
  onDensity,
+  columns,
+  onColumns,
 }: {
  view: PanelViewMode;
  onView: (next: PanelViewMode) => void;
  density?: PanelDensity;
  onDensity?: (next: PanelDensity) => void;
+  /** Cards per row in grid view. Pass with onColumns to show the picker. */
+  columns?: GridSize;
+  onColumns?: (next: GridSize) => void;
 }) {
  const { t } = useTranslation();
-  return (
+  const toggle = (
    <div className="flex items-center border border-border">
      <ToggleButton
        active={view === "grid"}
@@ -356,6 +407,34 @@ export function ViewToggle({
      )}
    </div>
  );
+
+  if (!columns || !onColumns || view !== "grid") return toggle;
+
+  return (
+    <div className="flex items-center gap-2">
+      <Select value={columns} onValueChange={(v) => onColumns(v as GridSize)}>
+        <SelectTrigger
+          size="sm"
+          className="w-auto gap-1.5 text-xs"
+          title={t("panel.columns.title")}
+          aria-label={t("panel.columns.title")}
+        >
+          <Columns3 className="size-3.5 text-muted-foreground" />
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {GRID_SIZES.map((size) => (
+            <SelectItem key={size} value={size} className="text-xs">
+              {size === "auto"
+                ? t("panel.columns.auto")
+                : t("panel.columns.count", { count: Number(size) })}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      {toggle}
+    </div>
+  );
 }

 function ToggleButton({
@@ -1098,6 +1098,8 @@
      "resetEveryone": "Reset the default for everyone",
      "update": "Update {{name}} to {{version}}",
      "disable": "Turn off {{name}}",
+      "enable": "Turn on {{name}}",
+      "startAgain": "Start {{name}} again",
      "install": "Find layouts and themes",
      "installTitle": "Layouts and themes",
      "installButton": "Install",
@@ -1323,11 +1325,6 @@
        "updated": "Recently updated",
        "category": "Category"
      },
-      "columns": {
-        "title": "Columns",
-        "auto": "Auto",
-        "count": "{{count}} wide"
-      },
      "table": {
        "name": "Name",
        "description": "Description",
@@ -1652,7 +1649,12 @@
    "gridView": "Grid",
    "listView": "List",
    "compactRows": "Compact rows",
-    "comfortableRows": "Comfortable rows"
+    "comfortableRows": "Comfortable rows",
+    "columns": {
+      "title": "Columns",
+      "auto": "Auto",
+      "count": "{{count}} wide"
+    }
  },
  "fields": {
    "secretSaved": "Saved. Type to replace it."
@@ -1050,6 +1050,7 @@
        "interfaceFontLabel": "Fon Antara Muka",
        "interfaceFontDescription": "Menukar fon antara muka aplikasi. Profil terminal mengekalkan tetapan fon mereka sendiri.",
        "accentColorLabel": "Warna Aksen",
+        "apiKeyCount_one": "{{count}} kunci",
        "colorPickerTooltip": "Buka pemilih warna",
        "themeSystem": "Sistem",
        "themeLight": "Terang",
@@ -1003,6 +1003,7 @@
    "hostCount_other": "{{count}} máy chủ"
  },
  "admin": {
+    "usersCount_one": "{{count}} người dùng",
    "rolesCount_one": "vai trò {{count}}",
    "apiKeysCount_one": "{{count}} khóa",
    "sessionsActive_one": "còn {{count}} phiên đang hoạt động",
@@ -944,6 +944,7 @@
  "dashboardTab.stable": "7ce3adafad3e",
  "dashboardTab.onlineCount": "95d81e3c41e5",
  "dashboardTab.hostCount": "4279c8d92ede",
+  "admin.usersCount_one": "e085f3c4a7e3",
  "admin.rolesCount_one": "78d7eff0d4b9",
  "admin.apiKeysCount_one": "88a9751309dc",
  "admin.sessionsActive_one": "8eaf4563b05d",
@@ -978,6 +979,7 @@
  "newUi.sidebar.userProfile.interfaceFontLabel": "7f587ba745fd",
  "newUi.sidebar.userProfile.interfaceFontDescription": "8bfbcb4bfa23",
  "newUi.sidebar.userProfile.accentColorLabel": "2bef525f9fb9",
+  "newUi.sidebar.userProfile.apiKeyCount_one": "88a9751309dc",
  "newUi.sidebar.userProfile.colorPickerTooltip": "402f95aeba34",
  "newUi.sidebar.userProfile.themeSystem": "bc0792d8dc81",
  "newUi.sidebar.userProfile.themeLight": "a36ef8aba229",
@@ -81,6 +81,18 @@ function AdminTools({
          })}
        </Button>
      )}
+      {entry?.installed && !entry.enabled && (
+        <Button
+          size="sm"
+          onClick={() => void manager.toggle(entry).then(onRetry)}
+          disabled={manager.busy.has(entry.id)}
+        >
+          <Power />
+          {status.reason === "disabled"
+            ? t("looks.repair.enable", { name: entry.name })
+            : t("looks.repair.startAgain", { name: entry.name })}
+        </Button>
+      )}
      {entry?.installed && entry.enabled && !entry.managedByServer && (
        <Button
          size="sm"
@@ -79,13 +79,15 @@ export function layoutStatus(input: LayoutStatusInput): LayoutStatus {
  const owner = input.owner;
  if (!owner) return repair("missing");
  const summary = owner.summary;
-  if (!summary.enabled) return repair("disabled");
+  // Before the enabled check: the server reports a plugin that failed to
+  // start as not enabled, which hid the real error behind "turned off".
  if (owner.frontend === "blocked" || summary.state === "blocked") {
    return repair("blocked", { error: owner.error ?? summary.lastError });
  }
  if (owner.frontend === "failed" || summary.state === "failed") {
    return repair("failed", { error: owner.error ?? summary.lastError });
  }
+  if (!summary.enabled) return repair("disabled");
  if (owner.frontend === "loading") return { kind: "loading" };
  // Just chosen: the runtime is about to load its code.
  if (
@@ -289,6 +289,7 @@ export {
  PanelShell,
  Segmented,
  ViewToggle,
+  type GridSize,
  type PanelDensity,
  type PanelViewMode,
 } from "@/components/panel-layout";
@@ -5,7 +5,6 @@ import {
  Check,
  ChevronLeft,
  ChevronRight,
-  Columns3,
  Download,
  Globe,
  Library,
@@ -37,7 +36,9 @@ import {
  GroupHeading,
  PANEL,
  PanelShell,
+  GRID_SIZES,
  ViewToggle,
+  type GridSize,
  type PanelViewMode,
 } from "@/components/panel-layout";
 import { DataView, type DataColumn } from "@/components/data-view";
@@ -72,9 +73,6 @@ import { DocsLink } from "@/components/docs-link";

 type Section = "installed" | "browse" | "updates" | "registries";

-const GRID_SIZES = ["auto", "2", "3", "4", "5", "6"] as const;
-type GridSize = (typeof GRID_SIZES)[number];
-
 interface Layout {
  view: PanelViewMode;
  columns: GridSize;
@@ -364,54 +362,16 @@ function LayoutControls({
  onView: (next: PanelViewMode) => void;
  onColumns: (next: GridSize) => void;
 }) {
-  const { t } = useTranslation();
  return (
-    <>
-      {layout.view === "grid" && (
-        <Select
-          value={layout.columns}
-          onValueChange={(v) => onColumns(v as GridSize)}
-        >
-          <SelectTrigger
-            size="sm"
-            className="w-auto gap-1.5 text-xs"
-            title={t("plugins.manager.columns.title")}
-            aria-label={t("plugins.manager.columns.title")}
-          >
-            <Columns3 className="size-3.5 text-muted-foreground" />
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {GRID_SIZES.map((size) => (
-              <SelectItem key={size} value={size} className="text-xs">
-                {size === "auto"
-                  ? t("plugins.manager.columns.auto")
-                  : t("plugins.manager.columns.count", { count: Number(size) })}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      )}
-      <ViewToggle view={layout.view} onView={onView} />
-    </>
+    <ViewToggle
+      view={layout.view}
+      onView={onView}
+      columns={layout.columns}
+      onColumns={onColumns}
+    />
  );
 }

-// Sized off the tab's own width, not the window. Cards keep a min width,
-// so narrow panes drop columns on their own.
-function gridStyle(columns: GridSize): React.CSSProperties {
-  if (columns === "auto") {
-    return {
-      gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 400px), 1fr))",
-    };
-  }
-  const n = Number(columns);
-  const gaps = (n - 1) * 12;
-  return {
-    gridTemplateColumns: `repeat(auto-fill, minmax(max(220px, calc((100% - ${gaps}px) / ${n} - 0.5px)), 1fr))`,
-  };
-}
-
 function PluginCollection({
  plugins,
  layout,
@@ -440,13 +400,17 @@ function PluginCollection({
    );
  }
  return (
-    <div className="grid gap-3" style={gridStyle(layout.columns)}>
-      {plugins.map((p) => (
-        <div key={p.id} className="flex flex-col *:flex-1">
-          {renderCard(p)}
-        </div>
-      ))}
-    </div>
+    <DataView
+      items={plugins}
+      view="grid"
+      getKey={(p) => p.id}
+      renderCard={renderCard}
+      columns={{}}
+      size={layout.columns}
+      minCardWidth={400}
+      listColumns={listColumns}
+      empty={null}
+    />
  );
 }

@@ -34,6 +34,24 @@ describe("DataView", () => {
    expect(screen.queryByText("Name")).toBeNull();
  });

+  it("uses the picked size over breakpoint columns", () => {
+    const { container } = render(
+      <DataView
+        items={items}
+        view="grid"
+        getKey={(item) => item.id}
+        renderCard={(item) => <div>card {item.name}</div>}
+        columns={{ base: 1, md: 2 }}
+        size="3"
+        listColumns={[]}
+        empty={null}
+      />,
+    );
+    const grid = container.firstElementChild as HTMLElement;
+    expect(grid.className).not.toContain("md:grid-cols-2");
+    expect(grid.style.gridTemplateColumns).toContain("/ 3");
+  });
+
  it("renders a header and clickable rows in list mode", () => {
    const onRowClick = vi.fn();
    renderView("list", onRowClick);
@@ -11,6 +11,7 @@ import {
  PanelShell,
  Segmented,
  ViewToggle,
+  gridSizeStyle,
 } from "@/components/panel-layout";

 afterEach(cleanup);
@@ -72,6 +73,34 @@ describe("ViewToggle", () => {
    fireEvent.click(screen.getByLabelText("panel.compactRows"));
    expect(onDensity).toHaveBeenCalledWith("compact");
  });
+
+  it("shows the columns picker only in grid view", () => {
+    const props = { onView: vi.fn(), columns: "auto" as const };
+    const { rerender } = render(
+      <ViewToggle view="grid" {...props} onColumns={vi.fn()} />,
+    );
+    expect(screen.getByLabelText("panel.columns.title")).toBeTruthy();
+
+    rerender(<ViewToggle view="list" {...props} onColumns={vi.fn()} />);
+    expect(screen.queryByLabelText("panel.columns.title")).toBeNull();
+
+    rerender(<ViewToggle view="grid" {...props} />);
+    expect(screen.queryByLabelText("panel.columns.title")).toBeNull();
+  });
+});
+
+describe("gridSizeStyle", () => {
+  it("fits auto cards to the pane", () => {
+    expect(gridSizeStyle("auto", 280).gridTemplateColumns).toBe(
+      "repeat(auto-fill, minmax(min(100%, 280px), 1fr))",
+    );
+  });
+
+  it("splits the width for a fixed count", () => {
+    expect(gridSizeStyle("4").gridTemplateColumns).toContain(
+      "(100% - 3 * 0.5rem) / 4",
+    );
+  });
 });

 describe("Facts", () => {
@@ -53,6 +53,8 @@ vi.mock("@/look/use-look-theme", () => ({
  useChooseTheme: () => look.chooseTheme,
 }));

+const fancy = vi.hoisted(() => ({ enabled: true }));
+
 const manager = vi.hoisted(() => ({
  requestUpdate: vi.fn(),
  requestInstall: vi.fn(),
@@ -72,7 +74,7 @@ vi.mock("@/plugins/use-plugins-manager", () => ({
        id: "fancy-layout",
        name: "Fancy",
        installed: true,
-        enabled: true,
+        enabled: fancy.enabled,
        updateAvailable: true,
        latestVersion: "1.1.0",
        managedByServer: false,
@@ -115,6 +117,7 @@ const onRetry = vi.fn();

 beforeEach(() => {
  permissions.isAdmin = true;
+  fancy.enabled = true;
  for (const fn of [
    ...Object.values(look),
    ...Object.values(manager),
@@ -190,6 +193,31 @@ describe("RepairView", () => {
    );
  });

+  it("lets an admin turn the plugin back on and then tries again", async () => {
+    fancy.enabled = false;
+    manager.toggle.mockResolvedValue(undefined);
+    render(
+      <RepairView
+        status={{ ...status, reason: "disabled", error: null }}
+        onRetry={onRetry}
+      />,
+    );
+    expect(screen.queryByText(/looks\.repair\.disable/)).toBeNull();
+    fireEvent.click(screen.getByText('looks.repair.enable:{"name":"Fancy"}'));
+    expect(manager.toggle).toHaveBeenCalledWith(
+      expect.objectContaining({ id: "fancy-layout", enabled: false }),
+    );
+    await waitFor(() => expect(onRetry).toHaveBeenCalled());
+  });
+
+  it("offers to start a failed plugin again", () => {
+    fancy.enabled = false;
+    render(<RepairView status={status} onRetry={onRetry} />);
+    expect(
+      screen.getByText('looks.repair.startAgain:{"name":"Fancy"}'),
+    ).toBeTruthy();
+  });
+
  it("lets an admin restore the bundled copy and then tries again", async () => {
    render(<RepairView status={status} onRetry={onRetry} />);
    fireEvent.click(screen.getByText('looks.repair.restore:{"name":"Fancy"}'));
@@ -120,6 +120,19 @@ describe("layoutStatus", () => {
    ).toMatchObject({ reason: "failed", error: "server" });
  });

+  it("says failed, not disabled, when the server could not start it", () => {
+    expect(
+      layoutStatus(
+        input({
+          owner: owner(
+            { enabled: false, state: "failed", lastError: "bad bundle" },
+            "none",
+          ),
+        }),
+      ),
+    ).toMatchObject({ reason: "failed", error: "bad bundle" });
+  });
+
  it("says incompatible when the server skipped its plugin", () => {
    expect(
      layoutStatus(
@@ -183,17 +183,13 @@ describe("PluginsTab", () => {
  it("switches to a table and remembers it", async () => {
    await renderTab();
    expect(screen.queryByRole("table")).toBeNull();
-    expect(
-      screen.getByLabelText(en.plugins.manager.columns.title),
-    ).toBeTruthy();
+    expect(screen.getByLabelText(en.panel.columns.title)).toBeTruthy();

    fireEvent.click(screen.getByLabelText(en.panel.listView));

    expect(screen.getByRole("table")).toBeTruthy();
    expect(screen.getByText(en.plugins.manager.table.version)).toBeTruthy();
-    expect(
-      screen.queryByLabelText(en.plugins.manager.columns.title),
-    ).toBeNull();
+    expect(screen.queryByLabelText(en.panel.columns.title)).toBeNull();
    expect(localStorage.getItem("pluginsTab.view")).toBe("list");

    cleanup();
Author	SHA1	Message	Date
LukeGus	5f332aa5c3	feat: add an auto or fixed columns picker to card grids	2026-10-21 21:35:25 -05:00
LukeGus	7b7b17e31f	chore: add six new plugins to the readme table	2026-10-21 16:25:59 -05:00
LukeGus	53c4e5fe9c	fix: let the repair screen turn the layout plugin back on	2026-10-21 11:55:50 -05:00
LukeGus	28cb1bc554	feat: make all buttons brand orange and lint against white ones	2026-10-21 10:44:53 -05:00
LukeGus	b691d4f7cb	fix: retry dmg detach in macOS sharp check	2026-10-21 09:54:43 -05:00
Luke Gustafson	a65b4a5d48	v26.10.4 (#1701 ) * Update package.json * chore: lint, format, and bump version to 26.10.4	2026-10-21 08:40:42 -05:00
Luke Gustafson	abaf89b732	Update package version from 26.10.3 to 26.10.4	2026-10-21 08:31:57 -05:00
Luke Gustafson	72d868afc7	Update CHANGELOG.md	2026-10-21 08:30:07 -05:00
LukeGus	d35304e107	chore: bump Homebrew cask to 26.10.3	2026-10-21 01:06:39 +00:00
LukeGus	f4d87ddd8d	fix: pin classic layout 1.0.1	2026-10-20 18:58:00 -05:00
LukeGus	4d7385f51d	fix: pin the classic layout title bar fix	2026-10-20 18:52:58 -05:00
LukeGus	d3fc32928b	chore: bump Homebrew cask to 26.10.3	2026-10-20 22:42:52 +00:00
LukeGus	1533c6837a	fix: start npm through a shell in the windows sharp install	2026-10-20 16:56:04 -05:00
Luke Gustafson SirHephaistos Giovanny Aranda	a89ccc6b07	v26.10.3 (#1692 ) * feat: shell controller, TabStage, layout and theme plugins with repair view * feat: move the classic layout into its own bundled plugin * feat: move color themes into a bundled themes plugin * fix: plugin tests and type checks work with a linked sdk * fix: home tab, layout switch and missing layout fallbacks for looks * chore: add classic layout and themes to the readme * chore: drop example plugin links from the plugin guide * feat: plugin filters by type, paged browse, hide plugins needing newer termix * feat: move desktop, status, import, audit and branding features into plugins * feat: host lock api so a plugin can load hosts from a config file (#1581) * chore: add hosts config to the plugin table * feat: login policy hook for plugins and optional https redirect (#1584) * chore: add login security to the plugin table * feat: api key socket tickets so a master can open remote sessions (#1654) * feat: sync moves to a plugin, desktop gets multiple accounts (#1580, #1654) * chore: add sync to the plugin table * feat: move the sync screens and wizard out of core into the plugin (#1580) * fix: add a neutral linked desktop hook for plugins (#1580) * fix: show the linked account's name and admin flag in the app (#1580) * feat: ssh transport providers, core ssh relay and plugin folders api * feat: support FIDO2 security keys through ssh agent * feat: add companion panels beside host tabs * feat: mTLS client certificates for desktop server links * feat: native web view for plugins in the desktop app * fix: detect the desktop link window by Electron's default user agent Fixes #1675 * fix: changelog for desktop link fix * fix: keep text primary keys in the plugin data export * fix: ship sharp binaries for Windows arm64 builds * feat: client cert on the sync link types (sdk 1.0.18) * chore: update translations * feat: themed title bar for the desktop app (#1690) * chore: changelog for the themed title bar * fix: draw the title bar in the sidebar color * feat: per host layout for the terminal panel bar * chore: sdk 1.0.19 for the panel bar layout * chore: bundle all 43 plugins for 26.10.3 * chore: update translations --------- Co-authored-by: SirHephaistos <60616553+SirHephaistos@users.noreply.github.com> Co-authored-by: Giovanny Aranda <garanda21@gmail.com>	2026-10-20 16:03:29 -05:00