From 1c983a7ee54887bb4bb8c2f053c9c378fd40cf0b Mon Sep 17 00:00:00 2001
From: Krishna Mohan <krishanmohank974@gmail.com>
Date: Thu, 22 Jan 2026 19:17:15 +0530
Subject: [PATCH 1/5] feat: added the artifect download button, and revamp
 artifect library

Signed-off-by: Krishna Mohan <krishanmohank974@gmail.com>
---
 .../artifacts/RunArtifactsPanel.tsx           | 25 +++++-
 frontend/src/pages/ArtifactLibrary.tsx        | 83 +++++++++++--------
 2 files changed, 69 insertions(+), 39 deletions(-)

diff --git a/frontend/src/components/artifacts/RunArtifactsPanel.tsx b/frontend/src/components/artifacts/RunArtifactsPanel.tsx
index f74aed3e..0eea6a45 100644
--- a/frontend/src/components/artifacts/RunArtifactsPanel.tsx
+++ b/frontend/src/components/artifacts/RunArtifactsPanel.tsx
@@ -146,6 +146,13 @@ export function RunArtifactsPanel({ runId }: RunArtifactsPanelProps) {
     copiedRemoteUri,
   ]);
 
+  const handleDownloadAll = () => {
+    if (!entry || !entry.artifacts.length) return;
+    entry.artifacts.forEach((artifact) => {
+      downloadArtifact(artifact, { runId: runId || undefined });
+    });
+  };
+
   return (
     <div className="flex h-full flex-col">
       <div className="flex items-center justify-between border-b bg-background/70 px-4 py-2">
@@ -168,6 +175,18 @@ export function RunArtifactsPanel({ runId }: RunArtifactsPanelProps) {
             Refresh
           </Button>
         ) : null}
+        {entry?.artifacts && entry.artifacts.length > 0 && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={handleDownloadAll}
+            className="gap-2"
+          >
+            <Download className="h-4 w-4" />
+            Download All
+          </Button>
+        )}
       </div>
       {content}
     </div>
