feat(layout): plan 03 — frontend plugin ABI + handshake + load lifecycle

2 files changed, 11 insertions, 3 deletions

diff --git a/src/features/plugins/ui/PluginManager.svelte b/src/features/plugins/ui/PluginManager.svelte
index cd3d542..fd2a8a7 100644
--- a/src/features/plugins/ui/PluginManager.svelte
+++ b/src/features/plugins/ui/PluginManager.svelte
@@ -6,7 +6,7 @@
   import { autoCheckBackendPrereqs } from "../logic/prereqs";
   import { dependencyHighlightSets } from "../logic/highlight";
   import { unloadBlockReason } from "../logic/last-provider";
-  import { splitSections } from "../logic/view-model";
+  import { splitSections, withFrontendStates } from "../logic/view-model";
   import PluginTable from "./PluginTable.svelte";
   import UnloadConfirmModal from "./UnloadConfirmModal.svelte";
 
@@ -17,9 +17,13 @@
   });
 
   // ── Derived sections + hover highlighting (§8) ────────────────────────────
-  const sections = $derived(splitSections(plugins.nodes));
+  // The FE-half states (plan 03) merge into the nodes here — one reactive
+  // derivation over both inputs (the normalized nodes + the plugin host's
+  // post-sync state map).
+  const nodes = $derived(withFrontendStates(plugins.nodes, plugins.frontendStates));
+  const sections = $derived(splitSections(nodes));
   let hoveredId = $state<string | null>(null);
-  const highlight = $derived(dependencyHighlightSets(hoveredId, plugins.nodes));
+  const highlight = $derived(dependencyHighlightSets(hoveredId, nodes));
 
   function highlightFor(id: string): "dep" | "dependent" | null {
     if (highlight.deps.has(id)) return "dep";
diff --git a/src/features/plugins/ui/PluginRow.svelte b/src/features/plugins/ui/PluginRow.svelte
index 457bd29..73e0b18 100644
--- a/src/features/plugins/ui/PluginRow.svelte
+++ b/src/features/plugins/ui/PluginRow.svelte
@@ -83,6 +83,10 @@
       {#if node.reason !== null}
         <span class="text-xs text-error">{node.reason}</span>
       {/if}
+      {#if node.frontendIssue !== undefined}
+        <!-- plan 03: the FE half's state — "incompatible frontend plugin" or the activation error -->
+        <span class="text-xs text-error">{node.frontendIssue}</span>
+      {/if}
       {#if node.dependsOn.length > 0}
         <span class="text-xs opacity-60">depends on: {node.dependsOn.join(", ")}</span>
       {/if}