diff --git a/src/features/agent/components/agent-command-panel.tsx b/src/features/agent/components/agent-command-panel.tsx
index f965132..ed1ee18 100644
--- a/src/features/agent/components/agent-command-panel.tsx
+++ b/src/features/agent/components/agent-command-panel.tsx
@@ -1,7 +1,6 @@
 import {
   Activity,
   CheckCircle2,
-  Clock3,
   ChevronsUpDown,
   ChevronLeft,
   DatabaseZap,
@@ -175,7 +174,6 @@ export function AgentCommandPanel({
   approvalMode = "request",
   uiResults = [],
   reviewPanel,
-  workspaceContext = [],
   prompt,
   onCollapse,
   onPromptChange,
@@ -342,11 +340,12 @@ export function AgentCommandPanel({
     <MotionConfig reducedMotion="user">
       <aside
         aria-label="Agent 命令面板"
+        data-agent-presentation={presentation}
         className={cn(
           "pointer-events-auto flex h-full min-h-0 w-full flex-col",
           "agent-panel-shell",
           presentation === "desktop-dock"
-            ? "surface-dock overflow-hidden rounded-r-2xl border-y border-r shadow-[0_12px_32px_rgba(15,23,42,0.12)]"
+            ? "surface-dock overflow-hidden rounded-none border-0 border-r"
             : desktopFloating
               ? "acrylic-panel overflow-visible rounded-2xl border"
               : "overflow-hidden rounded-none border-0 bg-transparent",
@@ -359,7 +358,7 @@ export function AgentCommandPanel({
             floatingPresentation && "gap-1 overflow-visible p-1"
           )}
         >
-          <div className="relative z-30 h-16 shrink-0">
+          <div className={cn("relative z-30 shrink-0", presentation === "desktop-dock" ? "h-14" : "h-16")}>
             <header
               className={cn(
                 "agent-panel-header agent-panel-header-expandable inset-x-0 top-0 overflow-hidden",
@@ -368,9 +367,9 @@ export function AgentCommandPanel({
                 historyOpen && "agent-panel-header-expanded"
               )}
             >
-              <div className="flex min-h-16 items-center justify-between gap-2 px-3 py-2">
+              <div className={cn("flex items-center justify-between gap-2 px-3", presentation === "desktop-dock" ? "min-h-14 py-1.5" : "min-h-16 py-2")}>
                 <div className="flex min-w-0 flex-1 items-center gap-2.5 text-slate-900">
-                  <AgentPersona className="h-12 w-12" state={personaState} />
+                  <AgentPersona className={presentation === "desktop-dock" ? "h-10 w-10" : "h-12 w-12"} state={personaState} />
                   <div className="min-w-0 flex-1">
                     <div className="min-w-0">
                       <div className="flex min-w-0 items-center gap-2">
@@ -454,7 +453,8 @@ export function AgentCommandPanel({
                     id={historyPanelId}
                     role="region"
                     aria-label="Agent 历史记录"
-                    className="agent-panel-floating-acrylic agent-panel-history-extension"
+                    data-agent-presentation={presentation}
+                    className="agent-panel-overlay agent-panel-floating-acrylic agent-panel-history-extension"
                     initial="initial"
                     animate="animate"
                     exit="exit"
@@ -468,29 +468,6 @@ export function AgentCommandPanel({
             </header>
           </div>
 
-          {workspaceContext.length > 0 ? (
-            <div className="mx-3 mb-2 flex shrink-0 items-center gap-2 overflow-x-auto rounded-lg bg-slate-900/[0.045] px-2.5 py-2 text-[10px] text-slate-500">
-              <Clock3 size={13} className="shrink-0 text-blue-600" aria-hidden="true" />
-              <span className="shrink-0 font-semibold uppercase tracking-[0.12em] text-slate-500">
-                当前上下文
-              </span>
-              {workspaceContext.map((item) => (
-                <span
-                  key={item.id}
-                  className={cn(
-                    "shrink-0 rounded-md px-2 py-1",
-                    item.tone === "info" && "bg-blue-50 text-blue-700",
-                    item.tone === "warning" && "bg-amber-50 text-amber-700",
-                    (!item.tone || item.tone === "neutral") && "bg-white/70 text-slate-600"
-                  )}
-                  title={`${item.label}：${item.value}`}
-                >
-                  {item.label} · <strong className="font-semibold">{item.value}</strong>
-                </span>
-              ))}
-            </div>
-          ) : null}
-
           {floatingPresentation ? (
             <AnimatePresence initial={false}>
               {hasConversation && !historyOpen ? (
@@ -552,6 +529,7 @@ export function AgentCommandPanel({
                   {messages.length > 0 ? (
                     <BackendMessageList
                       key="messages"
+                      presentation={presentation}
                       messages={messages}
                       streaming={streaming}
                       streamRenderState={streamRenderState}
@@ -596,8 +574,9 @@ export function AgentCommandPanel({
                 streaming={streaming}
               />
               <ConversationScrollButton
+                data-agent-presentation={presentation}
                 className={cn(
-                  "agent-panel-floating-acrylic agent-conversation-scroll-button",
+                  "agent-panel-overlay agent-panel-floating-acrylic agent-conversation-scroll-button",
                   floatingPresentation ? "bottom-[10.25rem] z-30" : "bottom-3"
                 )}
               />
@@ -659,10 +638,11 @@ export function AgentCommandPanel({
               </PromptInputBody>
               <PromptInputFooter className="justify-between gap-2">
                 <div className="flex min-w-0 items-center gap-2">
-                  {!qaOnly ? <ApprovalModeSelect value={approvalMode} disabled={streaming} onValueChange={onApprovalModeChange} /> : <span className="px-1 text-[11px] text-slate-500">任务协作问答</span>}
+                  {!qaOnly ? <ApprovalModeSelect presentation={presentation} value={approvalMode} disabled={streaming} onValueChange={onApprovalModeChange} /> : <span className="px-1 text-[11px] text-slate-500">任务协作问答</span>}
                 </div>
                 <div className="flex shrink-0 items-center gap-2">
                   <AgentModelSelect
+                    presentation={presentation}
                     models={modelOptions}
                     value={selectedModel}
                     onValueChange={onSelectModel}
@@ -823,10 +803,12 @@ function VoiceInputButton({
 }
 
 function ApprovalModeSelect({
+  presentation,
   value,
   disabled,
   onValueChange
 }: {
+  presentation: AgentCommandPanelPresentation;
   value: AgentApprovalMode;
   disabled: boolean;
   onValueChange?: (mode: AgentApprovalMode) => void;
@@ -854,10 +836,11 @@ function ApprovalModeSelect({
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent
+        data-agent-presentation={presentation}
         side="top"
         align="start"
         sideOffset={8}
-        className="agent-panel-control w-[220px] rounded-xl p-2 shadow-lg"
+        className="agent-panel-overlay agent-panel-control w-[220px] rounded-xl p-2 shadow-lg"
       >
         <DropdownMenuLabel className="px-2 pb-2 pt-1 text-xs text-slate-500">
           权限批准模式
@@ -996,10 +979,12 @@ function getLastUserMessageId(messages: AgentChatMessage[]) {
 }
 
 function AgentModelSelect({
+  presentation,
   models,
   value,
   onValueChange
 }: {
+  presentation: AgentCommandPanelPresentation;
   models: AgentModelOption[];
   value: string;
   onValueChange?: (model: string) => void;
@@ -1033,10 +1018,11 @@ function AgentModelSelect({
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent
+        data-agent-presentation={presentation}
         side="top"
         align="end"
         sideOffset={8}
-        className="agent-panel-control w-[230px] rounded-xl p-2 shadow-lg"
+        className="agent-panel-overlay agent-panel-control w-[230px] rounded-xl p-2 shadow-lg"
       >
         <DropdownMenuLabel className="px-2 pb-2 pt-1 text-xs text-slate-500">
           模型选择
@@ -1049,7 +1035,9 @@ function AgentModelSelect({
                 key={model.id}
                 className={cn(
                   "rounded-lg border border-transparent px-2.5 py-2 focus:bg-slate-50",
-                  selected && "border-violet-200 bg-violet-50 focus:bg-violet-50"
+                  selected && (presentation === "desktop-dock"
+                    ? "border-blue-200 bg-blue-50 focus:bg-blue-50"
+                    : "border-violet-200 bg-violet-50 focus:bg-violet-50")
                 )}
                 onSelect={() => onValueChange?.(model.id)}
               >
@@ -1065,7 +1053,7 @@ function AgentModelSelect({
                   </span>
                 </span>
                 {selected ? (
-                  <CheckCircle2 size={15} className="text-violet-600" aria-hidden="true" />
+                  <CheckCircle2 size={15} className={presentation === "desktop-dock" ? "text-blue-600" : "text-violet-600"} aria-hidden="true" />
                 ) : null}
               </DropdownMenuItem>
             );
@@ -1177,12 +1165,12 @@ function AgentEmptyState({ compact = false }: { compact?: boolean }) {
   return (
     <section
       aria-labelledby="agent-empty-state-title"
-      className="mx-auto w-full max-w-[360px]"
+      className="agent-empty-state mx-auto w-full max-w-[360px]"
       lang="zh-CN"
     >
       <div className="px-2 py-4">
         <div className="flex items-center gap-4">
-          <div className="surface-control grid h-[72px] w-[72px] shrink-0 place-items-center rounded-xl shadow-[inset_0_0_0_1px_oklch(0.84_0.025_260)]">
+          <div className="agent-empty-mark surface-control grid h-[72px] w-[72px] shrink-0 place-items-center rounded-xl shadow-[inset_0_0_0_1px_oklch(0.84_0.025_260)]">
             <AgentReadyMark />
           </div>
           <div className="min-w-0 flex-1 text-left">
@@ -1202,7 +1190,7 @@ function AgentEmptyState({ compact = false }: { compact?: boolean }) {
 
       <ul
         className={cn(
-          "surface-control grid grid-cols-2 overflow-hidden rounded-xl shadow-[inset_0_0_0_1px_rgba(148,163,184,0.32)]",
+          "agent-capabilities surface-control grid grid-cols-2 overflow-hidden rounded-xl shadow-[inset_0_0_0_1px_rgba(148,163,184,0.32)]",
           compact && "hidden"
         )}
         aria-label="Agent 分析能力"
@@ -1211,12 +1199,12 @@ function AgentEmptyState({ compact = false }: { compact?: boolean }) {
           <li
             key={label}
             className={cn(
-              "flex min-h-20 items-center gap-3 px-3.5 py-3 text-left",
+              "agent-capability flex min-h-20 items-center gap-3 px-3.5 py-3 text-left",
               index % 2 === 0 && "border-r border-slate-300/80",
               index < 2 && "border-b border-slate-300/80"
             )}
           >
-            <span className="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-[#f9fbfe] text-[#334155] shadow-[inset_0_0_0_1px_rgba(148,163,184,0.28)]">
+            <span className="agent-capability-icon grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-[#f9fbfe] text-[#334155] shadow-[inset_0_0_0_1px_rgba(148,163,184,0.28)]">
               <Icon size={16} strokeWidth={1.8} aria-hidden="true" />
             </span>
             <span className="text-sm font-semibold leading-5 text-[#1e293b]">{label}</span>
@@ -1228,6 +1216,7 @@ function AgentEmptyState({ compact = false }: { compact?: boolean }) {
 }
 
 function BackendMessageList({
+  presentation,
   messages,
   streaming,
   streamRenderState,
@@ -1243,6 +1232,7 @@ function BackendMessageList({
   onStopSpeech,
   qaOnly
 }: {
+  presentation: AgentCommandPanelPresentation;
   messages: AgentChatMessage[];
   streaming: boolean;
   streamRenderState: AgentStreamRenderState;
@@ -1299,6 +1289,7 @@ function BackendMessageList({
                   {message.content ? (
                     message.role === "assistant" ? (
                       <AgentSpeechMessage
+                        presentation={presentation}
                         messageId={message.id}
                         content={message.content}
                         disabled={streaming && index === messages.length - 1}
@@ -1348,6 +1339,7 @@ type SpeechSelection = {
 };
 
 function AgentSpeechMessage({
+  presentation,
   messageId,
   content,
   disabled,
@@ -1359,6 +1351,7 @@ function AgentSpeechMessage({
   onStop,
   children
 }: {
+  presentation: AgentCommandPanelPresentation;
   messageId: string;
   content: string;
   disabled: boolean;
@@ -1472,7 +1465,8 @@ function AgentSpeechMessage({
                   <motion.button
                     key="speech-selection-action"
                     type="button"
-                    className="agent-panel-floating-acrylic agent-speech-selection-action pointer-events-auto inline-flex h-10 items-center gap-2 rounded-xl px-2.5 pr-3 text-xs font-semibold text-slate-800 transition-colors hover:text-blue-700 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600/25"
+                    data-agent-presentation={presentation}
+                    className="agent-panel-overlay agent-panel-floating-acrylic agent-speech-selection-action pointer-events-auto inline-flex h-10 items-center gap-2 rounded-xl px-2.5 pr-3 text-xs font-semibold text-slate-800 transition-colors hover:text-blue-700 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600/25"
                     initial={{ opacity: 0 }}
                     animate={{
                       opacity: 1,
diff --git a/src/features/agent/components/agent-operational-brief.tsx b/src/features/agent/components/agent-operational-brief.tsx
index b23d78f..f645c9a 100644
--- a/src/features/agent/components/agent-operational-brief.tsx
+++ b/src/features/agent/components/agent-operational-brief.tsx
@@ -19,7 +19,7 @@ export function AgentOperationalBrief({
   const brief = createOperationalBrief(messages, statusLabel, streaming);
 
   return (
-    <div className="agent-panel-control rounded-2xl p-3">
+    <div className="agent-panel-operational-brief agent-panel-control rounded-2xl p-3">
       <div className="min-w-0">
         <div className="flex items-center gap-2">
           <StatusDot tone={brief.statusTone} activity={streaming ? "live" : "static"} size="md" />
diff --git a/src/features/workbench/components/workbench-agent-panels.tsx b/src/features/workbench/components/workbench-agent-panels.tsx
index 27bcc1b..83437e8 100644
--- a/src/features/workbench/components/workbench-agent-panels.tsx
+++ b/src/features/workbench/components/workbench-agent-panels.tsx
@@ -1,6 +1,6 @@
 import { AgentCollapsedRail, AgentCommandPanel, AgentPersona } from "@/features/agent";
-import { useEffect, type ComponentProps } from "react";
-import { getWorkbenchViewportLayout } from "../layout/workbench-layout";
+import { useLayoutEffect, type ComponentProps } from "react";
+import { useAgentPanelResize } from "../hooks/use-agent-panel-resize";
 
 type AgentPanelProps = Omit<ComponentProps<typeof AgentCommandPanel>, "collapsing" | "onCollapse">;
 
@@ -11,6 +11,7 @@ type WorkbenchAgentPanelsProps = {
   personaState: ComponentProps<typeof AgentPersona>["state"];
   statusLabel: string;
   viewportWidth: number;
+  conditionExpanded?: boolean;
   onCollapsePanel: () => void;
   onExpandPanel: () => void;
   onWidthCommit?: (width: number) => void;
@@ -23,28 +24,48 @@ export function WorkbenchAgentPanels({
   personaState,
   statusLabel,
   viewportWidth,
+  conditionExpanded = false,
   onCollapsePanel,
   onExpandPanel,
   onWidthCommit
 }: WorkbenchAgentPanelsProps) {
-  const committedWidth = getWorkbenchViewportLayout(viewportWidth).agentWidth;
+  const { handlePointerDown, panelRef, resizing, width } = useAgentPanelResize(
+    viewportWidth,
+    conditionExpanded
+  );
 
-  useEffect(() => {
-    onWidthCommit?.(committedWidth);
-  }, [committedWidth, onWidthCommit]);
+  useLayoutEffect(() => {
+    onWidthCommit?.(width);
+  }, [width, onWidthCommit]);
 
   return (
     <div
-      className="pointer-events-none absolute bottom-0 left-0 top-14 z-50 hidden lg:block"
-      style={{ width: panelOpen ? committedWidth : 0 }}
+      ref={panelRef}
+      className={`pointer-events-none absolute bottom-0 left-0 top-14 z-50 hidden lg:block${resizing ? " select-none" : ""}`}
+      style={{ width: panelOpen ? width : 0 }}
     >
       {panelOpen ? (
-        <AgentCommandPanel
-          {...panelProps}
-          presentation="desktop-dock"
-          collapsing={panelCollapsing}
-          onCollapse={onCollapsePanel}
-        />
+        <>
+          <AgentCommandPanel
+            {...panelProps}
+            presentation="desktop-dock"
+            collapsing={panelCollapsing}
+            onCollapse={onCollapsePanel}
+          />
+          {!panelCollapsing ? (
+            <div
+              role="separator"
+              aria-label="调整 Agent 面板宽度"
+              aria-orientation="vertical"
+              data-resizing={resizing}
+              onPointerDown={handlePointerDown}
+              className="group pointer-events-auto absolute inset-y-0 -right-1.5 z-10 w-3 cursor-col-resize touch-none"
+            >
+              <span className="pointer-events-none absolute inset-y-0 left-[5px] w-px bg-transparent transition-colors duration-150 group-hover:bg-blue-300/70 group-data-[resizing=true]:bg-blue-400/80 motion-reduce:transition-none" />
+              <span className="agent-resize-grip pointer-events-none absolute left-1/2 top-1/2 h-11 w-[3px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue-400 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-data-[resizing=true]:bg-blue-500 group-data-[resizing=true]:opacity-100 motion-reduce:transition-none" />
+            </div>
+          ) : null}
+        </>
       ) : (
         <div className="absolute left-3 top-5">
           <AgentCollapsedRail
diff --git a/src/features/workbench/components/workbench-top-bar.tsx b/src/features/workbench/components/workbench-top-bar.tsx
index ca675f4..a89e9cc 100644
--- a/src/features/workbench/components/workbench-top-bar.tsx
+++ b/src/features/workbench/components/workbench-top-bar.tsx
@@ -104,7 +104,7 @@ export function WorkbenchTopBar({
   };
 
   return (
-    <header className="acrylic-navigation pointer-events-auto absolute left-0 right-0 top-0 z-30 flex h-14 select-none items-center justify-between gap-2 border-b px-2 sm:gap-3 sm:px-4 md:px-5">
+    <header className="workbench-top-bar acrylic-navigation pointer-events-auto absolute left-0 right-0 top-0 z-30 flex h-14 select-none items-center justify-between gap-2 border-b px-2 sm:gap-3 sm:px-4 md:px-5">
       <div className="flex min-w-0 items-center gap-2 sm:gap-2.5 lg:shrink-0">
         <div
           className={cn(
diff --git a/src/features/workbench/hooks/use-agent-panel-resize.ts b/src/features/workbench/hooks/use-agent-panel-resize.ts
index 37f20dc..572e057 100644
--- a/src/features/workbench/hooks/use-agent-panel-resize.ts
+++ b/src/features/workbench/hooks/use-agent-panel-resize.ts
@@ -3,74 +3,55 @@ import {
   useEffect,
   useRef,
   useState,
-  type KeyboardEvent as ReactKeyboardEvent,
   type PointerEvent as ReactPointerEvent
 } from "react";
 import {
-  WORKBENCH_LAYOUT,
   clampAgentPanelWidth,
-  getAgentPanelDefaultWidth,
-  getAgentPanelMaxWidth
+  getWorkbenchViewportLayout
 } from "../layout/workbench-layout";
 
 export function useAgentPanelResize(viewportWidth: number, conditionExpanded = false) {
   const panelRef = useRef<HTMLDivElement | null>(null);
-  const resizeLeftRef = useRef(0);
   const cleanupRef = useRef<(() => void) | null>(null);
-  const widthRef = useRef<number | null>(null);
   const [width, setWidth] = useState<number | null>(null);
-  const [committedWidth, setCommittedWidth] = useState<number | null>(null);
   const [resizing, setResizing] = useState(false);
 
   useEffect(() => () => cleanupRef.current?.(), []);
 
-  useEffect(() => {
-    if (widthRef.current === null) {
-      return;
-    }
-
-    const nextWidth = clampAgentPanelWidth(widthRef.current, viewportWidth, conditionExpanded);
-    widthRef.current = nextWidth;
-    setWidth(nextWidth);
-    setCommittedWidth(nextWidth);
-  }, [conditionExpanded, viewportWidth]);
-
-  const resize = useCallback(
-    (clientX: number) => {
-      const nextWidth = clampAgentPanelWidth(
-        clientX - resizeLeftRef.current,
-        window.innerWidth,
-        conditionExpanded
-      );
-      widthRef.current = nextWidth;
-      setWidth(nextWidth);
-    },
-    [conditionExpanded]
-  );
-
   const handlePointerDown = useCallback(
     (event: ReactPointerEvent<HTMLDivElement>) => {
       if (event.button !== 0 || !panelRef.current) return;
 
       event.preventDefault();
-      resizeLeftRef.current = panelRef.current.getBoundingClientRect().left;
-      setResizing(true);
-      resize(event.clientX);
-
       cleanupRef.current?.();
+      const startX = event.clientX;
+      const startWidth = panelRef.current.getBoundingClientRect().width;
+      const handle = event.currentTarget;
+      const pointerId = event.pointerId;
+      handle.setPointerCapture(pointerId);
+      setResizing(true);
+
       const handlePointerMove = (pointerEvent: PointerEvent) => {
+        if (pointerEvent.pointerId !== pointerId) return;
         pointerEvent.preventDefault();
-        resize(pointerEvent.clientX);
+        setWidth(clampAgentPanelWidth(
+          startWidth + pointerEvent.clientX - startX,
+          window.innerWidth,
+          conditionExpanded
+        ));
       };
-      const stopResizing = () => {
+      const stopResizing = (pointerEvent?: PointerEvent) => {
+        if (pointerEvent && pointerEvent.pointerId !== pointerId) return;
         cleanupRef.current?.();
         setResizing(false);
-        setCommittedWidth(widthRef.current);
       };
+      const handleBlur = () => stopResizing();
       const cleanup = () => {
         window.removeEventListener("pointermove", handlePointerMove);
         window.removeEventListener("pointerup", stopResizing);
         window.removeEventListener("pointercancel", stopResizing);
+        window.removeEventListener("blur", handleBlur);
+        if (handle.hasPointerCapture(pointerId)) handle.releasePointerCapture(pointerId);
         cleanupRef.current = null;
       };
 
@@ -78,43 +59,19 @@ export function useAgentPanelResize(viewportWidth: number, conditionExpanded = f
       window.addEventListener("pointermove", handlePointerMove);
       window.addEventListener("pointerup", stopResizing);
       window.addEventListener("pointercancel", stopResizing);
-    },
-    [resize]
-  );
-
-  const handleKeyDown = useCallback(
-    (event: ReactKeyboardEvent<HTMLDivElement>) => {
-      const currentWidth =
-        panelRef.current?.getBoundingClientRect().width ?? WORKBENCH_LAYOUT.desktop.agentWidth;
-      let nextWidth = currentWidth;
-
-      if (event.key === "ArrowLeft") {
-        nextWidth -= 16;
-      } else if (event.key === "ArrowRight") {
-        nextWidth += 16;
-      } else if (event.key === "Home") {
-        nextWidth = getAgentPanelDefaultWidth(window.innerWidth, conditionExpanded);
-      } else if (event.key === "End") {
-        nextWidth = getAgentPanelMaxWidth(window.innerWidth, conditionExpanded);
-      } else {
-        return;
-      }
-
-      event.preventDefault();
-      const clampedWidth = clampAgentPanelWidth(nextWidth, window.innerWidth, conditionExpanded);
-      widthRef.current = clampedWidth;
-      setWidth(clampedWidth);
-      setCommittedWidth(clampedWidth);
+      window.addEventListener("blur", handleBlur);
     },
     [conditionExpanded]
   );
 
   return {
-    committedWidth,
-    handleKeyDown,
     handlePointerDown,
     panelRef,
     resizing,
-    width
+    width: clampAgentPanelWidth(
+      width ?? getWorkbenchViewportLayout(viewportWidth).agentWidth,
+      viewportWidth,
+      conditionExpanded
+    )
   };
 }
diff --git a/src/features/workbench/hooks/use-workbench-map.ts b/src/features/workbench/hooks/use-workbench-map.ts
index 7f76d6a..c29554c 100644
--- a/src/features/workbench/hooks/use-workbench-map.ts
+++ b/src/features/workbench/hooks/use-workbench-map.ts
@@ -274,9 +274,25 @@ export function useWorkbenchMap({
       maxZoom: MAP_MAX_ZOOM,
       antialias: true,
       preserveDrawingBuffer: true,
+      trackResize: false,
       attributionControl: false
     });
 
+    // MapLibre throttles automatic resizing to 50ms, which lags behind the dock edge.
+    const resizeObserver = new ResizeObserver(() => {
+      const container = map.getContainer();
+      const canvas = map.getCanvas();
+      if (!container.clientWidth || !container.clientHeight) return;
+      if (
+        canvas.clientWidth === container.clientWidth &&
+        canvas.clientHeight === container.clientHeight
+      ) return;
+      map.resize();
+      // Resizing clears the drawing buffer; repaint in the same layout cycle.
+      map.redraw();
+    });
+    resizeObserver.observe(map.getContainer());
+
     window.__waterNetworkMap = map;
     let removeCityScene: (() => void) | undefined;
 
@@ -385,20 +401,6 @@ export function useWorkbenchMap({
     };
     void refreshScada();
 
-    let resizeFrame: number | null = null;
-    const resizeMap = () => map.resize();
-    const resizeObserver = new ResizeObserver(() => {
-      if (resizeFrame !== null) {
-        window.cancelAnimationFrame(resizeFrame);
-      }
-      resizeFrame = window.requestAnimationFrame(() => {
-        resizeFrame = null;
-        resizeMap();
-      });
-    });
-    resizeObserver.observe(containerRef.current);
-    window.addEventListener("resize", resizeMap);
-
     map.on("sourcedata", (event) => {
       updateStatusFromSourceEvent(event, "online", setSourceStatuses);
     });
@@ -427,10 +429,6 @@ export function useWorkbenchMap({
     mapRef.current = map;
 
     return () => {
-      window.removeEventListener("resize", resizeMap);
-      if (resizeFrame !== null) {
-        window.cancelAnimationFrame(resizeFrame);
-      }
       resizeObserver.disconnect();
       scadaAbortController.abort();
       if (scadaRefreshTimeoutId !== undefined) {
diff --git a/src/features/workbench/layout/workbench-layout.test.ts b/src/features/workbench/layout/workbench-layout.test.ts
index 47ef989..fc49703 100644
--- a/src/features/workbench/layout/workbench-layout.test.ts
+++ b/src/features/workbench/layout/workbench-layout.test.ts
@@ -91,7 +91,7 @@ describe("workbench floating panels", () => {
         agentWidth: 900,
         conditionOpen: false
       }).left
-    ).toBe(744);
+    ).toBe(664);
   });
 
   it("uses responsive defaults and preserves the map corridor at maximum width", () => {
@@ -99,12 +99,14 @@ describe("workbench floating panels", () => {
     expect(getAgentPanelDefaultWidth(1024)).toBe(484);
     expect(getAgentPanelDefaultWidth(1440)).toBe(500);
     expect(getAgentPanelDefaultWidth(1536)).toBe(540);
-    expect(getAgentPanelMaxWidth(1024)).toBe(484);
-    expect(clampAgentPanelWidth(620, 1024)).toBe(484);
+    expect(getAgentPanelMaxWidth(1024)).toBe(500);
+    expect(clampAgentPanelWidth(620, 1024)).toBe(500);
+    expect(clampAgentPanelWidth(300, 1440)).toBe(400);
+    expect(clampAgentPanelWidth(620, 1440)).toBe(620);
     expect(getAgentPanelMaxWidth(1280)).toBe(516);
-    expect(getAgentPanelMaxWidth(1440)).toBe(676);
-    expect(getAgentPanelMaxWidth(1536)).toBe(720);
-    expect(getAgentPanelMaxWidth(1920)).toBe(720);
+    expect(getAgentPanelMaxWidth(1440)).toBe(640);
+    expect(getAgentPanelMaxWidth(1536)).toBe(640);
+    expect(getAgentPanelMaxWidth(1920)).toBe(640);
     expect(getAgentPanelMaxWidth(1920, true)).toBe(628);
   });
 });
diff --git a/src/features/workbench/layout/workbench-layout.ts b/src/features/workbench/layout/workbench-layout.ts
index 30dc4a3..94cb351 100644
--- a/src/features/workbench/layout/workbench-layout.ts
+++ b/src/features/workbench/layout/workbench-layout.ts
@@ -5,7 +5,8 @@ export const WORKBENCH_LAYOUT = {
   wideMinWidth: 1536,
   collapsedAgentWidth: 0,
   collapsedAgentRailWidth: 72,
-  maxAgentWidth: 720,
+  minAgentWidth: 400,
+  maxAgentWidth: 640,
   agentPanelLeftInset: 12,
   conditionPanelRightInset: 64,
   minimumAgentMapCorridor: 256,
@@ -52,10 +53,10 @@ export function clampAgentPanelWidth(
   viewportWidth: number,
   conditionExpanded = false
 ) {
-  const minWidth = getAgentPanelDefaultWidth(viewportWidth, conditionExpanded);
+  const maxWidth = getAgentPanelMaxWidth(viewportWidth, conditionExpanded);
 
   return Math.round(
-    Math.min(Math.max(width, minWidth), getAgentPanelMaxWidth(viewportWidth, conditionExpanded))
+    Math.min(Math.max(width, WORKBENCH_LAYOUT.minAgentWidth), maxWidth)
   );
 }
 
@@ -80,7 +81,6 @@ export function getAgentPanelDefaultWidth(viewportWidth: number, conditionExpand
 export function getAgentPanelMaxWidth(viewportWidth: number, conditionExpanded = false) {
   const layout = getWorkbenchViewportLayout(viewportWidth);
   const conditionWidth = conditionExpanded ? layout.conditionExpandedWidth : layout.conditionWidth;
-  const defaultWidth = getAgentPanelDefaultWidth(viewportWidth, conditionExpanded);
   const widthWithMapCorridor =
     viewportWidth -
     WORKBENCH_LAYOUT.agentPanelLeftInset -
@@ -88,7 +88,7 @@ export function getAgentPanelMaxWidth(viewportWidth: number, conditionExpanded =
     conditionWidth -
     WORKBENCH_LAYOUT.minimumAgentMapCorridor;
 
-  return Math.max(defaultWidth, Math.min(WORKBENCH_LAYOUT.maxAgentWidth, widthWithMapCorridor));
+  return Math.min(WORKBENCH_LAYOUT.maxAgentWidth, Math.max(layout.agentWidth, widthWithMapCorridor));
 }
 
 export type WorkbenchPanelState = {
diff --git a/src/features/workbench/map-workbench-page.tsx b/src/features/workbench/map-workbench-page.tsx
index 9c86f70..58e26f8 100644
--- a/src/features/workbench/map-workbench-page.tsx
+++ b/src/features/workbench/map-workbench-page.tsx
@@ -1295,6 +1295,7 @@ export function MapWorkbenchPage({
         personaState={agent.personaState}
         statusLabel={agent.statusLabel}
         viewportWidth={viewportWidth}
+        conditionExpanded={rightPanelExpanded}
         onCollapsePanel={agent.collapsePanel}
         onExpandPanel={agent.expandPanel}
         onWidthCommit={setAgentPanelWidth}
diff --git a/src/styles.css b/src/styles.css
index f71633e..d8a320c 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -368,6 +368,15 @@ button:disabled {
     auto;
 }
 
+#workspace-map .maplibregl-canvas:focus {
+  outline: none;
+}
+
+#workspace-map .maplibregl-canvas:focus-visible {
+  outline: 1px solid var(--action-focus-ring);
+  outline-offset: -1px;
+}
+
 .acrylic-navigation,
 .acrylic-panel,
 .acrylic-control,
@@ -400,6 +409,11 @@ button:disabled {
     saturate(var(--acrylic-backdrop-saturation));
 }
 
+.workbench-top-bar {
+  border-color: var(--surface-divider);
+  box-shadow: none;
+}
+
 .acrylic-panel {
   background-color: var(--acrylic-panel);
   backdrop-filter: blur(var(--acrylic-panel-blur)) saturate(var(--acrylic-backdrop-saturation));
@@ -652,10 +666,6 @@ button:disabled {
   }
 }
 
-.agent-panel-shell {
-  border-color: var(--acrylic-border);
-}
-
 .agent-panel-header {
   z-index: 1;
   border-top-left-radius: inherit;
@@ -956,6 +966,199 @@ button.agent-history-session-trigger:not(:disabled):active {
   color: rgba(255, 255, 255, 0.86);
 }
 
+.agent-panel-shell[data-agent-presentation="desktop-dock"],
+.agent-panel-overlay[data-agent-presentation="desktop-dock"] {
+  --agent-dock-surface: oklch(97.2% 0.005 250);
+  --agent-dock-band: oklch(98.5% 0.003 250);
+  --agent-dock-control-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(15, 23, 42, 0.04);
+  --agent-dock-overlay-surface: rgba(255, 255, 255, 0.94);
+  --agent-dock-overlay-backdrop: blur(12px) saturate(1.03);
+  --agent-dock-overlay-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
+  --surface-control: #ffffff;
+  --surface-reading: #ffffff;
+  --agent-user-message-surface: oklch(96.5% 0.018 255);
+  --agent-user-message-border: transparent;
+  --agent-floating-reading-item: transparent;
+  --agent-floating-reading-item-hover: oklch(97.2% 0.005 250);
+  --agent-floating-reading-active: var(--action-selection-soft);
+  --radius-panel: 12px;
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] {
+  background: var(--agent-dock-surface);
+  border-color: var(--surface-divider);
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-header {
+  box-shadow: none;
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-header > div:first-child {
+  background: transparent;
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-band {
+  background: var(--agent-dock-band);
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-band {
+  border-color: var(--surface-divider);
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-conversation {
+  background: transparent;
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-band > .agent-panel-conversation {
+  background: var(--agent-dock-surface);
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-control {
+  border-color: var(--surface-divider);
+  border-radius: 12px;
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-icon-button,
+.agent-panel-shell[data-agent-presentation="desktop-dock"] form.agent-panel-control {
+  box-shadow: var(--agent-dock-control-shadow);
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] form.agent-panel-control:focus-within {
+  border-color: var(--action-blue);
+  box-shadow: var(--agent-dock-control-shadow), 0 0 0 2px rgba(37, 99, 235, 0.12);
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] :where(button) {
+  border-radius: 10px;
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] :where(button:active:not(:disabled):not(:focus-visible)),
+.agent-panel-overlay[data-agent-presentation="desktop-dock"]:is(button):active:not(:disabled):not(:focus-visible),
+.agent-panel-overlay[data-agent-presentation="desktop-dock"] :where(button:active:not(:disabled):not(:focus-visible)) {
+  translate: var(--tw-translate-x, 0) 1px;
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-icon-button:active {
+  background: var(--action-soft-pressed);
+  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-band .surface-reading {
+  border-color: var(--surface-divider);
+  box-shadow: none;
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-empty-mark {
+  background: var(--agent-dock-band);
+  box-shadow: inset 0 0 0 1px var(--surface-divider);
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-capabilities {
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-capability {
+  min-height: 72px;
+  border: 0;
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-capability-icon {
+  border-radius: 10px;
+  background: var(--agent-dock-band);
+  box-shadow: none;
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-message,
+.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-user-message {
+  border: 0;
+  border-radius: 12px;
+  box-shadow: none;
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-message {
+  background: transparent;
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] [data-agent-ui-result] {
+  border: 1px solid var(--surface-divider);
+  background: var(--surface-reading);
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-operational-brief {
+  border: 0;
+  background: var(--agent-dock-band);
+  box-shadow: none;
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-brief-metric {
+  border: 0;
+  background: transparent;
+}
+
+.agent-panel-overlay[data-agent-presentation="desktop-dock"] {
+  border: 0;
+  border-radius: 12px;
+  background-color: var(--agent-dock-overlay-surface);
+  background-image: none;
+  box-shadow: var(--agent-dock-overlay-shadow);
+  backdrop-filter: var(--agent-dock-overlay-backdrop);
+  -webkit-backdrop-filter: var(--agent-dock-overlay-backdrop);
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-header-expanded {
+  border-color: var(--surface-divider);
+  box-shadow: var(--agent-dock-overlay-shadow);
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-history-extension {
+  border-radius: 0 0 12px 12px;
+  box-shadow: none;
+}
+
+.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-history-extension .agent-panel-control {
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .agent-panel-overlay[data-agent-presentation="desktop-dock"] {
+    --agent-dock-overlay-surface: #ffffff;
+    --agent-dock-overlay-backdrop: none;
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .agent-panel-overlay[data-agent-presentation="desktop-dock"] {
+    --agent-dock-overlay-surface: #ffffff;
+    --agent-dock-overlay-backdrop: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .agent-panel-shell[data-agent-presentation="desktop-dock"],
+  .agent-panel-overlay[data-agent-presentation="desktop-dock"] {
+    --agent-dock-surface: Canvas;
+    --agent-dock-band: Canvas;
+    --agent-dock-control-shadow: none;
+    --agent-dock-overlay-surface: Canvas;
+    --agent-dock-overlay-backdrop: none;
+    --agent-dock-overlay-shadow: none;
+    --surface-control: Canvas;
+    --surface-reading: Canvas;
+    --surface-border: CanvasText;
+    --surface-divider: CanvasText;
+    --agent-user-message-surface: Canvas;
+    --agent-user-message-border: CanvasText;
+    --agent-floating-reading-item-hover: Canvas;
+    --agent-floating-reading-active: Highlight;
+    forced-color-adjust: auto;
+  }
+}
+
 .scheduled-feed-scroll,
 .agent-conversation-scroll {
   scrollbar-gutter: stable;
diff --git a/tests/browser/agent-acrylic.e2e.ts b/tests/browser/agent-acrylic.e2e.ts
index 200cf81..5d5169c 100644
--- a/tests/browser/agent-acrylic.e2e.ts
+++ b/tests/browser/agent-acrylic.e2e.ts
@@ -53,12 +53,25 @@ test("desktop Agent docks beside the workspace with a solid reading surface", as
   await waitForAnimations(agentPanel);
 
   await expectAcrylicSurface(topBar);
-  await expect(agentPanel).toHaveCSS("background-color", "oklch(0.965 0.012 248)");
+  await expect(agentPanel).toHaveCSS("background-color", "oklch(0.972 0.005 250)");
   await expect(agentPanel).toHaveCSS("backdrop-filter", "none");
-  await expect(agentPanel).toHaveCSS("border-top-left-radius", "0px");
-  await expect(agentPanel).toHaveCSS("border-top-right-radius", "16px");
-  await expect(agentPanel).not.toHaveCSS("box-shadow", "none");
+  await expect(agentPanel).toHaveCSS("border-radius", "0px");
+  await expect(agentPanel).toHaveCSS("border-top-width", "0px");
+  await expect(agentPanel).toHaveCSS("border-bottom-width", "0px");
+  await expect(agentPanel).toHaveCSS("border-left-width", "0px");
+  await expect(agentPanel).toHaveCSS("border-right-width", "1px");
+  await expect(agentPanel).toHaveCSS("border-right-color", "oklch(0.905 0.009 250)");
+  await expect(agentPanel).toHaveCSS("box-shadow", "none");
   await expect(agentControls).toHaveCSS("border-top-width", "1px");
+  await expect(agentControls).toHaveCSS("background-color", "oklch(0.985 0.003 250)");
+  await expect(agentPanel.locator("form.agent-panel-control")).toHaveCSS("background-color", "rgb(255, 255, 255)");
+  const capabilities = agentPanel.getByRole("list", { name: "Agent 分析能力" });
+  await expect(capabilities.getByRole("listitem")).toHaveCount(4);
+  await expect(capabilities).toHaveCSS("box-shadow", "none");
+  for (const item of await capabilities.getByRole("listitem").all()) {
+    await expect(item).toHaveCSS("border-right-width", "0px");
+    await expect(item).toHaveCSS("border-bottom-width", "0px");
+  }
   await expect(
     agentPanel.getByText("直接说出你想调查的问题，我会整理监测与空间证据，并将分析结果带回地图。")
   ).toHaveCSS("color", "rgb(51, 65, 85)");
@@ -72,8 +85,21 @@ test("desktop Agent docks beside the workspace with a solid reading surface", as
   expect(conversationBox).not.toBeNull();
   expect(scrollBox).not.toBeNull();
   expect(panelBox!.x).toBe(0);
+  const topBarBox = await topBar.boundingBox();
+  expect(panelBox!.y).toBe(topBarBox!.y + topBarBox!.height);
+  expect(panelBox!.y + panelBox!.height).toBe(page.viewportSize()!.height);
   expect(panelBox!.width).toBe(500);
   await expect.poll(async () => (await workspace.boundingBox())?.x).toBe(500);
+  const headerBox = await agentHeader.boundingBox();
+  const workspaceBox = await workspace.boundingBox();
+  expect(headerBox!.height).toBe(topBarBox!.height);
+  expect(headerBox!.y).toBe(workspaceBox!.y);
+  await expect(topBar).toHaveCSS("box-shadow", "none");
+  await expect(agentHeader).toHaveCSS("box-shadow", "none");
+  await expect(agentHeader.locator(":scope > div").first()).toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
+  expect(await topBar.evaluate((element) => getComputedStyle(element).borderBottomColor)).toBe(
+    await agentPanel.evaluate((element) => getComputedStyle(element).borderRightColor)
+  );
   expect(Math.abs(conversationBox!.x - panelBox!.x)).toBeLessThanOrEqual(1);
   await expect(agentConversationScroll).toHaveCSS("scrollbar-gutter", "stable both-edges");
 
@@ -81,6 +107,57 @@ test("desktop Agent docks beside the workspace with a solid reading surface", as
   await page.getByPlaceholder("输入调度问题，Agent 将通过后端会话流式响应").focus();
   await expect.poll(() => getSurfacePresentation(agentPanel)).toEqual(beforeFocus);
   await page.screenshot({ path: "test-results/agent-history-ui/desktop-dock.png" });
+
+  for (const viewport of [
+    { width: 1024, height: 768, panelWidth: 500 },
+    { width: 1920, height: 1080, panelWidth: 540 }
+  ]) {
+    await page.setViewportSize({ width: viewport.width, height: viewport.height });
+    await expect(agentPanel).toHaveCSS("width", `${viewport.panelWidth}px`);
+    await expect.poll(async () => (await workspace.boundingBox())?.x).toBe(viewport.panelWidth);
+    const resizedPanelBox = await agentPanel.boundingBox();
+    expect(resizedPanelBox!.x).toBe(0);
+    expect(resizedPanelBox!.y).toBe(topBarBox!.y + topBarBox!.height);
+    expect(resizedPanelBox!.y + resizedPanelBox!.height).toBe(viewport.height);
+    await page.screenshot({
+      path: `test-results/agent-history-ui/desktop-dock-${viewport.width}.png`
+    });
+  }
+});
+
+test("desktop Agent portal menus keep local material and respect reduced transparency", async ({ page }) => {
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+  await page.getByRole("button", { name: /展开 Agent 助手面板/ }).click();
+  const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
+  await waitForAnimations(panel);
+
+  for (const name of ["选择 Agent 模型", "权限批准模式"]) {
+    const trigger = panel.getByRole("button", { name });
+    await trigger.click();
+    const menu = page.getByRole("menu");
+    await expect(menu).toHaveAttribute("data-agent-presentation", "desktop-dock");
+    expect(await menu.evaluate((element) => element.closest("aside"))).toBeNull();
+    await expect(menu).toHaveCSS("background-color", "rgba(255, 255, 255, 0.94)");
+    await expect(menu).toHaveCSS("backdrop-filter", "blur(12px) saturate(1.03)");
+    await expect(menu).toHaveCSS("background-image", "none");
+    await page.keyboard.press("Escape");
+    await expect(trigger).toBeFocused();
+  }
+
+  const cdp = await page.context().newCDPSession(page);
+  await cdp.send("Emulation.setEmulatedMedia", {
+    features: [{ name: "prefers-reduced-transparency", value: "reduce" }]
+  });
+  expect(await page.evaluate(() => matchMedia("(prefers-reduced-transparency: reduce)").matches)).toBe(true);
+  await panel.getByRole("button", { name: "选择 Agent 模型" }).click();
+  const menu = page.getByRole("menu");
+  await expect(menu).toHaveCSS("background-color", "rgb(255, 255, 255)");
+  await expect(menu).toHaveCSS("backdrop-filter", "none");
+  await page.keyboard.press("Escape");
+  await panel.getByRole("button", { name: "打开 Agent 历史记录" }).click();
+  const history = panel.getByRole("region", { name: "Agent 历史记录" });
+  await expect(history).toHaveCSS("background-color", "rgb(255, 255, 255)");
+  await expect(history).toHaveCSS("backdrop-filter", "none");
 });
 
 test("desktop Agent history remains usable inside the docked navigation pane", async ({ page }) => {
@@ -99,6 +176,8 @@ test("desktop Agent history remains usable inside the docked navigation pane", a
   await waitForAnimations(history);
   await expect(historyButton).toHaveAttribute("aria-expanded", "true");
   await expectUnifiedHistoryStructure(history);
+  await expect(history).toHaveCSS("background-color", "rgba(255, 255, 255, 0.94)");
+  await expect(history).toHaveCSS("backdrop-filter", "blur(12px) saturate(1.03)");
 
   await history.getByRole("button", { name: "重命名对话" }).first().click();
   const renameInput = history.locator("input").first();
@@ -118,6 +197,35 @@ test("desktop Agent history remains usable inside the docked navigation pane", a
   await expect(historyButton).toHaveAttribute("aria-expanded", "false");
 });
 
+test("desktop Agent press feedback keeps pointer clicks and keyboard activation stable", async ({ page }) => {
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+  await page.getByRole("button", { name: /展开 Agent 助手面板/ }).click();
+  const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
+  await waitForAnimations(panel);
+  const trigger = panel.getByRole("button", { name: "打开 Agent 历史记录" });
+  const history = panel.getByRole("region", { name: "Agent 历史记录" });
+  const before = await trigger.boundingBox();
+  await page.mouse.move(before!.x + before!.width / 2, before!.y + before!.height / 2);
+  await page.mouse.down();
+  const pressed = await trigger.boundingBox();
+  expect(pressed!.y).toBe(before!.y + 1);
+  expect(pressed!.width).toBe(before!.width);
+  await page.mouse.up();
+  await expect(trigger).toHaveAttribute("aria-expanded", "true");
+  await expect(history).toBeVisible();
+  await waitForAnimations(panel);
+
+  await page.keyboard.press("Tab");
+  await trigger.focus();
+  expect(await trigger.evaluate((element) => element.matches(":focus-visible"))).toBe(true);
+  const focused = await trigger.boundingBox();
+  await page.keyboard.down("Space");
+  expect(await trigger.boundingBox()).toEqual(focused);
+  await page.keyboard.up("Space");
+  await expect(history).toBeHidden();
+  await expect(trigger).toBeFocused();
+});
+
 test("mobile Agent mirrors the desktop floating history surface", async ({ page }) => {
   await page.setViewportSize({ width: 390, height: 844 });
   await page.goto("/", { waitUntil: "domcontentloaded" });
@@ -192,6 +300,8 @@ test("docked Agent respects forced color mode", async ({ page }) => {
   await expect(navigation).toBeVisible();
   await expect(navigation).toHaveCSS("backdrop-filter", "none");
   await expect(navigation).toHaveCSS("box-shadow", "none");
+  await expect(navigation).toHaveCSS("border-right-width", "1px");
+  await expect(navigation).toHaveCSS("border-right-color", "rgb(0, 0, 0)");
   await expect(workspace).toBeVisible();
   await expect(page.getByRole("toolbar", { name: "工作区窗口任务栏" })).toHaveCount(0);
   await page.screenshot({ path: "test-results/agent-history-ui/forced-colors.png" });
diff --git a/tests/browser/agent-panel-resize.e2e.ts b/tests/browser/agent-panel-resize.e2e.ts
index 1871398..c0e322e 100644
--- a/tests/browser/agent-panel-resize.e2e.ts
+++ b/tests/browser/agent-panel-resize.e2e.ts
@@ -1,5 +1,6 @@
 import { expect, test, type Page } from "@playwright/test";
 import { mockAgentApi } from "./support/mock-agent-api";
+import { mockWorkbenchContext } from "./support/mock-workbench-context";
 
 test.beforeEach(async ({ page }) => {
   await mockAgentApi(page);
@@ -35,6 +36,190 @@ test("the docked Agent collapses and restores the main workspace", async ({ page
     .toBe(expandedOffset);
 });
 
+test("dragging the Agent edge keeps the workspace attached and preserves the draft", async ({ page }) => {
+  await mockWorkbenchContext(page);
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+  await openAgentPanel(page);
+  const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
+  const workspace = page.locator("#main-workspace");
+  const handle = page.getByRole("separator", { name: "调整 Agent 面板宽度" });
+  const prompt = panel.getByPlaceholder("输入调度问题，Agent 将通过后端会话流式响应");
+  await expect(panel.getByText("当前上下文", { exact: true })).toHaveCount(0);
+  await prompt.fill("保留尚未发送的诊断问题");
+  await expect(panel).toHaveCSS("width", "500px");
+  await page.waitForFunction(() =>
+    Boolean(window.__waterNetworkMap?.getLayer("scada-pressure-hit")) &&
+    !window.__waterNetworkMap?.isMoving()
+  );
+  const cameraBefore = await readCamera(page);
+  expect(await handle.evaluate((element) => (element as HTMLElement).tabIndex)).toBe(-1);
+  const grip = handle.locator(".agent-resize-grip");
+  await expect(grip).toHaveCSS("opacity", "0");
+  const box = (await handle.boundingBox())!;
+  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+  await expect(grip).toHaveCSS("opacity", "1");
+  await page.screenshot({ path: "/tmp/nexttjwater-agent-resize-hover.png" });
+  await page.mouse.down();
+  await expect(handle).toHaveAttribute("data-resizing", "true");
+  await expect(panel).toHaveCSS("width", "500px");
+  for (const nextWidth of [540, 580, 620]) {
+    await page.mouse.move(nextWidth, box.y + box.height / 2);
+    await expect(panel).toHaveCSS("width", `${nextWidth}px`);
+    const panelBox = (await panel.boundingBox())!;
+    const workspaceBox = (await workspace.boundingBox())!;
+    expect(workspaceBox.x).toBe(panelBox.x + panelBox.width);
+  }
+  await page.screenshot({ path: "test-results/agent-history-ui/desktop-resizing.png" });
+  await page.mouse.up();
+  await expect(handle).toHaveAttribute("data-resizing", "false");
+  await expect(prompt).toHaveValue("保留尚未发送的诊断问题");
+  await expect.poll(() => readCamera(page)).toEqual(cameraBefore);
+  await page.mouse.move(1000, 450);
+  await expect(grip).toHaveCSS("opacity", "0");
+  await expect(panel).toHaveCSS("width", "620px");
+  await page.getByRole("button", { name: "折叠 Agent 面板" }).click();
+  await expect(page.getByLabel("Agent 折叠栏")).toBeVisible();
+  await page.getByRole("button", { name: /展开 Agent 助手面板/ }).click();
+  await expect(panel).toHaveCSS("width", "620px");
+  await expect(prompt).toHaveValue("保留尚未发送的诊断问题");
+});
+
+async function readCamera(page: Page) {
+  return page.evaluate(() => {
+    const map = window.__waterNetworkMap!;
+    return {
+      center: map.getCenter().toArray(),
+      zoom: map.getZoom(),
+      bearing: map.getBearing(),
+      pitch: map.getPitch()
+    };
+  });
+}
+
+test("Agent dragging stays within usable widths and adapts to the viewport", async ({ page }) => {
+  await mockWorkbenchContext(page);
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+  await openAgentPanel(page);
+  const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
+  const handle = page.getByRole("separator", { name: "调整 Agent 面板宽度" });
+  const workspace = page.locator("#main-workspace");
+  for (const [targetX, expectedWidth] of [[250, 400], [1000, 640], [620, 620]]) {
+    const box = (await handle.boundingBox())!;
+    await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+    await page.mouse.down();
+    await page.mouse.move(targetX, box.y + box.height / 2);
+    await page.mouse.up();
+    await expect(panel).toHaveCSS("width", `${expectedWidth}px`);
+    await expect.poll(async () => (await workspace.boundingBox())?.x).toBe(expectedWidth);
+    if (expectedWidth === 400) {
+      await page.screenshot({ path: "test-results/agent-history-ui/desktop-resize-minimum.png" });
+    }
+  }
+  await page.setViewportSize({ width: 1024, height: 768 });
+  await expect(panel).toHaveCSS("width", "500px");
+  await expect.poll(async () => (await workspace.boundingBox())?.x).toBe(500);
+  await page.setViewportSize({ width: 1920, height: 1080 });
+  await expect(panel).toHaveCSS("width", "620px");
+  await expect.poll(async () => (await workspace.boundingBox())?.x).toBe(620);
+});
+
+test("the map stays painted while the Agent and viewport change size", async ({ page }) => {
+  await mockWorkbenchContext(page);
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+  await openAgentPanel(page);
+  await page.waitForFunction(() =>
+    Boolean(window.__waterNetworkMap?.getLayer("scada-pressure-hit")) &&
+    !window.__waterNetworkMap?.isMoving()
+  );
+  const initialAlpha = await page.evaluate(() => {
+    const map = window.__waterNetworkMap!;
+    const canvas = map.getCanvas();
+    const gl = canvas.getContext("webgl2") ?? canvas.getContext("webgl");
+    if (!gl) throw new Error("The map has no WebGL context");
+    const pixel = new Uint8Array(4);
+    const readAlpha = () => {
+      gl.readPixels(
+        Math.floor(gl.drawingBufferWidth / 2), Math.floor(gl.drawingBufferHeight / 2),
+        1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel
+      );
+      return pixel[3];
+    };
+    const state = window as typeof window & {
+      __mapResizeProbe?: { samples: number; blankFrames: number; sameMap: boolean };
+    };
+    const probe = { samples: 0, blankFrames: 0, sameMap: true };
+    state.__mapResizeProbe = probe;
+    map.on("resize", () => queueMicrotask(() => {
+      probe.samples += 1;
+      if (readAlpha() === 0) probe.blankFrames += 1;
+      probe.sameMap &&= window.__waterNetworkMap === map;
+    }));
+    map.redraw();
+    return readAlpha();
+  });
+  expect(initialAlpha).toBe(255);
+  const cameraBefore = await readCamera(page);
+  const handle = page.getByRole("separator", { name: "调整 Agent 面板宽度" });
+  const box = (await handle.boundingBox())!;
+  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+  await page.mouse.down();
+  await page.mouse.move(620, box.y + box.height / 2, { steps: 12 });
+  await page.mouse.up();
+  for (const viewport of [
+    { width: 1280, height: 800 }, { width: 1920, height: 1080 }
+  ]) {
+    await page.setViewportSize(viewport);
+    await expect.poll(async () => page.evaluate(() => {
+      const canvas = window.__waterNetworkMap!.getCanvas();
+      return canvas.clientWidth === document.querySelector("#workspace-map")!.clientWidth;
+    })).toBe(true);
+  }
+  const probe = await page.evaluate(() => (window as typeof window & {
+    __mapResizeProbe?: { samples: number; blankFrames: number; sameMap: boolean };
+  }).__mapResizeProbe!);
+  expect(probe.samples).toBeGreaterThan(0);
+  expect(probe.sameMap).toBe(true);
+  expect(probe.blankFrames).toBe(0);
+  await expect.poll(() => readCamera(page)).toEqual(cameraBefore);
+});
+
+test("the map canvas follows workspace resizing before the next paint", async ({ page }) => {
+  await mockWorkbenchContext(page);
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+  await openAgentPanel(page);
+  await page.waitForFunction(() =>
+    Boolean(window.__waterNetworkMap?.getLayer("scada-pressure-hit")) &&
+    !window.__waterNetworkMap?.isMoving()
+  );
+  await page.evaluate(() => {
+    const map = window.__waterNetworkMap!;
+    const container = map.getContainer();
+    const probe = { samples: 0, mismatches: 0, maxWidthDifference: 0 };
+    (window as typeof window & {
+      __mapSizeProbe?: typeof probe;
+    }).__mapSizeProbe = probe;
+    new ResizeObserver(() => queueMicrotask(() => {
+      const difference = Math.abs(container.clientWidth - map.getCanvas().clientWidth);
+      probe.samples += 1;
+      if (difference > 0) probe.mismatches += 1;
+      probe.maxWidthDifference = Math.max(probe.maxWidthDifference, difference);
+    })).observe(container);
+  });
+  const handle = page.getByRole("separator", { name: "调整 Agent 面板宽度" });
+  const box = (await handle.boundingBox())!;
+  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+  await page.mouse.down();
+  for (const width of [620, 420, 600]) {
+    await page.mouse.move(width, box.y + box.height / 2, { steps: 12 });
+  }
+  await page.mouse.up();
+  const probe = await page.evaluate(() => (window as typeof window & {
+    __mapSizeProbe?: { samples: number; mismatches: number; maxWidthDifference: number };
+  }).__mapSizeProbe!);
+  expect(probe.samples).toBeGreaterThan(1);
+  expect(probe.maxWidthDifference).toBe(0);
+});
+
 test("the floating condition feed coordinates with the docked Agent", async ({ page }) => {
   await page.setViewportSize({ width: 1280, height: 900 });
   await page.goto("/", { waitUntil: "domcontentloaded" });
diff --git a/tests/browser/agent-streaming-stability.e2e.ts b/tests/browser/agent-streaming-stability.e2e.ts
index 0374d55..ecd7e2d 100644
--- a/tests/browser/agent-streaming-stability.e2e.ts
+++ b/tests/browser/agent-streaming-stability.e2e.ts
@@ -311,7 +311,7 @@ test("stream completion and the plan card remain positionally stable", async ({
   await sendButton.click();
   const userMessage = page.locator(".agent-panel-user-message");
   const assistantMessage = page.locator(".agent-panel-message").first();
-  await expect(userMessage).toHaveCSS("background-color", "rgba(224, 229, 249, 0.92)");
+  await expect(userMessage).toHaveCSS("background-color", "oklch(0.965 0.018 255)");
   expect(
     await userMessage.evaluate((element) => getComputedStyle(element).backgroundColor)
   ).not.toBe(
@@ -319,7 +319,7 @@ test("stream completion and the plan card remain positionally stable", async ({
   );
   await expect
     .poll(() => userMessage.evaluate((element) => getComputedStyle(element).boxShadow))
-    .not.toBe("none");
+    .toBe("none");
   await expect
     .poll(() => assistantMessage.evaluate((element) => getComputedStyle(element).boxShadow))
     .toBe(await userMessage.evaluate((element) => getComputedStyle(element).boxShadow));
@@ -331,7 +331,7 @@ test("stream completion and the plan card remain positionally stable", async ({
   await expect(operationalBrief.getByRole("button", { name: "预览影响" })).toBeDisabled();
   await expect(operationalBrief.getByRole("button", { name: "检查证据" })).toBeDisabled();
   await expect(operationalBrief).toHaveCSS("position", "static");
-  await expect(operationalBrief).toHaveCSS("border-radius", "16px");
+  await expect(operationalBrief).toHaveCSS("border-radius", "12px");
   // Desktop uses an inline brief above the conversation, not the legacy floating overlay.
   await expect(page.locator(".agent-panel-shell")).toHaveClass(/surface-dock/);
   await expect(page.locator(".agent-panel-operational-float")).toHaveCount(0);
@@ -478,7 +478,14 @@ test("stream completion and the plan card remain positionally stable", async ({
   await expect(
     expandedLiveProgress.getByText("正在核对用水过程与供水分区响应关系", { exact: true })
   ).toHaveCSS("white-space", "normal");
+  await expandedLiveProgress.evaluate(async (element) => {
+    const animations = element
+      .getAnimations({ subtree: true })
+      .filter((animation) => animation.effect?.getTiming().iterations !== Infinity);
+    await Promise.all(animations.map((animation) => animation.finished.catch(() => undefined)));
+  });
   await progressToggle.click();
+  await expect(progressToggle).toHaveAttribute("data-state", "closed");
   await expect(page.getByRole("list", { name: "最近执行进度" }).locator("li")).toHaveCount(3);
 
   triggerProgressFailure();
@@ -603,7 +610,15 @@ test("stream completion and the plan card remain positionally stable", async ({
   await page.mouse.wheel(0, -2400);
   const scrollToLatestButton = page.getByRole("button", { name: "滚动到最新消息" });
   await expect(scrollToLatestButton).toBeVisible();
-  await expect(scrollToLatestButton).toHaveCSS("background-color", "rgba(255, 255, 255, 0.86)");
+  const scrollButtonBox = (await scrollToLatestButton.boundingBox())!;
+  await page.mouse.move(scrollButtonBox.x + scrollButtonBox.width / 2, scrollButtonBox.y + scrollButtonBox.height / 2);
+  await page.mouse.down();
+  const pressedScrollButtonBox = (await scrollToLatestButton.boundingBox())!;
+  expect(pressedScrollButtonBox.x).toBe(scrollButtonBox.x);
+  expect(pressedScrollButtonBox.y).toBe(scrollButtonBox.y + 1);
+  await page.mouse.move(scrollButtonBox.x - 20, scrollButtonBox.y);
+  await page.mouse.up();
+  await expect(scrollToLatestButton).toHaveCSS("background-color", "rgba(255, 255, 255, 0.94)");
   await expect
     .poll(() =>
       scrollToLatestButton.evaluate((element) => getComputedStyle(element).backdropFilter)
@@ -693,10 +708,12 @@ test("stream completion and the plan card remain positionally stable", async ({
   expect(speechSelectionIconMotion.ySpread).toBeLessThanOrEqual(0.1);
   const speechSelectionButton = page.getByRole("button", { name: "从这里开始朗读" });
   await expect(speechSelectionButton).toBeVisible();
+  await expect(speechSelectionButton).toHaveAttribute("data-agent-presentation", "desktop-dock");
   await expect(speechSelectionButton).toHaveCSS("border-top-width", "0px");
   expect(await speechSelectionButton.evaluate(readAcrylicMaterial)).toEqual(
     await scrollToLatestButton.evaluate(readAcrylicMaterial)
   );
+  await page.screenshot({ path: "test-results/agent-history-ui/desktop-conversation.png" });
 });
 
 function createLongMarkdownResponse() {
diff --git a/tests/browser/workbench-visual.e2e.ts b/tests/browser/workbench-visual.e2e.ts
index 938d29f..9ac08a2 100644
--- a/tests/browser/workbench-visual.e2e.ts
+++ b/tests/browser/workbench-visual.e2e.ts
@@ -65,6 +65,27 @@ test.describe("Main Frame workbench", () => {
     });
   });
 
+  test("map focus keeps pointer interaction borderless and uses the app focus style", async ({ page }) => {
+    await page.setViewportSize({ width: 1440, height: 900 });
+    await openWorkbench(page);
+    await openDesktopAgent(page);
+    const canvas = page.locator("#workspace-map .maplibregl-canvas");
+    const box = (await canvas.boundingBox())!;
+    await canvas.click({ position: { x: box.width / 2, y: box.height / 2 } });
+    await expect(canvas).toBeFocused();
+    await expect(canvas).toHaveCSS("outline-style", "none");
+    await expect(canvas).toHaveCSS("border-width", "0px");
+    await expect(page.locator("#main-workspace")).toHaveCSS("border-width", "0px");
+    await page.keyboard.press("Tab");
+    await canvas.focus();
+    expect(await canvas.evaluate((element) => element.matches(":focus-visible"))).toBe(true);
+    await expect(canvas).toHaveCSS("outline-style", "solid");
+    await expect(canvas).toHaveCSS("outline-width", "1px");
+    await expect(canvas).toHaveCSS("outline-color", "rgba(37, 99, 235, 0.34)");
+    await expect(canvas).toHaveCSS("outline-offset", "-1px");
+    await page.screenshot({ path: "test-results/agent-history-ui/map-pointer-focus.png" });
+  });
+
   test("mobile layer panel keeps Tianditu choices usable", async ({ page }) => {
     await page.setViewportSize({ width: 375, height: 812 });
     await openWorkbench(page);
@@ -260,7 +281,8 @@ async function expectDesktopMainFrameGeometry(page: Page) {
   const mapWindow = page.locator("#workspace-map");
   const agentPanel = page.getByRole("complementary", { name: "Agent 命令面板" });
   await expect(agentPanel).toHaveCSS("width", "500px");
-  await expect(agentPanel).toHaveCSS("border-top-right-radius", "16px");
+  await expect(agentPanel).toHaveCSS("border-radius", "0px");
+  await expect(agentPanel).toHaveCSS("border-right-width", "1px");
   await expect(mapWindow).toHaveCSS("border-radius", "0px");
 
   const workspaceBox = await workspace.boundingBox();
@@ -286,8 +308,8 @@ async function expectSolidMainFrameMaterials(page: Page) {
     };
   });
   expect(materials.agentBackdrop).toBe("none");
-  expect(materials.agentBackground).toBe("oklch(0.965 0.012 248)");
-  expect(materials.agentShadow).not.toBe("none");
+  expect(materials.agentBackground).toBe("oklch(0.972 0.005 250)");
+  expect(materials.agentShadow).toBe("none");
 }
 
 async function expectLoadedChineseFont(page: Page) {
diff --git a/tests/browser/workbench-visual.e2e.ts-snapshots/workbench-desktop-light-chromium-linux.png b/tests/browser/workbench-visual.e2e.ts-snapshots/workbench-desktop-light-chromium-linux.png
index ef7e084..a860abf 100644
Binary files a/tests/browser/workbench-visual.e2e.ts-snapshots/workbench-desktop-light-chromium-linux.png and b/tests/browser/workbench-visual.e2e.ts-snapshots/workbench-desktop-light-chromium-linux.png differ
diff --git a/tests/browser/workbench-visual.e2e.ts-snapshots/workbench-desktop-satellite-chromium-linux.png b/tests/browser/workbench-visual.e2e.ts-snapshots/workbench-desktop-satellite-chromium-linux.png
index 184e762..c322c25 100644
Binary files a/tests/browser/workbench-visual.e2e.ts-snapshots/workbench-desktop-satellite-chromium-linux.png and b/tests/browser/workbench-visual.e2e.ts-snapshots/workbench-desktop-satellite-chromium-linux.png differ
diff --git a/tests/browser/workbench-visual.e2e.ts-snapshots/workbench-mobile-agent-light-chromium-linux.png b/tests/browser/workbench-visual.e2e.ts-snapshots/workbench-mobile-agent-light-chromium-linux.png
index 6cc1bec..5f96ffa 100644
Binary files a/tests/browser/workbench-visual.e2e.ts-snapshots/workbench-mobile-agent-light-chromium-linux.png and b/tests/browser/workbench-visual.e2e.ts-snapshots/workbench-mobile-agent-light-chromium-linux.png differ
diff --git a/tests/browser/workbench-visual.e2e.ts-snapshots/workbench-mobile-condition-satellite-chromium-linux.png b/tests/browser/workbench-visual.e2e.ts-snapshots/workbench-mobile-condition-satellite-chromium-linux.png
index 03e1bf5..f29b45d 100644
Binary files a/tests/browser/workbench-visual.e2e.ts-snapshots/workbench-mobile-condition-satellite-chromium-linux.png and b/tests/browser/workbench-visual.e2e.ts-snapshots/workbench-mobile-condition-satellite-chromium-linux.png differ
diff --git a/tests/browser/workbench-visual.e2e.ts-snapshots/workbench-mobile-launcher-light-chromium-linux.png b/tests/browser/workbench-visual.e2e.ts-snapshots/workbench-mobile-launcher-light-chromium-linux.png
index d77bb88..cbe8c0e 100644
Binary files a/tests/browser/workbench-visual.e2e.ts-snapshots/workbench-mobile-launcher-light-chromium-linux.png and b/tests/browser/workbench-visual.e2e.ts-snapshots/workbench-mobile-launcher-light-chromium-linux.png differ