feat: add host sections, tab embeds and the operations client to the plugin ui

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "termix",
-  "version": "26.11.0",
+  "version": "26.11.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "termix",
-      "version": "26.11.0",
+      "version": "26.11.1",
       "hasInstallScript": true,
       "workspaces": [
         "packages/*"

package.json

@@ -4,7 +4,7 @@
   "workspaces": [
     "packages/*"
   ],
-  "version": "26.11.0",
+  "version": "26.11.1",
   "description": "Self-hosted, plugin-based server management.",
   "author": "Karmaa",
   "main": "electron/main.cjs",

packages/plugin-sdk/CHANGELOG.md

@@ -10,6 +10,8 @@ Plugin API 1.14.0.
 - `ctx.operations` registers handlers, runs other plugins' declared actions, emits events and provides approval rules, with the new `operations:provide`, `operations:invoke` and `operations:approve` capabilities
 - `@termix-ssh/plugin-sdk/operations` has the types, input checks, redaction and JSON Schema for declared actions
 - `contributes.hostSections` declares cards for the host page
+- `app.registerHostSection` adds a card to the host page
+- `/ui` exports `HostTabEmbed`, which draws any tab type inside another view, the host section registry, and `operationsApi` for core's `/operations` routes
 
 ## 1.0.22
 

packages/plugin-sdk/src/frontend.ts

@@ -670,6 +670,22 @@ export type HostStatusIndicatorContribution = HostBadgeContribution;
 /** A control in the host editor's toolbar. */
 export type HostEditorToolbarItemContribution = HostBadgeContribution;
 
+export interface HostSectionProps {
+  host: PluginHostRecord;
+  isVisible: boolean;
+  shell: ShellApi;
+}
+
+export interface HostSectionContribution {
+  /** Declare it in manifest contributes.hostSections too. */
+  id: string;
+  titleKey: string;
+  /** Lower sorts first. */
+  order?: number;
+  when?: (host: PluginHostRecord) => boolean;
+  component: ComponentType<HostSectionProps>;
+}
+
 export interface HostContextMenuItemContribution {
   id: string;
   titleKey: string;
@@ -1172,6 +1188,11 @@ export interface TermixApp extends TermixAppInfo {
   registerHostContextMenuItem: (
     item: HostContextMenuItemContribution,
   ) => Disposer;
+  /**
+   * A card on the host page. Core 26.11.1 and newer; call it as
+   * app.registerHostSection?.(...) if your plugin allows older cores.
+   */
+  registerHostSection: (section: HostSectionContribution) => Disposer;
   registerPaletteEntry: (entry: PaletteEntryContribution) => Disposer;
   registerPaletteGroup: (group: PaletteGroupContribution) => Disposer;
   registerKeybindingAction: (action: KeybindingActionContribution) => Disposer;

packages/plugin-sdk/ui.api.txt

@@ -159,8 +159,10 @@ HostProtocolAuthInput (type): HostProtocolAuthInput
 HostProtocolDef (type): HostProtocolDef
 HostProtocols (type): HostProtocols
 HostRowFields (type): HostRowFields
+HostSectionDef (type): HostSectionDef
 HostSidebarFilterState (type): HostSidebarFilterState
 HostSidebarPreferences (type): HostSidebarPreferences
+HostTabEmbed (value): ({ host, type, label, data, isVisible, shell, }: { host: Host; type: string; label?: string; data?: Record<string, unknown>; isVisible?: boolean; shell: TabShellCallbacks; }) => Element
 HostTrayTrigger (type): HostTrayTrigger
 HttpsSettings (type): HttpsSettings
 IconPicker (value): ({ value, color, onChange, }: { value: string; color?: string; onChange: (icon: string) => void; }) => Element
@@ -457,6 +459,7 @@ hostBadgesFor (value): (all: HostBadgeDef[], host: Host) => HostBadgeDef[]
 hostEditorToolbarItemsFor (value): (all: HostBadgeDef[], host: Host) => HostBadgeDef[]
 hostMenuItemsFor (value): (all: HostContextMenuItemDef[], host: Host) => HostContextMenuItemDef[]
 hostProtocolFlags (value): (host: { enableSsh?: boolean; pluginSettings?: Record<string, Record<string, unknown>>; }, list?: HostProtocolDef[]) => HostProtocols
+hostSectionsFor (value): (all: HostSectionDef[], host: Host) => HostSectionDef[]
 hostStatusIndicatorsFor (value): (all: HostBadgeDef[], host: Host) => HostBadgeDef[]
 hydrateLocalSharedHostAuth (value): <T>(host: T) => Promise<T>
 invalidateHostsAndStatusCaches (value): () => void
@@ -475,6 +478,7 @@ linkExternalToPasswordAccount (value): (externalUserId: string, targetUsername:
 linkedServerUrl (value): () => Promise<string>
 listHostActions (value): () => HostActionDef[]
 listHostProtocols (value): () => HostProtocolDef[]
+listHostSections (value): () => HostSectionDef[]
 loadPaletteGroup (value): (group: PaletteGroupDef) => Promise<PaletteItemDef[]>
 logoutUser (value): () => Promise<{ success: boolean; message: string; }>
 makeHostSshSubTabs (value): (t: (key: string, options?: { defaultValue?: string; }) => string, protocols?: Record<string, boolean>, defaultsMode?: boolean) => HostTab[]
@@ -488,6 +492,7 @@ moveSplitDrag (value): (x: number, y: number) => void
 normalizeLanguageCode (value): (language?: string) => string
 notifySyncChanged (value): () => void
 openInSplit (value): (target: SplitOpenTarget, open: () => void) => void
+operationsApi (value): AxiosInstance
 paletteEntriesFor (value): (all: PaletteEntryDef[], scope: "global" | "host", host?: Host) => PaletteEntryDef[]
 parseCustomKeybindings (value): (raw?: string) => CustomKeybinding[]
 parseServerTime (value): (ts: string) => Date
@@ -598,6 +603,7 @@ useHostContextMenuItems (value): () => HostContextMenuItemDef[]
 useHostEditorSections (value): () => HostEditorSectionDef[]
 useHostEditorToolbarItems (value): () => HostBadgeDef[]
 useHostProtocols (value): () => HostProtocolDef[]
+useHostSections (value): () => HostSectionDef[]
 useHostStatus (value): (hostId: number, statusCheckEnabled?: boolean) => StatusValue
 useHostStatusIndicators (value): () => HostBadgeDef[]
 useInstalledPlugins (value): () => PluginSummary[]

scripts/check-sdk-ui-exports.cjs

@@ -19,6 +19,12 @@ const SDK_UI = path.join(ROOT, "src", "ui", "plugin-host", "sdk-ui.ts");
 const TSCONFIG = path.join(ROOT, "tsconfig.app.json");
 
 const ALLOWED = [
+  "useHostSections",
+  "operationsApi",
+  "listHostSections",
+  "hostSectionsFor",
+  "HostTabEmbed",
+  "HostSectionDef",
   "ACCENT_PRESET_COLORS",
   "APP_VERSION",
   "AccessRecord",

src/ui/lib/plugin-transport.ts

@@ -79,6 +79,34 @@ export function createPluginApi(pluginId: string): AxiosInstance {
   }) as AxiosInstance;
 }
 
+/**
+ * An axios client rooted at core's /operations routes: the action catalog,
+ * runs, approvals, events, signals and cross host resources.
+ */
+export function createOperationsApi(): AxiosInstance {
+  return new Proxy(authApi, {
+    get(target, property, receiver) {
+      const value = Reflect.get(target, property, receiver);
+      if (typeof value !== "function") return value;
+      if (
+        property === "get" ||
+        property === "delete" ||
+        property === "post" ||
+        property === "put" ||
+        property === "patch"
+      ) {
+        return (url: string, ...rest: unknown[]) =>
+          (value as (...args: unknown[]) => unknown).call(
+            target,
+            `/operations${url.startsWith("/") ? url : `/${url}`}`,
+            ...rest,
+          );
+      }
+      return value.bind(target);
+    },
+  }) as AxiosInstance;
+}
+
 /**
  * A raw fetch on this plugin's /plugin-api mount point, for a response the
  * caller reads as a stream (server-sent events). axios buffers the whole

src/ui/plugin-host/app.ts

@@ -41,6 +41,10 @@ import {
   type KeybindingEditorProps,
 } from "@/shell/keybinding-registry";
 import { registerHostProtocol } from "@/sidebar/host-protocols";
+import {
+  registerHostSection,
+  type HostSectionRenderProps,
+} from "@/shell/host-sections";
 import {
   registerDashboardCard,
   type DashboardCardRenderProps,
@@ -424,6 +428,21 @@ export function createPluginApp(
       );
     },
 
+    registerHostSection(section) {
+      return track(
+        registerHostSection({
+          id: section.id,
+          pluginId,
+          titleKey: key(section.titleKey),
+          order: section.order,
+          when: hostCallback(section.when ?? (() => true)) as never,
+          component: scoped(
+            section.component as unknown as ComponentType<HostSectionRenderProps>,
+          ),
+        }),
+      );
+    },
+
     registerHostContextMenuItem(item) {
       return track(
         registerHostContextMenuItem({

src/ui/plugin-host/sdk-ui.ts

@@ -823,3 +823,13 @@ export {
   rightDockableIds,
   useRailItems,
 } from "@/sidebar/rail-items";
+export {
+  hostSectionsFor,
+  type HostSectionDef,
+  listHostSections,
+  useHostSections,
+} from "@/shell/host-sections";
+export { HostTabEmbed } from "@/shell/HostTabEmbed";
+import { createOperationsApi } from "@/lib/plugin-transport";
+/** Core's /operations routes, with the user's own session. */
+export const operationsApi = createOperationsApi();

src/ui/plugin-host/testing-host.tsx

@@ -471,6 +471,7 @@ export {
   resetHostContributions,
 } from "@/sidebar/host-contributions";
 export { registerHostProtocol } from "@/sidebar/host-protocols";
+export { registerHostSection, resetHostSections } from "@/shell/host-sections";
 export {
   RAIL_ITEMS,
   registerRailItem,

src/ui/shell/HostTabEmbed.tsx

@@ -0,0 +1,45 @@
+import { useMemo } from "react";
+import type { Host, Tab } from "@/types/ui-types";
+import type { TabShellCallbacks } from "@/shell/tab-registry";
+import { renderTabContent } from "@/shell/tabUtils";
+
+/**
+ * Draws a registered tab type inside another view, such as a host page, with
+ * the same props the tab stage gives it. The embed has its own instance id, so
+ * it never collides with the same tool opened as a normal tab.
+ */
+export function HostTabEmbed({
+  host,
+  type,
+  label,
+  data,
+  isVisible = true,
+  shell,
+}: {
+  host: Host;
+  type: string;
+  label?: string;
+  data?: Record<string, unknown>;
+  isVisible?: boolean;
+  shell: TabShellCallbacks;
+}) {
+  const tab = useMemo<Tab>(
+    () => ({
+      id: `embed-${type}-${host.id}`,
+      instanceId: `embed-${type}-${host.id}`,
+      type,
+      label: label ?? host.name ?? host.ip,
+      host,
+      openedAt: Date.now(),
+      data,
+    }),
+    // A new host or tool is a new tab; label and data changes keep it.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [type, host.id],
+  );
+  return (
+    <div className="h-full min-h-0 flex flex-col">
+      {renderTabContent(tab, { shell, isVisible, isFocusedPane: isVisible })}
+    </div>
+  );
+}

src/ui/shell/host-sections.ts

@@ -0,0 +1,43 @@
+import type { ComponentType } from "react";
+import type { Host } from "@/types/ui-types";
+import { byOrderThenId, createRegistry } from "@/lib/registry";
+import type { TabShellCallbacks } from "@/shell/tab-registry";
+
+export interface HostSectionRenderProps {
+  host: Host;
+  isVisible: boolean;
+  shell: TabShellCallbacks;
+}
+
+/**
+ * A card a plugin adds to a host page. The page itself belongs to a plugin;
+ * core only keeps the list so any plugin can fill it.
+ */
+export interface HostSectionDef {
+  id: string;
+  pluginId?: string;
+  titleKey: string;
+  order?: number;
+  when: (host: Host) => boolean;
+  component: ComponentType<HostSectionRenderProps>;
+}
+
+const sections = createRegistry<HostSectionDef>(byOrderThenId);
+
+export const registerHostSection = sections.register;
+export const useHostSections = sections.useList;
+export const listHostSections = sections.list;
+export const resetHostSections = sections.reset;
+
+export function hostSectionsFor(
+  all: HostSectionDef[],
+  host: Host,
+): HostSectionDef[] {
+  return all.filter((section) => {
+    try {
+      return section.when(host);
+    } catch {
+      return false;
+    }
+  });
+}