{
  "id": "agent-coder",
  "name": "Coder Agent",
  "category": "agents",
  "tags": [
    "agent",
    "coder",
    "ai",
    "code",
    "developer",
    "employees",
    "titan",
    "programming"
  ],
  "description": "Coder employee: takes a feature spec, drafts the implementation, runs it via TITAN's code_exec skill, and shows output. Iterative loop in one panel.",
  "triggers": [
    "coder",
    "agent coder",
    "code agent",
    "programmer agent",
    "developer agent",
    "write code for me"
  ],
  "defaultSize": {
    "w": 6,
    "h": 6
  },
  "source": "function CoderAgent() {\n  const [spec, setSpec] = React.useState('REPLACE_WITH_SPEC');\n  const [language, setLanguage] = React.useState('python');\n  const [code, setCode] = React.useState('');\n  const [output, setOutput] = React.useState('');\n  const [busy, setBusy] = React.useState(false);\n  const draft = async () => {\n    setBusy(true); setOutput('');\n    try {\n      const r = await titan.api.call('/api/message', { content: `Write ${language} code for this spec:\\n\\n${spec}\\n\\nReturn ONLY the code, no markdown fences, no explanation. The code must run as-is.` });\n      const text = (r?.body?.content || r?.content || r?.body?.text || r?.text || '').replace(/^```\\w*\\n?/gm, '').replace(/```$/gm, '').trim();\n      setCode(text);\n    } catch (e) { setOutput('Error: ' + (e?.message||e)); }\n    setBusy(false);\n  };\n  const exec = async () => {\n    setBusy(true); setOutput('');\n    try {\n      const r = await titan.api.call('/api/skills/execute_code', { code, language });\n      setOutput(r?.stdout || r?.output || JSON.stringify(r, null, 2));\n      if (r?.stderr) setOutput(o => o + '\\n--- stderr ---\\n' + r.stderr);\n    } catch (e) { setOutput('Error: ' + (e?.message||e)); }\n    setBusy(false);\n  };\n  return (\n    <div style={{padding:12,fontFamily:'system-ui',height:'100%',display:'flex',flexDirection:'column',gap:8}}>\n      <div style={{display:'flex',gap:6,alignItems:'center'}}>\n        <div style={{fontSize:14,fontWeight:600,flex:1}}>\ud83d\udc68\u200d\ud83d\udcbb Coder</div>\n        <select value={language} onChange={e=>setLanguage(e.target.value)} style={{padding:'4px 8px',border:'1px solid #ccc',borderRadius:6,fontSize:12}}>\n          <option value=\"python\">Python</option><option value=\"javascript\">JS</option><option value=\"typescript\">TS</option><option value=\"bash\">Bash</option>\n        </select>\n      </div>\n      <textarea value={spec} onChange={e=>setSpec(e.target.value)} placeholder=\"Describe what to build\u2026\" rows={2} style={{padding:'8px',border:'1px solid #ccc',borderRadius:6,fontSize:12,resize:'vertical',fontFamily:'inherit'}}/>\n      <div style={{display:'flex',gap:6}}>\n        <button onClick={draft} disabled={busy} style={{flex:1,padding:'6px',border:'none',borderRadius:6,background:'#007AFF',color:'#fff',cursor:busy?'wait':'pointer',fontWeight:600,fontSize:12}}>{busy?'\u2026':'\u2728 Draft'}</button>\n        <button onClick={exec} disabled={busy||!code} style={{flex:1,padding:'6px',border:'none',borderRadius:6,background:'#34C759',color:'#fff',cursor:busy?'wait':'pointer',fontWeight:600,fontSize:12,opacity:code?1:0.5}}>\u25b6 Run</button>\n      </div>\n      <textarea value={code} onChange={e=>setCode(e.target.value)} placeholder=\"Code appears here. Edit before running.\" style={{flex:1,padding:'10px',border:'1px solid #ccc',borderRadius:6,fontSize:12,fontFamily:'ui-monospace,SFMono-Regular,Menlo,monospace',resize:'none',minHeight:100}}/>\n      {output && <pre style={{margin:0,padding:10,background:'#1e1e1e',color:'#d4d4d4',borderRadius:6,fontSize:11,maxHeight:200,overflow:'auto',whiteSpace:'pre-wrap'}}>{output}</pre>}\n    </div>\n  );\n}\nrender(<CoderAgent/>);",
  "placeholders": [
    {
      "name": "REPLACE_WITH_SPEC",
      "description": "Default code spec",
      "default": "Print the first 20 prime numbers"
    }
  ]
}