fix(workflow): add copy buttons for runtime payloads

Add copy actions for runtime input/output payloads in workflow detail views so users can reuse the latest JSON more easily during debugging and testing.

Made-with: Cursor

Author: zhougongyan

webui/src/pages/WorkflowDetail/NodeInfoPanel.test.tsx

@@ -20,6 +20,14 @@ vi.mock('@/api/workflow', async () => {
   };
 });
 
+vi.mock('@/components/common/CopyButton', () => ({
+  default: ({ text }: { text: string }) => (
+    <button type="button" data-testid="copy-button" aria-label={`copy:${text}`}>
+      copy
+    </button>
+  ),
+}));
+
 vi.mock('react-i18next', () => ({
   useTranslation: () => ({
     t: (key: string, params?: Record<string, unknown>) => {
@@ -149,6 +157,10 @@ describe('NodeInfoPanel', () => {
     expect(screen.getByText('真实输出')).toBeInTheDocument();
     expect(screen.getByDisplayValue(/demo.local/)).toBeInTheDocument();
     expect(screen.getByText(/"result": "ok"/)).toBeInTheDocument();
+    const copyButtons = screen.getAllByTestId('copy-button');
+    expect(copyButtons).toHaveLength(2);
+    expect(copyButtons[0]).toHaveAttribute('aria-label', 'copy:{\n  "host": "demo.local"\n}');
+    expect(copyButtons[1]).toHaveAttribute('aria-label', 'copy:{\n  "result": "ok"\n}');
   });
 
   it('shows empty runtime hint when there is no latest execution', () => {

webui/src/pages/WorkflowDetail/NodeInfoPanel.tsx

@@ -6,6 +6,7 @@ import { useState, useEffect, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { X, AlertCircle, Save, Loader2, ChevronDown, ChevronRight, Play, RotateCcw, Maximize2 } from 'lucide-react';
 import { workflowAPI, Workflow, WorkflowEdge, WorkflowExecution, WorkflowNode, WorkflowNodeExecution } from '@/api/workflow';
+import CopyButton from '@/components/common/CopyButton';
 
 // ─────────────────────────────────────────────
 // Constants
@@ -296,13 +297,17 @@ function RuntimeJsonBlock({ label, value, tone }: {
   tone: 'amber' | 'green';
 }) {
   const bgClass = tone === 'amber' ? 'bg-amber-50 border-amber-100 text-amber-900' : 'bg-green-50 border-green-100 text-green-900';
+  const formattedValue = JSON.stringify(value, null, 2);
 
   return (
     <div className="space-y-1.5">
-      <FL>{label}</FL>
+      <div className="flex items-center justify-between gap-2">
+        <FL>{label}</FL>
+        <CopyButton text={formattedValue} size="w-3 h-3" />
+      </div>
       <div className={`rounded-lg border px-2.5 py-2 ${bgClass}`}>
         <pre className="text-[11px] font-mono whitespace-pre-wrap break-all">
-          {JSON.stringify(value, null, 2)}
+          {formattedValue}
         </pre>
       </div>
     </div>

webui/src/pages/WorkflowDetail/tabs/RunTab.test.tsx

@@ -26,7 +26,11 @@ vi.mock('@/api/workflow', () => ({
 }));
 
 vi.mock('@/components/common/CopyButton', () => ({
-  default: () => null,
+  default: ({ text }: { text: string }) => (
+    <button type="button" data-testid="copy-button" aria-label={`copy:${text}`}>
+      copy
+    </button>
+  ),
 }));
 
 vi.mock('@/components/common/WorkflowStatusBadge', () => ({
@@ -204,4 +208,25 @@ describe('RunTab', () => {
     });
   });
 
+  it('shows a copy button when output results are available', async () => {
+    render(
+      <ControlledRunTab
+        initialExecution={{
+          id: 'exec-output',
+          workflowId: 'wf-1',
+          inputParams: { topic: 'demo' },
+          outputResults: { result: 'ok' },
+          status: 'success',
+          startedAt: Date.now(),
+          executionLog: [],
+        }}
+      />
+    );
+
+    await waitFor(() => {
+      const copyButtons = screen.getAllByTestId('copy-button');
+      expect(copyButtons.some((button) => button.getAttribute('aria-label') === 'copy:{\n  "result": "ok"\n}')).toBe(true);
+    });
+  });
+
 });

webui/src/pages/WorkflowDetail/tabs/RunTab.tsx

@@ -429,13 +429,19 @@ function TestSection({
 
               {execution.outputResults && (
                 <div>
-                  <button
-                    onClick={() => setOutputExpanded(v => !v)}
-                    className="w-full flex items-center justify-between px-3 py-2 hover:bg-gray-50 transition-colors"
-                  >
-                    <span className="text-xs font-medium text-gray-600">{t('detail.run.outputResults')}</span>
-                    {outputExpanded ? <ChevronDown className="w-3 h-3 text-gray-400" /> : <ChevronRight className="w-3 h-3 text-gray-400" />}
-                  </button>
+                  <div className="flex items-center justify-between gap-2 px-3 py-2 hover:bg-gray-50 transition-colors">
+                    <div className="flex items-center gap-2 min-w-0">
+                      <span className="text-xs font-medium text-gray-600">{t('detail.run.outputResults')}</span>
+                      <CopyButton text={JSON.stringify(execution.outputResults, null, 2)} size="w-3 h-3" />
+                    </div>
+                    <button
+                      onClick={() => setOutputExpanded(v => !v)}
+                      className="flex items-center rounded p-0.5 hover:bg-gray-100"
+                      aria-label={t('detail.run.outputResults')}
+                    >
+                      {outputExpanded ? <ChevronDown className="w-3 h-3 text-gray-400" /> : <ChevronRight className="w-3 h-3 text-gray-400" />}
+                    </button>
+                  </div>
                   {outputExpanded && (
                     <div className="bg-gray-900 px-3 py-2 max-h-48 overflow-y-auto">
                       <pre className="text-xs text-green-300 font-mono whitespace-pre-wrap">