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
@@ -1,6 +1,6 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { EventType } from "@umt/contracts";
-import { Send, Square } from "lucide-react";
+import { FlaskConical, Play, RefreshCw, WifiOff } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import {
@@ -11,21 +11,67 @@ import {
  useAbortAgentRun,
  useAgentRun,
  useAppendAgentMessage,
+  useCreateAgentRun,
+  useRunApprovals,
+  useRunInvocationAudit,
 } from "~/api/agent.ts";
+import { MessageScroller } from "~/components/agentui/message-scroller.tsx";
+import { PromptInput } from "~/components/agentui/prompt-input.tsx";
 import { ConfirmDialog } from "~/components/console/confirm-dialog.tsx";
 import { ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
 import { StatusBadge } from "~/components/console/status-badge.tsx";
 import { Button } from "~/components/ui/button.tsx";
-import { Textarea } from "~/components/ui/textarea.tsx";
 import { errorMessage } from "~/lib/api.ts";
-import { useSse } from "~/lib/sse.ts";
+import { useSse, useSseStatus } from "~/lib/sse.ts";
 import { cn, formatDateTime } from "~/lib/utils.ts";
-import { AgentConversation, BudgetBar, FinalReport, RunStatusBadge } from "./agent-conversation.tsx";
+import {
+  AgentConversation,
+  ApprovalItem,
+  BudgetBar,
+  FinalReport,
+  PlanSteps,
+  RunAnnouncer,
+  RunStatusBadge,
+  runPlanIds,
+} from "./agent-conversation.tsx";
 import { useAgentStream } from "./use-agent-stream.ts";

 const TRIGGER_LABEL = { user: "用户发起", event: "事件触发", schedule: "定时", subagent: "子代理" } as const;

-/** 目标输入:execute / plan_only 分段切换 + 文本框 */
+export const MODE_HELP: Record<AgentMode, { label: string; help: string }> = {
+  execute: {
+    label: "授权内执行",
+    help: "在已授权范围内执行;未授权的动作会被服务端拒绝并在对话里标出。",
+  },
+  plan_only: {
+    label: "只要方案",
+    help: "只调查、出方案，不执行任何写操作;满意后可一键按方案执行。",
+  },
+};
+
+/** 运行模式分段切换 */
+export function ModeSwitch({ mode, onChange }: { mode: AgentMode; onChange: (m: AgentMode) => void }) {
+  return (
+    <fieldset aria-label="运行模式" className="flex items-center gap-1">
+      {(["execute", "plan_only"] as const).map((v) => (
+        <button
+          key={v}
+          type="button"
+          aria-pressed={mode === v}
+          onClick={() => onChange(v)}
+          className={cn(
+            "h-8 cursor-pointer rounded-full border border-transparent px-3 text-sm text-muted-foreground outline-none transition-colors duration-micro hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+            mode === v && "pill-selected text-foreground",
+          )}
+        >
+          {MODE_HELP[v].label}
+        </button>
+      ))}
+    </fieldset>
+  );
+}
+
+/** 新目标输入:execute / plan_only 切换 + 自增高输入框(Enter 发送,Shift+Enter 换行) */
 export function GoalComposer({
  onSubmit,
  pending,
@@ -35,96 +81,71 @@ export function GoalComposer({
 }: {
  onSubmit: (goal: string, mode: AgentMode) => void;
  pending: boolean;
-  /** 上下文前缀(只读展示) */
+  /** 上下文前缀(只读展示,提交时拼在目标前) */
  prefix?: string;
  defaultGoal?: string;
  compact?: boolean;
 }) {
  const [goal, setGoal] = useState(defaultGoal);
  const [mode, setMode] = useState<AgentMode>("execute");
-  const submit = () => {
-    const g = goal.trim();
-    if (!g) {
-      toast.error("先写下目标");
-      return;
-    }
-    onSubmit(g, mode);
-  };
  return (
-    <form
-      className="space-y-2"
-      onSubmit={(e) => {
-        e.preventDefault();
-        submit();
-      }}
-    >
-      {prefix ? (
-        <p
-          className="truncate rounded-lg border border-border/70 px-2.5 py-1 font-mono text-meta text-muted-foreground"
-          title={prefix}
-        >
-          {prefix}
-        </p>
-      ) : null}
-      <Textarea
+    <div className="space-y-1.5">
+      <PromptInput
        value={goal}
-        onChange={(e) => setGoal(e.target.value)}
-        placeholder="例如:把 沙丘：第二部 的 4K 收进来"
-        rows={compact ? 3 : 3}
+        onValueChange={setGoal}
+        onSubmit={(g) => onSubmit(g, mode)}
+        pending={pending}
+        minRows={compact ? 2 : 3}
+        maxRows={10}
        maxLength={4000}
        aria-label="目标"
-        onKeyDown={(e) => {
-          if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-            e.preventDefault();
-            submit();
-          }
-        }}
-      />
-      <div className="flex flex-wrap items-center justify-between gap-2">
-        <fieldset aria-label="运行模式" className="flex items-center gap-1">
-          {(
-            [
-              ["execute", "授权内执行"],
-              ["plan_only", "只要方案"],
-            ] as const
-          ).map(([v, label]) => (
-            <button
-              key={v}
-              type="button"
-              aria-pressed={mode === v}
-              onClick={() => setMode(v)}
-              className={cn(
-                "h-8 cursor-pointer rounded-full border border-transparent px-3 text-sm text-muted-foreground transition-colors duration-micro hover:text-foreground",
-                mode === v && "pill-selected text-foreground",
-              )}
+        placeholder="例如:把 沙丘：第二部 的 4K 收进来"
+        submitLabel={pending ? "提交中" : "开始"}
+        header={
+          prefix ? (
+            <p
+              className="mx-1 mb-1 truncate rounded-lg border border-border/70 px-2.5 py-1 font-mono text-meta text-muted-foreground"
+              title={prefix}
            >
-              {label}
-            </button>
-          ))}
-        </fieldset>
-        <Button type="submit" size="sm" disabled={pending}>
-          <Send />
-          {pending ? "提交中…" : "开始"}
-        </Button>
-      </div>
-      <p className="text-meta text-muted-foreground">
-        {mode === "plan_only"
-          ? "只调查、出方案，不执行任何写操作。"
-          : "在已授权范围内执行；未授权的动作会被服务端拒绝并在对话里标出。"}
+              {prefix}
+            </p>
+          ) : null
+        }
+        toolbar={<ModeSwitch mode={mode} onChange={setMode} />}
+      />
+      <p className="px-1 text-meta text-muted-foreground" aria-live="polite">
+        {MODE_HELP[mode].help} Enter 发送,Shift+Enter 换行。
      </p>
-    </form>
+    </div>
  );
 }

-/** 一次运行:头部状态 + 预算条 + 流式对话 + 最终汇报 + 追加消息 */
-export function AgentRunPanel({ runId, compact = false }: { runId: string; compact?: boolean }) {
+/** 一次运行:头部状态 + 预算条 + (只要方案的步骤清单)+ 流式对话 + 审批 + 最终汇报 + 输入框 */
+export function AgentRunPanel({
+  runId,
+  compact = false,
+  className,
+  onRunCreated,
+}: {
+  runId: string;
+  compact?: boolean;
+  className?: string;
+  /** 从本会话派生了新运行(按方案执行)时 */
+  onRunCreated?: (id: string) => void;
+}) {
  const run = useAgentRun(runId);
  const active = isRunActive(run.data?.run.status);
  const live = useAgentStream(runId, active || !run.data);
  const abort = useAbortAgentRun();
  const append = useAppendAgentMessage();
+  const create = useCreateAgentRun();
  const [msg, setMsg] = useState("");
+  const [confirmStop, setConfirmStop] = useState(false);
+  const sseStatus = useSseStatus();
  const qc = useQueryClient();
+  const toolCount = live.items.filter((i) => i.kind === "tool" && i.call.status !== "running").length;
+  const audit = useRunInvocationAudit(runId, toolCount > 0, toolCount);
+  const approvals = useRunApprovals(runPlanIds(live.items, run.data?.report ?? null));
  // run 状态变化(queued → running → 终态)经 SSE 推送:到达即刷新快照,不等 3 秒轮询
  useSse(
    [EventType.agentRunStatus],
@@ -139,41 +160,50 @@ export function AgentRunPanel({ runId, compact = false }: { runId: string; compa
  if (run.error || !run.data) return <ErrorState plain error={run.error} onRetry={() => void run.refetch()} />;
  const { run: r, report, messages } = run.data;
  const finished = !isRunActive(r.status) || live.finished;
+  const streaming = active && !live.finished;
+  const mode: AgentMode = (r.mode ?? (r.scope.mode as AgentMode | undefined)) || "execute";
+  const shownStatus =
+    // 事件流已结束但快照还没刷到终态时按运行中显示;waiting(等待下载/入库核验)照实显示
+    (live.finished && (r.status === "queued" || r.status === "running")) ||
+    (r.status === "queued" && live.events.length > 0)
+      ? "running"
+      : r.status;
+
+  const send = (text: string) =>
+    append.mutate(
+      { id: r.id, text },
+      {
+        onSuccess: () => {
+          setMsg("");
+          void run.refetch();
+        },
+        onError: (err) => toast.error(errorMessage(err)),
+      },
+    );
+  const executePlan = () =>
+    create.mutate(
+      { goal: `${r.goal}\n\n(按会话 ${r.id.slice(0, 8)} 的方案执行)`, mode: "execute" },
+      {
+        onSuccess: (n) => onRunCreated?.(n.id),
+        onError: (e) => toast.error(errorMessage(e)),
+      },
+    );

  return (
-    <div className="space-y-4">
+    <div className={cn("flex min-h-0 flex-col gap-3", className)}>
+      <RunAnnouncer status={shownStatus} finished={live.finished} />
      <div className="flex flex-wrap items-center gap-2">
-        <RunStatusBadge
-          status={
-            (live.finished && isRunActive(r.status)) || (r.status === "queued" && live.events.length > 0)
-              ? "running"
-              : r.status
-          }
-        />
-        <span className="text-meta text-muted-foreground">
+        <RunStatusBadge status={shownStatus} />
+        <StatusBadge tone={mode === "plan_only" ? "warning" : "neutral"}>{MODE_HELP[mode].label}</StatusBadge>
+        <span className="min-w-0 text-meta text-muted-foreground">
          {TRIGGER_LABEL[r.trigger]} · {formatDateTime(r.createdAt)}
          {r.model ? ` · ${r.provider ?? ""}/${r.model}` : ""}
        </span>
-        {agentMockEnabled() ? <StatusBadge tone="warning">mock 数据</StatusBadge> : null}
-        {active ? (
-          <ConfirmDialog
-            trigger={
-              <Button variant="destructive" size="sm" className="ml-auto" disabled={abort.isPending}>
-                <Square />
-                中止
-              </Button>
-            }
-            title="中止这次运行?"
-            description="停止后续步骤；已经完成的外部动作(如已提交的下载)不会被撤销。"
-            confirmLabel="中止"
-            destructive
-            onConfirm={() =>
-              abort.mutateAsync(r.id).then(
-                () => toast.success("已请求中止"),
-                (e) => toast.error(errorMessage(e)),
-              )
-            }
-          />
+        {agentMockEnabled() ? (
+          <StatusBadge tone="warning">
+            <FlaskConical className="size-3" />
+            mock 数据
+          </StatusBadge>
        ) : null}
      </div>

@@ -181,52 +211,104 @@ export function AgentRunPanel({ runId, compact = false }: { runId: string; compa
        <BudgetBar run={r} live={live} />
      </div>

-      <AgentConversation
-        run={r}
-        live={live}
-        userMessages={messages.map((m) => ({ at: m.createdAt, text: m.text, pending: m.status === "pending" }))}
-        compact={compact}
-      />
+      {mode === "plan_only" ? <PlanSteps live={live} active={streaming} /> : null}

-      {finished ? <FinalReport run={r} report={report} live={live} /> : null}
-
-      <form
-        className="flex items-end gap-2"
-        onSubmit={(e) => {
-          e.preventDefault();
-          const text = msg.trim();
-          if (!text) return;
-          append.mutate(
-            { id: r.id, text },
-            {
-              onSuccess: () => {
-                setMsg("");
-                void run.refetch();
-              },
-              onError: (err) => toast.error(errorMessage(err)),
-            },
-          );
-        }}
-      >
-        <Textarea
-          value={msg}
-          onChange={(e) => setMsg(e.target.value)}
-          rows={1}
-          maxLength={8000}
-          placeholder={active ? "补充或纠正(运行中也可追加)" : "追加消息，继续这次会话"}
-          aria-label="追加消息"
-          className="min-h-9 flex-1"
-        />
-        <Button
-          type="submit"
-          size="icon"
-          variant="outline"
-          disabled={append.isPending || !msg.trim()}
-          aria-label="发送"
+      {streaming && sseStatus === "reconnecting" ? (
+        <div
+          role="status"
+          className="flex items-center gap-2 rounded-xl border border-warning/40 bg-warning/10 px-3 py-2 text-caption text-warning"
        >
-          <Send />
-        </Button>
-      </form>
+          <WifiOff aria-hidden className="size-4 shrink-0" />
+          <span className="min-w-0 flex-1">
+            实时连接中断，正在重连;恢复后按 after= 补读漏掉的事件，期间每 2.5 秒轮询兜底。
+          </span>
+        </div>
+      ) : null}
+      {live.error ? (
+        <div
+          role="alert"
+          className="flex flex-wrap items-center gap-2 rounded-xl border border-destructive/40 bg-destructive/10 px-3 py-2 text-caption text-destructive"
+        >
+          <span className="min-w-0 flex-1 break-words">事件读取失败:{live.error}</span>
+          <Button size="xs" variant="outline" onClick={live.retry}>
+            <RefreshCw />
+            重试
+          </Button>
+        </div>
+      ) : null}
+
+      <MessageScroller
+        className={cn("min-h-64 flex-1", compact && "min-h-48")}
+        viewportClassName="pr-1"
+        busy={streaming}
+        label="Agent 会话记录"
+      >
+        <AgentConversation
+          run={r}
+          live={live}
+          audit={audit.data}
+          userMessages={messages.map((m) => ({ at: m.createdAt, text: m.text, pending: m.status === "pending" }))}
+          after={
+            <>
+              {approvals.items.map((a) => (
+                <ApprovalItem key={a.id} approval={a} />
+              ))}
+              {finished ? <FinalReport run={r} report={report} live={live} /> : null}
+            </>
+          }
+        />
+      </MessageScroller>
+
+      <div className="space-y-1.5">
+        <PromptInput
+          value={msg}
+          onValueChange={setMsg}
+          onSubmit={send}
+          pending={append.isPending}
+          loading={streaming}
+          onStop={() => setConfirmStop(true)}
+          stopLabel={abort.isPending ? "停止中…" : "停止"}
+          minRows={1}
+          maxRows={6}
+          maxLength={8000}
+          aria-label="追加消息"
+          placeholder={streaming ? "补充或纠正(运行中也可追加)" : "追加消息，继续这次会话"}
+          toolbar={
+            mode === "plan_only" && finished ? (
+              <Button type="button" size="sm" variant="outline" onClick={executePlan} disabled={create.isPending}>
+                <Play />
+                按方案执行
+              </Button>
+            ) : (
+              <span className="px-1 text-meta text-muted-foreground">本会话:{MODE_HELP[mode].label}</span>
+            )
+          }
+        />
+        <p className="px-1 text-meta text-muted-foreground">
+          {mode === "plan_only" && finished
+            ? "「按方案执行」会以授权内执行模式新开一次运行，仍受服务端授权校验。"
+            : MODE_HELP[mode].help}{" "}
+          Enter 发送,Shift+Enter 换行{streaming ? ",停止 = 中止本次运行" : ""}。
+        </p>
+      </div>
+
+      <ConfirmDialog
+        open={confirmStop}
+        onOpenChange={setConfirmStop}
+        title="停止这次运行?"
+        description="停止后续步骤；已经完成的外部动作(如已提交的下载)不会被撤销。"
+        confirmLabel="停止"
+        destructive
+        onConfirm={() =>
+          abort.mutateAsync(r.id).then(
+            () => toast.success("已请求中止"),
+            (e) => {
+              toast.error(errorMessage(e));
+              throw e;
+            },
+          )
+        }
+      />
    </div>
  );
 }