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>

ui/src/pages/Agents.tsx

@@ -1,18 +1,28 @@
-import { useState } from "react";
+import { useState, useCallback, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import { useAgents } from "../hooks/useAgents";
-import { StatusBadge } from "../components/StatusBadge";
-import { formatCents } from "../lib/utils";
 import { useCompany } from "../context/CompanyContext";
+import { useBreadcrumbs } from "../context/BreadcrumbContext";
 import { agentsApi } from "../api/agents";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
+import { StatusBadge } from "../components/StatusBadge";
+import { EntityRow } from "../components/EntityRow";
+import { EmptyState } from "../components/EmptyState";
+import { formatCents } from "../lib/utils";
+import { Bot } from "lucide-react";
 
 export function Agents() {
   const { selectedCompanyId } = useCompany();
   const { data: agents, loading, error, reload } = useAgents(selectedCompanyId);
+  const { setBreadcrumbs } = useBreadcrumbs();
+  const navigate = useNavigate();
   const [actionError, setActionError] = useState<string | null>(null);
 
-  async function invoke(agentId: string) {
+  useEffect(() => {
+    setBreadcrumbs([{ label: "Agents" }]);
+  }, [setBreadcrumbs]);
+
+  async function invoke(e: React.MouseEvent, agentId: string) {
+    e.stopPropagation();
     setActionError(null);
     try {
       await agentsApi.invoke(agentId);
@@ -22,71 +32,76 @@ export function Agents() {
     }
   }
 
-  async function pause(agentId: string) {
-    setActionError(null);
-    try {
-      await agentsApi.pause(agentId);
-      reload();
-    } catch (err) {
-      setActionError(err instanceof Error ? err.message : "Failed to pause agent");
-    }
-  }
-
-  async function resume(agentId: string) {
-    setActionError(null);
-    try {
-      await agentsApi.resume(agentId);
-      reload();
-    } catch (err) {
-      setActionError(err instanceof Error ? err.message : "Failed to resume agent");
-    }
-  }
-
   if (!selectedCompanyId) {
-    return <p className="text-muted-foreground">Select a company first.</p>;
+    return <EmptyState icon={Bot} message="Select a company to view agents." />;
   }
 
   return (
-    <div>
-      <h2 className="text-2xl font-bold mb-4">Agents</h2>
-      {loading && <p className="text-muted-foreground">Loading...</p>}
-      {error && <p className="text-destructive">{error.message}</p>}
-      {actionError && <p className="text-destructive mb-3">{actionError}</p>}
-      {agents && agents.length === 0 && <p className="text-muted-foreground">No agents yet.</p>}
+    <div className="space-y-4">
+      <h2 className="text-lg font-semibold">Agents</h2>
+
+      {loading && <p className="text-sm text-muted-foreground">Loading...</p>}
+      {error && <p className="text-sm text-destructive">{error.message}</p>}
+      {actionError && <p className="text-sm text-destructive">{actionError}</p>}
+
+      {agents && agents.length === 0 && (
+        <EmptyState icon={Bot} message="No agents yet." />
+      )}
+
       {agents && agents.length > 0 && (
-        <div className="grid gap-4">
-          {agents.map((agent) => (
-            <Card key={agent.id}>
-              <CardContent className="p-4 space-y-3">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <h3 className="font-semibold">{agent.name}</h3>
-                    <p className="text-sm text-muted-foreground">
-                      {agent.role}
-                      {agent.title ? ` - ${agent.title}` : ""}
-                    </p>
-                  </div>
+        <div className="border border-border rounded-md">
+          {agents.map((agent) => {
+            const budgetPct =
+              agent.budgetMonthlyCents > 0
+                ? Math.round((agent.spentMonthlyCents / agent.budgetMonthlyCents) * 100)
+                : 0;
+
+            return (
+              <EntityRow
+                key={agent.id}
+                title={agent.name}
+                subtitle={`${agent.role}${agent.title ? ` - ${agent.title}` : ""}`}
+                onClick={() => navigate(`/agents/${agent.id}`)}
+                leading={
+                  <span className="relative flex h-2.5 w-2.5">
+                    <span
+                      className={`absolute inline-flex h-full w-full rounded-full ${
+                        agent.status === "active"
+                          ? "bg-green-400"
+                          : agent.status === "paused"
+                            ? "bg-yellow-400"
+                            : agent.status === "error"
+                              ? "bg-red-400"
+                              : "bg-neutral-400"
+                      }`}
+                    />
+                  </span>
+                }
+                trailing={
                   <div className="flex items-center gap-3">
-                    <span className="text-sm text-muted-foreground">
-                      {formatCents(agent.spentMonthlyCents)} / {formatCents(agent.budgetMonthlyCents)}
-                    </span>
+                    <div className="flex items-center gap-1.5">
+                      <div className="w-16 h-1.5 bg-muted rounded-full overflow-hidden">
+                        <div
+                          className={`h-full rounded-full ${
+                            budgetPct > 90
+                              ? "bg-red-400"
+                              : budgetPct > 70
+                                ? "bg-yellow-400"
+                                : "bg-green-400"
+                          }`}
+                          style={{ width: `${Math.min(100, budgetPct)}%` }}
+                        />
+                      </div>
+                      <span className="text-xs text-muted-foreground w-20 text-right">
+                        {formatCents(agent.spentMonthlyCents)} / {formatCents(agent.budgetMonthlyCents)}
+                      </span>
+                    </div>
                     <StatusBadge status={agent.status} />
                   </div>
-                </div>
-                <div className="flex gap-2">
-                  <Button variant="outline" size="sm" onClick={() => invoke(agent.id)}>
-                    Invoke
-                  </Button>
-                  <Button variant="outline" size="sm" onClick={() => pause(agent.id)}>
-                    Pause
-                  </Button>
-                  <Button variant="outline" size="sm" onClick={() => resume(agent.id)}>
-                    Resume
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
-          ))}
+                }
+              />
+            );
+          })}
         </div>
       )}
     </div>