clear db button

orchestrator/src/client/App.tsx

@@ -135,11 +135,24 @@ export const App: React.FC = () => {
     }
   };
   
+  // Clear database
+  const handleClearDatabase = async () => {
+    try {
+      const result = await api.clearDatabase();
+      addToast(`Database cleared! Deleted ${result.jobsDeleted} jobs.`, 'success');
+      loadJobs();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to clear database';
+      addToast(message, 'error');
+    }
+  };
+  
   return (
     <>
       <Header
         onRunPipeline={handleRunPipeline}
         onRefresh={loadJobs}
+        onClearDatabase={handleClearDatabase}
         isPipelineRunning={isPipelineRunning}
         isLoading={isLoading}
       />

orchestrator/src/client/api/client.ts

@@ -89,3 +89,18 @@ export async function runPipeline(config?: {
     body: JSON.stringify(config || {}),
   });
 }
+
+// Database API
+export async function clearDatabase(): Promise<{
+  message: string;
+  jobsDeleted: number;
+  runsDeleted: number;
+}> {
+  return fetchApi<{
+    message: string;
+    jobsDeleted: number;
+    runsDeleted: number;
+  }>('/database', {
+    method: 'DELETE',
+  });
+}

orchestrator/src/client/components/Header.tsx

@@ -3,11 +3,12 @@
  */
 
 import React from 'react';
-import { RocketIcon, PlayIcon, RefreshIcon } from './Icons';
+import { RocketIcon, PlayIcon, RefreshIcon, TrashIcon } from './Icons';
 
 interface HeaderProps {
   onRunPipeline: () => void;
   onRefresh: () => void;
+  onClearDatabase: () => void;
   isPipelineRunning: boolean;
   isLoading: boolean;
 }
@@ -15,9 +16,16 @@ interface HeaderProps {
 export const Header: React.FC<HeaderProps> = ({
   onRunPipeline,
   onRefresh,
+  onClearDatabase,
   isPipelineRunning,
   isLoading,
 }) => {
+  const handleClearDatabase = () => {
+    if (window.confirm('Are you sure you want to clear all jobs from the database? This cannot be undone.')) {
+      onClearDatabase();
+    }
+  };
+
   return (
     <header className="header">
       <div className="container">
@@ -30,6 +38,16 @@ export const Header: React.FC<HeaderProps> = ({
           </div>
           
           <div className="flex gap-3">
+            <button
+              className="btn btn-ghost"
+              onClick={handleClearDatabase}
+              disabled={isLoading}
+              title="Clear all jobs from database"
+            >
+              <TrashIcon size={16} />
+              Clear DB
+            </button>
+            
             <button
               className="btn btn-ghost"
               onClick={onRefresh}

orchestrator/src/client/components/Icons.tsx

@@ -116,3 +116,12 @@ export const RocketIcon: React.FC<IconProps> = ({ className, size = 16 }) => (
     <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/>
   </svg>
 );
+
+export const TrashIcon: React.FC<IconProps> = ({ className, size = 16 }) => (
+  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polyline points="3 6 5 6 21 6"/>
+    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+    <line x1="10" y1="11" x2="10" y2="17"/>
+    <line x1="14" y1="11" x2="14" y2="17"/>
+  </svg>
+);