feat: load plugin frontends at runtime and remove plugin ids from the shell

plugins/ssh-terminal/manifest.json

@@ -27,13 +27,21 @@
         "id": "terminal",
         "titleKey": "nav.terminal",
         "icon": "SquareTerminal",
-        "openFrom": ["rail", "host-context-menu", "palette"]
+        "openFrom": ["host-context-menu", "palette"]
       }
     ],
     "actionSlots": [
       {
         "id": "terminal.toolbar",
         "accepts": ["button"]
+      },
+      {
+        "id": "terminal.dock",
+        "accepts": ["component"]
+      },
+      {
+        "id": "terminal.overlay",
+        "accepts": ["component"]
       }
     ]
   },

plugins/ssh-terminal/src/frontend/index.mjs

@@ -1,49 +0,0 @@
-/**
- * Frontend half of the ssh-terminal plugin.
- *
- * Registers the existing Terminal component through the extension seams that
- * already exist in the shell (registerRailItem / registerTabComponent). The
- * component itself is unchanged and still lives in src/ui/features/terminal -
- * this only controls whether the shell knows about it.
- *
- * register() is called when the plugin is enabled, unregister() when it is
- * disabled, so the tab and rail entry appear and disappear with the plugin.
- */
-
-export const id = "ssh-terminal";
-export const tabId = "terminal";
-export const toolbarSlotId = "terminal.toolbar";
-
-export async function register({
-  registerRailItem,
-  registerTabComponent,
-  declareActionSlot,
-  icons,
-}) {
-  registerTabComponent(tabId, () =>
-    import("@/features/terminal/Terminal").then((m) => ({
-      default: m.Terminal,
-    })),
-  );
-
-  registerRailItem({
-    id: tabId,
-    icon: icons.SquareTerminal,
-    labelKey: "nav.terminal",
-    kind: "tab",
-  });
-
-  // Offers other plugins a place in the terminal toolbar. The terminal does
-  // not know or care who fills it.
-  declareActionSlot({ id: toolbarSlotId, accepts: ["button"] });
-}
-
-export async function unregister({
-  unregisterRailItem,
-  unregisterTabComponent,
-  undeclareActionSlot,
-}) {
-  unregisterRailItem(tabId);
-  unregisterTabComponent(tabId);
-  undeclareActionSlot(toolbarSlotId);
-}

plugins/ssh-terminal/src/frontend/index.tsx

@@ -0,0 +1,66 @@
+import type { ComponentType } from "react";
+import { Terminal } from "lucide-react";
+import type {
+  StandaloneViewProps,
+  TabProps,
+  TermixApp,
+} from "@termix/plugin-sdk/frontend";
+import {
+  TerminalTabContent,
+  loadTerminal,
+} from "@/features/terminal/TerminalTabContent";
+import TerminalApp from "@/features/terminal/TerminalApp";
+import {
+  TERMINAL_DOCK_SLOT,
+  TERMINAL_OVERLAY_SLOT,
+  TERMINAL_TOOLBAR_SLOT,
+} from "@/features/terminal/terminal-slots";
+
+/** `?view=terminal` full-screen links. */
+function TerminalStandalone({ hostId, params }: StandaloneViewProps) {
+  return (
+    <TerminalApp
+      hostId={hostId}
+      tmuxSession={params.get("tmuxSession") ?? undefined}
+    />
+  );
+}
+
+/**
+ * The SSH terminal. Its component still lives in core until the terminal's
+ * own Phase B step; this plugin decides whether the shell offers it.
+ */
+export function activate(app: TermixApp): void {
+  app.registerTab(
+    "terminal",
+    TerminalTabContent as unknown as ComponentType<TabProps>,
+    {
+      icon: Terminal,
+      titleKey: "nav.terminal",
+      persistent: true,
+      session: true,
+      restore: (host) => !!host.enableSsh,
+      activityTypes: ["terminal"],
+      standalone: TerminalStandalone,
+      preload: loadTerminal,
+    },
+  );
+
+  app.registerHostAction({
+    id: "terminal",
+    titleKey: "nav.terminal",
+    icon: Terminal,
+    kind: "connect",
+    priority: 100,
+    order: 10,
+    tabType: "terminal",
+    copyUrlView: "terminal",
+    when: (host) => !!host.enableSsh && host.enableTerminal !== false,
+  });
+
+  // Places other plugins can fill: toolbar buttons, a docked side panel and
+  // overlays that follow the session's connection flow.
+  app.declareActionSlot({ id: TERMINAL_TOOLBAR_SLOT, accepts: ["button"] });
+  app.declareActionSlot({ id: TERMINAL_DOCK_SLOT, accepts: ["component"] });
+  app.declareActionSlot({ id: TERMINAL_OVERLAY_SLOT, accepts: ["component"] });
+}

plugins/ssh-terminal/tests/frontend/activate.test.tsx

@@ -0,0 +1,53 @@
+import { afterEach, describe, expect, it } from "vitest";
+import {
+  renderWithApp,
+  type RenderedPluginApp,
+} from "@termix/plugin-sdk/testing";
+import type { PluginManifest } from "@termix/plugin-sdk/manifest";
+import * as plugin from "../../src/frontend/index";
+import manifestJson from "../../manifest.json";
+import locales from "../../locales/en.json";
+
+const manifest = manifestJson as unknown as PluginManifest;
+
+const declared = (views?: Array<{ id: string }>) =>
+  (views ?? []).map((view) => view.id).sort();
+
+let rendered: RenderedPluginApp | null = null;
+
+afterEach(async () => {
+  await rendered?.deactivate();
+  rendered = null;
+});
+
+describe(`${manifest.id} activate`, () => {
+  it("activates and registers only views its manifest declares", async () => {
+    rendered = await renderWithApp(plugin, { manifest, locales });
+    const contributes = manifest.contributes as unknown as Record<
+      string,
+      Array<{ id: string }> | undefined
+    >;
+    const tabs = declared(contributes.tabs);
+    // A rail panel may reuse one of the plugin's tab ids.
+    const panels = [...declared(contributes.panels), ...tabs];
+    const cards = declared(contributes.dashboardCards);
+    for (const id of rendered.registered.tabs()) expect(tabs).toContain(id);
+    for (const id of rendered.registered.panels()) expect(panels).toContain(id);
+    for (const id of rendered.registered.dashboardCards()) {
+      expect(cards).toContain(id);
+    }
+  });
+
+  it("removes everything it registered on deactivate", async () => {
+    const app = await renderWithApp(plugin, { manifest, locales });
+    await app.deactivate();
+    expect(app.registered.tabs()).toEqual([]);
+    expect(app.registered.panels()).toEqual([]);
+    expect(app.registered.railItems()).toEqual([]);
+    expect(app.registered.hostActions()).toEqual([]);
+    expect(app.registered.hostEditorSections()).toEqual([]);
+    expect(app.registered.dashboardCards()).toEqual([]);
+    expect(app.registered.settingsComponents()).toEqual([]);
+    expect(app.registered.actions()).toEqual([]);
+  });
+});