{
  "id": "agent-researcher",
  "name": "Research Agent",
  "category": "agents",
  "tags": ["research", "analysis", "report", "investigate"],
  "description": "Research dashboard with query input and report display area.",
  "triggers": ["researcher", "deep research", "analyst", "investigate"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "const AgentResearcher = () => {\n  const [query, setQuery] = React.useState('');\n  const [reports, setReports] = React.useState([\n    { id: 1, query: 'Market trends in AI 2024', summary: 'AI market projected to reach $1.8T by 2030. Key drivers: generative AI, autonomous agents, and edge computing.', sources: 12, date: '2024-01-15' },\n    { id: 2, query: 'Competitor analysis: Tesla vs BYD', summary: 'BYD overtook Tesla in Q4 2023 EV sales. Tesla leads in premium segment and charging infrastructure.', sources: 8, date: '2024-01-10' }\n  ]);\n  const [loading, setLoading] = React.useState(false);\n  const [selected, setSelected] = React.useState(null);\n\n  const runResearch = () => {\n    if (!query.trim()) return;\n    setLoading(true);\n    setTimeout(() => {\n      setReports([{\n        id: Date.now(),\n        query: query,\n        summary: 'Research complete. Key findings indicate significant developments in the queried domain. Recommend follow-up analysis on sub-topics.',\n        sources: Math.floor(Math.random() * 15) + 3,\n        date: new Date().toISOString().slice(0, 10)\n      }, ...reports]);\n      setLoading(false);\n      setQuery('');\n    }, 2000);\n  };\n\n  return React.createElement('div', { style: { fontFamily: 'system-ui, sans-serif', padding: '16px', display: 'flex', flexDirection: 'column', gap: '16px', height: '100%', overflow: 'auto' } },\n    React.createElement('h3', { style: { margin: 0, fontSize: '16px', fontWeight: 600, color: '#111827' } }, 'Research Agent'),\n    React.createElement('div', { style: { display: 'flex', gap: '8px' } },\n      React.createElement('input', {\n        value: query,\n        onChange: e => setQuery(e.target.value),\n        onKeyDown: e => e.key === 'Enter' && runResearch(),\n        placeholder: 'Enter research query...',\n        style: { flex: 1, fontSize: '13px', padding: '8px 12px', borderRadius: '6px', border: '1px solid #d1d5db', outline: 'none' }\n      }),\n      React.createElement('button', {\n        onClick: runResearch,\n        disabled: loading,\n        style: {\n          fontSize: '13px',\n          padding: '8px 16px',\n          borderRadius: '6px',\n          border: 'none',\n          background: loading ? '#9ca3af' : '#2563eb',\n          color: '#fff',\n          cursor: loading ? 'not-allowed' : 'pointer',\n          fontWeight: 600\n        }\n      }, loading ? 'Researching...' : 'Research')\n    ),\n    React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px', flex: 1, minHeight: 0 } },\n      React.createElement('div', { style: { background: '#f9fafb', borderRadius: '8px', padding: '12px', display: 'flex', flexDirection: 'column', gap: '8px', overflow: 'auto' } },\n        React.createElement('div', { style: { fontSize: '12px', fontWeight: 600, color: '#6b7280', marginBottom: '4px', textTransform: 'uppercase', letterSpacing: '0.05em' } }, 'Recent Reports'),\n        reports.map(r => React.createElement('div', {\n          key: r.id,\n          onClick: () => setSelected(r),\n          style: {\n            background: selected?.id === r.id ? '#e0e7ff' : '#fff',\n            borderRadius: '6px',\n            padding: '10px',\n            border: selected?.id === r.id ? '1px solid #6366f1' : '1px solid #e5e7eb',\n            cursor: 'pointer'\n          }\n        },\n          React.createElement('div', { style: { fontWeight: 600, fontSize: '13px', color: '#111827', marginBottom: '4px' } }, r.query),\n          React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },\n            React.createElement('span', { style: { fontSize: '11px', color: '#6b7280' } }, r.sources, ' sources'),\n            React.createElement('span', { style: { fontSize: '11px', color: '#9ca3af' } }, r.date)\n          )\n        ))\n      ),\n      React.createElement('div', { style: { background: '#f9fafb', borderRadius: '8px', padding: '12px', display: 'flex', flexDirection: 'column', gap: '8px' } },\n        React.createElement('div', { style: { fontSize: '12px', fontWeight: 600, color: '#6b7280', textTransform: 'uppercase', letterSpacing: '0.05em' } }, 'Report Details'),\n        selected ? React.createElement(React.Fragment, null,\n          React.createElement('div', { style: { background: '#fff', borderRadius: '6px', padding: '12px', border: '1px solid #e5e7eb', flex: 1 } },\n            React.createElement('div', { style: { fontWeight: 600, fontSize: '14px', color: '#111827', marginBottom: '8px' } }, selected.query),\n            React.createElement('div', { style: { fontSize: '13px', color: '#374151', lineHeight: 1.6, marginBottom: '12px' } }, selected.summary),\n            React.createElement('div', { style: { display: 'flex', gap: '12px' } },\n              React.createElement('span', { style: { fontSize: '11px', color: '#6b7280', background: '#f3f4f6', padding: '4px 8px', borderRadius: '4px' } }, selected.sources, ' sources'),\n              React.createElement('span', { style: { fontSize: '11px', color: '#6b7280', background: '#f3f4f6', padding: '4px 8px', borderRadius: '4px' } }, selected.date)\n            )\n          )\n        ) : React.createElement('div', { style: { color: '#9ca3af', fontSize: '13px', textAlign: 'center', padding: '20px' } }, 'Select a report to view details')\n      )\n    )\n  );\n};\nrender(<AgentResearcher/>);",
  "placeholders": [{ "name": "REPLACE_WITH_RESEARCH_API", "description": "API endpoint for research queries", "default": "https://api.example.com/research" }]
}