@@ -240,12 +259,12 @@ function ArtifactRow({
       <td className="px-4 py-3 align-top text-sm text-muted-foreground">
         {formatTimestamp(artifact.createdAt)}
       </td>
-      <td className="px-4 py-3 align-top text-right">
+      <td className="px-4 py-3 align-top text-right overflow-x-auto">
         <div className="flex flex-wrap justify-end gap-2">
-          <Button type="button" variant="ghost" size="sm" onClick={onCopy} className="gap-2">
+          {/* <Button type="button" variant="ghost" size="sm" onClick={onCopy} className="gap-2">
             <Copy className="h-4 w-4" />
             {copied ? 'Copied' : 'Copy ID'}
-          </Button>
+          </Button> */}
           <Button
             type="button"
             variant="ghost"
diff --git a/frontend/src/pages/ArtifactLibrary.tsx b/frontend/src/pages/ArtifactLibrary.tsx
index 7148eb33..82d47c24 100644
--- a/frontend/src/pages/ArtifactLibrary.tsx
+++ b/frontend/src/pages/ArtifactLibrary.tsx
@@ -1,6 +1,8 @@
-import { useCallback, useEffect, useState } from 'react';
-import { Download, RefreshCw, Search, Copy, ExternalLink } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Download, RefreshCw, Search, Copy, ExternalLink, Trash2 } from 'lucide-react';
 import { useArtifactStore } from '@/store/artifactStore';
+import { api } from '@/services/api';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import type { ArtifactMetadata } from '@shipsec/shared';
@@ -26,21 +28,25 @@ const formatTimestamp = (value: string) => {
 
 export function ArtifactLibrary() {
   const [searchQuery, setSearchQuery] = useState('');
-  const { library, libraryLoading, libraryError, fetchLibrary, downloadArtifact, downloading } =
+  const { library, libraryLoading, libraryError, fetchLibrary, downloadArtifact,  downloading } =
     useArtifactStore();
-  const [copiedId, setCopiedId] = useState<string | null>(null);
   const [copiedRemoteUri, setCopiedRemoteUri] = useState<string | null>(null);
+  const [workflows, setWorkflows] = useState<Record<string, string>>({});
 
-  const handleCopy = useCallback(async (artifactId: string) => {
-    try {
-      await navigator.clipboard.writeText(artifactId);
-      setCopiedId(artifactId);
-      setTimeout(() => {
-        setCopiedId((current) => (current === artifactId ? null : current));
-      }, 2000);
-    } catch (error) {
-      console.error('Failed to copy artifact ID', error);
-    }
+  useEffect(() => {
+    const loadWorkflows = async () => {
+      try {
+        const list = await api.workflows.list();
+        const map: Record<string, string> = {};
+        list.forEach((w) => {
+          if (w.id) map[w.id] = w.name;
+        });
+        setWorkflows(map);
+      } catch (err) {
+        console.error('Failed to load workflows', err);
+      }
+    };
+    loadWorkflows();
   }, []);
 
   useEffect(() => {
@@ -128,17 +134,17 @@ export function ArtifactLibrary() {
               <thead className="sticky top-0 bg-background shadow-sm">
                 <tr className="text-left text-xs uppercase text-muted-foreground">
                   <th className="px-3 md:px-6 py-3 font-medium min-w-[150px]">Name</th>
+                  <th className="px-3 md:px-4 py-3 font-medium min-w-[150px] hidden sm:table-cell">
+                    Workflow
+                  </th>
                   <th className="px-3 md:px-4 py-3 font-medium min-w-[100px] hidden sm:table-cell">
                     Run
                   </th>
-                  <th className="px-3 md:px-4 py-3 font-medium min-w-[100px] hidden md:table-cell">
-                    Component
-                  </th>
                   <th className="px-3 md:px-4 py-3 font-medium min-w-[60px]">Size</th>
                   <th className="px-3 md:px-4 py-3 font-medium min-w-[100px] hidden lg:table-cell">
                     Created
                   </th>
-                  <th className="px-3 md:px-4 py-3 font-medium min-w-[120px] text-right">
+                  <th className="px-3 md:px-4 py-3 font-medium min-w-[120px] text-left">
                     Actions
                   </th>
                 </tr>
@@ -148,9 +154,8 @@ export function ArtifactLibrary() {
                   <ArtifactLibraryRow
                     key={artifact.id}
                     artifact={artifact}
+                    workflowName={workflows[artifact.workflowId] || 'Unknown Workflow'}
                     onDownload={() => downloadArtifact(artifact)}
-                    onCopy={() => handleCopy(artifact.id)}
-                    copied={copiedId === artifact.id}
                     onCopyRemoteUri={async (uri: string) => {
                       try {
                         await navigator.clipboard.writeText(uri);
@@ -177,17 +182,15 @@ export function ArtifactLibrary() {
 
 function ArtifactLibraryRow({
   artifact,
+  workflowName,
   onDownload,
-  onCopy,
-  copied,
   onCopyRemoteUri,
   copiedRemoteUri,
   isDownloading,
 }: {
   artifact: ArtifactMetadata;
+  workflowName: string;
   onDownload: () => void;
-  onCopy: () => void;
-  copied: boolean;
   onCopyRemoteUri: (uri: string) => void;
   copiedRemoteUri: string | null;
   isDownloading: boolean;
@@ -242,11 +245,15 @@ function ArtifactLibraryRow({
           </div>
         )}
       </td>
-      <td className="px-3 md:px-4 py-3 md:py-4 align-top text-xs md:text-sm text-muted-foreground font-mono hidden sm:table-cell">
-        <span className="truncate max-w-[80px] md:max-w-none block">{artifact.runId}</span>
+      <td className="px-3 md:px-4 py-3 md:py-4 align-top text-xs md:text-sm text-muted-foreground hidden sm:table-cell">
+        <span className="truncate max-w-[150px] block" title={workflowName}>
+          {workflowName}
+        </span>
       </td>
-      <td className="px-3 md:px-4 py-3 md:py-4 align-top text-xs md:text-sm text-muted-foreground hidden md:table-cell">
-        <span className="truncate max-w-[100px] block">{artifact.componentRef}</span>
+      <td className="px-3 md:px-4 py-3 md:py-4 align-top text-xs md:text-sm text-primary hidden sm:table-cell">
+        <Link to={`/runs/${artifact.runId}`} className="hover:underline font-mono">
+          {artifact.runId.substring(0, 8)}…
+        </Link>
       </td>
       <td className="px-3 md:px-4 py-3 md:py-4 align-top text-xs md:text-sm">
         {formatBytes(artifact.size)}
@@ -254,18 +261,22 @@ function ArtifactLibraryRow({
       <td className="px-3 md:px-4 py-3 md:py-4 align-top text-xs md:text-sm text-muted-foreground hidden lg:table-cell">
         {formatTimestamp(artifact.createdAt)}
       </td>
-      <td className="px-3 md:px-4 py-3 md:py-4 align-top text-right">
-        <div className="flex flex-wrap justify-end gap-1 md:gap-2">
-          <Button
+      <td className="px-3 md:px-4 py-3 md:py-4 align-top text-left">
+        <div className="flex flex-wrap justify-start gap-1 md:gap-2">
+          {/* <Button
             type="button"
             variant="ghost"
             size="sm"
-            className="gap-1 md:gap-2 h-8 px-2 md:px-3"
-            onClick={onCopy}
+            className="gap-1 md:gap-2 h-8 px-2 md:px-3 text-destructive hover:text-destructive hover:bg-destructive/10"
+            onClick={() => {
+              if (confirm('Are you sure you want to delete this artifact?')) {
+                onDelete();
+              }
+            }}
           >
-            <Copy className="h-4 w-4" />
-            <span className="hidden md:inline">{copied ? 'Copied' : 'Copy ID'}</span>
-          </Button>
+            <Trash2 className="h-4 w-4" />
+            <span className="hidden md:inline">Delete</span>
+          </Button> */}
           <Button
             type="button"
             variant="ghost"

From 180b08c5a7f947abac3023a9676c8751c6b77ccb Mon Sep 17 00:00:00 2001
From: Krishna Mohan <krishanmohank974@gmail.com>
Date: Thu, 22 Jan 2026 19:19:56 +0530
Subject: [PATCH 2/5] fix: fixed linting issue

Signed-off-by: Krishna Mohan <krishanmohank974@gmail.com>
---
 frontend/src/components/artifacts/RunArtifactsPanel.tsx | 2 --
 frontend/src/pages/ArtifactLibrary.tsx                  | 8 +++-----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/artifacts/RunArtifactsPanel.tsx b/frontend/src/components/artifacts/RunArtifactsPanel.tsx
index 0eea6a45..2953fef3 100644
--- a/frontend/src/components/artifacts/RunArtifactsPanel.tsx
+++ b/frontend/src/components/artifacts/RunArtifactsPanel.tsx
@@ -196,8 +196,6 @@ export function RunArtifactsPanel({ runId }: RunArtifactsPanelProps) {
 function ArtifactRow({
   artifact,
   onDownload,
-  onCopy,
-  copied,
   onCopyRemoteUri,
   copiedRemoteUri,
   isDownloading,
diff --git a/frontend/src/pages/ArtifactLibrary.tsx b/frontend/src/pages/ArtifactLibrary.tsx
index 82d47c24..810478db 100644
--- a/frontend/src/pages/ArtifactLibrary.tsx
+++ b/frontend/src/pages/ArtifactLibrary.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Download, RefreshCw, Search, Copy, ExternalLink, Trash2 } from 'lucide-react';
+import { Download, RefreshCw, Search, Copy, ExternalLink } from 'lucide-react';
 import { useArtifactStore } from '@/store/artifactStore';
 import { api } from '@/services/api';
 import { Button } from '@/components/ui/button';
@@ -28,7 +28,7 @@ const formatTimestamp = (value: string) => {
 
 export function ArtifactLibrary() {
   const [searchQuery, setSearchQuery] = useState('');
-  const { library, libraryLoading, libraryError, fetchLibrary, downloadArtifact,  downloading } =
+  const { library, libraryLoading, libraryError, fetchLibrary, downloadArtifact, downloading } =
     useArtifactStore();
   const [copiedRemoteUri, setCopiedRemoteUri] = useState<string | null>(null);
   const [workflows, setWorkflows] = useState<Record<string, string>>({});
@@ -144,9 +144,7 @@ export function ArtifactLibrary() {
                   <th className="px-3 md:px-4 py-3 font-medium min-w-[100px] hidden lg:table-cell">
                     Created
                   </th>
-                  <th className="px-3 md:px-4 py-3 font-medium min-w-[120px] text-left">
-                    Actions
-                  </th>
+                  <th className="px-3 md:px-4 py-3 font-medium min-w-[120px] text-left">Actions</th>
                 </tr>
               </thead>
               <tbody>

From 127be86e73ed77ded19cb22f7a2e77f6b90ef50d Mon Sep 17 00:00:00 2001
From: Krishna Mohan <krishanmohank974@gmail.com>
Date: Fri, 23 Jan 2026 17:28:56 +0530
Subject: [PATCH 3/5] fix: download button and blank canvas issue

Signed-off-by: Krishna Mohan <krishanmohank974@gmail.com>
---
 backend/src/storage/dto/artifacts.dto.ts           |  7 +++++++
 backend/src/workflows/workflows.controller.ts      |  6 +++---
 .../features/workflow-builder/WorkflowBuilder.tsx  |  5 +++--
 .../hooks/useWorkflowExecutionLifecycle.ts         |  9 +++++++--
 frontend/src/services/api.ts                       | 14 ++++++++++----
 5 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/backend/src/storage/dto/artifacts.dto.ts b/backend/src/storage/dto/artifacts.dto.ts
index dfcf2efe..e465a1ba 100644
--- a/backend/src/storage/dto/artifacts.dto.ts
+++ b/backend/src/storage/dto/artifacts.dto.ts
@@ -17,3 +17,10 @@ export const ArtifactIdParamSchema = z.object({
 });
 
 export class ArtifactIdParamDto extends createZodDto(ArtifactIdParamSchema) {}
+
+// Schema for run artifact downloads where the path param is :artifactId
+export const RunArtifactIdParamSchema = z.object({
+  artifactId: z.string().uuid(),
+});
+
+export class RunArtifactIdParamDto extends createZodDto(RunArtifactIdParamSchema) {}
diff --git a/backend/src/workflows/workflows.controller.ts b/backend/src/workflows/workflows.controller.ts
index d6d1e1e5..f0f9c41d 100644
--- a/backend/src/workflows/workflows.controller.ts
+++ b/backend/src/workflows/workflows.controller.ts
@@ -62,7 +62,7 @@ import { CurrentAuth } from '../auth/auth-context.decorator';
 import type { AuthContext } from '../auth/types';
 import { RequireWorkflowRole, WorkflowRoleGuard } from './workflow-role.guard';
 import { RunArtifactsResponseDto } from '../storage/dto/artifact.dto';
-import { ArtifactIdParamDto, ArtifactIdParamSchema } from '../storage/dto/artifacts.dto';
+import { RunArtifactIdParamDto, RunArtifactIdParamSchema } from '../storage/dto/artifacts.dto';
 import type { WorkflowTerminalRecord } from '../database/schema';
 import { NodeIOService } from '../node-io/node-io.service';
 
@@ -757,14 +757,14 @@ export class WorkflowsController {
   })
   async downloadRunArtifact(
     @Param('runId') runId: string,
-    @Param(new ZodValidationPipe(ArtifactIdParamSchema)) params: ArtifactIdParamDto,
+    @Param(new ZodValidationPipe(RunArtifactIdParamSchema)) params: RunArtifactIdParamDto,
     @CurrentAuth() auth: AuthContext | null,
     @Res({ passthrough: true }) res: Response,
   ) {
     const { artifact, buffer, file } = await this.artifactsService.downloadArtifactForRun(
       auth,
       runId,
-      params.id,
+      params.artifactId,
     );
 
     res.setHeader('Content-Type', file.mimeType);
diff --git a/frontend/src/features/workflow-builder/WorkflowBuilder.tsx b/frontend/src/features/workflow-builder/WorkflowBuilder.tsx
index 6db45d1b..15fdbfb0 100644
--- a/frontend/src/features/workflow-builder/WorkflowBuilder.tsx
+++ b/frontend/src/features/workflow-builder/WorkflowBuilder.tsx
@@ -594,9 +594,10 @@ function WorkflowBuilderContent() {
 
         // Initialize execution state only when there's no run context; otherwise the execution
         // lifecycle hook will load the appropriate version for the routed run.
+        // IMPORTANT: Always initialize when execution nodes are empty to prevent blank canvas.
+        const executionNodesEmpty = executionNodesRef.current.length === 0;
         const shouldInitializeExecution =
-          !hasRunContext &&
-          (executionNodesRef.current.length === 0 || executionEdgesRef.current.length === 0);
+          executionNodesEmpty || (!hasRunContext && executionEdgesRef.current.length === 0);
 
         if (shouldInitializeExecution) {
           setExecutionNodes(cloneNodes(workflowNodes));
diff --git a/frontend/src/features/workflow-builder/hooks/useWorkflowExecutionLifecycle.ts b/frontend/src/features/workflow-builder/hooks/useWorkflowExecutionLifecycle.ts
index e42ae0ed..80a7f837 100644
--- a/frontend/src/features/workflow-builder/hooks/useWorkflowExecutionLifecycle.ts
+++ b/frontend/src/features/workflow-builder/hooks/useWorkflowExecutionLifecycle.ts
@@ -253,7 +253,7 @@ export function useWorkflowExecutionLifecycle({
     // If execution graph is empty when navigating directly to a run, hydrate from the latest
     // design snapshot so the canvas isn't blank while we load the historical version.
     if (executionNodesRef.current.length === 0 && executionEdgesRef.current.length === 0) {
-      if (designSavedSnapshotRef.current) {
+      if (designSavedSnapshotRef.current && designSavedSnapshotRef.current.nodes.length > 0) {
         const savedNodes = cloneNodes(designSavedSnapshotRef.current.nodes);
         const savedEdges = cloneEdges(designSavedSnapshotRef.current.edges);
         const terminalNodes = executionNodesRef.current.filter((n) => n.type === 'terminal');
@@ -263,7 +263,7 @@ export function useWorkflowExecutionLifecycle({
           nodes: cloneNodes(savedNodes),
           edges: cloneEdges(savedEdges),
         };
-      } else {
+      } else if (designNodesRef.current.length > 0) {
         const designNodesCopy = cloneNodes(designNodesRef.current);
         const designEdgesCopy = cloneEdges(designEdgesRef.current);
         const terminalNodes = executionNodesRef.current.filter((n) => n.type === 'terminal');
@@ -273,6 +273,11 @@ export function useWorkflowExecutionLifecycle({
           nodes: cloneNodes(designNodesCopy),
           edges: cloneEdges(designEdgesCopy),
         };
+      } else {
+        // Both execution and design graphs are empty - workflow hasn't loaded yet.
+        // Return early and let the workflow load effect populate the design state first.
+        // This effect will re-run when the design state is populated.
+        return;
       }
     }
 
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index 8dd232fa..93e39ac6 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -604,11 +604,17 @@ export const api = {
     },
 
     downloadArtifact: async (executionId: string, artifactId: string): Promise<Blob> => {
-      try {
-        return await apiClient.downloadWorkflowRunArtifact(executionId, artifactId);
-      } catch (error) {
-        throw new Error(error instanceof Error ? error.message : 'Failed to download artifact');
+      // Use direct fetch instead of typed client due to OpenAPI spec mismatch
+      // (path uses {artifactId} but parameter is named 'id')
+      const headers = await getAuthHeaders();
+      const response = await fetch(
+        `${API_BASE_URL}/api/v1/workflows/runs/${executionId}/artifacts/${artifactId}/download`,
+        { headers },
+      );
+      if (!response.ok) {
+        throw new Error('Failed to download artifact');
       }
+      return await response.blob();
     },
 
     stream: async (

From 734c820992b0b79f30f332ffd46d4799af3320e9 Mon Sep 17 00:00:00 2001
From: Krishna Mohan <krishanmohank974@gmail.com>
Date: Fri, 23 Jan 2026 18:39:08 +0530
Subject: [PATCH 4/5] feat: added artifect delete method in frontend and
 backend both.

Signed-off-by: Krishna Mohan <krishanmohank974@gmail.com>
---
 backend/src/storage/artifacts.controller.ts | 26 ++++++++++++++++++--
 backend/src/storage/artifacts.repository.ts | 10 ++++++++
 backend/src/storage/artifacts.service.ts    | 19 +++++++++++++++
 frontend/src/pages/ArtifactLibrary.tsx      | 27 ++++++++++++++++-----
 frontend/src/services/api.ts                | 11 +++++++++
 frontend/src/store/artifactStore.ts         | 23 ++++++++++++++++++
 6 files changed, 108 insertions(+), 8 deletions(-)

diff --git a/backend/src/storage/artifacts.controller.ts b/backend/src/storage/artifacts.controller.ts
index eb51e1b2..ca5a519d 100644
--- a/backend/src/storage/artifacts.controller.ts
+++ b/backend/src/storage/artifacts.controller.ts
@@ -1,5 +1,15 @@
-import { Controller, Get, Query, Param, Res, StreamableFile } from '@nestjs/common';
-import { ApiOkResponse, ApiTags } from '@nestjs/swagger';
+import {
+  Controller,
+  Get,
+  Delete,
+  Query,
+  Param,
+  Res,
+  StreamableFile,
+  HttpCode,
+  HttpStatus,
+} from '@nestjs/common';
+import { ApiOkResponse, ApiNoContentResponse, ApiTags } from '@nestjs/swagger';
 import { ZodValidationPipe } from 'nestjs-zod';
 import type { Response } from 'express';
 
@@ -60,4 +70,16 @@ export class ArtifactsController {
 
     return new StreamableFile(buffer);
   }
+
+  @Delete(':id')
+  @HttpCode(HttpStatus.NO_CONTENT)
+  @ApiNoContentResponse({
+    description: 'Artifact deleted successfully',
+  })
+  async deleteArtifact(
+    @CurrentAuth() auth: AuthContext | null,
+    @Param(new ZodValidationPipe(ArtifactIdParamSchema)) params: ArtifactIdParamDto,
+  ) {
+    await this.artifactsService.deleteArtifact(auth, params.id);
+  }
 }
diff --git a/backend/src/storage/artifacts.repository.ts b/backend/src/storage/artifacts.repository.ts
index a1eb4388..1fc641c0 100644
--- a/backend/src/storage/artifacts.repository.ts
+++ b/backend/src/storage/artifacts.repository.ts
@@ -88,6 +88,16 @@ export class ArtifactsRepository {
     return and(base, eq(artifactsTable.organizationId, organizationId));
   }
 
+  async delete(id: string, options: { organizationId?: string | null } = {}): Promise<boolean> {
+    const filters = [eq(artifactsTable.id, id)];
+    if (options.organizationId) {
+      filters.push(eq(artifactsTable.organizationId, options.organizationId));
+    }
+    const where = filters.length > 1 ? and(...filters) : filters[0];
+    const result = await this.db.delete(artifactsTable).where(where).returning();
+    return result.length > 0;
+  }
+
   private buildFilters(options: ArtifactQueryOptions) {
     const filters = [];
 
diff --git a/backend/src/storage/artifacts.service.ts b/backend/src/storage/artifacts.service.ts
index cd3cf13b..9d5813a8 100644
--- a/backend/src/storage/artifacts.service.ts
+++ b/backend/src/storage/artifacts.service.ts
@@ -85,6 +85,25 @@ export class ArtifactsService {
     };
   }
 
+  async deleteArtifact(auth: AuthContext | null, artifactId: string): Promise<void> {
+    const artifact = await this.getArtifactRecord(auth, artifactId);
+    const organizationId = this.requireOrganizationId(auth);
+
+    // Delete the associated file first
+    try {
+      await this.filesService.deleteFile(auth, artifact.fileId);
+    } catch (error) {
+      // Log but don't fail if file is already deleted
+      console.warn(`Failed to delete file ${artifact.fileId} for artifact ${artifactId}:`, error);
+    }
+
+    // Delete the artifact record
+    const deleted = await this.repository.delete(artifactId, { organizationId });
+    if (!deleted) {
+      throw new NotFoundException(`Artifact ${artifactId} not found`);
+    }
+  }
+
   private toMetadata(record: ArtifactRecord): ArtifactMetadataDto {
     return {
       id: record.id,
diff --git a/frontend/src/pages/ArtifactLibrary.tsx b/frontend/src/pages/ArtifactLibrary.tsx
index 810478db..e75a8159 100644
--- a/frontend/src/pages/ArtifactLibrary.tsx
+++ b/frontend/src/pages/ArtifactLibrary.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Download, RefreshCw, Search, Copy, ExternalLink } from 'lucide-react';
+import { Download, RefreshCw, Search, Copy, ExternalLink, Trash2 } from 'lucide-react';
 import { useArtifactStore } from '@/store/artifactStore';
 import { api } from '@/services/api';
 import { Button } from '@/components/ui/button';
@@ -28,8 +28,16 @@ const formatTimestamp = (value: string) => {
 
 export function ArtifactLibrary() {
   const [searchQuery, setSearchQuery] = useState('');
-  const { library, libraryLoading, libraryError, fetchLibrary, downloadArtifact, downloading } =
-    useArtifactStore();
+  const {
+    library,
+    libraryLoading,
+    libraryError,
+    fetchLibrary,
+    downloadArtifact,
+    downloading,
+    deleteArtifact,
+    deleting,
+  } = useArtifactStore();
   const [copiedRemoteUri, setCopiedRemoteUri] = useState<string | null>(null);
   const [workflows, setWorkflows] = useState<Record<string, string>>({});
 
@@ -154,6 +162,8 @@ export function ArtifactLibrary() {
                     artifact={artifact}
                     workflowName={workflows[artifact.workflowId] || 'Unknown Workflow'}
                     onDownload={() => downloadArtifact(artifact)}
+                    onDelete={() => deleteArtifact(artifact.id)}
+                    isDeleting={Boolean(deleting[artifact.id])}
                     onCopyRemoteUri={async (uri: string) => {
                       try {
                         await navigator.clipboard.writeText(uri);
@@ -182,16 +192,20 @@ function ArtifactLibraryRow({
   artifact,
   workflowName,
   onDownload,
+  onDelete,
   onCopyRemoteUri,
   copiedRemoteUri,
   isDownloading,
+  isDeleting,
 }: {
   artifact: ArtifactMetadata;
   workflowName: string;
   onDownload: () => void;
+  onDelete: () => void;
   onCopyRemoteUri: (uri: string) => void;
   copiedRemoteUri: string | null;
   isDownloading: boolean;
+  isDeleting: boolean;
 }) {
   const remoteUploads = getRemoteUploads(artifact);
 
@@ -261,7 +275,7 @@ function ArtifactLibraryRow({
       </td>
       <td className="px-3 md:px-4 py-3 md:py-4 align-top text-left">
         <div className="flex flex-wrap justify-start gap-1 md:gap-2">
-          {/* <Button
+          <Button
             type="button"
             variant="ghost"
             size="sm"
@@ -271,10 +285,11 @@ function ArtifactLibraryRow({
                 onDelete();
               }
             }}
+            disabled={isDeleting}
           >
             <Trash2 className="h-4 w-4" />
-            <span className="hidden md:inline">Delete</span>
-          </Button> */}
+            <span className="hidden md:inline">{isDeleting ? 'Deleting…' : 'Delete'}</span>
+          </Button>
           <Button
             type="button"
             variant="ghost"
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index 93e39ac6..006673ed 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -808,6 +808,17 @@ export const api = {
       }
       return await response.blob();
     },
+
+    delete: async (id: string): Promise<void> => {
+      const headers = await getAuthHeaders();
+      const response = await fetch(`${API_BASE_URL}/api/v1/artifacts/${id}`, {
+        method: 'DELETE',
+        headers,
+      });
+      if (!response.ok) {
+        throw new Error('Failed to delete artifact');
+      }
+    },
   },
 
   humanInputs: {
diff --git a/frontend/src/store/artifactStore.ts b/frontend/src/store/artifactStore.ts
index 8be81b49..5b355452 100644
--- a/frontend/src/store/artifactStore.ts
+++ b/frontend/src/store/artifactStore.ts
@@ -16,9 +16,11 @@ interface ArtifactStoreState {
   libraryError: string | null;
   libraryFilters?: ArtifactListFilters;
   downloading: Record<string, boolean>;
+  deleting: Record<string, boolean>;
   fetchRunArtifacts: (runId: string, force?: boolean) => Promise<void>;
   fetchLibrary: (filters?: ArtifactListFilters) => Promise<void>;
   downloadArtifact: (artifact: ArtifactMetadata, options?: { runId?: string }) => Promise<void>;
+  deleteArtifact: (artifactId: string) => Promise<void>;
 }
 
 export const useArtifactStore = create<ArtifactStoreState>((set, get) => ({
@@ -27,6 +29,7 @@ export const useArtifactStore = create<ArtifactStoreState>((set, get) => ({
   libraryLoading: false,
   libraryError: null,
   downloading: {},
+  deleting: {},
   async fetchRunArtifacts(runId: string, force = false) {
     const existing = get().runArtifacts[runId];
     if (!force && existing && !existing.error && existing.artifacts.length > 0) {
@@ -113,4 +116,24 @@ export const useArtifactStore = create<ArtifactStoreState>((set, get) => ({
       });
     }
   },
+  async deleteArtifact(artifactId: string) {
+    set((state) => ({
+      deleting: { ...state.deleting, [artifactId]: true },
+    }));
+    try {
+      await api.artifacts.delete(artifactId);
+      // Remove artifact from library after successful deletion
+      set((state) => ({
+        library: state.library.filter((a) => a.id !== artifactId),
+      }));
+    } catch (error) {
+      console.error('Failed to delete artifact', error);
+      throw error;
+    } finally {
+      set((state) => {
+        const { [artifactId]: _removed, ...next } = state.deleting;
+        return { deleting: next };
+      });
+    }
+  },
 }));

From 3fcd48cdf50ee7bc152182e540cf0f7aef012796 Mon Sep 17 00:00:00 2001
From: Krishna Mohan <krishanmohank974@gmail.com>
Date: Fri, 30 Jan 2026 14:30:10 +0530
Subject: [PATCH 5/5] fix: fixed react hooks ordering in workflowNode.tsx

Signed-off-by: Krishna Mohan <krishanmohank974@gmail.com>
---
 .../src/components/workflow/WorkflowNode.tsx  | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/workflow/WorkflowNode.tsx b/frontend/src/components/workflow/WorkflowNode.tsx
index 45d76172..aa86fc11 100644
--- a/frontend/src/components/workflow/WorkflowNode.tsx
+++ b/frontend/src/components/workflow/WorkflowNode.tsx
@@ -670,6 +670,17 @@ export const WorkflowNode = ({ data, selected, id }: NodeProps<NodeData>) => {
     }
   }, [visualState.status]);
 
+  // Update ReactFlow's internal handle positions when dynamic ports change.
+  // This is critical for Entry Point nodes with runtime inputs - without this,
+  // dragging from Input 2 would incorrectly connect from Input 1's stale cached position.
+  // NOTE: This hook MUST be called before any early returns to maintain consistent hook order.
+  const dynamicOutputIds = (nodeData.dynamicOutputs ?? []).map((o: any) => o.id).join(',');
+  const dynamicInputIds = (nodeData.dynamicInputs ?? []).map((i: any) => i.id).join(',');
+  useEffect(() => {
+    // Tell ReactFlow to recalculate handle positions for this node
+    updateNodeInternals(id);
+  }, [id, dynamicOutputIds, dynamicInputIds, updateNodeInternals]);
+
   const supportsLiveLogs = component?.runner?.kind === 'docker';
 
   if (!component) {
@@ -758,11 +769,15 @@ export const WorkflowNode = ({ data, selected, id }: NodeProps<NodeData>) => {
   // DYNAMIC OUTPUTS: Use dynamicOutputs from node data (set by ConfigPanel via resolvePorts API)
   // Fall back to Entry Point special case, then static component.outputs
   let effectiveOutputs: any[] =
-    nodeData.dynamicOutputs ?? (Array.isArray(component.outputs) ? component.outputs : []);
+    nodeData.dynamicOutputs ?? (Array.isArray(component?.outputs) ? component.outputs : []);
 
   // Legacy: For Entry Point without dynamicOutputs, generate outputs based on runtimeInputs parameter
   const runtimeInputsVal = nodeData.config?.params?.runtimeInputs;
-  if (!nodeData.dynamicOutputs && component.id === 'core.workflow.entrypoint' && runtimeInputsVal) {
+  if (
+    !nodeData.dynamicOutputs &&
+    component?.id === 'core.workflow.entrypoint' &&
+    runtimeInputsVal
+  ) {
     try {
       const runtimeInputs =
         typeof runtimeInputsVal === 'string' ? JSON.parse(runtimeInputsVal) : runtimeInputsVal;
@@ -783,16 +798,6 @@ export const WorkflowNode = ({ data, selected, id }: NodeProps<NodeData>) => {
     }
   }
 
-  // Update ReactFlow's internal handle positions when dynamic ports change.
-  // This is critical for Entry Point nodes with runtime inputs - without this,
-  // dragging from Input 2 would incorrectly connect from Input 1's stale cached position.
-  const outputIds = effectiveOutputs.map((o) => o.id).join(',');
-  const inputIds = componentInputs.map((i) => i.id).join(',');
-  useEffect(() => {
-    // Tell ReactFlow to recalculate handle positions for this node
-    updateNodeInternals(id);
-  }, [id, outputIds, inputIds, updateNodeInternals]);
-
   const manualOverridesPort = (input: InputPort) => input.valuePriority === 'manual-first';
 
   const manualValueProvidedForInput = (input: InputPort, hasConnection: boolean) => {