UHD_Media_Tool/apps/web/app/components/agentui/tool-result.tsx

// Adapted from agentui (https://github.com/ashish200729/agentui), components/agents/tool-result.tsx
// Copyright (c) 2026 Saurabh Chauhan. MIT License, see ./LICENSE-agentui.md
// 改造:状态色 blue/emerald/rose → 中性/success/destructive(并配文字);ActionSwapRollText 滚字去掉;
// 折叠用 Disclosure;新增 `badges` 槽(scope/风险/幂等等审计徽标)与 `summary`(收起时的一行结果);
// AGUI-2:收起态压成一行(能力名 · 状态 · 耗时 · 摘要),能力 ID 与徽标移进展开区;
// 默认一律收起(运行中也只显示一行状态);用户点开的卡片完成后保持展开(collapseOnComplete 可改)。
import { Ban, Braces, ChevronDown, CircleCheck, CircleX, LoaderCircle, SquareTerminal, Wrench } from "lucide-react";
import { type ReactNode, useCallback, useEffect, useId, useRef, useState } from "react";
import { cn } from "~/lib/utils.ts";
import { CodeBlock, prettyMaybeJson } from "./code-block.tsx";
import { CHEVRON_CLASS, Disclosure } from "./disclosure.tsx";

export type ToolResultStatus = "running" | "success" | "error" | "cancelled";
export type ToolResultKind = "terminal" | "request" | "custom";

const STATUS: Record<ToolResultStatus, { label: string; cls: string }> = {
  running: { label: "执行中", cls: "text-muted-foreground" },
  success: { label: "成功", cls: "text-success" },
  error: { label: "失败", cls: "text-destructive" },
  cancelled: { label: "已取消", cls: "text-muted-foreground" },
};

function StatusIcon({ status }: { status: ToolResultStatus }) {
  if (status === "running") return <LoaderCircle className="size-3 animate-spin motion-reduce:animate-none" />;
  if (status === "success") return <CircleCheck className="size-3" />;
  if (status === "error") return <CircleX className="size-3" />;
  return <Ban className="size-3" />;
}

function KindIcon({ kind }: { kind: ToolResultKind }) {
  if (kind === "terminal") return <SquareTerminal className="size-4" />;
  if (kind === "request") return <Braces className="size-4" />;
  return <Wrench className="size-4" />;
}

export interface ToolResultProps {
  /** 能力/工具 ID(等宽显示) */
  tool: ReactNode;
  title: ReactNode;
  children?: ReactNode;
  status?: ToolResultStatus;
  kind?: ToolResultKind;
  /** 耗时等 */
  meta?: ReactNode;
  /** 标题行下方的徽标 */
  badges?: ReactNode;
  /** 收起时显示的一行摘要 */
  summary?: ReactNode;
  icon?: ReactNode;
  defaultOpen?: boolean;
  collapseOnComplete?: boolean;
  className?: string;
}

export function ToolResult({
  tool,
  title,
  children,
  status = "running",
  kind = "custom",
  meta,
  badges,
  summary,
  icon,
  defaultOpen = false,
  collapseOnComplete = false,
  className,
}: ToolResultProps) {
  const id = useId();
  const [open, setOpenState] = useState(defaultOpen);
  const prev = useRef(status);
  const setOpen = useCallback((v: boolean) => setOpenState(v), []);
  useEffect(() => {
    if (prev.current === "running" && status !== "running" && collapseOnComplete) setOpen(false);
    prev.current = status;
  }, [collapseOnComplete, setOpen, status]);
  const st = STATUS[status];

  return (
    <div
      data-state={status}
      aria-busy={status === "running"}
      className={cn("w-full min-w-0 rounded-xl border border-border/70 text-sm", className)}
    >
      <button
        id={`${id}-t`}
        type="button"
        aria-expanded={open}
        aria-controls={`${id}-c`}
        onClick={() => setOpen(!open)}
        className="group flex min-h-9 w-full min-w-0 cursor-pointer items-center gap-2 rounded-xl px-3 py-1.5 text-left outline-none transition-colors duration-micro hover:bg-foreground/[0.03] focus-visible:ring-2 focus-visible:ring-ring"
      >
        <span aria-hidden className="grid size-4 shrink-0 place-items-center text-muted-foreground">
          {icon ?? <KindIcon kind={kind} />}
        </span>
        {/* 收起时一行:能力名 · 状态 · 耗时 · 摘要;展开后摘要让位给完整输入输出 */}
        <span className="max-w-[45%] shrink-0 truncate text-caption font-medium text-foreground/90">{title}</span>
        <span className={cn("inline-flex shrink-0 items-center gap-1 text-label font-medium", st.cls)}>
          <StatusIcon status={status} />
          {st.label}
        </span>
        {meta ? <span className="shrink-0 text-label text-muted-foreground tabular-nums">{meta}</span> : null}
        <span className="min-w-0 flex-1 truncate text-meta text-muted-foreground">
          {!open && summary ? summary : null}
        </span>
        <ChevronDown aria-hidden className={cn("size-3.5 shrink-0", CHEVRON_CLASS, open && "rotate-180")} />
      </button>
      <Disclosure id={`${id}-c`} role="region" aria-labelledby={`${id}-t`} open={open}>
        <div className="space-y-2 border-t border-border/60 px-3 py-2.5">
          <div className="flex flex-wrap items-center gap-1">
            <span className="mr-1 min-w-0 truncate font-mono text-label text-muted-foreground">{tool}</span>
            {badges}
          </div>
          {children}
        </div>
      </Disclosure>
    </div>
  );
}

/** 工具输入/输出块:JSON 自动缩进,长内容块内滚动 */
export function ToolResultOutput({
  label,
  children,
  tone,
}: {
  label: ReactNode;
  children: string;
  tone?: "destructive";
}) {
  const { text, language } = prettyMaybeJson(children);
  return (
    <div className="min-w-0">
      <p className="mb-1 text-meta text-muted-foreground">{label}</p>
      <CodeBlock code={text} language={language} bare tone={tone === "destructive" ? "destructive" : "default"} />
    </div>
  );
}