MailUI4Agents/web/src/components/QuotaPanel.tsx

import { useCallback, useEffect, useState } from 'react';
import * as api from '../api/client';
import { BotIcon, CheckIcon } from './icons';

/**
 * Agent 新任务默认预算（管理员）。
 *
 * **这里配的是默认值，不是额度。**
 *
 * 额度（往返预算）属于具体任务 —— 在写信时给、在对话页里随时改。
 * 这个面板只决定「派给某个 Agent 的新任务，如果没人显式指定，默认给几个来回」：
 * 跑测试的小工具与重构整个模块的 Agent，合理来回数差一个量级，所以分开设。
 *
 * 累计发信数只是观测数据，不拦任何请求 —— 之前它是「终身额度」，
 * 但终身额度跑满要人工重置才能再干活，而 Agent 是长期在线的。
 */
export default function QuotaPanel() {
  const [stats, setStats] = useState<api.AgentStats[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState<string | null>(null);
  const [drafts, setDrafts] = useState<Record<string, string>>({});

  const load = useCallback(async () => {
    try {
      const r = await api.adminListAgentStats();
      setStats(r.quotas);
      setError(null);
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    }
  }, []);

  useEffect(() => {
    load();
  }, [load]);

  const apply = async (name: string, defaultRounds: number) => {
    setBusy(name);
    setError(null);
    try {
      await api.adminSetDefaultRounds(name, defaultRounds);
      await load();
      setDrafts(d => {
        const next = { ...d };
        delete next[name];
        return next;
      });
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setBusy(null);
    }
  };

  return (
    <div className="space-y-3">
      <div className="flex items-center gap-2">
        <BotIcon className="w-4 h-4 text-gray-500" />
        <h3 className="text-sm font-semibold text-gray-900">Agent 新任务默认预算</h3>
        <span className="text-xs text-gray-400">{stats.length}</span>
      </div>

      <p className="text-[11px] text-gray-500">
        派给某个 Agent 的新任务默认多少个来回（填 0 = 不限）。这只是默认值 ——
        写信时可以单独指定，之后在对话页里还能随时调整。
        <br />
        插件自动转发的最终总结与权限询问不占用预算。
      </p>

      {error && <div className="text-xs text-red-600">{error}</div>}

      {stats.length === 0 ? (
        <div className="text-xs text-gray-400 py-3">暂无已注册的 Agent</div>
      ) : (
        <div className="border border-gray-200 rounded-md divide-y divide-gray-100">
          {stats.map(s => {
            const draft = drafts[s.agent_name] ?? String(s.default_rounds);
            const dirty = draft !== String(s.default_rounds);
            const invalid = draft.trim() !== '' && !/^\d+$/.test(draft.trim());
            return (
              <div key={s.agent_name} className="px-3 py-2.5 flex items-center gap-x-3 gap-y-1 flex-wrap">
                <span className="text-xs font-mono text-gray-900 w-32 shrink-0 truncate">
                  {s.agent_name}
                </span>

                <div className="min-w-0 flex-1 text-[11px] text-gray-500">
                  {s.default_rounds === 0 ? '默认不限来回' : `默认 ${s.default_rounds} 个来回`}
                  <span className="text-gray-400">
                    {' · '}进行中 {s.active_sessions} 个任务 · 累计发信 {s.sent_total}
                  </span>
                </div>

                <input
                  value={draft}
                  onChange={e => setDrafts(d => ({ ...d, [s.agent_name]: e.target.value }))}
                  inputMode="numeric"
                  title="新任务默认往返数；0 = 不限"
                  className={`w-16 text-xs border rounded px-1.5 py-1 shrink-0 focus:outline-none focus:ring-2 focus:ring-blue-100 ${
                    invalid ? 'border-red-300' : 'border-gray-300'
                  }`}
                />
                <button
                  onClick={() => apply(s.agent_name, Number(draft.trim() || '0'))}
                  disabled={!dirty || invalid || busy === s.agent_name}
                  title="保存默认预算"
                  className="shrink-0 text-gray-400 hover:text-blue-600 disabled:opacity-30"
                >
                  <CheckIcon className="w-4 h-4" />
                </button>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}