feat: add PriorityBadge component and integrate into TaskRow

- Implemented PriorityBadge component to display task priority with icons.
- Created TaskRow component to represent individual tasks with metadata.
- Added breadcrumb navigation for task hierarchy.
- Enhanced checkbox component to support indeterminate state.
- Introduced InputGroup for better input handling in task search.
- Updated tasks route to utilize new components and improve UI.
- Added empty state representation for task list.

src/renderer/components/projects/ProjectDetail.tsx

@@ -1,4 +1,13 @@
+import { useMemo } from 'react';
+import { Sparkles, FileText, CheckCircle2, Milestone } from 'lucide-react';
 import { trpc } from '@/lib/trpc';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
 
 type ProjectDetailProps = {
   projectId: string;
@@ -6,6 +15,41 @@ type ProjectDetailProps = {
 
 export function ProjectDetail({ projectId }: ProjectDetailProps) {
   const { data: project, isLoading } = trpc.projects.get.useQuery({ id: projectId });
+  const { data: clientsList } = trpc.clients.list.useQuery();
+  const { data: notesList } = trpc.notes.list.useQuery({ projectId });
+  const { data: tasksList } = trpc.tasks.list.useQuery({ projectId });
+  const { data: checkpointsList } = trpc.checkpoints.list.useQuery({ projectId });
+
+  // Build breadcrumb path: Client > Sub-Client
+  const breadcrumbPath = useMemo(() => {
+    if (!project?.clientId || !clientsList) return [];
+
+    const clientMap = new Map(clientsList.map((c) => [c.id, c]));
+    const client = clientMap.get(project.clientId);
+    if (!client) return [];
+
+    // If client has a parent, show parent > client
+    if (client.parentId) {
+      const parent = clientMap.get(client.parentId);
+      if (parent) return [parent.name, client.name];
+    }
+    return [client.name];
+  }, [project?.clientId, clientsList]);
+
+  // Compute stats
+  const notesCount = notesList?.length ?? 0;
+
+  const taskStats = useMemo(() => {
+    const all = tasksList ?? [];
+    const done = all.filter((t) => t.status === 'done').length;
+    return { done, total: all.length };
+  }, [tasksList]);
+
+  const checkpointStats = useMemo(() => {
+    const all = checkpointsList ?? [];
+    const approved = all.filter((c) => c.isApproved === 1).length;
+    return { approved, total: all.length };
+  }, [checkpointsList]);
 
   if (isLoading) {
     return (
@@ -24,11 +68,81 @@ export function ProjectDetail({ projectId }: ProjectDetailProps) {
   }
 
   return (
-    <div className="p-6 max-w-4xl mx-auto">
+    <div className="p-6 max-w-4xl mx-auto flex flex-col gap-6">
+      {/* Breadcrumb */}
+      {breadcrumbPath.length > 0 && (
+        <Breadcrumb>
+          <BreadcrumbList>
+            {breadcrumbPath.map((segment, i) => (
+              <BreadcrumbItem key={i}>
+                {i > 0 && <BreadcrumbSeparator />}
+                <span className="text-muted-foreground">{segment}</span>
+              </BreadcrumbItem>
+            ))}
+          </BreadcrumbList>
+        </Breadcrumb>
+      )}
+
+      {/* Project Name */}
       <h1 className="text-2xl font-semibold text-foreground">{project.name}</h1>
-      <p className="text-sm text-muted-foreground mt-1">
-        Project detail view will be implemented in US-013.
-      </p>
+
+      {/* Stat Cards */}
+      <div className="grid grid-cols-3 gap-4">
+        <Card className="py-4">
+          <CardHeader className="pb-0 pt-0">
+            <div className="flex items-center gap-2">
+              <FileText className="h-5 w-5 text-muted-foreground" />
+              <CardTitle className="text-sm font-medium text-muted-foreground">Notes</CardTitle>
+            </div>
+          </CardHeader>
+          <CardContent className="pt-0">
+            <div className="text-2xl font-semibold">{notesCount}</div>
+          </CardContent>
+        </Card>
+
+        <Card className="py-4">
+          <CardHeader className="pb-0 pt-0">
+            <div className="flex items-center gap-2">
+              <CheckCircle2 className="h-5 w-5 text-muted-foreground" />
+              <CardTitle className="text-sm font-medium text-muted-foreground">Tasks Complete</CardTitle>
+            </div>
+          </CardHeader>
+          <CardContent className="pt-0">
+            <div className="text-2xl font-semibold">
+              {taskStats.done}/{taskStats.total}
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="py-4">
+          <CardHeader className="pb-0 pt-0">
+            <div className="flex items-center gap-2">
+              <Milestone className="h-5 w-5 text-muted-foreground" />
+              <CardTitle className="text-sm font-medium text-muted-foreground">Checkpoints</CardTitle>
+            </div>
+          </CardHeader>
+          <CardContent className="pt-0">
+            <div className="text-2xl font-semibold">
+              {checkpointStats.approved}/{checkpointStats.total}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* AI Project Summary */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Sparkles className="h-5 w-5 text-muted-foreground" />
+            <CardTitle className="text-sm font-medium">AI Project Summary</CardTitle>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            {project.aiSummary || 'AI summary will appear here'}
+          </p>
+        </CardContent>
+      </Card>
     </div>
   );
 }