Files
supervisor-ui/lib/hooks/useSupervisor.ts

732 lines
24 KiB
TypeScript
Raw Normal View History

'use client';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner';
import type { ProcessInfo, SystemInfo, LogTailResult, ConfigInfo } from '@/lib/supervisor/types';
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
import { createMutationLogger } from '@/lib/utils/client-logger';
// Query Keys
export const supervisorKeys = {
all: ['supervisor'] as const,
system: () => [...supervisorKeys.all, 'system'] as const,
processes: () => [...supervisorKeys.all, 'processes'] as const,
process: (name: string) => [...supervisorKeys.processes(), name] as const,
logs: (name: string, type: 'stdout' | 'stderr') =>
[...supervisorKeys.process(name), 'logs', type] as const,
config: () => [...supervisorKeys.all, 'config'] as const,
};
// API Client Functions
async function fetchSystemInfo(): Promise<SystemInfo> {
const response = await fetch('/api/supervisor/system');
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to fetch system info');
}
return response.json();
}
async function fetchProcesses(): Promise<ProcessInfo[]> {
const response = await fetch('/api/supervisor/processes');
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to fetch processes');
}
return response.json();
}
async function fetchProcessInfo(name: string): Promise<ProcessInfo> {
const response = await fetch(`/api/supervisor/processes/${encodeURIComponent(name)}`);
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to fetch process info');
}
return response.json();
}
async function fetchProcessLogs(
name: string,
type: 'stdout' | 'stderr',
offset: number = -4096,
length: number = 4096
): Promise<LogTailResult> {
const response = await fetch(
`/api/supervisor/processes/${encodeURIComponent(name)}/logs/${type}?offset=${offset}&length=${length}`
);
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || `Failed to fetch ${type} logs`);
}
return response.json();
}
async function startProcess(name: string, wait: boolean = true): Promise<{ success: boolean; message: string }> {
const response = await fetch(`/api/supervisor/processes/${encodeURIComponent(name)}/start`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ wait }),
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to start process');
}
return response.json();
}
async function stopProcess(name: string, wait: boolean = true): Promise<{ success: boolean; message: string }> {
const response = await fetch(`/api/supervisor/processes/${encodeURIComponent(name)}/stop`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ wait }),
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to stop process');
}
return response.json();
}
async function restartProcess(name: string): Promise<{ success: boolean; message: string }> {
const response = await fetch(`/api/supervisor/processes/${encodeURIComponent(name)}/restart`, {
method: 'POST',
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to restart process');
}
return response.json();
}
// Custom Hooks
export function useSystemInfo() {
return useQuery({
queryKey: supervisorKeys.system(),
queryFn: fetchSystemInfo,
refetchInterval: 5000, // Refetch every 5 seconds
});
}
export function useProcesses(options?: { refetchInterval?: number }) {
return useQuery({
queryKey: supervisorKeys.processes(),
queryFn: fetchProcesses,
refetchInterval: options?.refetchInterval ?? 3000, // Default 3 seconds
});
}
export function useProcessInfo(name: string, enabled: boolean = true) {
return useQuery({
queryKey: supervisorKeys.process(name),
queryFn: () => fetchProcessInfo(name),
enabled,
refetchInterval: 3000,
});
}
export function useProcessLogs(
name: string,
type: 'stdout' | 'stderr',
options?: {
offset?: number;
length?: number;
enabled?: boolean;
refetchInterval?: number;
}
) {
return useQuery({
queryKey: [...supervisorKeys.logs(name, type), options?.offset, options?.length],
queryFn: () => fetchProcessLogs(name, type, options?.offset, options?.length),
enabled: options?.enabled ?? true,
refetchInterval: options?.refetchInterval ?? 2000,
});
}
export function useStartProcess() {
const queryClient = useQueryClient();
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
const logger = createMutationLogger('startProcess');
return useMutation({
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
mutationFn: ({ name, wait }: { name: string; wait?: boolean }) => {
logger.info('Starting process', { name, wait });
return startProcess(name, wait);
},
onSuccess: (data, variables) => {
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
logger.info('Process started successfully', { name: variables.name });
toast.success(data.message);
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
queryClient.invalidateQueries({ queryKey: supervisorKeys.process(variables.name) });
},
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
onError: (error: Error, variables) => {
logger.error('Failed to start process', error, { name: variables.name });
toast.error(`Failed to start process: ${error.message}`);
},
});
}
export function useStopProcess() {
const queryClient = useQueryClient();
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
const logger = createMutationLogger('stopProcess');
return useMutation({
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
mutationFn: ({ name, wait }: { name: string; wait?: boolean }) => {
logger.info('Stopping process', { name, wait });
return stopProcess(name, wait);
},
onSuccess: (data, variables) => {
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
logger.info('Process stopped successfully', { name: variables.name });
toast.success(data.message);
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
queryClient.invalidateQueries({ queryKey: supervisorKeys.process(variables.name) });
},
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
onError: (error: Error, variables) => {
logger.error('Failed to stop process', error, { name: variables.name });
toast.error(`Failed to stop process: ${error.message}`);
},
});
}
export function useRestartProcess() {
const queryClient = useQueryClient();
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
const logger = createMutationLogger('restartProcess');
return useMutation({
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
mutationFn: (name: string) => {
logger.info('Restarting process', { name });
return restartProcess(name);
},
onSuccess: (data, name) => {
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
logger.info('Process restarted successfully', { name });
toast.success(data.message);
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
queryClient.invalidateQueries({ queryKey: supervisorKeys.process(name) });
},
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
onError: (error: Error, name) => {
logger.error('Failed to restart process', error, { name });
toast.error(`Failed to restart process: ${error.message}`);
},
});
}
feat: complete Phase 1 - Full Log Viewer implementation Phase 1 Complete: Log Viewer with Real-time Monitoring ====================================================== Features Added: - Real-time log viewer with syntax highlighting (ERROR, WARNING, INFO) - Play/Pause controls for auto-refresh - Auto-scroll with user scroll detection - Search and filter functionality with highlighting - Process selector (all processes + supervisord main log) - Stdout/Stderr log type switching - Download logs to file - Clear logs (process-specific or main log) - Responsive layout with proper height handling API Routes Added: - GET /api/supervisor/logs - Read main supervisord log - DELETE /api/supervisor/logs - Clear main log - DELETE /api/supervisor/processes/[name]/logs - Clear process logs - POST /api/supervisor/processes/logs/clear-all - Clear all logs Hooks Added: - useMainLog() - Query main supervisord log with auto-refresh - useClearMainLog() - Mutation to clear main log - useClearProcessLogs() - Mutation to clear process logs - useClearAllLogs() - Mutation to clear all process logs Components: - LogViewer - Displays logs with syntax highlighting and search - LogControls - Control panel with play/pause, auto-scroll, actions - LogSearch - Search input with clear button - Full logs page implementation with process/log type selection UX Improvements: - Color-coded log levels (red for errors, yellow for warnings, cyan for info) - Search term highlighting in logs - Auto-scroll with "Scroll to bottom" button when paused - Confirmation dialogs for destructive actions - Loading states and error handling - Download logs with timestamped filenames This completes the most requested feature (log viewing) with production-ready functionality including real-time tailing, search, and management capabilities. 🤖 Generated with Claude Code (https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 18:48:23 +01:00
// Log Management
async function fetchMainLog(offset: number = -4096, length: number = 4096): Promise<{ logs: string }> {
const response = await fetch(`/api/supervisor/logs?offset=${offset}&length=${length}`);
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to fetch main log');
}
return response.json();
}
async function clearMainLog(): Promise<{ success: boolean; message: string }> {
const response = await fetch('/api/supervisor/logs', { method: 'DELETE' });
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to clear main log');
}
return response.json();
}
async function clearProcessLogs(name: string): Promise<{ success: boolean; message: string }> {
const response = await fetch(`/api/supervisor/processes/${encodeURIComponent(name)}/logs`, {
method: 'DELETE',
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to clear process logs');
}
return response.json();
}
async function clearAllLogs(): Promise<{ success: boolean; message: string }> {
const response = await fetch('/api/supervisor/processes/logs/clear-all', {
method: 'POST',
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to clear all logs');
}
return response.json();
}
export function useMainLog(options?: { offset?: number; length?: number; enabled?: boolean; refetchInterval?: number }) {
return useQuery({
queryKey: [...supervisorKeys.all, 'mainLog', options?.offset, options?.length],
queryFn: () => fetchMainLog(options?.offset, options?.length),
enabled: options?.enabled ?? true,
refetchInterval: options?.refetchInterval ?? 2000,
});
}
export function useClearMainLog() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: clearMainLog,
onSuccess: (data) => {
toast.success(data.message);
queryClient.invalidateQueries({ queryKey: [...supervisorKeys.all, 'mainLog'] });
},
onError: (error: Error) => {
toast.error(`Failed to clear main log: ${error.message}`);
},
});
}
export function useClearProcessLogs() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (name: string) => clearProcessLogs(name),
onSuccess: (data, name) => {
toast.success(data.message);
queryClient.invalidateQueries({ queryKey: supervisorKeys.process(name) });
},
onError: (error: Error) => {
toast.error(`Failed to clear process logs: ${error.message}`);
},
});
}
export function useClearAllLogs() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: clearAllLogs,
onSuccess: (data) => {
toast.success(data.message);
queryClient.invalidateQueries({ queryKey: supervisorKeys.all });
},
onError: (error: Error) => {
toast.error(`Failed to clear all logs: ${error.message}`);
},
});
}
// Process Group Management
async function startProcessGroup(name: string, wait: boolean = true): Promise<{ success: boolean; message: string; results: any[] }> {
const response = await fetch(`/api/supervisor/groups/${encodeURIComponent(name)}/start`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ wait }),
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to start process group');
}
return response.json();
}
async function stopProcessGroup(name: string, wait: boolean = true): Promise<{ success: boolean; message: string; results: any[] }> {
const response = await fetch(`/api/supervisor/groups/${encodeURIComponent(name)}/stop`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ wait }),
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to stop process group');
}
return response.json();
}
async function restartProcessGroup(name: string, wait: boolean = true): Promise<{ success: boolean; message: string; results: any[] }> {
const response = await fetch(`/api/supervisor/groups/${encodeURIComponent(name)}/restart`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ wait }),
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to restart process group');
}
return response.json();
}
export function useStartProcessGroup() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: ({ name, wait }: { name: string; wait?: boolean }) => startProcessGroup(name, wait),
onSuccess: (data) => {
toast.success(data.message);
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
},
onError: (error: Error) => {
toast.error(`Failed to start process group: ${error.message}`);
},
});
}
export function useStopProcessGroup() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: ({ name, wait }: { name: string; wait?: boolean }) => stopProcessGroup(name, wait),
onSuccess: (data) => {
toast.success(data.message);
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
},
onError: (error: Error) => {
toast.error(`Failed to stop process group: ${error.message}`);
},
});
}
export function useRestartProcessGroup() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: ({ name, wait }: { name: string; wait?: boolean }) => restartProcessGroup(name, wait),
onSuccess: (data) => {
toast.success(data.message);
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
},
onError: (error: Error) => {
toast.error(`Failed to restart process group: ${error.message}`);
},
});
}
// Batch Operations (All Processes)
async function startAllProcesses(wait: boolean = true): Promise<{ success: boolean; message: string; results: any[] }> {
const response = await fetch('/api/supervisor/processes/start-all', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ wait }),
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to start all processes');
}
return response.json();
}
async function stopAllProcesses(wait: boolean = true): Promise<{ success: boolean; message: string; results: any[] }> {
const response = await fetch('/api/supervisor/processes/stop-all', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ wait }),
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to stop all processes');
}
return response.json();
}
async function restartAllProcesses(wait: boolean = true): Promise<{ success: boolean; message: string; results: any[] }> {
const response = await fetch('/api/supervisor/processes/restart-all', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ wait }),
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to restart all processes');
}
return response.json();
}
export function useStartAllProcesses() {
const queryClient = useQueryClient();
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
const logger = createMutationLogger('startAllProcesses');
return useMutation({
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
mutationFn: (wait: boolean = true) => {
logger.info('Starting all processes', { wait });
return startAllProcesses(wait);
},
onSuccess: (data) => {
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
logger.info('All processes started successfully', {
resultCount: data.results?.length,
});
toast.success(data.message);
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
},
onError: (error: Error) => {
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
logger.error('Failed to start all processes', error);
toast.error(`Failed to start all processes: ${error.message}`);
},
});
}
export function useStopAllProcesses() {
const queryClient = useQueryClient();
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
const logger = createMutationLogger('stopAllProcesses');
return useMutation({
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
mutationFn: (wait: boolean = true) => {
logger.info('Stopping all processes', { wait });
return stopAllProcesses(wait);
},
onSuccess: (data) => {
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
logger.info('All processes stopped successfully', {
resultCount: data.results?.length,
});
toast.success(data.message);
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
},
onError: (error: Error) => {
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
logger.error('Failed to stop all processes', error);
toast.error(`Failed to stop all processes: ${error.message}`);
},
});
}
export function useRestartAllProcesses() {
const queryClient = useQueryClient();
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
const logger = createMutationLogger('restartAllProcesses');
return useMutation({
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
mutationFn: (wait: boolean = true) => {
logger.info('Restarting all processes', { wait });
return restartAllProcesses(wait);
},
onSuccess: (data) => {
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
logger.info('All processes restarted successfully', {
resultCount: data.results?.length,
});
toast.success(data.message);
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
},
onError: (error: Error) => {
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
logger.error('Failed to restart all processes', error);
toast.error(`Failed to restart all processes: ${error.message}`);
},
});
}
// Configuration Management
async function fetchConfig(): Promise<ConfigInfo[]> {
const response = await fetch('/api/supervisor/config');
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to fetch configuration');
}
return response.json();
}
async function reloadConfig(): Promise<{ success: boolean; message: string; result: any }> {
const response = await fetch('/api/supervisor/config/reload', {
method: 'POST',
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to reload configuration');
}
return response.json();
}
async function addProcessGroup(name: string): Promise<{ success: boolean; message: string }> {
const response = await fetch('/api/supervisor/config/group', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name }),
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to add process group');
}
return response.json();
}
async function removeProcessGroup(name: string): Promise<{ success: boolean; message: string }> {
const response = await fetch('/api/supervisor/config/group', {
method: 'DELETE',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name }),
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to remove process group');
}
return response.json();
}
export function useConfig() {
return useQuery({
queryKey: supervisorKeys.config(),
queryFn: fetchConfig,
refetchInterval: 10000, // Refetch every 10 seconds
});
}
export function useReloadConfig() {
const queryClient = useQueryClient();
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
const logger = createMutationLogger('reloadConfig');
return useMutation({
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
mutationFn: () => {
logger.info('Reloading supervisor configuration');
return reloadConfig();
},
onSuccess: (data) => {
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
logger.info('Configuration reloaded successfully');
toast.success(data.message);
queryClient.invalidateQueries({ queryKey: supervisorKeys.all });
},
onError: (error: Error) => {
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
logger.error('Failed to reload configuration', error);
toast.error(`Failed to reload configuration: ${error.message}`);
},
});
}
export function useAddProcessGroup() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (name: string) => addProcessGroup(name),
onSuccess: (data) => {
toast.success(data.message);
queryClient.invalidateQueries({ queryKey: supervisorKeys.all });
},
onError: (error: Error) => {
toast.error(`Failed to add process group: ${error.message}`);
},
});
}
export function useRemoveProcessGroup() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (name: string) => removeProcessGroup(name),
onSuccess: (data) => {
toast.success(data.message);
queryClient.invalidateQueries({ queryKey: supervisorKeys.all });
},
onError: (error: Error) => {
toast.error(`Failed to remove process group: ${error.message}`);
},
});
}
feat: implement Phase 7 - Signal Operations Features added: - Send Unix signals to processes via interactive modal - Support for common signals (HUP, INT, TERM, KILL, USR1, USR2, QUIT) - Custom signal input for advanced use cases - Safety confirmations for dangerous signals (TERM, KILL, QUIT) - Signal button added to each ProcessCard Implementation details: - Created signal API routes: - /api/supervisor/processes/[name]/signal - Send signal to process - /api/supervisor/groups/[name]/signal - Send signal to group - /api/supervisor/processes/signal-all - Send signal to all processes - Added React Query hooks: - useSignalProcess() - Send signal to single process - useSignalProcessGroup() - Send signal to process group - useSignalAllProcesses() - Send signal to all processes - Created SignalSender modal component: - Grid of common signal buttons with descriptions - Custom signal text input (auto-uppercase) - Two-step confirmation for dangerous signals - Visual warning with AlertTriangle icon - Destructive button variant for confirmed dangerous signals - Backdrop blur overlay ProcessCard enhancements: - Added Zap icon signal button - Modal opens on signal button click - Button disabled when process is stopped - Modal integrates with useSignalProcess hook Common signals with descriptions: - HUP (1): Reload configuration - INT (2): Interrupt - graceful shutdown - QUIT (3): Quit - TERM (15): Terminate - graceful shutdown (dangerous) - KILL (9): Kill - immediate termination (dangerous) - USR1 (10): User-defined signal 1 - USR2 (12): User-defined signal 2 Safety features: - Dangerous signals require confirmation - Warning message explains risks - Button changes to destructive variant - Custom signals also checked for danger - Clear visual feedback during operation Phase 7 complete (3-4 hours estimated)
2025-11-23 19:41:21 +01:00
// Signal Operations
async function signalProcess(name: string, signal: string): Promise<{ success: boolean; message: string }> {
const response = await fetch(`/api/supervisor/processes/${encodeURIComponent(name)}/signal`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ signal }),
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to send signal');
}
return response.json();
}
async function signalProcessGroup(name: string, signal: string): Promise<{ success: boolean; message: string; results: any[] }> {
const response = await fetch(`/api/supervisor/groups/${encodeURIComponent(name)}/signal`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ signal }),
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to send signal to group');
}
return response.json();
}
async function signalAllProcesses(signal: string): Promise<{ success: boolean; message: string; results: any[] }> {
const response = await fetch('/api/supervisor/processes/signal-all', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ signal }),
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to send signal to all processes');
}
return response.json();
}
export function useSignalProcess() {
const queryClient = useQueryClient();
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
const logger = createMutationLogger('signalProcess');
feat: implement Phase 7 - Signal Operations Features added: - Send Unix signals to processes via interactive modal - Support for common signals (HUP, INT, TERM, KILL, USR1, USR2, QUIT) - Custom signal input for advanced use cases - Safety confirmations for dangerous signals (TERM, KILL, QUIT) - Signal button added to each ProcessCard Implementation details: - Created signal API routes: - /api/supervisor/processes/[name]/signal - Send signal to process - /api/supervisor/groups/[name]/signal - Send signal to group - /api/supervisor/processes/signal-all - Send signal to all processes - Added React Query hooks: - useSignalProcess() - Send signal to single process - useSignalProcessGroup() - Send signal to process group - useSignalAllProcesses() - Send signal to all processes - Created SignalSender modal component: - Grid of common signal buttons with descriptions - Custom signal text input (auto-uppercase) - Two-step confirmation for dangerous signals - Visual warning with AlertTriangle icon - Destructive button variant for confirmed dangerous signals - Backdrop blur overlay ProcessCard enhancements: - Added Zap icon signal button - Modal opens on signal button click - Button disabled when process is stopped - Modal integrates with useSignalProcess hook Common signals with descriptions: - HUP (1): Reload configuration - INT (2): Interrupt - graceful shutdown - QUIT (3): Quit - TERM (15): Terminate - graceful shutdown (dangerous) - KILL (9): Kill - immediate termination (dangerous) - USR1 (10): User-defined signal 1 - USR2 (12): User-defined signal 2 Safety features: - Dangerous signals require confirmation - Warning message explains risks - Button changes to destructive variant - Custom signals also checked for danger - Clear visual feedback during operation Phase 7 complete (3-4 hours estimated)
2025-11-23 19:41:21 +01:00
return useMutation({
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
mutationFn: ({ name, signal }: { name: string; signal: string }) => {
logger.info('Sending signal to process', { name, signal });
return signalProcess(name, signal);
},
feat: implement Phase 7 - Signal Operations Features added: - Send Unix signals to processes via interactive modal - Support for common signals (HUP, INT, TERM, KILL, USR1, USR2, QUIT) - Custom signal input for advanced use cases - Safety confirmations for dangerous signals (TERM, KILL, QUIT) - Signal button added to each ProcessCard Implementation details: - Created signal API routes: - /api/supervisor/processes/[name]/signal - Send signal to process - /api/supervisor/groups/[name]/signal - Send signal to group - /api/supervisor/processes/signal-all - Send signal to all processes - Added React Query hooks: - useSignalProcess() - Send signal to single process - useSignalProcessGroup() - Send signal to process group - useSignalAllProcesses() - Send signal to all processes - Created SignalSender modal component: - Grid of common signal buttons with descriptions - Custom signal text input (auto-uppercase) - Two-step confirmation for dangerous signals - Visual warning with AlertTriangle icon - Destructive button variant for confirmed dangerous signals - Backdrop blur overlay ProcessCard enhancements: - Added Zap icon signal button - Modal opens on signal button click - Button disabled when process is stopped - Modal integrates with useSignalProcess hook Common signals with descriptions: - HUP (1): Reload configuration - INT (2): Interrupt - graceful shutdown - QUIT (3): Quit - TERM (15): Terminate - graceful shutdown (dangerous) - KILL (9): Kill - immediate termination (dangerous) - USR1 (10): User-defined signal 1 - USR2 (12): User-defined signal 2 Safety features: - Dangerous signals require confirmation - Warning message explains risks - Button changes to destructive variant - Custom signals also checked for danger - Clear visual feedback during operation Phase 7 complete (3-4 hours estimated)
2025-11-23 19:41:21 +01:00
onSuccess: (data, variables) => {
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
logger.info('Signal sent successfully', { name: variables.name, signal: variables.signal });
feat: implement Phase 7 - Signal Operations Features added: - Send Unix signals to processes via interactive modal - Support for common signals (HUP, INT, TERM, KILL, USR1, USR2, QUIT) - Custom signal input for advanced use cases - Safety confirmations for dangerous signals (TERM, KILL, QUIT) - Signal button added to each ProcessCard Implementation details: - Created signal API routes: - /api/supervisor/processes/[name]/signal - Send signal to process - /api/supervisor/groups/[name]/signal - Send signal to group - /api/supervisor/processes/signal-all - Send signal to all processes - Added React Query hooks: - useSignalProcess() - Send signal to single process - useSignalProcessGroup() - Send signal to process group - useSignalAllProcesses() - Send signal to all processes - Created SignalSender modal component: - Grid of common signal buttons with descriptions - Custom signal text input (auto-uppercase) - Two-step confirmation for dangerous signals - Visual warning with AlertTriangle icon - Destructive button variant for confirmed dangerous signals - Backdrop blur overlay ProcessCard enhancements: - Added Zap icon signal button - Modal opens on signal button click - Button disabled when process is stopped - Modal integrates with useSignalProcess hook Common signals with descriptions: - HUP (1): Reload configuration - INT (2): Interrupt - graceful shutdown - QUIT (3): Quit - TERM (15): Terminate - graceful shutdown (dangerous) - KILL (9): Kill - immediate termination (dangerous) - USR1 (10): User-defined signal 1 - USR2 (12): User-defined signal 2 Safety features: - Dangerous signals require confirmation - Warning message explains risks - Button changes to destructive variant - Custom signals also checked for danger - Clear visual feedback during operation Phase 7 complete (3-4 hours estimated)
2025-11-23 19:41:21 +01:00
toast.success(data.message);
queryClient.invalidateQueries({ queryKey: supervisorKeys.process(variables.name) });
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
},
feat(logging): add comprehensive client-side logging (Phase 5) Created client-side logging infrastructure for React Query and hooks: New Client Logger (lib/utils/client-logger.ts): - Environment-aware logging (debug/info in dev, warn/error in prod) - Structured logging with context objects - Performance timing helpers (time/timeEnd) - Group logging for related operations - Factory functions for hook/query/mutation-specific loggers React Query Configuration (components/providers/Providers.tsx): - Added custom logger to QueryClient - Integrated with client-side logger for consistent formatting - Configured mutation retry defaults SSE Hook Logging (lib/hooks/useEventSource.ts): - Connection lifecycle logging (connect/disconnect/reconnect) - Heartbeat and process update event logging - Error tracking with reconnection attempt details - Exponential backoff logging for reconnections Supervisor Hooks Logging (lib/hooks/useSupervisor.ts): - Added logging to all critical mutation hooks: - Process control (start/stop/restart) - Batch operations (start-all/stop-all/restart-all) - Configuration reload - Signal operations - Logs mutation start, success, and error states - Includes contextual metadata (process names, signals, etc.) All client-side logs: - Use structured format with timestamps - Include relevant context for debugging - Respect environment (verbose in dev, minimal in prod) - Compatible with browser devtools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:57:24 +01:00
onError: (error: Error, variables) => {
logger.error('Failed to send signal', error, {
name: variables.name,
signal: variables.signal,
});
feat: implement Phase 7 - Signal Operations Features added: - Send Unix signals to processes via interactive modal - Support for common signals (HUP, INT, TERM, KILL, USR1, USR2, QUIT) - Custom signal input for advanced use cases - Safety confirmations for dangerous signals (TERM, KILL, QUIT) - Signal button added to each ProcessCard Implementation details: - Created signal API routes: - /api/supervisor/processes/[name]/signal - Send signal to process - /api/supervisor/groups/[name]/signal - Send signal to group - /api/supervisor/processes/signal-all - Send signal to all processes - Added React Query hooks: - useSignalProcess() - Send signal to single process - useSignalProcessGroup() - Send signal to process group - useSignalAllProcesses() - Send signal to all processes - Created SignalSender modal component: - Grid of common signal buttons with descriptions - Custom signal text input (auto-uppercase) - Two-step confirmation for dangerous signals - Visual warning with AlertTriangle icon - Destructive button variant for confirmed dangerous signals - Backdrop blur overlay ProcessCard enhancements: - Added Zap icon signal button - Modal opens on signal button click - Button disabled when process is stopped - Modal integrates with useSignalProcess hook Common signals with descriptions: - HUP (1): Reload configuration - INT (2): Interrupt - graceful shutdown - QUIT (3): Quit - TERM (15): Terminate - graceful shutdown (dangerous) - KILL (9): Kill - immediate termination (dangerous) - USR1 (10): User-defined signal 1 - USR2 (12): User-defined signal 2 Safety features: - Dangerous signals require confirmation - Warning message explains risks - Button changes to destructive variant - Custom signals also checked for danger - Clear visual feedback during operation Phase 7 complete (3-4 hours estimated)
2025-11-23 19:41:21 +01:00
toast.error(`Failed to send signal: ${error.message}`);
},
});
}
export function useSignalProcessGroup() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: ({ name, signal }: { name: string; signal: string }) => signalProcessGroup(name, signal),
onSuccess: (data) => {
toast.success(data.message);
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
},
onError: (error: Error) => {
toast.error(`Failed to send signal to group: ${error.message}`);
},
});
}
export function useSignalAllProcesses() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (signal: string) => signalAllProcesses(signal),
onSuccess: (data) => {
toast.success(data.message);
queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
},
onError: (error: Error) => {
toast.error(`Failed to send signal to all processes: ${error.message}`);
},
});
}
// Process Stdin
async function sendProcessStdin(name: string, chars: string): Promise<{ success: boolean; message: string }> {
const response = await fetch(`/api/supervisor/processes/${encodeURIComponent(name)}/stdin`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ chars }),
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to send input');
}
return response.json();
}
export function useSendProcessStdin() {
return useMutation({
mutationFn: ({ name, chars }: { name: string; chars: string }) => sendProcessStdin(name, chars),
onSuccess: (data) => {
toast.success(data.message);
},
onError: (error: Error) => {
toast.error(`Failed to send input: ${error.message}`);
},
});
}