07697b2f5b
- Harden core AgentStore lifecycle behavior and heartbeat runtime integration paths - Align dashboard agent APIs, server routes, and agent UI flows with the updated contract - Tighten CLI agent/message command routing and validate payload handling semantics - Expand test coverage across core, dashboard, engine, and CLI for route, heartbeat, and instruction regressions
1695 lines
60 KiB
TypeScript
1695 lines
60 KiB
TypeScript
import { useState, useEffect, useCallback, useRef, useMemo } from "react";
|
||
import {
|
||
Bot, Heart, Activity, Pause, Play, Square, Trash2, RefreshCw,
|
||
Settings, FileText, ActivitySquare, X, Copy,
|
||
ExternalLink, CheckCircle, XCircle, Loader2, GitBranch,
|
||
ChevronDown, ChevronRight
|
||
} from "lucide-react";
|
||
import type { AgentDetail, AgentState, AgentHeartbeatRun } from "../api";
|
||
import { fetchAgent, updateAgent, updateAgentState, deleteAgent, fetchAgentLogs, fetchAgentRunLogs, fetchAgentChildren, fetchAgentRuns, fetchAgentRunDetail, startAgentRun, updateAgentInstructions } from "../api";
|
||
import type { Agent } from "../api";
|
||
import type { AgentLogEntry } from "@fusion/core";
|
||
import { AgentLogViewer } from "./AgentLogViewer";
|
||
|
||
/**
|
||
* Simple className utility - joins class names conditionally
|
||
*/
|
||
function cn(...classes: (string | boolean | undefined | null)[]): string {
|
||
return classes.filter(Boolean).join(" ");
|
||
}
|
||
|
||
/**
|
||
* Format an ISO timestamp to a relative time string.
|
||
*/
|
||
function relativeTime(iso: string): string {
|
||
const now = Date.now();
|
||
const then = new Date(iso).getTime();
|
||
const diffMs = now - then;
|
||
|
||
// Future
|
||
if (diffMs < 0) {
|
||
const absDiff = Math.abs(diffMs);
|
||
if (absDiff < 60_000) return "in a moment";
|
||
if (absDiff < 3_600_000) return `in ${Math.floor(absDiff / 60_000)}m`;
|
||
if (absDiff < 86_400_000) return `in ${Math.floor(absDiff / 3_600_000)}h`;
|
||
return `in ${Math.floor(absDiff / 86_400_000)}d`;
|
||
}
|
||
|
||
// Past
|
||
if (diffMs < 60_000) return "just now";
|
||
if (diffMs < 3_600_000) return `${Math.floor(diffMs / 60_000)}m ago`;
|
||
if (diffMs < 86_400_000) return `${Math.floor(diffMs / 3_600_000)}h ago`;
|
||
return `${Math.floor(diffMs / 86_400_000)}d ago`;
|
||
}
|
||
|
||
interface AgentDetailViewProps {
|
||
agentId: string;
|
||
projectId?: string;
|
||
onClose: () => void;
|
||
addToast: (message: string, type?: "success" | "error") => void;
|
||
onChildClick?: (childId: string) => void;
|
||
}
|
||
|
||
type TabId = "dashboard" | "logs" | "config" | "runs" | "children";
|
||
|
||
const TABS: { id: TabId; label: string; icon: typeof Activity }[] = [
|
||
{ id: "dashboard", label: "Dashboard", icon: ActivitySquare },
|
||
{ id: "logs", label: "Logs", icon: FileText },
|
||
{ id: "runs", label: "Runs", icon: Activity },
|
||
{ id: "children", label: "Children", icon: GitBranch },
|
||
{ id: "config", label: "Settings", icon: Settings },
|
||
];
|
||
|
||
const STATE_COLORS: Record<AgentState, { bg: string; text: string; border: string }> = {
|
||
idle: { bg: "var(--state-idle-bg)", text: "var(--state-idle-text)", border: "var(--state-idle-border)" },
|
||
active: { bg: "var(--state-active-bg)", text: "var(--state-active-text)", border: "var(--state-active-border)" },
|
||
running: { bg: "var(--state-active-bg)", text: "var(--state-active-text)", border: "var(--state-active-border)" },
|
||
paused: { bg: "var(--state-paused-bg)", text: "var(--state-paused-text)", border: "var(--state-paused-border)" },
|
||
error: { bg: "var(--state-error-bg)", text: "var(--state-error-text)", border: "var(--state-error-border)" },
|
||
terminated: { bg: "var(--state-error-bg)", text: "var(--state-error-text)", border: "var(--state-error-border)" },
|
||
};
|
||
|
||
const RUN_STATUS_ICONS: Record<string, { icon: typeof CheckCircle; color: string }> = {
|
||
completed: { icon: CheckCircle, color: "var(--color-success, #3fb950)" },
|
||
failed: { icon: XCircle, color: "var(--color-error, #f85149)" },
|
||
active: { icon: Loader2, color: "var(--in-progress, #bc8cff)" },
|
||
terminated: { icon: Square, color: "var(--text-muted, #8b949e)" },
|
||
};
|
||
|
||
export function AgentDetailView({ agentId, projectId, onClose, addToast, onChildClick }: AgentDetailViewProps) {
|
||
const [agent, setAgent] = useState<AgentDetail | null>(null);
|
||
const [logs, setLogs] = useState<AgentLogEntry[]>([]);
|
||
const [isLoading, setIsLoading] = useState(true);
|
||
const [activeTab, setActiveTab] = useState<TabId>("dashboard");
|
||
const [isStreaming, setIsStreaming] = useState(false);
|
||
const logContainerRef = useRef<HTMLDivElement>(null);
|
||
|
||
const loadAgent = useCallback(async () => {
|
||
setIsLoading(true);
|
||
try {
|
||
const data = await fetchAgent(agentId, projectId);
|
||
setAgent(data);
|
||
} catch (err: any) {
|
||
addToast(`Failed to load agent: ${err.message}`, "error");
|
||
onClose();
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
}, [agentId, addToast, onClose, projectId]);
|
||
|
||
const loadLogs = useCallback(async () => {
|
||
// Agent logs are tied to tasks, not agents directly.
|
||
// If the agent has a current task, we could show those logs.
|
||
// For now, we'll show heartbeat runs as the "activity" for the agent.
|
||
// If the agent is working on a task, we could show task logs.
|
||
if (agent?.taskId) {
|
||
try {
|
||
const data = await fetchAgentLogs(agent.taskId, projectId);
|
||
setLogs(data);
|
||
} catch (err: any) {
|
||
console.error("Failed to load task logs:", err);
|
||
}
|
||
}
|
||
}, [agent?.taskId, projectId]);
|
||
|
||
useEffect(() => {
|
||
void loadAgent();
|
||
}, [loadAgent]);
|
||
|
||
useEffect(() => {
|
||
if (agent?.taskId) {
|
||
void loadLogs();
|
||
}
|
||
}, [agent?.taskId, loadLogs]);
|
||
|
||
// Set up SSE for live log streaming when viewing logs tab with a task
|
||
useEffect(() => {
|
||
if (activeTab !== "logs" || !agent?.taskId) {
|
||
setIsStreaming(false);
|
||
return;
|
||
}
|
||
|
||
const query = projectId ? `?projectId=${encodeURIComponent(projectId)}` : "";
|
||
const es = new EventSource(`/api/tasks/${encodeURIComponent(agent.taskId)}/logs/stream${query}`);
|
||
|
||
const handleAgentLog = (e: MessageEvent) => {
|
||
try {
|
||
const entry: AgentLogEntry = JSON.parse(e.data);
|
||
setLogs(prev => [entry, ...prev]);
|
||
|
||
// Auto-scroll to top for new entries
|
||
const container = logContainerRef.current;
|
||
if (container && container.scrollTop < 50) {
|
||
container.scrollTop = 0;
|
||
}
|
||
} catch {
|
||
// Ignore parse errors
|
||
}
|
||
};
|
||
|
||
es.addEventListener("agent:log", handleAgentLog as EventListener);
|
||
|
||
es.onerror = () => {
|
||
setIsStreaming(false);
|
||
};
|
||
|
||
es.onopen = () => {
|
||
setIsStreaming(true);
|
||
};
|
||
|
||
return () => {
|
||
es.removeEventListener("agent:log", handleAgentLog as EventListener);
|
||
es.close();
|
||
setIsStreaming(false);
|
||
};
|
||
}, [agent?.taskId, activeTab, projectId]);
|
||
|
||
const handleStateChange = async (newState: AgentState) => {
|
||
try {
|
||
await updateAgentState(agentId, newState, projectId);
|
||
addToast(`Agent state updated to ${newState}`, "success");
|
||
void loadAgent();
|
||
} catch (err: any) {
|
||
addToast(`Failed to update state: ${err.message}`, "error");
|
||
}
|
||
};
|
||
|
||
const handleDelete = async () => {
|
||
if (!agent || !confirm(`Delete agent "${agent.name}"? This cannot be undone.`)) return;
|
||
try {
|
||
await deleteAgent(agentId, projectId);
|
||
addToast(`Agent "${agent.name}" deleted`, "success");
|
||
onClose();
|
||
} catch (err: any) {
|
||
addToast(`Failed to delete agent: ${err.message}`, "error");
|
||
}
|
||
};
|
||
|
||
const getHealthStatus = () => {
|
||
if (!agent) return { label: "Unknown", color: "var(--text-muted, #8b949e)" };
|
||
if (agent.state === "terminated") {
|
||
return { label: "Terminated", color: "var(--state-error-text, #f85149)" };
|
||
}
|
||
if (agent.state === "error") {
|
||
return { label: agent.lastError ?? "Error", color: "var(--state-error-text, #f85149)" };
|
||
}
|
||
if (agent.state === "paused") {
|
||
return { label: agent.pauseReason ? `Paused: ${agent.pauseReason}` : "Paused", color: "var(--state-paused-text, #e3b541)" };
|
||
}
|
||
if (agent.state === "running") {
|
||
return { label: "Running", color: "var(--state-active-text, #3fb950)" };
|
||
}
|
||
if (!agent.lastHeartbeatAt) {
|
||
return { label: agent.state === "active" ? "Starting..." : "Idle", color: "var(--state-idle-text, #8b949e)" };
|
||
}
|
||
const lastHeartbeat = new Date(agent.lastHeartbeatAt).getTime();
|
||
const elapsed = Date.now() - lastHeartbeat;
|
||
const timeoutMs = (agent as any).runtimeConfig?.heartbeatTimeoutMs ?? 60000;
|
||
if (elapsed > timeoutMs) {
|
||
return { label: "Unresponsive", color: "var(--state-error-text, #f85149)" };
|
||
}
|
||
return { label: "Healthy", color: "var(--state-active-text, #3fb950)" };
|
||
};
|
||
|
||
const copyAgentId = () => {
|
||
if (agent) {
|
||
navigator.clipboard.writeText(agent.id);
|
||
addToast("Agent ID copied to clipboard", "success");
|
||
}
|
||
};
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<div className="agent-detail-overlay" onClick={(e) => e.target === e.currentTarget && onClose()}>
|
||
<div className="agent-detail-modal">
|
||
<div className="agent-detail-loading">
|
||
<Loader2 className="animate-spin" size={24} />
|
||
<span>Loading agent...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (!agent) {
|
||
return null;
|
||
}
|
||
|
||
const stateStyle = STATE_COLORS[agent.state];
|
||
const health = getHealthStatus();
|
||
|
||
return (
|
||
<div className="agent-detail-overlay" onClick={(e) => e.target === e.currentTarget && onClose()}>
|
||
<div className="agent-detail-modal">
|
||
{/* Header */}
|
||
<div className="agent-detail-header">
|
||
<div className="agent-detail-title">
|
||
<div className="agent-detail-icon">
|
||
<Bot size={24} />
|
||
</div>
|
||
<div className="agent-detail-info">
|
||
<h2>{agent.name}</h2>
|
||
<div className="agent-detail-badges">
|
||
<span
|
||
className="badge"
|
||
style={{ background: stateStyle.bg, color: stateStyle.text, border: `1px solid ${stateStyle.border}` }}
|
||
>
|
||
{agent.state}
|
||
</span>
|
||
<span className="badge" style={{ color: health.color }}>
|
||
{health.label === "Healthy" && <Heart size={12} />}
|
||
{health.label === "Unresponsive" && <Activity size={12} />}
|
||
{health.label}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="agent-detail-actions">
|
||
{/* State-dependent action buttons */}
|
||
{agent.state === "idle" && (
|
||
<>
|
||
<button className="btn btn--primary" onClick={() => void handleStateChange("active")}>
|
||
<Play size={16} />
|
||
Start
|
||
</button>
|
||
<button className="btn btn--danger" onClick={handleDelete}>
|
||
<Trash2 size={16} />
|
||
Delete
|
||
</button>
|
||
</>
|
||
)}
|
||
{agent.state === "active" && (
|
||
<>
|
||
<button className="btn" onClick={() => void handleStateChange("paused")}>
|
||
<Pause size={16} />
|
||
Pause
|
||
</button>
|
||
<button className="btn btn--danger" onClick={() => void handleStateChange("terminated")}>
|
||
<Square size={16} />
|
||
Stop
|
||
</button>
|
||
</>
|
||
)}
|
||
{agent.state === "paused" && (
|
||
<>
|
||
<button className="btn btn--primary" onClick={() => void handleStateChange("active")}>
|
||
<Play size={16} />
|
||
Resume
|
||
</button>
|
||
<button className="btn btn--danger" onClick={() => void handleStateChange("terminated")}>
|
||
<Square size={16} />
|
||
Stop
|
||
</button>
|
||
</>
|
||
)}
|
||
{agent.state === "running" && (
|
||
<>
|
||
<button className="btn" onClick={() => void handleStateChange("paused")}>
|
||
<Pause size={16} />
|
||
Pause
|
||
</button>
|
||
<button className="btn btn--danger" onClick={() => void handleStateChange("terminated")}>
|
||
<Square size={16} />
|
||
Stop
|
||
</button>
|
||
</>
|
||
)}
|
||
{agent.state === "error" && (
|
||
<>
|
||
<button className="btn btn--primary" onClick={() => void handleStateChange("active")}>
|
||
<Play size={16} />
|
||
Retry
|
||
</button>
|
||
<button className="btn btn--danger" onClick={() => void handleStateChange("terminated")}>
|
||
<Square size={16} />
|
||
Stop
|
||
</button>
|
||
</>
|
||
)}
|
||
{agent.state === "terminated" && (
|
||
<button className="btn btn--danger" onClick={handleDelete}>
|
||
<Trash2 size={16} />
|
||
Delete
|
||
</button>
|
||
)}
|
||
|
||
<button className="btn-icon" onClick={() => void loadAgent()} title="Refresh">
|
||
<RefreshCw size={16} />
|
||
</button>
|
||
<button className="btn-icon" onClick={onClose} title="Close">
|
||
<X size={20} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Tabs */}
|
||
<div className="agent-detail-tabs">
|
||
{TABS.map(tab => (
|
||
<button
|
||
key={tab.id}
|
||
className={cn("agent-detail-tab", activeTab === tab.id && "active")}
|
||
onClick={() => setActiveTab(tab.id)}
|
||
>
|
||
<tab.icon size={16} />
|
||
{tab.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* Tab Content */}
|
||
<div className="agent-detail-content">
|
||
{activeTab === "dashboard" && (
|
||
<DashboardTab agent={agent} health={health} />
|
||
)}
|
||
|
||
{activeTab === "logs" && (
|
||
<LogsTab
|
||
logs={logs}
|
||
isStreaming={isStreaming}
|
||
containerRef={logContainerRef}
|
||
hasTask={!!agent.taskId}
|
||
/>
|
||
)}
|
||
|
||
{activeTab === "runs" && (
|
||
<RunsTab
|
||
addToast={addToast}
|
||
agentId={agent.id}
|
||
projectId={projectId}
|
||
agentState={agent.state}
|
||
agentName={agent.name}
|
||
/>
|
||
)}
|
||
|
||
{activeTab === "config" && (
|
||
<ConfigTab
|
||
agent={agent}
|
||
projectId={projectId}
|
||
addToast={addToast}
|
||
onSaved={loadAgent}
|
||
/>
|
||
)}
|
||
|
||
{activeTab === "children" && (
|
||
<ChildrenTab
|
||
agentId={agent.id}
|
||
projectId={projectId}
|
||
onChildClick={onChildClick}
|
||
/>
|
||
)}
|
||
</div>
|
||
|
||
{/* Footer with agent ID */}
|
||
<div className="agent-detail-footer">
|
||
<button className="btn-icon" onClick={copyAgentId} title="Copy Agent ID">
|
||
<Copy size={14} />
|
||
</button>
|
||
<span className="agent-detail-id" onClick={copyAgentId}>
|
||
{agent.id}
|
||
</span>
|
||
{agent.taskId && (
|
||
<>
|
||
<span className="divider">|</span>
|
||
<span className="text-muted">Working on:</span>
|
||
<a href={`/tasks/${agent.taskId}`} className="link">
|
||
{agent.taskId}
|
||
<ExternalLink size={12} />
|
||
</a>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Dashboard Tab ───────────────────────────────────────────────────────────
|
||
|
||
function DashboardTab({
|
||
agent,
|
||
health
|
||
}: {
|
||
agent: AgentDetail;
|
||
health: { label: string; color: string };
|
||
}) {
|
||
const stateStyle = STATE_COLORS[agent.state];
|
||
|
||
const stats = useMemo(() => {
|
||
const runs = (agent as any).completedRuns || [];
|
||
const today = new Date();
|
||
today.setHours(0, 0, 0, 0);
|
||
|
||
const todayRuns = runs.filter((r: AgentHeartbeatRun) =>
|
||
new Date(r.startedAt) >= today
|
||
);
|
||
|
||
const successfulRuns = runs.filter((r: AgentHeartbeatRun) =>
|
||
r.status === "completed"
|
||
);
|
||
|
||
return {
|
||
totalRuns: runs.length,
|
||
todayRuns: todayRuns.length,
|
||
successfulRuns: successfulRuns.length,
|
||
successRate: runs.length > 0
|
||
? Math.round((successfulRuns.length / runs.length) * 100)
|
||
: 0,
|
||
};
|
||
}, [agent]);
|
||
|
||
return (
|
||
<div className="dashboard-tab">
|
||
{/* Agent Info Card */}
|
||
<div className="dashboard-section">
|
||
<h3>Agent Information</h3>
|
||
<div className="info-grid">
|
||
<div className="info-item">
|
||
<span className="info-label">Name</span>
|
||
<span className="info-value">{agent.name}</span>
|
||
</div>
|
||
<div className="info-item">
|
||
<span className="info-label">Role</span>
|
||
<span className="info-value">{agent.role}</span>
|
||
</div>
|
||
<div className="info-item">
|
||
<span className="info-label">State</span>
|
||
<span className="info-value">
|
||
<span
|
||
className="inline-badge"
|
||
style={{ background: stateStyle.bg, color: stateStyle.text }}
|
||
>
|
||
{agent.state}
|
||
</span>
|
||
</span>
|
||
</div>
|
||
<div className="info-item">
|
||
<span className="info-label">Health</span>
|
||
<span className="info-value" style={{ color: health.color }}>
|
||
{health.label}
|
||
</span>
|
||
</div>
|
||
<div className="info-item">
|
||
<span className="info-label">Created</span>
|
||
<span className="info-value">{new Date(agent.createdAt).toLocaleDateString()}</span>
|
||
</div>
|
||
<div className="info-item">
|
||
<span className="info-label">Last Heartbeat</span>
|
||
<span className="info-value">
|
||
{agent.lastHeartbeatAt
|
||
? relativeTime(agent.lastHeartbeatAt)
|
||
: "Never"
|
||
}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Stats Cards */}
|
||
<div className="dashboard-section">
|
||
<h3>Statistics</h3>
|
||
<div className="stats-grid">
|
||
<div className="stat-card">
|
||
<div className="stat-value">{stats.totalRuns}</div>
|
||
<div className="stat-label">Total Runs</div>
|
||
</div>
|
||
<div className="stat-card">
|
||
<div className="stat-value">{stats.todayRuns}</div>
|
||
<div className="stat-label">Runs Today</div>
|
||
</div>
|
||
<div className="stat-card">
|
||
<div className="stat-value">{stats.successRate}%</div>
|
||
<div className="stat-label">Success Rate</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Current Task */}
|
||
{agent.taskId && (
|
||
<div className="dashboard-section">
|
||
<h3>Current Task</h3>
|
||
<div className="current-task">
|
||
<span className="task-badge">{agent.taskId}</span>
|
||
<a href={`/tasks/${agent.taskId}`} className="btn btn--sm">
|
||
View Task <ExternalLink size={14} />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Metadata */}
|
||
{agent.metadata && Object.keys(agent.metadata).length > 0 && (
|
||
<div className="dashboard-section">
|
||
<h3>Metadata</h3>
|
||
<pre className="metadata-json">
|
||
{JSON.stringify(agent.metadata, null, 2)}
|
||
</pre>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Logs Tab ──────────────────────────────────────────────────────────────
|
||
|
||
function LogsTab({
|
||
logs,
|
||
isStreaming,
|
||
containerRef,
|
||
hasTask
|
||
}: {
|
||
logs: AgentLogEntry[];
|
||
isStreaming: boolean;
|
||
containerRef: React.RefObject<HTMLDivElement | null>;
|
||
hasTask: boolean;
|
||
}) {
|
||
if (!hasTask) {
|
||
return (
|
||
<div className="logs-tab">
|
||
<div className="logs-empty">
|
||
<FileText size={48} opacity={0.3} />
|
||
<p>No task assigned</p>
|
||
<p className="text-muted">
|
||
Agent logs are available when the agent is assigned to a task
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="logs-tab">
|
||
<div className="logs-header">
|
||
<span className="logs-count">{logs.length} entries</span>
|
||
{isStreaming && (
|
||
<span className="streaming-indicator">
|
||
<span className="streaming-dot" />
|
||
Live
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<div ref={containerRef} className="logs-container">
|
||
{logs.length === 0 ? (
|
||
<div className="logs-empty">
|
||
<FileText size={48} opacity={0.3} />
|
||
<p>No log entries yet</p>
|
||
<p className="text-muted">
|
||
{isStreaming ? "Waiting for activity..." : "Logs will appear here when the agent is active"}
|
||
</p>
|
||
</div>
|
||
) : (
|
||
logs.map((entry, i) => {
|
||
const prevEntry = i > 0 ? logs[i - 1] : undefined;
|
||
const showTimestamp = !prevEntry || prevEntry.agent !== entry.agent;
|
||
return (
|
||
<LogEntry key={`${entry.timestamp}-${i}`} entry={entry} showTimestamp={showTimestamp} />
|
||
);
|
||
})
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function LogEntry({ entry, showTimestamp }: { entry: AgentLogEntry; showTimestamp: boolean }) {
|
||
const getEntryStyles = () => {
|
||
switch (entry.type) {
|
||
case "tool":
|
||
return {
|
||
color: "var(--accent)",
|
||
borderLeft: "3px solid var(--accent)",
|
||
background: "var(--log-tool-bg)",
|
||
};
|
||
case "tool_result":
|
||
return {
|
||
color: "var(--color-success)",
|
||
borderLeft: "3px solid var(--color-success)",
|
||
background: "var(--log-success-bg)",
|
||
};
|
||
case "tool_error":
|
||
return {
|
||
color: "var(--color-error)",
|
||
borderLeft: "3px solid var(--color-error)",
|
||
background: "var(--log-error-bg)",
|
||
};
|
||
case "thinking":
|
||
return {
|
||
color: "var(--text-muted)",
|
||
fontStyle: "italic" as const,
|
||
opacity: 0.7,
|
||
};
|
||
default:
|
||
return {
|
||
color: "var(--text-primary)",
|
||
};
|
||
}
|
||
};
|
||
|
||
const styles = getEntryStyles();
|
||
const timestamp = new Date(entry.timestamp).toLocaleTimeString();
|
||
|
||
return (
|
||
<div className="log-entry" style={styles}>
|
||
{showTimestamp && (
|
||
<span className="log-timestamp">[{timestamp}]</span>
|
||
)}
|
||
{entry.agent && (
|
||
<span className="log-agent">[{entry.agent}]</span>
|
||
)}
|
||
{entry.type === "tool" && <span className="log-icon">⚡</span>}
|
||
{entry.type === "tool_result" && <span className="log-icon">✓</span>}
|
||
{entry.type === "tool_error" && <span className="log-icon">✗</span>}
|
||
<span className="log-text">
|
||
{entry.text}
|
||
{entry.detail && (
|
||
<span className="log-detail"> — {entry.detail}</span>
|
||
)}
|
||
</span>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Runs Tab ───────────────────────────────────────────────────────────────
|
||
|
||
function RunsTab({
|
||
addToast,
|
||
agentId,
|
||
projectId,
|
||
agentState,
|
||
agentName,
|
||
}: {
|
||
addToast: (msg: string, type?: "success" | "error") => void;
|
||
agentId: string;
|
||
projectId?: string;
|
||
agentState?: AgentState;
|
||
agentName?: string;
|
||
}) {
|
||
const [runs, setRuns] = useState<AgentHeartbeatRun[]>([]);
|
||
const [isLoadingRuns, setIsLoadingRuns] = useState(true);
|
||
const [selectedRunId, setSelectedRunId] = useState<string | null>(null);
|
||
const [runLogs, setRunLogs] = useState<AgentLogEntry[]>([]);
|
||
const [isLoadingLogs, setIsLoadingLogs] = useState(false);
|
||
const [detailRun, setDetailRun] = useState<AgentHeartbeatRun | null>(null);
|
||
const [isLoadingDetail, setIsLoadingDetail] = useState(false);
|
||
|
||
// Load runs on mount
|
||
const loadRuns = useCallback(async () => {
|
||
try {
|
||
const data = await fetchAgentRuns(agentId, 50, projectId);
|
||
setRuns(data);
|
||
} catch (err: any) {
|
||
addToast(`Failed to load runs: ${err.message}`, "error");
|
||
} finally {
|
||
setIsLoadingRuns(false);
|
||
}
|
||
}, [agentId, projectId, addToast]);
|
||
|
||
useEffect(() => {
|
||
void loadRuns();
|
||
}, [loadRuns]);
|
||
|
||
// Poll for active runs
|
||
const hasActiveRun = runs.some(r => r.status === "active");
|
||
useEffect(() => {
|
||
if (!hasActiveRun) return;
|
||
const interval = setInterval(() => {
|
||
void loadRuns();
|
||
}, 5000);
|
||
return () => clearInterval(interval);
|
||
}, [hasActiveRun, loadRuns]);
|
||
|
||
// Load run detail when a run is selected
|
||
const handleRunClick = useCallback(async (runId: string) => {
|
||
if (selectedRunId === runId) {
|
||
setSelectedRunId(null);
|
||
setRunLogs([]);
|
||
setDetailRun(null);
|
||
return;
|
||
}
|
||
setSelectedRunId(runId);
|
||
setIsLoadingLogs(true);
|
||
setIsLoadingDetail(true);
|
||
setRunLogs([]);
|
||
setDetailRun(null);
|
||
try {
|
||
const [logs, detail] = await Promise.all([
|
||
fetchAgentRunLogs(agentId, runId, projectId),
|
||
fetchAgentRunDetail(agentId, runId, projectId),
|
||
]);
|
||
setRunLogs(logs);
|
||
setDetailRun(detail);
|
||
} catch (err: any) {
|
||
addToast(`Failed to load run details: ${err.message}`, "error");
|
||
setRunLogs([]);
|
||
setDetailRun(null);
|
||
} finally {
|
||
setIsLoadingLogs(false);
|
||
setIsLoadingDetail(false);
|
||
}
|
||
}, [selectedRunId, agentId, projectId, addToast]);
|
||
|
||
const handleRunHeartbeat = async () => {
|
||
try {
|
||
await startAgentRun(agentId, projectId, { source: "on_demand", triggerDetail: "Triggered from dashboard" });
|
||
addToast(`Heartbeat run started for ${agentName ?? agentId}`, "success");
|
||
setIsLoadingRuns(true);
|
||
void loadRuns();
|
||
} catch (err: any) {
|
||
addToast(`Failed to start heartbeat run: ${err.message}`, "error");
|
||
}
|
||
};
|
||
|
||
const canRunHeartbeat = agentState === "active" || agentState === "idle";
|
||
|
||
if (isLoadingRuns && runs.length === 0) {
|
||
return (
|
||
<div className="runs-tab">
|
||
<div style={{ display: "flex", alignItems: "center", gap: "8px", padding: "24px", justifyContent: "center" }}>
|
||
<Loader2 size={16} className="animate-spin" />
|
||
<span className="text-muted">Loading runs...</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (runs.length === 0) {
|
||
return (
|
||
<div className="runs-tab">
|
||
{canRunHeartbeat && (
|
||
<div style={{ padding: "12px 16px", borderBottom: "1px solid var(--border-color)" }}>
|
||
<button
|
||
className="btn btn--sm btn--primary"
|
||
onClick={() => void handleRunHeartbeat()}
|
||
aria-label={`Run heartbeat for ${agentName ?? agentId}`}
|
||
>
|
||
<Activity size={14} /> Run Heartbeat
|
||
</button>
|
||
</div>
|
||
)}
|
||
<div className="runs-empty">
|
||
<Activity size={48} opacity={0.3} />
|
||
<p>No runs yet</p>
|
||
<p className="text-muted">Heartbeat runs will appear here</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const sortedRuns = [...runs].sort(
|
||
(a, b) => new Date(b.startedAt).getTime() - new Date(a.startedAt).getTime()
|
||
);
|
||
|
||
const activeRuns = sortedRuns.filter(r => r.status === "active");
|
||
const completedRuns = sortedRuns.filter(r => r.status !== "active");
|
||
|
||
const renderUsage = (usage: { inputTokens: number; outputTokens: number; cachedTokens: number } | undefined) => {
|
||
if (!usage) return null;
|
||
return (
|
||
<div style={{ fontSize: "12px", color: "var(--text-secondary)", display: "flex", gap: "12px", flexWrap: "wrap" }}>
|
||
<span>Input: {usage.inputTokens.toLocaleString()}</span>
|
||
<span>Output: {usage.outputTokens.toLocaleString()}</span>
|
||
{usage.cachedTokens > 0 && <span>Cached: {usage.cachedTokens.toLocaleString()}</span>}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const renderRunCard = (run: AgentHeartbeatRun, index: number, isActive: boolean) => {
|
||
const statusInfo = RUN_STATUS_ICONS[run.status] || RUN_STATUS_ICONS.completed;
|
||
const StatusIcon = statusInfo.icon;
|
||
const duration = run.endedAt
|
||
? formatDuration(new Date(run.startedAt), new Date(run.endedAt))
|
||
: "In progress";
|
||
const isSelected = selectedRunId === run.id;
|
||
|
||
return (
|
||
<div key={run.id}>
|
||
<div
|
||
className={cn("run-card", isActive && "run-card--active", isSelected && "run-card--selected")}
|
||
onClick={() => void handleRunClick(run.id)}
|
||
style={{ cursor: "pointer" }}
|
||
role="button"
|
||
tabIndex={0}
|
||
aria-expanded={isSelected}
|
||
aria-label={`${isActive ? "Active" : ""} run ${run.id.slice(0, 8)}, ${run.status}`}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter" || e.key === " ") {
|
||
e.preventDefault();
|
||
void handleRunClick(run.id);
|
||
}
|
||
}}
|
||
>
|
||
<div className="run-header">
|
||
<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
|
||
{isSelected ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
|
||
{isActive ? (
|
||
<span className="run-live-indicator">
|
||
<span className="live-dot" />
|
||
Live Run
|
||
</span>
|
||
) : (
|
||
<span className="run-id">#{index + 1} {run.id.slice(0, 8)}</span>
|
||
)}
|
||
</div>
|
||
<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
|
||
{run.invocationSource && (
|
||
<span className="badge" style={{ fontSize: "10px", padding: "1px 6px" }}>
|
||
{run.invocationSource}
|
||
</span>
|
||
)}
|
||
<span className={cn("run-status", run.status)}>
|
||
<StatusIcon size={14} className={statusInfo.color} style={run.status === "active" ? { color: statusInfo.color } : undefined} />
|
||
{run.status}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="run-details">
|
||
<span>Started {relativeTime(run.startedAt)}</span>
|
||
<span>•</span>
|
||
<span>{duration}</span>
|
||
{run.triggerDetail && (
|
||
<>
|
||
<span>•</span>
|
||
<span className="text-muted">{run.triggerDetail}</span>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
{isSelected && (
|
||
<div
|
||
className="run-logs-container"
|
||
style={{
|
||
padding: "12px",
|
||
background: "var(--bg-secondary)",
|
||
borderBottom: "1px solid var(--border-color)",
|
||
borderTop: "1px solid var(--border-color)",
|
||
}}
|
||
>
|
||
{/* Execution Details */}
|
||
{isLoadingDetail ? (
|
||
<div style={{ display: "flex", alignItems: "center", gap: "8px", padding: "8px 0" }}>
|
||
<Loader2 size={14} className="animate-spin" />
|
||
<span className="text-muted">Loading details...</span>
|
||
</div>
|
||
) : detailRun && (
|
||
<div style={{ marginBottom: "12px" }}>
|
||
{/* Token Usage */}
|
||
{detailRun.usageJson && (
|
||
<div style={{ marginBottom: "8px" }}>
|
||
<div style={{ fontSize: "11px", fontWeight: 600, textTransform: "uppercase", color: "var(--text-secondary)", marginBottom: "4px" }}>
|
||
Token Usage
|
||
</div>
|
||
{renderUsage(detailRun.usageJson)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Output */}
|
||
{detailRun.stdoutExcerpt && (
|
||
<div style={{ marginBottom: "8px" }}>
|
||
<div style={{ fontSize: "11px", fontWeight: 600, textTransform: "uppercase", color: "var(--text-secondary)", marginBottom: "4px" }}>
|
||
Output
|
||
</div>
|
||
<pre style={{
|
||
background: "var(--bg-tertiary, #161b22)",
|
||
padding: "8px 12px",
|
||
borderRadius: "6px",
|
||
fontSize: "12px",
|
||
maxHeight: "200px",
|
||
overflow: "auto",
|
||
margin: 0,
|
||
whiteSpace: "pre-wrap",
|
||
wordBreak: "break-word",
|
||
}}>
|
||
{detailRun.stdoutExcerpt.length > 2000
|
||
? `${detailRun.stdoutExcerpt.slice(0, 2000)}\n\n... (truncated, ${detailRun.stdoutExcerpt.length} chars total)`
|
||
: detailRun.stdoutExcerpt}
|
||
</pre>
|
||
</div>
|
||
)}
|
||
|
||
{/* Errors */}
|
||
{detailRun.stderrExcerpt && (
|
||
<div style={{ marginBottom: "8px" }}>
|
||
<div style={{ fontSize: "11px", fontWeight: 600, textTransform: "uppercase", color: "var(--color-error, #f85149)", marginBottom: "4px" }}>
|
||
Errors
|
||
</div>
|
||
<pre style={{
|
||
background: "rgba(248, 81, 73, 0.1)",
|
||
color: "var(--color-error, #f85149)",
|
||
padding: "8px 12px",
|
||
borderRadius: "6px",
|
||
fontSize: "12px",
|
||
maxHeight: "200px",
|
||
overflow: "auto",
|
||
margin: 0,
|
||
whiteSpace: "pre-wrap",
|
||
wordBreak: "break-word",
|
||
}}>
|
||
{detailRun.stderrExcerpt}
|
||
</pre>
|
||
</div>
|
||
)}
|
||
|
||
{/* Result */}
|
||
{detailRun.resultJson && (
|
||
<div style={{ marginBottom: "8px" }}>
|
||
<div style={{ fontSize: "11px", fontWeight: 600, textTransform: "uppercase", color: "var(--text-secondary)", marginBottom: "4px" }}>
|
||
Result
|
||
</div>
|
||
<pre style={{
|
||
background: "var(--bg-tertiary, #161b22)",
|
||
padding: "8px 12px",
|
||
borderRadius: "6px",
|
||
fontSize: "12px",
|
||
maxHeight: "200px",
|
||
overflow: "auto",
|
||
margin: 0,
|
||
whiteSpace: "pre-wrap",
|
||
wordBreak: "break-word",
|
||
}}>
|
||
{JSON.stringify(detailRun.resultJson, null, 2)}
|
||
</pre>
|
||
</div>
|
||
)}
|
||
|
||
{/* Context */}
|
||
{detailRun.contextSnapshot && Object.keys(detailRun.contextSnapshot).length > 0 && (
|
||
<div style={{ marginBottom: "8px" }}>
|
||
<div style={{ fontSize: "11px", fontWeight: 600, textTransform: "uppercase", color: "var(--text-secondary)", marginBottom: "4px" }}>
|
||
Context
|
||
</div>
|
||
<div style={{ display: "flex", flexWrap: "wrap", gap: "4px 12px", fontSize: "12px" }}>
|
||
{Object.entries(detailRun.contextSnapshot).map(([key, value]) => (
|
||
<span key={key}>
|
||
<span className="text-muted">{key}:</span>{" "}
|
||
<span>{String(value)}</span>
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* No output state */}
|
||
{!detailRun.stdoutExcerpt && !detailRun.stderrExcerpt && !detailRun.resultJson && (
|
||
<div className="text-muted" style={{ padding: "8px 0", fontStyle: "italic", fontSize: "12px" }}>
|
||
No output captured
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Run Logs */}
|
||
<div style={{ borderTop: "1px solid var(--border-color)", paddingTop: "8px", marginTop: "4px" }}>
|
||
<div style={{ fontSize: "11px", fontWeight: 600, textTransform: "uppercase", color: "var(--text-secondary)", marginBottom: "4px" }}>
|
||
Agent Logs
|
||
</div>
|
||
{isLoadingLogs ? (
|
||
<div style={{ display: "flex", alignItems: "center", gap: "8px", padding: "8px 0" }}>
|
||
<Loader2 size={14} className="animate-spin" />
|
||
<span className="text-muted">Loading logs...</span>
|
||
</div>
|
||
) : runLogs.length === 0 ? (
|
||
<div className="text-muted" style={{ padding: "8px 0", fontStyle: "italic" }}>
|
||
No logs available for this run
|
||
</div>
|
||
) : (
|
||
<AgentLogViewer entries={runLogs} loading={false} />
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<div className="runs-tab">
|
||
{canRunHeartbeat && (
|
||
<div style={{ padding: "12px 16px", borderBottom: "1px solid var(--border-color)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||
<span style={{ fontSize: "12px", color: "var(--text-secondary)" }}>
|
||
{runs.length} run{runs.length !== 1 ? "s" : ""}
|
||
{hasActiveRun && <span className="run-live-indicator" style={{ marginLeft: "8px" }}><span className="live-dot" />Live</span>}
|
||
</span>
|
||
<button
|
||
className="btn btn--sm btn--primary"
|
||
onClick={() => void handleRunHeartbeat()}
|
||
aria-label={`Run heartbeat for ${agentName ?? agentId}`}
|
||
>
|
||
<Activity size={14} /> Run Heartbeat
|
||
</button>
|
||
</div>
|
||
)}
|
||
{activeRuns.map((run, i) => renderRunCard(run, i, true))}
|
||
{completedRuns.map((run, i) => renderRunCard(run, activeRuns.length + i, false))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function formatDuration(start: Date, end: Date): string {
|
||
const diff = Math.floor((end.getTime() - start.getTime()) / 1000);
|
||
|
||
if (diff < 60) return `${diff}s`;
|
||
if (diff < 3600) return `${Math.floor(diff / 60)}m ${diff % 60}s`;
|
||
return `${Math.floor(diff / 3600)}h ${Math.floor((diff % 3600) / 60)}m`;
|
||
}
|
||
|
||
// ── Config Tab ─────────────────────────────────────────────────────────────
|
||
|
||
/** Shape of a single advanced setting field stored in agent.metadata */
|
||
interface AdvancedSettingField {
|
||
key: string;
|
||
label: string;
|
||
type: "text" | "number" | "select";
|
||
placeholder?: string;
|
||
hint?: string;
|
||
options?: Array<{ value: string; label: string }>;
|
||
/** Minimum value for number fields */
|
||
min?: number;
|
||
/** Maximum value for number fields */
|
||
max?: number;
|
||
}
|
||
|
||
/** Well-known advanced setting definitions backed by agent.metadata */
|
||
const ADVANCED_SETTINGS: AdvancedSettingField[] = [
|
||
{
|
||
key: "maxRetries",
|
||
label: "Max Retries",
|
||
type: "number",
|
||
placeholder: "3",
|
||
hint: "Maximum number of automatic retries on task failure (0–10, default 3)",
|
||
min: 0,
|
||
max: 10,
|
||
},
|
||
{
|
||
key: "timeoutMs",
|
||
label: "Task Timeout (ms)",
|
||
type: "number",
|
||
placeholder: "600000",
|
||
hint: "Maximum time in ms before a task is considered timed out (minimum 60000ms, default 600000ms)",
|
||
min: 60000,
|
||
max: 86400000,
|
||
},
|
||
{
|
||
key: "logLevel",
|
||
label: "Log Level",
|
||
type: "select",
|
||
hint: "Verbosity of agent log output",
|
||
options: [
|
||
{ value: "debug", label: "Debug" },
|
||
{ value: "info", label: "Info" },
|
||
{ value: "warn", label: "Warning" },
|
||
{ value: "error", label: "Error" },
|
||
],
|
||
},
|
||
];
|
||
|
||
/** Validation errors keyed by setting key */
|
||
type ValidationErrors = Record<string, string>;
|
||
|
||
function validateAdvancedSettings(
|
||
values: Record<string, string>,
|
||
): ValidationErrors {
|
||
const errors: ValidationErrors = {};
|
||
|
||
for (const field of ADVANCED_SETTINGS) {
|
||
const raw = values[field.key]?.trim();
|
||
|
||
// Empty is fine — it means "use default"
|
||
if (!raw) continue;
|
||
|
||
if (field.type === "number") {
|
||
const num = Number(raw);
|
||
if (Number.isNaN(num) || !Number.isFinite(num)) {
|
||
errors[field.key] = `"${field.label}" must be a valid number`;
|
||
continue;
|
||
}
|
||
if (field.min !== undefined && num < field.min) {
|
||
errors[field.key] = `"${field.label}" must be at least ${field.min.toLocaleString()}`;
|
||
}
|
||
if (field.max !== undefined && num > field.max) {
|
||
errors[field.key] = `"${field.label}" must be at most ${field.max.toLocaleString()}`;
|
||
}
|
||
}
|
||
|
||
if (field.type === "select") {
|
||
const validOptions = field.options?.map((o) => o.value) ?? [];
|
||
if (validOptions.length > 0 && !validOptions.includes(raw)) {
|
||
errors[field.key] = `"${field.label}" must be one of: ${validOptions.join(", ")}`;
|
||
}
|
||
}
|
||
}
|
||
|
||
return errors;
|
||
}
|
||
|
||
function ConfigTab({
|
||
agent,
|
||
projectId,
|
||
addToast,
|
||
onSaved,
|
||
}: {
|
||
agent: AgentDetail;
|
||
projectId?: string;
|
||
addToast: (message: string, type?: "success" | "error") => void;
|
||
onSaved: () => Promise<void>;
|
||
}) {
|
||
// Local form state initialised from agent.metadata
|
||
const [formValues, setFormValues] = useState<Record<string, string>>(() => {
|
||
const initial: Record<string, string> = {};
|
||
for (const field of ADVANCED_SETTINGS) {
|
||
const raw = agent.metadata[field.key];
|
||
if (raw !== undefined && raw !== null) {
|
||
initial[field.key] = String(raw);
|
||
}
|
||
}
|
||
return initial;
|
||
});
|
||
|
||
// Heartbeat config state initialised from agent.runtimeConfig
|
||
const [heartbeatValues, setHeartbeatValues] = useState<Record<string, string>>(() => {
|
||
const rc = agent.runtimeConfig ?? {};
|
||
const initial: Record<string, string> = {};
|
||
if (rc.heartbeatIntervalMs !== undefined && rc.heartbeatIntervalMs !== null) {
|
||
initial.heartbeatIntervalMs = String(rc.heartbeatIntervalMs);
|
||
}
|
||
if (rc.heartbeatTimeoutMs !== undefined && rc.heartbeatTimeoutMs !== null) {
|
||
initial.heartbeatTimeoutMs = String(rc.heartbeatTimeoutMs);
|
||
}
|
||
if (rc.maxConcurrentRuns !== undefined && rc.maxConcurrentRuns !== null) {
|
||
initial.maxConcurrentRuns = String(rc.maxConcurrentRuns);
|
||
}
|
||
if (rc.messageResponseMode === "immediate" || rc.messageResponseMode === "on-heartbeat") {
|
||
initial.messageResponseMode = rc.messageResponseMode;
|
||
}
|
||
return initial;
|
||
});
|
||
|
||
const [isSaving, setIsSaving] = useState(false);
|
||
const [isSavingInstructions, setIsSavingInstructions] = useState(false);
|
||
const [errors, setErrors] = useState<ValidationErrors>({});
|
||
const [justSaved, setJustSaved] = useState(false);
|
||
const [justSavedInstructions, setJustSavedInstructions] = useState(false);
|
||
|
||
// Custom instructions state
|
||
const [instructionsText, setInstructionsText] = useState(agent.instructionsText ?? "");
|
||
const [instructionsPath, setInstructionsPath] = useState(agent.instructionsPath ?? "");
|
||
|
||
/** Detect whether any local value differs from the persisted metadata */
|
||
const hasChanges = (() => {
|
||
for (const field of ADVANCED_SETTINGS) {
|
||
const current = formValues[field.key]?.trim() ?? "";
|
||
const persisted = agent.metadata[field.key] !== undefined && agent.metadata[field.key] !== null
|
||
? String(agent.metadata[field.key])
|
||
: "";
|
||
if (current !== persisted) return true;
|
||
}
|
||
// Check heartbeat values
|
||
const rc = agent.runtimeConfig ?? {};
|
||
for (const key of ["heartbeatIntervalMs", "heartbeatTimeoutMs", "maxConcurrentRuns", "messageResponseMode"] as const) {
|
||
const current = heartbeatValues[key]?.trim() ?? "";
|
||
const persisted = rc[key] !== undefined && rc[key] !== null ? String(rc[key]) : "";
|
||
if (current !== persisted) return true;
|
||
}
|
||
return false;
|
||
})();
|
||
|
||
const hasInstructionsChanges = (() => {
|
||
const currentText = instructionsText ?? "";
|
||
const persistedText = agent.instructionsText ?? "";
|
||
const currentPath = instructionsPath?.trim() ?? "";
|
||
const persistedPath = agent.instructionsPath?.trim() ?? "";
|
||
return currentText !== persistedText || currentPath !== persistedPath;
|
||
})();
|
||
|
||
const handleFieldChange = (key: string, value: string) => {
|
||
setFormValues((prev) => ({ ...prev, [key]: value }));
|
||
setJustSaved(false);
|
||
// Clear individual field error on change
|
||
if (errors[key]) {
|
||
setErrors((prev) => {
|
||
const next = { ...prev };
|
||
delete next[key];
|
||
return next;
|
||
});
|
||
}
|
||
};
|
||
|
||
const handleHeartbeatFieldChange = (key: string, value: string) => {
|
||
setHeartbeatValues((prev) => ({ ...prev, [key]: value }));
|
||
setJustSaved(false);
|
||
if (errors[key]) {
|
||
setErrors((prev) => {
|
||
const next = { ...prev };
|
||
delete next[key];
|
||
return next;
|
||
});
|
||
}
|
||
};
|
||
|
||
const handleSave = async () => {
|
||
// Validate advanced settings
|
||
const validationErrors = validateAdvancedSettings(formValues);
|
||
|
||
// Validate heartbeat settings
|
||
for (const [key, config] of Object.entries({
|
||
heartbeatIntervalMs: { label: "Heartbeat Interval", min: 1000 },
|
||
heartbeatTimeoutMs: { label: "Heartbeat Timeout", min: 5000 },
|
||
maxConcurrentRuns: { label: "Max Concurrent Runs", min: 1 },
|
||
})) {
|
||
const raw = heartbeatValues[key]?.trim();
|
||
if (!raw) continue;
|
||
const num = Number(raw);
|
||
if (Number.isNaN(num) || !Number.isFinite(num)) {
|
||
validationErrors[key] = `"${config.label}" must be a valid number`;
|
||
} else if (num < config.min) {
|
||
validationErrors[key] = `"${config.label}" must be at least ${config.min.toLocaleString()}`;
|
||
}
|
||
}
|
||
|
||
const messageResponseModeForValidation = heartbeatValues.messageResponseMode?.trim();
|
||
if (messageResponseModeForValidation && !["immediate", "on-heartbeat"].includes(messageResponseModeForValidation)) {
|
||
validationErrors.messageResponseMode = "\"Message Response Mode\" must be either immediate or on-heartbeat";
|
||
}
|
||
|
||
if (Object.keys(validationErrors).length > 0) {
|
||
setErrors(validationErrors);
|
||
addToast("Please fix validation errors before saving", "error");
|
||
return;
|
||
}
|
||
|
||
// Build the metadata payload — only include non-empty values
|
||
const newMetadata: Record<string, unknown> = { ...agent.metadata };
|
||
for (const field of ADVANCED_SETTINGS) {
|
||
const raw = formValues[field.key]?.trim();
|
||
if (!raw) {
|
||
// Remove the key to use system default
|
||
delete newMetadata[field.key];
|
||
} else if (field.type === "number") {
|
||
newMetadata[field.key] = Number(raw);
|
||
} else {
|
||
newMetadata[field.key] = raw;
|
||
}
|
||
}
|
||
|
||
// Build the runtimeConfig payload — only include non-empty values
|
||
const newRuntimeConfig: Record<string, unknown> = { ...agent.runtimeConfig };
|
||
for (const key of ["heartbeatIntervalMs", "heartbeatTimeoutMs", "maxConcurrentRuns"] as const) {
|
||
const raw = heartbeatValues[key]?.trim();
|
||
if (!raw) {
|
||
delete newRuntimeConfig[key];
|
||
} else {
|
||
newRuntimeConfig[key] = Number(raw);
|
||
}
|
||
}
|
||
|
||
const messageResponseMode = heartbeatValues.messageResponseMode?.trim();
|
||
if (!messageResponseMode) {
|
||
delete newRuntimeConfig.messageResponseMode;
|
||
} else {
|
||
newRuntimeConfig.messageResponseMode = messageResponseMode;
|
||
}
|
||
|
||
setIsSaving(true);
|
||
try {
|
||
await updateAgent(agent.id, { metadata: newMetadata, runtimeConfig: newRuntimeConfig }, projectId);
|
||
addToast("Settings saved", "success");
|
||
setJustSaved(true);
|
||
// Auto-hide the saved indicator after 3 seconds
|
||
setTimeout(() => setJustSaved(false), 3000);
|
||
await onSaved();
|
||
} catch (err: any) {
|
||
addToast(`Failed to save settings: ${err.message}`, "error");
|
||
} finally {
|
||
setIsSaving(false);
|
||
}
|
||
};
|
||
|
||
const handleSaveInstructions = async () => {
|
||
setIsSavingInstructions(true);
|
||
try {
|
||
await updateAgentInstructions(
|
||
agent.id,
|
||
{
|
||
instructionsText: instructionsText || undefined,
|
||
instructionsPath: instructionsPath.trim() || undefined,
|
||
},
|
||
projectId,
|
||
);
|
||
addToast("Instructions saved", "success");
|
||
setJustSavedInstructions(true);
|
||
setTimeout(() => setJustSavedInstructions(false), 3000);
|
||
await onSaved();
|
||
} catch (err: any) {
|
||
addToast(`Failed to save instructions: ${err.message}`, "error");
|
||
} finally {
|
||
setIsSavingInstructions(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="config-tab">
|
||
<div className="config-section">
|
||
<h3>Agent Configuration</h3>
|
||
<p className="config-description">
|
||
Configure agent settings and behavior.
|
||
</p>
|
||
|
||
<div className="config-fields">
|
||
<div className="config-field">
|
||
<label>Name</label>
|
||
<input
|
||
type="text"
|
||
className="input"
|
||
defaultValue={agent.name}
|
||
disabled
|
||
/>
|
||
<span className="config-hint">Name changes coming soon</span>
|
||
</div>
|
||
|
||
<div className="config-field">
|
||
<label>Role</label>
|
||
<select className="select" defaultValue={agent.role} disabled>
|
||
<option value="triage">Triage</option>
|
||
<option value="executor">Executor</option>
|
||
<option value="reviewer">Reviewer</option>
|
||
<option value="merger">Merger</option>
|
||
<option value="scheduler">Scheduler</option>
|
||
<option value="custom">Custom</option>
|
||
</select>
|
||
<span className="config-hint">Role changes coming soon</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="config-section">
|
||
<h3>Heartbeat Settings</h3>
|
||
<p className="config-description">
|
||
Configure how this agent's heartbeat is monitored. Leave a field empty to use system defaults.
|
||
</p>
|
||
|
||
<div className="config-fields">
|
||
<div className="config-field">
|
||
<label htmlFor="hb-heartbeatIntervalMs">Heartbeat Interval (ms)</label>
|
||
<input
|
||
id="hb-heartbeatIntervalMs"
|
||
type="text"
|
||
inputMode="numeric"
|
||
className={cn("input", !!errors.heartbeatIntervalMs && "input--error")}
|
||
placeholder="30000"
|
||
value={heartbeatValues.heartbeatIntervalMs ?? ""}
|
||
onChange={(e) => handleHeartbeatFieldChange("heartbeatIntervalMs", e.target.value)}
|
||
/>
|
||
{errors.heartbeatIntervalMs ? (
|
||
<span className="config-error">{errors.heartbeatIntervalMs}</span>
|
||
) : (
|
||
<span className="config-hint">How often heartbeats are checked. Leave empty for system default (30000ms)</span>
|
||
)}
|
||
</div>
|
||
|
||
<div className="config-field">
|
||
<label htmlFor="hb-heartbeatTimeoutMs">Heartbeat Timeout (ms)</label>
|
||
<input
|
||
id="hb-heartbeatTimeoutMs"
|
||
type="text"
|
||
inputMode="numeric"
|
||
className={cn("input", !!errors.heartbeatTimeoutMs && "input--error")}
|
||
placeholder="60000"
|
||
value={heartbeatValues.heartbeatTimeoutMs ?? ""}
|
||
onChange={(e) => handleHeartbeatFieldChange("heartbeatTimeoutMs", e.target.value)}
|
||
/>
|
||
{errors.heartbeatTimeoutMs ? (
|
||
<span className="config-error">{errors.heartbeatTimeoutMs}</span>
|
||
) : (
|
||
<span className="config-hint">Time without heartbeat before agent is considered unresponsive. Leave empty for system default (60000ms)</span>
|
||
)}
|
||
</div>
|
||
|
||
<div className="config-field">
|
||
<label htmlFor="hb-maxConcurrentRuns">Max Concurrent Runs</label>
|
||
<input
|
||
id="hb-maxConcurrentRuns"
|
||
type="text"
|
||
inputMode="numeric"
|
||
className={cn("input", !!errors.maxConcurrentRuns && "input--error")}
|
||
placeholder="1"
|
||
value={heartbeatValues.maxConcurrentRuns ?? ""}
|
||
onChange={(e) => handleHeartbeatFieldChange("maxConcurrentRuns", e.target.value)}
|
||
/>
|
||
{errors.maxConcurrentRuns ? (
|
||
<span className="config-error">{errors.maxConcurrentRuns}</span>
|
||
) : (
|
||
<span className="config-hint">Maximum simultaneous heartbeat runs for this agent. Leave empty for system default (1).</span>
|
||
)}
|
||
</div>
|
||
|
||
<div className="config-field">
|
||
<label htmlFor="hb-messageResponseMode">Message Response Mode</label>
|
||
<select
|
||
id="hb-messageResponseMode"
|
||
className={cn("select", !!errors.messageResponseMode && "input--error")}
|
||
value={heartbeatValues.messageResponseMode ?? ""}
|
||
onChange={(e) => handleHeartbeatFieldChange("messageResponseMode", e.target.value)}
|
||
>
|
||
<option value="">System Default (On Heartbeat)</option>
|
||
<option value="on-heartbeat">On Heartbeat</option>
|
||
<option value="immediate">Immediate</option>
|
||
</select>
|
||
{errors.messageResponseMode ? (
|
||
<span className="config-error">{errors.messageResponseMode}</span>
|
||
) : (
|
||
<span className="config-hint">How this agent responds to incoming messages. 'Immediate' wakes the agent as soon as a message arrives. 'On Heartbeat' defers processing to the next scheduled heartbeat.</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="config-section">
|
||
<h3>Advanced Settings</h3>
|
||
<p className="config-description">
|
||
Advanced configuration options for this agent. Leave a field empty to use system defaults.
|
||
</p>
|
||
|
||
<div className="config-fields">
|
||
{ADVANCED_SETTINGS.map((field) => {
|
||
const hasError = !!errors[field.key];
|
||
return (
|
||
<div className="config-field" key={field.key}>
|
||
<label htmlFor={`adv-${field.key}`}>{field.label}</label>
|
||
{field.type === "select" ? (
|
||
<select
|
||
id={`adv-${field.key}`}
|
||
className={cn("select", hasError && "input--error")}
|
||
value={formValues[field.key] ?? ""}
|
||
onChange={(e) => handleFieldChange(field.key, e.target.value)}
|
||
>
|
||
<option value="">System Default</option>
|
||
{field.options?.map((opt) => (
|
||
<option key={opt.value} value={opt.value}>
|
||
{opt.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
) : (
|
||
<input
|
||
id={`adv-${field.key}`}
|
||
type="text"
|
||
inputMode={field.type === "number" ? "numeric" : undefined}
|
||
className={cn("input", hasError && "input--error")}
|
||
placeholder={field.placeholder}
|
||
value={formValues[field.key] ?? ""}
|
||
onChange={(e) => handleFieldChange(field.key, e.target.value)}
|
||
/>
|
||
)}
|
||
{hasError && (
|
||
<span className="config-error">{errors[field.key]}</span>
|
||
)}
|
||
{!hasError && field.hint && (
|
||
<span className="config-hint">{field.hint}</span>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
<div className="config-actions">
|
||
<button
|
||
className="btn btn--primary"
|
||
disabled={!hasChanges || isSaving}
|
||
onClick={() => void handleSave()}
|
||
>
|
||
{isSaving ? (
|
||
<>
|
||
<Loader2 size={16} className="animate-spin" />
|
||
Saving…
|
||
</>
|
||
) : (
|
||
<>
|
||
<CheckCircle size={16} />
|
||
Save Settings
|
||
</>
|
||
)}
|
||
</button>
|
||
{!hasChanges && justSaved && (
|
||
<span className="config-saved-indicator">
|
||
<CheckCircle size={14} />
|
||
Settings saved
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="config-section">
|
||
<h3>Custom Instructions</h3>
|
||
<p className="config-description">
|
||
Append custom instructions to this agent's system prompt at execution time. Use this to customize behavior, coding style, or project conventions without modifying built-in prompts.
|
||
</p>
|
||
|
||
<div className="config-fields">
|
||
<div className="config-field">
|
||
<label htmlFor="instructions-text">Inline Instructions</label>
|
||
<textarea
|
||
id="instructions-text"
|
||
className="input"
|
||
rows={10}
|
||
placeholder="Enter custom instructions to append to this agent's system prompt..."
|
||
value={instructionsText}
|
||
onChange={(e) => {
|
||
setInstructionsText(e.target.value);
|
||
setJustSavedInstructions(false);
|
||
}}
|
||
style={{ fontFamily: "monospace", fontSize: "0.875rem", resize: "vertical" }}
|
||
/>
|
||
<span className="config-hint">Markdown formatting supported. Max 50,000 characters.</span>
|
||
</div>
|
||
|
||
<div className="config-field">
|
||
<label htmlFor="instructions-path">Instructions File Path</label>
|
||
<input
|
||
id="instructions-path"
|
||
type="text"
|
||
className="input"
|
||
placeholder="e.g., .fusion/agents/my-agent-instructions.md"
|
||
value={instructionsPath}
|
||
onChange={(e) => {
|
||
setInstructionsPath(e.target.value);
|
||
setJustSavedInstructions(false);
|
||
}}
|
||
/>
|
||
<span className="config-hint">Path to a .md file (relative to project root). Contents are read and appended at execution time.</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="config-actions">
|
||
<button
|
||
className="btn btn--primary"
|
||
disabled={!hasInstructionsChanges || isSavingInstructions}
|
||
onClick={() => void handleSaveInstructions()}
|
||
>
|
||
{isSavingInstructions ? (
|
||
<>
|
||
<Loader2 size={16} className="animate-spin" />
|
||
Saving…
|
||
</>
|
||
) : (
|
||
<>
|
||
<CheckCircle size={16} />
|
||
Save Instructions
|
||
</>
|
||
)}
|
||
</button>
|
||
{!hasInstructionsChanges && justSavedInstructions && (
|
||
<span className="config-saved-indicator">
|
||
<CheckCircle size={14} />
|
||
Instructions saved
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Children Tab ────────────────────────────────────────────────────────────
|
||
|
||
function ChildrenTab({
|
||
agentId,
|
||
projectId,
|
||
onChildClick,
|
||
}: {
|
||
agentId: string;
|
||
projectId?: string;
|
||
onChildClick?: (childId: string) => void;
|
||
}) {
|
||
const [children, setChildren] = useState<Agent[]>([]);
|
||
const [isLoading, setIsLoading] = useState(true);
|
||
|
||
useEffect(() => {
|
||
setIsLoading(true);
|
||
fetchAgentChildren(agentId, projectId)
|
||
.then(setChildren)
|
||
.finally(() => setIsLoading(false));
|
||
}, [agentId, projectId]);
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<div className="detail-section">
|
||
<div className="detail-section-header">
|
||
<h3>Child Agents</h3>
|
||
</div>
|
||
<div className="detail-section-body" style={{ display: "flex", alignItems: "center", gap: 8, padding: 16 }}>
|
||
<Loader2 size={16} className="spin" />
|
||
<span className="text-secondary">Loading children...</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="detail-section">
|
||
<div className="detail-section-header">
|
||
<h3>Child Agents</h3>
|
||
<span className="text-secondary">({children.length})</span>
|
||
</div>
|
||
<div className="detail-section-body">
|
||
{children.length === 0 ? (
|
||
<div className="agent-empty" style={{ padding: 24 }}>
|
||
<GitBranch size={32} opacity={0.3} />
|
||
<p>No child agents</p>
|
||
<p className="text-secondary">This agent has no spawned children</p>
|
||
</div>
|
||
) : (
|
||
<div className="agent-tree__children">
|
||
{children.map((child) => {
|
||
const stateStyle = STATE_COLORS[child.state as AgentState];
|
||
return (
|
||
<div
|
||
key={child.id}
|
||
className={`agent-tree__node agent-is-child`}
|
||
onClick={() => onChildClick?.(child.id)}
|
||
role="button"
|
||
tabIndex={0}
|
||
onKeyDown={(e) => e.key === "Enter" && onChildClick?.(child.id)}
|
||
style={{ cursor: onChildClick ? "pointer" : "default" }}
|
||
>
|
||
<span className="agent-tree__icon">{child.icon ?? "🤖"}</span>
|
||
<span className="agent-tree__name">{child.name}</span>
|
||
<span
|
||
className="agent-tree__badge"
|
||
style={{
|
||
background: stateStyle?.bg ?? "var(--state-idle-bg)",
|
||
color: stateStyle?.text ?? "var(--state-idle-text)",
|
||
border: `1px solid ${stateStyle?.border ?? "var(--state-idle-border)"}`,
|
||
}}
|
||
>
|
||
{child.state}
|
||
</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|