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]>

apps/web/app/components/agent/agent-drawer.tsx

@@ -1,94 +1,216 @@
-import { Bot, ExternalLink, Plus } from "lucide-react";
-import { Link } from "react-router";
+import { Bot, ExternalLink, Maximize2, Minus, Plus, X } from "lucide-react";
+import { Link, useLocation } from "react-router";
 import { toast } from "sonner";
-import { useCreateAgentRun } from "~/api/agent.ts";
+import { isRunActive, useAgentRun, useCreateAgentRun } from "~/api/agent.ts";
+import { StreamingCursor } from "~/components/agentui/streaming-response.tsx";
 import { Button } from "~/components/ui/button.tsx";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "~/components/ui/sheet.tsx";
 import { errorMessage } from "~/lib/api.ts";
+import { capabilityMeta, isDenied, RunStatusBadge } from "./agent-conversation.tsx";
 import { AgentRunPanel, GoalComposer } from "./agent-run-panel.tsx";
 import {
+  type AgentContext,
+  contextFromPath,
   contextPrefix,
+  minimizeAgentDrawer,
   openAgentDrawer,
+  restoreAgentDrawer,
   setAgentDrawerOpen,
   setAgentDrawerRun,
+  splitContextGoal,
   useAgentDrawer,
 } from "./agent-store.ts";
