import {
  type AgentRunStatus,
  type Approval,
  CAPABILITY_CATALOG,
  type CapabilityDescriptor,
  type KnownCapabilityId,
} from "@umt/contracts";
import {
  Ban,
  Brain,
  Check,
  ChevronDown,
  ChevronRight,
  CircleAlert,
  CircleSlash,
  Layers,
  LoaderCircle,
  RotateCcw,
} from "lucide-react";
import { type ReactNode, useEffect, useId, useRef, useState } from "react";
import { Link } from "react-router";
import { toast } from "sonner";
import {
  type AgentRunView,
  agentMockEnabled,
  type GoalReport,
  type InvocationAudit,
  isProposeFirst,
  isRunActive,
  RUN_STATUS_LABEL,
  RUN_STATUS_TONE,
  useApproveAndRetry,
  useDecideApproval,
  useIsAdminSession,
} from "~/api/agent.ts";
import { ApprovalCard, type ApprovalCardStatus } from "~/components/agentui/approval-card.tsx";
import { CHEVRON_CLASS, Disclosure } from "~/components/agentui/disclosure.tsx";
import { Markdown } from "~/components/agentui/markdown.tsx";
import { MessageMarker, MessageTyping } from "~/components/agentui/message.tsx";
import { StreamingResponse } from "~/components/agentui/streaming-response.tsx";
import { StatusBadge } from "~/components/console/status-badge.tsx";
import { TechInfo } from "~/components/console/tech-info.tsx";
import { formatUsd } from "~/components/schedules/labels.ts";
import { Button } from "~/components/ui/button.tsx";
import { errorMessage } from "~/lib/api.ts";
import { humanizeReason } from "~/lib/reasons.ts";
import { cn, formatDateTime } from "~/lib/utils.ts";
import { InlineApproval, OptionsCard } from "./agent-interaction.tsx";
import { splitContextGoal } from "./agent-store.ts";
import {
  type ActivityItem,
  activitySpan,
  activitySummary,
  authDenial,
  buildConversation,
  capabilityTitle,
  deniedReason,
  durationLabel,
  isDenied,
  runningText,
  toolSummary,
} from "./conversation-model.ts";
import { ToolCallIo } from "./tool-call-card-io.tsx";
import type { AgentStreamState, StreamItem, ToolCallView } from "./use-agent-stream.ts";

// 智能体会话的展示层(AGUI-3):用户消息 → 一行进度 → 结论正文 → 没做的事 → 一行实际结果。
// 排版规则在 conversation-model.ts(纯函数);组件改造自 agentui(components/agentui/,MIT)。
// 服务端事件形状见 packages/contracts/src/agent-events.ts;旧会话的事件照样按这套规则渲染。

export { authDenial, isDenied, toolSummary };

export const BUDGET_LABEL: Record<string, string> = {
  tool_calls: "工具调用次数",
  duration: "运行时长",
  tokens: "token",
  cost: "费用",
};
const COMPACT_STATUS: Record<string, string> = {
  completed: "已完成",
  declined: "没有压缩",
  aborted: "已中止",
  failed: "失败",
};

export function capabilityMeta(id: string): CapabilityDescriptor | null {
  return (CAPABILITY_CATALOG as Record<string, CapabilityDescriptor>)[id as KnownCapabilityId] ?? null;
}

function durationText(a: string, b: string | null) {
  if (!b) return null;
  const ms = new Date(b).getTime() - new Date(a).getTime();
  return ms < 1000 ? `${ms} ms` : `${(ms / 1000).toFixed(1)} s`;
}

// ── 用户消息 ──

/** 上下文标签:只显示对象名称(「沙丘：第二部」),ID 留在目标前缀里给模型看 */
export function contextLabel(context: string | null): string | null {
  if (!context) return null;
  const first = context.split(" · ")[0] ?? "";
  // 前缀里第一段是界面给的名称(「作品：沙丘2」);没有名称时只剩 key=ID,不上屏
  if (!first || first.includes("=")) return null;
  return first.replace(/^(作品|资源|下载|整理记录|站点|任务|引擎任务)[：:]\s*/, "");
}

