Add detail pages, property panels, and restyle list pages
New pages: AgentDetail, GoalDetail, IssueDetail, ProjectDetail, Inbox, MyIssues. New feature components: AgentProperties, GoalProperties, IssueProperties, ProjectProperties, GoalTree, NewIssueDialog. Add heartbeats API client. Restyle all list pages (Agents, Issues, Goals, Projects, Dashboard, Costs, Activity, Org) with EntityRow, FilterBar, and improved layouts. Add routing for detail views. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Forgotten
217
ui/src/pages/AgentDetail.tsx
Normal file
217
ui/src/pages/AgentDetail.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { agentsApi } from "../api/agents";
|
||||
import { heartbeatsApi } from "../api/heartbeats";
|
||||
import { issuesApi } from "../api/issues";
|
||||
import { useApi } from "../hooks/useApi";
|
||||
import { usePanel } from "../context/PanelContext";
|
||||
import { useCompany } from "../context/CompanyContext";
|
||||
import { useBreadcrumbs } from "../context/BreadcrumbContext";
|
||||
import { AgentProperties } from "../components/AgentProperties";
|
||||
import { StatusBadge } from "../components/StatusBadge";
|
||||
import { EntityRow } from "../components/EntityRow";
|
||||
import { formatCents, formatDate } from "../lib/utils";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import type { Issue, HeartbeatRun } from "@paperclip/shared";
|
||||
|
||||
export function AgentDetail() {
|
||||
const { agentId } = useParams<{ agentId: string }>();
|
||||
const { selectedCompanyId } = useCompany();
|
||||
const { openPanel, closePanel } = usePanel();
|
||||
const { setBreadcrumbs } = useBreadcrumbs();
|
||||
const [actionError, setActionError] = useState<string | null>(null);
|
||||
|
||||
const agentFetcher = useCallback(() => {
|
||||
if (!agentId) return Promise.reject(new Error("No agent ID"));
|
||||
return agentsApi.get(agentId);
|
||||
}, [agentId]);
|
||||
|
||||
const heartbeatsFetcher = useCallback(() => {
|
||||
if (!selectedCompanyId || !agentId) return Promise.resolve([] as HeartbeatRun[]);
|
||||
return heartbeatsApi.list(selectedCompanyId, agentId);
|
||||
}, [selectedCompanyId, agentId]);
|
||||
|
||||
const issuesFetcher = useCallback(() => {
|
||||
if (!selectedCompanyId) return Promise.resolve([] as Issue[]);
|
||||
return issuesApi.list(selectedCompanyId);
|
||||
}, [selectedCompanyId]);
|
||||
|
||||
const { data: agent, loading, error, reload: reloadAgent } = useApi(agentFetcher);
|
||||
const { data: heartbeats } = useApi(heartbeatsFetcher);
|
||||
const { data: allIssues } = useApi(issuesFetcher);
|
||||
|
||||
const assignedIssues = (allIssues ?? []).filter((i) => i.assigneeAgentId === agentId);
|
||||
|
||||
useEffect(() => {
|
||||
setBreadcrumbs([
|
||||
{ label: "Agents", href: "/agents" },
|
||||
{ label: agent?.name ?? agentId ?? "Agent" },
|
||||
]);
|
||||
}, [setBreadcrumbs, agent, agentId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (agent) {
|
||||
openPanel(<AgentProperties agent={agent} />);
|
||||
}
|
||||
return () => closePanel();
|
||||
}, [agent]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
async function handleAction(action: "invoke" | "pause" | "resume") {
|
||||
if (!agentId) return;
|
||||
setActionError(null);
|
||||
try {
|
||||
if (action === "invoke") await agentsApi.invoke(agentId);
|
||||
else if (action === "pause") await agentsApi.pause(agentId);
|
||||
else await agentsApi.resume(agentId);
|
||||
reloadAgent();
|
||||
} catch (err) {
|
||||
setActionError(err instanceof Error ? err.message : `Failed to ${action} agent`);
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) return <p className="text-sm text-muted-foreground">Loading...</p>;
|
||||
if (error) return <p className="text-sm text-destructive">{error.message}</p>;
|
||||
if (!agent) return null;
|
||||
|
||||
const budgetPct =
|
||||
agent.budgetMonthlyCents > 0
|
||||
? Math.round((agent.spentMonthlyCents / agent.budgetMonthlyCents) * 100)
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold">{agent.name}</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{agent.role}{agent.title ? ` - ${agent.title}` : ""}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => handleAction("invoke")}>
|
||||
Invoke
|
||||
</Button>
|
||||
{agent.status === "active" ? (
|
||||
<Button variant="outline" size="sm" onClick={() => handleAction("pause")}>
|
||||
Pause
|
||||
</Button>
|
||||
) : (
|
||||
<Button variant="outline" size="sm" onClick={() => handleAction("resume")}>
|
||||
Resume
|
||||
</Button>
|
||||
)}
|
||||
<StatusBadge status={agent.status} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{actionError && <p className="text-sm text-destructive">{actionError}</p>}
|
||||
|
||||
<Tabs defaultValue="overview">
|
||||
<TabsList>
|
||||
<TabsTrigger value="overview">Overview</TabsTrigger>
|
||||
<TabsTrigger value="heartbeats">Heartbeats</TabsTrigger>
|
||||
<TabsTrigger value="issues">Issues ({assignedIssues.length})</TabsTrigger>
|
||||
<TabsTrigger value="costs">Costs</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="overview" className="space-y-4 mt-4">
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span className="text-muted-foreground">Adapter</span>
|
||||
<p className="font-mono">{agent.adapterType}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-muted-foreground">Context Mode</span>
|
||||
<p>{agent.contextMode}</p>
|
||||
</div>
|
||||
{agent.reportsTo && (
|
||||
<div>
|
||||
<span className="text-muted-foreground">Reports To</span>
|
||||
<p className="font-mono">{agent.reportsTo}</p>
|
||||
</div>
|
||||
)}
|
||||
{agent.capabilities && (
|
||||
<div className="col-span-2">
|
||||
<span className="text-muted-foreground">Capabilities</span>
|
||||
<p>{agent.capabilities}</p>
|
||||
</div>
|
||||
)}
|
||||
{agent.lastHeartbeatAt && (
|
||||
<div>
|
||||
<span className="text-muted-foreground">Last Heartbeat</span>
|
||||
<p>{formatDate(agent.lastHeartbeatAt)}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="heartbeats" className="mt-4">
|
||||
{(!heartbeats || heartbeats.length === 0) ? (
|
||||
<p className="text-sm text-muted-foreground">No heartbeat runs.</p>
|
||||
) : (
|
||||
<div className="border border-border rounded-md">
|
||||
{heartbeats.map((run) => (
|
||||
<EntityRow
|
||||
key={run.id}
|
||||
identifier={run.id.slice(0, 8)}
|
||||
title={run.invocationSource}
|
||||
subtitle={run.error ?? undefined}
|
||||
trailing={
|
||||
<div className="flex items-center gap-2">
|
||||
<StatusBadge status={run.status} />
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{formatDate(run.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="issues" className="mt-4">
|
||||
{assignedIssues.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No assigned issues.</p>
|
||||
) : (
|
||||
<div className="border border-border rounded-md">
|
||||
{assignedIssues.map((issue) => (
|
||||
<EntityRow
|
||||
key={issue.id}
|
||||
identifier={issue.id.slice(0, 8)}
|
||||
title={issue.title}
|
||||
trailing={<StatusBadge status={issue.status} />}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="costs" className="mt-4 space-y-4">
|
||||
<div>
|
||||
<div className="flex items-center justify-between text-sm mb-1">
|
||||
<span className="text-muted-foreground">Monthly Budget</span>
|
||||
<span>
|
||||
{formatCents(agent.spentMonthlyCents)} / {formatCents(agent.budgetMonthlyCents)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full h-2 bg-muted rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full transition-all ${
|
||||
budgetPct > 90
|
||||
? "bg-red-400"
|
||||
: budgetPct > 70
|
||||
? "bg-yellow-400"
|
||||
: "bg-green-400"
|
||||
}`}
|
||||
style={{ width: `${Math.min(100, budgetPct)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">{budgetPct}% utilized</p>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user