+import { useAgentStream } from "./use-agent-stream.ts";
+
+const CONTEXT_KEYS: [keyof AgentContext, string][] = [
+  ["entityId", "作品"],
+  ["releaseId", "资源"],
+  ["downloadTaskId", "下载任务"],
+  ["recordId", "整理记录"],
+  ["siteId", "站点"],
+  ["taskId", "任务"],
+];
+
+function ContextChips({ context }: { context: AgentContext }) {
+  const chips = CONTEXT_KEYS.filter(([k]) => context[k]);
+  if (!chips.length) return null;
+  return (
+    <ul aria-label="当前页面上下文" className="mt-1.5 flex flex-wrap gap-1">
+      {chips.map(([k, label]) => (
+        <li
+          key={k}
+          className="max-w-full truncate rounded-full border border-border/70 px-2 py-0.5 font-mono text-label text-muted-foreground"
+          title={String(context[k])}
+        >
+          {label} · {String(context[k]).slice(0, 12)}
+        </li>
+      ))}
+    </ul>
+  );
+}
 
 /**
- * Agent 侧栏抽屉:任意页面可打开,带当前页面上下文(entityId 等)作为 goal 前缀。
+ * Agent 侧栏抽屉:任意页面可打开,带当前页面上下文(entityId / siteId / taskId 等)作为 goal 前缀;
+ * 运行中可最小化到右下角小窗,流式输出继续。
  * 挂载:在 console layout 里渲染一次 <AgentDrawer />;顶栏放 <AgentDrawerTrigger />。
  * 页面内打开:import { openAgentDrawer } from "~/components/agent/agent-store.ts"。
  */
 export function AgentDrawer() {
-  const { open, context, runId } = useAgentDrawer();
+  const { open, minimized, context, runId } = useAgentDrawer();
   const create = useCreateAgentRun();
   const prefix = contextPrefix(context);
 
   return (
-    <Sheet open={open} onOpenChange={setAgentDrawerOpen}>
-      <SheetContent side="right" className="w-full gap-0 p-0 sm:max-w-lg">
-        <SheetHeader className="border-b border-[var(--shell-border)] px-5 py-4 pr-14">
-          <SheetTitle className="flex items-center gap-2 text-lead">
-            <Bot className="h-4 w-4" />
-            Agent
-          </SheetTitle>
-          <SheetDescription className="break-words">
-            {context?.label ? `当前对象:${context.label}` : "交代目标，Agent 在授权范围内边执行边汇报。"}
-          </SheetDescription>
-        </SheetHeader>
-        <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4">
+    <>
+      <Sheet open={open} onOpenChange={setAgentDrawerOpen}>
+        <SheetContent side="right" className="w-full gap-0 p-0 sm:max-w-xl">
+          <SheetHeader className="border-b border-[var(--shell-border)] px-5 py-4 pr-24">
+            <SheetTitle className="flex items-center gap-2 text-lead">
+              <Bot className="h-4 w-4" />
+              Agent
+            </SheetTitle>
+            <SheetDescription className="break-words">
+              {context?.label ? `当前对象:${context.label}` : "交代目标，Agent 在授权范围内边执行边汇报。"}
+            </SheetDescription>
+            {context ? <ContextChips context={context} /> : null}
+          </SheetHeader>
           {runId ? (
-            <AgentRunPanel runId={runId} compact />
-          ) : (
-            <GoalComposer
-              key={`${context?.entityId ?? ""}${context?.releaseId ?? ""}${context?.goal ?? ""}`}
-              compact
-              prefix={prefix || undefined}
-              defaultGoal={context?.goal ?? ""}
-              pending={create.isPending}
-              onSubmit={(goal, mode) =>
-                create.mutate(
-                  { goal: `${prefix}${goal}`, mode },
-                  {
-                    onSuccess: (run) => setAgentDrawerRun(run.id),
-                    onError: (e) => toast.error(errorMessage(e)),
-                  },
-                )
-              }
-            />
-          )}
-        </div>
-        <div className="flex flex-wrap items-center justify-end gap-2 border-t border-[var(--shell-border)] px-5 py-3">
-          {runId ? (
-            <>
-              <Button variant="ghost" size="sm" onClick={() => openAgentDrawer(context)}>
-                <Plus />
-                新目标
-              </Button>
-              <Button asChild variant="outline" size="sm">
-                <Link to={`/console/agent/${runId}`} onClick={() => setAgentDrawerOpen(false)}>
-                  <ExternalLink />
-                  在会话页打开
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              className="absolute top-4 right-14"
+              aria-label="最小化(运行继续)"
+              title="最小化(运行继续)"
+              onClick={minimizeAgentDrawer}
+            >
+              <Minus />
+            </Button>
+          ) : null}
+          <div className="flex min-h-0 flex-1 flex-col px-4 py-3">
+            {runId ? (
+              <AgentRunPanel runId={runId} compact className="flex-1" onRunCreated={setAgentDrawerRun} />
+            ) : (
+              <GoalComposer
+                key={`${context?.entityId ?? ""}${context?.releaseId ?? ""}${context?.goal ?? ""}`}
+                compact
+                prefix={prefix || undefined}
+                defaultGoal={context?.goal ?? ""}
+                pending={create.isPending}
+                onSubmit={(goal, mode) =>
+                  create.mutate(
+                    { goal: `${prefix}${goal}`, mode },
+                    {
+                      onSuccess: (run) => setAgentDrawerRun(run.id),
+                      onError: (e) => toast.error(errorMessage(e)),
+                    },
+                  )
+                }
+              />
+            )}
+          </div>
+          <div className="flex flex-wrap items-center justify-end gap-2 border-t border-[var(--shell-border)] px-5 py-3">
+            {runId ? (
+              <>
+                <Button variant="ghost" size="sm" onClick={() => openAgentDrawer(context)}>
+                  <Plus />
+                  新目标
+                </Button>
+                <Button asChild variant="outline" size="sm">
+                  <Link to={`/console/agent/${runId}`} onClick={() => setAgentDrawerOpen(false)}>
+                    <ExternalLink />
+                    在会话页打开
+                  </Link>
+                </Button>
+              </>
+            ) : (
+              <Button asChild variant="ghost" size="sm">
+                <Link to="/console/agent" onClick={() => setAgentDrawerOpen(false)}>
+                  全部会话
                 </Link>
               </Button>
-            </>
-          ) : (
-            <Button asChild variant="ghost" size="sm">
-              <Link to="/console/agent" onClick={() => setAgentDrawerOpen(false)}>
-                全部会话
-              </Link>
-            </Button>
-          )}
-        </div>
-      </SheetContent>
-    </Sheet>
+            )}
+          </div>
+        </SheetContent>
+      </Sheet>
+      {minimized && runId ? <AgentMiniDock runId={runId} /> : null}
+    </>
   );
 }
 
