Adds runs and filters

Author: Mbeaulne

src/components/shared/PipelineRunFiltersBar/PipelineRunFiltersBar.tsx

@@ -221,8 +221,8 @@ export function PipelineRunFiltersBar({
           />
         </div>
 
-        {/* Annotation Filter - inline */}
-        {!isAnnotationExpanded ? (
+        {/* Annotation Filter button */}
+        {!isAnnotationExpanded && (
           <Button
             variant="outline"
             size="sm"
@@ -232,45 +232,48 @@ export function PipelineRunFiltersBar({
             <Icon name="Plus" size="xs" className="mr-1" />
             Annotation
           </Button>
-        ) : (
-          <InlineStack gap="1" align="center" className="shrink-0">
-            <Input
-              placeholder="Key"
-              value={annotationKeyInput}
-              onChange={(e) => setAnnotationKeyInput(e.target.value)}
-              onEnter={handleAddAnnotation}
-              onEscape={handleCancelAnnotation}
-              className="w-28 h-8 text-sm"
-              autoFocus
-            />
-            <Input
-              placeholder="Value (optional)"
-              value={annotationValueInput}
-              onChange={(e) => setAnnotationValueInput(e.target.value)}
-              onEnter={handleAddAnnotation}
-              onEscape={handleCancelAnnotation}
-              className="w-36 h-8 text-sm"
-            />
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleAddAnnotation}
-              disabled={!annotationKeyInput.trim()}
-            >
-              Add
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={handleCancelAnnotation}
-              aria-label="Cancel"
-            >
-              <Icon name="X" size="xs" />
-            </Button>
-          </InlineStack>
         )}
       </InlineStack>
 
+      {/* Annotation input row - rendered below to avoid overflow */}
+      {isAnnotationExpanded && (
+        <InlineStack gap="1" align="center">
+          <Input
+            placeholder="Key"
+            value={annotationKeyInput}
+            onChange={(e) => setAnnotationKeyInput(e.target.value)}
+            onEnter={handleAddAnnotation}
+            onEscape={handleCancelAnnotation}
+            className="w-28 h-8 text-sm"
+            autoFocus
+          />
+          <Input
+            placeholder="Value (optional)"
+            value={annotationValueInput}
+            onChange={(e) => setAnnotationValueInput(e.target.value)}
+            onEnter={handleAddAnnotation}
+            onEscape={handleCancelAnnotation}
+            className="w-36 h-8 text-sm"
+          />
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleAddAnnotation}
+            disabled={!annotationKeyInput.trim()}
+          >
+            Add
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleCancelAnnotation}
+            aria-label="Cancel"
+          >
+            <Icon name="X" size="xs" />
+          </Button>
+        </InlineStack>
+      )}
+
       {/* Row 2: Active Filters & Count */}
       {(hasActiveFilters || totalCount !== undefined) && (
         <InlineStack gap="2" align="center" blockAlign="center">

src/routes/Dashboard/DashboardRunsView.tsx

@@ -0,0 +1,16 @@
+import { RunSection } from "@/components/Home/RunSection/RunSection";
+import { PipelineRunFiltersBar } from "@/components/shared/PipelineRunFiltersBar/PipelineRunFiltersBar";
+import { BlockStack } from "@/components/ui/layout";
+import { Text } from "@/components/ui/typography";
+
+export function DashboardRunsView() {
+  return (
+    <BlockStack gap="4">
+      <Text as="h2" size="lg" weight="semibold">
+        Runs
+      </Text>
+      <PipelineRunFiltersBar />
+      <RunSection hideFilters />
+    </BlockStack>
+  );
+}

src/routes/router.ts

@@ -20,6 +20,7 @@ import RootLayout from "../components/layout/RootLayout";
 import { DashboardFavoritesView } from "./Dashboard/DashboardFavoritesView";
 import { DashboardLayout } from "./Dashboard/DashboardLayout";
 import { DashboardRecentlyViewedView } from "./Dashboard/DashboardRecentlyViewedView";
+import { DashboardRunsView } from "./Dashboard/DashboardRunsView";
 import Editor from "./Editor";
 import Home from "./Home";
 import { ImportPage } from "./Import";
@@ -112,7 +113,7 @@ const ComingSoon = () => null;
 const dashboardRunsRoute = createRoute({
   getParentRoute: () => dashboardRoute,
   path: "/runs",
-  component: ComingSoon,
+  component: DashboardRunsView,
 });
 
 const dashboardPipelinesRoute = createRoute({