@termix-ssh/plugin-sdk 1.0.19 → 1.0.21

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 1.0.21
+
+Plugin API 1.12.0.
+
+### Added
+
+- `@termix-ssh/plugin-sdk/host-scripts`: Docker, Linux metrics, systemd, journal and OpenRC command builders and parsers, plus `scriptShell()` and `passwordSudoScript()` to send scripts to `bash -s` on stdin. It has no Node or ssh2 imports, so the Termix mobile app runs the same code
+
+## 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.

package/PLUGIN-GUIDE.md

@@ -1,6 +1,6 @@
 # Termix plugin guide
 
-SDK 1.0.19 | Plugin API 1.11.0
+SDK 1.0.21 | 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.
@@ -335,7 +335,9 @@ try {
 
 `ctx.ssh.withConnection(hostId, { pool, purpose }, fn)` borrows a pooled connection for frequent short
 commands. `@termix-ssh/plugin-sdk/host-commands` has helpers to detect the OS and run package manager and
-sudo commands. Hosts from `ctx.hosts` never carry secrets. Pass the host or its id to `ctx.ssh`.
+sudo commands. `@termix-ssh/plugin-sdk/host-scripts` builds Docker, metrics, systemd and journal
+commands and parses their output; send a script on stdin to the command `scriptShell()` returns. Hosts from
+`ctx.hosts` never carry secrets. Pass the host or its id to `ctx.ssh`.
 
 ### The desktop app
 
@@ -643,6 +645,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
@@ -902,6 +907,7 @@ To run your own registry instead, see https://docs.termix.site/develop/registrie
 | `@termix-ssh/plugin-sdk/testing`                                     | `createMockCtx`, `createTestDb`, `renderWithApp`, `createFakeContext`                          |
 | `@termix-ssh/plugin-sdk/vitest-preset`                               | `pluginVitestConfig`                                                                           |
 | `@termix-ssh/plugin-sdk/host-commands`                               | OS detection, package manager and sudo helpers over ssh2                                       |
+| `@termix-ssh/plugin-sdk/host-scripts`                                | Docker, metrics, systemd and journal command builders and parsers, scripts sent to `bash -s`   |
 | `@termix-ssh/plugin-sdk/ssh-certs`                                   | `applyCertificateAuth()` for certificate based SSH auth                                        |
 | `@termix-ssh/plugin-sdk/ssh-keys`                                    | `generateSshKeyPair()`, `detectSshKeyType()`, `publicKeyFromPrivate()`, `validateSshKeyPair()` |
 | `@termix-ssh/plugin-sdk/desktop`                                     | The desktop app bridge, typed. Check it exists before use                                      |

package/dist/frontend.d.ts

@@ -1426,17 +1426,21 @@ export declare function usePluginUiPreferences<T extends Record<string, unknown>
     values: T;
     set: <K extends keyof T & string>(key: K, value: T[K] | null) => void;
 };
+type PanelGridSize = "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 declare function usePluginPanelView(prefix?: string): {
     view: "grid" | "list";
     density: "comfortable" | "compact";
     compact: boolean;
+    columns: PanelGridSize;
     setView: (view: "grid" | "list") => void;
     setDensity: (density: "comfortable" | "compact") => void;
