{
  "id": "agent-support",
  "name": "Customer Support Agent",
  "category": "agents",
  "tags": ["support", "tickets", "help desk", "customer service"],
  "description": "Customer support ticket viewer with status and priority.",
  "triggers": ["support agent", "help desk", "tickets", "customer service"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "const AgentSupport = () => {\n  const [tickets, setTickets] = React.useState([\n    { id: 101, subject: 'Login not working', requester: 'user@example.com', priority: 'high', status: 'open', updated: '10m ago' },\n    { id: 102, subject: 'Feature request: dark mode', requester: 'dev@example.com', priority: 'low', status: 'pending', updated: '2h ago' },\n    { id: 103, subject: 'Billing discrepancy', requester: 'finance@example.com', priority: 'critical', status: 'open', updated: '30m ago' },\n    { id: 104, subject: 'How to export data?', requester: 'admin@example.com', priority: 'medium', status: 'resolved', updated: '1d ago' }\n  ]);\n  const [selected, setSelected] = React.useState(null);\n  const [reply, setReply] = React.useState('');\n\n  const priorityColor = (p) => ({ critical: '#dc2626', high: '#ea580c', medium: '#ca8a04', low: '#16a34a' }[p] || '#6b7280');\n  const statusColor = (s) => ({ open: '#2563eb', pending: '#ca8a04', resolved: '#16a34a', closed: '#6b7280' }[s] || '#6b7280');\n  const statusBg = (s) => ({ open: '#eff6ff', pending: '#fefce8', resolved: '#f0fdf4', closed: '#f9fafb' }[s] || '#f9fafb');\n\n  const updateStatus = (id, status) => {\n    setTickets(tks => tks.map(t => t.id === id ? { ...t, status, updated: 'Just now' } : t));\n  };\n\n  const sendReply = () => {\n    if (!reply || !selected) return;\n    setReply('');\n    setTickets(tks => tks.map(t => t.id === selected.id ? { ...t, status: 'pending', updated: 'Just now' } : t));\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' } }, 'Customer Support'),\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' } }, 'Tickets'),\n        tickets.map(t => React.createElement('div', {\n          key: t.id,\n          onClick: () => setSelected(t),\n          style: {\n            background: selected?.id === t.id ? '#e0e7ff' : statusBg(t.status),\n            borderRadius: '6px',\n            padding: '10px',\n            border: selected?.id === t.id ? '1px solid #6366f1' : '1px solid #e5e7eb',\n            cursor: 'pointer',\n            display: 'flex',\n            flexDirection: 'column',\n            gap: '4px'\n          }\n        },\n          React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },\n            React.createElement('span', { style: { fontWeight: 600, fontSize: '13px', color: '#111827' } }, '#', t.id, ' ', t.subject),\n            React.createElement('span', { style: { fontSize: '10px', fontWeight: 700, color: priorityColor(t.priority), background: '#fff', padding: '2px 6px', borderRadius: '10px', border: '1px solid ' + priorityColor(t.priority) } }, t.priority)\n          ),\n          React.createElement('div', { style: { fontSize: '11px', color: '#6b7280' } }, t.requester),\n          React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },\n            React.createElement('span', { style: { fontSize: '11px', fontWeight: 600, color: statusColor(t.status), textTransform: 'uppercase' } }, t.status),\n            React.createElement('span', { style: { fontSize: '11px', color: '#9ca3af' } }, t.updated)\n          )\n        ))\n      ),\n      React.createElement('div', { style: { background: '#f9fafb', borderRadius: '8px', padding: '12px', display: 'flex', flexDirection: 'column', gap: '12px' } },\n        React.createElement('div', { style: { fontSize: '12px', fontWeight: 600, color: '#6b7280', textTransform: 'uppercase', letterSpacing: '0.05em' } }, 'Ticket Details'),\n        selected ? React.createElement(React.Fragment, null,\n          React.createElement('div', { style: { background: '#fff', borderRadius: '6px', padding: '12px', border: '1px solid #e5e7eb' } },\n            React.createElement('div', { style: { fontWeight: 600, fontSize: '14px', color: '#111827', marginBottom: '8px' } }, '#', selected.id, ' ', selected.subject),\n            React.createElement('div', { style: { fontSize: '12px', color: '#374151', marginBottom: '4px' } }, 'Requester: ', selected.requester),\n            React.createElement('div', { style: { fontSize: '12px', color: '#374151', marginBottom: '4px' } }, 'Priority: ', React.createElement('span', { style: { color: priorityColor(selected.priority), fontWeight: 700 } }, selected.priority)),\n            React.createElement('div', { style: { fontSize: '12px', color: '#374151' } }, 'Status: ', React.createElement('span', { style: { color: statusColor(selected.status), fontWeight: 700 } }, selected.status))\n          ),\n          React.createElement('div', { style: { display: 'flex', gap: '6px' } },\n            ['open', 'pending', 'resolved', 'closed'].map(s => React.createElement('button', {\n              key: s,\n              onClick: () => updateStatus(selected.id, s),\n              style: {\n                flex: 1,\n                fontSize: '11px',\n                padding: '6px',\n                borderRadius: '4px',\n                border: '1px solid ' + statusColor(s),\n                background: selected.status === s ? statusColor(s) : '#fff',\n                color: selected.status === s ? '#fff' : statusColor(s),\n                cursor: 'pointer',\n                fontWeight: 600\n              }\n            }, s))\n          ),\n          React.createElement('textarea', {\n            value: reply,\n            onChange: e => setReply(e.target.value),\n            placeholder: 'Type your reply...',\n            style: { flex: 1, minHeight: '80px', fontSize: '12px', padding: '8px', borderRadius: '4px', border: '1px solid #d1d5db', resize: 'vertical', fontFamily: 'system-ui, sans-serif' }\n          }),\n          React.createElement('button', { onClick: sendReply, style: { fontSize: '12px', padding: '8px', borderRadius: '4px', border: 'none', background: '#2563eb', color: '#fff', cursor: 'pointer', fontWeight: 600 } }, 'Send Reply')\n        ) : React.createElement('div', { style: { color: '#9ca3af', fontSize: '13px', textAlign: 'center', padding: '20px' } }, 'Select a ticket to view details')\n      )\n    )\n  );\n};\nrender(<AgentSupport/>);",
  "placeholders": [{ "name": "REPLACE_WITH_SUPPORT_EMAIL", "description": "Support email address for ticket creation", "default": "support@example.com" }]
}