{
  "id": "ha-routine-runner",
  "name": "Routine Runner",
  "category": "smart-home",
  "tags": ["routine", "automation", "trigger", "smart"],
  "description": "Automation trigger buttons with status indicators for running smart routines.",
  "triggers": ["routine", "automation", "run automation", "smart routine"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "function RoutineRunner() {\n  const [routines, setRoutines] = React.useState([\n    { id: 'morning', name: 'Good Morning', status: 'idle', lastRun: '7:00 AM' },\n    { id: 'leaving', name: 'Leaving Home', status: 'idle', lastRun: '8:30 AM' },\n    { id: 'arriving', name: 'Arriving Home', status: 'running', lastRun: '5:45 PM' },\n    { id: 'bedtime', name: 'Bedtime', status: 'idle', lastRun: '10:30 PM' },\n    { id: 'movie', name: 'Movie Mode', status: 'idle', lastRun: 'Yesterday' },\n    { id: 'cleaning', name: 'Cleaning Mode', status: 'idle', lastRun: 'Sat' }\n  ]);\n\n  const triggerRoutine = (id) => {\n    setRoutines(prev => prev.map(r => r.id === id ? { ...r, status: 'running' } : r));\n    setTimeout(() => {\n      setRoutines(prev => prev.map(r => r.id === id ? { ...r, status: 'idle', lastRun: 'Just now' } : r));\n    }, 2000);\n  };\n\n  return (\n    <div style={{ fontFamily: 'system-ui', background: '#111827', color: '#f3f4f6', width: '100%', height: '100%', padding: 16, borderRadius: 8, boxSizing: 'border-box', display: 'flex', flexDirection: 'column' }}>\n      <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 12, color: '#9ca3af' }}>Routines</div>\n      <div style={{ flex: 1, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 8 }}>\n        {routines.map(r => (\n          <div key={r.id} style={{ display: 'flex', alignItems: 'center', gap: 10, background: '#1f2937', borderRadius: 8, padding: '10px 12px' }}>\n            <div style={{ width: 10, height: 10, borderRadius: '50%', background: r.status === 'running' ? '#f59e0b' : '#10b981', animation: r.status === 'running' ? 'pulse 1s infinite' : 'none' }} />\n            <div style={{ flex: 1, minWidth: 0 }}>\n              <div style={{ fontSize: 13, fontWeight: 600, color: '#f3f4f6' }}>{r.name}</div>\n              <div style={{ fontSize: 11, color: '#6b7280' }}>Last run: {r.lastRun}</div>\n            </div>\n            <button onClick={() => triggerRoutine(r.id)} disabled={r.status === 'running'} style={{ background: r.status === 'running' ? '#374151' : '#3b82f6', color: '#fff', border: 'none', borderRadius: 6, padding: '6px 12px', fontSize: 12, fontWeight: 600, cursor: r.status === 'running' ? 'not-allowed' : 'pointer' }}>\n              {r.status === 'running' ? 'Running...' : 'Run'}\n            </button>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\nrender(<RoutineRunner/>);",
  "placeholders": [{ "name": "REPLACE_WITH_AUTOMATION_IDS", "description": "Comma-separated automation entity IDs", "default": "automation.good_morning,automation.leaving_home,automation.arriving_home,automation.bedtime" }]
}