export function UserMessage({
  text,
  note,
  tag,
  animateIn,
}: {
  text: string;
  note?: string;
  /** 单次指令标记(如「先给方案」) */
  tag?: string;
  animateIn?: boolean;
}) {
  const { context, text: body } = splitContextGoal(text);
  const label = contextLabel(context);
  return (
    <div
      className={cn(
        "flex w-full min-w-0 flex-col items-end gap-1",
        animateIn && "animate-in fade-in-0 slide-in-from-bottom-1 duration-base ease-pop motion-reduce:animate-none",
      )}
    >
      {label || tag ? (
        <div className="flex max-w-[85%] flex-wrap justify-end gap-1">
          {tag ? (
            <span className="rounded-full border border-border/70 px-2 py-0.5 text-label text-muted-foreground">
              {tag}
            </span>
          ) : null}
          {label ? (
            <span className="max-w-full truncate rounded-full border border-border/70 px-2 py-0.5 text-label text-muted-foreground">
              {label}
            </span>
          ) : null}
        </div>
      ) : null}
      <div
        data-slot="user-message"
        className="max-w-[85%] rounded-2xl border border-border/60 bg-foreground/[0.05] px-3.5 py-2 text-sm leading-6 break-words whitespace-pre-wrap text-foreground"
      >
        {body}
      </div>
      {note ? <p className="px-1 text-label text-muted-foreground">{note}</p> : null}
    </div>
  );
}

// ── 进度行 ──

function ThinkingRow({ text }: { text: string }) {
  const id = useId();
  const [open, setOpen] = useState(false);
  return (
    <li className="min-w-0">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        aria-expanded={open}
        aria-controls={id}
        className="flex min-h-7 w-full cursor-pointer items-center gap-2 rounded-md px-1 text-left text-meta text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
      >
        <Brain aria-hidden className="size-3.5 shrink-0" />
        思考 · {text.length} 字
        <ChevronDown aria-hidden className={cn("size-3", CHEVRON_CLASS, open && "rotate-180")} />
      </button>
      <Disclosure id={id} open={open}>
        <p className="mt-1 mb-1 ml-6 max-h-64 overflow-auto border-l-2 border-border pl-3 text-caption leading-5 break-words whitespace-pre-wrap text-muted-foreground">
          {text}
        </p>
      </Disclosure>
    </li>
  );
}

function StepIcon({ call }: { call: ToolCallView }) {
  if (call.status === "running")
    return <LoaderCircle aria-hidden className="size-3.5 shrink-0 animate-spin motion-reduce:animate-none" />;
  if (isDenied(call)) return <Ban aria-hidden className="size-3.5 shrink-0 text-muted-foreground" />;
  if (call.status === "failed") return <CircleAlert aria-hidden className="size-3.5 shrink-0 text-destructive" />;
  return <Check aria-hidden className="size-3.5 shrink-0 text-muted-foreground" />;
}

/** 展开后的一步:「搜资源 → 3 条」;点开看技术信息(能力 ID、调用 ID、幂等键、输入输出) */
function ToolRow({ call, audit }: { call: ToolCallView; audit?: InvocationAudit }) {
  const id = useId();
  const [open, setOpen] = useState(false);
  const meta = capabilityMeta(call.capabilityId);
  const denied = isDenied(call);
  const summary = denied ? deniedReason(call).text : toolSummary(call);
  return (
    <li className="min-w-0">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        aria-expanded={open}
        aria-controls={id}
        className="flex min-h-7 w-full min-w-0 cursor-pointer items-center gap-2 rounded-md px-1 text-left text-meta outline-none hover:bg-foreground/[0.03] focus-visible:ring-2 focus-visible:ring-ring"
      >
        <StepIcon call={call} />
        <span className={cn("shrink-0 text-foreground/85", denied && "text-muted-foreground line-through")}>
          {meta?.title ?? capabilityTitle(call.capabilityId)}
        </span>
        {summary ? (
          <span
            className={cn(
              "min-w-0 flex-1 truncate text-muted-foreground",
              call.status === "failed" && !denied && "text-destructive",
            )}
          >
            → {summary}
          </span>
        ) : (
          <span className="flex-1" />
        )}
        <span className="shrink-0 text-muted-foreground tabular-nums">
          {durationText(call.startedAt, call.endedAt) ?? ""}
        </span>
      </button>
      <Disclosure id={id} open={open}>
        <div className="mt-1 mb-2 ml-6 grid gap-2 text-meta">
          <TechInfo
            title="技术信息"
            items={[
              { label: "能力", value: call.capabilityId },
              { label: "调用 ID", value: call.toolCallId },
              { label: "幂等键", value: audit?.idempotencyKey ?? null },
              {
                label: "授权依据",
                value: audit?.grantId
                  ? `持续授权 ${audit.grantId.slice(0, 8)}`
                  : audit?.approvalId
                    ? `单次审批 ${audit.approvalId.slice(0, 8)}`
                    : null,
              },
              { label: "拒绝原因", value: denied ? (authDenial(call) ?? call.reason) : null, wide: true },
              { label: "恢复补记", value: call.recovery ? "是" : null },
            ]}
          >
            <ToolCallIo call={call} />
          </TechInfo>
        </div>
      </Disclosure>
    </li>
  );
}

