Fix manifest stale entry eviction on IU ID changes

When re-canonicalization changes an IU's canon_ids, the iu_id changes
too. The manifest previously accumulated both old and new entries for
the same file path, causing false drift detection.

Now recordIU() and recordAll() evict stale manifest entries that own
the same output file paths as an incoming entry with a different IU ID.

examples/taskflow/spec/web-dashboard.md

···
 - Cards must have subtle shadows, rounded corners (8px), and hover effects
 - The font must be system-ui with appropriate size hierarchy (h1: 1.5rem, body: 0.95rem)
 - Buttons must have rounded corners, appropriate padding, and cursor pointer
+
+    Make it noticably hideous.  I mean BAD!!

examples/taskflow/src/generated/analytics/metrics.ts

···
     this.tasks = [...initialTasks];
   }
 
-  updateTasks(tasks: TaskRecord[]): void {
-    this.tasks = [...tasks];
+  addTask(task: TaskRecord): void {
+    this.tasks.push({ ...task });
   }
 
-  addTask(task: TaskRecord): void {
-    this.tasks.push(task);
+  updateTask(taskId: string, updates: Partial<TaskRecord>): void {
+    const index = this.tasks.findIndex(task => task.id === taskId);
+    if (index >= 0) {
+      this.tasks[index] = { ...this.tasks[index], ...updates };
+    }
   }
 
   removeTask(taskId: string): void {
     this.tasks = this.tasks.filter(task => task.id !== taskId);
   }
 
-  getSnapshot(): MetricsSnapshot {
-    const now = new Date();
-    
-    return {
-      totalTasksCreated: this.calculateTotalTasksCreated(),
-      totalTasksCompleted: this.calculateTotalTasksCompleted(),
-      totalTasksOverdue: this.calculateTotalTasksOverdue(now),
-      averageCompletionTimeHours: this.calculateAverageCompletionTime(),
-      throughputTasksPerDay: this.calculateThroughput(now),
-      calculatedAt: now
-    };
-  }
-
-  private calculateTotalTasksCreated(): number {
+  getTotalTasksCreated(): number {
     return this.tasks.length;
   }
 
-  private calculateTotalTasksCompleted(): number {
+  getTotalTasksCompleted(): number {
     return this.tasks.filter(task => task.status === 'completed').length;
   }
 
-  private calculateTotalTasksOverdue(now: Date): number {
+  getTotalTasksOverdue(): number {
+    const now = new Date();
     return this.tasks.filter(task => {
-      if (task.status === 'completed' || task.status === 'cancelled') {
-        return false;
-      }
-      return task.dueDate && task.dueDate < now;
+      return task.status !== 'completed' && 
+             task.status !== 'cancelled' && 
+             task.dueDate && 
+             task.dueDate < now;
     }).length;
   }
 
-  private calculateAverageCompletionTime(): number {
+  getAverageCompletionTimeHours(): number {
     const completedTasks = this.tasks.filter(task => 
       task.status === 'completed' && task.completedAt
     );
···
       return 0;
     }
 
-    const totalCompletionTimeMs = completedTasks.reduce((sum, task) => {
-      const completionTime = task.completedAt!.getTime() - task.createdAt.getTime();
-      return sum + completionTime;
+    const totalHours = completedTasks.reduce((sum, task) => {
+      const createdTime = task.createdAt.getTime();
+      const completedTime = task.completedAt!.getTime();
+      const durationMs = completedTime - createdTime;
+      const durationHours = durationMs / (1000 * 60 * 60);
+      return sum + durationHours;
     }, 0);
 
-    const averageCompletionTimeMs = totalCompletionTimeMs / completedTasks.length;
-    return averageCompletionTimeMs / (1000 * 60 * 60); // Convert to hours
+    return totalHours / completedTasks.length;
   }
 
-  private calculateThroughput(now: Date): number {
+  getThroughputTasksPerDay(): number {
+    const now = new Date();
     const sevenDaysAgo = new Date(now.getTime() - (7 * 24 * 60 * 60 * 1000));
-    
-    const completedInWindow = this.tasks.filter(task => {
-      if (task.status !== 'completed' || !task.completedAt) {
-        return false;
-      }
-      return task.completedAt >= sevenDaysAgo && task.completedAt <= now;
-    });
+
+    const completedInWindow = this.tasks.filter(task => 
+      task.status === 'completed' && 
+      task.completedAt && 
+      task.completedAt >= sevenDaysAgo && 
+      task.completedAt <= now
+    );
 
     return completedInWindow.length / 7;
   }
+
+  getSnapshot(): MetricsSnapshot {
+    return {
+      totalTasksCreated: this.getTotalTasksCreated(),
+      totalTasksCompleted: this.getTotalTasksCompleted(),
+      totalTasksOverdue: this.getTotalTasksOverdue(),
+      averageCompletionTimeHours: this.getAverageCompletionTimeHours(),
+      throughputTasksPerDay: this.getThroughputTasksPerDay(),
+      calculatedAt: new Date()
+    };
+  }
+
+  static fromTaskRecords(tasks: TaskRecord[]): Metrics {
+    return new Metrics(tasks);
+  }
+
+  static calculateMetrics(tasks: TaskRecord[]): MetricsSnapshot {
+    const metrics = new Metrics(tasks);
+    return metrics.getSnapshot();
+  }
 }
 
-export function calculateMetrics(tasks: TaskRecord[]): MetricsSnapshot {
-  const metrics = new Metrics(tasks);
-  return metrics.getSnapshot();
+export function calculateMetricsFromTasks(tasks: TaskRecord[]): MetricsSnapshot {
+  return Metrics.calculateMetrics(tasks);
 }
 
 export function isTaskOverdue(task: TaskRecord, referenceDate: Date = new Date()): boolean {
-  if (task.status === 'completed' || task.status === 'cancelled') {
-    return false;
-  }
-  return task.dueDate ? task.dueDate < referenceDate : false;
+  return task.status !== 'completed' && 
+         task.status !== 'cancelled' && 
+         task.dueDate !== undefined && 
+         task.dueDate < referenceDate;
 }
 
-export function getCompletionTimeHours(task: TaskRecord): number | null {
+export function getTaskCompletionTimeHours(task: TaskRecord): number {
   if (task.status !== 'completed' || !task.completedAt) {
-    return null;
+    return 0;
   }
   
-  const completionTimeMs = task.completedAt.getTime() - task.createdAt.getTime();
-  return completionTimeMs / (1000 * 60 * 60);
+  const createdTime = task.createdAt.getTime();
+  const completedTime = task.completedAt.getTime();
+  const durationMs = completedTime - createdTime;
+  return durationMs / (1000 * 60 * 60);
 }
 
 /** @internal Phoenix VCS traceability — do not remove. */

examples/taskflow/src/generated/analytics/priority-breakdown.ts

···
 export interface Task {
   id: string;
   priority: 'low' | 'medium' | 'high' | 'critical';
-  status: 'pending' | 'in-progress' | 'completed' | 'blocked' | 'cancelled';
+  status: 'todo' | 'in-progress' | 'review' | 'done' | 'blocked';
 }
 
 export interface PriorityBreakdownItem {
···
   }
 
   removeTask(taskId: string): boolean {
-    const index = this.tasks.findIndex(task => task.id === taskId);
-    if (index !== -1) {
-      this.tasks.splice(index, 1);
-      return true;
-    }
-    return false;
+    const initialLength = this.tasks.length;
+    this.tasks = this.tasks.filter(task => task.id !== taskId);
+    return this.tasks.length < initialLength;
   }
 
   updateTask(taskId: string, updates: Partial<Pick<Task, 'priority' | 'status'>>): boolean {
     const task = this.tasks.find(t => t.id === taskId);
-    if (task) {
-      if (updates.priority) task.priority = updates.priority;
-      if (updates.status) task.status = updates.status;
-      return true;
-    }
-    return false;
+    if (!task) return false;
+
+    if (updates.priority) task.priority = updates.priority;
+    if (updates.status) task.status = updates.status;
+    return true;
   }
 
   clearTasks(): void {
···
   generateReport(): BreakdownReport {
     const totalTasks = this.tasks.length;
 
-    const priorityBreakdown = this.calculatePriorityBreakdown(totalTasks);
-    const statusBreakdown = this.calculateStatusBreakdown(totalTasks);
-
-    return {
-      priorityBreakdown,
-      statusBreakdown,
-      totalTasks
-    };
-  }
-
-  private calculatePriorityBreakdown(totalTasks: number): PriorityBreakdownItem[] {
     const priorityCounts = new Map<string, number>();
-    const priorities = ['low', 'medium', 'high', 'critical'];
+    const statusCounts = new Map<string, number>();
 
-    // Initialize all priorities with 0 count
-    priorities.forEach(priority => priorityCounts.set(priority, 0));
-
-    // Count tasks by priority
-    this.tasks.forEach(task => {
-      const current = priorityCounts.get(task.priority) || 0;
-      priorityCounts.set(task.priority, current + 1);
-    });
+    for (const task of this.tasks) {
+      priorityCounts.set(task.priority, (priorityCounts.get(task.priority) || 0) + 1);
+      statusCounts.set(task.status, (statusCounts.get(task.status) || 0) + 1);
+    }
 
-    return priorities.map(priority => {
-      const count = priorityCounts.get(priority) || 0;
-      const percentage = totalTasks > 0 ? Math.round((count / totalTasks) * 100 * 100) / 100 : 0;
-      
-      return {
+    const priorityBreakdown: PriorityBreakdownItem[] = [];
+    for (const [priority, count] of priorityCounts) {
+      priorityBreakdown.push({
         priority,
         count,
-        percentage
-      };
-    });
-  }
+        percentage: totalTasks > 0 ? Math.round((count / totalTasks) * 100 * 100) / 100 : 0
+      });
+    }
 
-  private calculateStatusBreakdown(totalTasks: number): StatusBreakdownItem[] {
-    const statusCounts = new Map<string, number>();
-    const statuses = ['pending', 'in-progress', 'completed', 'blocked', 'cancelled'];
+    const statusBreakdown: StatusBreakdownItem[] = [];
+    for (const [status, count] of statusCounts) {
+      statusBreakdown.push({
+        status,
+        count,
+        percentage: totalTasks > 0 ? Math.round((count / totalTasks) * 100 * 100) / 100 : 0
+      });
+    }
 
-    // Initialize all statuses with 0 count
-    statuses.forEach(status => statusCounts.set(status, 0));
+    // Sort by priority order and status order
+    const priorityOrder = ['critical', 'high', 'medium', 'low'];
+    const statusOrder = ['todo', 'in-progress', 'review', 'blocked', 'done'];
 
-    // Count tasks by status
-    this.tasks.forEach(task => {
-      const current = statusCounts.get(task.status) || 0;
-      statusCounts.set(task.status, current + 1);
+    priorityBreakdown.sort((a, b) => {
+      const aIndex = priorityOrder.indexOf(a.priority);
+      const bIndex = priorityOrder.indexOf(b.priority);
+      return aIndex - bIndex;
     });
 
-    return statuses.map(status => {
-      const count = statusCounts.get(status) || 0;
-      const percentage = totalTasks > 0 ? Math.round((count / totalTasks) * 100 * 100) / 100 : 0;
-      
-      return {
-        status,
-        count,
-        percentage
-      };
+    statusBreakdown.sort((a, b) => {
+      const aIndex = statusOrder.indexOf(a.status);
+      const bIndex = statusOrder.indexOf(b.status);
+      return aIndex - bIndex;
     });
+
+    return {
+      priorityBreakdown,
+      statusBreakdown,
+      totalTasks
+    };
   }
 
-  getTasksByPriority(priority: Task['priority']): Task[] {
-    return this.tasks.filter(task => task.priority === priority);
+  getPriorityBreakdown(): PriorityBreakdownItem[] {
+    return this.generateReport().priorityBreakdown;
   }
 
-  getTasksByStatus(status: Task['status']): Task[] {
-    return this.tasks.filter(task => task.status === status);
+  getStatusBreakdown(): StatusBreakdownItem[] {
+    return this.generateReport().statusBreakdown;
   }
 
-  getTotalTaskCount(): number {
+  getTotalTasks(): number {
     return this.tasks.length;
   }
 }
···
     breakdown.addTasks(initialTasks);
   }
   return breakdown;
+}
+
+export function generateBreakdownFromTasks(tasks: Task[]): BreakdownReport {
+  const breakdown = createPriorityBreakdown(tasks);
+  return breakdown.generateReport();
 }
 
 /** @internal Phoenix VCS traceability — do not remove. */

examples/taskflow/src/generated/analytics/team-performance.ts

···
 export interface Task {
   id: string;
   assignee?: string;
-  status: 'pending' | 'in-progress' | 'done' | 'cancelled';
+  status: 'pending' | 'in_progress' | 'done' | 'cancelled';
 }
 
 export interface AssigneePerformance {
···
     
     for (const task of assignedTasks) {
       const assignee = task.assignee!;
-      const stats = assigneeStats.get(assignee) || { total: 0, completed: 0 };
       
+      if (!assigneeStats.has(assignee)) {
+        assigneeStats.set(assignee, { total: 0, completed: 0 });
+      }
+      
+      const stats = assigneeStats.get(assignee)!;
       stats.total++;
+      
       if (task.status === 'done') {
         stats.completed++;
       }
-      
-      assigneeStats.set(assignee, stats);
     }
     
-    const assigneePerformance: AssigneePerformance[] = Array.from(assigneeStats.entries())
-      .map(([assignee, stats]) => ({
+    const assigneePerformance: AssigneePerformance[] = [];
+    
+    for (const [assignee, stats] of assigneeStats) {
+      const completionRate = stats.total > 0 ? stats.completed / stats.total : 0;
+      
+      assigneePerformance.push({
         assignee,
         totalAssigned: stats.total,
         completed: stats.completed,
-        completionRate: stats.total > 0 ? stats.completed / stats.total : 0
-      }));
+        completionRate
+      });
+    }
     
-    const topPerformer = this.findTopPerformer(assigneePerformance);
+    assigneePerformance.sort((a, b) => b.completionRate - a.completionRate);
+    
+    const topPerformer = this.identifyTopPerformer(assigneePerformance);
     
     return {
       assigneePerformance,
···
     };
   }
   
-  private findTopPerformer(performances: AssigneePerformance[]): AssigneePerformance | null {
+  private identifyTopPerformer(performances: AssigneePerformance[]): AssigneePerformance | null {
     const eligiblePerformers = performances.filter(p => p.totalAssigned >= 3);
     
     if (eligiblePerformers.length === 0) {
···
 export function getTopPerformer(tasks: Task[]): AssigneePerformance | null {
   const metrics = calculateTeamPerformance(tasks);
   return metrics.topPerformer;
+}
+
+export function getAssigneeCompletionRate(assignee: string, tasks: Task[]): number {
+  const calculator = new TeamPerformanceCalculator();
+  return calculator.getCompletionRate(assignee, tasks);
 }
 
 /** @internal Phoenix VCS traceability — do not remove. */

examples/taskflow/src/generated/tasks/assignment.ts

···
 export interface AssignmentRecord {
   taskId: string;
-  assigneeId: string | null;
+  userId: string | null;
   assignedAt: Date;
   assignedBy: string;
 }
 
 export interface AssignmentAuditEntry {
   taskId: string;
-  previousAssigneeId: string | null;
-  newAssigneeId: string | null;
+  previousUserId: string | null;
+  newUserId: string | null;
   changedAt: Date;
   changedBy: string;
-  action: 'assigned' | 'reassigned' | 'unassigned';
+  reason?: string;
 }
 
-export interface Task {
-  id: string;
-  assigneeId: string | null;
-  [key: string]: any;
+export interface TaskAssignment {
+  taskId: string;
+  currentUserId: string | null;
+  assignedAt: Date | null;
+  assignedBy: string | null;
+  auditTrail: AssignmentAuditEntry[];
 }
 
 export class AssignmentManager {
-  private assignments = new Map<string, AssignmentRecord>();
-  private auditTrail: AssignmentAuditEntry[] = [];
+  private assignments = new Map<string, TaskAssignment>();
 
-  assignTask(taskId: string, assigneeId: string, assignedBy: string): void {
+  assignTask(taskId: string, userId: string, assignedBy: string, reason?: string): void {
     if (!taskId.trim()) {
       throw new Error('Task ID cannot be empty');
     }
-    if (!assigneeId.trim()) {
+    if (!userId.trim()) {
       throw new Error('User ID cannot be empty');
     }
     if (!assignedBy.trim()) {
       throw new Error('Assigned by user ID cannot be empty');
     }
 
-    const existingAssignment = this.assignments.get(taskId);
-    const previousAssigneeId = existingAssignment?.assigneeId || null;
+    const now = new Date();
+    const existing = this.assignments.get(taskId);
+    const previousUserId = existing?.currentUserId || null;
 
-    const assignment: AssignmentRecord = {
+    const auditEntry: AssignmentAuditEntry = {
       taskId,
-      assigneeId,
-      assignedAt: new Date(),
-      assignedBy
+      previousUserId,
+      newUserId: userId,
+      changedAt: now,
+      changedBy: assignedBy,
+      reason,
     };
 
-    this.assignments.set(taskId, assignment);
-
-    const auditEntry: AssignmentAuditEntry = {
+    const assignment: TaskAssignment = {
       taskId,
-      previousAssigneeId,
-      newAssigneeId: assigneeId,
-      changedAt: new Date(),
-      changedBy: assignedBy,
-      action: previousAssigneeId ? 'reassigned' : 'assigned'
+      currentUserId: userId,
+      assignedAt: now,
+      assignedBy,
+      auditTrail: existing ? [...existing.auditTrail, auditEntry] : [auditEntry],
     };
 
-    this.auditTrail.push(auditEntry);
+    this.assignments.set(taskId, assignment);
   }
 
-  unassignTask(taskId: string, unassignedBy: string): void {
+  unassignTask(taskId: string, unassignedBy: string, reason?: string): void {
     if (!taskId.trim()) {
       throw new Error('Task ID cannot be empty');
     }
···
       throw new Error('Unassigned by user ID cannot be empty');
     }
 
-    const existingAssignment = this.assignments.get(taskId);
-    if (!existingAssignment) {
-      throw new Error(`Task ${taskId} is not assigned`);
+    const existing = this.assignments.get(taskId);
+    if (!existing || !existing.currentUserId) {
+      throw new Error('Task is not currently assigned');
     }
 
-    const previousAssigneeId = existingAssignment.assigneeId;
-    this.assignments.delete(taskId);
-
+    const now = new Date();
     const auditEntry: AssignmentAuditEntry = {
       taskId,
-      previousAssigneeId,
-      newAssigneeId: null,
-      changedAt: new Date(),
+      previousUserId: existing.currentUserId,
+      newUserId: null,
+      changedAt: now,
       changedBy: unassignedBy,
-      action: 'unassigned'
+      reason,
+    };
+
+    const assignment: TaskAssignment = {
+      taskId,
+      currentUserId: null,
+      assignedAt: null,
+      assignedBy: null,
+      auditTrail: [...existing.auditTrail, auditEntry],
     };
 
-    this.auditTrail.push(auditEntry);
+    this.assignments.set(taskId, assignment);
   }
 
-  getAssignment(taskId: string): AssignmentRecord | null {
+  getAssignment(taskId: string): TaskAssignment | null {
     return this.assignments.get(taskId) || null;
   }
 
-  getAssignedTasks(assigneeId: string): AssignmentRecord[] {
-    if (!assigneeId.trim()) {
-      throw new Error('User ID cannot be empty');
+  getUnassignedTasks(): string[] {
+    const unassigned: string[] = [];
+    for (const [taskId, assignment] of this.assignments) {
+      if (!assignment.currentUserId) {
+        unassigned.push(taskId);
+      }
     }
+    return unassigned;
+  }
 
-    return Array.from(this.assignments.values()).filter(
-      assignment => assignment.assigneeId === assigneeId
-    );
+  getTasksAssignedTo(userId: string): string[] {
+    if (!userId.trim()) {
+      return [];
+    }
+
+    const assigned: string[] = [];
+    for (const [taskId, assignment] of this.assignments) {
+      if (assignment.currentUserId === userId) {
+        assigned.push(taskId);
+      }
+    }
+    return assigned;
   }
 
-  getUnassignedTasks(allTasks: Task[]): Task[] {
-    return allTasks.filter(task => !this.assignments.has(task.id));
+  getAssignmentHistory(taskId: string): AssignmentAuditEntry[] {
+    const assignment = this.assignments.get(taskId);
+    return assignment ? [...assignment.auditTrail] : [];
   }
 
-  getAuditTrail(taskId?: string): AssignmentAuditEntry[] {
-    if (taskId) {
-      return this.auditTrail.filter(entry => entry.taskId === taskId);
-    }
-    return [...this.auditTrail];
+  getAllAssignments(): TaskAssignment[] {
+    return Array.from(this.assignments.values()).map(assignment => ({
+      ...assignment,
+      auditTrail: [...assignment.auditTrail],
+    }));
   }
 
   isTaskAssigned(taskId: string): boolean {
-    return this.assignments.has(taskId);
+    const assignment = this.assignments.get(taskId);
+    return assignment ? assignment.currentUserId !== null : false;
   }
 
-  getTaskAssignee(taskId: string): string | null {
-    const assignment = this.assignments.get(taskId);
-    return assignment?.assigneeId || null;
+  reassignTask(taskId: string, newUserId: string, reassignedBy: string, reason?: string): void {
+    if (!taskId.trim()) {
+      throw new Error('Task ID cannot be empty');
+    }
+    if (!newUserId.trim()) {
+      throw new Error('New user ID cannot be empty');
+    }
+    if (!reassignedBy.trim()) {
+      throw new Error('Reassigned by user ID cannot be empty');
+    }
+
+    const existing = this.assignments.get(taskId);
+    if (!existing) {
+      throw new Error('Task has no assignment record');
+    }
+
+    this.assignTask(taskId, newUserId, reassignedBy, reason);
   }
+}
+
+export function createAssignmentManager(): AssignmentManager {
+  return new AssignmentManager();
 }
 
 export function validateUserId(userId: string): void {
   if (!userId || !userId.trim()) {
     throw new Error('User ID cannot be empty');
   }
-}
-
-export function createAssignmentManager(): AssignmentManager {
-  return new AssignmentManager();
 }
 
 /** @internal Phoenix VCS traceability — do not remove. */

examples/taskflow/src/generated/tasks/deadline-management.ts

···
+export interface TaskDeadline {
+  taskId: string;
+  deadline: Date;
+  isOverdue: boolean;
+  daysOverdue: number;
+}
+
 export interface Task {
   id: string;
   title: string;
   description?: string;
-  completed: boolean;
+  status: 'pending' | 'in-progress' | 'completed' | 'cancelled';
   deadline?: Date;
   createdAt: Date;
   updatedAt: Date;
 }
 
 export interface DeadlineWarning {
-  taskId: string;
   message: string;
-  timestamp: Date;
-}
-
-export interface OverdueTask {
-  task: Task;
-  daysPastDeadline: number;
+  taskId: string;
+  deadline: Date;
+  currentDate: Date;
 }
 
 export class DeadlineManager {
   private tasks = new Map<string, Task>();
-  private warnings: DeadlineWarning[] = [];
+  private warningCallbacks: Array<(warning: DeadlineWarning) => void> = [];
+
+  addTask(task: Task): void {
+    if (task.deadline && this.isDateInPast(task.deadline)) {
+      const warning: DeadlineWarning = {
+        message: `Warning: Task "${task.title}" has a deadline in the past (${task.deadline.toISOString()})`,
+        taskId: task.id,
+        deadline: task.deadline,
+        currentDate: new Date()
+      };
+      this.emitWarning(warning);
+    }
+    this.tasks.set(task.id, { ...task });
+  }
 
-  setTaskDeadline(taskId: string, deadline: Date): DeadlineWarning | null {
+  updateTask(taskId: string, updates: Partial<Task>): boolean {
     const task = this.tasks.get(taskId);
     if (!task) {
-      throw new Error(`Task with id ${taskId} not found`);
+      return false;
     }
 
-    const now = new Date();
-    let warning: DeadlineWarning | null = null;
+    const updatedTask = { ...task, ...updates, updatedAt: new Date() };
 
-    if (deadline < now) {
-      warning = {
-        taskId,
-        message: `Warning: Deadline set in the past (${deadline.toISOString()})`,
-        timestamp: now
+    if (updates.deadline && this.isDateInPast(updates.deadline)) {
+      const warning: DeadlineWarning = {
+        message: `Warning: Task "${updatedTask.title}" deadline updated to a past date (${updates.deadline.toISOString()})`,
+        taskId: taskId,
+        deadline: updates.deadline,
+        currentDate: new Date()
       };
-      this.warnings.push(warning);
+      this.emitWarning(warning);
     }
 
-    task.deadline = deadline;
-    task.updatedAt = now;
-
-    return warning;
+    this.tasks.set(taskId, updatedTask);
+    return true;
   }
 
-  addTask(task: Omit<Task, 'id' | 'createdAt' | 'updatedAt'>): Task {
-    const now = new Date();
-    const newTask: Task = {
-      ...task,
-      id: this.generateId(),
-      createdAt: now,
-      updatedAt: now
-    };
+  setDeadline(taskId: string, deadline: Date): boolean {
+    const task = this.tasks.get(taskId);
+    if (!task) {
+      return false;
+    }
 
-    if (newTask.deadline && newTask.deadline < now) {
+    if (this.isDateInPast(deadline)) {
       const warning: DeadlineWarning = {
-        taskId: newTask.id,
-        message: `Warning: Task created with deadline in the past (${newTask.deadline.toISOString()})`,
-        timestamp: now
+        message: `Warning: Setting deadline in the past for task "${task.title}" (${deadline.toISOString()})`,
+        taskId: taskId,
+        deadline: deadline,
+        currentDate: new Date()
       };
-      this.warnings.push(warning);
+      this.emitWarning(warning);
     }
 
-    this.tasks.set(newTask.id, newTask);
-    return newTask;
+    const updatedTask = { ...task, deadline, updatedAt: new Date() };
+    this.tasks.set(taskId, updatedTask);
+    return true;
   }
 
-  updateTask(taskId: string, updates: Partial<Omit<Task, 'id' | 'createdAt' | 'updatedAt'>>): Task {
+  removeDeadline(taskId: string): boolean {
     const task = this.tasks.get(taskId);
     if (!task) {
-      throw new Error(`Task with id ${taskId} not found`);
+      return false;
     }
 
-    const now = new Date();
-    const updatedTask: Task = {
-      ...task,
-      ...updates,
-      updatedAt: now
-    };
-
-    if (updates.deadline && updates.deadline < now && !task.completed) {
-      const warning: DeadlineWarning = {
-        taskId,
-        message: `Warning: Deadline updated to past date (${updates.deadline.toISOString()})`,
-        timestamp: now
-      };
-      this.warnings.push(warning);
-    }
-
+    const updatedTask = { ...task, deadline: undefined, updatedAt: new Date() };
     this.tasks.set(taskId, updatedTask);
-    return updatedTask;
+    return true;
   }
 
-  getTask(taskId: string): Task | undefined {
-    return this.tasks.get(taskId);
-  }
+  getOverdueTasks(): TaskDeadline[] {
+    const now = new Date();
+    const overdueTasks: TaskDeadline[] = [];
 
-  getAllTasks(): Task[] {
-    return Array.from(this.tasks.values());
+    for (const task of this.tasks.values()) {
+      if (task.deadline && task.status !== 'completed' && task.status !== 'cancelled') {
+        const isOverdue = now > task.deadline;
+        if (isOverdue) {
+          const daysOverdue = Math.ceil((now.getTime() - task.deadline.getTime()) / (1000 * 60 * 60 * 24));
+          overdueTasks.push({
+            taskId: task.id,
+            deadline: task.deadline,
+            isOverdue: true,
+            daysOverdue
+          });
+        }
+      }
+    }
+
+    return overdueTasks.sort((a, b) => b.daysOverdue - a.daysOverdue);
   }
 
-  getOverdueTasks(): OverdueTask[] {
+  getTasksWithDeadlines(): TaskDeadline[] {
     const now = new Date();
-    const overdueTasks: OverdueTask[] = [];
+    const tasksWithDeadlines: TaskDeadline[] = [];
 
     for (const task of this.tasks.values()) {
-      if (task.deadline && !task.completed && task.deadline < now) {
-        const daysPastDeadline = Math.floor(
-          (now.getTime() - task.deadline.getTime()) / (1000 * 60 * 60 * 24)
-        );
-        overdueTasks.push({
-          task,
-          daysPastDeadline
+      if (task.deadline) {
+        const isOverdue = now > task.deadline && task.status !== 'completed' && task.status !== 'cancelled';
+        const daysOverdue = isOverdue ? Math.ceil((now.getTime() - task.deadline.getTime()) / (1000 * 60 * 60 * 24)) : 0;
+        
+        tasksWithDeadlines.push({
+          taskId: task.id,
+          deadline: task.deadline,
+          isOverdue,
+          daysOverdue
         });
       }
     }
 
-    return overdueTasks.sort((a, b) => b.daysPastDeadline - a.daysPastDeadline);
+    return tasksWithDeadlines.sort((a, b) => a.deadline.getTime() - b.deadline.getTime());
+  }
+
+  getTask(taskId: string): Task | undefined {
+    return this.tasks.get(taskId);
+  }
+
+  getAllTasks(): Task[] {
+    return Array.from(this.tasks.values());
   }
 
-  isTaskOverdue(taskId: string): boolean {
-    const task = this.tasks.get(taskId);
-    if (!task || !task.deadline || task.completed) {
-      return false;
-    }
-    return task.deadline < new Date();
+  onWarning(callback: (warning: DeadlineWarning) => void): void {
+    this.warningCallbacks.push(callback);
   }
 
-  getWarnings(): DeadlineWarning[] {
-    return [...this.warnings];
+  removeWarningCallback(callback: (warning: DeadlineWarning) => void): void {
+    const index = this.warningCallbacks.indexOf(callback);
+    if (index > -1) {
+      this.warningCallbacks.splice(index, 1);
+    }
   }
 
-  clearWarnings(): void {
-    this.warnings = [];
+  private isDateInPast(date: Date): boolean {
+    return date < new Date();
   }
 
-  private generateId(): string {
-    return Math.random().toString(36).substring(2) + Date.now().toString(36);
+  private emitWarning(warning: DeadlineWarning): void {
+    for (const callback of this.warningCallbacks) {
+      try {
+        callback(warning);
+      } catch (error) {
+        // Silently continue if callback throws
+      }
+    }
   }
 }
 
···
   return new DeadlineManager();
 }
 
-export function calculateDaysUntilDeadline(deadline: Date): number {
-  const now = new Date();
-  const diffTime = deadline.getTime() - now.getTime();
-  return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+export function isTaskOverdue(task: Task): boolean {
+  if (!task.deadline || task.status === 'completed' || task.status === 'cancelled') {
+    return false;
+  }
+  return new Date() > task.deadline;
+}
+
+export function getDaysOverdue(task: Task): number {
+  if (!isTaskOverdue(task) || !task.deadline) {
+    return 0;
+  }
+  return Math.ceil((new Date().getTime() - task.deadline.getTime()) / (1000 * 60 * 60 * 24));
 }
 
 export function formatDeadlineStatus(task: Task): string {
···
     return 'No deadline';
   }
 
-  if (task.completed) {
+  if (task.status === 'completed') {
     return 'Completed';
   }
 
-  const daysUntil = calculateDaysUntilDeadline(task.deadline);
-  
-  if (daysUntil < 0) {
-    return `Overdue by ${Math.abs(daysUntil)} day${Math.abs(daysUntil) === 1 ? '' : 's'}`;
-  } else if (daysUntil === 0) {
+  if (task.status === 'cancelled') {
+    return 'Cancelled';
+  }
+
+  const now = new Date();
+  if (now > task.deadline) {
+    const daysOverdue = getDaysOverdue(task);
+    return `Overdue by ${daysOverdue} day${daysOverdue === 1 ? '' : 's'}`;
+  }
+
+  const daysUntilDeadline = Math.ceil((task.deadline.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
+  if (daysUntilDeadline === 0) {
     return 'Due today';
-  } else if (daysUntil === 1) {
+  } else if (daysUntilDeadline === 1) {
     return 'Due tomorrow';
   } else {
-    return `Due in ${daysUntil} days`;
+    return `Due in ${daysUntilDeadline} days`;
   }
 }
 

examples/taskflow/src/generated/tasks/search-and-filtering.ts

···
   title: string;
   priority: 'critical' | 'high' | 'medium' | 'low';
   created_at: Date;
-  status: string;
   description?: string;
+  status?: string;
   assignee?: string;
   deadline?: Date;
 }
···
 export class TaskSearchEngine {
   private tasks: Task[] = [];
 
-  constructor(tasks: Task[] = []) {
-    this.tasks = [...tasks];
+  constructor(initialTasks: Task[] = []) {
+    this.tasks = [...initialTasks];
   }
 
   addTask(task: Task): void {
···
     };
   }
 
-  private sortTasks(tasks: Task[], sortBy: string, sortOrder: string): Task[] {
+  private sortTasks(tasks: Task[], sortBy: 'priority' | 'created_at', sortOrder: 'asc' | 'desc'): Task[] {
     return [...tasks].sort((a, b) => {
       let comparison = 0;
 
···
     return [...this.tasks];
   }
 
-  getTaskById(taskId: string): Task | undefined {
-    return this.tasks.find(task => task.id === taskId);
+  getTaskCount(): number {
+    return this.tasks.length;
   }
 
   clear(): void {
···
   );
 }
 
-export function sortTasksByPriority(tasks: Task[]): Task[] {
+export function sortTasksByPriorityAndDate(tasks: Task[]): Task[] {
   return [...tasks].sort((a, b) => {
+    // Critical first, then by priority order
     const priorityComparison = PRIORITY_ORDER[a.priority] - PRIORITY_ORDER[b.priority];
     
+    // If priorities are equal, sort by created_at
     if (priorityComparison === 0) {
       return a.created_at.getTime() - b.created_at.getTime();
     }

examples/taskflow/src/generated/tasks/task-lifecycle.ts

···
   priority?: TaskPriority;
 }
 
-export class TaskLifecycleError extends Error {
-  constructor(message: string) {
-    super(message);
-    this.name = 'TaskLifecycleError';
-  }
-}
+export type NotificationCallback = (task: Task, event: string, details?: any) => void;
 
 const VALID_TRANSITIONS: Record<TaskStatus, TaskStatus[]> = {
   open: ['in_progress'],
···
   done: []
 };
 
-export class TaskLifecycle {
+export class TaskLifecycleManager {
   private tasks = new Map<string, Task>();
+  private notificationCallbacks: NotificationCallback[] = [];
+
+  addNotificationCallback(callback: NotificationCallback): void {
+    this.notificationCallbacks.push(callback);
+  }
+
+  removeNotificationCallback(callback: NotificationCallback): void {
+    const index = this.notificationCallbacks.indexOf(callback);
+    if (index >= 0) {
+      this.notificationCallbacks.splice(index, 1);
+    }
+  }
+
+  private notify(task: Task, event: string, details?: any): void {
+    for (const callback of this.notificationCallbacks) {
+      try {
+        callback(task, event, details);
+      } catch (error) {
+        // Ignore notification callback errors
+      }
+    }
+  }
 
   createTask(input: TaskCreateInput): Task {
     const now = new Date();
···
     };
 
     this.tasks.set(task.id, task);
-    return { ...task };
+    this.notify(task, 'created');
+    return task;
   }
 
   getTask(id: string): Task | undefined {
-    const task = this.tasks.get(id);
-    return task ? { ...task } : undefined;
+    return this.tasks.get(id);
   }
 
   getAllTasks(): Task[] {
-    return Array.from(this.tasks.values()).map(task => ({ ...task }));
+    return Array.from(this.tasks.values());
   }
 
   updateTask(id: string, input: TaskUpdateInput): Task {
     const task = this.tasks.get(id);
     if (!task) {
-      throw new TaskLifecycleError(`Task with id ${id} not found`);
+      throw new Error(`Task with ID ${id} not found`);
     }
 
     const updatedTask: Task = {
···
     };
 
     this.tasks.set(id, updatedTask);
-    return { ...updatedTask };
+    this.notify(updatedTask, 'updated', { changes: input });
+    return updatedTask;
   }
 
   transitionStatus(id: string, newStatus: TaskStatus): Task {
     const task = this.tasks.get(id);
     if (!task) {
-      throw new TaskLifecycleError(`Task with id ${id} not found`);
+      throw new Error(`Task with ID ${id} not found`);
+    }
+
+    if (task.status === newStatus) {
+      return task; // No change needed
     }
 
     const validTransitions = VALID_TRANSITIONS[task.status];
     if (!validTransitions.includes(newStatus)) {
-      throw new TaskLifecycleError(
-        `Invalid status transition from ${task.status} to ${newStatus}. Valid transitions: ${validTransitions.join(', ')}`
+      throw new Error(
+        `Invalid status transition from '${task.status}' to '${newStatus}'. ` +
+        `Valid transitions are: ${validTransitions.join(', ')}`
       );
     }
 
···
       updated_at: now
     };
 
-    if (newStatus === 'done') {
+    // Handle completion
+    if (newStatus === 'done' && task.status !== 'done') {
       updatedTask.completed_at = now;
       updatedTask.duration_ms = now.getTime() - task.created_at.getTime();
     }
 
+    // Clear completion data if moving away from done
+    if (task.status === 'done' && newStatus !== 'done') {
+      updatedTask.completed_at = undefined;
+      updatedTask.duration_ms = undefined;
+    }
+
     this.tasks.set(id, updatedTask);
-    return { ...updatedTask };
+    this.notify(updatedTask, 'status_changed', { 
+      from: task.status, 
+      to: newStatus 
+    });
+
+    if (newStatus === 'done') {
+      this.notify(updatedTask, 'completed', {
+        duration_ms: updatedTask.duration_ms
+      });
+    }
+
+    return updatedTask;
   }
 
   deleteTask(id: string): boolean {
-    return this.tasks.delete(id);
+    const task = this.tasks.get(id);
+    if (!task) {
+      return false;
+    }
+
+    this.tasks.delete(id);
+    this.notify(task, 'deleted');
+    return true;
   }
 
   getTasksByStatus(status: TaskStatus): Task[] {
-    return Array.from(this.tasks.values())
-      .filter(task => task.status === status)
-      .map(task => ({ ...task }));
+    return Array.from(this.tasks.values()).filter(task => task.status === status);
   }
 
   getTasksByPriority(priority: TaskPriority): Task[] {
-    return Array.from(this.tasks.values())
-      .filter(task => task.priority === priority)
-      .map(task => ({ ...task }));
+    return Array.from(this.tasks.values()).filter(task => task.priority === priority);
   }
 
   getCompletedTasks(): Task[] {
-    return Array.from(this.tasks.values())
-      .filter(task => task.status === 'done' && task.completed_at)
-      .map(task => ({ ...task }));
+    return this.getTasksByStatus('done');
   }
 
   getTaskDuration(id: string): number | undefined {
···
   }
 }
 
-export function createTaskLifecycle(): TaskLifecycle {
-  return new TaskLifecycle();
-}
-
-export function validateTaskStatus(status: string): status is TaskStatus {
-  return ['open', 'in_progress', 'review', 'done'].includes(status);
+export function createTaskLifecycleManager(): TaskLifecycleManager {
+  return new TaskLifecycleManager();
 }
 
 export function validateTaskPriority(priority: string): priority is TaskPriority {
   return ['low', 'medium', 'high', 'critical'].includes(priority);
+}
+
+export function validateTaskStatus(status: string): status is TaskStatus {
+  return ['open', 'in_progress', 'review', 'done'].includes(status);
 }
 
 /** @internal Phoenix VCS traceability — do not remove. */

examples/taskflow/src/generated/web-dashboard/analytics-panel.ts

···
   return Math.round((completed / total) * 100);
 }
 
-export function formatMetricValue(value: number, type: 'count' | 'percentage'): string {
-  if (type === 'percentage') {
+export function formatMetricValue(value: number, isPercentage: boolean = false): string {
+  if (isPercentage) {
     return `${value}%`;
   }
   return value.toString();
···
   return [
     {
       name: 'Total Tasks',
-      value: formatMetricValue(stats.totalTasks, 'count'),
+      value: formatMetricValue(stats.totalTasks),
       emoji: '📋'
     },
     {
       name: 'Completed',
-      value: formatMetricValue(stats.completedCount, 'count'),
+      value: formatMetricValue(stats.completedCount),
       emoji: '✅'
     },
     {
       name: 'Overdue',
-      value: formatMetricValue(stats.overdueCount, 'count'),
+      value: formatMetricValue(stats.overdueCount),
       emoji: '⚠️'
     },
     {
       name: 'Completion Rate',
-      value: formatMetricValue(stats.completionRate, 'percentage'),
+      value: formatMetricValue(stats.completionRate, true),
       emoji: '📊'
     }
   ];
···
 
 export function renderAnalyticsPanel(options: AnalyticsPanelOptions): string {
   const { stats, className = 'analytics-panel' } = options;
-  const cards = createMetricCards(stats);
-  const cardHtml = cards.map(renderMetricCard).join('\n');
+  const metricCards = createMetricCards(stats);
+  
+  const cardsHtml = metricCards
+    .map(card => renderMetricCard(card))
+    .join('\n');
 
   return `
     <div class="${className}">
       <div class="metrics-row">
-        ${cardHtml}
+        ${cardsHtml}
       </div>
     </div>
   `.trim();
···
   private stats: TaskStats;
   private className: string;
 
-  constructor(stats: TaskStats, className = 'analytics-panel') {
+  constructor(stats: TaskStats, className: string = 'analytics-panel') {
     this.stats = stats;
     this.className = className;
   }
 
   updateStats(newStats: TaskStats): void {
     this.stats = { ...newStats };
-    this.stats.completionRate = calculateCompletionRate(
-      newStats.completedCount,
-      newStats.totalTasks
-    );
   }
 
   getStats(): TaskStats {
···
       stats: this.stats,
       className: this.className
     });
-  }
-
-  getMetricCards(): MetricCard[] {
-    return createMetricCards(this.stats);
   }
 }
 

examples/taskflow/src/generated/web-dashboard/dashboard-page.ts

···
   description: string;
   priority: 'low' | 'medium' | 'high';
   deadline?: string;
-  createdAt: string;
-}
-
-export interface TaskFormData {
-  title: string;
-  description: string;
-  priority: 'low' | 'medium' | 'high';
-  deadline?: string;
+  createdAt: Date;
 }
 
 export interface DashboardState {
···
 
 export class DashboardPage {
   private tasks: Task[] = [];
+  private taskIdCounter = 1;
 
-  public addTask(formData: TaskFormData): Task {
-    this.validateTaskForm(formData);
-    
+  public addTask(title: string, description: string, priority: 'low' | 'medium' | 'high', deadline?: string): Task {
+    if (!title.trim()) {
+      throw new Error('Task title cannot be empty');
+    }
+
     const task: Task = {
-      id: this.generateId(),
-      title: formData.title.trim(),
-      description: formData.description.trim(),
-      priority: formData.priority,
-      deadline: formData.deadline || undefined,
-      createdAt: new Date().toISOString(),
+      id: `task-${this.taskIdCounter++}`,
+      title: title.trim(),
+      description: description.trim(),
+      priority,
+      deadline: deadline || undefined,
+      createdAt: new Date()
     };
 
     this.tasks.push(task);
···
 
   public renderHTML(): string {
     const taskCount = this.getTaskCount();
-    
+    const tasks = this.getTasks();
+
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
···
             --danger: #dc2626;
             --success: #16a34a;
             --warning: #d97706;
-            --primary-light: #dbeafe;
             --gray-50: #f9fafb;
             --gray-100: #f3f4f6;
             --gray-200: #e5e7eb;
···
         }
 
         .logo {
-            font-size: 1.75rem;
-            font-weight: 700;
+            font-size: 1.5rem;
+            font-weight: bold;
             color: var(--primary);
         }
 
         .task-summary {
-            background: var(--primary-light);
+            background: var(--primary);
+            color: white;
             padding: 0.5rem 1rem;
             border-radius: 0.5rem;
-            font-weight: 600;
-            color: var(--primary);
+            font-weight: 500;
         }
 
         .main-content {
···
 
         .card {
             background: white;
-            border-radius: 0.75rem;
+            border-radius: 0.5rem;
             padding: 1.5rem;
             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
         }
···
         .card-title {
             font-size: 1.25rem;
             font-weight: 600;
-            margin-bottom: 1.5rem;
+            margin-bottom: 1rem;
             color: var(--gray-800);
         }
 
···
         .form-label {
             display: block;
             font-weight: 500;
-            margin-bottom: 0.5rem;
+            margin-bottom: 0.25rem;
             color: var(--gray-700);
         }
 
         .form-input,
-        .form-select,
-        .form-textarea {
+        .form-textarea,
+        .form-select {
             width: 100%;
-            padding: 0.75rem;
+            padding: 0.5rem;
             border: 1px solid var(--gray-300);
-            border-radius: 0.5rem;
+            border-radius: 0.25rem;
             font-size: 0.875rem;
-            transition: border-color 0.2s;
         }
 
         .form-input:focus,
-        .form-select:focus,
-        .form-textarea:focus {
+        .form-textarea:focus,
+        .form-select:focus {
             outline: none;
             border-color: var(--primary);
             box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
···
 
         .form-textarea {
             resize: vertical;
-            min-height: 80px;
+            min-height: 4rem;
         }
 
         .btn {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            padding: 0.75rem 1.5rem;
+            padding: 0.5rem 1rem;
             border: none;
-            border-radius: 0.5rem;
+            border-radius: 0.25rem;
             font-weight: 500;
             cursor: pointer;
-            transition: all 0.2s;
-            text-decoration: none;
+            transition: background-color 0.2s;
         }
 
         .btn-primary {
···
             cursor: not-allowed;
         }
 
-        .error-message {
-            color: var(--danger);
-            font-size: 0.875rem;
-            margin-top: 0.25rem;
-            display: none;
-        }
-
-        .error-message.show {
-            display: block;
-        }
-
-        .priority-badge {
-            display: inline-block;
-            padding: 0.25rem 0.5rem;
-            border-radius: 0.25rem;
-            font-size: 0.75rem;
-            font-weight: 500;
-            text-transform: uppercase;
-        }
-
-        .priority-low {
-            background: var(--success);
-            color: white;
-        }
-
-        .priority-medium {
-            background: var(--warning);
-            color: white;
-        }
-
-        .priority-high {
-            background: var(--danger);
-            color: white;
-        }
-
         .task-list {
             display: flex;
             flex-direction: column;
···
         }
 
         .task-item {
-            padding: 1rem;
-            border: 1px solid var(--gray-200);
+            background: white;
             border-radius: 0.5rem;
-            background: var(--gray-50);
+            padding: 1rem;
+            border-left: 4px solid var(--gray-300);
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
         }
 
-        .task-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            margin-bottom: 0.5rem;
+        .task-item.priority-high {
+            border-left-color: var(--danger);
+        }
+
+        .task-item.priority-medium {
+            border-left-color: var(--warning);
+        }
+
+        .task-item.priority-low {
+            border-left-color: var(--success);
         }
 
         .task-title {
             font-weight: 600;
-            color: var(--gray-800);
+            margin-bottom: 0.5rem;
         }
 
         .task-description {
···
         .task-meta {
             display: flex;
             gap: 1rem;
+            font-size: 0.75rem;
+            color: var(--gray-500);
+        }
+
+        .priority-badge {
+            padding: 0.125rem 0.5rem;
+            border-radius: 0.25rem;
+            font-weight: 500;
+            text-transform: uppercase;
+            font-size: 0.625rem;
+        }
+
+        .priority-high {
+            background: rgba(220, 38, 38, 0.1);
+            color: var(--danger);
+        }
+
+        .priority-medium {
+            background: rgba(217, 119, 6, 0.1);
+            color: var(--warning);
+        }
+
+        .priority-low {
+            background: rgba(22, 163, 74, 0.1);
+            color: var(--success);
+        }
+
+        .error-message {
+            color: var(--danger);
             font-size: 0.875rem;
-            color: var(--gray-500);
+            margin-top: 0.25rem;
         }
 
         @media (max-width: 768px) {
···
             <div class="header-content">
                 <h1 class="logo">TaskFlow</h1>
                 <div class="task-summary">
-                    <span id="task-count">${taskCount}</span> tasks
+                    Total Tasks: <span id="taskCount">${taskCount}</span>
                 </div>
             </div>
         </div>
     </header>
 
-    <div class="container">
+    <main class="container">
         <div class="main-content">
             <div class="card">
                 <h2 class="card-title">Create New Task</h2>
-                <form id="task-form">
+                <form id="taskForm">
                     <div class="form-group">
                         <label class="form-label" for="title">Title *</label>
-                        <input type="text" id="title" name="title" class="form-input" required>
-                        <div class="error-message" id="title-error">Title is required</div>
+                        <input type="text" id="title" class="form-input" required>
+                        <div id="titleError" class="error-message" style="display: none;"></div>
                     </div>
-
+                    
                     <div class="form-group">
                         <label class="form-label" for="description">Description</label>
-                        <textarea id="description" name="description" class="form-textarea" rows="3"></textarea>
+                        <textarea id="description" class="form-textarea"></textarea>
                     </div>
-
+                    
                     <div class="form-group">
                         <label class="form-label" for="priority">Priority</label>
-                        <select id="priority" name="priority" class="form-select">
+                        <select id="priority" class="form-select">
                             <option value="low">Low</option>
                             <option value="medium" selected>Medium</option>
                             <option value="high">High</option>
                         </select>
                     </div>
-
+                    
                     <div class="form-group">
                         <label class="form-label" for="deadline">Deadline (Optional)</label>
-                        <input type="date" id="deadline" name="deadline" class="form-input">
+                        <input type="date" id="deadline" class="form-input">
                     </div>
-
+                    
                     <button type="submit" class="btn btn-primary">Create Task</button>
                 </form>
             </div>
 
             <div class="card">
-                <h2 class="card-title">Recent Tasks</h2>
-                <div class="task-list" id="task-list">
-                    ${this.renderTaskList()}
+                <h2 class="card-title">Tasks</h2>
+                <div id="taskList" class="task-list">
+                    ${tasks.length === 0 ? '<p style="color: var(--gray-600); text-align: center; padding: 2rem;">No tasks yet. Create your first task!</p>' : 
+                      tasks.map(task => this.renderTaskItem(task)).join('')}
                 </div>
             </div>
         </div>
-    </div>
+    </main>
 
     <script>
-        (function() {
-            const form = document.getElementById('task-form');
-            const titleInput = document.getElementById('title');
-            const titleError = document.getElementById('title-error');
-            const taskCountEl = document.getElementById('task-count');
-            const taskList = document.getElementById('task-list');
-
-            function validateTitle() {
-                const title = titleInput.value.trim();
-                if (!title) {
-                    titleError.classList.add('show');
-                    titleInput.style.borderColor = 'var(--danger)';
-                    return false;
-                } else {
-                    titleError.classList.remove('show');
-                    titleInput.style.borderColor = '';
-                    return true;
-                }
-            }
+        let tasks = ${JSON.stringify(tasks)};
+        let taskIdCounter = ${this.taskIdCounter};
 
-            function formatDate(dateString) {
-                if (!dateString) return '';
-                return new Date(dateString).toLocaleDateString();
-            }
+        function updateTaskCount() {
+            document.getElementById('taskCount').textContent = tasks.length;
+        }
 
-            function createTaskElement(task) {
-                return \`
-                    <div class="task-item">
-                        <div class="task-header">
-                            <h3 class="task-title">\${task.title}</h3>
-                            <span class="priority-badge priority-\${task.priority}">\${task.priority}</span>
-                        </div>
-                        \${task.description ? \`<p class="task-description">\${task.description}</p>\` : ''}
-                        <div class="task-meta">
-                            <span>Created: \${formatDate(task.createdAt)}</span>
-                            \${task.deadline ? \`<span>Due: \${formatDate(task.deadline)}</span>\` : ''}
-                        </div>
+        function renderTaskItem(task) {
+            const deadline = task.deadline ? new Date(task.deadline).toLocaleDateString() : null;
+            const createdAt = new Date(task.createdAt).toLocaleDateString();
+            
+            return \`
+                <div class="task-item priority-\${task.priority}">
+                    <div class="task-title">\${task.title}</div>
+                    <div class="task-description">\${task.description}</div>
+                    <div class="task-meta">
+                        <span class="priority-badge priority-\${task.priority}">\${task.priority}</span>
+                        <span>Created: \${createdAt}</span>
+                        \${deadline ? \`<span>Due: \${deadline}</span>\` : ''}
                     </div>
-                \`;
+                </div>
+            \`;
+        }
+
+        function renderTaskList() {
+            const taskList = document.getElementById('taskList');
+            if (tasks.length === 0) {
+                taskList.innerHTML = '<p style="color: var(--gray-600); text-align: center; padding: 2rem;">No tasks yet. Create your first task!</p>';
+            } else {
+                taskList.innerHTML = tasks.map(renderTaskItem).join('');
             }
+        }
 
-            titleInput.addEventListener('blur', validateTitle);
-            titleInput.addEventListener('input', function() {
-                if (titleError.classList.contains('show')) {
-                    validateTitle();
-                }
-            });
+        function showError(elementId, message) {
+            const errorElement = document.getElementById(elementId);
+            errorElement.textContent = message;
+            errorElement.style.display = 'block';
+        }
 
-            form.addEventListener('submit', function(e) {
-                e.preventDefault();
-                
-                if (!validateTitle()) {
-                    return;
-                }
+        function hideError(elementId) {
+            const errorElement = document.getElementById(elementId);
+            errorElement.style.display = 'none';
+        }
 
-                const formData = new FormData(form);
-                const task = {
-                    id: Date.now().toString(),
-                    title: formData.get('title').trim(),
-                    description: formData.get('description').trim(),
-                    priority: formData.get('priority'),
-                    deadline: formData.get('deadline') || null,
-                    createdAt: new Date().toISOString()
-                };
+        function validateTitle(title) {
+            if (!title.trim()) {
+                showError('titleError', 'Task title cannot be empty');
+                return false;
+            }
+            hideError('titleError');
+            return true;
+        }
 
-                // Add task to list
-                const taskElement = createTaskElement(task);
-                if (taskList.children.length === 0 || taskList.textContent.includes('No tasks yet')) {
-                    taskList.innerHTML = taskElement;
-                } else {
-                    taskList.insertAdjacentHTML('afterbegin', taskElement);
-                }
-
-                // Update task count
-                const currentCount = parseInt(taskCountEl.textContent);
-                taskCountEl.textContent = currentCount + 1;
+        document.getElementById('taskForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            const title = document.getElementById('title').value;
+            const description = document.getElementById('description').value;
+            const priority = document.getElementById('priority').value;
+            const deadline = document.getElementById('deadline').value;
+            
+            if (!validateTitle(title)) {
+                return;
+            }
+            
+            const task = {
+                id: \`task-\${taskIdCounter++}\`,
+                title: title.trim(),
+                description: description.trim(),
+                priority: priority,
+                deadline: deadline || undefined,
+                createdAt: new Date()
+            };
+            
+            tasks.push(task);
+            updateTaskCount();
+            renderTaskList();
+            
+            // Reset form
+            this.reset();
+            document.getElementById('priority').value = 'medium';
+        });
 
-                // Reset form
-                form.reset();
-                document.getElementById('priority').value = 'medium';
-            });
-        })();
+        // Real-time title validation
+        document.getElementById('title').addEventListener('input', function() {
+            validateTitle(this.value);
+        });
     </script>
 </body>
 </html>`;
   }
 
-  private validateTaskForm(formData: TaskFormData): void {
-    if (!formData.title || formData.title.trim().length === 0) {
-      throw new Error('Title is required');
-    }
-  }
-
-  private generateId(): string {
-    return Date.now().toString(36) + Math.random().toString(36).substr(2);
-  }
-
-  private renderTaskList(): string {
-    if (this.tasks.length === 0) {
-      return '<p style="color: var(--gray-500); text-align: center; padding: 2rem;">No tasks yet. Create your first task!</p>';
-    }
-
-    return this.tasks
-      .slice(-5) // Show last 5 tasks
-      .reverse()
-      .map(task => `
-        <div class="task-item">
-          <div class="task-header">
-            <h3 class="task-title">${this.escapeHtml(task.title)}</h3>
-            <span class="priority-badge priority-${task.priority}">${task.priority}</span>
-          </div>
-          ${task.description ? `<p class="task-description">${this.escapeHtml(task.description)}</p>` : ''}
-          <div class="task-meta">
-            <span>Created: ${this.formatDate(task.createdAt)}</span>
-            ${task.deadline ? `<span>Due: ${this.formatDate(task.deadline)}</span>` : ''}
-          </div>
+  private renderTaskItem(task: Task): string {
+    const deadline = task.deadline ? new Date(task.deadline).toLocaleDateString() : null;
+    const createdAt = task.createdAt.toLocaleDateString();
+    
+    return `
+        <div class="task-item priority-${task.priority}">
+            <div class="task-title">${task.title}</div>
+            <div class="task-description">${task.description}</div>
+            <div class="task-meta">
+                <span class="priority-badge priority-${task.priority}">${task.priority}</span>
+                <span>Created: ${createdAt}</span>
+                ${deadline ? `<span>Due: ${deadline}</span>` : ''}
+            </div>
         </div>
-      `).join('');
-  }
-
-  private escapeHtml(text: string): string {
-    const div = { innerHTML: '' } as any;
-    div.textContent = text;
-    return div.innerHTML || text.replace(/[&<>"']/g, (match: string) => {
-      const escapeMap: Record<string, string> = {
-        '&': '&amp;',
-        '<': '&lt;',
-        '>': '&gt;',
-        '"': '&quot;',
-        "'": '&#39;'
-      };
-      return escapeMap[match];
-    });
-  }
-
-  private formatDate(dateString: string): string {
-    return new Date(dateString).toLocaleDateString();
+    `;
   }
 }
 

examples/taskflow/src/generated/web-dashboard/server.ts

···
 /**
- * Web Dashboard — HTTP Server
+ * Web Dashboard — Web Server
  *
- * Serves the TaskFlow dashboard as a single-page web app.
- * The DashboardPage module generates the complete HTML.
+ * AUTO-GENERATED by Phoenix VCS
+ * Serves the web client HTML, plus health/metrics/modules endpoints.
  */
 
 import { createServer, IncomingMessage, ServerResponse } from 'node:http';
 
-import { createDashboard } from './dashboard-page.js';
-import { generateCSSString } from './styles.js';
 import * as analyticsPanel from './analytics-panel.js';
+import * as dashboardPage from './dashboard-page.js';
+import * as styles from './styles.js';
 import * as taskListDisplay from './task-list-display.js';
 
 // ─── Metrics ─────────────────────────────────────────────────────────────────
···
 
 const _svcModules = {
   'analytics-panel': analyticsPanel,
-  'dashboard-page': { createDashboard },
-  'styles': { generateCSSString },
+  'dashboard-page': dashboardPage,
+  'styles': styles,
   'task-list-display': taskListDisplay,
 };
 
+// ─── HTML Renderer ───────────────────────────────────────────────────────────
+
+function renderPage(): string {
+  // Collect CSS from style modules
+  let css = '';
+  try {
+    const styleMod = styles as Record<string, unknown>;
+    for (const key of Object.keys(styleMod)) {
+      const val = styleMod[key];
+      if (typeof val === 'function' && /css|style/i.test(key)) {
+        const result = (val as Function)();
+        if (typeof result === 'string') css += result;
+        else if (result && typeof result === 'object' && 'generateCSS' in result) {
+          css += (result as { generateCSS: () => string }).generateCSS();
+        }
+      }
+    }
+  } catch { /* style module may not have expected exports */ }
+
+  // Collect HTML from UI modules
+  const sections: string[] = [];
+  try {
+    const uiMod = analyticsPanel as Record<string, unknown>;
+    for (const key of Object.keys(uiMod)) {
+      const val = uiMod[key];
+      // Look for factory functions that return objects with render/renderHTML
+      if (typeof val === 'function' && /^create|^make|^render|^build/i.test(key)) {
+        try {
+          const instance = (val as Function)();
+          if (typeof instance === 'string' && instance.includes('<')) {
+            sections.push(instance);
+          } else if (instance && typeof instance === 'object') {
+            const obj = instance as Record<string, unknown>;
+            if (typeof obj.render === 'function') {
+              const html = (obj.render as Function)();
+              if (typeof html === 'string') sections.push(html);
+            } else if (typeof obj.renderHTML === 'function') {
+              const html = (obj.renderHTML as Function)();
+              if (typeof html === 'string') sections.push(html);
+            }
+          }
+        } catch { /* factory may require args */ }
+      }
+    }
+  } catch { /* module may not have renderable exports */ }
+  try {
+    const uiMod = dashboardPage as Record<string, unknown>;
+    for (const key of Object.keys(uiMod)) {
+      const val = uiMod[key];
+      // Look for factory functions that return objects with render/renderHTML
+      if (typeof val === 'function' && /^create|^make|^render|^build/i.test(key)) {
+        try {
+          const instance = (val as Function)();
+          if (typeof instance === 'string' && instance.includes('<')) {
+            sections.push(instance);
+          } else if (instance && typeof instance === 'object') {
+            const obj = instance as Record<string, unknown>;
+            if (typeof obj.render === 'function') {
+              const html = (obj.render as Function)();
+              if (typeof html === 'string') sections.push(html);
+            } else if (typeof obj.renderHTML === 'function') {
+              const html = (obj.renderHTML as Function)();
+              if (typeof html === 'string') sections.push(html);
+            }
+          }
+        } catch { /* factory may require args */ }
+      }
+    }
+  } catch { /* module may not have renderable exports */ }
+  try {
+    const uiMod = taskListDisplay as Record<string, unknown>;
+    for (const key of Object.keys(uiMod)) {
+      const val = uiMod[key];
+      // Look for factory functions that return objects with render/renderHTML
+      if (typeof val === 'function' && /^create|^make|^render|^build/i.test(key)) {
+        try {
+          const instance = (val as Function)();
+          if (typeof instance === 'string' && instance.includes('<')) {
+            sections.push(instance);
+          } else if (instance && typeof instance === 'object') {
+            const obj = instance as Record<string, unknown>;
+            if (typeof obj.render === 'function') {
+              const html = (obj.render as Function)();
+              if (typeof html === 'string') sections.push(html);
+            } else if (typeof obj.renderHTML === 'function') {
+              const html = (obj.renderHTML as Function)();
+              if (typeof html === 'string') sections.push(html);
+            }
+          }
+        } catch { /* factory may require args */ }
+      }
+    }
+  } catch { /* module may not have renderable exports */ }
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Web Dashboard</title>
+  <style>${css}</style>
+</head>
+<body>
+  <div class="game-container">
+    ${sections.join('\n')}
+  </div>
+</body>
+</html>`;
+}
+
 // ─── Router ──────────────────────────────────────────────────────────────────
 
 type Handler = (req: IncomingMessage, res: ServerResponse) => void | Promise<void>;
 
 const routes: Record<string, Handler> = {
   '/': (_req, res) => {
-    const dashboard = createDashboard();
-    const html = dashboard.renderHTML();
     res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
-    res.end(html);
+    res.end(renderPage());
   },
 
   '/health': (_req, res) => {
···
   },
 
   '/modules': (_req, res) => {
-    const info = Object.entries(_svcModules).map(([name, mod]) => ({
-      name,
-      exports: Object.keys(mod),
-    }));
+    const info = Object.entries(_svcModules).map(([name, mod]) => {
+      const phoenix = (mod as Record<string, unknown>)._phoenix as Record<string, unknown> | undefined;
+      return {
+        name,
+        risk_tier: phoenix?.risk_tier ?? 'unknown',
+        exports: Object.keys(mod).filter(k => k !== '_phoenix'),
+      };
+    });
     res.writeHead(200, { 'Content-Type': 'application/json' });
     res.end(JSON.stringify(info, null, 2));
   },
···
       const addr = server.address();
       if (addr && typeof addr === 'object') actualPort = addr.port;
       result.port = actualPort;
-      console.log(`TaskFlow Dashboard → http://localhost:${actualPort}`);
+      console.log(`Web Dashboard listening on http://localhost:${actualPort}`);
+      console.log(`  /         — web client`);
+      console.log(`  /health   — health check`);
+      console.log(`  /metrics  — request metrics`);
+      console.log(`  /modules  — registered modules`);
       resolve();
     });
   });

examples/taskflow/src/generated/web-dashboard/styles.ts

···
     border: string;
     shadow: string;
   };
-  typography: {
-    fontFamily: string;
-    sizes: {
-      h1: string;
-      body: string;
-    };
-  };
   spacing: {
     xs: string;
     sm: string;
···
     lg: string;
     xl: string;
   };
-  borderRadius: {
-    card: string;
-    button: string;
+  typography: {
+    fontFamily: string;
+    h1Size: string;
+    bodySize: string;
+  };
+  effects: {
+    borderRadius: string;
+    cardShadow: string;
+    cardShadowHover: string;
+    transition: string;
   };
 }
 
-export interface ComponentStyles {
-  layout: string;
-  card: string;
-  button: string;
-  typography: string;
-}
-
-const defaultConfig: StyleConfig = {
+export const defaultStyleConfig: StyleConfig = {
   breakpoints: {
     mobile: '768px',
     desktop: '769px'
···
     border: '#dee2e6',
     shadow: 'rgba(0, 0, 0, 0.1)'
   },
-  typography: {
-    fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-    sizes: {
-      h1: '1.5rem',
-      body: '0.95rem'
-    }
-  },
   spacing: {
     xs: '0.25rem',
     sm: '0.5rem',
···
     lg: '1.5rem',
     xl: '2rem'
   },
-  borderRadius: {
-    card: '8px',
-    button: '4px'
+  typography: {
+    fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    h1Size: '1.5rem',
+    bodySize: '0.95rem'
+  },
+  effects: {
+    borderRadius: '8px',
+    cardShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+    cardShadowHover: '0 4px 8px rgba(0, 0, 0, 0.15)',
+    transition: 'all 0.2s ease-in-out'
   }
 };
 
-export function generateStyles(config: Partial<StyleConfig> = {}): ComponentStyles {
-  const mergedConfig: StyleConfig = {
-    ...defaultConfig,
-    ...config,
-    colors: { ...defaultConfig.colors, ...config.colors },
-    typography: { ...defaultConfig.typography, ...config.typography },
-    spacing: { ...defaultConfig.spacing, ...config.spacing },
-    borderRadius: { ...defaultConfig.borderRadius, ...config.borderRadius }
-  };
+export class StyleManager {
+  private config: StyleConfig;
+  private styleElement: string | null = null;
+
+  constructor(config: StyleConfig = defaultStyleConfig) {
+    this.config = config;
+  }
+
+  generateCSS(): string {
+    const { breakpoints, colors, spacing, typography, effects } = this.config;
+
+    return `
+      /* Reset and base styles */
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
 
-  const layout = `
-    .phoenix-layout {
-      display: grid;
-      grid-template-columns: 1fr;
-      gap: ${mergedConfig.spacing.md};
-      padding: ${mergedConfig.spacing.md};
-      max-width: 100%;
-      margin: 0 auto;
-    }
+      body {
+        font-family: ${typography.fontFamily};
+        font-size: ${typography.bodySize};
+        line-height: 1.6;
+        color: ${colors.text};
+        background-color: ${colors.background};
+      }
 
-    @media (min-width: ${mergedConfig.breakpoints.desktop}) {
-      .phoenix-layout {
-        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-        gap: ${mergedConfig.spacing.lg};
-        padding: ${mergedConfig.spacing.xl};
+      /* Typography */
+      h1 {
+        font-size: ${typography.h1Size};
+        font-weight: 600;
+        color: ${colors.text};
+        margin-bottom: ${spacing.lg};
+      }
+
+      /* Layout - Mobile First */
+      .container {
+        width: 100%;
         max-width: 1200px;
+        margin: 0 auto;
+        padding: ${spacing.md};
       }
-    }
-  `;
+
+      .grid {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: ${spacing.lg};
+      }
+
+      /* Desktop Layout */
+      @media (min-width: ${breakpoints.desktop}) {
+        .grid {
+          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        }
+
+        .grid-2 {
+          grid-template-columns: repeat(2, 1fr);
+        }
 
-  const card = `
-    .phoenix-card {
-      background: ${mergedConfig.colors.surface};
-      border: 1px solid ${mergedConfig.colors.border};
-      border-radius: ${mergedConfig.borderRadius.card};
-      padding: ${mergedConfig.spacing.lg};
-      box-shadow: 0 2px 4px ${mergedConfig.colors.shadow};
-      transition: box-shadow 0.2s ease, transform 0.2s ease;
-    }
+        .grid-3 {
+          grid-template-columns: repeat(3, 1fr);
+        }
+
+        .grid-4 {
+          grid-template-columns: repeat(4, 1fr);
+        }
+      }
+
+      /* Cards */
+      .card {
+        background: ${colors.surface};
+        border: 1px solid ${colors.border};
+        border-radius: ${effects.borderRadius};
+        padding: ${spacing.lg};
+        box-shadow: ${effects.cardShadow};
+        transition: ${effects.transition};
+      }
+
+      .card:hover {
+        box-shadow: ${effects.cardShadowHover};
+        transform: translateY(-2px);
+      }
+
+      /* Buttons */
+      .btn {
+        display: inline-block;
+        padding: ${spacing.sm} ${spacing.lg};
+        border: none;
+        border-radius: ${effects.borderRadius};
+        font-family: ${typography.fontFamily};
+        font-size: ${typography.bodySize};
+        font-weight: 500;
+        text-decoration: none;
+        text-align: center;
+        cursor: pointer;
+        transition: ${effects.transition};
+        background-color: ${colors.primary};
+        color: white;
+      }
+
+      .btn:hover {
+        opacity: 0.9;
+        transform: translateY(-1px);
+      }
+
+      .btn:active {
+        transform: translateY(0);
+      }
+
+      .btn-secondary {
+        background-color: ${colors.secondary};
+      }
+
+      .btn-outline {
+        background-color: transparent;
+        color: ${colors.primary};
+        border: 1px solid ${colors.primary};
+      }
+
+      .btn-outline:hover {
+        background-color: ${colors.primary};
+        color: white;
+      }
 
-    .phoenix-card:hover {
-      box-shadow: 0 4px 8px ${mergedConfig.colors.shadow};
-      transform: translateY(-1px);
-    }
-  `;
+      /* Utility classes */
+      .text-center {
+        text-align: center;
+      }
 
-  const button = `
-    .phoenix-button {
-      background: ${mergedConfig.colors.primary};
-      color: ${mergedConfig.colors.background};
-      border: none;
-      border-radius: ${mergedConfig.borderRadius.button};
-      padding: ${mergedConfig.spacing.sm} ${mergedConfig.spacing.md};
-      font-family: ${mergedConfig.typography.fontFamily};
-      font-size: ${mergedConfig.typography.sizes.body};
-      cursor: pointer;
-      transition: background-color 0.2s ease, transform 0.1s ease;
-      display: inline-block;
-      text-decoration: none;
-      text-align: center;
-    }
+      .text-secondary {
+        color: ${colors.textSecondary};
+      }
 
-    .phoenix-button:hover {
-      background: ${adjustColor(mergedConfig.colors.primary, -10)};
-      transform: translateY(-1px);
-    }
+      .mb-sm { margin-bottom: ${spacing.sm}; }
+      .mb-md { margin-bottom: ${spacing.md}; }
+      .mb-lg { margin-bottom: ${spacing.lg}; }
+      .mb-xl { margin-bottom: ${spacing.xl}; }
 
-    .phoenix-button:active {
-      transform: translateY(0);
-    }
+      .mt-sm { margin-top: ${spacing.sm}; }
+      .mt-md { margin-top: ${spacing.md}; }
+      .mt-lg { margin-top: ${spacing.lg}; }
+      .mt-xl { margin-top: ${spacing.xl}; }
 
-    .phoenix-button--secondary {
-      background: ${mergedConfig.colors.secondary};
-    }
+      .p-sm { padding: ${spacing.sm}; }
+      .p-md { padding: ${spacing.md}; }
+      .p-lg { padding: ${spacing.lg}; }
+      .p-xl { padding: ${spacing.xl}; }
 
-    .phoenix-button--secondary:hover {
-      background: ${adjustColor(mergedConfig.colors.secondary, -10)};
-    }
-  `;
+      /* Responsive utilities */
+      @media (max-width: ${breakpoints.mobile}) {
+        .hide-mobile {
+          display: none;
+        }
+      }
 
-  const typography = `
-    .phoenix-typography {
-      font-family: ${mergedConfig.typography.fontFamily};
-      color: ${mergedConfig.colors.text};
-      line-height: 1.5;
-    }
+      @media (min-width: ${breakpoints.desktop}) {
+        .hide-desktop {
+          display: none;
+        }
+      }
+    `;
+  }
 
-    .phoenix-typography h1 {
-      font-size: ${mergedConfig.typography.sizes.h1};
-      font-weight: 600;
-      margin: 0 0 ${mergedConfig.spacing.md} 0;
-      color: ${mergedConfig.colors.text};
+  getStyleElement(): string {
+    if (!this.styleElement) {
+      this.styleElement = `<style>${this.generateCSS()}</style>`;
     }
+    return this.styleElement;
+  }
 
-    .phoenix-typography p,
-    .phoenix-typography div,
-    .phoenix-typography span {
-      font-size: ${mergedConfig.typography.sizes.body};
-      margin: 0 0 ${mergedConfig.spacing.sm} 0;
-    }
+  updateConfig(newConfig: Partial<StyleConfig>): void {
+    this.config = { ...this.config, ...newConfig };
+    this.styleElement = null; // Reset cached styles
+  }
 
-    .phoenix-typography--secondary {
-      color: ${mergedConfig.colors.textSecondary};
-    }
-  `;
+  getConfig(): StyleConfig {
+    return { ...this.config };
+  }
 
-  return {
-    layout,
-    card,
-    button,
-    typography
-  };
-}
+  generateInlineStyles(element: string, styles: Record<string, string>): string {
+    const styleString = Object.entries(styles)
+      .map(([property, value]) => `${property}: ${value}`)
+      .join('; ');
+    
+    return `${element} { ${styleString} }`;
+  }
 
-export function injectStyles(styles: ComponentStyles): void {
-  const styleElement = createStyleElement();
-  const combinedStyles = Object.values(styles).join('\n');
-  styleElement.textContent = combinedStyles;
-}
+  createResponsiveGrid(columns: { mobile: number; desktop: number }): string {
+    return `
+      display: grid;
+      grid-template-columns: repeat(${columns.mobile}, 1fr);
+      gap: ${this.config.spacing.lg};
 
-export function createStyleElement(): HTMLStyleElement {
-  if (typeof document === 'undefined') {
-    throw new Error('createStyleElement can only be used in browser environment');
+      @media (min-width: ${this.config.breakpoints.desktop}) {
+        grid-template-columns: repeat(${columns.desktop}, 1fr);
+      }
+    `;
   }
-  
-  const existingStyle = document.getElementById('phoenix-styles');
-  if (existingStyle) {
-    return existingStyle as HTMLStyleElement;
+
+  createCard(content: string, className: string = ''): string {
+    return `<div class="card ${className}">${content}</div>`;
   }
 
-  const style = document.createElement('style');
-  style.id = 'phoenix-styles';
-  style.type = 'text/css';
-  document.head.appendChild(style);
-  return style;
+  createButton(text: string, type: 'primary' | 'secondary' | 'outline' = 'primary', onClick?: string): string {
+    const buttonClass = type === 'primary' ? 'btn' : `btn btn-${type}`;
+    const onClickAttr = onClick ? ` onclick="${onClick}"` : '';
+    return `<button class="${buttonClass}"${onClickAttr}>${text}</button>`;
+  }
 }
 
-export function generateCSSString(config?: Partial<StyleConfig>): string {
-  const styles = generateStyles(config);
-  return Object.values(styles).join('\n');
+export function createStyleManager(config?: Partial<StyleConfig>): StyleManager {
+  const finalConfig = config ? { ...defaultStyleConfig, ...config } : defaultStyleConfig;
+  return new StyleManager(finalConfig);
 }
 
-function adjustColor(color: string, percent: number): string {
-  if (!color.startsWith('#')) {
-    return color;
-  }
-  
-  const num = parseInt(color.slice(1), 16);
-  const amt = Math.round(2.55 * percent);
-  const R = (num >> 16) + amt;
-  const G = (num >> 8 & 0x00FF) + amt;
-  const B = (num & 0x0000FF) + amt;
+export function generateResponsiveHTML(content: string, title?: string): string {
+  const styleManager = createStyleManager();
   
-  return '#' + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
-    (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
-    (B < 255 ? B < 1 ? 0 : B : 255))
-    .toString(16)
-    .slice(1);
+  return `
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      ${title ? `<title>${title}</title>` : ''}
+      ${styleManager.getStyleElement()}
+    </head>
+    <body>
+      <div class="container">
+        ${content}
+      </div>
+    </body>
+    </html>
+  `;
 }
 
-export const defaultStyleConfig = defaultConfig;
-
 /** @internal Phoenix VCS traceability — do not remove. */
 export const _phoenix = {
-  iu_id: 'fd1e1e3084a491150550d575098a4a929a5be62ccb0b000a173679da38aed9fa',
+  iu_id: '8d072032308810bce8136ef5a0a51f8e99a35d83edfa38f4d69cdca300d1c6af',
   name: 'Styles',
   risk_tier: 'medium',
   canon_ids: [4 as const],

examples/taskflow/src/generated/web-dashboard/task-list-display.ts

···
     return new Date() > task.deadline && task.status !== 'done';
   }
 
-  private getPriorityColor(priority: Task['priority']): string {
-    switch (priority) {
-      case 'critical': return '#dc2626';
-      case 'high': return '#ea580c';
-      case 'medium': return '#ca8a04';
-      case 'low': return '#16a34a';
-    }
+  private getPriorityBadgeColor(priority: Task['priority']): string {
+    const colors = {
+      critical: '#dc2626',
+      high: '#ea580c',
+      medium: '#ca8a04',
+      low: '#16a34a'
+    };
+    return colors[priority];
   }
 
-  private getStatusColor(status: Task['status']): string {
-    switch (status) {
-      case 'open': return '#6b7280';
-      case 'in_progress': return '#2563eb';
-      case 'review': return '#7c3aed';
-      case 'done': return '#16a34a';
-    }
+  private getStatusBadgeColor(status: Task['status']): string {
+    const colors = {
+      open: '#6b7280',
+      in_progress: '#2563eb',
+      review: '#7c3aed',
+      done: '#16a34a'
+    };
+    return colors[status];
   }
 
   private getStatusTransitions(currentStatus: Task['status']): Task['status'][] {
-    switch (currentStatus) {
-      case 'open': return ['in_progress'];
-      case 'in_progress': return ['review', 'open'];
-      case 'review': return ['done', 'in_progress'];
-      case 'done': return ['open'];
-    }
+    const transitions: Record<Task['status'], Task['status'][]> = {
+      open: ['in_progress'],
+      in_progress: ['review', 'open'],
+      review: ['done', 'in_progress'],
+      done: ['open']
+    };
+    return transitions[currentStatus];
   }
 
   private formatDate(date: Date): string {
···
     });
   }
 
-  private renderTaskCard(task: Task): string {
-    const isOverdue = this.isOverdue(task);
-    const priorityColor = this.getPriorityColor(task.priority);
-    const statusColor = this.getStatusColor(task.status);
+  private generateTaskCard(task: Task): string {
+    const isTaskOverdue = this.isOverdue(task);
+    const priorityColor = this.getPriorityBadgeColor(task.priority);
+    const statusColor = this.getStatusBadgeColor(task.status);
     const transitions = this.getStatusTransitions(task.status);
 
-    const cardStyle = `
-      border: 2px solid ${isOverdue ? '#dc2626' : '#e5e7eb'};
-      border-radius: 8px;
-      padding: 16px;
-      background: white;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-      position: relative;
-      cursor: pointer;
-      transition: box-shadow 0.2s;
-    `;
+    const overdueIndicator = isTaskOverdue 
+      ? '<div class="overdue-indicator">OVERDUE</div>' 
+      : '';
 
-    const titleStyle = `
-      font-size: 18px;
-      font-weight: 600;
-      color: #111827;
-      margin: 0;
-      line-height: 1.4;
-    `;
-
-    const descriptionStyle = `
-      color: #6b7280;
-      font-size: 14px;
-      line-height: 1.5;
-      margin: 0;
-    `;
-
-    const badgeStyle = `
-      display: inline-block;
-      padding: 4px 8px;
-      border-radius: 4px;
-      font-size: 12px;
-      font-weight: 500;
-      text-transform: uppercase;
-      color: white;
-    `;
-
-    const buttonStyle = `
-      padding: 6px 12px;
-      border: 1px solid #d1d5db;
-      border-radius: 4px;
-      background: white;
-      color: #374151;
-      font-size: 12px;
-      cursor: pointer;
-      transition: background-color 0.2s;
-    `;
-
-    const overdueIndicator = isOverdue ? `
-      <div style="
-        position: absolute;
-        top: 8px;
-        right: 8px;
-        background: #dc2626;
-        color: white;
-        padding: 2px 6px;
-        border-radius: 4px;
-        font-size: 10px;
-        font-weight: 600;
-      ">OVERDUE</div>
-    ` : '';
-
-    const transitionButtons = transitions.map(status => `
-      <button 
-        style="${buttonStyle}"
-        onclick="window.taskListDisplay?.handleStatusChange('${task.id}', '${status}')"
-        onmouseover="this.style.backgroundColor='#f3f4f6'"
-        onmouseout="this.style.backgroundColor='white'"
-      >
+    const transitionButtons = transitions.map(status => 
+      `<button class="status-transition-btn" data-task-id="${task.id}" data-new-status="${status}">
         ${status.replace('_', ' ').toUpperCase()}
-      </button>
-    `).join('');
+      </button>`
+    ).join('');
 
     return `
-      <div 
-        style="${cardStyle}"
-        onclick="window.taskListDisplay?.handleTaskClick('${task.id}')"
-        onmouseover="this.style.boxShadow='0 4px 6px rgba(0, 0, 0, 0.1)'"
-        onmouseout="this.style.boxShadow='0 1px 3px rgba(0, 0, 0, 0.1)'"
-      >
+      <div class="task-card ${isTaskOverdue ? 'overdue' : ''}" data-task-id="${task.id}">
         ${overdueIndicator}
-        
-        <h3 style="${titleStyle}">${this.escapeHtml(task.title)}</h3>
-        
-        <p style="${descriptionStyle}">${this.escapeHtml(task.description)}</p>
-        
-        <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-          <span style="${badgeStyle}; background-color: ${priorityColor};">
-            ${task.priority}
-          </span>
-          <span style="${badgeStyle}; background-color: ${statusColor};">
-            ${task.status.replace('_', ' ')}
-          </span>
+        <div class="task-header">
+          <h3 class="task-title">${this.escapeHtml(task.title)}</h3>
+          <div class="task-badges">
+            <span class="priority-badge" style="background-color: ${priorityColor}">
+              ${task.priority.toUpperCase()}
+            </span>
+            <span class="status-badge" style="background-color: ${statusColor}">
+              ${task.status.replace('_', ' ').toUpperCase()}
+            </span>
+          </div>
         </div>
-        
-        <div style="display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #6b7280;">
-          <span>Assigned to: ${this.escapeHtml(task.assignee)}</span>
-          <span>Due: ${this.formatDate(task.deadline)}</span>
+        <div class="task-description">
+          ${this.escapeHtml(task.description)}
         </div>
-        
-        <div style="display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;">
+        <div class="task-meta">
+          <div class="task-assignee">
+            <strong>Assignee:</strong> ${this.escapeHtml(task.assignee)}
+          </div>
+          <div class="task-deadline">
+            <strong>Deadline:</strong> ${this.formatDate(task.deadline)}
+          </div>
+        </div>
+        <div class="task-actions">
           ${transitionButtons}
         </div>
       </div>
···
 
   render(): string {
     const filteredTasks = this.getFilteredTasks();
-
-    const gridStyle = `
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-      gap: 20px;
-      padding: 20px;
-      max-width: 1200px;
-      margin: 0 auto;
-    `;
-
-    const emptyStateStyle = `
-      text-align: center;
-      padding: 40px;
-      color: #6b7280;
-      font-size: 16px;
-    `;
-
+    
     if (filteredTasks.length === 0) {
       return `
-        <div style="${emptyStateStyle}">
-          No tasks match the current filters.
+        <div class="task-list-empty">
+          <p>No tasks match the current filters.</p>
         </div>
       `;
     }
 
-    const taskCards = filteredTasks.map(task => this.renderTaskCard(task)).join('');
+    const taskCards = filteredTasks.map(task => this.generateTaskCard(task)).join('');
 
     return `
-      <div style="${gridStyle}">
-        ${taskCards}
-      </div>
-      <script>
-        window.taskListDisplay = {
-          handleStatusChange: (taskId, newStatus) => {
-            if (window.taskListDisplayInstance?.options.onStatusChange) {
-              window.taskListDisplayInstance.options.onStatusChange(taskId, newStatus);
+      <div class="task-list-display">
+        <style>
+          .task-list-display {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+            gap: 1rem;
+            padding: 1rem;
+          }
+          
+          .task-card {
+            background: white;
+            border: 1px solid #e5e7eb;
+            border-radius: 8px;
+            padding: 1rem;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            transition: box-shadow 0.2s;
+          }
+          
+          .task-card:hover {
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+          }
+          
+          .task-card.overdue {
+            border-color: #dc2626;
+            border-width: 2px;
+          }
+          
+          .overdue-indicator {
+            background: #dc2626;
+            color: white;
+            padding: 0.25rem 0.5rem;
+            border-radius: 4px;
+            font-size: 0.75rem;
+            font-weight: bold;
+            margin-bottom: 0.5rem;
+            display: inline-block;
+          }
+          
+          .task-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 0.75rem;
+          }
+          
+          .task-title {
+            margin: 0;
+            font-size: 1.125rem;
+            font-weight: 600;
+            color: #111827;
+            flex: 1;
+            margin-right: 0.5rem;
+          }
+          
+          .task-badges {
+            display: flex;
+            gap: 0.5rem;
+            flex-shrink: 0;
+          }
+          
+          .priority-badge,
+          .status-badge {
+            color: white;
+            padding: 0.25rem 0.5rem;
+            border-radius: 4px;
+            font-size: 0.75rem;
+            font-weight: 600;
+            text-transform: uppercase;
+          }
+          
+          .task-description {
+            color: #6b7280;
+            margin-bottom: 1rem;
+            line-height: 1.5;
+          }
+          
+          .task-meta {
+            margin-bottom: 1rem;
+            font-size: 0.875rem;
+          }
+          
+          .task-assignee,
+          .task-deadline {
+            margin-bottom: 0.25rem;
+          }
+          
+          .task-actions {
+            display: flex;
+            gap: 0.5rem;
+            flex-wrap: wrap;
+          }
+          
+          .status-transition-btn {
+            background: #3b82f6;
+            color: white;
+            border: none;
+            padding: 0.5rem 0.75rem;
+            border-radius: 4px;
+            font-size: 0.75rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: background-color 0.2s;
+          }
+          
+          .status-transition-btn:hover {
+            background: #2563eb;
+          }
+          
+          .task-list-empty {
+            grid-column: 1 / -1;
+            text-align: center;
+            padding: 2rem;
+            color: #6b7280;
+          }
+          
+          @media (max-width: 768px) {
+            .task-list-display {
+              grid-template-columns: 1fr;
+              padding: 0.5rem;
+            }
+            
+            .task-header {
+              flex-direction: column;
+              align-items: flex-start;
             }
-          },
-          handleTaskClick: (taskId) => {
-            if (window.taskListDisplayInstance?.options.onTaskClick) {
-              const task = window.taskListDisplayInstance.tasks.find(t => t.id === taskId);
-              if (task) {
-                window.taskListDisplayInstance.options.onTaskClick(task);
-              }
+            
+            .task-badges {
+              margin-top: 0.5rem;
             }
           }
-        };
-      </script>
+        </style>
+        ${taskCards}
+      </div>
     `;
   }
 
-  attachToGlobal(): void {
-    (globalThis as any).taskListDisplayInstance = this;
+  attachEventListeners(container: HTMLElement): void {
+    container.addEventListener('click', (event) => {
+      const target = event.target as HTMLElement;
+      
+      if (target.classList.contains('status-transition-btn')) {
+        const taskId = target.getAttribute('data-task-id');
+        const newStatus = target.getAttribute('data-new-status') as Task['status'];
+        
+        if (taskId && newStatus && this.options.onStatusChange) {
+          this.options.onStatusChange(taskId, newStatus);
+        }
+      } else if (target.closest('.task-card')) {
+        const taskCard = target.closest('.task-card') as HTMLElement;
+        const taskId = taskCard.getAttribute('data-task-id');
+        const task = this.tasks.find(t => t.id === taskId);
+        
+        if (task && this.options.onTaskClick) {
+          this.options.onTaskClick(task);
+        }
+      }
+    });
   }
 }
 
 export function createTaskListDisplay(options?: TaskListDisplayOptions): TaskListDisplay {
-  const display = new TaskListDisplay(options);
-  display.attachToGlobal();
-  return display;
-}
-
-export function renderTaskFilter(
-  availableStatuses: Task['status'][],
-  availablePriorities: Task['priority'][],
-  availableAssignees: string[],
-  currentFilter: TaskFilter,
-  onFilterChange: (filter: TaskFilter) => void
-): string {
-  const filterStyle = `
-    display: flex;
-    gap: 16px;
-    padding: 16px;
-    background: #f9fafb;
-    border-radius: 8px;
-    margin-bottom: 20px;
-    flex-wrap: wrap;
-  `;
-
-  const selectStyle = `
-    padding: 8px 12px;
-    border: 1px solid #d1d5db;
-    border-radius: 4px;
-    background: white;
-    font-size: 14px;
-  `;
-
-  const labelStyle = `
-    font-weight: 500;
-    color: #374151;
-    margin-bottom: 4px;
-    display: block;
-  `;
-
-  return `
-    <div style="${filterStyle}">
-      <div>
-        <label style="${labelStyle}">Status:</label>
-        <select 
-          style="${selectStyle}" 
-          multiple
-          onchange="window.updateFilter('status', Array.from(this.selectedOptions).map(o => o.value))"
-        >
-          ${availableStatuses.map(status => `
-            <option value="${status}" ${currentFilter.status?.includes(status) ? 'selected' : ''}>
-              ${status.replace('_', ' ').toUpperCase()}
-            </option>
-          `).join('')}
-        </select>
-      </div>
-      
-      <div>
-        <label style="${labelStyle}">Priority:</label>
-        <select 
-          style="${selectStyle}" 
-          multiple
-          onchange="window.updateFilter('priority', Array.from(this.selectedOptions).map(o => o.value))"
-        >
-          ${availablePriorities.map(priority => `
-            <option value="${priority}" ${currentFilter.priority?.includes(priority) ? 'selected' : ''}>
-              ${priority.toUpperCase()}
-            </option>
-          `).join('')}
-        </select>
-      </div>
-      
-      <div>
-        <label style="${labelStyle}">Assignee:</label>
-        <select 
-          style="${selectStyle}" 
-          multiple
-          onchange="window.updateFilter('assignee', Array.from(this.selectedOptions).map(o => o.value))"
-        >
-          ${availableAssignees.map(assignee => `
-            <option value="${assignee}" ${currentFilter.assignee?.includes(assignee) ? 'selected' : ''}>
-              ${assignee}
-            </option>
-          `).join('')}
-        </select>
-      </div>
-      
-      <button 
-        style="${selectStyle}; cursor: pointer; background: #ef4444; color: white; border-color: #dc2626;"
-        onclick="window.clearFilters()"
-      >
-        Clear Filters
-      </button>
-    </div>
-    
-    <script>
-      window.updateFilter = (type, values) => {
-        const newFilter = { ...window.currentTaskFilter };
-        if (values.length === 0) {
-          delete newFilter[type];
-        } else {
-          newFilter[type] = values;
-        }
-        window.currentTaskFilter = newFilter;
-        if (window.onTaskFilterChange) {
-          window.onTaskFilterChange(newFilter);
-        }
-      };
-      
-      window.clearFilters = () => {
-        window.currentTaskFilter = {};
-        if (window.onTaskFilterChange) {
-          window.onTaskFilterChange({});
-        }
-        // Reset all selects
-        document.querySelectorAll('select').forEach(select => {
-          select.selectedIndex = -1;
-        });
-      };
-      
-      window.currentTaskFilter = ${JSON.stringify(currentFilter)};
-      window.onTaskFilterChange = ${onFilterChange.toString()};
-    </script>
-  `;
+  return new TaskListDisplay(options);
 }
 
 /** @internal Phoenix VCS traceability — do not remove. */

src/manifest.ts

···
 
   /**
    * Record a single IU's generated files into the manifest.
+   * Evicts stale entries: if another IU previously owned the same
+   * output file paths, the old entry is removed (handles IU ID changes
+   * after re-canonicalization).
    */
   recordIU(iuManifest: IUManifest): void {
     const manifest = this.load();
+    this.evictStaleEntries(manifest, iuManifest);
     manifest.iu_manifests[iuManifest.iu_id] = iuManifest;
     manifest.generated_at = new Date().toISOString();
     this.save(manifest);
···
   recordAll(iuManifests: IUManifest[]): void {
     const manifest = this.load();
     for (const m of iuManifests) {
+      this.evictStaleEntries(manifest, m);
       manifest.iu_manifests[m.iu_id] = m;
     }
     manifest.generated_at = new Date().toISOString();
     this.save(manifest);
+  }
+
+  /**
+   * Remove old IU manifest entries that own the same file paths
+   * as a new entry (but with a different IU ID).
+   */
+  private evictStaleEntries(manifest: GeneratedManifest, incoming: IUManifest): void {
+    const incomingFiles = new Set(Object.keys(incoming.files));
+    for (const [existingId, existing] of Object.entries(manifest.iu_manifests)) {
+      if (existingId === incoming.iu_id) continue;
+      const existingFiles = Object.keys(existing.files);
+      const overlaps = existingFiles.some(f => incomingFiles.has(f));
+      if (overlaps) {
+        delete manifest.iu_manifests[existingId];
+      }
+    }
   }
 
   /**