diff --git a/docs/component-design-system.md b/docs/component-design-system.md
index 548b29d..432045c 100644
--- a/docs/component-design-system.md
+++ b/docs/component-design-system.md
@@ -51,6 +51,8 @@
 
 每个业务区按“定位、状态、下一步、证据”排列。侧栏内容使用 12px 至 14px 的紧凑间距。复杂原始对象、请求参数、历史和测试资源按需展开。移动端保持单列，不用横向滚动承载业务字段。
 
+地图背景延伸到顶部导航背后，地图控件和分析正文仍预留 56px 导航高度。独立浮层使用完整亚克力材质，阅读面和控件内部的填色不额外叠加模糊；任务堆叠保留完整圆角和每层 7px 的错位。时间轴容器不足 640px 时省略统计摘要，优先保证日期、图例和操作按钮互不重叠。
+
 ## 6. 层级与深度
 
 保持既有亚克力半透明材质，在透底、模糊、噪点和边缘高光上调整色调。桌面 Agent dock 延续既有实底布局，使用银灰色调。
diff --git a/src/features/agent/components/agent-collapsed-rail.tsx b/src/features/agent/components/agent-collapsed-rail.tsx
index 660a6c1..d58e14a 100644
--- a/src/features/agent/components/agent-collapsed-rail.tsx
+++ b/src/features/agent/components/agent-collapsed-rail.tsx
@@ -20,7 +20,7 @@ export function AgentCollapsedRail({
     <aside
       aria-label="Agent 折叠栏"
       className={cn(
-        "agent-rail-enter surface-dock pointer-events-auto w-[72px] rounded-2xl border p-1.5 shadow-[0_8px_24px_rgba(15,23,42,0.1)]"
+        "agent-rail-enter acrylic-control pointer-events-auto w-[72px] rounded-2xl border p-1.5"
       )}
     >
       <button
@@ -28,7 +28,7 @@ export function AgentCollapsedRail({
         aria-label={expandLabel}
         title={expandLabel}
         onClick={onExpand}
-        className="agent-rail-item surface-control group relative flex h-14 w-full items-center justify-center rounded-xl border hover:bg-[var(--surface-reading)]"
+        className="agent-rail-item group relative flex h-14 w-full items-center justify-center rounded-xl border border-transparent bg-transparent hover:bg-[var(--action-selection-soft)]"
       >
         <AgentPersona className="h-11 w-11" state={personaState} />
         <span className="agent-panel-primary-icon absolute bottom-0.5 right-0.5 grid h-5 w-5 place-items-center rounded-md border-0! shadow-xs transition-transform group-hover:translate-x-0.5">
diff --git a/src/features/agent/components/agent-command-panel.tsx b/src/features/agent/components/agent-command-panel.tsx
index 4c9e1eb..ac2bbb6 100644
--- a/src/features/agent/components/agent-command-panel.tsx
+++ b/src/features/agent/components/agent-command-panel.tsx
@@ -802,6 +802,9 @@ function VoiceInputButton({
   );
 }
 
+const AGENT_SELECT_ITEM_CLASS_NAME =
+  "rounded-lg border border-transparent px-2.5 py-2 focus:border-[var(--action-border-hover)] focus:bg-[var(--action-selection-soft-hover)] data-[highlighted]:border-[var(--action-border-hover)] data-[highlighted]:bg-[var(--action-selection-soft-hover)] motion-reduce:transition-none";
+
 function ApprovalModeSelect({
   presentation,
   value,
@@ -847,8 +850,9 @@ function ApprovalModeSelect({
         </DropdownMenuLabel>
         <DropdownMenuItem
           className={cn(
-            "items-start rounded-lg border border-transparent px-2.5 py-2 focus:bg-[var(--surface-reading)]",
-            requestApproval && "border-[var(--surface-border)] bg-[var(--action-soft)] focus:bg-[var(--action-soft)]"
+            AGENT_SELECT_ITEM_CLASS_NAME,
+            "items-start",
+            requestApproval && "border-[var(--surface-border)] bg-[var(--action-soft)]"
           )}
           onSelect={() => onValueChange?.("request")}
         >
@@ -863,9 +867,10 @@ function ApprovalModeSelect({
         </DropdownMenuItem>
         <DropdownMenuItem
           className={cn(
-            "mt-1 items-start rounded-lg border border-transparent px-2.5 py-2 focus:bg-[var(--surface-reading)]",
+            AGENT_SELECT_ITEM_CLASS_NAME,
+            "mt-1 items-start",
             !requestApproval &&
-              "status-tone-success border-[var(--status-border)] bg-[var(--status-soft)] focus:bg-[var(--status-soft)]"
+              "status-tone-success border-[var(--status-border)] bg-[var(--status-soft)]"
           )}
           onSelect={() => onValueChange?.("always")}
         >
@@ -1034,10 +1039,8 @@ function AgentModelSelect({
               <DropdownMenuItem
                 key={model.id}
                 className={cn(
-                  "rounded-lg border border-transparent px-2.5 py-2 focus:bg-[var(--surface-reading)]",
-                  selected && (presentation === "desktop-dock"
-                    ? "border-[var(--surface-border)] bg-[var(--action-soft)] focus:bg-[var(--action-soft)]"
-                    : "border-[var(--surface-border)] bg-[var(--action-soft)] focus:bg-[var(--action-soft)]")
+                  AGENT_SELECT_ITEM_CLASS_NAME,
+                  selected && "border-[var(--surface-border)] bg-[var(--action-soft)]"
                 )}
                 onSelect={() => onValueChange?.(model.id)}
               >
diff --git a/src/features/map/core/components/scale-line.tsx b/src/features/map/core/components/scale-line.tsx
index 40be8a0..7090b17 100644
--- a/src/features/map/core/components/scale-line.tsx
+++ b/src/features/map/core/components/scale-line.tsx
@@ -115,17 +115,16 @@ export function MapScaleLine({
 
       <ScaleLineDivider />
 
-      <div className="flex min-w-0 items-center justify-end gap-2.5 overflow-hidden whitespace-nowrap text-slate-700">
+      <div className="flex min-w-0 items-center justify-end gap-2 overflow-hidden whitespace-nowrap text-slate-700">
         <span className="tabular-nums text-slate-800">{scale.zoom}</span>
-        <span className="text-slate-600">EPSG:3857</span>
         {coordinateReadout ? (
-          <span className={cn(COORDINATE_READOUT_WIDTH_CLASS_NAME, "min-w-0 truncate text-right tabular-nums text-slate-800")} title={coordinateReadout.lngLatText}>
+          <span className={cn(COORDINATE_READOUT_WIDTH_CLASS_NAME, "min-w-0 truncate text-left tabular-nums text-slate-800")} title={coordinateReadout.lngLatText}>
             {coordinateReadout.mercatorText}
           </span>
         ) : (
-          <span className={cn(COORDINATE_READOUT_WIDTH_CLASS_NAME, "min-w-0 truncate text-right tabular-nums")}>{coordinateLabel}</span>
+          <span className={cn(COORDINATE_READOUT_WIDTH_CLASS_NAME, "min-w-0 truncate text-left tabular-nums")}>{coordinateLabel}</span>
         )}
-        <span className="text-[var(--ink-muted)]">Mapbox/OSM</span>
+        <span className="shrink-0 text-slate-600">EPSG:3857</span>
       </div>
     </div>
   );
diff --git a/src/features/workbench/components/agent-task-ticker.tsx b/src/features/workbench/components/agent-task-ticker.tsx
index 2899783..9e16b06 100644
--- a/src/features/workbench/components/agent-task-ticker.tsx
+++ b/src/features/workbench/components/agent-task-ticker.tsx
@@ -296,7 +296,7 @@ export function AgentTaskTicker({
             {isHovered && hasMultipleRunningTasks ? (
               <motion.div
                 key="task-indicator"
-                className="agent-task-ticker-indicator surface-control flex flex-col gap-1 rounded-full border px-1 py-1"
+                className="agent-task-ticker-indicator acrylic-control flex flex-col gap-1 rounded-full border px-1 py-1"
                 variants={tickerIndicatorVariants}
                 initial="initial"
                 animate="animate"
@@ -342,7 +342,7 @@ function TickerTaskCard({
       layout="position"
       className={cn(
         "absolute inset-x-0 top-0 h-16 overflow-hidden rounded-[22px] px-3 py-2",
-        isActive ? "glass-transient z-30" : "surface-control pointer-events-none z-10 border"
+        isActive ? "glass-transient z-30" : "acrylic-control pointer-events-none z-10 border"
       )}
       style={{ transformOrigin: "center top" }}
       custom={transitionDirection}
diff --git a/src/features/workbench/components/scheduled-condition-detail-panel.tsx b/src/features/workbench/components/scheduled-condition-detail-panel.tsx
index c3c9008..57b1842 100644
--- a/src/features/workbench/components/scheduled-condition-detail-panel.tsx
+++ b/src/features/workbench/components/scheduled-condition-detail-panel.tsx
@@ -1256,7 +1256,7 @@ function TaskExecutionStepRow({
           activity={step.status === "current" ? "loading" : "static"}
           shape="circle"
           size="md"
-          className="relative z-10 ring-4 ring-white"
+          className="relative z-10"
         >
           {step.status === "done" ? (
             <CheckCircle2 size={14} />
diff --git a/src/features/workbench/components/scheduled-condition-feed.tsx b/src/features/workbench/components/scheduled-condition-feed.tsx
index 67bf2e9..e7ff2ec 100644
--- a/src/features/workbench/components/scheduled-condition-feed.tsx
+++ b/src/features/workbench/components/scheduled-condition-feed.tsx
@@ -918,7 +918,7 @@ function ConditionTimelineSkeleton({ rows }: { rows: number }) {
                 aria-hidden="true"
               />
             ) : null}
-            <span className="relative z-10 h-6 w-6 animate-pulse rounded-full bg-[var(--surface-divider)] ring-4 ring-white" />
+            <span className="relative z-10 h-6 w-6 animate-pulse rounded-full bg-[var(--surface-divider)]" />
           </span>
           <span className="surface-reading min-w-0 rounded-xl border border-[var(--surface-divider)]/70 px-2 py-1.5">
             <span className="flex min-w-0 items-center gap-2">
@@ -1085,10 +1085,7 @@ function ConditionTimelineRow({
           activity={activity}
           shape="circle"
           data-selected={selected ? "true" : undefined}
-          className={cn(
-            "relative z-10 ring-4 ring-white",
-            selected && "group-focus-visible:ring-[var(--action-focus-ring)]"
-          )}
+          className="relative z-10"
         >
           <Icon size={12} />
         </SemanticStatusIcon>
diff --git a/src/features/workbench/map-workbench-page.tsx b/src/features/workbench/map-workbench-page.tsx
index 58e26f8..bbc8b5c 100644
--- a/src/features/workbench/map-workbench-page.tsx
+++ b/src/features/workbench/map-workbench-page.tsx
@@ -1254,7 +1254,7 @@ export function MapWorkbenchPage({
           />
         }
         mapOverlay={
-          <div className="pointer-events-none absolute inset-0">
+          <div className="pointer-events-none absolute inset-x-0 bottom-0 top-14">
             {!devPanelOpen ? (
               <>
                 <div className="pointer-events-auto absolute right-3 top-10 hidden lg:block">
diff --git a/src/features/workbench/operational-timeline/operational-timeline.tsx b/src/features/workbench/operational-timeline/operational-timeline.tsx
index 2420633..f911063 100644
--- a/src/features/workbench/operational-timeline/operational-timeline.tsx
+++ b/src/features/workbench/operational-timeline/operational-timeline.tsx
@@ -82,41 +82,51 @@ export function OperationalTimeline({
     return (
       <motion.section
         aria-label="运行时间轴摘要"
-        className="acrylic-panel flex h-full items-center gap-3 rounded-2xl border px-3 text-slate-900"
+        className="@container/timeline acrylic-panel rounded-2xl border p-2 text-slate-900"
         initial={false}
         animate={{ height }}
         transition={sizeTransition}
       >
-        <Clock3 size={15} className="text-blue-600" aria-hidden="true" />
-        <span className="text-xs font-semibold">{formatDate(date)}</span>
-        <span className="h-4 w-px bg-slate-300" />
-        <TimelineSummary summary={summary} />
-        {selectedEvent ? (
-          <button
-            type="button"
-            onClick={onClearSelection}
-            className="min-w-0 truncate text-left text-xs text-slate-600 hover:text-blue-700"
-          >
-            已选 {formatClock(selectedEvent.cursorTime)} · {selectedEvent.title}
-          </button>
-        ) : (
-          <span className="min-w-0 truncate text-xs text-slate-500">分析视图保持独立时间范围</span>
-        )}
-        <TimelineLegend
-          visibility={eventVisibility}
-          onVisibilityChange={setEventVisibility}
-        />
-        <TimelineActions mode={mode} onModeChange={onModeChange} onReturnNow={onReturnNow} />
+        <div className="flex h-8 min-w-0 items-center gap-2">
+          <div className="flex min-w-0 items-baseline gap-2 self-start overflow-hidden">
+            <Clock3 size={18} className="shrink-0 self-start text-blue-600" aria-hidden="true" />
+            <span className="shrink-0 whitespace-nowrap text-sm font-semibold leading-5 tabular-nums">{formatDate(date)}</span>
+            <span className="h-4 w-px shrink-0 self-center bg-slate-300" />
+            <TimelineSummary summary={summary} />
+            {selectedEvent ? (
+              <button
+                type="button"
+                onClick={onClearSelection}
+                className="min-w-0 truncate text-left text-xs text-slate-600 hover:text-blue-700"
+              >
+                已选 {formatClock(selectedEvent.cursorTime)} · {selectedEvent.title}
+              </button>
+            ) : (
+              <span className="min-w-0 truncate text-xs text-slate-500">分析视图保持独立时间范围</span>
+            )}
+          </div>
+          <div className="ml-auto flex h-8 shrink-0 items-center gap-2">
+            <TimelineLegend
+              visibility={eventVisibility}
+              onVisibilityChange={setEventVisibility}
+            />
+            <TimelineActions
+              mode={mode}
+              onModeChange={onModeChange}
+              onReturnNow={onReturnNow}
+            />
+          </div>
+        </div>
       </motion.section>
     );
   }
 
   return (
-    <TooltipProvider delayDuration={180}>
+    <TooltipProvider delayDuration={180} disableHoverableContent>
       <motion.section
           aria-label="运行时间轴"
           className={cn(
-            "flex min-h-0 flex-col overflow-hidden text-slate-900",
+            "@container/timeline relative flex min-h-0 flex-col overflow-hidden text-slate-900",
             mobile
               ? "surface-reading h-full rounded-t-xl border-t"
               : "acrylic-panel rounded-2xl border"
@@ -125,15 +135,10 @@ export function OperationalTimeline({
           animate={{ height }}
           transition={sizeTransition}
         >
-          <div
-            className={cn(
-              "flex shrink-0 items-center gap-3 border-b border-slate-300/70 px-3",
-              mode === "compact" && !mobile ? "h-10" : "h-12"
-            )}
-          >
-            <div className="flex min-w-0 items-center gap-2">
-              <Clock3 size={15} className="shrink-0 text-blue-600" aria-hidden="true" />
-              <div className="flex items-center gap-2">
+          <div className="flex shrink-0 items-center gap-2 border-b border-slate-300/70 p-2">
+            <div className="flex min-w-0 items-baseline gap-2 self-start overflow-hidden">
+              <Clock3 size={18} className="shrink-0 self-start text-blue-600" aria-hidden="true" />
+              <div className="flex shrink-0 items-baseline gap-2">
                 <p
                   className={cn(
                     "text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500",
@@ -142,26 +147,32 @@ export function OperationalTimeline({
                 >
                   运行时间轴
                 </p>
-                <p className="text-xs font-semibold text-slate-900">{formatDate(date)}</p>
+                <p className="whitespace-nowrap text-sm font-semibold leading-5 tabular-nums text-slate-900">{formatDate(date)}</p>
               </div>
+              <span className="hidden h-4 w-px shrink-0 self-center bg-slate-300 sm:block" />
+              {!mobile ? <TimelineSummary summary={summary} /> : null}
+              {selectedEvent && !mobile ? (
+                <button
+                  type="button"
+                  onClick={onClearSelection}
+                  title="清除当前事件选择"
+                  className="min-w-0 truncate text-left text-[11px] text-slate-500 hover:text-blue-700"
+                >
+                  {formatClock(selectedEvent.cursorTime)} · {selectedEvent.title}
+                </button>
+              ) : null}
+            </div>
+            <div className="ml-auto flex h-8 shrink-0 items-center gap-2">
+              <TimelineLegend
+                visibility={eventVisibility}
+                onVisibilityChange={setEventVisibility}
+              />
+              <TimelineActions
+                mode={mode}
+                onModeChange={onModeChange}
+                onReturnNow={onReturnNow}
+              />
             </div>
-            <span className="hidden h-5 w-px bg-slate-300 sm:block" />
-            {!mobile ? <TimelineSummary summary={summary} /> : null}
-            {selectedEvent && !mobile ? (
-              <button
-                type="button"
-                onClick={onClearSelection}
-                title="清除当前事件选择"
-                className="min-w-0 truncate text-left text-[11px] text-slate-500 hover:text-blue-700"
-              >
-                {formatClock(selectedEvent.cursorTime)} · {selectedEvent.title}
-              </button>
-            ) : null}
-            <TimelineLegend
-              visibility={eventVisibility}
-              onVisibilityChange={setEventVisibility}
-            />
-            <TimelineActions mode={mode} onModeChange={onModeChange} onReturnNow={onReturnNow} />
           </div>
 
           <AnimatePresence initial={false} mode="wait">
@@ -204,14 +215,14 @@ export function OperationalTimeline({
             ) : (
               <motion.div
                 key="compact-timeline"
-                className="relative min-h-0 flex-1 px-3"
+                className="relative min-h-0 flex-1 px-2"
                 initial={prefersReducedMotion ? false : { opacity: 0, y: 4 }}
                 animate={{ opacity: 1, y: 0 }}
                 exit={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 4 }}
                 transition={prefersReducedMotion ? { duration: 0 } : { duration: 0.14 }}
               >
                 <CompactTimeTicks />
-                <div className="absolute bottom-2 left-3 right-3 top-4">
+                <div className="absolute bottom-2 left-2 right-2 top-4">
                   <div className="absolute inset-x-0 top-1/2 h-px bg-slate-300" />
                   {clusters.map((cluster, index) => (
                     <TimelineMarker
@@ -317,7 +328,7 @@ function TimelineMarker({
         side="top"
         sideOffset={10}
         className={cn(
-          "acrylic-panel w-[min(300px,calc(100vw-24px))] overflow-hidden rounded-2xl border p-1 text-slate-900 shadow-[0_18px_48px_rgba(15,23,42,0.18)]"
+          "operational-timeline-tooltip acrylic-panel w-[min(300px,calc(100vw-24px))] overflow-hidden rounded-2xl border p-1 text-slate-900 shadow-[0_18px_48px_rgba(15,23,42,0.18)]"
         )}
       >
         <div className="surface-reading min-w-0 rounded-[13px] border p-3">
@@ -392,7 +403,7 @@ function operationalEventNatureLabel(event: OperationalEvent) {
 
 function TimelineSummary({ summary }: { summary: ReturnType<typeof getOperationalEventSummary> }) {
   return (
-    <div className="flex shrink-0 items-center gap-2 text-[10px] text-slate-500 sm:gap-3">
+    <div className="hidden shrink-0 items-baseline gap-2 text-xs leading-5 tabular-nums text-slate-500 @[640px]/timeline:flex">
       <span>
         计划 <strong className="text-blue-700">{summary.planned}</strong>
       </span>
@@ -419,7 +430,7 @@ function TimelineActions({
   onReturnNow: () => void;
 }) {
   return (
-    <div className="surface-control flex shrink-0 items-center rounded-xl border border-white/70 p-0.5 shadow-[0_4px_14px_rgba(15,23,42,0.08)]">
+    <div className="surface-control flex h-8 shrink-0 items-center rounded-xl border border-white/70 p-px shadow-[0_4px_14px_rgba(15,23,42,0.08)]">
       <button
         type="button"
         title="返回现在"
@@ -463,7 +474,7 @@ function TimelineLegend({
   return (
     <div
       aria-label="时间轴图例"
-      className="ml-auto flex shrink-0 items-center gap-0.5 px-1"
+      className="flex h-8 shrink-0 items-center gap-0.5 px-1"
     >
       {LEGEND_ITEMS.map((item) => {
         const visible = visibility[item.id];
@@ -528,7 +539,7 @@ function TimeTicks() {
 
 function CompactTimeTicks() {
   return (
-    <div className="absolute inset-x-3 top-0 text-[8px] text-slate-500">
+    <div className="absolute inset-x-2 top-0 text-[8px] leading-none tabular-nums text-slate-500">
       {[0, 6, 12, 18, 24].map((hour) => (
         <span
           key={hour}
diff --git a/src/features/workbench/workspace/artifact-view-control-styles.ts b/src/features/workbench/workspace/artifact-view-control-styles.ts
index 1208ace..0b4b0c8 100644
--- a/src/features/workbench/workspace/artifact-view-control-styles.ts
+++ b/src/features/workbench/workspace/artifact-view-control-styles.ts
@@ -1,5 +1,5 @@
 export const ARTIFACT_VIEW_CONTROL_SHELL_CLASS_NAME =
-  "surface-control inline-flex shrink-0 items-center rounded-xl border border-white/70 p-0.5 shadow-[0_4px_14px_rgba(15,23,42,0.08)]";
+  "acrylic-control inline-flex shrink-0 items-center rounded-xl border p-0.5";
 
 export const ARTIFACT_VIEW_CONTROL_BUTTON_CLASS_NAME =
   "inline-flex h-7 items-center gap-1.5 rounded-lg px-2 text-[10px] font-medium text-slate-500 transition-colors hover:bg-white/80 hover:text-blue-700 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500/60";
diff --git a/src/features/workbench/workspace/workbench-main-frame.tsx b/src/features/workbench/workspace/workbench-main-frame.tsx
index 96725f9..b5567c8 100644
--- a/src/features/workbench/workspace/workbench-main-frame.tsx
+++ b/src/features/workbench/workspace/workbench-main-frame.tsx
@@ -72,9 +72,10 @@ export function WorkbenchMainFrame({
     ? { duration: 0 }
     : { duration: 0.24, ease: [0.22, 1, 0.36, 1] as const };
 
+  // Map imagery fills the header backdrop; documents and controls reserve the header inset.
   return (
     <div
-      className="workbench-main-frame pointer-events-none absolute inset-x-0 bottom-0 top-14 min-h-0 lg:left-[var(--workbench-agent-current-width)]"
+      className="workbench-main-frame pointer-events-none absolute inset-0 min-h-0 lg:left-[var(--workbench-agent-current-width)]"
       data-testid="workbench-main-frame"
       data-timeline-mode={timelineMode}
     >
@@ -108,7 +109,7 @@ export function WorkbenchMainFrame({
               aria-label={`${activeArtifact.title}工作区`}
               aria-hidden={!showArtifact}
               className={cn(
-                "z-30 min-h-0 min-w-0 overflow-hidden",
+                "z-30 mt-14 min-h-0 min-w-0 overflow-hidden",
                 surfaceMode === "focus" && "lg:pl-[84px]",
                 showArtifact ? "relative" : "pointer-events-none absolute inset-0"
               )}
diff --git a/src/styles.css b/src/styles.css
index 8d430a9..96553a9 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1225,6 +1225,12 @@ button.agent-history-session-trigger:not(:disabled):active {
   touch-action: manipulation;
 }
 
+/* The Popper wrapper must also let pointer events reach nearby timeline markers. */
+.operational-timeline-tooltip,
+[data-radix-popper-content-wrapper]:has(> .operational-timeline-tooltip) {
+  pointer-events: none;
+}
+
 .scheduled-feed-detail-enter {
   animation: scheduled-feed-detail-show 140ms ease-out 180ms both;
   will-change: opacity;
diff --git a/tests/browser/agent-acrylic.e2e.ts b/tests/browser/agent-acrylic.e2e.ts
index 074d1f2..04a85e4 100644
--- a/tests/browser/agent-acrylic.e2e.ts
+++ b/tests/browser/agent-acrylic.e2e.ts
@@ -94,7 +94,8 @@ test("desktop Agent docks beside the workspace with a solid reading surface", as
   const headerBox = await agentHeader.boundingBox();
   const workspaceBox = await workspace.boundingBox();
   expect(headerBox!.height).toBe(topBarBox!.height);
-  expect(headerBox!.y).toBe(workspaceBox!.y);
+  expect(headerBox!.y).toBe(topBarBox!.y + topBarBox!.height);
+  expect(workspaceBox!.y).toBe(topBarBox!.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)");
diff --git a/tests/browser/agent-select-menu.e2e.ts b/tests/browser/agent-select-menu.e2e.ts
new file mode 100644
index 0000000..9909150
--- /dev/null
+++ b/tests/browser/agent-select-menu.e2e.ts
@@ -0,0 +1,95 @@
+import { expect, test, type Locator } from "@playwright/test";
+import { mockAgentApi } from "./support/mock-agent-api";
+import { mockWorkbenchContext } from "./support/mock-workbench-context";
+import { expectThemeColor } from "./support/theme-colors";
+
+test.beforeEach(async ({ page }) => {
+  await page.emulateMedia({ reducedMotion: "reduce" });
+  await mockWorkbenchContext(page);
+  await mockAgentApi(page);
+  await page.route("**/api/v1/agent/chat/models", (route) => route.fulfill({
+    headers: { "Access-Control-Allow-Origin": "*" },
+    json: {
+      default_model: "test/fast",
+      models: [
+        { id: "test/fast", label: "快速", description: "快速回答和日常任务处理", icon: "bolt" },
+        { id: "test/expert", label: "专家", description: "深入分析和复杂任务处理", icon: "sparkle" }
+      ]
+    }
+  }));
+});
+
+for (const width of [1440, 375]) {
+  test(`model options show hover and keyboard highlight without changing selection at ${width}px`, async ({ page }) => {
+    await page.setViewportSize({ width, height: 900 });
+    await page.goto("/", { waitUntil: "domcontentloaded" });
+    await page.getByRole("button", { name: width < 1024 ? "打开 Agent 面板" : /展开 Agent 助手面板/ }).click();
+    // Radix hides the trigger from the accessibility tree while its modal menu is open.
+    const trigger = page.locator('button[aria-label="选择 Agent 模型"]');
+    await expect(trigger).toHaveAccessibleDescription("当前模型：快速");
+    await trigger.click();
+    await waitForMenuAnimations(page.getByRole("menu"));
+    const fast = page.getByRole("menuitem", { name: /快速回答和日常任务处理/ });
+    const expert = page.getByRole("menuitem", { name: /深入分析和复杂任务处理/ });
+    const box = await expert.boundingBox();
+    for (const item of [fast, expert]) {
+      await item.hover();
+      await expect(item).toHaveAttribute("data-highlighted", "");
+      await expectThemeColor(item, "background-color", "--action-selection-soft-hover");
+      await expectThemeColor(item, "border-color", "--action-border-hover");
+      await expect(trigger).toHaveAttribute("aria-description", "当前模型：快速");
+    }
+    expect(await expert.boundingBox()).toEqual(box);
+    await page.getByRole("menu").screenshot({ path: `test-results/agent-select-menu/model-${width}.png` });
+    await page.keyboard.press("ArrowUp");
+    await expect(fast).toBeFocused();
+    await expectThemeColor(fast, "background-color", "--action-selection-soft-hover");
+    await page.keyboard.press("ArrowDown");
+    await expect(expert).toBeFocused();
+    await page.keyboard.press("Enter");
+    await expect(page.getByRole("menu")).toHaveCount(0);
+    await expect(trigger).toHaveAccessibleDescription("当前模型：专家");
+    await expect(trigger).toBeFocused();
+  });
+
+  test(`approval options highlight both selected and unselected modes at ${width}px`, async ({ page }) => {
+    await page.setViewportSize({ width, height: 900 });
+    await page.goto("/", { waitUntil: "domcontentloaded" });
+    await page.getByRole("button", { name: width < 1024 ? "打开 Agent 面板" : /展开 Agent 助手面板/ }).click();
+    const trigger = page.locator('button[aria-label="权限批准模式"]');
+    await trigger.click();
+    await waitForMenuAnimations(page.getByRole("menu"));
+    const request = page.getByRole("menuitem", { name: /工具权限逐次确认/ });
+    const always = page.getByRole("menuitem", { name: /自动允许本轮权限请求/ });
+    for (const item of [request, always]) {
+      await item.hover();
+      await expectThemeColor(item, "background-color", "--action-selection-soft-hover");
+      await expectThemeColor(item, "border-color", "--action-border-hover");
+      await expect(trigger).toContainText("请求批准");
+    }
+    await page.getByRole("menu").screenshot({ path: `test-results/agent-select-menu/approval-${width}.png` });
+    await always.click();
+    await expect(page.getByRole("menu")).toHaveCount(0);
+    await expect(trigger).toBeFocused();
+    await expect(trigger).toContainText("始终允许");
+    await trigger.click();
+    await waitForMenuAnimations(page.getByRole("menu"));
+    await always.hover();
+    await expectThemeColor(always, "background-color", "--action-selection-soft-hover");
+    await page.keyboard.press("ArrowUp");
+    await expect(request).toBeFocused();
+    await expectThemeColor(request, "background-color", "--action-selection-soft-hover");
+    await page.keyboard.press("Enter");
+    await expect(trigger).toContainText("请求批准");
+    await expect(trigger).toBeFocused();
+  });
+}
+
+async function waitForMenuAnimations(menu: Locator) {
+  await expect(menu).toBeVisible();
+  await menu.evaluate((element) => Promise.all(
+    element.getAnimations({ subtree: true })
+      .filter((animation) => animation.playState === "running")
+      .map((animation) => animation.finished.catch(() => undefined))
+  ));
+}
diff --git a/tests/browser/city-scene.e2e.ts b/tests/browser/city-scene.e2e.ts
index f694000..2aedc1d 100644
--- a/tests/browser/city-scene.e2e.ts
+++ b/tests/browser/city-scene.e2e.ts
@@ -65,6 +65,50 @@ async function waitForMapIdle(page: Page) {
   );
 }
 
+test("city buildings render only from zoom 12 in 3D", async ({ page }) => {
+  test.skip(
+    process.env.TJWATER_CITY_SCENE_TEST !== "1",
+    "Requires the generated local city-model scene"
+  );
+  test.setTimeout(60_000);
+  await mockWorkbenchContext(page, undefined, undefined, {}, [], {
+    tiandituToken: "city-scene-tianditu-token"
+  });
+  await page.route("https://t0.tianditu.gov.cn/**", (route) =>
+    route.fulfill({ contentType: "image/png", body: EMPTY_RASTER_TILE })
+  );
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+  const toggle = page
+    .getByRole("group", { name: "地图缩放", exact: true })
+    .locator("button[aria-pressed]");
+  await expect(toggle).toBeEnabled({ timeout: 15_000 });
+  await toggle.click();
+  await page.evaluate(() =>
+    window.__waterNetworkMap!.jumpTo({ center: [121.464, 30.916], zoom: 12, pitch: 55, bearing: 0 })
+  );
+  const renderedBuildings = () => page.evaluate(() => {
+    const map = window.__waterNetworkMap!;
+    return map.getLayer("fengxian-city-buildings")
+      ? map.queryRenderedFeatures({ layers: ["fengxian-city-buildings"] }).length
+      : 0;
+  });
+
+  await expect.poll(renderedBuildings, { timeout: 30_000 }).toBeGreaterThan(0);
+  await page.screenshot({ path: "test-results/city-model/zoom-12.png" });
+  for (const zoom of [11.99, 11]) {
+    await page.evaluate((value) => window.__waterNetworkMap!.jumpTo({ zoom: value }), zoom);
+    await expect.poll(renderedBuildings).toBe(0);
+  }
+  await page.screenshot({ path: "test-results/city-model/zoom-11.png" });
+  for (const zoom of [12, 15, 16]) {
+    await page.evaluate((value) => window.__waterNetworkMap!.jumpTo({ zoom: value }), zoom);
+    await expect.poll(renderedBuildings, { timeout: 15_000 }).toBeGreaterThan(0);
+  }
+  await toggle.click();
+  await expect.poll(() => page.evaluate(() => window.__waterNetworkMap!.getPitch())).toBe(0);
+  await expect.poll(renderedBuildings).toBe(0);
+});
+
 // Uses generated local building data, while unrelated backend services are isolated.
 test("3D adds opaque buildings without enabling duplicate GIS layers", async ({ page }) => {
   test.skip(
diff --git a/tests/browser/workbench-visual.e2e.ts b/tests/browser/workbench-visual.e2e.ts
index 1eca17a..46a4f26 100644
--- a/tests/browser/workbench-visual.e2e.ts
+++ b/tests/browser/workbench-visual.e2e.ts
@@ -301,7 +301,8 @@ async function expectDesktopMainFrameGeometry(page: Page) {
   expect(agentBox!.x).toBe(0);
   expect(agentBox!.y).toBe(56);
   expect(workspaceBox!.x).toBe(agentBox!.x + agentBox!.width);
-  expect(workspaceBox!.y).toBe(agentBox!.y);
+  expect(workspaceBox!.y).toBe(0);
+  expect(workspaceBox!.height).toBe(agentBox!.height + agentBox!.y);
   expect(mapBox).toEqual(workspaceBox);
 }