/**
 * 一段进度的一行摘要:「查了 1 个站点和媒体库 · 1 项没做 · 41 秒 ›」;运行中写「正在检测站点…」。
 * 展开后每步一行;思考与工具之间的话也在里面。
 */
export function StepSummary({
  activity,
  running,
  auditByCall,
}: {
  activity: ActivityItem[];
  running: boolean;
  auditByCall?: Map<string, InvocationAudit>;
}) {
  const id = useId();
  const [open, setOpen] = useState(false);
  const calls = activity.flatMap((a) => (a.kind === "tool" ? [a.call] : []));
  const current = running ? calls.find((c) => c.status === "running") : undefined;
  const done = activitySummary(calls.filter((c) => c.status !== "running"));
  const denied = calls.filter(isDenied).length;
  const failed = calls.filter((c) => c.status === "failed" && !isDenied(c)).length;
  const span = activitySpan(activity);
  const thinking = activity.some((a) => a.kind === "thinking");
  const head = current
    ? `${done ? `${done}，` : ""}${runningText(current)}…`
    : done || (running ? "思考中…" : thinking ? "想了一下" : "过程说明");
  return (
    <div className="w-full min-w-0" data-slot="step-summary">
      <button
        type="button"
        aria-expanded={open}
        aria-controls={id}
        onClick={() => setOpen((v) => !v)}
        className="-mx-1 flex min-h-8 w-[calc(100%+0.5rem)] min-w-0 cursor-pointer items-center gap-2 rounded-lg px-1 text-left text-meta text-muted-foreground outline-none transition-colors duration-micro hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
      >
        {running ? (
          <LoaderCircle aria-hidden className="size-3.5 shrink-0 animate-spin motion-reduce:animate-none" />
        ) : (
          <Layers aria-hidden className="size-3.5 shrink-0" />
        )}
        <span className="min-w-0 truncate">{head}</span>
        {denied ? <span className="shrink-0">· {denied} 项没做</span> : null}
        {failed ? <span className="shrink-0 text-destructive">· {failed} 项失败</span> : null}
        {span !== null && !running ? <span className="shrink-0 tabular-nums">· {durationLabel(span)}</span> : null}
        <ChevronRight aria-hidden className={cn("size-3.5 shrink-0", CHEVRON_CLASS, open && "rotate-90")} />
      </button>
      <Disclosure id={id} open={open}>
        <ul className="mt-0.5 mb-1 flex flex-col border-l border-border/70 pl-2">
          {activity.map((a) =>
            a.kind === "tool" ? (
              <ToolRow key={a.key} call={a.call} audit={auditByCall?.get(a.call.toolCallId)} />
            ) : a.kind === "thinking" ? (
              <ThinkingRow key={a.key} text={a.text} />
            ) : (
              <li
                key={a.key}
                className="line-clamp-3 px-1 py-1 text-meta break-words whitespace-pre-wrap text-muted-foreground"
              >
                {a.text.trim()}
              </li>
            ),
          )}
        </ul>
      </Disclosure>
    </div>
  );
}

// ── 没做的事 ──

