@mooncompany/uplink-chat 0.5.0

package/public/js/agents.js

@@ -0,0 +1,1525 @@
+// ============================================
+// AGENTS MODULE
+// Agent management panel orchestrator
+// Imports data API and UI modules
+// ============================================
+
+import * as AgentsData from './agents-data.js';
+import * as AgentsUI from './agents-ui.js';
+
+// Re-export for backward compat
+const { TOOL_GROUPS, ALL_TOOLS, escapeHtml, escapeAttr, showToast, TOOL_PRESETS } = AgentsUI;
+
+// State (now managed by data module, but keep local refs for compatibility)
+let agents = [];
+let defaults = {};
+let bindings = [];
+let globalTools = {};
+let channels = [];
+let configHash = null;
+let loaded = false;
+let loading = false;
+let currentView = 'list'; // 'list' | 'detail' | 'create'
+let selectedAgentId = null;
+
+// Edit state
+let editingSection = null; // which section is being edited
+let pendingChanges = {};   // accumulated changes before save
+let saving = false;
+let restartPending = false;
+
+// Current container reference for re-renders
+let currentContainer = null;
+
+// Sync local state with data module
+function syncState() {
+  const state = AgentsData.getState();
+  agents = state.agents;
+  defaults = state.defaults;
+  bindings = state.bindings;
+  globalTools = state.globalTools;
+  channels = state.channels;
+  configHash = state.configHash;
+  loaded = state.loaded;
+  loading = state.loading;
+  saving = state.saving;
+  restartPending = state.restartPending;
+}
+
+// ============================================
+// DATA FETCHING (delegates to data module)
+// ============================================
+
+async function fetchAgents() {
+  await AgentsData.fetchAgents();
+  syncState();
+}
+
+async function saveAgentChanges(agentId, changes) {
+  try {
+    const result = await AgentsData.saveAgentChanges(agentId, changes, () => {
+      showToast('Config was modified externally. Refreshing...', 'warning');
+      syncState();
+      rerender();
+    });
+    syncState();
+    if (result) {
+      showToast('Changes applied', 'success');
+    }
+    return result;
+  } catch (err) {
+    showToast(`Save failed: ${err.message}`, 'error');
+    return false;
+  }
+}
+
+// ============================================
+// RENDERING
+// ============================================
+
+function render(container) {
+  if (!container) return;
+  currentContainer = container;
+
+  if (!loaded && !loading) {
+    fetchAgents().then(() => render(container));
+    container.innerHTML = renderLoading();
+    return;
+  }
+
+  if (loading) {
+    container.innerHTML = renderLoading();
+    return;
+  }
+
+  if (restartPending) {
+    container.innerHTML = renderRestartOverlay();
+    return;
+  }
+
+  if (currentView === 'create') {
+    container.innerHTML = renderCreateForm();
+    bindCreateEvents(container);
+  } else if (currentView === 'detail' && selectedAgentId) {
+    container.innerHTML = renderAgentDetail(selectedAgentId);
+    bindDetailEvents(container);
+  } else {
+    container.innerHTML = renderAgentList();
+    bindListEvents(container);
+  }
+}
+
+function rerender() {
+  if (currentContainer) render(currentContainer);
+}
+
+function renderLoading() {
+  return `
+    <div class="agents-loading">
+      <span class="agents-loading-dot"></span>
+      <span class="agents-loading-text">Loading agents...</span>
+    </div>
+  `;
+}
+
+function renderAgentList() {
+  if (agents.length === 0) {
+    return `
+      <div class="agents-empty">
+        <span class="agents-empty-icon">🤖</span>
+        <span class="agents-empty-text">No agents configured</span>
+      </div>
+    `;
+  }
+
+  const items = agents.map(agent => {
+    const modelDisplay = getModelDisplay(agent);
+    const sandboxBadge = getSandboxBadge(agent);
+    const toolsSummary = getToolsSummary(agent);
+    const bindingCount = bindings.filter(b => b.agentId === agent.id).length;
+    const emoji = agent.identity?.emoji || '🤖';
+    const name = agent.identity?.name || agent.name || agent.id;
+    const theme = agent.identity?.theme || '';
+
+    const avatarHtml = `<span class="panel-item-icon agent-item-avatar" data-fallback-emoji="${emoji}">
+          <img src="/img/agents/${encodeURIComponent(agent.id)}.png" alt="" class="agent-list-avatar-img" data-agent-id="${encodeURIComponent(agent.id)}" loading="lazy">
+        </span>`;
+
+    return `
+      <div class="panel-item agent-item" data-agent-id="${escapeHtml(agent.id)}">
+        ${avatarHtml}
+        <div class="agent-item-info">
+          <div class="agent-item-name-row">
+            <span class="panel-item-name agent-item-name">${escapeHtml(name)}</span>
+            ${agent.default ? '<span class="agent-badge agent-badge-default">default</span>' : ''}
+            ${sandboxBadge}
+          </div>
+          ${theme ? `<div class="agent-item-theme">${escapeHtml(theme)}</div>` : ''}
+          <div class="agent-item-meta">
+            <span class="agent-meta-model">${escapeHtml(modelDisplay)}</span>
+            ${toolsSummary ? `<span class="agent-meta-sep">·</span><span class="agent-meta-tools">${toolsSummary}</span>` : ''}
+            ${bindingCount > 0 ? `<span class="agent-meta-sep">·</span><span class="agent-meta-bindings">${bindingCount} route${bindingCount !== 1 ? 's' : ''}</span>` : ''}
+          </div>
+        </div>
+        <span class="agent-item-chevron">›</span>
+      </div>
+    `;
+  }).join('');
+
+  return `
+    <div class="agents-list-header">
+      <span class="agents-list-count">${agents.length} agent${agents.length !== 1 ? 's' : ''}</span>
+      <button class="agents-refresh-btn" title="Refresh">↻</button>
+    </div>
+    <div class="agents-list" role="listbox" aria-label="Agent list">
+      ${items}
+    </div>
+    <div class="agents-list-actions">
+      <button class="agents-create-btn" id="createAgentBtn">+ New Agent</button>
+    </div>
+  `;
+}
+
+// ============================================
+// AGENT DETAIL VIEW
+// ============================================
+
+function renderAgentDetail(agentId) {
+  const agent = agents.find(a => a.id === agentId);
+  if (!agent) {
+    return `<div class="agents-empty"><span>Agent not found</span></div>`;
+  }
+
+  const emoji = agent.identity?.emoji || '🤖';
+  const name = agent.identity?.name || agent.name || agent.id;
+  const theme = agent.identity?.theme || '';
+  const workspace = agent.workspace || defaults.workspace || 'default';
+  const agentBindings = bindings.filter(b => b.agentId === agent.id);
+
+  return `
+    <div class="agent-detail">
+      <div class="agent-detail-hero" data-agent-id="${escapeHtml(agent.id)}">
+        <img class="agent-detail-hero-img" src="/img/agents/${escapeHtml(agent.id)}.png" alt="">
+        <span class="agent-detail-hero-fallback">${emoji}</span>
+        <div class="agent-detail-hero-overlay">
+          <div class="agent-detail-hero-nav">
+            <button class="agent-detail-back" aria-label="Back to agent list">← Back</button>
+          </div>
+          <div class="agent-detail-hero-info">
+            <span class="agent-detail-name">${escapeHtml(name)}</span>
+            <span class="agent-detail-id">${escapeHtml(agent.id)}</span>
+          </div>
+        </div>
+        <span class="agent-avatar-overlay">📷</span>
+        <input type="file" class="agent-avatar-input" accept="image/png,image/jpeg,image/webp" style="display:none">
+        ${agent.default ? '<span class="agent-badge agent-badge-default">default</span>' : ''}
+      </div>
+
+      ${theme ? `<div class="agent-detail-theme-block"><span class="agent-detail-theme">${escapeHtml(theme)}</span></div>` : ''}
+
+      ${renderEditableSection('identity', 'Identity', renderIdentityView(agent), renderIdentityEdit(agent))}
+      ${renderEditableSection('model', 'Model', renderModelView(agent), renderModelEdit(agent))}
+
+      ${renderDetailSection('Workspace', `
+        <div class="agent-detail-row">
+          <span class="agent-detail-label">Path</span>
+          <span class="agent-detail-value agent-detail-mono">${escapeHtml(workspace)}${!agent.workspace ? ' <span class="agent-detail-inherited">(inherited)</span>' : ''}</span>
+        </div>
+      `)}
+
+      ${renderEditableSection('sandbox', 'Sandbox', renderSandboxView(agent), renderSandboxEdit(agent))}
+      ${renderEditableSection('tools', 'Tools', renderToolsView(agent), renderToolsEdit(agent))}
+      ${renderEditableSection('subagents', 'Sub-agents', renderSubagentsView(agent), renderSubagentsEdit(agent))}
+
+      ${renderEditableSection('routing', 'Routing', renderRoutingView(agent, agentBindings), renderRoutingEdit(agent, agentBindings))}
+
+      ${agent.groupChat?.mentionPatterns ? renderDetailSection('Group Chat', `
+        <div class="agent-detail-row">
+          <span class="agent-detail-label">Mentions</span>
+          <span class="agent-detail-value">${agent.groupChat.mentionPatterns.map(p => escapeHtml(p)).join(', ')}</span>
+        </div>
+      `) : ''}
+
+      ${renderRawJsonSection(agent)}
+
+      ${agent.id !== 'main' ? `
+      <div class="agent-detail-danger-zone">
+        <button class="agent-detail-delete" aria-label="Delete agent">Delete Agent</button>
+      </div>` : ''}
+    </div>
+  `;
+}
+
+function renderDetailSection(title, content) {
+  return `
+    <div class="agent-section">
+      <div class="agent-section-header">
+        <span class="agent-section-title">${title}</span>
+      </div>
+      <div class="agent-section-body">
+        ${content}
+      </div>
+    </div>
+  `;
+}
+
+function renderEditableSection(sectionId, title, viewContent, editContent) {
+  const isEditing = editingSection === sectionId;
+  return `
+    <div class="agent-section" data-section="${sectionId}">
+      <div class="agent-section-header">
+        <span class="agent-section-title">${title}</span>
+        ${isEditing 
+          ? `<div class="agent-section-actions">
+              <button class="agent-section-btn agent-section-cancel" data-action="cancel" data-section="${sectionId}">Cancel</button>
+              <button class="agent-section-btn agent-section-save" data-action="save" data-section="${sectionId}">Save</button>
+            </div>`
+          : `<button class="agent-section-btn agent-section-edit" data-action="edit" data-section="${sectionId}">Edit</button>`
+        }
+      </div>
+      <div class="agent-section-body">
+        ${isEditing ? editContent : viewContent}
+      </div>
+    </div>
+  `;
+}
+
+// ============================================
+// VIEW RENDERERS (read-only display)
+// ============================================
+
+function renderIdentityView(agent) {
+  const name = agent.identity?.name || agent.name || agent.id;
+  const emoji = agent.identity?.emoji || '🤖';
+  const theme = agent.identity?.theme || '';
+  
+  let html = `
+    <div class="agent-detail-row">
+      <span class="agent-detail-label">Name</span>
+      <span class="agent-detail-value">${escapeHtml(name)}</span>
+    </div>
+    <div class="agent-detail-row">
+      <span class="agent-detail-label">Emoji</span>
+      <span class="agent-detail-value">${emoji}</span>
+    </div>
+  `;
+  if (theme) {
+    html += `
+      <div class="agent-detail-row">
+        <span class="agent-detail-label">Theme</span>
+        <span class="agent-detail-value">${escapeHtml(theme)}</span>
+      </div>
+    `;
+  }
+  return html;
+}
+
+function renderModelView(agent) {
+  const model = getModelDisplay(agent);
+  const isInherited = !agent.model;
+  const fallbacks = agent.model?.fallbacks || defaults.model?.fallbacks || [];
+
+  let html = `
+    <div class="agent-detail-row">
+      <span class="agent-detail-label">Primary</span>
+      <span class="agent-detail-value">${escapeHtml(model)}${isInherited ? ' <span class="agent-detail-inherited">(inherited)</span>' : ''}</span>
+    </div>
+  `;
+
+  if (fallbacks.length > 0) {
+    html += `
+      <div class="agent-detail-row">
+        <span class="agent-detail-label">Fallbacks</span>
+        <div class="agent-tool-tags">
+          ${fallbacks.map(f => `<span class="agent-tool-tag">${escapeHtml(f)}</span>`).join('')}
+        </div>
+      </div>
+    `;
+  }
+  return html;
+}
+
+function renderSandboxView(agent) {
+  const sandbox = agent.sandbox || defaults.sandbox;
+  if (!sandbox) {
+    return `<div class="agent-detail-row"><span class="agent-detail-value agent-detail-muted">Inherits defaults (off)</span></div>`;
+  }
+
+  const mode = sandbox.mode || 'off';
+  const scope = sandbox.scope || 'session';
+  const access = sandbox.workspaceAccess || 'rw';
+
+  let html = `
+    <div class="agent-detail-row">
+      <span class="agent-detail-label">Mode</span>
+      <span class="agent-detail-value">
+        <span class="agent-badge agent-badge-${mode === 'off' ? 'off' : 'sandbox'}">${mode}</span>
+      </span>
+    </div>
+  `;
+
+  if (mode !== 'off') {
+    html += `
+      <div class="agent-detail-row">
+        <span class="agent-detail-label">Scope</span>
+        <span class="agent-detail-value">${scope}</span>
+      </div>
+      <div class="agent-detail-row">
+        <span class="agent-detail-label">Workspace Access</span>
+        <span class="agent-detail-value">${access}</span>
+      </div>
+    `;
+  }
+  return html;
+}
+
+function renderToolsView(agent) {
+  const tools = agent.tools;
+  if (!tools) {
+    return `<div class="agent-detail-row"><span class="agent-detail-value agent-detail-muted">Full access (no restrictions)</span></div>`;
+  }
+
+  let html = '';
+
+  if (tools.profile) {
+    html += `
+      <div class="agent-detail-row">
+        <span class="agent-detail-label">Profile</span>
+        <span class="agent-detail-value">${escapeHtml(tools.profile)}</span>
+      </div>
+    `;
+  }
+
+  if (tools.allow && tools.allow.length > 0) {
+    html += `
+      <div class="agent-detail-row">
+        <span class="agent-detail-label">Allowed</span>
+        <div class="agent-tool-tags">
+          ${tools.allow.map(t => `<span class="agent-tool-tag agent-tool-allow">${escapeHtml(t)}</span>`).join('')}
+        </div>
+      </div>
+    `;
+  }
+
+  if (tools.deny && tools.deny.length > 0) {
+    html += `
+      <div class="agent-detail-row">
+        <span class="agent-detail-label">Denied</span>
+        <div class="agent-tool-tags">
+          ${tools.deny.map(t => `<span class="agent-tool-tag agent-tool-deny">${escapeHtml(t)}</span>`).join('')}
+        </div>
+      </div>
+    `;
+  }
+
+  return html || `<div class="agent-detail-row"><span class="agent-detail-value agent-detail-muted">Full access</span></div>`;
+}
+
+function renderSubagentsView(agent) {
+  const sub = agent.subagents;
+  const defSub = defaults.subagents || {};
+
+  if (!sub && !defSub.maxConcurrent) {
+    return `<div class="agent-detail-row"><span class="agent-detail-value agent-detail-muted">No sub-agent configuration</span></div>`;
+  }
+
+  let html = '';
+  const effectiveSub = sub || {};
+
+  if (effectiveSub.model) {
+    html += `
+      <div class="agent-detail-row">
+        <span class="agent-detail-label">Default Model</span>
+        <span class="agent-detail-value">${escapeHtml(effectiveSub.model)}</span>
+      </div>
+    `;
+  }
+
+  if (effectiveSub.thinking) {
+    html += `
+      <div class="agent-detail-row">
+        <span class="agent-detail-label">Thinking</span>
+        <span class="agent-detail-value">${escapeHtml(effectiveSub.thinking)}</span>
+      </div>
+    `;
+  }
+
+  if (effectiveSub.allowAgents && effectiveSub.allowAgents.length > 0) {
+    html += `
+      <div class="agent-detail-row">
+        <span class="agent-detail-label">Allowed Models</span>
+        <div class="agent-tool-tags">
+          ${effectiveSub.allowAgents.map(a => `<span class="agent-tool-tag">${escapeHtml(a)}</span>`).join('')}
+        </div>
+      </div>
+    `;
+  }
+
+  const maxConc = effectiveSub.maxConcurrent || defSub.maxConcurrent;
+  if (maxConc) {
+    html += `
+      <div class="agent-detail-row">
+        <span class="agent-detail-label">Max Concurrent</span>
+        <span class="agent-detail-value">${maxConc}${!effectiveSub.maxConcurrent && defSub.maxConcurrent ? ' <span class="agent-detail-inherited">(default)</span>' : ''}</span>
+      </div>
+    `;
+  }
+
+  return html || `<div class="agent-detail-row"><span class="agent-detail-value agent-detail-muted">Inherits defaults</span></div>`;
+}
+
+function renderBindingsDetail(agentBindings) {
+  return agentBindings.map(b => {
+    const match = b.match || {};
+    let desc = match.channel || 'any';
+    if (match.accountId && match.accountId !== '*') desc += ` / ${match.accountId}`;
+    if (match.peer) desc += ` → ${match.peer.kind}: ${match.peer.id}`;
+    if (match.guildId) desc += ` (guild: ${match.guildId})`;
+    if (match.teamId) desc += ` (team: ${match.teamId})`;
+
+    return `
+      <div class="agent-detail-row">
+        <span class="agent-detail-value agent-detail-mono">${escapeHtml(desc)}</span>
+      </div>
+    `;
+  }).join('');
+}
+
+function renderRoutingView(agent, agentBindings) {
+  if (agentBindings.length === 0) {
+    let msg = 'No routes configured';
+    if (agent.default) {
+      msg += ' — receives all unmatched messages';
+    } else {
+      msg += ' — will not receive any messages';
+    }
+    return `<div class="agent-detail-row"><span class="agent-detail-value agent-detail-muted">${msg}</span></div>`;
+  }
+  return renderBindingsDetail(agentBindings);
+}
+
+function renderRoutingEdit(agent, agentBindings) {
+  const channelOptions = channels.map(ch =>
+    `<option value="${escapeAttr(ch)}">${escapeHtml(ch)}</option>`
+  ).join('');
+
+  const agentOptions = agents.map(a =>
+    `<option value="${escapeAttr(a.id)}">${escapeHtml(a.identity?.name || a.name || a.id)}</option>`
+  ).join('');
+
+  // Render existing bindings as editable rows
+  const rows = agentBindings.map((b, i) => renderBindingRow(b, i, channelOptions)).join('');
+
+  return `
+    <div class="agent-binding-info">
+      Routes determine which messages this agent receives. Most-specific match wins.
+      ${agent.default ? '<br><em>As the default agent, unmatched messages come here automatically.</em>' : ''}
+    </div>
+    <div class="agent-bindings-list" id="bindingsList">
+      ${rows || '<div class="agent-detail-muted agent-bindings-empty">No routes — add one below</div>'}
+    </div>
+    <button class="agent-binding-add" id="addBindingBtn">+ Add Route</button>
+  `;
+}
+
+function renderBindingRow(binding, index, _channelOptions) {
+  const match = binding.match || {};
+  const peerKind = match.peer?.kind || '';
+  const peerId = match.peer?.id || '';
+
+  // Build channel options with proper selected state
+  const chOpts = channels.map(ch =>
+    `<option value="${escapeAttr(ch)}" ${ch === (match.channel || '') ? 'selected' : ''}>${escapeHtml(ch)}</option>`
+  ).join('');
+
+  return `
+    <div class="agent-binding-row" data-binding-index="${index}">
+      <div class="agent-binding-fields">
+        <div class="agent-edit-field">
+          <label class="agent-edit-label">Channel</label>
+          <select class="agent-edit-select agent-binding-channel" data-index="${index}">
+            <option value="" ${!match.channel ? 'selected' : ''}>Any channel</option>
+            ${chOpts}
+          </select>
+        </div>
+        <div class="agent-edit-field">
+          <label class="agent-edit-label">Account ID</label>
+          <input type="text" class="agent-edit-input agent-binding-account" data-index="${index}" 
+            value="${escapeAttr(match.accountId || '')}" placeholder="* (any)">
+        </div>
+        <div class="agent-edit-field">
+          <label class="agent-edit-label">Peer Type</label>
+          <select class="agent-edit-select agent-binding-peer-kind" data-index="${index}">
+            <option value="" ${!peerKind ? 'selected' : ''}>None</option>
+            <option value="direct" ${peerKind === 'direct' ? 'selected' : ''}>Direct (DM)</option>
+            <option value="group" ${peerKind === 'group' ? 'selected' : ''}>Group</option>
+            <option value="channel" ${peerKind === 'channel' ? 'selected' : ''}>Channel</option>
+          </select>
+        </div>
+        <div class="agent-edit-field">
+          <label class="agent-edit-label">Peer ID</label>
+          <input type="text" class="agent-edit-input agent-binding-peer-id" data-index="${index}" 
+            value="${escapeAttr(peerId)}" placeholder="e.g. +15551234567 or group ID"
+            ${!peerKind ? 'disabled' : ''}>
+        </div>
+        ${match.guildId ? `
+        <div class="agent-edit-field">
+          <label class="agent-edit-label">Guild ID <span class="agent-edit-hint">(Discord)</span></label>
+          <input type="text" class="agent-edit-input agent-binding-guild" data-index="${index}" 
+            value="${escapeAttr(match.guildId || '')}">
+        </div>` : ''}
+        ${match.teamId ? `
+        <div class="agent-edit-field">
+          <label class="agent-edit-label">Team ID <span class="agent-edit-hint">(Slack)</span></label>
+          <input type="text" class="agent-edit-input agent-binding-team" data-index="${index}" 
+            value="${escapeAttr(match.teamId || '')}">
+        </div>` : ''}
+      </div>
+      <button class="agent-binding-remove" data-index="${index}" title="Remove route">✕</button>
+    </div>
+  `;
+}
+
+// ============================================
+// RAW JSON VIEW
+// ============================================
+
+function renderRawJsonSection(agent) {
+  // Build the raw config object (only non-null fields)
+  const raw = { id: agent.id };
+  if (agent.name && agent.name !== agent.id) raw.name = agent.name;
+  if (agent.default) raw.default = true;
+  if (agent.model) raw.model = agent.model;
+  if (agent.identity) raw.identity = agent.identity;
+  if (agent.workspace) raw.workspace = agent.workspace;
+  if (agent.sandbox) raw.sandbox = agent.sandbox;
+  if (agent.tools) raw.tools = agent.tools;
+  if (agent.subagents) raw.subagents = agent.subagents;
+  if (agent.groupChat) raw.groupChat = agent.groupChat;
+
+  const json = JSON.stringify(raw, null, 2);
+
+  return `
+    <div class="agent-section agent-section-collapsible" data-section="raw">
+      <div class="agent-section-header agent-raw-toggle">
+        <span class="agent-section-title">Raw Config</span>
+        <span class="agent-raw-chevron">▸</span>
+      </div>
+      <div class="agent-section-body agent-raw-body" style="display:none">
+        <pre class="agent-raw-json">${escapeHtml(json)}</pre>
+        <button class="agent-raw-copy" title="Copy to clipboard">Copy JSON</button>
+      </div>
+    </div>
+  `;
+}
+
+// ============================================
+// EDIT RENDERERS (form inputs)
+// ============================================
+
+function renderIdentityEdit(agent) {
+  const name = agent.identity?.name || agent.name || '';
+  const emoji = agent.identity?.emoji || '';
+  const theme = agent.identity?.theme || '';
+
+  return `
+    <div class="agent-edit-field">
+      <label class="agent-edit-label">Display Name</label>
+      <input type="text" class="agent-edit-input" data-field="identity.name" value="${escapeAttr(name)}" placeholder="Agent name">
+    </div>
+    <div class="agent-edit-field">
+      <label class="agent-edit-label">Emoji</label>
+      <input type="text" class="agent-edit-input agent-edit-input-short" data-field="identity.emoji" value="${escapeAttr(emoji)}" placeholder="🤖" maxlength="4">
+    </div>
+    <div class="agent-edit-field">
+      <label class="agent-edit-label">Persona Theme <span class="agent-edit-hint">(injected into system prompt)</span></label>
+      <input type="text" class="agent-edit-input" data-field="identity.theme" value="${escapeAttr(theme)}" placeholder="e.g. helpful assistant, space lobster">
+    </div>
+  `;
+}
+
+function renderModelEdit(agent) {
+  const currentModel = agent.model?.primary || agent.model || '';
+  const isObj = typeof agent.model === 'object' && agent.model !== null;
+  const fallbacks = isObj ? (agent.model.fallbacks || []) : [];
+  const availableModels = defaults.models || [];
+
+  // Build model options from the defaults catalog
+  const modelOptions = availableModels.map(m => 
+    `<option value="${escapeAttr(m)}" ${m === currentModel ? 'selected' : ''}>${escapeHtml(m)}</option>`
+  ).join('');
+
+  return `
+    <div class="agent-edit-field">
+      <label class="agent-edit-label">Primary Model</label>
+      <select class="agent-edit-select" data-field="model.primary">
+        <option value="">Inherit from defaults</option>
+        ${modelOptions}
+      </select>
+    </div>
+    <div class="agent-edit-field">
+      <label class="agent-edit-label">Fallbacks <span class="agent-edit-hint">(comma-separated)</span></label>
+      <input type="text" class="agent-edit-input" data-field="model.fallbacks" value="${escapeAttr(fallbacks.join(', '))}" placeholder="model/name-1, model/name-2">
+    </div>
+  `;
+}
+
+function renderSandboxEdit(agent) {
+  const sandbox = agent.sandbox || {};
+  const mode = sandbox.mode || 'off';
+  const scope = sandbox.scope || 'session';
+  const access = sandbox.workspaceAccess || 'rw';
+
+  return `
+    <div class="agent-edit-field">
+      <label class="agent-edit-label">Mode</label>
+      <select class="agent-edit-select" data-field="sandbox.mode">
+        <option value="off" ${mode === 'off' ? 'selected' : ''}>Off</option>
+        <option value="non-main" ${mode === 'non-main' ? 'selected' : ''}>Non-main sessions</option>
+        <option value="all" ${mode === 'all' ? 'selected' : ''}>All sessions</option>
+      </select>
+    </div>
+    <div class="agent-edit-field">
+      <label class="agent-edit-label">Scope</label>
+      <select class="agent-edit-select" data-field="sandbox.scope">
+        <option value="session" ${scope === 'session' ? 'selected' : ''}>Per session</option>
+        <option value="agent" ${scope === 'agent' ? 'selected' : ''}>Per agent</option>
+        <option value="shared" ${scope === 'shared' ? 'selected' : ''}>Shared</option>
+      </select>
+    </div>
+    <div class="agent-edit-field">
+      <label class="agent-edit-label">Workspace Access</label>
+      <select class="agent-edit-select" data-field="sandbox.workspaceAccess">
+        <option value="rw" ${access === 'rw' ? 'selected' : ''}>Read/Write</option>
+        <option value="ro" ${access === 'ro' ? 'selected' : ''}>Read Only</option>
+        <option value="none" ${access === 'none' ? 'selected' : ''}>None</option>
+      </select>
+    </div>
+  `;
+}
+
+// Tool presets (imported from AgentsUI module)
+
+function renderToolsEdit(agent) {
+  const tools = agent.tools || {};
+  const denyList = tools.deny || [];
+  const allowList = tools.allow || [];
+  const mode = allowList.length > 0 ? 'allow' : denyList.length > 0 ? 'deny' : 'full';
+
+  const presetButtons = Object.entries(TOOL_PRESETS).map(([key, preset]) =>
+    `<button class="agent-preset-btn" data-preset="${key}">${preset.label}</button>`
+  ).join('');
+
+  let html = `
+    <div class="agent-edit-field">
+      <label class="agent-edit-label">Presets</label>
+      <div class="agent-preset-bar">${presetButtons}</div>
+    </div>
+    <div class="agent-edit-field">
+      <label class="agent-edit-label">Mode</label>
+      <select class="agent-edit-select" data-field="tools.mode" id="toolsModeSelect">
+        <option value="full" ${mode === 'full' ? 'selected' : ''}>Full access (no restrictions)</option>
+        <option value="allow" ${mode === 'allow' ? 'selected' : ''}>Allowlist (only selected tools)</option>
+        <option value="deny" ${mode === 'deny' ? 'selected' : ''}>Denylist (block selected tools)</option>
+      </select>
+    </div>
+    <div class="agent-tools-grid" id="toolsGrid" style="${mode === 'full' ? 'display:none' : ''}">
+  `;
+
+  // Render tool groups with checkboxes
+  for (const [groupName, group] of Object.entries(TOOL_GROUPS)) {
+    const activeList = mode === 'allow' ? allowList : denyList;
+    const groupChecked = activeList.includes(group.id);
+    const individualChecked = group.tools.filter(t => activeList.includes(t));
+
+    html += `
+      <div class="agent-tool-group">
+        <label class="agent-tool-group-label">
+          <input type="checkbox" class="agent-tool-group-check" data-group="${group.id}" 
+            ${groupChecked ? 'checked' : ''}>
+          <span>${groupName}</span>
+          <span class="agent-tool-group-hint">${group.tools.join(', ')}</span>
+        </label>
+        <div class="agent-tool-group-items">
+          ${group.tools.map(tool => `
+            <label class="agent-tool-item-label">
+              <input type="checkbox" class="agent-tool-item-check" data-tool="${tool}" data-group-id="${group.id}"
+                ${groupChecked || individualChecked.includes(tool) ? 'checked' : ''}>
+              <span>${tool}</span>
+            </label>
+          `).join('')}
+        </div>
+      </div>
+    `;
+  }
+
+  html += '</div>';
+  return html;
+}
+
+function renderSubagentsEdit(agent) {
+  const sub = agent.subagents || {};
+  const allowAgents = sub.allowAgents || [];
+  const maxConc = sub.maxConcurrent || '';
+
+  return `
+    <div class="agent-edit-field">
+      <label class="agent-edit-label">Allowed Models <span class="agent-edit-hint">(one per line)</span></label>
+      <textarea class="agent-edit-textarea" data-field="subagents.allowAgents" rows="4" placeholder="anthropic/claude-sonnet-4-5&#10;nvidia/moonshotai/kimi-k2.5">${escapeHtml(allowAgents.join('\n'))}</textarea>
+    </div>
+    <div class="agent-edit-field">
+      <label class="agent-edit-label">Max Concurrent</label>
+      <input type="number" class="agent-edit-input agent-edit-input-short" data-field="subagents.maxConcurrent" value="${maxConc}" placeholder="Default" min="1" max="100">
+    </div>
+  `;
+}
+
+// ============================================
+// EDIT STATE MANAGEMENT
+// ============================================
+
+function collectSectionChanges(container, sectionId) {
+  const section = container.querySelector(`[data-section="${sectionId}"]`);
+  if (!section) return null;
+
+  const agent = agents.find(a => a.id === selectedAgentId);
+  if (!agent) return null;
+
+  const changes = {};
+
+  if (sectionId === 'identity') {
+    const name = section.querySelector('[data-field="identity.name"]')?.value?.trim();
+    const emoji = section.querySelector('[data-field="identity.emoji"]')?.value?.trim();
+    const theme = section.querySelector('[data-field="identity.theme"]')?.value?.trim();
+    
+    changes.identity = {
+      ...(agent.identity || {}),
+      name: name || undefined,
+      emoji: emoji || undefined,
+      theme: theme || undefined,
+    };
+    // Clean undefined values
+    Object.keys(changes.identity).forEach(k => {
+      if (changes.identity[k] === undefined || changes.identity[k] === '') delete changes.identity[k];
+    });
+    if (Object.keys(changes.identity).length === 0) changes.identity = null;
+  }
+
+  if (sectionId === 'model') {
+    const primary = section.querySelector('[data-field="model.primary"]')?.value?.trim();
+    const fallbacksRaw = section.querySelector('[data-field="model.fallbacks"]')?.value?.trim();
+    const fallbacks = fallbacksRaw ? fallbacksRaw.split(',').map(s => s.trim()).filter(Boolean) : [];
+
+    if (!primary) {
+      changes.model = null; // inherit from defaults
+    } else {
+      changes.model = { primary };
+      if (fallbacks.length > 0) changes.model.fallbacks = fallbacks;
+    }
+  }
+
+  if (sectionId === 'sandbox') {
+    const mode = section.querySelector('[data-field="sandbox.mode"]')?.value;
+    if (mode === 'off') {
+      changes.sandbox = null; // remove sandbox config
+    } else {
+      changes.sandbox = {
+        mode,
+        scope: section.querySelector('[data-field="sandbox.scope"]')?.value || 'session',
+        workspaceAccess: section.querySelector('[data-field="sandbox.workspaceAccess"]')?.value || 'rw',
+      };
+    }
+  }
+
+  if (sectionId === 'tools') {
+    const mode = section.querySelector('[data-field="tools.mode"]')?.value;
+    if (mode === 'full') {
+      changes.tools = null; // remove tool restrictions
+    } else {
+      const checkedGroups = Array.from(section.querySelectorAll('.agent-tool-group-check:checked')).map(el => el.dataset.group);
+      const checkedTools = Array.from(section.querySelectorAll('.agent-tool-item-check:checked')).map(el => el.dataset.tool);
+      
+      // Merge: use group IDs where all tools in group are checked, individual tools otherwise
+      const toolList = [...new Set([...checkedGroups, ...checkedTools])];
+      
+      if (mode === 'allow') {
+        changes.tools = { allow: toolList };
+      } else {
+        changes.tools = { deny: toolList };
+      }
+    }
+  }
+
+  if (sectionId === 'subagents') {
+    const allowRaw = section.querySelector('[data-field="subagents.allowAgents"]')?.value?.trim();
+    const maxConc = section.querySelector('[data-field="subagents.maxConcurrent"]')?.value?.trim();
+    const allowAgents = allowRaw ? allowRaw.split('\n').map(s => s.trim()).filter(Boolean) : [];
+
+    if (allowAgents.length === 0 && !maxConc) {
+      changes.subagents = null;
+    } else {
+      changes.subagents = {};
+      if (allowAgents.length > 0) changes.subagents.allowAgents = allowAgents;
+      if (maxConc) changes.subagents.maxConcurrent = parseInt(maxConc, 10);
+    }
+  }
+
+  return changes;
+}
+
+// ============================================
+// ROUTING / BINDINGS SAVE
+// ============================================
+
+function collectBindingsFromEditor(container) {
+  const rows = container.querySelectorAll('.agent-binding-row');
+  const agentBindings = [];
+
+  rows.forEach(row => {
+    const channel = row.querySelector('.agent-binding-channel')?.value?.trim();
+    const accountId = row.querySelector('.agent-binding-account')?.value?.trim();
+    const peerKind = row.querySelector('.agent-binding-peer-kind')?.value?.trim();
+    const peerId = row.querySelector('.agent-binding-peer-id')?.value?.trim();
+    const guildId = row.querySelector('.agent-binding-guild')?.value?.trim();
+    const teamId = row.querySelector('.agent-binding-team')?.value?.trim();
+
+    const match = {};
+    if (channel) match.channel = channel;
+    if (accountId && accountId !== '*') match.accountId = accountId;
+    if (peerKind && peerId) match.peer = { kind: peerKind, id: peerId };
+    if (guildId) match.guildId = guildId;
+    if (teamId) match.teamId = teamId;
+
+    agentBindings.push({ agentId: selectedAgentId, match });
+  });
+
+  return agentBindings;
+}
+
+async function saveBindings(container) {
+  try {
+    // Collect the edited bindings for this agent
+    const editedBindings = collectBindingsFromEditor(container);
+
+    // Build the full bindings array: other agents' bindings + this agent's edited ones
+    const otherBindings = bindings.filter(b => b.agentId !== selectedAgentId);
+    const allBindings = [...otherBindings, ...editedBindings];
+
+    const result = await AgentsData.saveBindings(allBindings, () => {
+      showToast('Config was modified externally. Refreshing...', 'warning');
+      syncState();
+      rerender();
+    });
+    
+    syncState();
+    if (result) {
+      showToast('Routes updated', 'success');
+    }
+    return result;
+  } catch (err) {
+    showToast(`Save failed: ${err.message}`, 'error');
+    return false;
+  }
+}
+
+// ============================================
+// CREATE FORM
+// ============================================
+
+function renderCreateForm() {
+  const availableModels = defaults.models || [];
+  const modelOptions = availableModels.map(m => 
+    `<option value="${escapeAttr(m)}">${escapeHtml(m)}</option>`
+  ).join('');
+
+  return `
+    <div class="agent-detail">
+      <div class="agent-detail-header">
+        <button class="agent-detail-back" aria-label="Back to agent list">← Back</button>
+      </div>
+
+      <div class="agent-create-title">New Agent</div>
+      <div class="agent-create-warning">
+        ⚠️ Creating an agent requires a gateway restart. Active sessions will briefly disconnect.
+      </div>
+
+      <div class="agent-section">
+        <div class="agent-section-header"><span class="agent-section-title">Identity</span></div>
+        <div class="agent-section-body">
+          <div class="agent-edit-field">
+            <label class="agent-edit-label">Agent ID <span class="agent-edit-hint">(lowercase, alphanumeric + hyphens, permanent)</span></label>
+            <input type="text" class="agent-edit-input" id="newAgentId" placeholder="my-agent" pattern="[a-z0-9][a-z0-9-]*">
+          </div>
+          <div class="agent-edit-field">
+            <label class="agent-edit-label">Display Name</label>
+            <input type="text" class="agent-edit-input" id="newAgentName" placeholder="My Agent">
+          </div>
+          <div class="agent-edit-field">
+            <label class="agent-edit-label">Emoji</label>
+            <input type="text" class="agent-edit-input agent-edit-input-short" id="newAgentEmoji" placeholder="🤖" maxlength="4">
+          </div>
+        </div>
+      </div>
+
+      <div class="agent-section">
+        <div class="agent-section-header"><span class="agent-section-title">Model</span></div>
+        <div class="agent-section-body">
+          <div class="agent-edit-field">
+            <label class="agent-edit-label">Primary Model</label>
+            <select class="agent-edit-select" id="newAgentModel">
+              <option value="">Inherit from defaults</option>
+              ${modelOptions}
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div class="agent-section">
+        <div class="agent-section-header"><span class="agent-section-title">Workspace</span></div>
+        <div class="agent-section-body">
+          <div class="agent-edit-field">
+            <label class="agent-edit-label">Path <span class="agent-edit-hint">(leave empty for default)</span></label>
+            <input type="text" class="agent-edit-input" id="newAgentWorkspace" placeholder="Auto-generated">
+          </div>
+        </div>
+      </div>
+
+      <div class="agents-list-actions" style="padding-top: 12px;">
+        <button class="agents-create-btn agents-create-submit" id="submitCreateAgent">Create Agent & Restart Gateway</button>
+      </div>
+    </div>
+  `;
+}
+
+function bindCreateEvents(container) {
+  container.querySelector('.agent-detail-back')?.addEventListener('click', () => {
+    currentView = 'list';
+    rerender();
+  });
+
+  container.querySelector('#submitCreateAgent')?.addEventListener('click', async () => {
+    const id = container.querySelector('#newAgentId')?.value?.trim();
+    const name = container.querySelector('#newAgentName')?.value?.trim();
+    const emoji = container.querySelector('#newAgentEmoji')?.value?.trim();
+    const model = container.querySelector('#newAgentModel')?.value?.trim();
+    const workspace = container.querySelector('#newAgentWorkspace')?.value?.trim();
+
+    if (!id) {
+      showToast('Agent ID is required', 'error');
+      return;
+    }
+    if (!/^[a-z0-9][a-z0-9-]*$/.test(id)) {
+      showToast('Agent ID must be lowercase alphanumeric + hyphens', 'error');
+      return;
+    }
+    if (agents.some(a => a.id === id)) {
+      showToast(`Agent "${id}" already exists`, 'error');
+      return;
+    }
+
+    const agent = { id };
+    if (name) agent.name = name;
+    if (emoji || name) {
+      agent.identity = {};
+      if (name) agent.identity.name = name;
+      if (emoji) agent.identity.emoji = emoji;
+    }
+    if (model) agent.model = model;
+    if (workspace) agent.workspace = workspace;
+
+    await createAgent(agent);
+  });
+}
+
+// ============================================
+// DELETE CONFIRMATION
+// ============================================
+
+function showDeleteConfirm(agentId, container) {
+  const agent = agents.find(a => a.id === agentId);
+  const name = agent?.identity?.name || agent?.name || agentId;
+
+  const overlay = document.createElement('div');
+  overlay.className = 'agent-confirm-overlay';
+  overlay.innerHTML = `
+    <div class="agent-confirm-dialog">
+      <div class="agent-confirm-title">Delete Agent</div>
+      <div class="agent-confirm-body">
+        Are you sure you want to delete <strong>${escapeHtml(name)}</strong>?
+        <div class="agent-create-warning" style="margin-top:8px;">
+          ⚠️ This requires a gateway restart. Active sessions will briefly disconnect. Any bindings routing to this agent will also be removed.
+        </div>
+      </div>
+      <div class="agent-confirm-actions">
+        <button class="agent-section-btn agent-section-cancel" id="confirmCancel">Cancel</button>
+        <button class="agent-section-btn agent-confirm-delete" id="confirmDelete">Delete & Restart</button>
+      </div>
+    </div>
+  `;
+
+  container.appendChild(overlay);
+
+  overlay.querySelector('#confirmCancel').addEventListener('click', () => overlay.remove());
+  overlay.querySelector('#confirmDelete').addEventListener('click', async () => {
+    overlay.remove();
+    await deleteAgent(agentId);
+  });
+}
+
+// ============================================
+// RESTART OVERLAY
+// ============================================
+
+function renderRestartOverlay() {
+  return `
+    <div class="agent-restart-overlay">
+      <div class="agent-restart-content">
+        <span class="agents-loading-dot"></span>
+        <div class="agent-restart-title">Gateway Restarting...</div>
+        <div class="agent-restart-sub">Active sessions will reconnect automatically.</div>
+      </div>
+    </div>
+  `;
+}
+
+function startRestartWatcher() {
+  restartPending = true;
+  rerender();
+
+  let attempts = 0;
+  const maxAttempts = 20;
+  const interval = setInterval(async () => {
+    attempts++;
+    try {
+      const response = await fetch('/api/agents', { signal: AbortSignal.timeout(3000) });
+      if (response.ok) {
+        clearInterval(interval);
+        restartPending = false;
+        loaded = false;
+        await fetchAgents();
+        currentView = 'list';
+        selectedAgentId = null;
+        editingSection = null;
+        rerender();
+        showToast('Gateway restarted successfully', 'success');
+      }
+    } catch (e) {
+      // Still down, keep trying
+    }
+
+    if (attempts >= maxAttempts) {
+      clearInterval(interval);
+      restartPending = false;
+      rerender();
+      showToast('Gateway didn\'t come back. Check the terminal.', 'error');
+    }
+  }, 2000);
+}
+
+// ============================================
+// CREATE / DELETE API
+// ============================================
+
+async function createAgent(agent) {
+  try {
+    const data = await AgentsData.createAgent(agent);
+    syncState();
+    
+    if (data.requiresRestart) {
+      startRestartWatcher();
+    } else {
+      loaded = false;
+      await fetchAgents();
+      currentView = 'list';
+      rerender();
+      showToast(`Agent "${agent.id}" created`, 'success');
+    }
+  } catch (err) {
+    showToast(`Create failed: ${err.message}`, 'error');
+  }
+}
+
+async function deleteAgent(agentId) {
+  try {
+    const data = await AgentsData.deleteAgent(agentId);
+    syncState();
+    
+    if (data.requiresRestart) {
+      startRestartWatcher();
+    } else {
+      loaded = false;
+      await fetchAgents();
+      currentView = 'list';
+      selectedAgentId = null;
+      rerender();
+      showToast(`Agent "${agentId}" deleted`, 'success');
+    }
+  } catch (err) {
+    showToast(`Delete failed: ${err.message}`, 'error');
+  }
+}
+
+// ============================================
+// HELPERS
+// ============================================
+
+function getModelDisplay(agent) {
+  if (!agent.model) {
+    const primary = defaults.model?.primary || defaults.model;
+    if (typeof primary === 'string') return shortenModel(primary);
+    if (primary?.primary) return shortenModel(primary.primary);
+    return 'default';
+  }
+  if (typeof agent.model === 'string') return shortenModel(agent.model);
+  if (agent.model.primary) return shortenModel(agent.model.primary);
+  return 'default';
+}
+
+function shortenModel(model) {
+  if (!model) return 'default';
+  const parts = model.split('/');
+  return parts.length > 1 ? parts.slice(1).join('/') : model;
+}
+
+function getSandboxBadge(agent) {
+  const sandbox = agent.sandbox || defaults.sandbox;
+  if (!sandbox || sandbox.mode === 'off') return '';
+  if (sandbox.mode === 'all') return '<span class="agent-badge agent-badge-sandbox">sandboxed</span>';
+  if (sandbox.mode === 'non-main') return '<span class="agent-badge agent-badge-partial">partial sandbox</span>';
+  return '';
+}
+
+function getToolsSummary(agent) {
+  if (!agent.tools) return '';
+  if (agent.tools.allow && agent.tools.allow.length > 0) {
+    return `${agent.tools.allow.length} allowed`;
+  }
+  if (agent.tools.deny && agent.tools.deny.length > 0) {
+    return `${agent.tools.deny.length} denied`;
+  }
+  return '';
+}
+
+// escapeHtml and escapeAttr now imported from AgentsUI module
+
+// ============================================
+// EVENT BINDING
+// ============================================
+
+function bindBindingRowEvents(container, row) {
+  if (!row) return;
+
+  // Remove button
+  const removeBtn = row.querySelector('.agent-binding-remove');
+  if (removeBtn) {
+    removeBtn.addEventListener('click', () => {
+      row.remove();
+      // If no rows left, show empty message
+      const list = container.querySelector('#bindingsList');
+      if (list && list.querySelectorAll('.agent-binding-row').length === 0) {
+        list.innerHTML = '<div class="agent-detail-muted agent-bindings-empty">No routes — add one below</div>';
+      }
+    });
+  }
+
+  // Peer kind toggle — enable/disable peer ID field
+  const peerKindSelect = row.querySelector('.agent-binding-peer-kind');
+  const peerIdInput = row.querySelector('.agent-binding-peer-id');
+  if (peerKindSelect && peerIdInput) {
+    peerKindSelect.addEventListener('change', () => {
+      peerIdInput.disabled = !peerKindSelect.value;
+      if (!peerKindSelect.value) peerIdInput.value = '';
+    });
+  }
+}
+
+function bindListEvents(container) {
+  // Attach avatar error handlers
+  container.querySelectorAll('.agent-list-avatar-img').forEach(img => {
+    img.addEventListener('error', function() {
+      const parent = this.parentElement;
+      const emoji = parent.dataset.fallbackEmoji || '🤖';
+      parent.innerHTML = emoji;
+    });
+  });
+
+  container.querySelectorAll('.agent-item').forEach(item => {
+    item.addEventListener('click', () => {
+      selectedAgentId = item.dataset.agentId;
+      currentView = 'detail';
+      editingSection = null;
+      pendingChanges = {};
+      render(container);
+    });
+  });
+
+  const refreshBtn = container.querySelector('.agents-refresh-btn');
+  if (refreshBtn) {
+    refreshBtn.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      loaded = false;
+      render(container);
+    });
+  }
+
+  const createBtn = container.querySelector('#createAgentBtn');
+  if (createBtn) {
+    createBtn.addEventListener('click', () => {
+      currentView = 'create';
+      render(container);
+    });
+  }
+}
+
+function bindDetailEvents(container) {
+  // Back button
+  const backBtn = container.querySelector('.agent-detail-back');
+  if (backBtn) {
+    backBtn.addEventListener('click', () => {
+      currentView = 'list';
+      selectedAgentId = null;
+      editingSection = null;
+      pendingChanges = {};
+      render(container);
+    });
+  }
+
+  // Delete button
+  const deleteBtn = container.querySelector('.agent-detail-delete');
+  if (deleteBtn) {
+    deleteBtn.addEventListener('click', () => {
+      showDeleteConfirm(selectedAgentId, container);
+    });
+  }
+
+  // Hero image load/error handling (no inline handlers — CSP-safe)
+  const heroImg = container.querySelector('.agent-detail-hero-img');
+  const heroFallback = container.querySelector('.agent-detail-hero-fallback');
+  if (heroImg && heroFallback) {
+    heroImg.addEventListener('load', () => {
+      heroImg.style.display = 'block';
+      heroFallback.style.display = 'none';
+    });
+    heroImg.addEventListener('error', () => {
+      heroImg.style.display = 'none';
+      heroFallback.style.display = 'flex';
+    });
+    // If already loaded/errored (cached), handle immediately
+    if (heroImg.complete) {
+      if (heroImg.naturalWidth > 0) {
+        heroImg.style.display = 'block';
+        heroFallback.style.display = 'none';
+      } else {
+        heroImg.style.display = 'none';
+        heroFallback.style.display = 'flex';
+      }
+    }
+  }
+
+  // Avatar upload — hero banner (detail view) or circular widget (list view)
+  const avatarUpload = container.querySelector('.agent-detail-hero') || container.querySelector('.agent-avatar-upload');
+  if (avatarUpload) {
+    const fileInput = avatarUpload.querySelector('.agent-avatar-input');
+    avatarUpload.addEventListener('click', (e) => {
+      // Don't trigger file upload when clicking Back/Delete buttons
+      if (e.target.closest('.agent-detail-back') || e.target.closest('.agent-detail-delete')) return;
+      if (e.target !== fileInput) fileInput.click();
+    });
+    fileInput.addEventListener('change', async () => {
+      const file = fileInput.files[0];
+      if (!file) return;
+      const agentId = avatarUpload.dataset.agentId;
+      try {
+        await AgentsData.uploadAgentAvatar(agentId, file);
+        // Refresh the preview — handle both hero and circular layouts
+        const preview = avatarUpload.querySelector('.agent-detail-hero-img') || avatarUpload.querySelector('.agent-avatar-preview');
+        const fallback = avatarUpload.querySelector('.agent-detail-hero-fallback') || avatarUpload.querySelector('.agent-avatar-fallback');
+        if (preview) {
+          preview.src = `/img/agents/${agentId}.png?t=${Date.now()}`;
+          preview.style.display = 'block';
+        }
+        if (fallback) fallback.style.display = 'none';
+        showToast('Avatar updated', 'success');
+      } catch (err) {
+        showToast('Failed to upload avatar', 'error');
+      }
+    });
+  }
+
+  // Edit / Cancel / Save buttons
+  container.querySelectorAll('.agent-section-btn').forEach(btn => {
+    btn.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      const action = btn.dataset.action;
+      const sectionId = btn.dataset.section;
+
+      if (action === 'edit') {
+        editingSection = sectionId;
+        render(container);
+      } else if (action === 'cancel') {
+        editingSection = null;
+        pendingChanges = {};
+        render(container);
+      } else if (action === 'save') {
+        let ok = false;
+        if (sectionId === 'routing') {
+          // Routing uses a separate save path (PUT /api/bindings)
+          ok = await saveBindings(container);
+        } else {
+          const changes = collectSectionChanges(container, sectionId);
+          if (changes && selectedAgentId) {
+            ok = await saveAgentChanges(selectedAgentId, changes);
+          }
+        }
+        if (ok) {
+          editingSection = null;
+          pendingChanges = {};
+          render(container);
+        }
+      }
+    });
+  });
+
+  // Tools mode toggle — show/hide grid
+  const toolsModeSelect = container.querySelector('#toolsModeSelect');
+  if (toolsModeSelect) {
+    toolsModeSelect.addEventListener('change', () => {
+      const grid = container.querySelector('#toolsGrid');
+      if (grid) {
+        grid.style.display = toolsModeSelect.value === 'full' ? 'none' : '';
+      }
+    });
+  }
+
+  // Routing: Add binding button
+  const addBindingBtn = container.querySelector('#addBindingBtn');
+  if (addBindingBtn) {
+    addBindingBtn.addEventListener('click', () => {
+      const list = container.querySelector('#bindingsList');
+      if (!list) return;
+
+      // Remove empty message if present
+      const emptyMsg = list.querySelector('.agent-bindings-empty');
+      if (emptyMsg) emptyMsg.remove();
+
+      const index = list.querySelectorAll('.agent-binding-row').length;
+      const channelOpts = channels.map(ch =>
+        `<option value="${escapeAttr(ch)}">${escapeHtml(ch)}</option>`
+      ).join('');
+
+      const newBinding = { agentId: selectedAgentId, match: {} };
+      const rowHtml = renderBindingRow(newBinding, index, channelOpts);
+      list.insertAdjacentHTML('beforeend', rowHtml);
+
+      // Bind events for the new row
+      bindBindingRowEvents(container, list.querySelector(`[data-binding-index="${index}"]`));
+    });
+  }
+
+  // Routing: Bind events for existing rows
+  container.querySelectorAll('.agent-binding-row').forEach(row => {
+    bindBindingRowEvents(container, row);
+  });
+
+  // Raw JSON toggle
+  const rawToggle = container.querySelector('.agent-raw-toggle');
+  if (rawToggle) {
+    rawToggle.addEventListener('click', () => {
+      const body = rawToggle.closest('.agent-section').querySelector('.agent-raw-body');
+      const chevron = rawToggle.querySelector('.agent-raw-chevron');
+      if (body) {
+        const isHidden = body.style.display === 'none';
+        body.style.display = isHidden ? '' : 'none';
+        if (chevron) chevron.textContent = isHidden ? '▾' : '▸';
+      }
+    });
+  }
+
+  // Raw JSON copy
+  const rawCopy = container.querySelector('.agent-raw-copy');
+  if (rawCopy) {
+    rawCopy.addEventListener('click', () => {
+      const json = container.querySelector('.agent-raw-json')?.textContent;
+      if (json) {
+        navigator.clipboard.writeText(json).then(() => showToast('Copied to clipboard', 'success'));
+      }
+    });
+  }
+
+  // Tool preset buttons
+  container.querySelectorAll('.agent-preset-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const preset = TOOL_PRESETS[btn.dataset.preset];
+      if (!preset) return;
+
+      const modeSelect = container.querySelector('#toolsModeSelect');
+      const grid = container.querySelector('#toolsGrid');
+
+      if (modeSelect) {
+        modeSelect.value = preset.mode;
+        if (grid) grid.style.display = preset.mode === 'full' ? 'none' : '';
+      }
+
+      // Uncheck everything first
+      container.querySelectorAll('.agent-tool-group-check, .agent-tool-item-check').forEach(cb => { cb.checked = false; });
+
+      // Check the preset items
+      preset.list.forEach(item => {
+        const groupCb = container.querySelector(`.agent-tool-group-check[data-group="${item}"]`);
+        if (groupCb) {
+          groupCb.checked = true;
+          // Also check all items in that group
+          const groupId = groupCb.dataset.group;
+          container.querySelectorAll(`.agent-tool-item-check[data-group-id="${groupId}"]`).forEach(cb => { cb.checked = true; });
+        } else {
+          const toolCb = container.querySelector(`.agent-tool-item-check[data-tool="${item}"]`);
+          if (toolCb) toolCb.checked = true;
+        }
+      });
+
+      // Highlight active preset
+      container.querySelectorAll('.agent-preset-btn').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+    });
+  });
+
+  // Tool group checkboxes — toggle all items in group
+  container.querySelectorAll('.agent-tool-group-check').forEach(groupCheck => {
+    groupCheck.addEventListener('change', () => {
+      const groupId = groupCheck.dataset.group;
+      const items = container.querySelectorAll(`.agent-tool-item-check[data-group-id="${groupId}"]`);
+      items.forEach(item => { item.checked = groupCheck.checked; });
+    });
+  });
+}
+
+// ============================================
+// PUBLIC API
+// ============================================
+
+function resetView() {
+  currentView = 'list';
+  selectedAgentId = null;
+  editingSection = null;
+  pendingChanges = {};
+}
+
+function refresh() {
+  loaded = false;
+  loading = false;
+}
+
+export const UplinkAgents = {
+  render,
+  resetView,
+  refresh,
+  fetchAgents,
+  getAgents: () => agents,
+  getDefaults: () => defaults,
+  isLoaded: () => loaded,
+};
+
+// Backward compat: assign to window
+window.UplinkAgents = UplinkAgents;
+
+logger.debug('Agents: Module loaded');