diff --git a/apps/web/src/routes/agents.tsx b/apps/web/src/routes/agents.tsx
index 260d2d6..399fe7a 100644
--- a/apps/web/src/routes/agents.tsx
+++ b/apps/web/src/routes/agents.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { createFileRoute, useNavigate, useSearch } from "@tanstack/react-router";
 import { AlertCircle, RefreshCw } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
@@ -15,15 +15,21 @@ import { modeLabel } from "@/lib/labels";
 import { StatusDot } from "@/components/StatusDot";
 import { useLiveUpdates } from "@/hooks";
 
+type StatusFilter = "all" | "running" | "questions" | "exited" | "dismissed";
+const STATUS_FILTERS = ["all", "running", "questions", "exited", "dismissed"] as const;
+
 export const Route = createFileRoute("/agents")({
   component: AgentsPage,
+  validateSearch: (search: Record<string, unknown>) => ({
+    filter: STATUS_FILTERS.includes(search.filter as StatusFilter)
+      ? (search.filter as StatusFilter)
+      : "questions",
+  }),
 });
 
-type StatusFilter = "all" | "running" | "questions" | "exited" | "dismissed";
-
 function AgentsPage() {
   const [selectedAgentId, setSelectedAgentId] = useState<string | null>(null);
-  const [filter, setFilter] = useState<StatusFilter>("all");
+  const { filter } = useSearch({ from: "/agents" });
   const navigate = useNavigate();
 
   // Live updates
@@ -196,7 +202,7 @@ function AgentsPage() {
               variant={filter === opt.value ? "default" : "outline"}
               size="sm"
               className="h-7 px-2 text-xs"
-              onClick={() => setFilter(opt.value)}
+              onClick={() => navigate({ to: "/agents", search: { filter: opt.value } })}
             >
               {opt.label}
               <Badge