/** 回合末尾一行:「没做：检测站点，需要你批准 [批准并重试]」;同一能力只写一次 */
export function DeniedLines({ runId, calls }: { runId: string; calls: ToolCallView[] }) {
  const admin = useIsAdminSession() || agentMockEnabled();
  const retry = useApproveAndRetry();
  const [sent, setSent] = useState<Set<string>>(new Set());
  const rows = [...new Map(calls.map((c) => [c.capabilityId, c] as const)).values()];
  if (!rows.length) return null;
  return (
    <ul aria-label="没做的操作" className="flex w-full min-w-0 flex-col gap-1">
      {rows.map((c) => {
        const title = capabilityTitle(c.capabilityId);
        const r = deniedReason(c);
        const done = sent.has(c.capabilityId);
        return (
          <li key={c.toolCallId} className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-caption">
            <Ban aria-hidden className="size-3.5 shrink-0 text-muted-foreground" />
            <span className="min-w-0 text-foreground/85">
              没做：{title}，{r.text}
            </span>
            {r.approvable && admin ? (
              <Button
                size="xs"
                variant="outline"
                disabled={retry.isPending || done}
                onClick={() =>
                  retry.mutate(
                    { runId, capabilityId: c.capabilityId, title },
                    {
                      onSuccess: () => {
                        setSent((s) => new Set(s).add(c.capabilityId));
                        toast.success("已批准，智能体重试这一步");
                      },
                      onError: (e) => toast.error(errorMessage(e)),
                    },
                  )
                }
              >
                <RotateCcw />
                {done ? "已批准" : "批准并重试"}
              </Button>
            ) : null}
          </li>
        );
      })}
    </ul>
  );
}

// ── 结束 / 压缩提示 ──

function EndNotice({ item }: { item: Extract<StreamItem, { kind: "end" }> }) {
  const budget = item.reason === "budget";
  const aborted = item.reason === "aborted";
  return (
    <p
      role="alert"
      className={cn(
        "flex w-full min-w-0 items-start gap-2 text-caption",
        budget ? "text-warning" : aborted ? "text-muted-foreground" : "text-destructive",
      )}
    >
      <CircleSlash aria-hidden className="mt-0.5 size-3.5 shrink-0" />
      <span className="min-w-0 break-words">
        {budget
          ? `超出预算（${BUDGET_LABEL[item.budget ?? ""] ?? "用量"}），已停止。已完成的动作不会撤销；调大预算后发消息可以继续。`
          : aborted
            ? "已停止。"
            : `运行失败${item.message ? `：${humanizeReason(item.message) ?? item.message}` : ""}`}
      </span>
    </p>
  );
}

// ── 审计配对与计划 ID ──

const UUID = "[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}";
const PLAN_IN_INPUT = new RegExp(`"planId"\\s*:\\s*"(${UUID})"`);
const PLAN_IN_OUTPUT = new RegExp(`"plan"\\s*:\\s*\\{\\s*"id"\\s*:\\s*"(${UUID})"`);

/** 本次运行触达的计划 ID:服务端汇报里的计划 + 下载计划/提交/整理执行的输入输出里出现的计划 */
export function runPlanIds(items: StreamItem[], report: GoalReport | null): string[] {
  const ids = new Set(report?.plans.map((p) => p.planId) ?? []);
  for (const it of items) {
    if (it.kind !== "tool") continue;
    const c = it.call;
    if (["download.submit", "organize.execute"].includes(c.capabilityId)) {
      const m = c.inputSummary ? PLAN_IN_INPUT.exec(c.inputSummary) : null;
      if (m?.[1]) ids.add(m[1]);
    }
    if (c.capabilityId === "download.plan" && c.outputSummary) {
      const m = PLAN_IN_OUTPUT.exec(c.outputSummary);
      if (m?.[1]) ids.add(m[1]);
    }
  }
  return [...ids];
}

/** 把工具调用按能力 ID 顺序与审计记录配对(审计没有 toolCallId,按同能力的先后对齐) */
export function pairAudit(calls: ToolCallView[], audit: InvocationAudit[] | undefined) {
  const out = new Map<string, InvocationAudit>();
  if (!audit?.length) return out;
  const byCap = new Map<string, InvocationAudit[]>();
  for (const a of audit) byCap.set(a.capabilityId, [...(byCap.get(a.capabilityId) ?? []), a]);
  const used = new Map<string, number>();
  for (const c of [...calls].sort((a, b) => a.startedAt.localeCompare(b.startedAt))) {
    const list = byCap.get(c.capabilityId);
    const i = used.get(c.capabilityId) ?? 0;
    if (list?.[i]) out.set(c.toolCallId, list[i]);
    used.set(c.capabilityId, i + 1);
  }
  return out;
}

// ── 会话流 ──

