feat(web): add custom file download button for runs output

web/src/components/LoadingIcon.tsx

@@ -3,5 +3,5 @@ import { LoaderIcon } from "lucide-react";
 import * as React from "react";
 
 export function LoadingIcon() {
-  return <LoaderIcon size={14} className="ml-2 animate-spin" />;
+  return <LoaderIcon size={14} className="animate-spin" />;
 }

web/src/components/OutputRender.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { Download } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { getFileDownloadUrl } from "@/server/getFileDownloadUrl";
+
+
+export function OutputRender(props: { run_id: string; filename: string; }) {
+  if (props.filename.endsWith(".png")) {
+    return (
+      <img
+        className="max-w-[200px]"
+        alt={props.filename}
+        src={`/api/view?file=${encodeURIComponent(
+          `outputs/runs/${props.run_id}/${props.filename}`
+        )}`} />
+    );
+  } else {
+    return <Button className="gap-2" onClick={async () => {
+      const url = await getFileDownloadUrl(`outputs/runs/${props.run_id}/${props.filename}`);
+
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = props.filename;
+      a.target = '_blank'; // Add this line
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    }}>Download <Download size={14} /></Button>;
+  }
+}

web/src/components/RunDisplay.tsx

@@ -1,3 +1,4 @@
+
 import { RunInputs } from "@/components/RunInputs";
 import { LiveStatus } from "./LiveStatus";
 import { RunOutputs } from "@/components/RunOutputs";
@@ -51,17 +52,3 @@ export async function RunDisplay({
     </Dialog>
   );
 }
-
-export function OutputRender(props: { run_id: string; filename: string }) {
-  if (props.filename.endsWith(".png")) {
-    return (
-      <img
-        className="max-w-[200px]"
-        alt={props.filename}
-        src={`/api/view?file=${encodeURIComponent(
-          `outputs/runs/${props.run_id}/${props.filename}`
-        )}`}
-      />
-    );
-  }
-}

web/src/components/RunInputs.tsx

@@ -1,4 +1,4 @@
-import { OutputRender } from "./RunDisplay";
+import { OutputRender } from "./OutputRender";
 import { CodeBlock } from "@/components/CodeBlock";
 import {
   Table,

web/src/components/RunOutputs.tsx

@@ -1,4 +1,4 @@
-import { OutputRender } from "./RunDisplay";
+import { OutputRender } from "./OutputRender";
 import { CodeBlock } from "@/components/CodeBlock";
 import {
   Table,

web/src/components/VersionSelect.tsx

@@ -128,7 +128,7 @@ export function RunWorkflowButton({
         }
       }}
     >
-      Run <Play size={14} /> {isLoading && <LoadingIcon />}
+      Run  {isLoading ?  <LoadingIcon /> : <Play size={14} />}
     </Button>
   );
 }
@@ -155,7 +155,7 @@ export function CreateDeploymentButton({
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button className="gap-2" disabled={isLoading} variant="outline">
-          Deploy <MoreVertical size={14} /> {isLoading && <LoadingIcon />}
+          Deploy  {isLoading ? <LoadingIcon /> : <MoreVertical size={14} /> }
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56">