agent-tank 0.9.9 → 0.9.11

package/src/agents/codex.js

@@ -1,3 +1,5 @@
+/* eslint-disable max-lines -- Codex JSON-RPC and PTY integrations share one provider implementation. */
+
 const { BaseAgent } = require('./base.js');
 const logger = require('../logger.js');
 const { JsonRpcClient } = require('../json-rpc-client.js');
@@ -13,16 +15,24 @@ const {
   extractMetadataFromOutput,
 } = require('./codex-pty-helpers.js');
 const { pingKeepalive } = require('./keepalive-helper.js');
+const { version: packageVersion } = require('../../package.json');
 
 class CodexAgent extends BaseAgent {
-  constructor() {
+  constructor(options = {}) {
     super('codex', 'codex');
+    this.configPath = options.configPath || null;
     this._rpcClient = null;
     this._rpcSupported = null; // null = unknown, true/false = tested
   }
 
   getTimeout() { return 25000; }
 
+  getEnv() {
+    const env = { ...process.env, TERM: 'xterm-256color' };
+    if (this.configPath) env.CODEX_HOME = this.configPath;
+    return env;
+  }
+
   /**
    * Override runCommand to attempt JSON-RPC first, then fall back to PTY
    */
@@ -55,8 +65,9 @@ class CodexAgent extends BaseAgent {
       this._rpcClient = null;
     }
 
-    this._rpcClient = new JsonRpcClient('codex', ['-s', 'read-only', '-a', 'untrusted', 'app-server'], {
+    this._rpcClient = new JsonRpcClient('codex', ['app-server'], {
       cwd: '/tmp',
+      env: this.getEnv(),
       timeout: this.getTimeout(),
     });
 
@@ -64,6 +75,15 @@ class CodexAgent extends BaseAgent {
       await this._rpcClient.start();
       console.log(`[${this.name}] JSON-RPC server started`);
 
+      await this._rpcClient.call('initialize', {
+        clientInfo: {
+          name: 'agent_tank',
+          title: 'Agent Tank',
+          version: packageVersion,
+        },
+      });
+      this._rpcClient.notify('initialized', {});
+
       const rateLimits = await this._rpcClient.call('account/rateLimits/read', {});
       console.log(`[${this.name}] Received rate limits via JSON-RPC:`, JSON.stringify(rateLimits));
 
@@ -112,7 +132,14 @@ class CodexAgent extends BaseAgent {
     return output.includes('? for shortcuts') || output.includes('To get started') ||
            output.includes('% left') || /›\s*\S/.test(this.stripAnsi(output));
   }
-  sendCommands(shell, _output) { logger.agent(this.name, 'Sending /status command...'); setTimeout(() => { if (shell) shell.write('/status\r'); }, 100); }
+  sendCommands(shell, _output) {
+    logger.agent(this.name, 'Sending /status command...');
+    // Codex 0.158 keeps the slash-command picker open after the first Enter.
+    // Confirm the picker entry, then submit the selected command.
+    setTimeout(() => { if (shell) shell.write('/status'); }, 100);
+    setTimeout(() => { if (shell) shell.write('\r'); }, 500);
+    setTimeout(() => { if (shell) shell.write('\r'); }, 900);
+  }
 
   _handleAdditionalPrompts(shell, _data, output) {
     if (!shell) return;
@@ -154,7 +181,7 @@ class CodexAgent extends BaseAgent {
           cols: 120,
           rows: 40,
           cwd: '/tmp',
-          env: { ...process.env, TERM: 'xterm-256color' },
+          env: this.getEnv(),
         });
         if (typeof this.shell.pid === 'number') {
           logger.agent(this.name, 'Persistent process pid:', logger.dim(String(this.shell.pid)));
@@ -244,8 +271,7 @@ class CodexAgent extends BaseAgent {
         if (!this.hasCompleteOutput(this.output) && this.shell) {
           logger.agent(this.name, 'Retrying /status...');
           this.output = '';
-          this.shell.write('/status');
-          setTimeout(() => { if (this.shell) this.shell.write('\r'); }, 200);
+          this.sendCommands(this.shell, '');
         }
       }, 5000);
 
@@ -264,8 +290,15 @@ class CodexAgent extends BaseAgent {
   }
 
   hasCompleteOutput(output) {
-    if (output.includes('5h limit') && output.includes('Weekly limit')) return true;
-    return false;
+    const clean = this.stripAnsi(output);
+    if (clean.includes('5h limit') && clean.includes('Weekly limit')) return true;
+
+    const hasWeekly = /Weekly limit:\s*\[.*?\]\s*\d+%\s*left\s*\(resets\s*[^)]+\)/i.test(clean);
+    if (!hasWeekly) return false;
+
+    // Pro accounts can expose only the weekly window (secondary is null in the
+    // equivalent JSON-RPC response), so waiting for a 5h row always times out.
+    return true;
   }
 
   parseResetTime(resetStr) {
@@ -372,7 +405,7 @@ class CodexAgent extends BaseAgent {
       name: this.name,
       command: this.command,
       args: this.args,
-      env: { ...process.env, TERM: 'xterm-256color' },
+      env: this.getEnv(),
       termName: 'xterm-256color',
       isReady: (output) => this.isReadyForStatus(output),
       sendCommand: (shell) => setTimeout(() => shell.write('/status\r'), 100),

package/src/agents/oauth-helper.js

@@ -91,7 +91,7 @@ function readSecretToolCredentials() {
  * Read OAuth credentials from all available sources in priority order.
  * @returns {{ accessToken: string, refreshToken?: string, expiresAt?: number, source: string }|null}
  */
-function readCredentials() {
+function readCredentials(configPath = null) {
   // 1. Environment variable (no refresh possible)
   if (process.env.CLAUDE_CODE_OAUTH_TOKEN) {
     return { accessToken: process.env.CLAUDE_CODE_OAUTH_TOKEN, source: 'env' };
@@ -99,10 +99,16 @@ function readCredentials() {
 
   // 2. Credentials file
   const homeDir = process.env.HOME || process.env.USERPROFILE || '';
-  const credentialsPath = path.join(homeDir, '.claude', '.credentials.json');
+  const credentialsPath = configPath
+    ? path.join(configPath, '.credentials.json')
+    : path.join(homeDir, '.claude', '.credentials.json');
   const fileCreds = readCredentialsFile(credentialsPath);
   if (fileCreds) return { ...fileCreds, source: 'credentials_file' };
 
+  // Keychain helpers only know the default Claude account. Falling through here
+  // would silently read the wrong account for a custom CLAUDE_CONFIG_DIR.
+  if (configPath) return null;
+
   // 3. macOS Keychain
   const keychainCreds = readKeychainCredentials();
   if (keychainCreds) return { ...keychainCreds, source: 'keychain' };
@@ -185,9 +191,11 @@ function refreshOAuthToken(refreshToken) {
  * Persist refreshed tokens back to the credentials file.
  * @param {{ accessToken: string, refreshToken: string, expiresAt: number|null }} tokens
  */
-function persistRefreshedTokens(tokens) {
+function persistRefreshedTokens(tokens, configPath = null) {
   const homeDir = process.env.HOME || process.env.USERPROFILE || '';
-  const credentialsPath = path.join(homeDir, '.claude', '.credentials.json');
+  const credentialsPath = configPath
+    ? path.join(configPath, '.credentials.json')
+    : path.join(homeDir, '.claude', '.credentials.json');
   const raw = fs.readFileSync(credentialsPath, 'utf8');
   const credentials = JSON.parse(raw);
   credentials.claudeAiOauth = {

package/src/agents/pty-output-parser.js

@@ -6,6 +6,11 @@
 const { calculatePace } = require('../pace-evaluator.js');
 const { CYCLE_DURATIONS } = require('../usage-formatters.js');
 
+// Header of the Fable allowance section: "Current week (Fable)" or a standalone
+// "Fable allowance" label. PTY redraws often drop letters ("Curnt week(Fable)"),
+// so the "Current" word is matched loosely.
+const FABLE_SECTION_START = '(?:C\\w*\\s*week\\s*\\(?\\s*Fable[^)%\\n]*\\)?|Fable\\s*allowance)';
+
 /**
  * Convert 12-hour time to 24-hour
  * @param {string} hourRaw - Hour value as string
@@ -248,27 +253,39 @@ function addPaceData(sectionData, cycleType) {
  * @returns {Object} Parsed usage object
  */
 function parsePtyOutput(clean) {
-  const usage = { session: null, weeklyAll: null, weeklySonnet: null };
+  const usage = { session: null, weeklyAll: null, weeklyFable: null };
 
-  // Parse session
-  const sessionData = parseUsageSection(extractSection(clean, 'Current\\s*session', 'Current\\s*week'));
+  // Parse session. The "Current session" label is frequently corrupted while
+  // Claude's /usage dialog is still rendering (e.g. "Curretsession"), even
+  // though the bar, "N% used", and reset time are intact. When the labeled
+  // extraction fails, fall back to the region before the weekly section — the
+  // session block is the only "N% used" that appears there.
+  let sessionData = parseUsageSection(extractSection(clean, 'Current\\s*session', 'Current\\s*week'));
+  if (!sessionData) {
+    const beforeWeekly = clean.split(/Current\s*week/i);
+    // length > 1 confirms the weekly section exists, i.e. this is real /usage
+    // output and beforeWeekly[0] is the session region (not unrelated text).
+    if (beforeWeekly.length > 1) {
+      sessionData = parseUsageSection(beforeWeekly[0]);
+    }
+  }
   if (sessionData) {
     usage.session = { label: 'Current session', ...sessionData };
     addPaceData(usage.session, 'session');
   }
 
   // Parse weekly (all models)
-  const weeklyAllData = parseUsageSection(extractSection(clean, 'Current\\s*week\\s*\\(?\\s*all\\s*models\\s*\\)?', 'Current\\s*week\\s*\\(?\\s*Son'));
+  const weeklyAllData = parseUsageSection(extractSection(clean, 'Current\\s*week\\s*\\(?\\s*all\\s*models\\s*\\)?', `Extra\\s*usage|esc\\s*to\\s*cancel|${FABLE_SECTION_START}`));
   if (weeklyAllData) {
     usage.weeklyAll = { label: 'Current week (all models)', ...weeklyAllData };
     addPaceData(usage.weeklyAll, 'weekly');
   }
 
-  // Parse weekly (Sonnet only)
-  const weeklySonnetData = parseUsageSection(extractSection(clean, 'Current\\s*week\\s*\\(?\\s*Son\\w*\\s*\\w*ly\\s*\\)?', 'Extra\\s*usage|esc\\s*to\\s*cancel|Current\\s*week\\s*\\('));
-  if (weeklySonnetData) {
-    usage.weeklySonnet = { label: 'Current week (Sonnet only)', ...weeklySonnetData };
-    addPaceData(usage.weeklySonnet, 'weekly');
+  // Parse weekly Fable allowance (tracked separately from the all-models cap)
+  const weeklyFableData = parseUsageSection(extractSection(clean, FABLE_SECTION_START, 'Extra\\s*usage|Usage\\s*credits|esc\\s*to\\s*cancel|Current\\s*week\\s*\\('));
+  if (weeklyFableData) {
+    usage.weeklyFable = { label: 'Current week (Fable)', ...weeklyFableData };
+    addPaceData(usage.weeklyFable, 'weekly');
   }
 
   // Parse extra usage section
@@ -282,7 +299,7 @@ function parsePtyOutput(clean) {
   }
 
   // Legacy format fallback
-  if (!usage.weeklyAll && !usage.weeklySonnet) {
+  if (!usage.weeklyAll && !usage.weeklyFable) {
     const legacyWeekly = parseLegacyWeekly(clean);
     if (legacyWeekly) {
       usage.weekly = legacyWeekly;
@@ -294,6 +311,7 @@ function parsePtyOutput(clean) {
 }
 
 module.exports = {
+  FABLE_SECTION_START,
   parsePtyOutput,
   parseResetTime,
   formatDuration,

package/src/auto-refresh-manager.js

@@ -1,4 +1,4 @@
-const { ActivityMonitor } = require('./activity-monitor.js');
+const { ActivityMonitor, getAgentLogDirectories } = require('./activity-monitor.js');
 
 /**
  * Manages auto-refresh behavior for AgentTank.
@@ -117,6 +117,10 @@ class AutoRefreshManager {
    */
   _startActivityBasedRefresh() {
     const agentNames = Array.from(this.agents.keys());
+    const logDirectories = {};
+    for (const [id, agent] of this.agents) {
+      logDirectories[id] = getAgentLogDirectories(agent.provider || agent.name, agent.configPath);
+    }
     const debounceMs = this.config.activityDebounce;
     const intervalSeconds = this.config.interval;
 
@@ -125,6 +129,7 @@ class AutoRefreshManager {
     this.activityMonitor = new ActivityMonitor({
       debounceInterval: debounceMs,
       agents: agentNames,
+      logDirectories,
       onActivity: (event) => {
         this._handleActivityDetected(event);
       },

package/src/client-auto-refresh-helpers.js

@@ -49,20 +49,20 @@ const timeHelpers = `
 
 const metricExtractors = `
     // Extract metrics from Claude usage data
-    function extractClaudeMetrics(usage) {
+    function extractClaudeMetrics(usage, agentId = 'claude') {
       const metrics = [];
       const sections = [
         { data: usage.session, label: 'Session', cycle: 'session' },
         { data: usage.weeklyAll, label: 'Weekly (all)', cycle: 'weekly' },
-        { data: usage.weeklySonnet, label: 'Weekly (Sonnet)', cycle: 'weekly' },
+        { data: usage.weeklyFable, label: 'Weekly (Fable)', cycle: 'weekly' },
         { data: usage.weekly, label: 'Weekly', cycle: 'weekly' }
       ];
       for (const { data, label, cycle } of sections) {
         if (data) {
-          const metricId = \`claude-\${label.toLowerCase().replace(/[^a-z0-9]/g, '-')}\`;
+          const metricId = \`\${agentId}-\${label.toLowerCase().replace(/[^a-z0-9]/g, '-')}\`;
           metrics.push({
             metricId,
-            agent: 'claude',
+            agent: agentId,
             label,
             percent: data.percent ?? 0,
             resetsIn: data.resetsIn || '',
@@ -75,20 +75,20 @@ const metricExtractors = `
     }
 
     // Extract metrics from Antigravity usage data
-    function extractAgyMetrics(usage) {
+    function extractAgyMetrics(usage, agentId = 'agy') {
       const metrics = [];
       if (usage.models && usage.models.length > 0) {
         for (const model of usage.models) {
           const modelName = model.model;
-          const metricId = \`agy-\${modelName.toLowerCase().replace(/[^a-z0-9]/g, '-')}\`;
+          const metricId = \`\${agentId}-\${modelName.toLowerCase().replace(/[^a-z0-9]/g, '-')}\`;
           metrics.push({
             metricId,
-            agent: 'agy',
+            agent: agentId,
             label: modelName,
             percent: model.percentUsed ?? 0,
             resetsIn: model.resetsIn || '',
             resetsAt: model.resetsAt || '',
-            cycle: 'sessionAgy'
+            cycle: model.cycle || 'sessionAgy'
           });
         }
       }
@@ -96,7 +96,7 @@ const metricExtractors = `
     }
 
     // Extract metrics from Codex usage data
-    function extractCodexMetrics(usage) {
+    function extractCodexMetrics(usage, agentId = 'codex') {
       const metrics = [];
       const models = [];
       if (usage.fiveHour || usage.weekly) {
@@ -109,8 +109,8 @@ const metricExtractors = `
         const modelSlug = ml.name.toLowerCase().replace(/[^a-z0-9]/g, '-');
         if (ml.fiveHour) {
           metrics.push({
-            metricId: \`codex-\${modelSlug}-5h\`,
-            agent: 'codex',
+            metricId: \`\${agentId}-\${modelSlug}-5h\`,
+            agent: agentId,
             label: '5h limit',
             modelName: ml.name,
             percent: ml.fiveHour.percentUsed ?? 0,
@@ -121,8 +121,8 @@ const metricExtractors = `
         }
         if (ml.weekly) {
           metrics.push({
-            metricId: \`codex-\${modelSlug}-weekly\`,
-            agent: 'codex',
+            metricId: \`\${agentId}-\${modelSlug}-weekly\`,
+            agent: agentId,
             label: 'Weekly',
             modelName: ml.name,
             percent: ml.weekly.percentUsed ?? 0,

package/src/client-auto-refresh.js

@@ -139,13 +139,14 @@ ${metricExtractors}
         for (const [agentName, agentData] of Object.entries(status)) {
           if (!agentData.usage) continue;
 
+          const provider = agentData.provider || agentData.name || agentName;
           let metrics = [];
-          if (agentName === 'claude') {
-            metrics = extractClaudeMetrics(agentData.usage);
-          } else if (agentName === 'agy') {
-            metrics = extractAgyMetrics(agentData.usage);
-          } else if (agentName === 'codex') {
-            metrics = extractCodexMetrics(agentData.usage);
+          if (provider === 'claude') {
+            metrics = extractClaudeMetrics(agentData.usage, agentName);
+          } else if (provider === 'agy') {
+            metrics = extractAgyMetrics(agentData.usage, agentName);
+          } else if (provider === 'codex') {
+            metrics = extractCodexMetrics(agentData.usage, agentName);
           }
 
           // Update DOM for each metric
@@ -155,7 +156,8 @@ ${metricExtractors}
           }
 
           // Update agent card error state
-          const agentCard = document.querySelector(\`.agent-card.agent-\${agentName}\`);
+          const agentCard = Array.from(document.querySelectorAll('.agent-card'))
+            .find(card => card.dataset.agentId === agentName);
           if (agentCard) {
             if (agentData.error) {
               agentCard.classList.add('error');

package/src/client-script.js

@@ -107,7 +107,7 @@ const clientScript = faviconScript + `
       }
 
       try {
-        await fetch('/refresh/' + agent, { method: 'POST' });
+        await fetch('/refresh/' + encodeURIComponent(agent), { method: 'POST' });
         // Use XHR update instead of page reload
         await performAutoRefresh();
         if (isIconBtn) {

package/src/index.js

@@ -15,6 +15,7 @@ const { extractSnapshotMetrics } = require('./snapshot-metrics.js');
 const { attachPaceEvaluation } = require('./pace-attachment.js');
 const { KeepaliveManager } = require('./keepalive-manager.js');
 const { AutoRefreshManager } = require('./auto-refresh-manager.js');
+const { normalizeAgentSpecs } = require('./agent-config.js');
 
 // Load package.json for version info
 const pkg = require(path.join(__dirname, '..', 'package.json'));
@@ -250,13 +251,15 @@ class AgentTank {
       }
     }
 
+    const agentSpecs = normalizeAgentSpecs(agentNames);
+
     // Create agent instances
-    for (const name of agentNames) {
-      const agent = this.createAgent(name);
+    for (const spec of agentSpecs) {
+      const agent = this.createAgent(spec);
       if (agent) {
         agent.freshProcess = this.freshProcess;
-        this.agents.set(name, agent);
-        logger.agent(name, `Created agent${this.freshProcess ? ' (fresh process mode)' : ''}`);
+        this.agents.set(spec.id, agent);
+        logger.agent(spec.provider, `Created agent ${spec.id}${this.freshProcess ? ' (fresh process mode)' : ''}`);
       }
     }
 
@@ -324,18 +327,31 @@ class AgentTank {
     }
   }
 
-  createAgent(name) {
-    switch (name) {
+  createAgent(input) {
+    const spec = typeof input === 'string'
+      ? { provider: input, id: input, alias: null, configPath: null }
+      : input;
+    let agent;
+    switch (spec.provider) {
       case 'claude':
-        return new ClaudeAgent({ useApi: this.claudeApi });
+        agent = new ClaudeAgent({ useApi: this.claudeApi, configPath: spec.configPath });
+        break;
       case 'agy':
-        return new AgyAgent();
+        agent = new AgyAgent({ configPath: spec.configPath });
+        break;
       case 'codex':
-        return new CodexAgent();
+        agent = new CodexAgent({ configPath: spec.configPath });
+        break;
       default:
-        logger.warn(`Unknown agent: ${name}`);
+        logger.warn(`Unknown agent: ${spec.provider}`);
         return null;
     }
+
+    agent.provider = spec.provider;
+    agent.id = spec.id;
+    agent.alias = spec.alias;
+    agent.configPath = spec.configPath;
+    return agent;
   }
 
   async refreshAll() {
@@ -344,7 +360,7 @@ class AgentTank {
     }
 
     logger.info('🔄 Refreshing all agents...');
-    const agentNames = Array.from(this.agents.keys());
+    const providers = [...new Set(Array.from(this.agents.values(), agent => agent.provider))];
 
     // Fetch PTY agent data and public status concurrently
     const [, publicStatusResult] = await Promise.all([
@@ -359,7 +375,7 @@ class AgentTank {
         )
       ),
       // Public API status polling
-      fetchPublicStatus(agentNames).catch(err => {
+      fetchPublicStatus(providers).catch(err => {
         logger.error('Error fetching public status:', err.message);
         return {};
       }),
@@ -371,8 +387,8 @@ class AgentTank {
     // Record usage snapshots and attach pace evaluations
     for (const [name, agent] of this.agents) {
       if (agent.usage) {
-        this._recordSnapshot(name, agent.usage);
-        attachPaceEvaluation(name, agent.usage);
+        this._recordSnapshot(name, agent.provider, agent.usage);
+        attachPaceEvaluation(agent.provider, agent.usage);
       }
     }
 
@@ -380,12 +396,12 @@ class AgentTank {
   }
 
   /** Record a usage snapshot to the history store. @private */
-  _recordSnapshot(agentName, usage) {
+  _recordSnapshot(agentId, provider, usage) {
     try {
-      const snapshot = extractSnapshotMetrics(agentName, usage);
-      if (snapshot) this.historyStore.addSnapshot(agentName, snapshot);
+      const snapshot = extractSnapshotMetrics(provider, usage);
+      if (snapshot) this.historyStore.addSnapshot(agentId, snapshot);
     } catch (err) {
-      console.error(`[${agentName}] Error recording snapshot:`, err.message);
+      console.error(`[${agentId}] Error recording snapshot:`, err.message);
     }
   }
 
@@ -402,8 +418,8 @@ class AgentTank {
 
     // Record snapshot and attach pace evaluation for single agent refresh
     if (agent.usage) {
-      this._recordSnapshot(name, agent.usage);
-      attachPaceEvaluation(name, agent.usage);
+      this._recordSnapshot(name, agent.provider, agent.usage);
+      attachPaceEvaluation(agent.provider, agent.usage);
     }
   }
 
@@ -457,14 +473,25 @@ class AgentTank {
   getStatus() {
     const status = {};
     for (const [name, agent] of this.agents) {
-      status[name] = { ...agent.getStatus(), publicStatus: this.publicStatus[name] || null };
+      status[name] = {
+        ...agent.getStatus(),
+        id: name,
+        alias: agent.alias,
+        provider: agent.provider,
+        publicStatus: this.publicStatus[agent.provider] || null,
+      };
     }
     return status;
   }
 
   getAgentStatus(name) {
     const agent = this.agents.get(name);
-    return agent ? agent.getStatus() : null;
+    return agent ? {
+      ...agent.getStatus(),
+      id: name,
+      alias: agent.alias,
+      provider: agent.provider,
+    } : null;
   }
 
   authenticate(req, url) {

package/src/pace-attachment.js

@@ -36,7 +36,7 @@ function attachClaudePace(usage) {
   const sections = [
     { data: usage.session, cycle: 'session' },
     { data: usage.weeklyAll, cycle: 'weekly' },
-    { data: usage.weeklySonnet, cycle: 'weekly' },
+    { data: usage.weeklyFable, cycle: 'weekly' },
     { data: usage.weekly, cycle: 'weekly' },
     { data: usage.extraUsage, cycle: 'weekly' }
   ];
@@ -54,7 +54,7 @@ function attachAgyPace(usage) {
   if (!usage.models || !Array.isArray(usage.models)) return;
 
   for (const model of usage.models) {
-    attachPaceToData(model, 'percentUsed', 'sessionAgy');
+    attachPaceToData(model, 'percentUsed', model.cycle || 'sessionAgy');
   }
 }
 

package/src/snapshot-metrics.js

@@ -13,7 +13,7 @@ function extractClaudeMetrics(usage) {
   return {
     session: usage.session?.percent ?? null,
     weeklyAll: usage.weeklyAll?.percent ?? null,
-    weeklySonnet: usage.weeklySonnet?.percent ?? null,
+    weeklyFable: usage.weeklyFable?.percent ?? null,
     weekly: usage.weekly?.percent ?? null,
     extraUsage: usage.extraUsage?.percent ?? null
   };

package/src/status-page.js

@@ -71,20 +71,25 @@ function renderCardFooter(data) {
 }
 
 function renderAgentCard([name, data]) {
-  const usageHtml = formatUsage(name, data.usage);
+  const provider = data.provider || data.name || name;
+  const usageHtml = formatUsage(provider, data.usage, { agentId: name });
   const statusClass = data.error ? 'error' : data.isRefreshing ? 'refreshing' : 'ok';
-  const icon = agentIcons[name] || '';
-  const displayName = getAgentDisplayName(name);
+  const icon = agentIcons[provider] || '';
+  const providerName = getAgentDisplayName(provider);
+  const displayName = data.alias && data.alias !== provider
+    ? `${providerName} · ${data.alias}`
+    : providerName;
   const statusBadgeHtml = renderPublicStatusBadge(data.publicStatus);
   const footerHtml = renderCardFooter(data);
+  const refreshArgument = escapeHtml(JSON.stringify(name));
 
   return `
-      <div class="agent-card ${statusClass} agent-${name}">
+      <div class="agent-card ${statusClass} agent-${escapeHtml(provider)}" data-agent-id="${escapeHtml(name)}">
         <h2 class="agent-heading">
           ${icon}
-          <span>${displayName}</span>
+          <span>${escapeHtml(displayName)}</span>
           ${statusBadgeHtml}
-          <button class="refresh-icon-btn" onclick="refresh('${name}', event)" ${data.isRefreshing ? 'disabled' : ''} title="Refresh ${displayName}">
+          <button class="refresh-icon-btn" onclick="refresh(${refreshArgument}, event)" ${data.isRefreshing ? 'disabled' : ''} title="Refresh ${escapeHtml(displayName)}">
             ${refreshIcon}
           </button>
         </h2>