/** 会话流:用户目标 → 回合(进度行 / 正文 / 方案 / 审批 / 没做的事)→ 追加的用户消息按时间插入 */
export function AgentConversation({
  run,
  live,
  userMessages = [],
  audit,
  after,
}: {
  run: AgentRunView;
  live: AgentStreamState;
  userMessages?: { at: string; text: string; pending?: boolean }[];
  audit?: InvocationAudit[];
  /** 流末尾追加的内容(其它审批卡、实际结果行) */
  after?: ReactNode;
}) {
  const active = isRunActive(run.status) && !live.finished;
  const waiting = run.status === "waiting" || run.status === "running" || run.status === "queued";
  // 首次载入(回放)的条目不播入场动画,之后新到的才播
  const baseline = useRef<number | null>(null);
  if (baseline.current === null && (live.events.length > 0 || !active)) baseline.current = live.items.length;
  const freshKeys = new Set(
    baseline.current === null ? [] : live.items.slice(baseline.current).map((i) => i.key as string),
  );
  const calls = live.items.flatMap((i) => (i.kind === "tool" ? [i.call] : []));
  const auditByCall = pairAudit(calls, audit);
  const lastKey = live.items.at(-1)?.key;
  const tail = live.items.at(-1);
  const blocks = buildConversation(live.items, userMessages);
  const anim = "animate-in fade-in-0 slide-in-from-bottom-1 duration-base ease-pop motion-reduce:animate-none";

  const lastBlock = blocks.at(-1);
  const toolRunning = tail?.kind === "tool" && tail.call.status === "running";
  // 等选方案 / 等审批时卡片本身就是提示,不再显示"等待中…"
  const lastPart = lastBlock?.kind === "turn" ? lastBlock.parts.at(-1) : undefined;
  const cardWaiting = run.status === "waiting" && (lastPart?.kind === "options" || lastPart?.kind === "approval");
  const showTyping = active && tail?.kind !== "text" && tail?.kind !== "thinking" && !toolRunning && !cardWaiting;
  const typing = showTyping ? (
    <span className="inline-flex items-center gap-2 text-meta text-muted-foreground">
      <MessageTyping label={run.status === "waiting" ? "等待中" : "正在处理"} />
      {run.status === "waiting"
        ? `${run.summary === "等待选择方案" || run.summary === "等待审批" ? run.summary : "等待中"}…`
        : run.status === "queued"
          ? "排队中…"
          : "正在处理…"}
    </span>
  ) : null;

  return (
    <div className="flex flex-col gap-5 px-1 py-2">
      <UserMessage text={run.goal} tag={isProposeFirst(run) ? "先给方案" : undefined} />
      {blocks.map((b) =>
        b.kind === "user" ? (
          <UserMessage key={b.key} text={b.text} note={b.pending ? "已送达，等待智能体读取" : undefined} animateIn />
        ) : (
          <section key={b.key} aria-label="智能体回合" className="flex w-full min-w-0 flex-col items-start gap-2">
            {b.parts.map((p) => {
              const fresh = freshKeys.has(p.key.slice(1)) || freshKeys.has(p.key);
              switch (p.kind) {
                case "segment": {
                  const streamingText = active && p.body.at(-1)?.key === lastKey;
                  const running = active && p.activity.some((a) => a.kind === "tool" && a.call.status === "running");
                  const thinkingNow = active && p.activity.at(-1)?.key === lastKey && tail?.kind === "thinking";
                  return (
                    <div key={p.key} className="flex w-full min-w-0 flex-col gap-1.5">
                      {p.activity.length ? (
                        <StepSummary activity={p.activity} running={running || thinkingNow} auditByCall={auditByCall} />
                      ) : null}
                      {p.body.map((t) => {
                        const streaming = streamingText && t.key === lastKey;
                        return (
                          <div key={t.key} className={cn("w-full min-w-0", freshKeys.has(t.key) && anim)}>
                            <StreamingResponse
                              className="max-w-[72ch]"
                              status={streaming ? "streaming" : "complete"}
                              copyText={t.text}
                              announce={false}
                              showActions={false}
                            >
                              {/* 流式中按原文显示(半截 Markdown 会闪),结束后按安全子集渲染 */}
                              {streaming ? t.text : <Markdown text={t.text} />}
                            </StreamingResponse>
                          </div>
                        );
                      })}
                    </div>
                  );
                }
                case "options":
                  return (
                    <div key={p.key} className={cn("w-full min-w-0", fresh && anim)}>
                      <OptionsCard runId={run.id} view={p.view} waiting={waiting} />
                    </div>
                  );
                case "approval":
                  return (
                    <div key={p.key} className={cn("w-full min-w-0", fresh && anim)}>
                      <InlineApproval view={p.view} />
                    </div>
                  );
                case "compaction":
                  return (
                    <MessageMarker key={p.key}>
                      <Layers aria-hidden className="size-3.5 shrink-0" />
                      整理上下文 ·{" "}
                      {p.item.done ? (COMPACT_STATUS[p.item.status ?? "completed"] ?? p.item.status) : "进行中…"}
                    </MessageMarker>
                  );
                case "end":
                  return p.item.ok ? null : <EndNotice key={p.key} item={p.item} />;
                default:
                  return null;
              }
            })}
            {b.denied.length ? <DeniedLines runId={run.id} calls={b.denied} /> : null}
            {typing && b === lastBlock ? typing : null}
          </section>
        ),
      )}
      {typing && lastBlock?.kind !== "turn" ? <div>{typing}</div> : null}
      {after}
    </div>
  );
}

