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>
2026-02-17 09:57:06 -06:00
parent fad1bd27ce
commit f4339668f3
22 changed files with 1833 additions and 293 deletions
--- a/ui/src/pages/GoalDetail.tsx
+++ b/ui/src/pages/GoalDetail.tsx
@@ -0,0 +1,113 @@
+import { useCallback, useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { goalsApi } from "../api/goals";
+import { projectsApi } from "../api/projects";
+import { useApi } from "../hooks/useApi";
+import { usePanel } from "../context/PanelContext";
+import { useCompany } from "../context/CompanyContext";
+import { useBreadcrumbs } from "../context/BreadcrumbContext";
+import { GoalProperties } from "../components/GoalProperties";
+import { GoalTree } from "../components/GoalTree";
+import { StatusBadge } from "../components/StatusBadge";
+import { EntityRow } from "../components/EntityRow";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type { Goal, Project } from "@paperclip/shared";
+
+export function GoalDetail() {
+  const { goalId } = useParams<{ goalId: string }>();
+  const { selectedCompanyId } = useCompany();
+  const { openPanel, closePanel } = usePanel();
+  const { setBreadcrumbs } = useBreadcrumbs();
+  const navigate = useNavigate();
+
+  const goalFetcher = useCallback(() => {
+    if (!goalId) return Promise.reject(new Error("No goal ID"));
+    return goalsApi.get(goalId);
+  }, [goalId]);
+
+  const allGoalsFetcher = useCallback(() => {
+    if (!selectedCompanyId) return Promise.resolve([] as Goal[]);
+    return goalsApi.list(selectedCompanyId);
+  }, [selectedCompanyId]);
+
+  const projectsFetcher = useCallback(() => {
+    if (!selectedCompanyId) return Promise.resolve([] as Project[]);
+    return projectsApi.list(selectedCompanyId);
+  }, [selectedCompanyId]);
+
+  const { data: goal, loading, error } = useApi(goalFetcher);
+  const { data: allGoals } = useApi(allGoalsFetcher);
+  const { data: allProjects } = useApi(projectsFetcher);
+
+  const childGoals = (allGoals ?? []).filter((g) => g.parentId === goalId);
+  const linkedProjects = (allProjects ?? []).filter((p) => p.goalId === goalId);
+
+  useEffect(() => {
+    setBreadcrumbs([
+      { label: "Goals", href: "/goals" },
+      { label: goal?.title ?? goalId ?? "Goal" },
+    ]);
+  }, [setBreadcrumbs, goal, goalId]);
+
+  useEffect(() => {
+    if (goal) {
+      openPanel(<GoalProperties goal={goal} />);
+    }
+    return () => closePanel();
+  }, [goal]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  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 (!goal) return null;
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <div className="flex items-center gap-2">
+          <span className="text-xs uppercase text-muted-foreground">{goal.level}</span>
+          <StatusBadge status={goal.status} />
+        </div>
+        <h2 className="text-xl font-bold mt-1">{goal.title}</h2>
+        {goal.description && (
+          <p className="text-sm text-muted-foreground mt-1">{goal.description}</p>
+        )}
+      </div>
+
+      <Tabs defaultValue="children">
+        <TabsList>
+          <TabsTrigger value="children">Sub-Goals ({childGoals.length})</TabsTrigger>
+          <TabsTrigger value="projects">Projects ({linkedProjects.length})</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="children" className="mt-4">
+          {childGoals.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No sub-goals.</p>
+          ) : (
+            <GoalTree
+              goals={childGoals}
+              onSelect={(g) => navigate(`/goals/${g.id}`)}
+            />
+          )}
+        </TabsContent>
+
+        <TabsContent value="projects" className="mt-4">
+          {linkedProjects.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No linked projects.</p>
+          ) : (
+            <div className="border border-border rounded-md">
+              {linkedProjects.map((project) => (
+                <EntityRow
+                  key={project.id}
+                  title={project.name}
+                  subtitle={project.description ?? undefined}
+                  onClick={() => navigate(`/projects/${project.id}`)}
+                  trailing={<StatusBadge status={project.status} />}
+                />
+              ))}
+            </div>
+          )}
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}