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>
     </>
   );