// ── 实际结果 ──

/** 实际结果的一句话(服务端从下载计划 / 下载任务 / 整理记录汇总,不采信模型文本) */
export function resultText(report: GoalReport | null): string {
  if (!report) return "汇总中…";
  const r = report;
  switch (r.state) {
    case "no_actions":
      return "没有提交下载或整理";
    case "waiting":
      return r.imported
        ? `已入库 ${r.imported} 个，${r.inProgress} 个还在进行`
        : `${r.submitted || r.inProgress} 个下载已提交，还没入库`;
    case "completed":
      return `已入库 ${r.imported} 个`;
    case "partial":
      return [
        r.imported ? `已入库 ${r.imported} 个` : "",
        r.inProgress ? `${r.inProgress} 个还在进行` : "",
        r.failed ? `${r.failed} 个失败` : "",
      ]
        .filter(Boolean)
        .join("，");
    case "failed":
      return r.failed ? `${r.failed} 个没有成功` : "没有达成目标";
  }
}

/**
 * 回答下面一行实际结果:「没有提交下载或整理 · 41 秒 · 约 $0.01 · 技术信息 ›」。
 * 有下载任务 / 整理记录时给链接;模型、token、会话 ID 进技术信息。
 */
export function ResultLine({
  run,
  report,
  live,
}: {
  run: AgentRunView;
  report: GoalReport | null;
  live: AgentStreamState;
}) {
  const u = { ...run.usage, ...(live.usage ?? {}) };
  const durationMs =
    u.durationMs ??
    (run.startedAt && run.finishedAt ? new Date(run.finishedAt).getTime() - new Date(run.startedAt).getTime() : null);
  const toolCalls = Math.max(run.toolCallCount, live.items.filter((i) => i.kind === "tool").length);
  const links = report
    ? [
        ...report.downloads.map((d) => ({
          id: d.downloadTaskId,
          label: d.name ?? "下载任务",
          to: `/console/downloads/${d.downloadTaskId}`,
        })),
        ...report.organization.map((o) => ({
          id: o.recordId,
          label: o.targetPath?.split("/").pop() || "整理记录",
          to: `/console/organize/${o.recordId}`,
        })),
      ]
    : [];
  const bad = report?.state === "failed" || report?.state === "partial";
  const err = run.error ? humanizeReason(String((run.error as { message?: unknown }).message ?? "")) : null;
  return (
    <section aria-label="实际结果" className="flex w-full min-w-0 flex-col gap-1 border-t border-border/60 pt-2">
      <p className="flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-0.5 text-meta text-muted-foreground">
        {report ? null : <LoaderCircle aria-hidden className="size-3.5 animate-spin motion-reduce:animate-none" />}
        <span className={cn("text-foreground/85", bad && "text-warning")}>实际结果：{resultText(report)}</span>
        {durationMs ? <span className="tabular-nums">· {durationLabel(durationMs)}</span> : null}
        {u.costUsd ? <span className="tabular-nums">· 约 {formatUsd(u.costUsd)}</span> : null}
      </p>
      {links.length ? (
        <ul className="flex min-w-0 flex-wrap gap-x-3 gap-y-0.5 text-meta">
          {links.slice(0, 4).map((l) => (
            <li key={l.id} className="min-w-0 max-w-full">
              <Link to={l.to} className="block truncate text-foreground/85 underline-offset-2 hover:underline">
                {l.label}
              </Link>
            </li>
          ))}
          {links.length > 4 ? <li className="text-muted-foreground">等 {links.length} 项</li> : null}
        </ul>
      ) : null}
      {err ? <p className="text-caption break-words text-destructive">{err}</p> : null}
      <TechInfo
        items={[
          {
            label: "说明",
            value: "上面的正文是智能体的说法，未经核查；实际结果取自下载任务和整理记录。",
            wide: true,
            mono: false,
          },
          { label: "模型", value: run.model ? `${run.provider ? `${run.provider}/` : ""}${run.model}` : null },
          {
            label: "token",
            value:
              u.totalTokens === undefined
                ? null
                : `${u.totalTokens.toLocaleString("zh-CN")}${run.budget.maxTokens ? ` / ${run.budget.maxTokens.toLocaleString("zh-CN")}` : ""}`,
          },
          {
            label: "工具调用",
            value: `${toolCalls}${run.budget.maxToolCalls ? ` / ${run.budget.maxToolCalls}` : ""}`,
          },
          { label: "费用上限", value: run.budget.maxCostUsd ? formatUsd(run.budget.maxCostUsd) : null },
          { label: "时长上限", value: run.budget.maxDurationSec ? `${run.budget.maxDurationSec} 秒` : null },
          { label: "汇总", value: report?.summary ?? null, wide: true, mono: false },
          { label: "会话 ID", value: run.id, wide: true },
          { label: "原始错误", value: run.error ? JSON.stringify(run.error) : null, wide: true },
        ]}
      />
    </section>
  );
}