-/** 顶栏按钮:打开抽屉(不带上下文;页面内按钮用 openAgentDrawer 传上下文) */
-export function AgentDrawerTrigger() {
+/** 最小化后的小窗:保持事件流订阅,显示状态与最新一句输出 */
+function AgentMiniDock({ runId }: { runId: string }) {
+  const run = useAgentRun(runId);
+  const active = isRunActive(run.data?.run.status);
+  const live = useAgentStream(runId, active || !run.data);
+  const last = live.items[live.items.length - 1];
+  const streaming = active && !live.finished;
+  const line =
+    last?.kind === "text"
+      ? last.text.trim().split("\n").pop()
+      : last?.kind === "tool"
+        ? `${isDenied(last.call) ? "被拒绝" : last.call.status === "running" ? "调用" : "完成"} · ${capabilityMeta(last.call.capabilityId)?.title ?? last.call.capabilityId}`
+        : last?.kind === "thinking"
+          ? "思考中…"
+          : last?.kind === "end"
+            ? last.ok
+              ? "已完成,展开查看核实结果"
+              : last.message
+            : "等待输出…";
+  const status = run.data
+    ? live.finished && isRunActive(run.data.run.status)
+      ? "running"
+      : run.data.run.status
+    : null;
   return (
-    <Button variant="ghost" size="icon-sm" aria-label="打开 Agent" title="Agent" onClick={() => openAgentDrawer(null)}>
+    <section
+      aria-label="Agent 小窗"
+      className="pg-float fixed right-4 bottom-4 z-40 w-80 max-w-[calc(100vw-2rem)] rounded-2xl p-3 animate-in fade-in-0 slide-in-from-bottom-2 duration-base ease-pop motion-reduce:animate-none"
+    >
+      <div className="flex items-center gap-2">
+        <Bot aria-hidden className="size-4 shrink-0 text-muted-foreground" />
+        {status ? <RunStatusBadge status={status} /> : null}
+        <span className="min-w-0 flex-1 truncate text-meta text-muted-foreground">
+          {run.data ? splitContextGoal(run.data.run.goal).text : ""}
+        </span>
+        <Button variant="ghost" size="icon-xs" aria-label="展开 Agent" title="展开" onClick={restoreAgentDrawer}>
+          <Maximize2 />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon-xs"
+          aria-label="关闭小窗(运行在后台继续)"
+          title="关闭小窗(运行在后台继续)"
+          onClick={() => setAgentDrawerOpen(false)}
+        >
+          <X />
+        </Button>
+      </div>
+      <button
+        type="button"
+        onClick={restoreAgentDrawer}
+        className="mt-2 block w-full cursor-pointer rounded-lg px-1 text-left text-caption leading-5 text-foreground/90 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <span className="line-clamp-2 break-words">
+          {line}
+          {streaming && last?.kind === "text" ? <StreamingCursor /> : null}
+        </span>
+      </button>
+    </section>
+  );
+}
+
+/** 顶栏按钮:有最小化的运行时恢复它;否则按当前路由带上下文打开(页面内按钮用 openAgentDrawer 传更完整的上下文) */
+export function AgentDrawerTrigger() {
+  const { minimized, runId } = useAgentDrawer();
+  const { pathname } = useLocation();
+  return (
+    <Button
+      variant="ghost"
+      size="icon-sm"
+      aria-label="打开 Agent"
+      title="Agent"
+      onClick={() => (minimized && runId ? restoreAgentDrawer() : openAgentDrawer(contextFromPath(pathname)))}
+    >
       <Bot />
     </Button>
   );