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

plugins/network-topology/src/frontend/NetworkGraphCard.tsx

@@ -59,7 +59,7 @@ import {
   ArrowDownUp,
   Loader2,
 } from "lucide-react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "@termix/plugin-sdk/frontend";
 import { useTabsSafe } from "@/shell/TabContext";
 import { cn } from "@/lib/utils";
 import { readStatusColorScheme } from "@/hooks/use-status-color-scheme";

plugins/network-topology/src/frontend/index.mjs

@@ -1,44 +0,0 @@
-/**
- * Frontend half of the network-topology plugin.
- *
- * NetworkGraphCard renders in two modes: as a full tab (network_graph) and
- * embedded as a dashboard card. Both usages are wired today through the
- * existing tabUtils.tsx / DashboardTab.tsx switch statements the same way
- * fleet-inventory's tab is, not through register() below -- per
- * src/ui/shell/pluginLoader.ts's own comment, "there is no plugin loader
- * yet" for the frontend half.
- *
- * register()/unregister() still follow the same shape every other plugin's
- * frontend entry does, so this is ready the moment a real frontend plugin
- * loader exists.
- */
-
-export const id = "network-topology";
-export const tabId = "network_graph";
-
-export async function register({
-  registerRailItem,
-  registerTabComponent,
-  icons,
-}) {
-  registerTabComponent?.(tabId, () =>
-    import("./NetworkGraphCard.tsx").then((m) => ({
-      default: m.NetworkGraphCard,
-    })),
-  );
-
-  registerRailItem?.({
-    id: tabId,
-    icon: icons.Network,
-    labelKey: "nav.networkGraph",
-    kind: "tab",
-  });
-}
-
-export async function unregister({
-  unregisterRailItem,
-  unregisterTabComponent,
-}) {
-  unregisterRailItem?.(tabId);
-  unregisterTabComponent?.(tabId);
-}

plugins/network-topology/src/frontend/index.tsx

@@ -0,0 +1,47 @@
+import { Network } from "lucide-react";
+import type {
+  DashboardCardProps,
+  TabProps,
+  TermixApp,
+} from "@termix/plugin-sdk/frontend";
+import { NetworkGraphCard } from "./NetworkGraphCard";
+
+const VIEW_ID = "network_graph";
+
+function GraphTab({ isVisible }: TabProps) {
+  return <NetworkGraphCard embedded={false} isVisible={isVisible} />;
+}
+
+function GraphCard({ isVisible, shell }: DashboardCardProps) {
+  return (
+    <NetworkGraphCard
+      embedded={true}
+      isVisible={isVisible}
+      onOpenInNewTab={() => shell.openSingletonTab(VIEW_ID)}
+    />
+  );
+}
+
+export function activate(app: TermixApp): void {
+  app.registerTab(VIEW_ID, GraphTab, {
+    icon: Network,
+    titleKey: "nav.networkGraph",
+    singleton: true,
+    hostless: true,
+  });
+
+  app.registerRailItem({
+    id: VIEW_ID,
+    icon: Network,
+    titleKey: "nav.networkGraph",
+    kind: "tab",
+    after: "local-terminal",
+  });
+
+  app.registerDashboardCard({
+    id: VIEW_ID,
+    titleKey: "dashboard.networkGraph",
+    defaultHeight: 350,
+    component: GraphCard,
+  });
+}