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/routes/console/agent.$runId.tsx

@@ -1,7 +1,10 @@
+import type { AgentRunStatus } from "@umt/contracts";
 import { ArrowLeft } from "lucide-react";
-import { Link, useParams } from "react-router";
+import { useState } from "react";
+import { Link, useNavigate, useParams } from "react-router";
 import { agentMockEnabled, useAgentRun } from "~/api/agent.ts";
 import { AgentRunPanel } from "~/components/agent/agent-run-panel.tsx";
+import { AgentSessionList } from "~/components/agent/agent-session-list.tsx";
 import { PageHeader } from "~/components/console/page-header.tsx";
 import { Button } from "~/components/ui/button.tsx";
 
@@ -9,6 +12,8 @@ export default function AgentRunPage() {
   const { runId = "" } = useParams();
   const run = useAgentRun(runId);
   const mock = agentMockEnabled();
+  const navigate = useNavigate();
+  const [status, setStatus] = useState<"" | AgentRunStatus>("");
   return (
     <>
       <PageHeader
@@ -23,8 +28,18 @@ export default function AgentRunPage() {
           </Button>
         }
       />
-      <div className="pg-slab rounded-xl p-4 md:p-5">
-        <AgentRunPanel runId={runId} />
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,17rem)_minmax(0,1fr)]">
+        <aside className="pg-slab hidden rounded-xl p-3 lg:block lg:h-[calc(100dvh-13rem)] lg:overflow-hidden">
+          <AgentSessionList activeId={runId} status={status} onStatusChange={setStatus} className="h-full" />
+        </aside>
+        <div className="pg-slab flex h-[calc(100dvh-11rem)] min-h-[32rem] flex-col rounded-xl p-3 md:p-4 lg:h-[calc(100dvh-13rem)]">
+          <AgentRunPanel
+            key={runId}
+            runId={runId}
+            className="flex-1"
+            onRunCreated={(id) => navigate(`/console/agent/${id}${mock ? "?mock=1" : ""}`)}
+          />
+        </div>
       </div>
     </>
   );

apps/web/app/routes/console/agent.tsx

@@ -1,52 +1,20 @@
 import type { AgentRunStatus } from "@umt/contracts";
-import { Bot, FlaskConical } from "lucide-react";
+import { FlaskConical, ShieldCheck } from "lucide-react";
 import { useState } from "react";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
-import { type AgentRunView, agentMockEnabled, RUN_STATUS_LABEL, useAgentRuns, useCreateAgentRun } from "~/api/agent.ts";
-import { RunStatusBadge } from "~/components/agent/agent-conversation.tsx";
+import { agentMockEnabled, useCreateAgentRun } from "~/api/agent.ts";
 import { GoalComposer } from "~/components/agent/agent-run-panel.tsx";
-import { type DataColumn, DataTable } from "~/components/console/data-table.tsx";
-import { FilterBar, FilterSelect } from "~/components/console/filter-bar.tsx";
+import { AgentSessionList } from "~/components/agent/agent-session-list.tsx";
 import { PageHeader } from "~/components/console/page-header.tsx";
 import { Button } from "~/components/ui/button.tsx";
-import { relTime } from "~/components/workbench/release-fields.ts";
 import { errorMessage } from "~/lib/api.ts";
 
