UHD_Media_Tool/apps/web/app/components/status/attention-cards.tsx

import type { AgentSpendBucket, AgentSpendKind } from "@umt/contracts";
import { BellRing, Bot } from "lucide-react";
import { Link } from "react-router";
import { useAgentSpend, useAttention } from "~/api/attention.ts";
import { ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
import { settingsPath } from "~/components/console/nav.ts";
import { AttentionList, attentionRows } from "~/components/dashboard/attention-summary.tsx";
import { formatRelative } from "~/lib/labels.ts";
import { humanizeReason } from "~/lib/reasons.ts";

// 运行状态页(2026-10-06):「需要关注」汇总(整理需要处理、等你批准、系统健康,系统健康逐条列出、恢复后自动消失)
// 与智能体用量(今天 / 最近 7 天按会话类型;不设上限,只展示)。

function Slab({
  id,
  title,
  icon: Icon,
  children,
}: {
  id?: string;
  title: string;
  icon: typeof Bot;
  children: React.ReactNode;
}) {
  return (
    <section id={id} className="pg-slab min-w-0 scroll-mt-20 rounded-xl p-5">
      <div className="mb-3 flex items-center gap-2">
        <Icon className="h-4 w-4 text-muted-foreground" />
        <h2 className="text-body font-semibold text-foreground">{title}</h2>
      </div>
      {children}
    </section>
  );
}

export function AttentionCard() {
  const q = useAttention();
  const rows = attentionRows(q.data);
  const health = q.data?.health.items ?? [];
  return (
    <Slab id="attention" title="需要关注" icon={BellRing}>
      {q.isPending ? (
        <LoadingState rows={2} />
      ) : q.isError ? (
        <ErrorState plain error={q.error} onRetry={() => q.refetch()} />
      ) : rows.length === 0 ? (
        <p className="text-caption text-muted-foreground">
          没有需要处理的整理记录，也没有等你批准的操作；站点、下载器和下载目录都正常。
        </p>
      ) : (
        <>
          <AttentionList rows={rows} />
          {health.length ? (
            <ul className="mt-3 space-y-2 border-t border-border/60 pt-3">
              {health.map((d) => (
                <li key={d.id} className="min-w-0 text-caption">
                  <p className="font-medium break-words text-foreground">{d.title}</p>
                  {d.summary ? (
                    <p className="break-words text-meta text-muted-foreground">{humanizeReason(d.summary)}</p>
                  ) : null}
                  <p className="text-meta text-muted-foreground">{formatRelative(d.createdAt)}起，恢复后自动消失</p>
                </li>
              ))}
            </ul>
          ) : null}
        </>
      )}
    </Slab>
  );
}

const KIND_LABEL: Record<AgentSpendKind, string> = {
  chat: "对话",
  patrol: "巡检",
  investigate: "后台调查",
  organize_identify: "整理识别",
  subagent: "子会话",
};

const usd = (n: number) => `$${n < 0.01 && n > 0 ? n.toFixed(4) : n.toFixed(2)}`;

function SpendBlock({ label, b }: { label: string; b: AgentSpendBucket }) {
  return (
    <div className="min-w-0">
      <p className="text-meta text-muted-foreground">{label}</p>
      <p className="text-title-sm font-semibold text-foreground tabular-nums">
        {usd(b.costUsd)}
        <span className="ml-1.5 text-caption font-normal text-muted-foreground">{b.runs} 次</span>
      </p>
      {b.byKind.length ? (
        <ul className="mt-1 space-y-0.5 text-meta text-muted-foreground tabular-nums">
          {b.byKind.map((k) => (
            <li key={k.kind}>
              {KIND_LABEL[k.kind]} {k.runs} 次 · {usd(k.costUsd)}
            </li>
          ))}
        </ul>
      ) : null}
    </div>
  );
}

/** 智能体用量(设置页「用量与限制」也用) */
export function AgentSpendSummary() {
  const q = useAgentSpend();
  if (q.isPending) return <LoadingState rows={2} />;
  if (q.isError) return <ErrorState plain error={q.error} onRetry={() => q.refetch()} />;
  if (!q.data.last7d.runs) return <p className="text-caption text-muted-foreground">最近 7 天智能体没有运行。</p>;
  return (
    <div className="grid gap-4 sm:grid-cols-2">
      <SpendBlock label="今天" b={q.data.today} />
      <SpendBlock label="最近 7 天" b={q.data.last7d} />
    </div>
  );
}

export function AgentSpendCard() {
  return (
    <Slab title="智能体用量" icon={Bot}>
      <AgentSpendSummary />
      <p className="mt-3 text-meta text-muted-foreground">
        不设次数和花费上限，只限制单次的工具调用次数与时长。
        <Link to={settingsPath("agent", "budget")} className="ml-1 underline-offset-4 hover:underline">
          调整
        </Link>
      </p>
    </Slab>
  );
}