@baselineos/persona 0.1.0

package/src/ui.ts

@@ -0,0 +1,1042 @@
+import { EventEmitter } from 'events';
+import { randomUUID } from 'crypto';
+import { BaselinePersonaEngine } from './engine.js';
+import type { ActivePersona, StudioConfig } from './engine.js';
+
+// ─── Type Definitions ────────────────────────────────────────────────────────
+
+export interface UIComponent {
+  id: string;
+  type: string;
+  visible: boolean;
+  position: { x: number; y: number };
+  size: { width: number; height: number };
+  config: Record<string, unknown>;
+  state: Record<string, unknown>;
+}
+
+export interface PersonaOption {
+  id: string;
+  name: string;
+  description: string;
+  focus: string[];
+  icon?: string;
+  color?: string;
+}
+
+export interface WorkflowStep {
+  id: string;
+  name: string;
+  description: string;
+  status: 'pending' | 'active' | 'completed' | 'skipped' | 'failed';
+  startedAt?: Date;
+  completedAt?: Date;
+  data: Record<string, unknown>;
+}
+
+export interface WorkflowInstance {
+  id: string;
+  type: string;
+  personaId: string;
+  userId: string;
+  parameters: Record<string, unknown>;
+  startTime: Date;
+  status: 'pending' | 'running' | 'completed' | 'failed' | 'cancelled';
+  progress: number;
+  steps: WorkflowStep[];
+  results: Record<string, unknown>;
+  endTime?: Date;
+  error?: string;
+}
+
+export interface ProgressState {
+  workflowId: string;
+  phase: string;
+  percentage: number;
+  currentStep: string;
+  stepsCompleted: number;
+  totalSteps: number;
+  estimatedTimeRemaining?: number;
+  startedAt: Date;
+}
+
+export interface ResultDisplay {
+  id: string;
+  workflowId: string;
+  type: string;
+  title: string;
+  data: Record<string, unknown>;
+  format: string;
+  createdAt: Date;
+}
+
+export interface SelectorState {
+  isOpen: boolean;
+  selectedPersonaId: string | null;
+  hoveredPersonaId: string | null;
+  searchQuery: string;
+  filteredOptions: PersonaOption[];
+}
+
+export interface StudioState {
+  activeFrames: string[];
+  layout: string;
+  theme: string;
+  panels: UIComponent[];
+  toolbars: UIComponent[];
+}
+
+export interface UISystemConfig {
+  defaultLayout?: string;
+  defaultTheme?: string;
+  enableAnimations?: boolean;
+  enableTransitions?: boolean;
+  selectorPosition?: string;
+  maxWorkflows?: number;
+  progressUpdateInterval?: number;
+}
+
+// ─── Persona UI System ──────────────────────────────────────────────────────
+
+export class PersonaUISystem extends EventEmitter {
+  private engine: BaselinePersonaEngine;
+  private components: Map<string, UIComponent>;
+  private selectorState: SelectorState;
+  private studioState: StudioState;
+  private workflows: Map<string, WorkflowInstance>;
+  private progressStates: Map<string, ProgressState>;
+  private resultDisplays: Map<string, ResultDisplay>;
+  private config: Required<UISystemConfig>;
+  private initialized: boolean;
+
+  constructor(engine: BaselinePersonaEngine, config: UISystemConfig = {}) {
+    super();
+    this.engine = engine;
+    this.components = new Map();
+    this.workflows = new Map();
+    this.progressStates = new Map();
+    this.resultDisplays = new Map();
+
+    this.config = {
+      defaultLayout: config.defaultLayout || 'responsive',
+      defaultTheme: config.defaultTheme || 'system',
+      enableAnimations: config.enableAnimations ?? true,
+      enableTransitions: config.enableTransitions ?? true,
+      selectorPosition: config.selectorPosition || 'top-right',
+      maxWorkflows: config.maxWorkflows || 10,
+      progressUpdateInterval: config.progressUpdateInterval || 1000,
+    };
+
+    this.selectorState = {
+      isOpen: false,
+      selectedPersonaId: null,
+      hoveredPersonaId: null,
+      searchQuery: '',
+      filteredOptions: [],
+    };
+
+    this.studioState = {
+      activeFrames: [],
+      layout: this.config.defaultLayout,
+      theme: this.config.defaultTheme,
+      panels: [],
+      toolbars: [],
+    };
+
+    this.initialized = false;
+    this.initializeComponents();
+    this.initializeEventListeners();
+    this.initialized = true;
+    console.log('[PersonaUISystem] UI system initialized');
+  }
+
+  // ─── Component Initialization ─────────────────────────────────────────────
+
+  private initializeComponents(): void {
+    this.registerComponent({
+      id: 'persona-selector',
+      type: 'selector',
+      visible: true,
+      position: { x: 0, y: 0 },
+      size: { width: 320, height: 480 },
+      config: {
+        position: this.config.selectorPosition,
+        showSearch: true,
+        showDescriptions: true,
+        showFocusAreas: true,
+        animateTransitions: this.config.enableAnimations,
+      },
+      state: {},
+    });
+
+    this.registerComponent({
+      id: 'studio-interface',
+      type: 'studio',
+      visible: false,
+      position: { x: 0, y: 0 },
+      size: { width: 1920, height: 1080 },
+      config: {
+        layout: this.config.defaultLayout,
+        theme: this.config.defaultTheme,
+        enableDragDrop: true,
+        enableResize: true,
+        enablePanelCollapse: true,
+      },
+      state: {},
+    });
+
+    this.registerComponent({
+      id: 'workflow-engine',
+      type: 'workflow',
+      visible: false,
+      position: { x: 0, y: 0 },
+      size: { width: 800, height: 600 },
+      config: {
+        maxConcurrent: this.config.maxWorkflows,
+        showProgress: true,
+        enableCancel: true,
+        enablePause: false,
+      },
+      state: {},
+    });
+
+    this.registerComponent({
+      id: 'result-display',
+      type: 'display',
+      visible: false,
+      position: { x: 0, y: 0 },
+      size: { width: 800, height: 600 },
+      config: {
+        formats: ['table', 'chart', 'json', 'markdown', 'html'],
+        defaultFormat: 'table',
+        enableExport: true,
+        enableShare: true,
+      },
+      state: {},
+    });
+
+    this.registerComponent({
+      id: 'progress-tracker',
+      type: 'tracker',
+      visible: false,
+      position: { x: 0, y: 0 },
+      size: { width: 400, height: 200 },
+      config: {
+        updateInterval: this.config.progressUpdateInterval,
+        showEstimatedTime: true,
+        showStepDetails: true,
+        position: 'bottom-right',
+      },
+      state: {},
+    });
+  }
+
+  private initializeEventListeners(): void {
+    this.on('selector:opened', () => {
+      this.selectorState.isOpen = true;
+      this.updateComponent('persona-selector', { state: { isOpen: true } });
+      console.log('[PersonaUISystem] Persona selector opened');
+    });
+
+    this.on('selector:closed', () => {
+      this.selectorState.isOpen = false;
+      this.selectorState.hoveredPersonaId = null;
+      this.updateComponent('persona-selector', { state: { isOpen: false } });
+      console.log('[PersonaUISystem] Persona selector closed');
+    });
+
+    this.on('persona:selected', (data: { personaId: string; userId: string }) => {
+      this.handlePersonaSelection(data.personaId, data.userId);
+    });
+
+    this.on('workflow:started', (data: { workflowId: string }) => {
+      this.showComponent('progress-tracker');
+      console.log(`[PersonaUISystem] Workflow started: ${data.workflowId}`);
+    });
+
+    this.on('workflow:completed', (data: { workflowId: string }) => {
+      this.showComponent('result-display');
+      console.log(`[PersonaUISystem] Workflow completed: ${data.workflowId}`);
+    });
+
+    this.on('workflow:failed', (data: { workflowId: string; error: string }) => {
+      console.log(`[PersonaUISystem] Workflow failed: ${data.workflowId} - ${data.error}`);
+    });
+  }
+
+  // ─── Component Management ─────────────────────────────────────────────────
+
+  registerComponent(component: UIComponent): void {
+    this.components.set(component.id, component);
+    this.emit('component:registered', { componentId: component.id, type: component.type });
+  }
+
+  getComponent(id: string): UIComponent | undefined {
+    return this.components.get(id);
+  }
+
+  updateComponent(id: string, updates: Partial<UIComponent>): UIComponent | null {
+    const component = this.components.get(id);
+    if (!component) {
+      return null;
+    }
+
+    if (updates.config) {
+      component.config = { ...component.config, ...updates.config };
+    }
+    if (updates.state) {
+      component.state = { ...component.state, ...updates.state };
+    }
+    if (updates.position) {
+      component.position = updates.position;
+    }
+    if (updates.size) {
+      component.size = updates.size;
+    }
+    if (updates.visible !== undefined) {
+      component.visible = updates.visible;
+    }
+
+    this.emit('component:updated', { componentId: id, updates });
+    return component;
+  }
+
+  showComponent(id: string): void {
+    this.updateComponent(id, { visible: true });
+    this.emit('component:shown', { componentId: id });
+  }
+
+  hideComponent(id: string): void {
+    this.updateComponent(id, { visible: false });
+    this.emit('component:hidden', { componentId: id });
+  }
+
+  removeComponent(id: string): boolean {
+    const removed = this.components.delete(id);
+    if (removed) {
+      this.emit('component:removed', { componentId: id });
+    }
+    return removed;
+  }
+
+  getAllComponents(): UIComponent[] {
+    return Array.from(this.components.values());
+  }
+
+  getVisibleComponents(): UIComponent[] {
+    return Array.from(this.components.values()).filter((c) => c.visible);
+  }
+
+  // ─── Persona Selector ─────────────────────────────────────────────────────
+
+  openSelector(): void {
+    this.emit('selector:opened');
+  }
+
+  closeSelector(): void {
+    this.emit('selector:closed');
+  }
+
+  toggleSelector(): void {
+    if (this.selectorState.isOpen) {
+      this.closeSelector();
+    } else {
+      this.openSelector();
+    }
+  }
+
+  setSearchQuery(query: string): PersonaOption[] {
+    this.selectorState.searchQuery = query;
+    const filtered = this.filterPersonaOptions(query);
+    this.selectorState.filteredOptions = filtered;
+    this.emit('selector:filtered', { query, count: filtered.length });
+    return filtered;
+  }
+
+  private filterPersonaOptions(query: string): PersonaOption[] {
+    const allOptions = this.getPersonaOptions();
+    if (!query || query.trim() === '') {
+      return allOptions;
+    }
+
+    const lowerQuery = query.toLowerCase();
+    return allOptions.filter(
+      (option) =>
+        option.name.toLowerCase().includes(lowerQuery) ||
+        option.description.toLowerCase().includes(lowerQuery) ||
+        option.focus.some((f) => f.toLowerCase().includes(lowerQuery))
+    );
+  }
+
+  getPersonaOptions(): PersonaOption[] {
+    const options: PersonaOption[] = [];
+
+    const personaColors: Record<string, string> = {
+      designer: '#FF6B6B',
+      developer: '#4ECDC4',
+      business_analyst: '#45B7D1',
+      data_scientist: '#96CEB4',
+      product_manager: '#FFEAA7',
+    };
+
+    const personaIcons: Record<string, string> = {
+      designer: 'palette',
+      developer: 'code',
+      business_analyst: 'briefcase',
+      data_scientist: 'chart',
+      product_manager: 'target',
+    };
+
+    const corePersonaIds = ['designer', 'developer', 'business_analyst', 'data_scientist', 'product_manager'];
+
+    for (const id of corePersonaIds) {
+      const persona = this.engine.getActivePersona(id);
+      if (persona) {
+        options.push({
+          id: persona.id,
+          name: persona.name,
+          description: persona.description,
+          focus: persona.focus,
+          icon: personaIcons[id],
+          color: personaColors[id],
+        });
+      } else {
+        options.push(this.getDefaultPersonaOption(id, personaIcons[id], personaColors[id]));
+      }
+    }
+
+    if (options.length === 0) {
+      for (const id of corePersonaIds) {
+        options.push(this.getDefaultPersonaOption(id, personaIcons[id], personaColors[id]));
+      }
+    }
+
+    return options;
+  }
+
+  private getDefaultPersonaOption(id: string, icon?: string, color?: string): PersonaOption {
+    const defaults: Record<string, PersonaOption> = {
+      designer: {
+        id: 'designer',
+        name: 'Designer',
+        description: 'Visual and UX designer focused on creating beautiful, intuitive interfaces',
+        focus: ['visual-design', 'ux-research', 'prototyping', 'design-systems', 'accessibility'],
+        icon: icon || 'palette',
+        color: color || '#FF6B6B',
+      },
+      developer: {
+        id: 'developer',
+        name: 'Developer',
+        description: 'Software developer focused on building robust, scalable applications',
+        focus: ['coding', 'architecture', 'testing', 'deployment', 'performance'],
+        icon: icon || 'code',
+        color: color || '#4ECDC4',
+      },
+      business_analyst: {
+        id: 'business_analyst',
+        name: 'Business Analyst',
+        description: 'Business analyst focused on requirements gathering and process optimization',
+        focus: ['requirements', 'process-analysis', 'stakeholder-management', 'data-analysis'],
+        icon: icon || 'briefcase',
+        color: color || '#45B7D1',
+      },
+      data_scientist: {
+        id: 'data_scientist',
+        name: 'Data Scientist',
+        description: 'Data scientist focused on extracting insights through analysis and modeling',
+        focus: ['data-analysis', 'machine-learning', 'statistical-modeling', 'data-visualization'],
+        icon: icon || 'chart',
+        color: color || '#96CEB4',
+      },
+      product_manager: {
+        id: 'product_manager',
+        name: 'Product Manager',
+        description: 'Product manager focused on strategy, roadmapping, and delivering value',
+        focus: ['product-strategy', 'roadmapping', 'user-research', 'prioritization'],
+        icon: icon || 'target',
+        color: color || '#FFEAA7',
+      },
+    };
+
+    return defaults[id] || {
+      id,
+      name: id.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()),
+      description: `Persona: ${id}`,
+      focus: [],
+      icon: icon || 'user',
+      color: color || '#CCCCCC',
+    };
+  }
+
+  hoverPersona(personaId: string): void {
+    this.selectorState.hoveredPersonaId = personaId;
+    this.emit('selector:hovered', { personaId });
+  }
+
+  selectPersona(personaId: string, userId: string): void {
+    this.selectorState.selectedPersonaId = personaId;
+    this.emit('persona:selected', { personaId, userId });
+    this.closeSelector();
+  }
+
+  getSelectorState(): SelectorState {
+    return { ...this.selectorState };
+  }
+
+  // ─── Persona Selection Handling ────────────────────────────────────────────
+
+  private handlePersonaSelection(personaId: string, userId: string): void {
+    try {
+      const activePersona = this.engine.setActivePersona(personaId, userId);
+      this.applyPersonaToStudio(activePersona);
+      this.engine.learnFromBehavior(userId, {
+        type: 'persona_selected',
+        personaId,
+        timestamp: new Date(),
+      });
+      console.log(`[PersonaUISystem] Persona applied: ${personaId} for user ${userId}`);
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : String(error);
+      console.log(`[PersonaUISystem] Failed to apply persona: ${message}`);
+      this.emit('error', { type: 'persona_selection_failed', personaId, userId, error: message });
+    }
+  }
+
+  private applyPersonaToStudio(persona: ActivePersona): void {
+    const studioConfig = persona.studio;
+
+    this.studioState.layout = studioConfig.interface.layout;
+    this.studioState.theme = studioConfig.interface.colorScheme;
+    this.studioState.activeFrames = [
+      ...(studioConfig.frames.primary || []),
+      ...(studioConfig.frames.secondary || []),
+    ];
+
+    this.updateComponent('studio-interface', {
+      visible: true,
+      config: {
+        layout: studioConfig.interface.layout,
+        theme: studioConfig.interface.colorScheme,
+        typography: studioConfig.interface.typography,
+        visualElements: studioConfig.interface.visualElements,
+      },
+      state: {
+        activePersonaId: persona.id,
+        activeFrames: this.studioState.activeFrames,
+      },
+    });
+
+    this.studioState.panels = this.generatePanels(studioConfig);
+    this.studioState.toolbars = this.generateToolbars(studioConfig);
+
+    this.emit('studio:configured', {
+      personaId: persona.id,
+      layout: studioConfig.interface.layout,
+      frameCount: this.studioState.activeFrames.length,
+    });
+  }
+
+  private generatePanels(studioConfig: StudioConfig): UIComponent[] {
+    const panels: UIComponent[] = [];
+
+    const visualElements = studioConfig.interface.visualElements || [];
+    for (let i = 0; i < visualElements.length; i++) {
+      panels.push({
+        id: `panel-${visualElements[i]}`,
+        type: 'panel',
+        visible: true,
+        position: { x: 0, y: i * 200 },
+        size: { width: 300, height: 200 },
+        config: {
+          title: visualElements[i].replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()),
+          collapsible: true,
+          draggable: true,
+        },
+        state: {},
+      });
+    }
+
+    return panels;
+  }
+
+  private generateToolbars(studioConfig: StudioConfig): UIComponent[] {
+    const toolbars: UIComponent[] = [];
+
+    const workflows = studioConfig.workflows || {};
+    for (const [category, items] of Object.entries(workflows)) {
+      toolbars.push({
+        id: `toolbar-${category}`,
+        type: 'toolbar',
+        visible: true,
+        position: { x: 0, y: 0 },
+        size: { width: 600, height: 48 },
+        config: {
+          category,
+          items: items,
+          orientation: 'horizontal',
+        },
+        state: {},
+      });
+    }
+
+    return toolbars;
+  }
+
+  getStudioState(): StudioState {
+    return { ...this.studioState };
+  }
+
+  // ─── Workflow Engine ──────────────────────────────────────────────────────
+
+  startWorkflow(
+    type: string,
+    personaId: string,
+    userId: string,
+    parameters: Record<string, unknown> = {}
+  ): WorkflowInstance {
+    if (this.workflows.size >= this.config.maxWorkflows) {
+      throw new Error(`Maximum concurrent workflows (${this.config.maxWorkflows}) reached`);
+    }
+
+    const steps = this.generateWorkflowSteps(type, personaId);
+
+    const workflow: WorkflowInstance = {
+      id: randomUUID(),
+      type,
+      personaId,
+      userId,
+      parameters,
+      startTime: new Date(),
+      status: 'pending',
+      progress: 0,
+      steps,
+      results: {},
+    };
+
+    this.workflows.set(workflow.id, workflow);
+
+    const progressState: ProgressState = {
+      workflowId: workflow.id,
+      phase: 'initialization',
+      percentage: 0,
+      currentStep: steps.length > 0 ? steps[0].name : 'unknown',
+      stepsCompleted: 0,
+      totalSteps: steps.length,
+      startedAt: new Date(),
+    };
+    this.progressStates.set(workflow.id, progressState);
+
+    this.emit('workflow:started', { workflowId: workflow.id, type, personaId, userId });
+
+    this.engine.learnFromBehavior(userId, {
+      type: 'workflow_start',
+      workflowType: type,
+      personaId,
+      timestamp: new Date(),
+    });
+
+    this.runWorkflow(workflow.id);
+
+    return workflow;
+  }
+
+  private generateWorkflowSteps(type: string, _personaId: string): WorkflowStep[] {
+    const defaultSteps: Record<string, string[]> = {
+      design: ['Research', 'Ideation', 'Wireframing', 'Mockup', 'Prototype', 'Testing', 'Iteration'],
+      development: ['Planning', 'Architecture', 'Implementation', 'Testing', 'Code Review', 'Deployment'],
+      analysis: ['Data Collection', 'Data Cleaning', 'Exploration', 'Analysis', 'Visualization', 'Reporting'],
+      'product-planning': ['Research', 'Strategy', 'Requirements', 'Prioritization', 'Roadmap', 'Communication'],
+      'sprint-planning': ['Backlog Review', 'Capacity Planning', 'Story Selection', 'Task Breakdown', 'Commitment'],
+      default: ['Initialize', 'Process', 'Validate', 'Complete'],
+    };
+
+    const stepNames = defaultSteps[type] || defaultSteps['default'];
+
+    return stepNames.map((name, index) => ({
+      id: randomUUID(),
+      name,
+      description: `${name} phase of ${type} workflow`,
+      status: index === 0 ? 'active' : 'pending' as 'pending' | 'active' | 'completed' | 'skipped' | 'failed',
+      data: {},
+    }));
+  }
+
+  private async runWorkflow(workflowId: string): Promise<void> {
+    const workflow = this.workflows.get(workflowId);
+    if (!workflow) {
+      return;
+    }
+
+    workflow.status = 'running';
+
+    for (let i = 0; i < workflow.steps.length; i++) {
+      const step = workflow.steps[i];
+
+      if ((workflow.status as string) === 'cancelled') {
+        step.status = 'skipped';
+        continue;
+      }
+
+      step.status = 'active';
+      step.startedAt = new Date();
+
+      this.updateProgress(workflowId, {
+        phase: step.name.toLowerCase(),
+        currentStep: step.name,
+        stepsCompleted: i,
+        percentage: Math.round((i / workflow.steps.length) * 100),
+      });
+
+      this.emit('workflow:step', { workflowId, stepId: step.id, stepName: step.name, stepIndex: i });
+
+      try {
+        await this.executeWorkflowStep(workflow, step);
+        step.status = 'completed';
+        step.completedAt = new Date();
+      } catch (error: unknown) {
+        const message = error instanceof Error ? error.message : String(error);
+        step.status = 'failed';
+        workflow.status = 'failed';
+        workflow.error = message;
+        workflow.endTime = new Date();
+
+        this.emit('workflow:failed', { workflowId, error: message, failedStep: step.name });
+        return;
+      }
+    }
+
+    workflow.status = 'completed';
+    workflow.progress = 100;
+    workflow.endTime = new Date();
+
+    this.updateProgress(workflowId, {
+      phase: 'complete',
+      currentStep: 'Done',
+      stepsCompleted: workflow.steps.length,
+      percentage: 100,
+    });
+
+    this.generateResults(workflow);
+
+    this.emit('workflow:completed', { workflowId, results: workflow.results });
+
+    this.engine.learnFromBehavior(workflow.userId, {
+      type: 'workflow_complete',
+      workflowType: workflow.type,
+      personaId: workflow.personaId,
+      duration: workflow.endTime.getTime() - workflow.startTime.getTime(),
+      timestamp: new Date(),
+    });
+  }
+
+  private async executeWorkflowStep(workflow: WorkflowInstance, step: WorkflowStep): Promise<void> {
+    const duration = 50 + Math.random() * 150;
+    await new Promise<void>((resolve) => setTimeout(resolve, duration));
+
+    step.data = {
+      executedAt: new Date(),
+      duration,
+      workflowType: workflow.type,
+      personaId: workflow.personaId,
+    };
+  }
+
+  private generateResults(workflow: WorkflowInstance): void {
+    const completedSteps = workflow.steps.filter((s) => s.status === 'completed');
+    const failedSteps = workflow.steps.filter((s) => s.status === 'failed');
+    const totalDuration = workflow.endTime
+      ? workflow.endTime.getTime() - workflow.startTime.getTime()
+      : 0;
+
+    workflow.results = {
+      summary: {
+        workflowType: workflow.type,
+        personaId: workflow.personaId,
+        totalSteps: workflow.steps.length,
+        completedSteps: completedSteps.length,
+        failedSteps: failedSteps.length,
+        totalDuration,
+        averageStepDuration: completedSteps.length > 0 ? totalDuration / completedSteps.length : 0,
+      },
+      steps: workflow.steps.map((s) => ({
+        name: s.name,
+        status: s.status,
+        duration: s.completedAt && s.startedAt
+          ? s.completedAt.getTime() - s.startedAt.getTime()
+          : null,
+        data: s.data,
+      })),
+      artifacts: this.generateArtifacts(workflow),
+    };
+  }
+
+  private generateArtifacts(workflow: WorkflowInstance): Record<string, unknown>[] {
+    const artifacts: Record<string, unknown>[] = [];
+
+    switch (workflow.type) {
+      case 'design':
+        artifacts.push(
+          { type: 'wireframe', name: 'Initial Wireframes', format: 'svg' },
+          { type: 'mockup', name: 'High-Fidelity Mockups', format: 'png' },
+          { type: 'prototype', name: 'Interactive Prototype', format: 'html' }
+        );
+        break;
+      case 'development':
+        artifacts.push(
+          { type: 'code', name: 'Source Code', format: 'typescript' },
+          { type: 'tests', name: 'Test Suite', format: 'typescript' },
+          { type: 'documentation', name: 'API Documentation', format: 'markdown' }
+        );
+        break;
+      case 'analysis':
+        artifacts.push(
+          { type: 'dataset', name: 'Processed Dataset', format: 'csv' },
+          { type: 'visualization', name: 'Data Visualizations', format: 'svg' },
+          { type: 'report', name: 'Analysis Report', format: 'markdown' }
+        );
+        break;
+      case 'product-planning':
+        artifacts.push(
+          { type: 'roadmap', name: 'Product Roadmap', format: 'json' },
+          { type: 'requirements', name: 'Requirements Document', format: 'markdown' },
+          { type: 'metrics', name: 'Success Metrics', format: 'json' }
+        );
+        break;
+      default:
+        artifacts.push(
+          { type: 'output', name: 'Workflow Output', format: 'json' }
+        );
+    }
+
+    return artifacts;
+  }
+
+  cancelWorkflow(workflowId: string): boolean {
+    const workflow = this.workflows.get(workflowId);
+    if (!workflow || workflow.status !== 'running') {
+      return false;
+    }
+
+    workflow.status = 'cancelled';
+    workflow.endTime = new Date();
+    this.emit('workflow:cancelled', { workflowId });
+    return true;
+  }
+
+  getWorkflow(workflowId: string): WorkflowInstance | undefined {
+    return this.workflows.get(workflowId);
+  }
+
+  getActiveWorkflows(): WorkflowInstance[] {
+    return Array.from(this.workflows.values()).filter(
+      (w) => w.status === 'running' || w.status === 'pending'
+    );
+  }
+
+  getCompletedWorkflows(): WorkflowInstance[] {
+    return Array.from(this.workflows.values()).filter(
+      (w) => w.status === 'completed'
+    );
+  }
+
+  getAllWorkflows(): WorkflowInstance[] {
+    return Array.from(this.workflows.values());
+  }
+
+  // ─── Progress Tracking ────────────────────────────────────────────────────
+
+  private updateProgress(workflowId: string, updates: Partial<ProgressState>): void {
+    const state = this.progressStates.get(workflowId);
+    if (!state) {
+      return;
+    }
+
+    Object.assign(state, updates);
+
+    if (state.percentage < 100 && state.stepsCompleted > 0) {
+      const elapsed = Date.now() - state.startedAt.getTime();
+      const avgStepTime = elapsed / state.stepsCompleted;
+      const remainingSteps = state.totalSteps - state.stepsCompleted;
+      state.estimatedTimeRemaining = Math.round(avgStepTime * remainingSteps);
+    }
+
+    this.emit('progress:updated', { workflowId, progress: { ...state } });
+  }
+
+  getProgress(workflowId: string): ProgressState | undefined {
+    return this.progressStates.get(workflowId);
+  }
+
+  getAllProgress(): ProgressState[] {
+    return Array.from(this.progressStates.values());
+  }
+
+  getActiveProgress(): ProgressState[] {
+    return Array.from(this.progressStates.values()).filter((p) => p.percentage < 100);
+  }
+
+  // ─── Result Display ───────────────────────────────────────────────────────
+
+  createResultDisplay(workflowId: string, type: string, title: string, data: Record<string, unknown>, format: string = 'table'): ResultDisplay {
+    const result: ResultDisplay = {
+      id: randomUUID(),
+      workflowId,
+      type,
+      title,
+      data,
+      format,
+      createdAt: new Date(),
+    };
+
+    this.resultDisplays.set(result.id, result);
+    this.showComponent('result-display');
+    this.emit('result:created', { resultId: result.id, workflowId, type });
+    return result;
+  }
+
+  getResultDisplay(resultId: string): ResultDisplay | undefined {
+    return this.resultDisplays.get(resultId);
+  }
+
+  getResultsForWorkflow(workflowId: string): ResultDisplay[] {
+    return Array.from(this.resultDisplays.values()).filter(
+      (r) => r.workflowId === workflowId
+    );
+  }
+
+  getAllResults(): ResultDisplay[] {
+    return Array.from(this.resultDisplays.values());
+  }
+
+  removeResultDisplay(resultId: string): boolean {
+    return this.resultDisplays.delete(resultId);
+  }
+
+  clearResults(): void {
+    this.resultDisplays.clear();
+    this.emit('results:cleared');
+  }
+
+  // ─── Layout & Theme ───────────────────────────────────────────────────────
+
+  setLayout(layout: string): void {
+    this.studioState.layout = layout;
+    this.updateComponent('studio-interface', {
+      config: { layout },
+    });
+    this.emit('layout:changed', { layout });
+  }
+
+  setTheme(theme: string): void {
+    this.studioState.theme = theme;
+    this.updateComponent('studio-interface', {
+      config: { theme },
+    });
+    this.emit('theme:changed', { theme });
+  }
+
+  getLayout(): string {
+    return this.studioState.layout;
+  }
+
+  getTheme(): string {
+    return this.studioState.theme;
+  }
+
+  // ─── Frame Management ─────────────────────────────────────────────────────
+
+  activateFrame(frameId: string): void {
+    if (!this.studioState.activeFrames.includes(frameId)) {
+      this.studioState.activeFrames.push(frameId);
+      this.emit('frame:activated', { frameId });
+    }
+  }
+
+  deactivateFrame(frameId: string): void {
+    const index = this.studioState.activeFrames.indexOf(frameId);
+    if (index > -1) {
+      this.studioState.activeFrames.splice(index, 1);
+      this.emit('frame:deactivated', { frameId });
+    }
+  }
+
+  getActiveFrames(): string[] {
+    return [...this.studioState.activeFrames];
+  }
+
+  setActiveFrames(frameIds: string[]): void {
+    this.studioState.activeFrames = [...frameIds];
+    this.emit('frames:updated', { frameIds });
+  }
+
+  // ─── Status & Analytics ───────────────────────────────────────────────────
+
+  getStatus(): Record<string, unknown> {
+    return {
+      initialized: this.initialized,
+      components: this.components.size,
+      visibleComponents: this.getVisibleComponents().length,
+      activeWorkflows: this.getActiveWorkflows().length,
+      completedWorkflows: this.getCompletedWorkflows().length,
+      totalResults: this.resultDisplays.size,
+      selectorState: {
+        isOpen: this.selectorState.isOpen,
+        selectedPersonaId: this.selectorState.selectedPersonaId,
+      },
+      studioState: {
+        layout: this.studioState.layout,
+        theme: this.studioState.theme,
+        activeFrames: this.studioState.activeFrames.length,
+        panels: this.studioState.panels.length,
+        toolbars: this.studioState.toolbars.length,
+      },
+      config: { ...this.config },
+    };
+  }
+
+  getUIAnalytics(): Record<string, unknown> {
+    const workflows = Array.from(this.workflows.values());
+    const completed = workflows.filter((w) => w.status === 'completed');
+    const failed = workflows.filter((w) => w.status === 'failed');
+
+    const totalDuration = completed.reduce((sum, w) => {
+      if (w.endTime) {
+        return sum + (w.endTime.getTime() - w.startTime.getTime());
+      }
+      return sum;
+    }, 0);
+
+    const workflowsByType: Record<string, number> = {};
+    for (const w of workflows) {
+      workflowsByType[w.type] = (workflowsByType[w.type] || 0) + 1;
+    }
+
+    const workflowsByPersona: Record<string, number> = {};
+    for (const w of workflows) {
+      workflowsByPersona[w.personaId] = (workflowsByPersona[w.personaId] || 0) + 1;
+    }
+
+    return {
+      totalWorkflows: workflows.length,
+      completedWorkflows: completed.length,
+      failedWorkflows: failed.length,
+      averageDuration: completed.length > 0 ? totalDuration / completed.length : 0,
+      workflowsByType,
+      workflowsByPersona,
+      totalResults: this.resultDisplays.size,
+      componentCount: this.components.size,
+    };
+  }
+
+  // ─── Cleanup ──────────────────────────────────────────────────────────────
+
+  dispose(): void {
+    this.removeAllListeners();
+    this.components.clear();
+    this.workflows.clear();
+    this.progressStates.clear();
+    this.resultDisplays.clear();
+    this.initialized = false;
+    console.log('[PersonaUISystem] UI system disposed');
+  }
+}