-const COLUMNS: DataColumn<AgentRunView>[] = [
-  {
-    key: "goal",
-    header: "目标",
-    cell: (r) => (
-      <div className="min-w-0 max-w-md">
-        <p className="line-clamp-2 break-words text-foreground">{r.goal}</p>
-        {r.summary ? <p className="mt-0.5 line-clamp-1 text-meta text-muted-foreground">{r.summary}</p> : null}
-      </div>
-    ),
-  },
-  { key: "status", header: "状态", cell: (r) => <RunStatusBadge status={r.status} /> },
-  {
-    key: "mode",
-    header: "模式",
-    hideBelow: "md",
-    cell: (r) => ((r.mode ?? r.scope.mode) === "plan_only" ? "只要方案" : "执行"),
-  },
-  { key: "tools", header: "工具调用", hideBelow: "md", align: "right", cell: (r) => r.toolCallCount },
-  {
-    key: "at",
-    header: "开始",
-    hideBelow: "sm",
-    cell: (r) => <span className="whitespace-nowrap text-muted-foreground">{relTime(r.createdAt)}</span>,
-  },
-];
-
 export default function AgentPage() {
-  const [status, setStatus] = useState("");
-  const runs = useAgentRuns((status || undefined) as AgentRunStatus | undefined);
+  const [status, setStatus] = useState<"" | AgentRunStatus>("");
   const create = useCreateAgentRun();
   const navigate = useNavigate();
   const mock = agentMockEnabled();
-  const rows = runs.data?.pages.flatMap((p) => p.items);
 
   return (
     <>
@@ -63,45 +31,35 @@ export default function AgentPage() {
           </Button>
         </div>
       ) : null}
-      <div className="pg-slab mb-6 rounded-xl p-4">
-        <GoalComposer
-          pending={create.isPending}
-          onSubmit={(goal, mode) =>
-            create.mutate(
-              { goal, mode },
-              {
-                onSuccess: (run) => navigate(`/console/agent/${run.id}${mock ? "?mock=1" : ""}`),
-                onError: (e) => toast.error(errorMessage(e)),
-              },
-            )
-          }
-        />
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,20rem)_minmax(0,1fr)]">
+        <div className="pg-slab order-2 rounded-xl p-3 lg:order-1 lg:max-h-[calc(100dvh-12rem)] lg:overflow-hidden">
+          <AgentSessionList status={status} onStatusChange={setStatus} className="h-full" />
+        </div>
+        <div className="order-1 space-y-4 lg:order-2">
+          <div className="pg-slab rounded-xl p-4">
+            <h2 className="mb-3 text-body font-medium text-foreground">新会话</h2>
+            <GoalComposer
+              pending={create.isPending}
+              onSubmit={(goal, mode) =>
+                create.mutate(
+                  { goal, mode },
+                  {
+                    onSuccess: (run) => navigate(`/console/agent/${run.id}${mock ? "?mock=1" : ""}`),
+                    onError: (e) => toast.error(errorMessage(e)),
+                  },
+                )
+              }
+            />
+          </div>
+          <div className="flex gap-3 rounded-xl border border-border/70 p-4 text-caption text-muted-foreground">
+            <ShieldCheck aria-hidden className="mt-0.5 size-4 shrink-0" />
+            <div className="space-y-1">
+              <p>每一次工具调用都经服务端授权校验:不在白名单或没有授权覆盖的调用会被拒绝，并在对话里醒目标出。</p>
+              <p>运行结束后，汇报分两栏:模型的自述只作参考，"系统核实的结果"取自下载计划、下载任务与整理记录。</p>
+            </div>
+          </div>
+        </div>
       </div>
-      <FilterBar onReset={status ? () => setStatus("") : undefined}>
-        <FilterSelect
-          label="状态"
-          value={status}
-          onChange={setStatus}
-          options={Object.entries(RUN_STATUS_LABEL).map(([value, label]) => ({ value, label }))}
-        />
-      </FilterBar>
-      <DataTable
-        columns={COLUMNS}
-        rows={rows}
-        rowKey={(r) => r.id}
-        loading={runs.isPending}
-        error={runs.error}
-        onRetry={() => void runs.refetch()}
-        empty={{
-          icon: Bot,
-          title: "还没有会话",
-          description: "例如：“把某部电影的 1080p 收进来”，或在任意页面右上角打开 Agent 侧栏。",
-        }}
-        onRowClick={(r) => navigate(`/console/agent/${r.id}${mock ? "?mock=1" : ""}`)}
-        hasMore={runs.hasNextPage}
-        onLoadMore={() => void runs.fetchNextPage()}
-        loadingMore={runs.isFetchingNextPage}
-      />
     </>
   );
 }