From b4a4a3e5f0ff5a309a46d978b74b0f068b2888f7 Mon Sep 17 00:00:00 2001
From: Subramaniyajothi6 <subramaniyajothi2002@gmail.com>
Date: Tue, 23 Jun 2026 23:59:49 +0530
Subject: [PATCH 1/2] feat: add copy-trace action to Task Details error banner
 (#830)

---
 frontend/src/components/CopyToClipboard.tsx   | 18 +++++++---
 frontend/src/pages/TaskDetails.tsx            | 13 +++++--
 .../unit/components/CopyToClipboard.test.tsx  | 35 +++++++++++++++++++
 3 files changed, 59 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/CopyToClipboard.tsx b/frontend/src/components/CopyToClipboard.tsx
index cbeec3dc2..ddb012425 100644
--- a/frontend/src/components/CopyToClipboard.tsx
+++ b/frontend/src/components/CopyToClipboard.tsx
@@ -3,10 +3,19 @@ import { AlertTriangle, Check, Copy } from 'lucide-react';
 
 interface CopyToClipboardProps {
   textToCopy: string;
+  /** Idle-state button label. Defaults to "Copy Output". */
+  label?: string;
+  /** Native tooltip / accessible title. Defaults to "Copy to clipboard". */
+  title?: string;
 }
 
-const CopyToClipboard: React.FC<CopyToClipboardProps> = ({ textToCopy }) => {
+const CopyToClipboard: React.FC<CopyToClipboardProps> = ({
+  textToCopy,
+  label = 'Copy Output',
+  title = 'Copy to clipboard',
+}) => {
   const [copyState, setCopyState] = useState<'idle' | 'copied' | 'error'>('idle');
+  const hasText = Boolean(textToCopy);
 
   const handleCopy = async (): Promise<void> => {
     if (!textToCopy) return;
@@ -27,7 +36,7 @@ const CopyToClipboard: React.FC<CopyToClipboardProps> = ({ textToCopy }) => {
   }[copyState];
 
   const buttonContent = {
-    idle: { icon: <Copy size={12} aria-hidden="true" />, label: 'Copy Output' },
+    idle: { icon: <Copy size={12} aria-hidden="true" />, label },
     copied: { icon: <Check size={12} aria-hidden="true" />, label: 'Copied!' },
     error: { icon: <AlertTriangle size={12} aria-hidden="true" />, label: 'Copy failed' },
   }[copyState];
@@ -36,8 +45,9 @@ const CopyToClipboard: React.FC<CopyToClipboardProps> = ({ textToCopy }) => {
     <button
       onClick={handleCopy}
       type="button"
-      title="Copy to clipboard"
-      className={`flex items-center gap-1.5 border px-3 py-2 text-[10px] uppercase tracking-[0.2em] font-medium transition-all duration-200 ${buttonTone}`}
+      title={title}
+      disabled={!hasText}
+      className={`flex items-center gap-1.5 border px-3 py-2 text-[10px] uppercase tracking-[0.2em] font-medium transition-all duration-200 disabled:opacity-40 disabled:cursor-not-allowed ${buttonTone}`}
     >
       {buttonContent.icon}
       <span aria-live="polite">{buttonContent.label}</span>
diff --git a/frontend/src/pages/TaskDetails.tsx b/frontend/src/pages/TaskDetails.tsx
index 83e7da50f..a802cd0fd 100644
--- a/frontend/src/pages/TaskDetails.tsx
+++ b/frontend/src/pages/TaskDetails.tsx
@@ -943,9 +943,16 @@ export default function TaskDetails() {
                         animate={{ opacity: 1, height: 'auto' }}
                         className="bg-rag-red/10 border-l-4 border-rag-red p-6 space-y-3"
                     >
-                        <div className="flex items-center gap-3 text-rag-red">
-                            <DetailIcon icon={AlertCircleIcon} />
-                            <h3 className="text-xs font-black uppercase tracking-[0.3em] italic">Critical_Execution_Fault</h3>
+                        <div className="flex items-start justify-between gap-3">
+                            <div className="flex items-center gap-3 text-rag-red">
+                                <DetailIcon icon={AlertCircleIcon} />
+                                <h3 className="text-xs font-black uppercase tracking-[0.3em] italic">Critical_Execution_Fault</h3>
+                            </div>
+                            <CopyToClipboard
+                                textToCopy={task.error_message}
+                                label="Copy Trace"
+                                title="Copy error trace to clipboard"
+                            />
                         </div>
                         <CollapsiblePane content={task.error_message} maxCollapsedLength={400} label="error output" />
                         <div className="pt-2">
diff --git a/frontend/testing/unit/components/CopyToClipboard.test.tsx b/frontend/testing/unit/components/CopyToClipboard.test.tsx
index ace913c8d..2af219537 100644
--- a/frontend/testing/unit/components/CopyToClipboard.test.tsx
+++ b/frontend/testing/unit/components/CopyToClipboard.test.tsx
@@ -41,6 +41,41 @@ describe('CopyToClipboard', () => {
     expect(screen.getByRole('button', { name: /copy output/i })).toBeInTheDocument();
   });
 
+  it('renders a custom idle label when provided', () => {
+    render(<CopyToClipboard textToCopy="stack trace" label="Copy Trace" />);
+
+    expect(screen.getByRole('button', { name: /copy trace/i })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /copy output/i })).not.toBeInTheDocument();
+  });
+
+  it('copies with the custom label using the provided text', async () => {
+    writeText.mockResolvedValue(undefined);
+
+    render(<CopyToClipboard textToCopy="stack trace" label="Copy Trace" />);
+
+    fireEvent.click(screen.getByRole('button', { name: /copy trace/i }));
+    await act(async () => {});
+
+    expect(writeText).toHaveBeenCalledWith('stack trace');
+    expect(screen.getByRole('button', { name: /copied!/i })).toBeInTheDocument();
+
+    act(() => {
+      vi.advanceTimersByTime(2000);
+    });
+
+    expect(screen.getByRole('button', { name: /copy trace/i })).toBeInTheDocument();
+  });
+
+  it('disables the button and does not copy when there is no text', () => {
+    render(<CopyToClipboard textToCopy="" />);
+
+    const button = screen.getByRole('button', { name: /copy output/i });
+    expect(button).toBeDisabled();
+
+    fireEvent.click(button);
+    expect(writeText).not.toHaveBeenCalled();
+  });
+
   it('shows failure state when clipboard write fails', async () => {
     writeText.mockRejectedValue(new Error('clipboard denied'));
     const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {});

From c33deb764c0609d74bc63945bdad2b319916736b Mon Sep 17 00:00:00 2001
From: Subramaniyajothi6 <subramaniyajothi2002@gmail.com>
Date: Wed, 24 Jun 2026 00:55:49 +0530
Subject: [PATCH 2/2] fix(reports): disambiguate client-side PDF button
 accessible name

---
 frontend/src/pages/Reports.tsx               | 1 +
 frontend/testing/unit/pages/Reports.test.tsx | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/frontend/src/pages/Reports.tsx b/frontend/src/pages/Reports.tsx
index b690b7875..823b25022 100644
--- a/frontend/src/pages/Reports.tsx
+++ b/frontend/src/pages/Reports.tsx
@@ -442,6 +442,7 @@ export default function Reports() {
 
                             <button
                               onClick={() => downloadPdfReport(report)}
+                              aria-label={`Download rendered PDF of ${report.name}`}
                               className="bg-rag-green border-4 border-black px-3 py-2 text-[9px] font-black uppercase tracking-widest text-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all"
                               title="Download PDF Report"
                             >
diff --git a/frontend/testing/unit/pages/Reports.test.tsx b/frontend/testing/unit/pages/Reports.test.tsx
index 3b3ec2303..b367c23af 100644
--- a/frontend/testing/unit/pages/Reports.test.tsx
+++ b/frontend/testing/unit/pages/Reports.test.tsx
@@ -134,6 +134,14 @@ describe('Reports — export buttons on a ready report', () => {
     expect(screen.getByRole('button', { name: /^csv$/i })).toBeInTheDocument()
   })
 
+  it('keeps the client-side rendered-PDF button distinct from the server export', async () => {
+    renderReports()
+    // The client-side PDF export (#1205) must carry its own accessible name so it
+    // does not collide with the server-side export "pdf" button below it.
+    expect(await screen.findByRole('button', { name: /rendered pdf/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /^pdf$/i })).toBeInTheDocument()
+  })
+
   it('export buttons are enabled for a ready report', async () => {
     renderReports()
     await screen.findByRole('button', { name: /^pdf$/i })