Feat: Add agent page. #3221 (#5179)

### What problem does this PR solve?

Feat: Add agent page. #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agents/index.tsx

@@ -0,0 +1,24 @@
+import ListFilterBar from '@/components/list-filter-bar';
+import { useFetchFlowList } from '@/hooks/flow-hooks';
+import { Plus } from 'lucide-react';
+import { AgentCard } from './agent-card';
+
+export default function Agent() {
+  const { data } = useFetchFlowList();
+
+  return (
+    <section>
+      <div className="px-8 pt-8">
+        <ListFilterBar title="Agents">
+          <Plus className="mr-2 h-4 w-4" />
+          Create app
+        </ListFilterBar>
+      </div>
+      <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 max-h-[84vh] overflow-auto px-8">
+        {data.map((x) => {
+          return <AgentCard key={x.id} data={x}></AgentCard>;
+        })}
+      </div>
+    </section>
+  );
+}