feat: shell controller, TabStage, layout and theme plugins with repair view

packages/plugin-sdk/src/capabilities.ts

@@ -49,6 +49,7 @@ export const CAPABILITY_CATALOG: readonly CapabilityInfo[] = [
   entry("auth:provide", "high"),
   entry("device:serial", "high"),
   entry("notify:hub", "high"),
+  entry("ui:layout", "high"),
 
   entry("hosts:write", "medium"),
   entry("credentials:use", "medium"),
@@ -70,6 +71,7 @@ export const CAPABILITY_CATALOG: readonly CapabilityInfo[] = [
   entry("settings:read-core", "low"),
   entry("plugins:read", "low"),
   entry("ui:surface", "low"),
+  entry("ui:theme", "low"),
 ] as const;
 
 export const CAPABILITY_IDS: readonly string[] = CAPABILITY_CATALOG.map(

packages/plugin-sdk/src/frontend.ts

@@ -248,6 +248,129 @@ export interface TabsApi extends Pick<
   onReady: (listener: () => void) => Disposer;
 }
 
+// ---------------------------------------------------------------------------
+// Layouts (plugin API 1.4)
+// ---------------------------------------------------------------------------
+
+/**
+ * A whole-app layout. Core renders the chosen one inside its providers and an
+ * error boundary; everything it shows comes from useShell(). Declare it in
+ * manifest contributes.layouts and add the ui:layout capability.
+ */
+export interface LayoutContribution {
+  id: string;
+  /** Your own i18n key or plain text, the same as the manifest's label. */
+  label: string;
+  component: ComponentType;
+  /** Shown on phones and narrow windows. The desktop app never uses it. */
+  mobileComponent?: ComponentType;
+  /** Theme to start with when nobody chose one. */
+  defaultTheme?: string;
+}
+
+/** A tab as a layout sees it. Splits are tabs too, with a `split` field. */
+export interface ShellTabState extends PluginTabRecord {
+  instanceId: string;
+  customLabel?: string;
+  /** Set while the tab sits in a split pane. */
+  parentSplitTabId?: string;
+  openedAt?: number;
+}
+
+/** What a dock region shows and how it is sized, in Normal-size pixels. */
+export interface ShellDockState {
+  view: string | null;
+  open: boolean;
+  width: number;
+  dragging: boolean;
+  setView: (view: string | null) => void;
+  setWidth: (width: number) => void;
+  /** Starts a drag from the dock's edge, from a mousedown. */
+  startResize: (event: { clientX: number; preventDefault: () => void }) => void;
+  resetWidth: () => void;
+}
+
+/** The live shell: state and actions, nothing drawn. Read with useShell(). */
+export interface ShellController {
+  tabs: {
+    list: ShellTabState[];
+    /** What a tab bar shows: tabs not sitting in a split. */
+    topLevel: ShellTabState[];
+    activeId: string;
+    /** True once saved tabs were restored after login. */
+    ready: boolean;
+    /** The user turned on tab numbers. */
+    showNumbers: boolean;
+    setActive: (id: string) => void;
+    reorder: (topLevel: ShellTabState[]) => void;
+    close: (id: string) => Promise<void>;
+    rename: (id: string, label: string) => void;
+    /** Reconnects or reloads a session tab. */
+    refresh: (id: string) => void;
+    reconnectAll: () => void;
+    openSingleton: (type: string) => string | undefined;
+  };
+  split: {
+    /** The split shown now, or null. */
+    activeId: string | null;
+    focusedPaneId: string | null;
+    /** Every split with its panes, for a split menu. */
+    summaries: Array<{
+      id: string;
+      label: string;
+      full: boolean;
+      panes: Array<{
+        id: string;
+        index: number;
+        tabId: string | null;
+        label: string | null;
+      }>;
+    }>;
+    activeFull: boolean;
+    /** Split a tab, apply a preset, unsplit, add to a pane. */
+    handleAction: (action: Record<string, unknown> & { kind: string }) => void;
+  };
+  hosts: {
+    list: PluginHostRecord[];
+    loading: boolean;
+    loaded: boolean;
+    reload: () => Promise<void>;
+  };
+  regions: {
+    left: ShellDockState & { view: string };
+    right: ShellDockState;
+    /** What a rail click does: toggles or switches the left dock. */
+    railClick: (view: string) => void;
+    openInRightDock: (view: string) => void;
+    toggleRightDock: () => void;
+  };
+  palette: { isOpen: boolean; open: () => void; close: () => void };
+  fullscreen: { active: boolean; toggle: () => void };
+  /** The same callbacks tabs and panels get. */
+  actions: ShellApi;
+  env: {
+    isMobile: boolean;
+    isElectron: boolean;
+    user: { username: string; isAdmin: boolean };
+    permissions: string[];
+    branding: {
+      appName: string | null;
+      tagline: string | null;
+      logo: string | null;
+    };
+  };
+  /** Core registries, as hooks a layout calls while rendering. */
+  registries: {
+    useRailItems: () => ReadonlyArray<{ id: string } & Record<string, unknown>>;
+    usePanels: () => ReadonlyArray<{ id: string } & Record<string, unknown>>;
+    useTabTypes: () => ReadonlyArray<{ id: string } & Record<string, unknown>>;
+    useDashboardCards: () => ReadonlyArray<
+      { id: string } & Record<string, unknown>
+    >;
+  };
+  logout: (options?: { manual?: boolean }) => void;
+}
+
 // ---------------------------------------------------------------------------
 // Registrations
 // ---------------------------------------------------------------------------
@@ -988,6 +1111,12 @@ export interface TermixApp extends TermixAppInfo {
   registerSshAuthEditor: (editor: SshAuthEditorContribution) => Disposer;
   registerLoginMethod: (method: LoginMethodContribution) => Disposer;
   registerSecondFactorUI: (factor: SecondFactorContribution) => Disposer;
+  /**
+   * A whole-app layout. Declared in manifest contributes.layouts with the
+   * ui:layout capability. Only the chosen layout's plugin is loaded, so
+   * register it in activate. Needs plugin API 1.4.
+   */
+  registerLayout: (layout: LayoutContribution) => Disposer;
 
   /**
    * Translates a key from the plugin's own locales, for code outside a
@@ -1122,6 +1251,7 @@ export interface PluginHostBridge {
   useHosts: () => { hosts: PluginHostRecord[]; loaded: boolean };
   useCurrentUser: () => CurrentUser | null;
   useTheme: () => { theme: "light" | "dark" };
+  useShell: () => ShellController | null;
   toast: ToastApi;
   getApi: (pluginId: string) => PluginApiClient;
   getApiFor: (pluginId: string, origin: unknown) => PluginApiClient;
@@ -1372,6 +1502,14 @@ export function useTheme(): { theme: "light" | "dark" } {
   return requireHost().useTheme();
 }
 
+/**
+ * The live shell, for a layout. Null outside the signed-in app. Needs plugin
+ * API 1.4.
+ */
+export function useShell(): ShellController | null {
+  return requireHost().useShell();
+}
+
 export function useToast(): ToastApi {
   return requireHost().toast;
 }

packages/plugin-sdk/src/manifest.ts

@@ -19,6 +19,7 @@ import {
   type PluginEnvVar,
 } from "./docs.js";
 
+export { validateThemeCss } from "./theme-css.js";
 export {
   ENV_NAME_PATTERN,
   MAX_ENV_DESCRIPTION_LENGTH,
@@ -36,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.3.0";
+export const PLUGIN_API_VERSION = "1.4.0";
 
 /** The API major, the default engine.api for a new plugin. */
 export const SUPPORTED_PLUGIN_API_VERSION = String(
@@ -426,6 +427,40 @@ export interface PluginAuthContribution {
   keyboardInteractive?: string[];
 }
 
+/** A layout id or theme id: short, lowercase, used as a CSS class for themes. */
+export const LOOK_ID_PATTERN = /^[a-z][a-z0-9-]{1,39}$/;
+
+/**
+ * A whole-app layout the frontend registers with app.registerLayout. Needs
+ * the ui:layout capability. Declared here so core can list and choose it
+ * before any plugin code runs.
+ */
+export interface PluginLayoutContribution {
+  id: string;
+  /** i18n key in the plugin's namespace, or plain text. */
+  label: string;
+  description?: string;
+  /** Theme picked with this layout when nobody chose one. */
+  defaultTheme?: string;
+  /** The layout a default-look plugin starts with. */
+  default?: boolean;
+}
+
+/**
+ * A theme: one CSS file of token rules scoped under `.<id>`, applied as a
+ * class on <html>. Needs the ui:theme capability. No code runs for a theme.
+ */
+export interface PluginThemeContribution {
+  id: string;
+  /** i18n key in the plugin's namespace, or plain text. */
+  label: string;
+  mode: "light" | "dark";
+  /** Path of the CSS file inside the plugin. */
+  css: string;
+  /** Colors the theme picker previews it with. */
+  swatch?: { background: string; panel: string; text: string };
+}
+
 export interface PluginContributions {
   tabs?: PluginTabContribution[];
   panels?: PluginViewContribution[];
@@ -487,6 +522,10 @@ export interface PluginContributions {
    * ctx.credentials.resolveHostProtocol.
    */
   protocols?: PluginProtocolContribution[];
+  /** Whole-app layouts. Needs the ui:layout capability. */
+  layouts?: PluginLayoutContribution[];
+  /** Themes. Needs the ui:theme capability. */
+  themes?: PluginThemeContribution[];
 }
 
 /** A field a protocol login carries besides username and password. */
@@ -708,6 +747,8 @@ const ALLOWED_CONTRIBUTES = new Set([
   "uses",
   "keybindingActions",
   "protocols",
+  "layouts",
+  "themes",
 ]);
 
 const ALLOWED_SETTINGS_FIELD = [
@@ -1300,6 +1341,111 @@ function validateContributes(
   validateUiPresets(contributes.uiPresets, errors);
   validateKeybindingActions(contributes.keybindingActions, errors);
   validateProtocols(contributes.protocols, errors);
+  validateLayouts(contributes.layouts, errors);
+  validateThemes(contributes.themes, errors);
+}
+
+/** An array of objects with unique look ids; calls `each` for every valid entry. */
+function validateLookList(
+  value: unknown,
+  field: string,
+  allowed: string[],
+  errors: string[],
+  each: (raw: Record<string, unknown>, where: string) => void,
+): void {
+  if (value === undefined) return;
+  if (!Array.isArray(value)) {
+    errors.push(`Field "contributes.${field}" must be an array`);
+    return;
+  }
+  const seen = new Set<string>();
+  value.forEach((raw, index) => {
+    const where = `contributes.${field}[${index}]`;
+    if (!isPlainObject(raw)) {
+      errors.push(`${where} must be an object`);
+      return;
+    }
+    rejectUnknown(raw, allowed, where, errors);
+    if (typeof raw.id !== "string" || !LOOK_ID_PATTERN.test(raw.id)) {
+      errors.push(
+        `${where}.id must match ${LOOK_ID_PATTERN} (lowercase letters, digits, dashes)`,
+      );
+    } else {
+      if (seen.has(raw.id)) errors.push(`${where}.id duplicates "${raw.id}"`);
+      seen.add(raw.id);
+    }
+    requireString(raw.label, `${where}.label`, errors);
+    each(raw, where);
+  });
+}
+
+function validateLayouts(value: unknown, errors: string[]): void {
+  validateLookList(
+    value,
+    "layouts",
+    ["id", "label", "description", "defaultTheme", "default"],
+    errors,
+    (raw, where) => {
+      if (raw.description !== undefined)
+        requireString(raw.description, `${where}.description`, errors);
+      if (
+        raw.defaultTheme !== undefined &&
+        (typeof raw.defaultTheme !== "string" ||
+          !LOOK_ID_PATTERN.test(raw.defaultTheme))
+      ) {
+        errors.push(`${where}.defaultTheme must be a theme id`);
+      }
+      if (raw.default !== undefined && typeof raw.default !== "boolean") {
+        errors.push(`${where}.default must be a boolean`);
+      }
+    },
+  );
+  if (
+    Array.isArray(value) &&
+    value.filter((raw) => isPlainObject(raw) && raw.default === true).length > 1
+  ) {
+    errors.push('Only one entry in "contributes.layouts" may set default');
+  }
+}
+
+const HEX_COLOR = /^#[0-9a-fA-F]{3,8}$/;
+
+function validateThemes(value: unknown, errors: string[]): void {
+  validateLookList(
+    value,
+    "themes",
+    ["id", "label", "mode", "css", "swatch"],
+    errors,
+    (raw, where) => {
+      if (raw.mode !== "light" && raw.mode !== "dark") {
+        errors.push(`${where}.mode must be "light" or "dark"`);
+      }
+      if (requireString(raw.css, `${where}.css`, errors)) {
+        requireRelativePath(raw.css, `${where}.css`, errors);
+        if (!raw.css.endsWith(".css")) {
+          errors.push(`${where}.css must be a .css file`);
+        }
+      }
+      if (raw.swatch !== undefined) {
+        if (!isPlainObject(raw.swatch)) {
+          errors.push(`${where}.swatch must be an object`);
+          return;
+        }
+        rejectUnknown(
+          raw.swatch,
+          ["background", "panel", "text"],
+          `${where}.swatch`,
+          errors,
+        );
+        for (const key of ["background", "panel", "text"]) {
+          const color = raw.swatch[key];
+          if (typeof color !== "string" || !HEX_COLOR.test(color)) {
+            errors.push(`${where}.swatch.${key} must be a hex color`);
+          }
+        }
+      }
+    },
+  );
 }
 
 export const PROTOCOL_ID_PATTERN = /^[a-z][a-z0-9-]{0,31}$/;
@@ -2324,6 +2470,23 @@ export function parseManifest(raw: unknown): ParsedManifest {
     );
   }
 
+  if (
+    (manifest.contributes?.layouts?.length ?? 0) > 0 &&
+    !manifest.capabilities.includes("ui:layout")
+  ) {
+    errors.push(
+      'contributes.layouts needs the "ui:layout" capability in the capabilities array',
+    );
+  }
+  if (
+    (manifest.contributes?.themes?.length ?? 0) > 0 &&
+    !manifest.capabilities.includes("ui:theme")
+  ) {
+    errors.push(
+      'contributes.themes needs the "ui:theme" capability in the capabilities array',
+    );
+  }
+
   for (const secret of manifest.requiresSecret ?? []) {
     if (secret.plugin === manifest.id) {
       errors.push(

packages/plugin-sdk/src/testing/setup.ts

@@ -97,6 +97,7 @@ const offline = () =>
   useHostStatus: () => null,
   useCurrentUser: () => null,
   useTheme: () => ({ theme: "dark" }),
+  useShell: () => null,
   toast: { success: noop, error: noop, info: noop, warning: noop },
   getApi: () => ({
     get: offline,

packages/plugin-sdk/src/theme-css.ts

@@ -0,0 +1,150 @@
+/**
+ * Checks a theme's CSS before core serves it.
+ *
+ * A theme is colors and styles only, so its file may hold nothing but rules
+ * whose every selector starts with the theme's own class (`.nord`,
+ * `:root.nord`, `html.nord ...`), optionally inside @media or @supports.
+ * Anything that could load from elsewhere or run code is refused: @import,
+ * url() to another host, other at-rules, expression() and javascript:.
+ */
+
+const ALLOWED_BLOCK_AT_RULES = new Set(["media", "supports"]);
+
+function stripComments(css: string): string {
+  return css.replace(/\/\*[\s\S]*?\*\//g, " ");
+}
+
+/** Splits on commas that are not inside parentheses or brackets. */
+function splitSelectors(prelude: string): string[] {
+  const parts: string[] = [];
+  let depth = 0;
+  let current = "";
+  for (const ch of prelude) {
+    if (ch === "(" || ch === "[") depth += 1;
+    if (ch === ")" || ch === "]") depth -= 1;
+    if (ch === "," && depth === 0) {
+      parts.push(current);
+      current = "";
+      continue;
+    }
+    current += ch;
+  }
+  parts.push(current);
+  return parts.map((part) => part.trim());
+}
+
+function withoutStrings(css: string): string {
+  return css.replace(/"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'/g, '""');
+}
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+/** Index of the brace closing the one at `open`, skipping strings. */
+function matchingBrace(css: string, open: number): number {
+  let depth = 0;
+  let quote: string | null = null;
+  for (let i = open; i < css.length; i += 1) {
+    const ch = css[i];
+    if (quote) {
+      if (ch === "\\") i += 1;
+      else if (ch === quote) quote = null;
+      continue;
+    }
+    if (ch === '"' || ch === "'") quote = ch;
+    else if (ch === "{") depth += 1;
+    else if (ch === "}") {
+      depth -= 1;
+      if (depth === 0) return i;
+    }
+  }
+  return -1;
+}
+
+function checkUrls(css: string, errors: string[]): void {
+  const urls = css.matchAll(/url\(\s*(['"]?)([^'")]*)\1\s*\)/gi);
+  for (const match of urls) {
+    const target = match[2].trim();
+    if (target.startsWith("data:")) continue;
+    if (/^[a-z][a-z0-9+.-]*:/i.test(target) || target.startsWith("//")) {
+      errors.push(`url(${target}) points outside the plugin`);
+    }
+  }
+}
+
+function checkRules(
+  css: string,
+  scope: RegExp,
+  themeId: string,
+  errors: string[],
+): void {
+  let index = 0;
+  while (index < css.length) {
+    const rest = css.slice(index);
+    if (rest.trim() === "") return;
+    const open = css.indexOf("{", index);
+    const semicolon = css.indexOf(";", index);
+    if (semicolon !== -1 && (open === -1 || semicolon < open)) {
+      const statement = css.slice(index, semicolon).trim();
+      errors.push(
+        statement.startsWith("@")
+          ? `${statement.split(/\s/)[0]} is not allowed in a theme`
+          : `Unexpected "${statement}" outside a rule`,
+      );
+      index = semicolon + 1;
+      continue;
+    }
+    if (open === -1) {
+      errors.push(`Unexpected "${rest.trim()}" at the end`);
+      return;
+    }
+    const close = matchingBrace(css, open);
+    if (close === -1) {
+      errors.push("A rule is missing its closing brace");
+      return;
+    }
+    const prelude = css.slice(index, open).trim();
+    const body = css.slice(open + 1, close);
+
+    if (prelude.startsWith("@")) {
+      const name = prelude.slice(1).split(/[\s(]/)[0].toLowerCase();
+      if (ALLOWED_BLOCK_AT_RULES.has(name)) {
+        checkRules(body, scope, themeId, errors);
+      } else {
+        errors.push(`@${name} is not allowed in a theme`);
+      }
+    } else {
+      for (const selector of splitSelectors(prelude)) {
+        if (!scope.test(selector)) {
+          errors.push(
+            `Selector "${selector}" must start with .${themeId}, :root.${themeId} or html.${themeId}`,
+          );
+        }
+      }
+      if (withoutStrings(body).includes("{")) {
+        errors.push(`Nested rules are not allowed in "${prelude}"`);
+      }
+    }
+    index = close + 1;
+  }
+}
+
+/** Every problem with a theme's CSS, empty when it is safe to serve. */
+export function validateThemeCss(css: string, themeId: string): string[] {
+  const errors: string[] = [];
+  const clean = stripComments(css);
+  if (/@import\b/i.test(clean))
+    errors.push("@import is not allowed in a theme");
+  if (/expression\s*\(/i.test(clean))
+    errors.push("expression() is not allowed in a theme");
+  if (/javascript:/i.test(clean))
+    errors.push("javascript: is not allowed in a theme");
+  if (/-moz-binding|behavior\s*:/i.test(clean))
+    errors.push("Script bindings are not allowed in a theme");
+  checkUrls(clean, errors);
+  const id = escapeRegExp(themeId);
+  const scope = new RegExp(`^(?::root|html)?\\.${id}(?![\\w-])`);
+  checkRules(clean, scope, themeId, errors);
+  return [...new Set(errors)];
+}