+    setColumns: (columns: PanelGridSize) => void;
 };
 export declare function useTabs(): TabsApi;
 /**

package/dist/frontend.js

@@ -165,21 +165,37 @@ export function usePluginUiPreferences() {
     const bridge = requireHost();
     return bridge.usePluginUiPreferences(bridge.usePluginId());
 }
+const PANEL_GRID_SIZES = [
+    "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 = "") {
     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
+        : "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),
     };
 }
 export function useTabs() {

package/dist/host/{PluginsTab-YAGYRBIE.js → PluginsTab-HQGSDSHS.js}

@@ -29,7 +29,7 @@ import {
   sortPlugins,
   uploadEntry,
   youtubeEmbedUrl
-} from "./chunk-446UEDSK.js";
+} from "./chunk-WWFRBU2E.js";
 import {
   ArrowDownWideNarrow,
   BookOpen,
@@ -38,7 +38,6 @@ import {
   Check,
   ChevronLeft,
   ChevronRight,
-  Columns3,
   DEVELOPER_MODE_CHANGED_EVENT,
   Database,
   DocsLink,
@@ -47,6 +46,7 @@ import {
   Facts,
   FakeSwitch,
   FlaskConical,
+  GRID_SIZES,
   Globe,
   GroupHeading,
   InlineView,
@@ -107,8 +107,8 @@ import {
   updatePlugin,
   uploadPlugin,
   useConfirm
-} from "./chunk-LQKK2JJA.js";
-import "./chunk-7LEJ3HYF.js";
+} from "./chunk-GTHINW3L.js";
+import "./chunk-JFQGI4OD.js";
 import {
   __toESM,
   define_import_meta_env_default,
@@ -1845,7 +1845,6 @@ function usePluginsManager() {
 
 // src/ui/plugins/PluginsTab.tsx
 import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-var GRID_SIZES = ["auto", "2", "3", "4", "5", "6"];
 function useStoredChoice(key, allowed, fallback) {
   const [value, setValue] = useState5(() => {
     try {
@@ -2075,45 +2074,15 @@ function LayoutControls({
   onView,
   onColumns
 }) {
-  const { t } = useTranslation7();
-  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
-    layout.view === "grid" && /* @__PURE__ */ jsxs6(
-      Select,
-      {
-        value: layout.columns,
-        onValueChange: (v) => onColumns(v),
-        children: [
-          /* @__PURE__ */ jsxs6(
-            SelectTrigger,
-            {
-              size: "sm",
-              className: "w-auto gap-1.5 text-xs",
-              title: t("plugins.manager.columns.title"),
-              "aria-label": t("plugins.manager.columns.title"),
-              children: [
-                /* @__PURE__ */ jsx6(Columns3, { className: "size-3.5 text-muted-foreground" }),
-                /* @__PURE__ */ jsx6(SelectValue, {})
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx6(SelectContent, { children: GRID_SIZES.map((size) => /* @__PURE__ */ jsx6(SelectItem, { value: size, className: "text-xs", children: size === "auto" ? t("plugins.manager.columns.auto") : t("plugins.manager.columns.count", { count: Number(size) }) }, size)) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx6(ViewToggle, { view: layout.view, onView })
-  ] });
-}
-function gridStyle(columns) {
-  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))`
-  };
+  return /* @__PURE__ */ jsx6(
+    ViewToggle,
+    {
+      view: layout.view,
+      onView,
+      columns: layout.columns,
+      onColumns
+    }
+  );
 }
 function PluginCollection({
   plugins,
@@ -2137,7 +2106,20 @@ function PluginCollection({
       }
     );
   }
-  return /* @__PURE__ */ jsx6("div", { className: "grid gap-3", style: gridStyle(layout.columns), children: plugins.map((p) => /* @__PURE__ */ jsx6("div", { className: "flex flex-col *:flex-1", children: renderCard(p) }, p.id)) });
+  return /* @__PURE__ */ jsx6(
+    DataView,
+    {
+      items: plugins,
+      view: "grid",
+      getKey: (p) => p.id,
+      renderCard,
+      columns: {},
+      size: layout.columns,
+      minCardWidth: 400,
+      listColumns,
+      empty: null
+    }
+  );
 }
 function NameCell({ plugin, muted }) {
   return /* @__PURE__ */ jsxs6("div", { className: "flex min-w-0 items-center gap-2", children: [
@@ -2699,7 +2681,7 @@ function InstalledCard({
       )
     ] }) : !running ? /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 border-t border-border px-3 py-2", children: [
       /* @__PURE__ */ jsx6("span", { className: "size-1.5 shrink-0 bg-muted-foreground/40" }),
-      /* @__PURE__ */ jsx6("span", { className: "text-[11px] text-muted-foreground", children: plugin.status === "server" ? t("plugins.manager.status.server") : t("plugins.manager.status.disabled") })
+      /* @__PURE__ */ jsx6("span", { className: "text-[11px] text-muted-foreground", children: plugin.status === "server" ? t("plugins.manager.status.server") : plugin.status === "safeMode" ? t("plugins.manager.status.safeMode") : t("plugins.manager.status.disabled") })
     ] }) : /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 border-t border-border px-3 py-2", children: [
       /* @__PURE__ */ jsx6("span", { className: "size-1.5 shrink-0 bg-green-500" }),
       /* @__PURE__ */ jsx6("span", { className: "text-[11px] text-muted-foreground", children: plugin.pinnedVersion ? t("plugins.manager.pinnedTo", {
@@ -2777,7 +2759,9 @@ function StatusCell({ plugin }) {
   const { t } = useTranslation7();
   const running = plugin.status === "running";
   const failed = plugin.status === "failed" || plugin.status === "blocked";
-  const label = plugin.status === "blocked" ? t("plugins.manager.status.blocked") : failed ? t("plugins.manager.status.failed") : plugin.status === "server" ? t("plugins.manager.status.server") : !running ? t("plugins.manager.status.disabled") : plugin.pinnedVersion ? t("plugins.manager.pinnedTo", { version: plugin.pinnedVersion }) : t("plugins.manager.status.running");
+  const label = plugin.status === "blocked" ? t("plugins.manager.status.blocked") : failed ? t("plugins.manager.status.failed") : plugin.status === "server" ? t("plugins.manager.status.server") : plugin.status === "safeMode" ? t("plugins.manager.status.safeMode") : !running ? t("plugins.manager.status.disabled") : plugin.pinnedVersion ? t("plugins.manager.pinnedTo", {
+    version: plugin.pinnedVersion
+  }) : t("plugins.manager.status.running");
   return /* @__PURE__ */ jsxs6(
     "span",
     {

package/dist/host/{chunk-MYBONEWZ.js → chunk-A5CULDWV.js}

@@ -3,7 +3,7 @@ import {
   hasPermission,
   resetPermissionsCache,
   usePermissions
-} from "./chunk-2MU6WNSX.js";
+} from "./chunk-FGX27MAA.js";
 import {
   ArrowDownToLine,
   ArrowLeftToLine,
@@ -83,7 +83,7 @@ import {
   withIconBoundary,
   withPluginContext,
   withPluginScope
-} from "./chunk-LQKK2JJA.js";
+} from "./chunk-GTHINW3L.js";
 import {
   SYNC_CHANGED_EVENT,
   TRUST_TOKEN_KEY,
@@ -132,7 +132,7 @@ import {
   usePluginStore,
   useTabTypes,
   websocketAuthProtocols
-} from "./chunk-7LEJ3HYF.js";
+} from "./chunk-JFQGI4OD.js";
 import {
   define_import_meta_env_default,
   init_define_import_meta_env
@@ -1144,6 +1144,10 @@ var en_default = {
     ready: "Termix {{version}} is ready to install",
     readyHint: "It installs the next time Termix restarts."
   },
+  safeMode: {
+    title: "Safe mode",
+    description: "Only layout and theme plugins are running. Restart the server without TERMIX_SAFE_MODE to turn the rest back on."
+  },
   companion: {
     close: "Close panel",
     moveSide: "Move panel",
@@ -2007,6 +2011,8 @@ var en_default = {
       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",
@@ -2218,7 +2224,8 @@ var en_default = {
         disabled: "Disabled",
         failed: "Stopped unexpectedly",
         blocked: "Waiting on another plugin",
-        server: "Runs on your server"
+        server: "Runs on your server",
+        safeMode: "Off in safe mode"
       },
       groups: {
         running: "Running",
@@ -2232,11 +2239,6 @@ var en_default = {
         updated: "Recently updated",
         category: "Category"
       },
-      columns: {
-        title: "Columns",
-        auto: "Auto",
-        count: "{{count}} wide"
-      },
       table: {
         name: "Name",
         description: "Description",
@@ -2561,7 +2563,12 @@ var en_default = {
     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."
@@ -10261,7 +10268,7 @@ function CompanionLayout({
 // src/ui/shell/tabUtils.tsx
 import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 var PluginsTab = lazy(
-  () => import("./PluginsTab-YAGYRBIE.js").then((m) => ({ default: m.PluginsTab }))
+  () => import("./PluginsTab-HQGSDSHS.js").then((m) => ({ default: m.PluginsTab }))
 );
 function preloadTabSurface(type) {
   const loader = getTabType(type)?.preload;

package/dist/host/{chunk-2MU6WNSX.js → chunk-FGX27MAA.js}

@@ -26,7 +26,7 @@ var inFlight = null;
 function load() {
   if (cache) return Promise.resolve(cache);
   if (inFlight) return inFlight;
-  inFlight = import("./rbac-api-LZVENREG.js").then(({ getMyPermissions }) => getMyPermissions()).then((result) => {
+  inFlight = import("./rbac-api-AAAPMF52.js").then(({ getMyPermissions }) => getMyPermissions()).then((result) => {
     cache = {
       permissions: result.permissions ?? [],
       isAdmin: !!result.isAdmin