feat(taskbuffer-dashboard): Add TaskBuffer dashboard web component, demo and browser tests; add HTML entry and update dependencies

test/test.10.webcomponent.browser.ts

@@ -0,0 +1,141 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import * as taskbuffer from '../ts/index.js';
+
+// Note: Web components can't be tested directly in Node.js environment
+// These tests verify the data structures that the web component will consume
+
+// Test that TaskManager can provide data for web component
+tap.test('TaskManager should provide metadata for web visualization', async () => {
+  const taskManager = new taskbuffer.TaskManager();
+  
+  // Add a task with steps
+  const visualTask = new taskbuffer.Task({
+    name: 'VisualizationTest',
+    steps: [
+      { name: 'load', description: 'Loading data', percentage: 30 },
+      { name: 'process', description: 'Processing', percentage: 50 },
+      { name: 'render', description: 'Rendering', percentage: 20 },
+    ] as const,
+    taskFunction: async () => {
+      visualTask.notifyStep('load');
+      await new Promise(resolve => setTimeout(resolve, 50));
+      visualTask.notifyStep('process');
+      await new Promise(resolve => setTimeout(resolve, 50));
+      visualTask.notifyStep('render');
+      return 'Visualization complete';
+    },
+  });
+  
+  taskManager.addTask(visualTask);
+  
+  // Get metadata before execution
+  let metadata = taskManager.getTaskMetadata('VisualizationTest');
+  expect(metadata).toBeDefined();
+  expect(metadata!.name).toEqual('VisualizationTest');
+  expect(metadata!.steps).toHaveLength(3);
+  expect(metadata!.currentProgress).toEqual(0);
+  
+  // Execute task
+  await visualTask.trigger();
+  
+  // Get metadata after execution
+  metadata = taskManager.getTaskMetadata('VisualizationTest');
+  expect(metadata!.currentProgress).toEqual(100);
+  expect(metadata!.steps.every(s => s.status === 'completed')).toBeTrue();
+});
+
+// Test scheduled task metadata for web display
+tap.test('Scheduled tasks should provide next run information', async () => {
+  const taskManager = new taskbuffer.TaskManager();
+  
+  const scheduledTask = new taskbuffer.Task({
+    name: 'WebScheduledTask',
+    steps: [
+      { name: 'run', description: 'Running scheduled task', percentage: 100 },
+    ] as const,
+    taskFunction: async () => {
+      scheduledTask.notifyStep('run');
+    },
+  });
+  
+  // Schedule task for every hour
+  taskManager.addAndScheduleTask(scheduledTask, '0 * * * *');
+  
+  // Get scheduled tasks info
+  const scheduledTasks = taskManager.getScheduledTasks();
+  expect(scheduledTasks).toHaveLength(1);
+  expect(scheduledTasks[0].name).toEqual('WebScheduledTask');
+  expect(scheduledTasks[0].schedule).toEqual('0 * * * *');
+  expect(scheduledTasks[0].nextRun).toBeInstanceOf(Date);
+  expect(scheduledTasks[0].steps).toHaveLength(1);
+  
+  // Clean up
+  taskManager.descheduleTaskByName('WebScheduledTask');
+  taskManager.stop();
+});
+
+// Test data structure compatibility
+tap.test('Task metadata should be suitable for web component display', async () => {
+  const taskManager = new taskbuffer.TaskManager();
+  
+  // Add various types of tasks
+  const simpleTask = new taskbuffer.Task({
+    name: 'SimpleWebTask',
+    taskFunction: async () => 'done',
+  });
+  
+  const bufferedTask = new taskbuffer.Task({
+    name: 'BufferedWebTask',
+    buffered: true,
+    bufferMax: 3,
+    taskFunction: async () => 'buffered',
+  });
+  
+  const steppedTask = new taskbuffer.Task({
+    name: 'SteppedWebTask',
+    steps: [
+      { name: 'step1', description: 'First step', percentage: 50 },
+      { name: 'step2', description: 'Second step', percentage: 50 },
+    ] as const,
+    taskFunction: async () => {
+      steppedTask.notifyStep('step1');
+      steppedTask.notifyStep('step2');
+    },
+  });
+  
+  taskManager.addTask(simpleTask);
+  taskManager.addTask(bufferedTask);
+  taskManager.addTask(steppedTask);
+  
+  // Get all metadata
+  const allMetadata = taskManager.getAllTasksMetadata();
+  expect(allMetadata).toHaveLength(3);
+  
+  // Verify metadata structure
+  allMetadata.forEach(meta => {
+    expect(meta.name).toBeDefined();
+    expect(meta.status).toBeDefined();
+    expect(meta.runCount).toBeDefined();
+    expect(meta.steps).toBeDefined();
+    expect(Array.isArray(meta.steps)).toBeTrue();
+    expect(meta.currentProgress).toBeDefined();
+    expect(typeof meta.currentProgress).toEqual('number');
+  });
+  
+  // Verify buffered task metadata
+  const bufferedMeta = allMetadata.find(m => m.name === 'BufferedWebTask');
+  expect(bufferedMeta!.buffered).toBeTrue();
+  expect(bufferedMeta!.bufferMax).toEqual(3);
+  
+  // Verify stepped task metadata
+  const steppedMeta = allMetadata.find(m => m.name === 'SteppedWebTask');
+  expect(steppedMeta!.steps).toHaveLength(2);
+  steppedMeta!.steps.forEach(step => {
+    expect(step.name).toBeDefined();
+    expect(step.description).toBeDefined();
+    expect(step.percentage).toBeDefined();
+    expect(step.status).toBeDefined();
+  });
+});
+
+export default tap.start();