|
| 1 | +/** |
| 2 | + * AgentRunPage — Standalone page for running a specific agent. |
| 3 | + * |
| 4 | + * Shown as a tab when an agent has show_in_menu=true. |
| 5 | + * Minimal UI: description, optional input field, run button, output. |
| 6 | + */ |
| 7 | + |
| 8 | +import { |
| 9 | + Button, |
| 10 | + Card, |
| 11 | + Field, |
| 12 | + Spinner, |
| 13 | + Subtitle1, |
| 14 | + Text, |
| 15 | + Textarea, |
| 16 | + makeStyles, |
| 17 | + tokens, |
| 18 | +} from '@fluentui/react-components' |
| 19 | +import { useEffect, useState } from 'react' |
| 20 | +import { runWorkbenchAgent } from '../../services/api' |
| 21 | +import SchemaRenderer from './SchemaRenderer' |
| 22 | + |
| 23 | +const useStyles = makeStyles({ |
| 24 | + container: { |
| 25 | + padding: tokens.spacingVerticalL, |
| 26 | + display: 'flex', |
| 27 | + flexDirection: 'column', |
| 28 | + gap: tokens.spacingVerticalL, |
| 29 | + maxWidth: '800px', |
| 30 | + }, |
| 31 | + outputContainer: { |
| 32 | + border: `1px solid ${tokens.colorNeutralStroke1}`, |
| 33 | + borderRadius: tokens.borderRadiusMedium, |
| 34 | + padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`, |
| 35 | + backgroundColor: tokens.colorNeutralBackground1, |
| 36 | + maxHeight: '500px', |
| 37 | + overflowY: 'auto', |
| 38 | + }, |
| 39 | +}) |
| 40 | + |
| 41 | +export default function AgentRunPage({ agent }) { |
| 42 | + const styles = useStyles() |
| 43 | + const [prompt, setPrompt] = useState('') |
| 44 | + const [requiredInput, setRequiredInput] = useState('') |
| 45 | + const [running, setRunning] = useState(false) |
| 46 | + const [error, setError] = useState('') |
| 47 | + const [output, setOutput] = useState(null) |
| 48 | + |
| 49 | + if (!agent) { |
| 50 | + return <Spinner label="Loading agent..." /> |
| 51 | + } |
| 52 | + |
| 53 | + const parsedOutput = (() => { |
| 54 | + if (!output) return null |
| 55 | + try { |
| 56 | + const parsed = JSON.parse(output) |
| 57 | + if (typeof parsed === 'object' && parsed !== null) return parsed |
| 58 | + } catch { /* not JSON */ } |
| 59 | + return { message: output } |
| 60 | + })() |
| 61 | + |
| 62 | + const handleRun = async () => { |
| 63 | + setError('') |
| 64 | + setOutput(null) |
| 65 | + |
| 66 | + if (agent.requires_input && !requiredInput.trim()) { |
| 67 | + setError(`Required: ${agent.required_input_description || 'input value'}`) |
| 68 | + return |
| 69 | + } |
| 70 | + |
| 71 | + setRunning(true) |
| 72 | + try { |
| 73 | + const run = await runWorkbenchAgent(agent.id, { |
| 74 | + inputPrompt: prompt.trim(), |
| 75 | + requiredInputValue: requiredInput.trim(), |
| 76 | + }) |
| 77 | + setOutput(run?.output || '(no output)') |
| 78 | + } catch (err) { |
| 79 | + setError(err?.message || 'Agent run failed') |
| 80 | + } finally { |
| 81 | + setRunning(false) |
| 82 | + } |
| 83 | + } |
| 84 | + |
| 85 | + return ( |
| 86 | + <div className={styles.container}> |
| 87 | + <div> |
| 88 | + <Subtitle1 data-testid="agent-run-page-title">{agent.name}</Subtitle1> |
| 89 | + {agent.description && <Text>{agent.description}</Text>} |
| 90 | + </div> |
| 91 | + |
| 92 | + <Card> |
| 93 | + {agent.requires_input && ( |
| 94 | + <Field label={agent.required_input_description || 'Required input'} required> |
| 95 | + <Textarea |
| 96 | + data-testid="agent-run-required-input" |
| 97 | + value={requiredInput} |
| 98 | + onChange={(_, d) => setRequiredInput(d.value)} |
| 99 | + rows={1} |
| 100 | + placeholder={agent.required_input_description} |
| 101 | + /> |
| 102 | + </Field> |
| 103 | + )} |
| 104 | + <Field label="Prompt (optional)"> |
| 105 | + <Textarea |
| 106 | + data-testid="agent-run-prompt" |
| 107 | + value={prompt} |
| 108 | + onChange={(_, d) => setPrompt(d.value)} |
| 109 | + rows={2} |
| 110 | + placeholder="Additional instructions..." |
| 111 | + /> |
| 112 | + </Field> |
| 113 | + <Button |
| 114 | + appearance="primary" |
| 115 | + data-testid="agent-run-button" |
| 116 | + onClick={handleRun} |
| 117 | + disabled={running} |
| 118 | + style={{ marginTop: tokens.spacingVerticalS }} |
| 119 | + > |
| 120 | + {running ? 'Running...' : 'Run'} |
| 121 | + </Button> |
| 122 | + {error && <Text style={{ color: tokens.colorPaletteRedForeground1 }}>{error}</Text>} |
| 123 | + </Card> |
| 124 | + |
| 125 | + {parsedOutput && ( |
| 126 | + <div data-testid="agent-run-output" className={styles.outputContainer}> |
| 127 | + <SchemaRenderer |
| 128 | + data={parsedOutput} |
| 129 | + schema={agent.output_schema?.properties ? agent.output_schema : undefined} |
| 130 | + /> |
| 131 | + </div> |
| 132 | + )} |
| 133 | + </div> |
| 134 | + ) |
| 135 | +} |
0 commit comments