create-lego-one 2.0.12 → 2.0.14

package/template/docs/framework/plans/10-todo-plugin.md

@@ -0,0 +1,1343 @@
+# Todo Plugin Implementation Plan
+
+> **For AI Implementing This Plan:** This is document 10 of 13. Complete documents 01-09 first.
+
+**Goal:** Implement the Todo plugin with full CRUD functionality (Create, Read, Update, Delete), demonstrating a complete data-driven plugin with PocketBase integration.
+
+**Architecture:** Todo plugin is a Modern.js app registered as a Garfish sub-app. It manages todo items stored in PocketBase with full multi-tenancy support. Uses TanStack Query for data fetching and mutations.
+
+**Tech Stack:** Modern.js, React, TypeScript, TanStack Query, PocketBase, Zod validation, Tailwind CSS
+
+---
+
+## Prerequisites
+
+- ✅ Completed `01-infrastructure-setup.md`
+- ✅ Completed `02-pocketbase-setup.md` (todos collection)
+- ✅ Completed `03-host-kernel.md` through `09-dashboard-plugin.md`
+
+---
+
+## Task 1: Create Todo Plugin Structure
+
+**Files:**
+- Create: `packages/plugins/@lego/plugin-todo/package.json`
+- Create: `packages/plugins/@lego/plugin-todo/tsconfig.json`
+- Create: `packages/plugins/@lego/plugin-todo/modern.config.ts`
+- Create: `packages/plugins/@lego/plugin-todo/.gitignore`
+
+### Step 1: Create package.json
+
+**File:** `packages/plugins/@lego/plugin-todo/package.json`
+
+```json
+{
+  "name": "@lego/plugin-todo",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "modern dev",
+    "build": "modern build",
+    "start": "modern start",
+    "lint": "eslint src --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@garfish/hooks": "^1.22.0",
+    "@garfish/router": "^1.22.0",
+    "@garfish/react-scope": "^1.22.0",
+    "@hookform/resolvers": "^3.9.0",
+    "@modern-js/runtime": "^2.60.0",
+    "@modern-js/runtime/garfish": "^2.60.0",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@tanstack/react-query": "^5.59.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.454.0",
+    "pocketbase": "^0.21.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.0",
+    "tailwind-merge": "^2.5.4",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@modern-js/app-tools": "^2.60.0",
+    "@modern-js/plugin-garfish": "^2.60.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.15",
+    "typescript": "^5.6.3"
+  }
+}
+```
+
+### Step 2: Create tsconfig.json
+
+**File:** `packages/plugins/@lego/plugin-todo/tsconfig.json`
+
+```json
+{
+  "extends": "@modern-js/tsconfig/base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}
+```
+
+### Step 3: Create modern.config.ts
+
+**File:** `packages/plugins/@lego/plugin-todo/modern.config.ts`
+
+```typescript
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { garfishPlugin } from '@modern-js/plugin-garfish';
+
+export default defineConfig({
+  dev: {
+    port: 3002,
+  },
+
+  runtime: {
+    router: true,
+  },
+
+  deploy: {
+    microFrontend: true,
+  },
+
+  plugins: [appTools(), garfishPlugin()],
+});
+```
+
+### Step 4: Create .gitignore
+
+**File:** `packages/plugins/@lego/plugin-todo/.gitignore`
+
+```
+node_modules/
+dist/
+.modern/
+*.local
+.DS_Store
+```
+
+### Step 5: Install dependencies
+
+**Run:** From root directory
+
+```bash
+pnpm install
+```
+
+---
+
+## Task 2: Create Todo Types and Schemas
+
+**Files:**
+- Create: `packages/plugins/@lego/plugin-todo/src/types.ts`
+- Create: `packages/plugins/@lego/plugin-todo/src/schemas.ts`
+
+### Step 1: Create todo types
+
+**File:** `packages/plugins/@lego/plugin-todo/src/types.ts`
+
+```typescript
+import type { Record } from 'pocketbase';
+
+/**
+ * Todo item from PocketBase
+ */
+export interface Todo {
+  id: string;
+  title: string;
+  description?: string;
+  completed: boolean;
+  priority: 'low' | 'medium' | 'high';
+  dueDate?: string;
+  organizationId: string;
+  ownerId: string;
+  created: string;
+  updated: string;
+}
+
+/**
+ * Todo form data
+ */
+export interface TodoFormData {
+  title: string;
+  description?: string;
+  priority: 'low' | 'medium' | 'high';
+  dueDate?: string;
+}
+
+/**
+ * Todo filter options
+ */
+export interface TodoFilters {
+  status?: 'all' | 'active' | 'completed';
+  priority?: 'all' | 'low' | 'medium' | 'high';
+  search?: string;
+}
+
+/**
+ * Todo list item with expand
+ */
+export interface TodoWithOwner extends Todo {
+  ownerName?: string;
+  ownerEmail?: string;
+}
+```
+
+### Step 2: Create Zod schemas
+
+**File:** `packages/plugins/@lego/plugin-todo/src/schemas.ts`
+
+```typescript
+import { z } from 'zod';
+
+/**
+ * Todo form validation schema
+ */
+export const todoFormSchema = z.object({
+  title: z.string()
+    .min(1, 'Title is required')
+    .max(200, 'Title must be less than 200 characters'),
+  description: z.string()
+    .max(1000, 'Description must be less than 1000 characters')
+    .optional(),
+  priority: z.enum(['low', 'medium', 'high'], {
+    required_error: 'Priority is required',
+  }),
+  dueDate: z.string().optional(),
+});
+
+export type TodoFormInput = z.infer<typeof todoFormSchema>;
+
+/**
+ * Todo update schema (all fields optional)
+ */
+export const todoUpdateSchema = z.object({
+  title: z.string()
+    .min(1, 'Title is required')
+    .max(200, 'Title must be less than 200 characters')
+    .optional(),
+  description: z.string()
+    .max(1000, 'Description must be less than 1000 characters')
+    .optional(),
+  completed: z.boolean().optional(),
+  priority: z.enum(['low', 'medium', 'high']).optional(),
+  dueDate: z.string().optional(),
+});
+
+export type TodoUpdateInput = z.infer<typeof todoUpdateSchema>;
+```
+
+---
+
+## Task 3: Create Plugin Configuration
+
+**Files:**
+- Create: `packages/plugins/@lego/plugin-todo/src/plugin.config.ts`
+- Create: `packages/plugins/@lego/plugin-todo/src/plugin.ts`
+
+### Step 1: Create plugin config
+
+**File:** `packages/plugins/@lego/plugin-todo/src/plugin.config.ts`
+
+```typescript
+import type { PluginConfig } from '@lego/kernel/plugins';
+import { SidebarWidget } from './components/SidebarWidget';
+
+/**
+ * Todo plugin configuration
+ */
+export const pluginConfig: PluginConfig = {
+  manifest: {
+    name: '@lego/plugin-todo',
+    version: '1.0.0',
+    displayName: 'Todo',
+    description: 'Task management with full CRUD functionality',
+    author: 'Lego-One',
+    permissions: ['todos.manage'],
+  },
+
+  enabled: true,
+
+  slots: [
+    {
+      slot: 'sidebar:nav',
+      component: SidebarWidget,
+      order: 60, // After Dashboard
+      props: {
+        to: '/todos',
+        icon: 'CheckSquare',
+        label: 'Todos',
+      },
+    },
+  ],
+
+  routes: [
+    {
+      path: '/todos',
+      component: () => import('./pages/TodoPage').then(m => m.default),
+      protected: true,
+      permissions: ['todos.read'],
+    },
+  ],
+
+  settings: [
+    {
+      key: 'defaultPriority',
+      type: 'select',
+      label: 'Default Priority',
+      description: 'Default priority for new todos',
+      defaultValue: 'medium',
+      options: [
+        { label: 'Low', value: 'low' },
+        { label: 'Medium', value: 'medium' },
+        { label: 'High', value: 'high' },
+      ],
+    },
+    {
+      key: 'showCompleted',
+      type: 'boolean',
+      label: 'Show Completed',
+      description: 'Show completed todos in the list',
+      defaultValue: true,
+    },
+  ],
+};
+```
+
+### Step 2: Create plugin entry point
+
+**File:** `packages/plugins/@lego/plugin-todo/src/plugin.ts`
+
+```typescript
+/**
+ * Plugin entry point
+ */
+import { pluginConfig } from './plugin.config';
+import TodoApp from './App';
+
+export default {
+  config: pluginConfig,
+  App: TodoApp,
+};
+
+export { pluginConfig };
+export { default as App } from './App';
+```
+
+---
+
+## Task 4: Create Todo Hooks (PocketBase Integration)
+
+**Files:**
+- Create: `packages/plugins/@lego/plugin-todo/src/hooks/usePocketBase.ts`
+- Create: `packages/plugins/@lego/plugin-todo/src/hooks/useTodos.ts`
+- Create: `packages/plugins/@lego/plugin-todo/src/hooks/useCreateTodo.ts`
+- Create: `packages/plugins/@lego/plugin-todo/src/hooks/useUpdateTodo.ts`
+- Create: `packages/plugins/@lego/plugin-todo/src/hooks/useDeleteTodo.ts`
+
+### Step 1: Create PocketBase hook
+
+**File:** `packages/plugins/@lego/plugin-todo/src/hooks/usePocketBase.ts`
+
+```typescript
+import { useEffect, useState } from 'react';
+
+export function usePocketBase() {
+  const [pb, setPb] = useState<any>(null);
+
+  useEffect(() => {
+    const kernelState = (window as any).__LEGO_KERNEL_STATE__;
+
+    if (!kernelState) {
+      console.error('[Todo] Kernel state bridge not found');
+      return;
+    }
+
+    const pbUrl = import.meta.env.VITE_POCKETBASE_URL || 'http://127.0.0.1:8090';
+    const PocketBase = require('pocketbase').default;
+    const client = new PocketBase(pbUrl);
+
+    // Sync auth token
+    const state = kernelState.useGlobalKernelState.getState();
+    if (state.token) {
+      client.authStore.save(state.token, null);
+    }
+
+    const unsubscribe = kernelState.useGlobalKernelState.subscribe((newState: any) => {
+      if (newState.token && newState.token !== client.authStore.token) {
+        client.authStore.save(newState.token, null);
+      }
+    });
+
+    setPb(client);
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  return pb;
+}
+```
+
+### Step 2: Create useTodos hook
+
+**File:** `packages/plugins/@lego/plugin-todo/src/hooks/useTodos.ts`
+
+```typescript
+import { useQuery } from '@tanstack/react-query';
+import { usePocketBase } from './usePocketBase';
+import type { TodoWithOwner, TodoFilters } from '../types';
+
+export function useTodos(filters: TodoFilters = {}) {
+  const pb = usePocketBase();
+
+  return useQuery({
+    queryKey: ['todos', filters],
+    queryFn: async (): Promise<TodoWithOwner[]> => {
+      if (!pb) {
+        throw new Error('PocketBase not initialized');
+      }
+
+      const kernelState = (window as any).__LEGO_KERNEL_STATE__;
+      const state = kernelState?.useGlobalKernelState?.getState();
+
+      if (!state?.organization?.id) {
+        return [];
+      }
+
+      const orgId = state.organization.id;
+
+      // Build filter
+      let filterParts: string[] = [`organizationId = "${orgId}"`];
+
+      if (filters.status === 'active') {
+        filterParts.push('completed = false');
+      } else if (filters.status === 'completed') {
+        filterParts.push('completed = true');
+      }
+
+      if (filters.priority && filters.priority !== 'all') {
+        filterParts.push(`priority = "${filters.priority}"`);
+      }
+
+      if (filters.search) {
+        filterParts.push(`title ~ "${filters.search}"`);
+      }
+
+      const result = await pb.collection('todos').getList(1, 50, {
+        filter: filterParts.join(' && '),
+        sort: filters.status === 'completed' ? '-updated,-created' : '-created',
+        expand: 'ownerId',
+      });
+
+      return result.items.map((item: any) => ({
+        id: item.id,
+        title: item.title,
+        description: item.description,
+        completed: item.completed,
+        priority: item.priority,
+        dueDate: item.dueDate,
+        organizationId: item.organizationId,
+        ownerId: item.ownerId,
+        created: item.created,
+        updated: item.updated,
+        ownerName: item.expand?.ownerId?.name || item.expand?.ownerId?.email,
+        ownerEmail: item.expand?.ownerId?.email,
+      }));
+    },
+    enabled: !!pb,
+  });
+}
+```
+
+### Step 3: Create useCreateTodo hook
+
+**File:** `packages/plugins/@lego/plugin-todo/src/hooks/useCreateTodo.ts`
+
+```typescript
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { usePocketBase } from './usePocketBase';
+import type { TodoFormData } from '../types';
+import { useToastChannel } from '@lego/kernel/channels';
+
+export function useCreateTodo() {
+  const pb = usePocketBase();
+  const queryClient = useQueryClient();
+  const publishToast = useToastChannel();
+
+  return useMutation({
+    mutationFn: async (data: TodoFormData) => {
+      if (!pb) {
+        throw new Error('PocketBase not initialized');
+      }
+
+      const kernelState = (window as any).__LEGO_KERNEL_STATE__;
+      const state = kernelState?.useGlobalKernelState?.getState();
+
+      if (!state?.organization?.id) {
+        throw new Error('No organization selected');
+      }
+
+      const result = await pb.collection('todos').create({
+        title: data.title,
+        description: data.description || '',
+        completed: false,
+        priority: data.priority,
+        dueDate: data.dueDate || null,
+        organizationId: state.organization.id,
+        ownerId: state.user?.id,
+      });
+
+      return result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['todos'] });
+      publishToast({
+        type: 'success',
+        title: 'Todo created',
+        description: 'Your todo has been created successfully',
+      });
+    },
+    onError: (error: any) => {
+      publishToast({
+        type: 'error',
+        title: 'Failed to create todo',
+        description: error.message || 'An error occurred',
+      });
+    },
+  });
+}
+```
+
+### Step 4: Create useUpdateTodo hook
+
+**File:** `packages/plugins/@lego/plugin-todo/src/hooks/useUpdateTodo.ts`
+
+```typescript
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { usePocketBase } from './usePocketBase';
+import { useToastChannel } from '@lego/kernel/channels';
+
+export function useUpdateTodo() {
+  const pb = usePocketBase();
+  const queryClient = useQueryClient();
+  const publishToast = useToastChannel();
+
+  return useMutation({
+    mutationFn: async ({ id, data }: { id: string; data: Partial<any> }) => {
+      if (!pb) {
+        throw new Error('PocketBase not initialized');
+      }
+
+      const result = await pb.collection('todos').update(id, data);
+
+      return result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['todos'] });
+    },
+    onError: (error: any) => {
+      publishToast({
+        type: 'error',
+        title: 'Failed to update todo',
+        description: error.message || 'An error occurred',
+      });
+    },
+  });
+}
+```
+
+### Step 5: Create useDeleteTodo hook
+
+**File:** `packages/plugins/@lego/plugin-todo/src/hooks/useDeleteTodo.ts`
+
+```typescript
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { usePocketBase } from './usePocketBase';
+import { useToastChannel } from '@lego/kernel/channels';
+
+export function useDeleteTodo() {
+  const pb = usePocketBase();
+  const queryClient = useQueryClient();
+  const publishToast = useToastChannel();
+
+  return useMutation({
+    mutationFn: async (id: string) => {
+      if (!pb) {
+        throw new Error('PocketBase not initialized');
+      }
+
+      await pb.collection('todos').delete(id);
+
+      return id;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['todos'] });
+      publishToast({
+        type: 'success',
+        title: 'Todo deleted',
+        description: 'Your todo has been deleted',
+      });
+    },
+    onError: (error: any) => {
+      publishToast({
+        type: 'error',
+        title: 'Failed to delete todo',
+        description: error.message || 'An error occurred',
+      });
+    },
+  });
+}
+```
+
+---
+
+## Task 5: Create Todo Components
+
+**Files:**
+- Create: `packages/plugins/@lego/plugin-todo/src/components/TodoList.tsx`
+- Create: `packages/plugins/@lego/plugin-todo/src/components/TodoItem.tsx`
+- Create: `packages/plugins/@lego/plugin-todo/src/components/TodoForm.tsx`
+- Create: `packages/plugins/@lego/plugin-todo/src/components/TodoDialog.tsx`
+- Create: `packages/plugins/@lego/plugin-todo/src/components/TodoFilters.tsx`
+- Create: `packages/plugins/@lego/plugin-todo/src/components/SidebarWidget.tsx`
+
+### Step 1: Create todo list component
+
+**File:** `packages/plugins/@lego/plugin-todo/src/components/TodoList.tsx`
+
+```typescript
+import { TodoWithOwner } from '../types';
+import { TodoItem } from './TodoItem';
+
+interface TodoListProps {
+  todos: TodoWithOwner[];
+  isLoading?: boolean;
+}
+
+export function TodoList({ todos, isLoading }: TodoListProps) {
+  if (isLoading) {
+    return (
+      <div className="space-y-3">
+        {[1, 2, 3, 4, 5].map((i) => (
+          <div key={i} className="h-20 animate-pulse rounded-lg bg-muted" />
+        ))}
+      </div>
+    );
+  }
+
+  if (todos.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-center">
+        <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted">
+          <span className="text-2xl">📝</span>
+        </div>
+        <h3 className="mt-4 text-lg font-semibold">No todos found</h3>
+        <p className="mt-2 text-sm text-muted-foreground">
+          Create your first todo to get started
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {todos.map((todo) => (
+        <TodoItem key={todo.id} todo={todo} />
+      ))}
+    </div>
+  );
+}
+```
+
+### Step 2: Create todo item component
+
+**File:** `packages/plugins/@lego/plugin-todo/src/components/TodoItem.tsx`
+
+```typescript
+import { useState } from 'react';
+import { CheckSquare, Square, Trash2, Edit2, Calendar } from 'lucide-react';
+import { TodoWithOwner } from '../types';
+import { useUpdateTodo } from '../hooks/useUpdateTodo';
+import { useDeleteTodo } from '../hooks/useDeleteTodo';
+import { cn } from '@lego/kernel/lib/utils';
+import { formatRelativeTime } from '@lego/kernel/lib/utils';
+
+interface TodoItemProps {
+  todo: TodoWithOwner;
+}
+
+const priorityColors = {
+  low: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
+  medium: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300',
+  high: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300',
+};
+
+export function TodoItem({ todo }: TodoItemProps) {
+  const updateTodo = useUpdateTodo();
+  const deleteTodo = useDeleteTodo();
+  const [isEditing, setIsEditing] = useState(false);
+
+  const handleToggleComplete = () => {
+    updateTodo.mutate({
+      id: todo.id,
+      data: { completed: !todo.completed },
+    });
+  };
+
+  const handleDelete = () => {
+    if (confirm('Are you sure you want to delete this todo?')) {
+      deleteTodo.mutate(todo.id);
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'group rounded-lg border p-4 transition-colors hover:bg-muted/50',
+        todo.completed && 'opacity-60'
+      )}
+    >
+      <div className="flex items-start gap-3">
+        {/* Checkbox */}
+        <button
+          onClick={handleToggleComplete}
+          disabled={updateTodo.isPending}
+          className="mt-0.5 shrink-0"
+        >
+          {todo.completed ? (
+            <CheckSquare className="h-5 w-5 text-primary" />
+          ) : (
+            <Square className="h-5 w-5 text-muted-foreground" />
+          )}
+        </button>
+
+        {/* Content */}
+        <div className="flex-1 space-y-1">
+          <div className="flex items-start justify-between gap-2">
+            <h4
+              className={cn(
+                'font-medium',
+                todo.completed && 'line-through text-muted-foreground'
+              )}
+            >
+              {todo.title}
+            </h4>
+            <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100">
+              <button
+                onClick={() => setIsEditing(true)}
+                className="rounded p-1 hover:bg-muted"
+              >
+                <Edit2 className="h-4 w-4" />
+              </button>
+              <button
+                onClick={handleDelete}
+                disabled={deleteTodo.isPending}
+                className="rounded p-1 hover:bg-destructive hover:text-destructive-foreground"
+              >
+                <Trash2 className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+
+          {todo.description && (
+            <p className="text-sm text-muted-foreground">{todo.description}</p>
+          )}
+
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <span className={cn('rounded-full px-2 py-0.5', priorityColors[todo.priority])}>
+              {todo.priority}
+            </span>
+            {todo.dueDate && (
+              <span className="flex items-center gap-1">
+                <Calendar className="h-3 w-3" />
+                {formatRelativeTime(todo.dueDate)}
+              </span>
+            )}
+            {todo.ownerName && (
+              <span>Created by {todo.ownerName}</span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Edit dialog would go here - for now using inline state */}
+      {isEditing && (
+        <div className="mt-4 pt-4 border-t">
+          <p className="text-sm text-muted-foreground">Edit functionality coming soon</p>
+          <button
+            onClick={() => setIsEditing(false)}
+            className="mt-2 text-sm text-primary hover:underline"
+          >
+            Close
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+### Step 3: Create todo form component
+
+**File:** `packages/plugins/@lego/plugin-todo/src/components/TodoForm.tsx`
+
+```typescript
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { todoFormSchema, type TodoFormInput } from '../schemas';
+import { Button } from '@lego/kernel/components';
+import { Input } from '@lego/kernel/components';
+import { Label } from '@lego/kernel/components';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@lego/kernel/components';
+
+interface TodoFormProps {
+  onSubmit: (data: TodoFormInput) => void;
+  isLoading?: boolean;
+}
+
+export function TodoForm({ onSubmit, isLoading }: TodoFormProps) {
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<TodoFormInput>({
+    resolver: zodResolver(todoFormSchema),
+    defaultValues: {
+      priority: 'medium',
+    },
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="title">Title *</Label>
+        <Input
+          id="title"
+          placeholder="What needs to be done?"
+          {...register('title')}
+        />
+        {errors.title && (
+          <p className="text-sm text-destructive">{errors.title.message}</p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="description">Description</Label>
+        <Input
+          id="description"
+          placeholder="Add details (optional)"
+          {...register('description')}
+        />
+        {errors.description && (
+          <p className="text-sm text-destructive">{errors.description.message}</p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="priority">Priority *</Label>
+        <Select
+          onValueChange={(value) => setValue('priority', value as any)}
+          defaultValue="medium"
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select priority" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="low">Low</SelectItem>
+            <SelectItem value="medium">Medium</SelectItem>
+            <SelectItem value="high">High</SelectItem>
+          </SelectContent>
+        </Select>
+        {errors.priority && (
+          <p className="text-sm text-destructive">{errors.priority.message}</p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="dueDate">Due Date</Label>
+        <Input
+          id="dueDate"
+          type="date"
+          {...register('dueDate')}
+        />
+      </div>
+
+      <Button type="submit" className="w-full" disabled={isLoading}>
+        {isLoading ? 'Creating...' : 'Create Todo'}
+      </Button>
+    </form>
+  );
+}
+```
+
+### Step 4: Create todo dialog component
+
+**File:** `packages/plugins/@lego/plugin-todo/src/components/TodoDialog.tsx`
+
+```typescript
+import { useState } from 'react';
+import { Plus } from 'lucide-react';
+import { Button } from '@lego/kernel/components';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@lego/kernel/components';
+import { TodoForm } from './TodoForm';
+import { useCreateTodo } from '../hooks/useCreateTodo';
+import type { TodoFormInput } from '../schemas';
+
+export function TodoDialog() {
+  const [open, setOpen] = useState(false);
+  const createTodo = useCreateTodo();
+
+  const handleSubmit = (data: TodoFormInput) => {
+    createTodo.mutate(data, {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button>
+          <Plus className="mr-2 h-4 w-4" />
+          New Todo
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create Todo</DialogTitle>
+          <DialogDescription>
+            Add a new todo item to your list
+          </DialogDescription>
+        </DialogHeader>
+        <TodoForm onSubmit={handleSubmit} isLoading={createTodo.isPending} />
+      </DialogContent>
+    </Dialog>
+  );
+}
+```
+
+### Step 5: Create todo filters component
+
+**File:** `packages/plugins/@lego/plugin-todo/src/components/TodoFilters.tsx`
+
+```typescript
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@lego/kernel/components';
+import { Input } from '@lego/kernel/components';
+import { Label } from '@lego/kernel/components';
+import type { TodoFilters } from '../types';
+
+interface TodoFiltersProps {
+  filters: TodoFilters;
+  onFiltersChange: (filters: TodoFilters) => void;
+}
+
+export function TodoFilters({ filters, onFiltersChange }: TodoFiltersProps) {
+  return (
+    <div className="flex flex-wrap items-center gap-4">
+      <div className="flex items-center gap-2">
+        <Label htmlFor="status">Status</Label>
+        <Select
+          value={filters.status || 'all'}
+          onValueChange={(value) =>
+            onFiltersChange({ ...filters, status: value as any })
+          }
+        >
+          <SelectTrigger id="status" className="w-32">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All</SelectItem>
+            <SelectItem value="active">Active</SelectItem>
+            <SelectItem value="completed">Completed</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Label htmlFor="priority">Priority</Label>
+        <Select
+          value={filters.priority || 'all'}
+          onValueChange={(value) =>
+            onFiltersChange({ ...filters, priority: value as any })
+          }
+        >
+          <SelectTrigger id="priority" className="w-32">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All</SelectItem>
+            <SelectItem value="low">Low</SelectItem>
+            <SelectItem value="medium">Medium</SelectItem>
+            <SelectItem value="high">High</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Label htmlFor="search">Search</Label>
+        <Input
+          id="search"
+          placeholder="Search todos..."
+          value={filters.search || ''}
+          onChange={(e) =>
+            onFiltersChange({ ...filters, search: e.target.value })
+          }
+          className="w-64"
+        />
+      </div>
+    </div>
+  );
+}
+```
+
+### Step 6: Create sidebar widget
+
+**File:** `packages/plugins/@lego/plugin-todo/src/components/SidebarWidget.tsx`
+
+```typescript
+import { NavLink } from '@modern-js/runtime/router';
+import { cn } from '@lego/kernel/lib/utils';
+import { CheckSquare } from 'lucide-react';
+
+interface SidebarWidgetProps {
+  to: string;
+  icon: string;
+  label: string;
+}
+
+export function SidebarWidget({ to, label }: SidebarWidgetProps) {
+  return (
+    <NavLink
+      to={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'
+        )
+      }
+    >
+      <CheckSquare className="h-5 w-5" />
+      <span>{label}</span>
+    </NavLink>
+  );
+}
+```
+
+---
+
+## Task 6: Create Todo Page
+
+**Files:**
+- Create: `packages/plugins/@lego/plugin-todo/src/pages/TodoPage.tsx`
+- Create: `packages/plugins/@lego/plugin-todo/src/App.tsx`
+- Create: `packages/plugins/@lego/plugin-todo/src/global.css`
+
+### Step 1: Create todo page
+
+**File:** `packages/plugins/@lego/plugin-todo/src/pages/TodoPage.tsx`
+
+```typescript
+import { useState } from 'react';
+import { useTodos } from '../hooks/useTodos';
+import { TodoList } from '../components/TodoList';
+import { TodoDialog } from '../components/TodoDialog';
+import { TodoFilters } from '../components/TodoFilters';
+import type { TodoFilters as TodoFiltersType } from '../types';
+import { usePluginReady } from '@lego/kernel/channels';
+
+export default function TodoPage() {
+  const [filters, setFilters] = useState<TodoFiltersType>({
+    status: 'all',
+    priority: 'all',
+  });
+
+  const { data: todos, isLoading } = useTodos(filters);
+
+  // Notify host that plugin is ready
+  usePluginReady('@lego/plugin-todo', '1.0.0');
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Todos</h1>
+          <p className="text-muted-foreground">
+            Manage your tasks and stay organized
+          </p>
+        </div>
+        <TodoDialog />
+      </div>
+
+      {/* Filters */}
+      <TodoFilters filters={filters} onFiltersChange={setFilters} />
+
+      {/* Todo List */}
+      <TodoList todos={todos || []} isLoading={isLoading} />
+    </div>
+  );
+}
+```
+
+### Step 2: Create app component
+
+**File:** `packages/plugins/@lego/plugin-todo/src/App.tsx`
+
+```typescript
+import './global.css';
+
+interface TodoAppProps {
+  basename?: string;
+}
+
+export default function TodoApp({ basename }: TodoAppProps) {
+  return (
+    <div className="todo-plugin">
+      {/* Routes handled by host */}
+    </div>
+  );
+}
+```
+
+### Step 3: Create global CSS
+
+**File:** `packages/plugins/@lego/plugin-todo/src/global.css`
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+```
+
+---
+
+## Task 7: Create Tailwind Config
+
+**Files:**
+- Create: `packages/plugins/@lego/plugin-todo/tailwind.config.ts`
+- Create: `packages/plugins/@lego/plugin-todo/postcss.config.js`
+
+### Step 1: Create Tailwind config
+
+**File:** `packages/plugins/@lego/plugin-todo/tailwind.config.ts`
+
+```typescript
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  darkMode: ['class'],
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;
+```
+
+### Step 2: Create PostCSS config
+
+**File:** `packages/plugins/@lego/plugin-todo/postcss.config.js`
+
+```javascript
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+```
+
+---
+
+## Verification
+
+### Step 1: Build the todo plugin
+
+**Run:**
+
+```bash
+cd packages/plugins/@lego/plugin-todo
+pnpm run build
+```
+
+Expected: Build completes without errors.
+
+### Step 2: Start todo plugin dev server
+
+**Run:**
+
+```bash
+cd packages/plugins/@lego/plugin-todo
+pnpm run dev
+```
+
+Expected: Server starts on http://localhost:3002
+
+### Step 3: Start host dev server (separate terminal)
+
+**Run:**
+
+```bash
+cd host
+pnpm run dev
+```
+
+Expected: Server starts on http://localhost:8080
+
+### Step 4: Test todo plugin
+
+1. Open http://localhost:8080
+2. Login with admin credentials
+3. Navigate to /todos
+4. Should see:
+   - Todos page with filters
+   - "New Todo" button
+   - Todo list (empty initially)
+5. Click "New Todo" and create a todo
+6. Verify todo appears in list
+7. Test completing a todo (click checkbox)
+8. Test deleting a todo
+9. Test filters (status, priority, search)
+
+---
+
+## Summary
+
+After completing this document, you will have:
+
+1. ✅ Complete Todo plugin as Modern.js + Garfish sub-app
+2. ✅ Full CRUD operations for todos
+3. ✅ PocketBase integration with multi-tenancy
+4. ✅ Form validation with Zod
+5. ✅ Todo filters (status, priority, search)
+6. ✅ Create todo dialog with form
+7. ✅ Todo list with items (toggle, delete)
+8. ✅ Channel integration (toasts, ready event)
+9. ✅ Independent dev server (:3002)
+
+**Next:** `11-testing.md` - Implement unit, component, and E2E tests with Vitest and Playwright.
+
+---
+
+## Files Created
+
+```
+packages/plugins/@lego/plugin-todo/
+├── package.json
+├── tsconfig.json
+├── modern.config.ts
+├── tailwind.config.ts
+├── postcss.config.js
+├── .gitignore
+└── src/
+    ├── global.css
+    ├── plugin.ts
+    ├── plugin.config.ts
+    ├── types.ts
+    ├── schemas.ts
+    ├── App.tsx
+    ├── pages/
+    │   └── TodoPage.tsx
+    ├── components/
+    │   ├── TodoList.tsx
+    │   ├── TodoItem.tsx
+    │   ├── TodoForm.tsx
+    │   ├── TodoDialog.tsx
+    │   ├── TodoFilters.tsx
+    │   └── SidebarWidget.tsx
+    └── hooks/
+        ├── usePocketBase.ts
+        ├── useTodos.ts
+        ├── useCreateTodo.ts
+        ├── useUpdateTodo.ts
+        └── useDeleteTodo.ts
+```