diff --git a/src/components/Home/PipelineSection/PipelineFiltersBar.tsx b/src/components/Home/PipelineSection/PipelineFiltersBar.tsx
new file mode 100644
index 000000000..a80efc4eb
--- /dev/null
+++ b/src/components/Home/PipelineSection/PipelineFiltersBar.tsx
@@ -0,0 +1,260 @@
+import { format } from "date-fns";
+import type { ReactNode } from "react";
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { DatePickerWithRange } from "@/components/ui/date-picker";
+import { Icon } from "@/components/ui/icon";
+import { Input } from "@/components/ui/input";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Text } from "@/components/ui/typography";
+
+import type { FilterBarProps, PipelineSortField } from "./usePipelineFilters";
+
+const SORT_FIELD_OPTIONS: { value: PipelineSortField; label: string }[] = [
+  { value: "modified_at", label: "Date" },
+  { value: "name", label: "Name" },
+];
+
+function isValidSortField(value: string): value is PipelineSortField {
+  return SORT_FIELD_OPTIONS.some((opt) => opt.value === value);
+}
+
+interface PipelineFiltersBarProps {
+  filters: FilterBarProps;
+  actions?: ReactNode;
+}
+
+export function PipelineFiltersBar({
+  filters,
+  actions,
+}: PipelineFiltersBarProps) {
+  const {
+    searchQuery,
+    setSearchQuery,
+    dateRange,
+    setDateRange,
+    sortField,
+    setSortField,
+    sortDirection,
+    setSortDirection,
+    componentQuery,
+    setComponentQuery,
+    hasActiveFilters,
+    activeFilterCount,
+    clearFilters,
+    totalCount,
+    filteredCount,
+  } = filters;
+  const [isAdvancedOpen, setIsAdvancedOpen] = useState(false);
+
+  const isSortDescending = sortDirection === "desc";
+
+  const handleSortFieldChange = (value: string) => {
+    if (isValidSortField(value)) setSortField(value);
+  };
+
+  const toggleSortDirection = () => {
+    setSortDirection(isSortDescending ? "asc" : "desc");
+  };
+
+  const allBadges: Array<{
+    key: string;
+    label: string;
+    onRemove: () => void;
+  }> = [];
+
+  if (searchQuery) {
+    allBadges.push({
+      key: "search",
+      label: `Search: ${searchQuery}`,
+      onRemove: () => setSearchQuery(""),
+    });
+  }
+
+  if (dateRange?.from || dateRange?.to) {
+    const fromStr = dateRange.from ? format(dateRange.from, "MMM d") : "";
+    const toStr = dateRange.to ? format(dateRange.to, "MMM d") : "";
+    const separator = fromStr && toStr ? " – " : "";
+    allBadges.push({
+      key: "date_range",
+      label: `${fromStr}${separator}${toStr}`,
+      onRemove: () => setDateRange(undefined),
+    });
+  }
+
+  if (componentQuery) {
+    allBadges.push({
+      key: "component",
+      label: `Component: ${componentQuery}`,
+      onRemove: () => setComponentQuery(""),
+    });
+  }
+
+  return (
+    <Collapsible open={isAdvancedOpen} onOpenChange={setIsAdvancedOpen}>
+      <BlockStack gap="3">
+        {/* Row 1: Basic Filters */}
+        <InlineStack gap="3" align="center">
+          {/* Search */}
+          <div className="relative flex-1 min-w-0">
+            <Icon
+              name="Search"
+              className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+            />
+            <Input
+              placeholder="Search..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-9 pr-8 w-full"
+            />
+            {searchQuery && (
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setSearchQuery("")}
+                className="absolute right-2 top-1/2 -translate-y-1/2 size-6 text-muted-foreground hover:text-foreground"
+                aria-label="Clear search"
+              >
+                <Icon name="X" size="sm" />
+              </Button>
+            )}
+          </div>
+
+          {/* Date Range */}
+          <div className="shrink-0">
+            <DatePickerWithRange
+              value={dateRange}
+              onChange={setDateRange}
+              placeholder="Last edited range"
+            />
+          </div>
+
+          {/* Sort Controls */}
+          <InlineStack gap="1" align="center" className="shrink-0">
+            <Select value={sortField} onValueChange={handleSortFieldChange}>
+              <SelectTrigger className="w-24">
+                <SelectValue placeholder="Sort" />
+              </SelectTrigger>
+              <SelectContent>
+                {SORT_FIELD_OPTIONS.map((opt) => (
+                  <SelectItem key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Button variant="ghost" size="icon" onClick={toggleSortDirection}>
+              {isSortDescending ? (
+                <Icon name="ArrowDownAZ" />
+              ) : (
+                <Icon name="ArrowUpAZ" />
+              )}
+            </Button>
+          </InlineStack>
+
+          {/* Advanced Toggle */}
+          <CollapsibleTrigger asChild>
+            <Button
+              variant={componentQuery ? "secondary" : "outline"}
+              size="sm"
+              className="shrink-0"
+            >
+              Advanced
+              {componentQuery && (
+                <Badge variant="secondary" className="ml-1.5 h-5 min-w-5 px-1">
+                  1
+                </Badge>
+              )}
+              {isAdvancedOpen ? (
+                <Icon name="ChevronUp" className="ml-1" />
+              ) : (
+                <Icon name="ChevronDown" className="ml-1" />
+              )}
+            </Button>
+          </CollapsibleTrigger>
+
+          {actions}
+        </InlineStack>
+
+        {/* Row 2: Advanced (Collapsible) */}
+        <CollapsibleContent>
+          <BlockStack
+            gap="2"
+            className="rounded-md border bg-muted/30 px-4 py-3"
+          >
+            <Text size="sm" weight="semibold">
+              Contains component
+            </Text>
+            <InlineStack align="start">
+              <Input
+                placeholder="Component name..."
+                value={componentQuery}
+                onChange={(e) => setComponentQuery(e.target.value)}
+                className="pr-8 w-xs"
+              />
+              {componentQuery && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setComponentQuery("")}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 size-6 text-muted-foreground hover:text-foreground"
+                  aria-label="Clear component filter"
+                >
+                  <Icon name="X" size="sm" />
+                </Button>
+              )}
+            </InlineStack>
+          </BlockStack>
+        </CollapsibleContent>
+
+        {/* Row 3: Count + Active filter badges */}
+        {(hasActiveFilters || totalCount > 0) && (
+          <InlineStack gap="2" align="center" blockAlign="center">
+            <Text size="sm" tone="subdued">
+              Showing {filteredCount} of {totalCount} pipelines
+            </Text>
+
+            <div className="flex-1" />
+
+            {hasActiveFilters && (
+              <InlineStack gap="2" align="center">
+                {allBadges.map((badge) => (
+                  <Badge key={badge.key} variant="outline">
+                    {badge.label}
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={badge.onRemove}
+                      className="ml-1 size-4 hover:text-destructive hover:bg-transparent"
+                      aria-label={`Remove ${badge.label} filter`}
+                    >
+                      <Icon name="X" size="xs" />
+                    </Button>
+                  </Badge>
+                ))}
+
+                <Button variant="ghost" size="sm" onClick={clearFilters}>
+                  Clear all ({activeFilterCount})
+                </Button>
+              </InlineStack>
+            )}
+          </InlineStack>
+        )}
+      </BlockStack>
+    </Collapsible>
+  );
+}
diff --git a/src/components/Home/PipelineSection/PipelineSection.tsx b/src/components/Home/PipelineSection/PipelineSection.tsx
index 8962b422e..34a2d0f88 100644
--- a/src/components/Home/PipelineSection/PipelineSection.tsx
+++ b/src/components/Home/PipelineSection/PipelineSection.tsx
@@ -1,5 +1,5 @@
 import { Link } from "@tanstack/react-router";
