Files
stack/apps/web/src/components/widgets/WidgetRegistry.tsx
Jason Woltje e7f277ff0c
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
ci/woodpecker/pr/woodpecker Pipeline failed
feat(#101): Add Task Progress widget for orchestrator task monitoring
Create TaskProgressWidget showing live agent task execution progress:
- Fetches from orchestrator /agents API with 15s auto-refresh
- Shows stats (total/active/done/stopped), sorted task list
- Agent type badges (worker/reviewer/tester)
- Elapsed time tracking, error display
- Dark mode support, PDA-friendly language
- Registered in WidgetRegistry for dashboard use

Includes 7 unit tests covering all states.

Fixes #101

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-05 12:57:10 -06:00

120 lines
2.9 KiB
TypeScript

/**
* Widget Registry - Central registry for all available widgets
*/
import type { ComponentType } from "react";
import type { WidgetProps } from "@mosaic/shared";
import { TasksWidget } from "./TasksWidget";
import { CalendarWidget } from "./CalendarWidget";
import { QuickCaptureWidget } from "./QuickCaptureWidget";
import { AgentStatusWidget } from "./AgentStatusWidget";
import { ActiveProjectsWidget } from "./ActiveProjectsWidget";
import { TaskProgressWidget } from "./TaskProgressWidget";
export interface WidgetDefinition {
name: string;
displayName: string;
description: string;
component: ComponentType<WidgetProps>;
defaultWidth: number;
defaultHeight: number;
minWidth: number;
minHeight: number;
maxWidth?: number;
maxHeight?: number;
}
/**
* Registry of all available widgets
*/
export const widgetRegistry: Record<string, WidgetDefinition> = {
TasksWidget: {
name: "TasksWidget",
displayName: "Tasks",
description: "View and manage your tasks",
component: TasksWidget,
defaultWidth: 2,
defaultHeight: 2,
minWidth: 1,
minHeight: 2,
maxWidth: 4,
},
CalendarWidget: {
name: "CalendarWidget",
displayName: "Calendar",
description: "View upcoming events and schedule",
component: CalendarWidget,
defaultWidth: 2,
defaultHeight: 2,
minWidth: 2,
minHeight: 2,
maxWidth: 4,
},
QuickCaptureWidget: {
name: "QuickCaptureWidget",
displayName: "Quick Capture",
description: "Quickly capture notes and tasks",
component: QuickCaptureWidget,
defaultWidth: 2,
defaultHeight: 1,
minWidth: 2,
minHeight: 1,
maxWidth: 4,
maxHeight: 2,
},
AgentStatusWidget: {
name: "AgentStatusWidget",
displayName: "Agent Status",
description: "Monitor agent activity and status",
component: AgentStatusWidget,
defaultWidth: 2,
defaultHeight: 2,
minWidth: 1,
minHeight: 2,
maxWidth: 3,
},
ActiveProjectsWidget: {
name: "ActiveProjectsWidget",
displayName: "Active Projects & Agent Chains",
description: "View active projects and running agent sessions",
component: ActiveProjectsWidget,
defaultWidth: 2,
defaultHeight: 3,
minWidth: 2,
minHeight: 2,
maxWidth: 4,
},
TaskProgressWidget: {
name: "TaskProgressWidget",
displayName: "Task Progress",
description: "Live progress of orchestrator agent tasks",
component: TaskProgressWidget,
defaultWidth: 2,
defaultHeight: 2,
minWidth: 1,
minHeight: 2,
maxWidth: 3,
},
};
/**
* Get widget definition by name
*/
export function getWidgetByName(name: string): WidgetDefinition | undefined {
return widgetRegistry[name];
}
/**
* Get all available widgets as an array
*/
export function getAllWidgets(): WidgetDefinition[] {
return Object.values(widgetRegistry);
}
/**
* Check if a widget name is valid
*/
export function isValidWidget(name: string): boolean {
return name in widgetRegistry;
}