fix: show save button in VRL snippet form (#17)

* fix: show save button in VRL snippet form

Hide the snippet list when the creation form is open so the
Cancel/Create buttons aren't clipped by the container overflow.

* feat: embed dev-SHA version in agent Docker image

Use dev-<sha> version string in Docker agent builds to match the
binary release format, enabling proper version detection in the
fleet UI. The image still uses a single rolling 'dev' tag.

* fix: clamp reduction percentage to zero minimum

When sinks retry failed events, eventsOut can exceed eventsIn,
producing negative reduction values like -201%. Clamp to 0%.

* fix: navigate to list page when switching environment on detail view

When changing environment while viewing a pipeline editor or fleet
detail page, redirect to the parent list page to avoid showing
stale data from a different environment.

* fix: remove height constraint when snippet form is open

Apply max-h-64 and overflow-hidden only when browsing snippets.
When the form is open, remove constraints so buttons are visible.

Author: TerrifiedBug

.github/workflows/ci.yml

@@ -123,7 +123,7 @@ jobs:
           if [[ "$GITHUB_REF" == refs/tags/v* ]]; then
             echo "value=${GITHUB_REF_NAME#v}" >> "$GITHUB_OUTPUT"
           else
-            echo "value=dev" >> "$GITHUB_OUTPUT"
+            echo "value=dev-${GITHUB_SHA::7}" >> "$GITHUB_OUTPUT"
           fi
 
       - uses: docker/setup-buildx-action@v3

src/app/(dashboard)/pipelines/page.tsx

@@ -71,7 +71,7 @@ function getReductionPercent(totals: { eventsIn: bigint; eventsOut: bigint }): n
   const evIn = Number(totals.eventsIn);
   const evOut = Number(totals.eventsOut);
   if (evIn === 0) return null;
-  return (1 - evOut / evIn) * 100;
+  return Math.max(0, (1 - evOut / evIn) * 100);
 }
 
 function reductionColor(pct: number): string {

src/components/environment-selector.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useCallback } from "react";
 import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
 import { useTRPC } from "@/trpc/client";
 import { useEnvironmentStore } from "@/stores/environment-store";
@@ -23,6 +24,18 @@ export function EnvironmentSelector() {
   const { selectedEnvironmentId, setSelectedEnvironmentId, setIsSystemEnvironment } =
     useEnvironmentStore();
   const selectedTeamId = useTeamStore((s) => s.selectedTeamId);
+  const pathname = usePathname();
+  const router = useRouter();
+
+  // Navigate back to list pages when switching environments from a detail page
+  const handleEnvironmentChange = useCallback((id: string) => {
+    setSelectedEnvironmentId(id);
+    const detailRoutes = ["/pipelines/", "/fleet/"];
+    if (detailRoutes.some((route) => pathname.startsWith(route) && pathname !== route)) {
+      const parentRoute = detailRoutes.find((route) => pathname.startsWith(route));
+      if (parentRoute) router.push(parentRoute.replace(/\/$/, ""));
+    }
+  }, [setSelectedEnvironmentId, pathname, router]);
 
   const envsQuery = useQuery(
     trpc.environment.list.queryOptions(
@@ -79,7 +92,7 @@ export function EnvironmentSelector() {
   return (
     <Select
       value={selectedEnvironmentId ?? ""}
-      onValueChange={setSelectedEnvironmentId}
+      onValueChange={handleEnvironmentChange}
     >
       <SelectTrigger className="h-8 w-[180px] text-xs">
         <Layers className="mr-1.5 h-3.5 w-3.5 text-muted-foreground" />

src/components/flow/vrl-snippet-drawer.tsx

@@ -125,7 +125,7 @@ export function VrlSnippetDrawer({ onInsert }: VrlSnippetDrawerProps) {
   };
 
   return (
-    <div className="flex max-h-64 w-full flex-col overflow-hidden rounded border bg-muted/20">
+    <div className={`flex w-full flex-col rounded border bg-muted/20 ${showForm ? "" : "max-h-64 overflow-hidden"}`}>
       <div className="border-b p-2 flex items-center gap-2">
         <div className="relative flex-1">
           <Search className="absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
@@ -190,7 +190,7 @@ export function VrlSnippetDrawer({ onInsert }: VrlSnippetDrawerProps) {
           </div>
         </div>
       )}
-      <ScrollArea className="flex-1 min-h-0">
+      {!showForm && <ScrollArea className="flex-1 min-h-0">
         <div className="p-1">
           {grouped.size === 0 && (
             <p className="p-3 text-center text-xs text-muted-foreground">
@@ -256,7 +256,7 @@ export function VrlSnippetDrawer({ onInsert }: VrlSnippetDrawerProps) {
             </div>
           ))}
         </div>
-      </ScrollArea>
+      </ScrollArea>}
     </div>
   );
 }

src/server/routers/dashboard.ts

@@ -42,7 +42,7 @@ export const dashboardRouter = router({
       const totalEventsIn = Number(reductionMetrics._sum.eventsIn ?? 0);
       const totalEventsOut = Number(reductionMetrics._sum.eventsOut ?? 0);
       const reductionPercent = totalEventsIn > 0
-        ? (1 - totalEventsOut / totalEventsIn) * 100
+        ? Math.max(0, (1 - totalEventsOut / totalEventsIn) * 100)
         : null;
 
       return {