create-lego-one 2.0.12 → 2.0.14

package/template/docs/framework/plans/08-plugin-system.md

@@ -0,0 +1,1179 @@
+# Plugin System Implementation Plan
+
+> **For AI Implementing This Plan:** This is document 08 of 13. Complete documents 01-07 first.
+
+**Goal:** Implement complete plugin architecture with slot injection system, plugin configuration, dynamic loading, and enable/disable functionality via config and admin UI.
+
+**Architecture:** Plugins register slots that can inject content into host layout locations (sidebar, topbar, etc.). Plugin config file controls enabled/disabled state. Host manages plugin lifecycle.
+
+**Tech Stack:** Modern.js plugin system, Garfish dynamic loading, React context, Zustand, Zod validation
+
+---
+
+## Prerequisites
+
+- ✅ Completed `01-infrastructure-setup.md`
+- ✅ Completed `02-pocketbase-setup.md`
+- ✅ Completed `03-host-kernel.md`
+- ✅ Completed `04-auth-system.md`
+- ✅ Completed `05-multitenancy-rbac.md`
+- ✅ Completed `06-ui-components.md`
+- ✅ Completed `07-communication-system.md`
+
+---
+
+## Task 1: Create Plugin Types and Interfaces
+
+**Files:**
+- Create: `host/src/kernel/plugins/types.ts`
+- Create: `host/src/kernel/plugins/schemas.ts`
+
+### Step 1: Create plugin types
+
+**File:** `host/src/kernel/plugins/types.ts`
+
+```typescript
+import type { ReactNode } from 'react';
+
+/**
+ * Slot names where plugins can inject content
+ */
+export enum SlotName {
+  SIDEBAR_TOP = 'sidebar:top',
+  SIDEBAR_NAV = 'sidebar:nav',
+  SIDEBAR_BOTTOM = 'sidebar:bottom',
+  TOPBAR_LEFT = 'topbar:left',
+  TOPBAR_RIGHT = 'topbar:right',
+  TOPBAR_CENTER = 'topbar:center',
+  SETTINGS_MENU = 'settings:menu',
+  DASHBOARD_WIDGETS = 'dashboard:widgets',
+}
+
+/**
+ * Slot injection configuration
+ */
+export interface SlotInjection {
+  slot: SlotName;
+  component: ReactNode | React.ComponentType;
+  order?: number; // Lower = higher priority
+  props?: Record<string, unknown>;
+  condition?: () => boolean; // Conditional rendering
+}
+
+/**
+ * Plugin manifest metadata
+ */
+export interface PluginManifest {
+  name: string; // e.g., '@lego/plugin-dashboard'
+  version: string;
+  displayName: string;
+  description: string;
+  author?: string;
+  icon?: string;
+  permissions?: string[]; // Required permissions
+}
+
+/**
+ * Plugin configuration
+ */
+export interface PluginConfig {
+  manifest: PluginManifest;
+  enabled: boolean;
+  slots: SlotInjection[];
+  routes?: RouteConfig[];
+  settings?: PluginSetting[];
+}
+
+/**
+ * Plugin route configuration
+ */
+export interface RouteConfig {
+  path: string;
+  component: React.ComponentType;
+  protected?: boolean;
+  permissions?: string[];
+}
+
+/**
+ * Plugin setting for admin UI
+ */
+export interface PluginSetting {
+  key: string;
+  type: 'boolean' | 'string' | 'number' | 'select';
+  label: string;
+  description?: string;
+  defaultValue?: unknown;
+  options?: { label: string; value: string }[];
+}
+
+/**
+ * Plugin state
+ */
+export interface PluginState {
+  id: string;
+  manifest: PluginManifest;
+  enabled: boolean;
+  loaded: boolean;
+  error?: string;
+  settings: Record<string, unknown>;
+}
+
+/**
+ * Plugin registry
+ */
+export interface PluginRegistry {
+  plugins: Map<string, PluginConfig>;
+  enabled: Set<string>;
+  slots: Map<SlotName, SlotInjection[]>;
+}
+
+/**
+ * Plugin info from host config
+ */
+export interface HostPluginInfo {
+  name: string;
+  enabled: boolean;
+  entry: string | (() => Promise<unknown>);
+  activeWhen: string;
+}
+```
+
+### Step 2: Create plugin config schemas
+
+**File:** `host/src/kernel/plugins/schemas.ts`
+
+```typescript
+import { z } from 'zod';
+import { SlotName } from './types';
+
+/**
+ * Slot injection schema
+ */
+export const slotInjectionSchema = z.object({
+  slot: z.nativeEnum(SlotName),
+  component: z.any(), // React component
+  order: z.number().optional().default(100),
+  props: z.record(z.any()).optional(),
+  condition: z.function().optional(),
+});
+
+/**
+ * Plugin manifest schema
+ */
+export const pluginManifestSchema = z.object({
+  name: z.string().regex(/^@lego\/plugin-/, 'Plugin name must start with @lego/plugin-'),
+  version: z.string().regex(/^\d+\.\d+\.\d+$/, 'Version must be semver'),
+  displayName: z.string().min(1).max(50),
+  description: z.string().max(500),
+  author: z.string().optional(),
+  icon: z.string().optional(),
+  permissions: z.array(z.string()).optional(),
+});
+
+/**
+ * Plugin config schema
+ */
+export const pluginConfigSchema = z.object({
+  manifest: pluginManifestSchema,
+  enabled: z.boolean().default(true),
+  slots: z.array(slotInjectionSchema).default([]),
+  routes: z.array(z.object({
+    path: z.string(),
+    component: z.any(),
+    protected: z.boolean().optional(),
+    permissions: z.array(z.string()).optional(),
+  })).optional(),
+  settings: z.array(z.object({
+    key: z.string(),
+    type: z.enum(['boolean', 'string', 'number', 'select']),
+    label: z.string(),
+    description: z.string().optional(),
+    defaultValue: z.any(),
+    options: z.array(z.object({
+      label: z.string(),
+      value: z.string(),
+    })).optional(),
+  })).optional(),
+});
+
+export type PluginConfigInput = z.infer<typeof pluginConfigSchema>;
+```
+
+---
+
+## Task 2: Create Plugin Config File Structure
+
+**Files:**
+- Create: `host/src/saas.config.ts`
+
+### Step 1: Create SaaS config file
+
+**File:** `host/src/saas.config.ts`
+
+```typescript
+import { z } from 'zod';
+import { pluginConfigSchema, type PluginConfig } from './kernel/plugins/schemas';
+
+/**
+ * SaaS configuration file
+ *
+ * This file controls which plugins are enabled and their configuration.
+ * Admin can override this via UI (stored in PocketBase).
+ */
+
+const saasConfigSchema = z.object({
+  plugins: z.array(z.object({
+    name: z.string(),
+    enabled: z.boolean(),
+  })),
+  settings: z.record(z.any()).optional(),
+});
+
+export type SaaSConfig = z.infer<typeof saasConfigSchema>;
+
+/**
+ * Default SaaS configuration
+ * Modify this to enable/disable plugins by default
+ */
+export const saasConfig: SaaSConfig = {
+  plugins: [
+    {
+      name: '@lego/plugin-dashboard',
+      enabled: true,
+    },
+    {
+      name: '@lego/plugin-todo',
+      enabled: true,
+    },
+  ],
+  settings: {
+    // Global settings
+    allowPublicSignup: false,
+    defaultOrganizationRequired: true,
+  },
+};
+
+/**
+ * Validate config on load
+ */
+export function validateConfig(config: unknown): SaaSConfig {
+  return saasConfigSchema.parse(config);
+}
+
+// Export for type safety
+export default saasConfig;
+```
+
+---
+
+## Task 3: Create Plugin Store (Zustand)
+
+**Files:**
+- Create: `host/src/kernel/plugins/store.ts`
+
+### Step 1: Create plugin store
+
+**File:** `host/src/kernel/plugins/store.ts`
+
+```typescript
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+import type { PluginState, PluginConfig } from './types';
+import { saasConfig } from '../../saas.config';
+
+interface PluginStore {
+  // State
+  plugins: Record<string, PluginState>;
+  isLoading: boolean;
+
+  // Actions
+  registerPlugin: (config: PluginConfig) => void;
+  unregisterPlugin: (name: string) => void;
+  enablePlugin: (name: string) => void;
+  disablePlugin: (name: string) => void;
+  updatePluginSettings: (name: string, settings: Record<string, unknown>) => void;
+  setPluginLoaded: (name: string, loaded: boolean) => void;
+  setPluginError: (name: string, error: string) => void;
+  initializeFromConfig: () => void;
+}
+
+/**
+ * Get default plugin settings from manifest
+ */
+function getDefaultSettings(config: PluginConfig): Record<string, unknown> {
+  const settings: Record<string, unknown> = {};
+
+  if (config.settings) {
+    for (const setting of config.settings) {
+      if (setting.defaultValue !== undefined) {
+        settings[setting.key] = setting.defaultValue;
+      }
+    }
+  }
+
+  return settings;
+}
+
+/**
+ * Create plugin store
+ */
+export const usePluginStore = create<PluginStore>()(
+  devtools(
+    persist(
+      (set, get) => ({
+        plugins: {},
+        isLoading: false,
+
+        registerPlugin: (config) => {
+          const { name, enabled } = config.manifest;
+
+          set((state) => ({
+            plugins: {
+              ...state.plugins,
+              [name]: {
+                id: name,
+                manifest: config.manifest,
+                enabled,
+                loaded: false,
+                settings: getDefaultSettings(config),
+              },
+            },
+          }));
+        },
+
+        unregisterPlugin: (name) => {
+          set((state) => {
+            const plugins = { ...state.plugins };
+            delete plugins[name];
+            return { plugins };
+          });
+        },
+
+        enablePlugin: (name) => {
+          set((state) => ({
+            plugins: {
+              ...state.plugins,
+              [name]: {
+                ...state.plugins[name],
+                enabled: true,
+              },
+            },
+          }));
+        },
+
+        disablePlugin: (name) => {
+          set((state) => ({
+            plugins: {
+              ...state.plugins,
+              [name]: {
+                ...state.plugins[name],
+                enabled: false,
+                loaded: false,
+              },
+            },
+          }));
+        },
+
+        updatePluginSettings: (name, settings) => {
+          set((state) => ({
+            plugins: {
+              ...state.plugins,
+              [name]: {
+                ...state.plugins[name],
+                settings: {
+                  ...state.plugins[name].settings,
+                  ...settings,
+                },
+              },
+            },
+          }));
+        },
+
+        setPluginLoaded: (name, loaded) => {
+          set((state) => ({
+            plugins: {
+              ...state.plugins,
+              [name]: {
+                ...state.plugins[name],
+                loaded,
+              },
+            },
+          }));
+        },
+
+        setPluginError: (name, error) => {
+          set((state) => ({
+            plugins: {
+              ...state.plugins,
+              [name]: {
+                ...state.plugins[name],
+                error,
+                loaded: false,
+              },
+            },
+          }));
+        },
+
+        initializeFromConfig: () => {
+          const { plugins } = saasConfig;
+
+          set((state) => {
+            const newPlugins = { ...state.plugins };
+
+            for (const plugin of plugins) {
+              const existing = newPlugins[plugin.name];
+
+              if (!existing) {
+                // Create placeholder for plugin that will be loaded
+                newPlugins[plugin.name] = {
+                  id: plugin.name,
+                  manifest: {
+                    name: plugin.name,
+                    version: '0.0.0',
+                    displayName: plugin.name,
+                    description: '',
+                  },
+                  enabled: plugin.enabled,
+                  loaded: false,
+                  settings: {},
+                };
+              } else {
+                // Update enabled state from config
+                newPlugins[plugin.name] = {
+                  ...existing,
+                  enabled: plugin.enabled,
+                };
+              }
+            }
+
+            return { plugins: newPlugins };
+          });
+        },
+      }),
+      {
+        name: 'lego-plugin-store',
+        partialize: (state) => ({
+          plugins: state.plugins,
+        }),
+      }
+    ),
+    { name: 'LegoPluginStore' }
+  )
+);
+```
+
+---
+
+## Task 4: Create Plugin Loader Service
+
+**Files:**
+- Create: `host/src/kernel/plugins/loader.ts`
+
+### Step 1: Create plugin loader
+
+**File:** `host/src/kernel/plugins/loader.ts`
+
+```typescript
+import Garfish from 'garfish';
+import type { PluginConfig, PluginManifest } from './types';
+import { usePluginStore } from './store';
+
+/**
+ * Plugin loader - handles dynamic loading of plugins
+ */
+class PluginLoader {
+  private garfishInstance: typeof Garfish | null = null;
+  private loadedPlugins = new Map<string, PluginConfig>();
+
+  /**
+   * Initialize loader with Garfish instance
+   */
+  initialize(garfish: typeof Garfish): void {
+    this.garfishInstance = garfish;
+    console.log('[PluginLoader] Initialized');
+  }
+
+  /**
+   * Load a plugin dynamically
+   */
+  async loadPlugin(entry: string | (() => Promise<unknown>)): Promise<PluginConfig | null> {
+    if (!this.garfishInstance) {
+      console.error('[PluginLoader] Garfish not initialized');
+      return null;
+    }
+
+    try {
+      let module: any;
+
+      if (typeof entry === 'function') {
+        // Dynamic import (production)
+        module = await entry();
+      } else {
+        // URL load (development)
+        // In dev, plugins run on separate servers
+        // We just track them, actual loading is handled by Garfish
+        console.log(`[PluginLoader] Dev mode: Plugin at ${entry}`);
+        return null;
+      }
+
+      // Extract plugin config from module
+      const config = module.default?.config || module.config;
+
+      if (!config) {
+        console.error('[PluginLoader] Plugin has no config export');
+        return null;
+      }
+
+      // Validate config
+      this.loadedPlugins.set(config.manifest.name, config);
+
+      console.log(`[PluginLoader] Loaded plugin: ${config.manifest.name}`);
+
+      return config;
+    } catch (error) {
+      console.error('[PluginLoader] Failed to load plugin:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Load all configured plugins
+   */
+  async loadPlugins(plugins: Array<{
+    name: string;
+    entry: string | (() => Promise<unknown>);
+  }>): Promise<void> {
+    const store = usePluginStore.getState();
+
+    for (const plugin of plugins) {
+      const state = store.plugins[plugin.name];
+
+      if (!state || !state.enabled) {
+        continue;
+      }
+
+      try {
+        const config = await this.loadPlugin(plugin.entry);
+
+        if (config) {
+          store.registerPlugin(config);
+          store.setPluginLoaded(plugin.name, true);
+        }
+      } catch (error: any) {
+        store.setPluginError(plugin.name, error.message);
+      }
+    }
+  }
+
+  /**
+   * Get loaded plugin config
+   */
+  getPluginConfig(name: string): PluginConfig | undefined {
+    return this.loadedPlugins.get(name);
+  }
+
+  /**
+   * Get all loaded plugins
+   */
+  getAllPlugins(): PluginConfig[] {
+    return Array.from(this.loadedPlugins.values());
+  }
+
+  /**
+   * Check if plugin is loaded
+   */
+  isLoaded(name: string): boolean {
+    return this.loadedPlugins.has(name);
+  }
+}
+
+// Export singleton
+export const pluginLoader = new PluginLoader();
+
+/**
+ * Initialize plugin loader (call from bootstrap)
+ */
+export function initializePluginLoader(garfish: typeof Garfish): void {
+  pluginLoader.initialize(garfish);
+}
+```
+
+---
+
+## Task 5: Create Slot System
+
+**Files:**
+- Create: `host/src/kernel/plugins/Slot.tsx`
+- Create: `host/src/kernel/plugins/SlotProvider.tsx`
+
+### Step 1: Create Slot component
+
+**File:** `host/src/kernel/plugins/Slot.tsx`
+
+```typescript
+import { useContext } from 'react';
+import { SlotContext } from './SlotProvider';
+import type { SlotName } from './types';
+
+interface SlotProps {
+  name: SlotName;
+  children?: React.ReactNode; // Fallback content
+  className?: string;
+}
+
+/**
+ * Slot - Component that renders injected content from plugins
+ *
+ * Plugins can register content to be rendered in specific slots
+ * throughout the host layout (sidebar, topbar, etc.)
+ */
+export function Slot({ name, children, className }: SlotProps) {
+  const { getSlotContent } = useContext(SlotContext);
+
+  const content = getSlotContent(name);
+
+  if (!content || content.length === 0) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div className={className}>
+      {content.map((item, index) => (
+        <div key={`${item.slot}-${index}`} className="slot-item">
+          {item.condition === undefined || item.condition() ? (
+            <item.component {...(item.props || {})} />
+          ) : null}
+        </div>
+      ))}
+      {children}
+    </div>
+  );
+}
+```
+
+### Step 2: Create Slot Provider
+
+**File:** `host/src/kernel/plugins/SlotProvider.tsx`
+
+```typescript
+import { createContext, useContext, ReactNode } from 'react';
+import type { SlotInjection, SlotName } from './types';
+import { usePluginStore } from './store';
+
+interface SlotContextValue {
+  getSlotContent: (name: SlotName) => SlotInjection[];
+  registerSlot: (name: SlotName, injection: SlotInjection) => void;
+  unregisterSlot: (name: SlotName, component: ReactNode) => void;
+}
+
+const SlotContext = createContext<SlotContextValue | null>(null);
+
+interface SlotProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * SlotProvider - Provides slot injection system to the app
+ *
+ * This provider:
+ * 1. Collects slot injections from all enabled plugins
+ * 2. Sorts them by order
+ * 3. Provides getSlotContent function for Slot components
+ */
+export function SlotProvider({ children }: SlotProviderProps) {
+  const plugins = usePluginStore((state) => state.plugins);
+
+  /**
+   * Get all content for a slot from enabled plugins
+   */
+  const getSlotContent = (name: SlotName): SlotInjection[] => {
+    const injections: SlotInjection[] = [];
+
+    // Collect injections from all enabled plugins
+    for (const plugin of Object.values(plugins)) {
+      if (!plugin.enabled || !plugin.loaded) continue;
+
+      const config = pluginLoader.getPluginConfig(plugin.id);
+      if (!config) continue;
+
+      for (const slot of config.slots) {
+        if (slot.slot === name) {
+          injections.push(slot);
+        }
+      }
+    }
+
+    // Sort by order (lower = higher priority = first)
+    return injections.sort((a, b) => (a.order || 100) - (b.order || 100));
+  };
+
+  /**
+   * Register a slot injection (for dynamic registration)
+   */
+  const registerSlot = (name: SlotName, injection: SlotInjection) => {
+    // This would be used for runtime slot registration
+    // For now, slots are registered via plugin config
+    console.log('[SlotProvider] Register slot:', name);
+  };
+
+  /**
+   * Unregister a slot injection
+   */
+  const unregisterSlot = (name: SlotName, component: ReactNode) => {
+    console.log('[SlotProvider] Unregister slot:', name);
+  };
+
+  return (
+    <SlotContext.Provider value={{ getSlotContent, registerSlot, unregisterSlot }}>
+      {children}
+    </SlotContext.Provider>
+  );
+}
+
+/**
+ * Hook to access slot context
+ */
+export function useSlots() {
+  const context = useContext(SlotContext);
+  if (!context) {
+    throw new Error('useSlots must be used within SlotProvider');
+  }
+  return context;
+}
+```
+
+---
+
+## Task 6: Update Layout to Use Slots
+
+**Files:**
+- Modify: `host/src/layout/Sidebar.tsx`
+- Modify: `host/src/layout/Topbar.tsx`
+
+### Step 1: Update sidebar with slots
+
+**File:** `host/src/layout/Sidebar.tsx`
+
+Add imports and update component:
+
+```typescript
+import { Link, NavLink } from '@modern-js/runtime/router';
+import { useGlobalKernelState } from '../kernel/shared-state';
+import { Slot } from '../kernel/plugins/Slot';
+import {
+  Home,
+  LayoutDashboard,
+  Settings,
+  ChevronLeft,
+  ChevronRight,
+  CheckSquare,
+} from 'lucide-react';
+import { cn } from '../kernel/lib/utils';
+
+const navItems = [
+  { to: '/', icon: Home, label: 'Home' },
+  { to: '/dashboard', icon: LayoutDashboard, label: 'Dashboard' },
+  { to: '/todos', icon: CheckSquare, label: 'Todos' },
+];
+
+export function Sidebar() {
+  const { sidebarOpen, toggleSidebar, mobileMenuOpen } = useGlobalKernelState();
+
+  return (
+    <>
+      {/* Mobile sidebar */}
+      <aside
+        className={cn(
+          'fixed inset-y-0 left-0 z-50 w-64 transform border-r bg-card transition-transform duration-300 lg:hidden',
+          mobileMenuOpen ? 'translate-x-0' : '-translate-x-full'
+        )}
+      >
+        {/* Slot: sidebar top */}
+        <Slot name="sidebar:top" className="border-b p-4" />
+
+        <div className="flex h-16 items-center justify-between border-b px-6">
+          <Link to="/" className="flex items-center gap-2 font-semibold">
+            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+              L
+            </div>
+            <span>Lego-One</span>
+          </Link>
+        </div>
+
+        {/* Slot: sidebar nav (before nav items) */}
+        <Slot name="sidebar:nav" />
+
+        <nav className="space-y-1 p-4">
+          {navItems.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              end={item.to === '/'}
+              className={({ isActive }) =>
+                cn(
+                  'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                  isActive
+                    ? 'bg-primary text-primary-foreground'
+                    : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                )
+              }
+            >
+              <item.icon className="h-5 w-5" />
+              {item.label}
+            </NavLink>
+          ))}
+        </nav>
+
+        {/* Slot: sidebar bottom */}
+        <Slot name="sidebar:bottom" className="absolute bottom-0 left-0 right-0 border-t p-4" />
+
+        <div className="absolute bottom-0 left-0 right-0 border-t p-4">
+          <NavLink
+            to="/settings"
+            className={({ isActive }) =>
+              cn(
+                'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                isActive
+                  ? 'bg-primary text-primary-foreground'
+                  : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+              )
+            }
+          >
+            <Settings className="h-5 w-5" />
+            Settings
+          </NavLink>
+        </div>
+      </aside>
+
+      {/* Desktop sidebar */}
+      <aside
+        className={cn(
+          'fixed inset-y-0 left-0 z-30 hidden border-r bg-card transition-all duration-300 lg:block',
+          sidebarOpen ? 'w-64' : 'w-16'
+        )}
+      >
+        {/* Slot: sidebar top (desktop) */}
+        <Slot name="sidebar:top" className="border-b p-4" />
+
+        <div className="flex h-16 items-center justify-between border-b px-4">
+          {sidebarOpen ? (
+            <Link to="/" className="flex items-center gap-2 font-semibold">
+              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                L
+              </div>
+              <span>Lego-One</span>
+            </Link>
+          ) : (
+            <Link to="/" className="flex items-center justify-center">
+              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                L
+              </div>
+            </Link>
+          )}
+
+          <button
+            onClick={toggleSidebar}
+            className="rounded-lg p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
+          >
+            {sidebarOpen ? (
+              <ChevronLeft className="h-5 w-5" />
+            ) : (
+              <ChevronRight className="h-5 w-5" />
+            )}
+          </button>
+        </div>
+
+        {/* Slot: sidebar nav (desktop) */}
+        <Slot name="sidebar:nav" />
+
+        <nav className="space-y-1 p-2">
+          {navItems.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              end={item.to === '/'}
+              className={({ isActive }) =>
+                cn(
+                  'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                  !sidebarOpen && 'justify-center',
+                  isActive
+                    ? 'bg-primary text-primary-foreground'
+                    : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                )
+              }
+              title={!sidebarOpen ? item.label : undefined}
+            >
+              <item.icon className="h-5 w-5 flex-shrink-0" />
+              {sidebarOpen && <span>{item.label}</span>}
+            </NavLink>
+          ))}
+        </nav>
+
+        {/* Slot: sidebar bottom (desktop) */}
+        <Slot name="sidebar:bottom" className="absolute bottom-0 left-0 right-0 border-t p-2" />
+
+        <div className="absolute bottom-0 left-0 right-0 border-t p-2">
+          <NavLink
+            to="/settings"
+            className={({ isActive }) =>
+              cn(
+                'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                !sidebarOpen && 'justify-center',
+                isActive
+                  ? 'bg-primary text-primary-foreground'
+                  : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+              )
+            }
+            title={!sidebarOpen ? 'Settings' : undefined}
+          >
+            <Settings className="h-5 w-5 flex-shrink-0" />
+            {sidebarOpen && <span>Settings</span>}
+          </NavLink>
+        </div>
+      </aside>
+    </>
+  );
+}
+```
+
+### Step 2: Update topbar with slots
+
+**File:** `host/src/layout/Topbar.tsx`
+
+```typescript
+import { useGlobalKernelState } from '../kernel/shared-state';
+import { Menu, Bell } from 'lucide-react';
+import { LogoutButton } from '../kernel/auth/components/LogoutButton';
+import { useAuth } from '../kernel/auth/hooks';
+import { OrganizationSelector } from '../kernel/rbac/components/OrganizationSelector';
+import { Slot } from '../kernel/plugins/Slot';
+
+export function Topbar() {
+  const { toggleMobileMenu } = useGlobalKernelState();
+  const { isAuthenticated } = useAuth();
+
+  return (
+    <header className="sticky top-0 z-20 flex h-16 items-center gap-4 border-b bg-background px-6">
+      {/* Mobile menu button */}
+      <button
+        onClick={toggleMobileMenu}
+        className="lg:hidden rounded-lg p-2 text-muted-foreground hover:bg-muted"
+      >
+        <Menu className="h-5 w-5" />
+      </button>
+
+      {/* Slot: topbar left */}
+      <Slot name="topbar:left" className="flex items-center gap-2" />
+
+      {/* Organization selector */}
+      {isAuthenticated && <OrganizationSelector />}
+
+      {/* Slot: topbar center */}
+      <Slot name="topbar:center" className="flex-1" />
+
+      {/* Breadcrumb/spacer */}
+      <div className="flex-1" />
+
+      {/* Slot: topbar right */}
+      <Slot name="topbar:right" className="flex items-center gap-2" />
+
+      {/* Actions */}
+      <div className="flex items-center gap-2">
+        {isAuthenticated && (
+          <button className="rounded-lg p-2 text-muted-foreground hover:bg-muted">
+            <Bell className="h-5 w-5" />
+          </button>
+        )}
+
+        {isAuthenticated && <LogoutButton />}
+      </div>
+    </header>
+  );
+}
+```
+
+---
+
+## Task 7: Create Plugin Barrel Export
+
+**Files:**
+- Create: `host/src/kernel/plugins/index.ts`
+
+### Step 1: Create barrel export
+
+**File:** `host/src/kernel/plugins/index.ts`
+
+```typescript
+export * from './types';
+export * from './schemas';
+export * from './store';
+export * from './loader';
+export * from './Slot';
+export * from './SlotProvider';
+```
+
+---
+
+## Task 8: Update Bootstrap for Plugin System
+
+**Files:**
+- Modify: `host/src/bootstrap.tsx`
+
+### Step 1: Add SlotProvider to bootstrap
+
+**File:** `host/src/bootstrap.tsx`
+
+```typescript
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from '@modern-js/runtime/router';
+import App from './App';
+import { registerSharedState } from './kernel/shared-state';
+import { PocketBaseProvider } from './kernel/providers';
+import { QueryProvider } from './kernel/providers';
+import { ThemeProvider } from './kernel/providers';
+import { Toaster } from './kernel/components/ui/toaster';
+import { ChannelProvider, initializeChannelBus } from './kernel/channels';
+import { SlotProvider, usePluginStore } from './kernel/plugins';
+import { pluginLoader, initializePluginLoader } from './kernel/plugins/loader';
+import Garfish from 'garfish';
+
+// Register shared state bridge for plugins
+registerSharedState();
+
+// Initialize Garfish channel bus
+initializeChannelBus(Garfish);
+
+// Initialize plugin loader
+initializePluginLoader(Garfish);
+
+// Initialize plugin store from config
+function initializePlugins() {
+  const store = usePluginStore.getState();
+  store.initializeFromConfig();
+}
+
+// Create root
+const container = document.getElementById('root');
+if (container) {
+  const root = createRoot(container);
+
+  initializePlugins();
+
+  root.render(
+    <StrictMode>
+      <BrowserRouter>
+        <ThemeProvider>
+          <QueryProvider>
+            <PocketBaseProvider>
+              <SlotProvider>
+                <ChannelProvider />
+                <App />
+                <Toaster />
+              </SlotProvider>
+            </PocketBaseProvider>
+          </QueryProvider>
+        </ThemeProvider>
+      </BrowserRouter>
+    </StrictMode>
+  );
+}
+```
+
+---
+
+## Task 9: Update Kernel Exports
+
+**Files:**
+- Modify: `host/src/kernel/index.ts`
+
+### Step 1: Add plugins to exports
+
+**File:** `host/src/kernel/index.ts`
+
+```typescript
+export * from './shared-state';
+export * from './providers';
+export * from './lib/utils';
+export * from './components';
+export * from './channels';
+export * from './auth';
+export * from './rbac';
+export * from './plugins';
+```
+
+---
+
+## Verification
+
+### Step 1: Build the host
+
+**Run:**
+
+```bash
+cd host
+pnpm run build
+```
+
+Expected: Build completes without errors.
+
+### Step 2: Start development server
+
+**Run:**
+
+```bash
+cd host
+pnpm run dev
+```
+
+Expected: Server starts on http://localhost:8080
+
+### Step 3: Verify plugin system
+
+1. Login to the app
+2. Check browser console for plugin initialization messages
+3. Verify plugin store is initialized (check localStorage)
+4. Slot components should render without errors (empty until plugins register content)
+
+---
+
+## Summary
+
+After completing this document, you will have:
+
+1. ✅ Complete plugin type system with manifests, configs, and slots
+2. ✅ SaaS config file for enabling/disabling plugins
+3. ✅ Zustand plugin store for state management
+4. ✅ Plugin loader service for dynamic plugin loading
+5. ✅ Slot system with Slot components and provider
+6. ✅ Updated layout with slot injection points
+7. ✅ Plugin registry and lifecycle management
+8. ✅ Foundation for admin UI plugin management
+
+**Next:** `09-dashboard-plugin.md` - Implement the Dashboard plugin with stats, recent activity, and quick actions.
+
+---
+
+## Files Created
+
+```
+host/
+└── src/
+    ├── kernel/
+    │   └── plugins/
+    │       ├── types.ts
+    │       ├── schemas.ts
+    │       ├── store.ts
+    │       ├── loader.ts
+    │       ├── Slot.tsx
+    │       ├── SlotProvider.tsx
+    │       └── index.ts
+    ├── saas.config.ts
+    └── bootstrap.tsx (modified)
+
+layout/
+├── Sidebar.tsx (modified)
+└── Topbar.tsx (modified)
+
+kernel/index.ts (modified)
+```