feat(web): W4-F rebuild agent conversation and drawer with agentui components

- Port agentui (MIT, ashish200729/agentui@b2b752b) Message/MessageBubble/MessageScroller, StreamingResponse, ToolResult/ToolApproval, TodoList, ApprovalCard, CodeBlock/FileDiff, Citations, PromptInput into components/agentui; drop motion/shiki/Next, switch colors, type scale, radii, durations and easing to semantic tokens, honour reduced motion - Conversation: streaming cursor, collapsible thinking, tool cards with kind/scope/risk/ idempotency badges and audit idempotency key, prominent server-rejection state for both whitelist rejections and unauthorized errors, compaction markers, budget meters with over-limit state, approval cards (admin session only), two-column final report (model said vs system verified with task/record links), follow-scroll with jump-to-bottom - Composer: Enter send / Shift+Enter newline, stop = abort (confirmed), append, execute/plan_only switch, "execute this plan" from finished plan_only runs - Session list sidebar with status filter and usage; reconnect/error banners with retry - Drawer: route-derived context (entity/site/task), minimize to a live mini dock - Fix stream refetch race when the run switches from loading to finished Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-09-27 23:08:17 +08:00
1 parent 29cd10b27e
commit 8352e5e881
@@ -0,0 +1,135 @@
+// 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`(收起时的一行结果);
+// 默认不在完成后自动展开历史卡片(回放时 defaultOpen=false),运行中的卡片展开、完成后按 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 = status === "running",
+  collapseOnComplete = true,
+  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") setOpen(true);
+    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-10 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="flex min-w-0 flex-1 flex-wrap items-baseline gap-x-2 gap-y-0.5">
+          <span className="min-w-0 truncate text-caption font-medium text-foreground/90">{title}</span>
+          <span className="min-w-0 truncate font-mono text-label text-muted-foreground">{tool}</span>
+          {meta ? <span className="shrink-0 text-label text-muted-foreground tabular-nums">{meta}</span> : null}
+        </span>
+        <span className={cn("inline-flex shrink-0 items-center gap-1 text-label font-medium", st.cls)}>
+          <StatusIcon status={status} />
+          {st.label}
+        </span>
+        <ChevronDown aria-hidden className={cn("size-3.5", CHEVRON_CLASS, open && "rotate-180")} />
+      </button>
+      {badges ? <div className="flex flex-wrap items-center gap-1 px-3 pb-2 pl-9">{badges}</div> : null}
+      {!open && summary ? (
+        <p className="-mt-1 truncate px-3 pb-2 pl-9 text-meta text-muted-foreground">{summary}</p>
+      ) : null}
+      <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">{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>
+  );
+}