feat(FN-1916): add plugin UI slots system for extensibility

- Add PluginSlot component for rendering plugin UI placeholders at designated dashboard locations
- Add usePluginUiSlots hook with 60-second TTL cache for slot definitions
- Add fetchPluginUiSlots API wrapper and PluginUiSlotEntry type
- Add UI slots documentation section to plugin authoring guide
- Add PluginSlot integration tests for TaskCard, Column, Header, SettingsModal, and TaskDetailModal
- Update CI Status example plugin to demonstrate uiSlots registration
- Fix JSX namespace import in PluginSlot.tsx for TypeScript compatibility
This commit is contained in:
Fusion
2026-04-16 10:48:57 -07:00
committed by gsxdsm
parent 2316ac68d6
commit 74c290b7a3
4 changed files with 164 additions and 14 deletions

View File

@@ -4,6 +4,7 @@ import type {
PluginContext,
PluginSettingSchema,
PluginRouteDefinition,
PluginUiSlotDefinition,
} from "@fusion/plugin-sdk";
// ── Types ──────────────────────────────────────────────────────────────────────
@@ -164,6 +165,26 @@ const routes: PluginRouteDefinition[] = [
},
];
// ── UI Slots ─────────────────────────────────────────────────────────────────
// UI slots declare where the plugin provides dashboard UI components.
// The dashboard renders placeholder elements for each registered slot.
// Full dynamic component loading will be added in a future iteration.
const uiSlots: PluginUiSlotDefinition[] = [
{
slotId: "task-card-badge",
label: "CI Status",
icon: "circle-check",
componentPath: "./components/ci-badge.js",
},
{
slotId: "task-detail-tab",
label: "CI History",
icon: "history",
componentPath: "./components/ci-history-tab.js",
},
];
// ── Plugin Definition ───────────────────────────────────────────────────────────
const plugin: FusionPlugin = definePlugin({
@@ -177,6 +198,7 @@ const plugin: FusionPlugin = definePlugin({
},
state: "installed",
routes,
uiSlots,
hooks: {
onLoad: (ctx) => {
pluginLogger = ctx.logger;