feat: add domains, ideas, layouts, widgets API modules
- Add DomainsModule with full CRUD, search, and activity logging - Add IdeasModule with quick capture endpoint - Add LayoutsModule for user dashboard layouts - Add WidgetsModule for widget definitions (read-only) - Update ActivityService with domain/idea logging methods - Register all new modules in AppModule
This commit is contained in:
Jason Woltje
169
apps/web/src/components/widgets/AgentStatusWidget.tsx
Normal file
169
apps/web/src/components/widgets/AgentStatusWidget.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
/**
|
||||
* Agent Status Widget - shows running agents
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Bot, Activity, AlertCircle, CheckCircle, Clock } from "lucide-react";
|
||||
import type { WidgetProps } from "@mosaic/shared";
|
||||
|
||||
interface Agent {
|
||||
id: string;
|
||||
name: string;
|
||||
status: "IDLE" | "WORKING" | "WAITING" | "ERROR" | "TERMINATED";
|
||||
currentTask?: string;
|
||||
lastHeartbeat: string;
|
||||
taskCount: number;
|
||||
}
|
||||
|
||||
export function AgentStatusWidget({ id: _id, config: _config }: WidgetProps) {
|
||||
const [agents, setAgents] = useState<Agent[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
// Mock data for now - will fetch from API later
|
||||
useEffect(() => {
|
||||
setIsLoading(true);
|
||||
setTimeout(() => {
|
||||
setAgents([
|
||||
{
|
||||
id: "1",
|
||||
name: "Code Review Agent",
|
||||
status: "WORKING",
|
||||
currentTask: "Reviewing PR #123",
|
||||
lastHeartbeat: new Date().toISOString(),
|
||||
taskCount: 42,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Documentation Agent",
|
||||
status: "IDLE",
|
||||
lastHeartbeat: new Date().toISOString(),
|
||||
taskCount: 15,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Test Runner Agent",
|
||||
status: "ERROR",
|
||||
currentTask: "Failed to run tests",
|
||||
lastHeartbeat: new Date(Date.now() - 300000).toISOString(),
|
||||
taskCount: 28,
|
||||
},
|
||||
]);
|
||||
setIsLoading(false);
|
||||
}, 500);
|
||||
}, []);
|
||||
|
||||
const getStatusIcon = (status: Agent["status"]) => {
|
||||
switch (status) {
|
||||
case "WORKING":
|
||||
return <Activity className="w-4 h-4 text-blue-500 animate-pulse" />;
|
||||
case "IDLE":
|
||||
return <Clock className="w-4 h-4 text-gray-400" />;
|
||||
case "WAITING":
|
||||
return <Clock className="w-4 h-4 text-yellow-500" />;
|
||||
case "ERROR":
|
||||
return <AlertCircle className="w-4 h-4 text-red-500" />;
|
||||
case "TERMINATED":
|
||||
return <CheckCircle className="w-4 h-4 text-gray-500" />;
|
||||
default:
|
||||
return <Clock className="w-4 h-4 text-gray-400" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusText = (status: Agent["status"]) => {
|
||||
return status.charAt(0).toUpperCase() + status.slice(1).toLowerCase();
|
||||
};
|
||||
|
||||
const getTimeSinceLastHeartbeat = (timestamp: string) => {
|
||||
const now = new Date();
|
||||
const last = new Date(timestamp);
|
||||
const diffMs = now.getTime() - last.getTime();
|
||||
|
||||
if (diffMs < 60000) return "Just now";
|
||||
if (diffMs < 3600000) return `${Math.floor(diffMs / 60000)}m ago`;
|
||||
if (diffMs < 86400000) return `${Math.floor(diffMs / 3600000)}h ago`;
|
||||
return `${Math.floor(diffMs / 86400000)}d ago`;
|
||||
};
|
||||
|
||||
const stats = {
|
||||
total: agents.length,
|
||||
working: agents.filter((a) => a.status === "WORKING").length,
|
||||
idle: agents.filter((a) => a.status === "IDLE").length,
|
||||
error: agents.filter((a) => a.status === "ERROR").length,
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-gray-500 text-sm">Loading agents...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full space-y-3">
|
||||
{/* Summary stats */}
|
||||
<div className="grid grid-cols-4 gap-1 text-center text-xs">
|
||||
<div className="bg-gray-50 rounded p-2">
|
||||
<div className="text-lg font-bold text-gray-900">{stats.total}</div>
|
||||
<div className="text-gray-500">Total</div>
|
||||
</div>
|
||||
<div className="bg-blue-50 rounded p-2">
|
||||
<div className="text-lg font-bold text-blue-600">{stats.working}</div>
|
||||
<div className="text-blue-500">Working</div>
|
||||
</div>
|
||||
<div className="bg-gray-100 rounded p-2">
|
||||
<div className="text-lg font-bold text-gray-600">{stats.idle}</div>
|
||||
<div className="text-gray-500">Idle</div>
|
||||
</div>
|
||||
<div className="bg-red-50 rounded p-2">
|
||||
<div className="text-lg font-bold text-red-600">{stats.error}</div>
|
||||
<div className="text-red-500">Error</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Agent list */}
|
||||
<div className="flex-1 overflow-auto space-y-2">
|
||||
{agents.length === 0 ? (
|
||||
<div className="text-center text-gray-500 text-sm py-4">
|
||||
No agents configured
|
||||
</div>
|
||||
) : (
|
||||
agents.map((agent) => (
|
||||
<div
|
||||
key={agent.id}
|
||||
className={`p-3 rounded-lg border ${
|
||||
agent.status === "ERROR"
|
||||
? "bg-red-50 border-red-200"
|
||||
: agent.status === "WORKING"
|
||||
? "bg-blue-50 border-blue-200"
|
||||
: "bg-gray-50 border-gray-200"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Bot className="w-4 h-4 text-gray-600" />
|
||||
<span className="text-sm font-medium text-gray-900">
|
||||
{agent.name}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-xs text-gray-500">
|
||||
{getStatusIcon(agent.status)}
|
||||
<span>{getStatusText(agent.status)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{agent.currentTask && (
|
||||
<div className="text-xs text-gray-600 mb-1">{agent.currentTask}</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between text-xs text-gray-400">
|
||||
<span>{agent.taskCount} tasks completed</span>
|
||||
<span>{getTimeSinceLastHeartbeat(agent.lastHeartbeat)}</span>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
141
apps/web/src/components/widgets/CalendarWidget.tsx
Normal file
141
apps/web/src/components/widgets/CalendarWidget.tsx
Normal file
@@ -0,0 +1,141 @@
|
||||
/**
|
||||
* Calendar Widget - displays upcoming events
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Calendar as CalendarIcon, Clock, MapPin } from "lucide-react";
|
||||
import type { WidgetProps } from "@mosaic/shared";
|
||||
|
||||
interface Event {
|
||||
id: string;
|
||||
title: string;
|
||||
startTime: string;
|
||||
endTime?: string;
|
||||
location?: string;
|
||||
allDay: boolean;
|
||||
}
|
||||
|
||||
export function CalendarWidget({ id: _id, config: _config }: WidgetProps) {
|
||||
const [events, setEvents] = useState<Event[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
// Mock data for now - will fetch from API later
|
||||
useEffect(() => {
|
||||
setIsLoading(true);
|
||||
const now = new Date();
|
||||
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
||||
const tomorrow = new Date(today);
|
||||
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||
|
||||
setTimeout(() => {
|
||||
setEvents([
|
||||
{
|
||||
id: "1",
|
||||
title: "Team Standup",
|
||||
startTime: new Date(today.setHours(9, 0, 0, 0)).toISOString(),
|
||||
endTime: new Date(today.setHours(9, 30, 0, 0)).toISOString(),
|
||||
location: "Zoom",
|
||||
allDay: false,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Project Review",
|
||||
startTime: new Date(today.setHours(14, 0, 0, 0)).toISOString(),
|
||||
endTime: new Date(today.setHours(15, 0, 0, 0)).toISOString(),
|
||||
location: "Conference Room A",
|
||||
allDay: false,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Sprint Planning",
|
||||
startTime: new Date(tomorrow.setHours(10, 0, 0, 0)).toISOString(),
|
||||
endTime: new Date(tomorrow.setHours(12, 0, 0, 0)).toISOString(),
|
||||
allDay: false,
|
||||
},
|
||||
]);
|
||||
setIsLoading(false);
|
||||
}, 500);
|
||||
}, []);
|
||||
|
||||
const formatTime = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleTimeString("en-US", {
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
hour12: true,
|
||||
});
|
||||
};
|
||||
|
||||
const formatDay = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
const today = new Date();
|
||||
const tomorrow = new Date(today);
|
||||
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||
|
||||
if (date.toDateString() === today.toDateString()) {
|
||||
return "Today";
|
||||
} else if (date.toDateString() === tomorrow.toDateString()) {
|
||||
return "Tomorrow";
|
||||
}
|
||||
return date.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" });
|
||||
};
|
||||
|
||||
const getUpcomingEvents = () => {
|
||||
const now = new Date();
|
||||
return events
|
||||
.filter((e) => new Date(e.startTime) > now)
|
||||
.sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime())
|
||||
.slice(0, 5);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-gray-500 text-sm">Loading events...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const upcomingEvents = getUpcomingEvents();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full space-y-3">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<CalendarIcon className="w-4 h-4" />
|
||||
<span className="text-sm font-medium">Upcoming Events</span>
|
||||
</div>
|
||||
|
||||
{/* Event list */}
|
||||
<div className="flex-1 overflow-auto space-y-3">
|
||||
{upcomingEvents.length === 0 ? (
|
||||
<div className="text-center text-gray-500 text-sm py-4">No upcoming events</div>
|
||||
) : (
|
||||
upcomingEvents.map((event) => (
|
||||
<div key={event.id} className="border-l-2 border-blue-500 pl-3 py-1">
|
||||
<div className="text-sm font-medium text-gray-900">{event.title}</div>
|
||||
<div className="flex items-center gap-3 mt-1 text-xs text-gray-500">
|
||||
{!event.allDay && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
<span>
|
||||
{formatTime(event.startTime)}
|
||||
{event.endTime && ` - ${formatTime(event.endTime)}`}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{event.location && (
|
||||
<div className="flex items-center gap-1">
|
||||
<MapPin className="w-3 h-3" />
|
||||
<span>{event.location}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="text-gray-400">{formatDay(event.startTime)}</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
94
apps/web/src/components/widgets/QuickCaptureWidget.tsx
Normal file
94
apps/web/src/components/widgets/QuickCaptureWidget.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
/**
|
||||
* Quick Capture Widget - idea/brain dump input
|
||||
*/
|
||||
|
||||
import { useState } from "react";
|
||||
import { Send, Lightbulb } from "lucide-react";
|
||||
import type { WidgetProps } from "@mosaic/shared";
|
||||
|
||||
export function QuickCaptureWidget({ id: _id, config: _config }: WidgetProps) {
|
||||
const [input, setInput] = useState("");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [recentCaptures, setRecentCaptures] = useState<string[]>([]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!input.trim() || isSubmitting) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
const idea = input.trim();
|
||||
|
||||
try {
|
||||
// TODO: Replace with actual API call
|
||||
// await api.ideas.create({ content: idea });
|
||||
|
||||
// Add to recent captures for visual feedback
|
||||
setRecentCaptures((prev) => [idea, ...prev].slice(0, 3));
|
||||
setInput("");
|
||||
} catch (error) {
|
||||
console.error("Failed to capture idea:", error);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full space-y-3">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<Lightbulb className="w-4 h-4 text-yellow-500" />
|
||||
<span className="text-sm font-medium">Quick Capture</span>
|
||||
</div>
|
||||
|
||||
{/* Input form */}
|
||||
<form onSubmit={handleSubmit} className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder="Capture an idea..."
|
||||
className="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!input.trim() || isSubmitting}
|
||||
className="px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
) : (
|
||||
<Send className="w-4 h-4" />
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Recent captures */}
|
||||
{recentCaptures.length > 0 && (
|
||||
<div className="flex-1 overflow-auto">
|
||||
<div className="text-xs text-gray-500 mb-2">Recently captured:</div>
|
||||
<div className="space-y-2">
|
||||
{recentCaptures.map((capture, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="p-2 bg-gray-50 rounded text-sm text-gray-700"
|
||||
>
|
||||
{capture}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tips */}
|
||||
{recentCaptures.length === 0 && (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<div className="text-center text-gray-400 text-xs space-y-1">
|
||||
<div>Capture ideas quickly</div>
|
||||
<div>They'll be organized later</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
134
apps/web/src/components/widgets/TasksWidget.tsx
Normal file
134
apps/web/src/components/widgets/TasksWidget.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
/**
|
||||
* Tasks Widget - displays task summary and list
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { CheckCircle, Circle, Clock, AlertCircle } from "lucide-react";
|
||||
import type { WidgetProps } from "@mosaic/shared";
|
||||
|
||||
interface Task {
|
||||
id: string;
|
||||
title: string;
|
||||
status: string;
|
||||
priority: string;
|
||||
dueDate?: string;
|
||||
}
|
||||
|
||||
export function TasksWidget({ }: WidgetProps) {
|
||||
const [tasks, setTasks] = useState<Task[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
// Mock data for now - will fetch from API later
|
||||
useEffect(() => {
|
||||
setIsLoading(true);
|
||||
// Simulate API call
|
||||
setTimeout(() => {
|
||||
setTasks([
|
||||
{
|
||||
id: "1",
|
||||
title: "Complete project documentation",
|
||||
status: "IN_PROGRESS",
|
||||
priority: "HIGH",
|
||||
dueDate: "2024-02-01",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Review pull requests",
|
||||
status: "NOT_STARTED",
|
||||
priority: "MEDIUM",
|
||||
dueDate: "2024-02-02",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Update dependencies",
|
||||
status: "COMPLETED",
|
||||
priority: "LOW",
|
||||
dueDate: "2024-01-30",
|
||||
},
|
||||
]);
|
||||
setIsLoading(false);
|
||||
}, 500);
|
||||
}, []);
|
||||
|
||||
const getPriorityIcon = (priority: string) => {
|
||||
switch (priority) {
|
||||
case "HIGH":
|
||||
return <AlertCircle className="w-4 h-4 text-red-500" />;
|
||||
case "MEDIUM":
|
||||
return <Clock className="w-4 h-4 text-yellow-500" />;
|
||||
case "LOW":
|
||||
return <Circle className="w-4 h-4 text-gray-400" />;
|
||||
default:
|
||||
return <Circle className="w-4 h-4 text-gray-400" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusIcon = (status: string) => {
|
||||
return status === "COMPLETED" ? (
|
||||
<CheckCircle className="w-4 h-4 text-green-500" />
|
||||
) : (
|
||||
<Circle className="w-4 h-4 text-gray-400" />
|
||||
);
|
||||
};
|
||||
|
||||
const stats = {
|
||||
total: tasks.length,
|
||||
inProgress: tasks.filter((t) => t.status === "IN_PROGRESS").length,
|
||||
completed: tasks.filter((t) => t.status === "COMPLETED").length,
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-gray-500 text-sm">Loading tasks...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full space-y-3">
|
||||
{/* Summary stats */}
|
||||
<div className="grid grid-cols-3 gap-2 text-center">
|
||||
<div className="bg-gray-50 rounded p-2">
|
||||
<div className="text-2xl font-bold text-gray-900">{stats.total}</div>
|
||||
<div className="text-xs text-gray-500">Total</div>
|
||||
</div>
|
||||
<div className="bg-blue-50 rounded p-2">
|
||||
<div className="text-2xl font-bold text-blue-600">{stats.inProgress}</div>
|
||||
<div className="text-xs text-blue-500">In Progress</div>
|
||||
</div>
|
||||
<div className="bg-green-50 rounded p-2">
|
||||
<div className="text-2xl font-bold text-green-600">{stats.completed}</div>
|
||||
<div className="text-xs text-green-500">Done</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Task list */}
|
||||
<div className="flex-1 overflow-auto space-y-2">
|
||||
{tasks.length === 0 ? (
|
||||
<div className="text-center text-gray-500 text-sm py-4">No tasks yet</div>
|
||||
) : (
|
||||
tasks.slice(0, 5).map((task) => (
|
||||
<div
|
||||
key={task.id}
|
||||
className="flex items-center gap-3 p-2 hover:bg-gray-50 rounded transition-colors"
|
||||
>
|
||||
{getStatusIcon(task.status)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-medium text-gray-900 truncate">
|
||||
{task.title}
|
||||
</div>
|
||||
{task.dueDate && (
|
||||
<div className="text-xs text-gray-500">
|
||||
Due: {new Date(task.dueDate).toLocaleDateString()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{getPriorityIcon(task.priority)}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
8
apps/web/src/components/widgets/index.ts
Normal file
8
apps/web/src/components/widgets/index.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* Widget components
|
||||
*/
|
||||
|
||||
export { TasksWidget } from "./TasksWidget";
|
||||
export { CalendarWidget } from "./CalendarWidget";
|
||||
export { QuickCaptureWidget } from "./QuickCaptureWidget";
|
||||
export { AgentStatusWidget } from "./AgentStatusWidget";
|
||||
22
apps/web/src/components/widgets/widget-registry.ts
Normal file
22
apps/web/src/components/widgets/widget-registry.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* Widget component registry - React-specific definitions
|
||||
*/
|
||||
|
||||
import type { ComponentType } from "react";
|
||||
import type { WidgetProps } from "@mosaic/shared";
|
||||
|
||||
/**
|
||||
* Widget component registry
|
||||
*/
|
||||
export interface WidgetComponent {
|
||||
name: string;
|
||||
displayName: string;
|
||||
description: string;
|
||||
component: ComponentType<WidgetProps>;
|
||||
defaultWidth: number;
|
||||
defaultHeight: number;
|
||||
minWidth: number;
|
||||
minHeight: number;
|
||||
maxWidth?: number;
|
||||
maxHeight?: number;
|
||||
}
|
||||
Reference in New Issue
Block a user