-import { type ChangeEvent, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 import { LoadingScreen } from "@/components/shared/LoadingScreen";
 import NewPipelineButton from "@/components/shared/NewPipelineButton";
@@ -9,13 +9,12 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Icon } from "@/components/ui/icon";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
   Table,
   TableBody,
+  TableCell,
   TableHead,
   TableHeader,
   TableRow,
@@ -29,83 +28,75 @@ import {
 import { USER_PIPELINES_LIST_NAME } from "@/utils/constants";
 
 import BulkActionsBar from "./BulkActionsBar";
+import { PipelineFiltersBar } from "./PipelineFiltersBar";
 import PipelineRow from "./PipelineRow";
+import { usePipelineFilters } from "./usePipelineFilters";
 
 const DEFAULT_PAGE_SIZE = 10;
 
-function usePagination<T>(items: T[], pageSize = DEFAULT_PAGE_SIZE) {
+function usePagination<T>(
+  items: T[],
+  pageSize = DEFAULT_PAGE_SIZE,
+  resetKey = "",
+) {
   const [currentPage, setCurrentPage] = useState(1);
 
-  const totalPages = Math.ceil(items.length / pageSize);
-
-  const startIndex = (currentPage - 1) * pageSize;
-  const endIndex = startIndex + pageSize;
-
-  const paginatedItems = items.slice(startIndex, endIndex);
-
-  const goToNextPage = () => {
-    setCurrentPage((p) => Math.min(totalPages, p + 1));
-  };
-
-  const goToPreviousPage = () => {
-    setCurrentPage((p) => Math.max(1, p - 1));
-  };
-
-  const resetPage = () => {
+  useEffect(() => {
     setCurrentPage(1);
-  };
+  }, [resetKey]);
+
+  const totalPages = Math.ceil(items.length / pageSize);
+  const safePage = Math.min(currentPage, totalPages || 1);
+  const paginatedItems = items.slice(
+    (safePage - 1) * pageSize,
+    safePage * pageSize,
+  );
 
   return {
     paginatedItems,
-    currentPage,
+    currentPage: safePage,
     totalPages,
-    hasNextPage: currentPage < totalPages,
-    hasPreviousPage: currentPage > 1,
-    goToNextPage,
-    goToPreviousPage,
-    resetPage,
+    hasNextPage: safePage < totalPages,
+    hasPreviousPage: safePage > 1,
+    goToNextPage: () => setCurrentPage((p) => Math.min(totalPages, p + 1)),
+    goToPreviousPage: () => setCurrentPage((p) => Math.max(1, p - 1)),
+    resetPage: () => setCurrentPage(1),
   };
 }
 
 type Pipelines = Map<string, ComponentFileEntry>;
 
-const PipelineSectionSkeleton = () => {
-  return (
-    <BlockStack className="h-full" gap="3">
-      <BlockStack>
-        <InlineStack gap="2" align="space-between" className="w-full">
-          <Skeleton size="lg" shape="button" />
-          <Skeleton size="lg" shape="button" />
-          <Skeleton size="lg" shape="button" />
-        </InlineStack>
+const PipelineSectionSkeleton = () => (
+  <BlockStack className="h-full" gap="3">
+    <InlineStack gap="2" align="space-between" className="w-full">
+      <Skeleton size="lg" shape="button" />
+      <Skeleton size="lg" shape="button" />
+      <Skeleton size="lg" shape="button" />
+    </InlineStack>
+    <BlockStack className="h-[40vh] mt-4" gap="2" inlineAlign="space-between">
+      <BlockStack gap="2">
+        <Skeleton size="full" />
+        <Skeleton size="half" />
+        <Skeleton size="full" />
+        <Skeleton size="half" />
+        <Skeleton size="full" />
       </BlockStack>
-      <BlockStack className="h-[40vh] mt-4" gap="2" inlineAlign="space-between">
-        <BlockStack gap="2">
-          <Skeleton size="full" />
-          <Skeleton size="half" />
-          <Skeleton size="full" />
-          <Skeleton size="half" />
-          <Skeleton size="full" />
-        </BlockStack>
-        <BlockStack gap="2" align="end">
-          <Skeleton size="lg" shape="button" />
-        </BlockStack>
+      <BlockStack gap="2" align="end">
+        <Skeleton size="lg" shape="button" />
       </BlockStack>
     </BlockStack>
-  );
-};
+  </BlockStack>
+);
 
 export const PipelineSection = withSuspenseWrapper(() => {
   const [pipelines, setPipelines] = useState<Pipelines>(new Map());
   const [isLoading, setIsLoading] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
   const [selectedPipelines, setSelectedPipelines] = useState<Set<string>>(
     new Set(),
   );
 
-  const filteredPipelines = Array.from(pipelines.entries()).filter(([name]) => {
-    return name.toLowerCase().includes(searchQuery.toLowerCase());
-  });
+  const { filteredPipelines, filterBarProps, filterKey } =
+    usePipelineFilters(pipelines);
 
   const {
     paginatedItems: paginatedPipelines,
@@ -116,23 +107,14 @@ export const PipelineSection = withSuspenseWrapper(() => {
     goToNextPage,
     goToPreviousPage,
     resetPage,
-  } = usePagination(filteredPipelines);
+  } = usePagination(filteredPipelines, DEFAULT_PAGE_SIZE, filterKey);
 
   const fetchUserPipelines = async () => {
     setIsLoading(true);
     try {
-      const pipelines = await getAllComponentFilesFromList(
-        USER_PIPELINES_LIST_NAME,
-      );
-      const sortedPipelines = new Map(
-        [...pipelines.entries()].sort((a, b) => {
-          return (
-            new Date(b[1].modificationTime).getTime() -
-            new Date(a[1].modificationTime).getTime()
-          );
-        }),
+      setPipelines(
+        await getAllComponentFilesFromList(USER_PIPELINES_LIST_NAME),
       );
-      setPipelines(sortedPipelines);
     } catch (error) {
       console.error("Failed to load user pipelines:", error);
     } finally {
@@ -140,42 +122,24 @@ export const PipelineSection = withSuspenseWrapper(() => {
     }
   };
 
-  const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
-    setSearchQuery(e.target.value);
-    resetPage();
-  };
-
   const handleSelectAll = (checked: boolean) => {
-    if (checked) {
-      const allPipelineNames = new Set(filteredPipelines.map(([name]) => name));
-      setSelectedPipelines(allPipelineNames);
-    } else {
-      setSelectedPipelines(new Set());
-    }
-  };
-
-  const handleSelectPipeline = (pipelineName: string, checked: boolean) => {
-    const newSelected = new Set(selectedPipelines);
-    if (checked) {
-      newSelected.add(pipelineName);
-    } else {
-      newSelected.delete(pipelineName);
-    }
-    setSelectedPipelines(newSelected);
+    setSelectedPipelines(
+      checked ? new Set(filteredPipelines.map(([name]) => name)) : new Set(),
+    );
   };
 
-  const handleBulkDelete = () => {
-    setSelectedPipelines(new Set());
-    fetchUserPipelines();
+  const handleSelectPipeline = (name: string, checked: boolean) => {
+    const next = new Set(selectedPipelines);
+    if (checked) next.add(name);
+    else next.delete(name);
+    setSelectedPipelines(next);
   };
 
   useEffect(() => {
     fetchUserPipelines();
   }, []);
 
-  if (isLoading) {
-    return <LoadingScreen message="Loading Pipelines" />;
-  }
+  if (isLoading) return <LoadingScreen message="Loading Pipelines" />;
 
   if (pipelines.size === 0) {
     return (
@@ -185,7 +149,6 @@ export const PipelineSection = withSuspenseWrapper(() => {
             You don&apos;t have any pipelines yet. Get started with a template
             below.
           </Paragraph>
-
           <QuickStartCards />
         </BlockStack>
         <BlockStack align="center" gap="2">
@@ -212,70 +175,50 @@ export const PipelineSection = withSuspenseWrapper(() => {
         </AlertDescription>
       </Alert>
 
-      <InlineStack
-        gap="2"
-        align="space-between"
-        blockAlign="end"
-        wrap="nowrap"
-        className="w-full"
-      >
-        <BlockStack className="w-full">
-          <Label className="mb-2">Search pipelines</Label>
-          <InlineStack gap="1" wrap="nowrap">
-            <Input type="text" value={searchQuery} onChange={handleSearch} />
-            {!!searchQuery && (
-              <Button variant="ghost" onClick={() => setSearchQuery("")}>
-                <Icon name="CircleX" />
-              </Button>
-            )}
-          </InlineStack>
-        </BlockStack>
-
-        <QuickStartButton />
-      </InlineStack>
-
-      {pipelines.size > 0 && (
-        <Table>
-          <TableHeader>
-            <TableRow className="text-xs">
-              <TableHead>
-                <Checkbox
-                  checked={isAllSelected}
-                  onCheckedChange={handleSelectAll}
-                />
-              </TableHead>
-              <TableHead>Title</TableHead>
-              <TableHead>Modified at</TableHead>
-              <TableHead>Last run</TableHead>
-              <TableHead>Runs</TableHead>
-              <TableHead></TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {filteredPipelines.length === 0 && (
-              <TableRow>No Pipelines found.</TableRow>
-            )}
-            {paginatedPipelines.map(([name, fileEntry]) => (
-              <PipelineRow
-                key={fileEntry.componentRef.digest}
-                name={name}
-                modificationTime={fileEntry.modificationTime}
-                onDelete={fetchUserPipelines}
-                isSelected={selectedPipelines.has(name)}
-                onSelect={(checked) => handleSelectPipeline(name, checked)}
+      <PipelineFiltersBar
+        filters={filterBarProps}
+        actions={<QuickStartButton />}
+      />
+
+      <Table>
+        <TableHeader>
+          <TableRow className="text-xs">
+            <TableHead>
+              <Checkbox
+                checked={isAllSelected}
+                onCheckedChange={handleSelectAll}
               />
-            ))}
-          </TableBody>
-        </Table>
-      )}
+            </TableHead>
+            <TableHead>Title</TableHead>
+            <TableHead>Modified at</TableHead>
+            <TableHead>Last run</TableHead>
+            <TableHead>Runs</TableHead>
+            <TableHead />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {filteredPipelines.length === 0 && (
+            <TableRow>
+              <TableCell colSpan={6} className="text-center">
+                No pipelines found.
+              </TableCell>
+            </TableRow>
+          )}
+          {paginatedPipelines.map(([name, fileEntry]) => (
+            <PipelineRow
+              key={fileEntry.componentRef.digest}
+              name={name}
+              modificationTime={fileEntry.modificationTime}
+              onDelete={fetchUserPipelines}
+              isSelected={selectedPipelines.has(name)}
+              onSelect={(checked) => handleSelectPipeline(name, checked)}
+            />
+          ))}
+        </TableBody>
+      </Table>
 
       {totalPages > 1 && (
-        <InlineStack
-          gap="2"
-          align="space-between"
-          blockAlign="center"
-          className="w-full"
-        >
+        <InlineStack gap="2" align="space-between" blockAlign="center">
           <InlineStack gap="2" blockAlign="center">
             <Button
               variant="outline"
@@ -314,7 +257,10 @@ export const PipelineSection = withSuspenseWrapper(() => {
       {selectedPipelines.size > 0 && (
         <BulkActionsBar
           selectedPipelines={Array.from(selectedPipelines)}
-          onDeleteSuccess={handleBulkDelete}
+          onDeleteSuccess={() => {
+            setSelectedPipelines(new Set());
+            fetchUserPipelines();
+          }}
           onClearSelection={() => setSelectedPipelines(new Set())}
         />
       )}
@@ -324,7 +270,7 @@ export const PipelineSection = withSuspenseWrapper(() => {
 
 function QuickStartButton() {
   return (
-    <Button variant="secondary" asChild>
+    <Button variant="secondary" asChild className="shrink-0">
       <Link to={QUICK_START_PATH as string}>
         <Icon name="Sparkles" />
         Example Pipelines
diff --git a/src/components/Home/PipelineSection/usePipelineFilters.ts b/src/components/Home/PipelineSection/usePipelineFilters.ts
new file mode 100644
index 000000000..78b6c6e53
--- /dev/null
+++ b/src/components/Home/PipelineSection/usePipelineFilters.ts
@@ -0,0 +1,150 @@
+import { useState } from "react";
+import type { DateRange } from "react-day-picker";
+
+import { isGraphImplementation } from "@/utils/componentSpec";
+import type { ComponentFileEntry } from "@/utils/componentStore";
+
+export type PipelineSortField = "modified_at" | "name";
+export type PipelineSortDirection = "asc" | "desc";
+
+type PipelineEntry = [string, ComponentFileEntry];
+
+export interface FilterBarProps {
+  searchQuery: string;
+  setSearchQuery: (v: string) => void;
+  dateRange: DateRange | undefined;
+  setDateRange: (v: DateRange | undefined) => void;
+  sortField: PipelineSortField;
+  setSortField: (v: PipelineSortField) => void;
+  sortDirection: PipelineSortDirection;
+  setSortDirection: (v: PipelineSortDirection) => void;
+  componentQuery: string;
+  setComponentQuery: (v: string) => void;
+  hasActiveFilters: boolean;
+  activeFilterCount: number;
+  clearFilters: () => void;
+  totalCount: number;
+  filteredCount: number;
+}
+
+function matchesComponentQuery(
+  fileEntry: ComponentFileEntry,
+  query: string,
+): boolean {
+  if (!query) return true;
+  const impl = fileEntry.componentRef.spec.implementation;
+  if (!isGraphImplementation(impl)) return false;
+  const normalizedQuery = query.toLowerCase();
+  return Object.values(impl.graph.tasks).some((task) => {
+    const refName = task.componentRef.name?.toLowerCase() ?? "";
+    const specName = task.componentRef.spec?.name?.toLowerCase() ?? "";
+    return (
+      refName.includes(normalizedQuery) || specName.includes(normalizedQuery)
+    );
+  });
+}
+
+function matchesSearch(
+  name: string,
+  fileEntry: ComponentFileEntry,
+  query: string,
+): boolean {
+  if (!query) return true;
+  const normalizedQuery = query.toLowerCase();
+  const spec = fileEntry.componentRef.spec;
+  const description = spec.description?.toLowerCase() ?? "";
+  const author = spec.metadata?.annotations?.author?.toLowerCase() ?? "";
+  const rawNotes = spec.metadata?.annotations?.["notes"];
+  const notes = typeof rawNotes === "string" ? rawNotes.toLowerCase() : "";
+  return (
+    name.toLowerCase().includes(normalizedQuery) ||
+    description.includes(normalizedQuery) ||
+    author.includes(normalizedQuery) ||
+    notes.includes(normalizedQuery)
+  );
+}
+
+function matchesDateRange(
+  fileEntry: ComponentFileEntry,
+  dateRange: DateRange | undefined,
+): boolean {
+  if (!dateRange) return true;
+
+  const modificationTime = new Date(fileEntry.modificationTime);
+
+  if (dateRange.from && modificationTime < dateRange.from) return false;
+
+  if (dateRange.to) {
+    const endOfRange = new Date(dateRange.to);
+    endOfRange.setDate(endOfRange.getDate() + 1);
+    if (modificationTime > endOfRange) return false;
+  }
+
+  return true;
+}
+
+export function usePipelineFilters(pipelines: Map<string, ComponentFileEntry>) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [dateRange, setDateRange] = useState<DateRange | undefined>(undefined);
+  const [sortField, setSortField] = useState<PipelineSortField>("modified_at");
+  const [sortDirection, setSortDirection] =
+    useState<PipelineSortDirection>("desc");
+  const [componentQuery, setComponentQuery] = useState("");
+
+  const hasActiveFilters = !!searchQuery || !!dateRange || !!componentQuery;
+  const activeFilterCount = [searchQuery, dateRange, componentQuery].filter(
+    Boolean,
+  ).length;
+
+  const clearFilters = () => {
+    setSearchQuery("");
+    setDateRange(undefined);
+    setComponentQuery("");
+  };
+
+  const filteredPipelines: PipelineEntry[] = Array.from(pipelines.entries())
+    .filter(
+      ([name, fileEntry]) =>
+        matchesSearch(name, fileEntry, searchQuery) &&
+        matchesDateRange(fileEntry, dateRange) &&
+        matchesComponentQuery(fileEntry, componentQuery),
+    )
+    .sort(([nameA, entryA], [nameB, entryB]) => {
+      const dir = sortDirection === "asc" ? 1 : -1;
+      if (sortField === "name") return dir * nameA.localeCompare(nameB);
+      return (
+        dir *
+        (new Date(entryA.modificationTime).getTime() -
+          new Date(entryB.modificationTime).getTime())
+      );
+    });
+
+  const filterKey = [
+    searchQuery,
+    dateRange?.from?.getTime(),
+    dateRange?.to?.getTime(),
+    componentQuery,
+    sortField,
+    sortDirection,
+  ].join("|");
+
+  const filterBarProps: FilterBarProps = {
+    searchQuery,
+    setSearchQuery,
+    dateRange,
+    setDateRange,
+    sortField,
+    setSortField,
+    sortDirection,
+    setSortDirection,
+    componentQuery,
+    setComponentQuery,
+    hasActiveFilters,
+    activeFilterCount,
+    clearFilters,
+    totalCount: pipelines.size,
+    filteredCount: filteredPipelines.length,
+  };
+
+  return { filteredPipelines, filterBarProps, filterKey };
+}