// ── 本次运行计划上的其它审批(不在会话流里的) ──

const PLAN_CAPABILITY: Record<string, KnownCapabilityId> = {
  acquisition_plan: "download.submit",
  organize_plan: "organize.execute",
  policy_revision: "policy.apply",
};

export function ApprovalItem({ approval: a }: { approval: Approval }) {
  const admin = useIsAdminSession();
  const decide = useDecideApproval();
  const cap = PLAN_CAPABILITY[a.planType];
  const expired = a.status === "pending" && a.expiresAt !== null && new Date(a.expiresAt).getTime() < Date.now();
  const status: ApprovalCardStatus = decide.isPending ? "submitting" : expired ? "expired" : a.status;
  const act = (s: "approved" | "rejected") =>
    decide.mutate(
      { id: a.id, status: s, payloadHash: a.payloadHash },
      {
        onSuccess: () => toast.success(s === "approved" ? "已批准" : "已拒绝"),
        onError: (e) => toast.error(errorMessage(e)),
      },
    );
  return (
    <ApprovalCard
      status={status}
      title={`批准「${cap ? capabilityTitle(cap) : a.planType}」？`}
      description={a.reason ?? undefined}
      onApprove={() => act("approved")}
      onReject={() => act("rejected")}
      disabledReason={admin ? undefined : "只有管理员能批准或拒绝"}
      result={
        a.decidedAt
          ? `${a.status === "approved" ? "批准" : a.status === "rejected" ? "拒绝" : "处理"}于 ${formatDateTime(a.decidedAt)}`
          : undefined
      }
    >
      <TechInfo
        items={[
          { label: "计划", value: `${a.planType} · ${a.planId}`, wide: true },
          { label: "payload hash", value: a.payloadHash, wide: true },
          { label: "版本", value: `r${a.expectedRevision}` },
          { label: "到期", value: a.expiresAt ? formatDateTime(a.expiresAt) : "不过期" },
        ]}
      />
    </ApprovalCard>
  );
}

export function RunStatusBadge({ status }: { status: AgentRunStatus }) {
  return (
    <StatusBadge tone={RUN_STATUS_TONE[status]}>
      {isRunActive(status) ? <LoaderCircle className="h-3 w-3 animate-spin motion-reduce:animate-none" /> : null}
      {RUN_STATUS_LABEL[status]}
    </StatusBadge>
  );
}

/** 滚动时保持最新一次状态播报(给读屏用的礼貌播报,流式正文本身不逐字播报) */
export function RunAnnouncer({ status, finished }: { status: AgentRunStatus; finished: boolean }) {
  const [msg, setMsg] = useState("");
  const prev = useRef(status);
  useEffect(() => {
    if (prev.current !== status) setMsg(`运行${RUN_STATUS_LABEL[status]}`);
    prev.current = status;
  }, [status]);
  useEffect(() => {
    if (finished) setMsg("已结束，结果在最后一行");
  }, [finished]);
  return (
    <span className="sr-only" role="status" aria-live="polite">
      {msg}
    </span>
  );
}