diff --git a/src/features/workbench/components/workbench-agent-panels.tsx b/src/features/workbench/components/workbench-agent-panels.tsx
index b699ca1..27bcc1b 100644
--- a/src/features/workbench/components/workbench-agent-panels.tsx
+++ b/src/features/workbench/components/workbench-agent-panels.tsx
@@ -36,7 +36,7 @@ export function WorkbenchAgentPanels({
   return (
     <div
       className="pointer-events-none absolute bottom-0 left-0 top-14 z-50 hidden lg:block"
-      style={{ width: panelOpen ? committedWidth : 72 }}
+      style={{ width: panelOpen ? committedWidth : 0 }}
     >
       {panelOpen ? (
         <AgentCommandPanel
@@ -46,7 +46,7 @@ export function WorkbenchAgentPanels({
           onCollapse={onCollapsePanel}
         />
       ) : (
-        <div className="h-full bg-[#e8eef4] px-1.5 pt-5 shadow-[1px_0_0_rgba(15,23,42,0.08)]">
+        <div className="absolute left-3 top-5">
           <AgentCollapsedRail
             personaState={personaState}
             statusLabel={statusLabel}
diff --git a/src/features/workbench/layout/workbench-layout.test.ts b/src/features/workbench/layout/workbench-layout.test.ts
index 6135364..b1094c3 100644
--- a/src/features/workbench/layout/workbench-layout.test.ts
+++ b/src/features/workbench/layout/workbench-layout.test.ts
@@ -51,6 +51,15 @@ describe("workbench floating panels", () => {
     ).toEqual({ top: 72, right: 952, bottom: 32, left: 476 });
   });
 
+  it("does not reserve map width for the collapsed Agent launcher", () => {
+    expect(
+      getWorkbenchCameraPadding(1440, {
+        agentOpen: false,
+        conditionOpen: false
+      }).left
+    ).toBe(24);
+  });
+
   it("uses the committed Agent width without exceeding the hard limit", () => {
     expect(
       getWorkbenchCameraPadding(1920, {
diff --git a/src/features/workbench/layout/workbench-layout.ts b/src/features/workbench/layout/workbench-layout.ts
index 097e222..d3af352 100644
--- a/src/features/workbench/layout/workbench-layout.ts
+++ b/src/features/workbench/layout/workbench-layout.ts
@@ -3,7 +3,7 @@ export const WORKBENCH_LAYOUT = {
   desktopMinWidth: 1024,
   persistentConditionMinWidth: 1280,
   wideMinWidth: 1536,
-  collapsedAgentWidth: 72,
+  collapsedAgentWidth: 0,
   maxAgentWidth: 720,
   agentPanelLeftInset: 12,
   conditionPanelRightInset: 64,
diff --git a/src/features/workbench/map-workbench-page.tsx b/src/features/workbench/map-workbench-page.tsx
index 383ea7d..ee5bdf2 100644
--- a/src/features/workbench/map-workbench-page.tsx
+++ b/src/features/workbench/map-workbench-page.tsx
@@ -32,7 +32,6 @@ import {
 } from "@/features/map/core";
 import { env } from "@/shared/config/env";
 import type { AccessTokenProvider } from "@/shared/auth/keycloak-auth";
-import { cn } from "@/shared/ui/cn";
 import { AgentTaskTicker } from "./components/agent-task-ticker";
 import { MapDevPanel } from "./components/map-dev-panel";
 import { MobileWorkbenchSheet } from "./components/mobile-workbench-sheet";
@@ -41,10 +40,10 @@ import { ScheduledConditionFeed } from "./components/scheduled-condition-feed";
 import { WorkbenchAgentPanels } from "./components/workbench-agent-panels";
 import { OperationalTimeline } from "./operational-timeline/operational-timeline";
 import {
-  canDockMapScaleBesideTimeline,
   createOperationalEvents,
   getOperationalEventSummary,
   OPERATIONAL_TIMELINE_LAYOUT,
+  resolveTimelineScaleLayout,
   type OperationalEvent,
   type OperationalTimelineMode
 } from "./operational-timeline/operational-timeline-model";
@@ -216,11 +215,14 @@ export function MapWorkbenchPage({
     () => getOperationalEventSummary(operationalEvents),
     [operationalEvents]
   );
-  const scaleInfoBesideTimeline = canDockMapScaleBesideTimeline(
+  const timelineScaleLayout = resolveTimelineScaleLayout(
     businessWorkspaceWidth,
     timelineMode,
     timelineVisible
   );
+  const timelineBottom = isLargeScreen
+    ? timelineScaleLayout.timelineBottom
+    : 12;
 
   useEffect(() => {
     setTimelineMode((current) => {
@@ -927,8 +929,8 @@ export function MapWorkbenchPage({
             !timelineVisible
               ? 0
               : !isLargeScreen
-                ? OPERATIONAL_TIMELINE_LAYOUT.mobileSummaryHeight
-                : OPERATIONAL_TIMELINE_LAYOUT[timelineMode].height
+                ? OPERATIONAL_TIMELINE_LAYOUT.mobileSummaryHeight + timelineBottom
+                : OPERATIONAL_TIMELINE_LAYOUT[timelineMode].height + timelineBottom
           }px`
         } as CSSProperties
       }
@@ -975,7 +977,7 @@ export function MapWorkbenchPage({
         onCollapseArtifact={artifactWorkspace.collapseArtifact}
         onDestroyArtifact={artifactWorkspace.destroyArtifact}
         timelineMode={timelineMode}
-        reserveMapScaleSpace={scaleInfoBesideTimeline}
+        timelineBottom={timelineBottom}
         timelineContent={(
           timelineVisible ? <>
             <div className="hidden lg:block">
@@ -1022,17 +1024,17 @@ export function MapWorkbenchPage({
               <ToolbarPanel {...toolbarPanelProps} />
             </div>
             <div
-              className={cn(
-                "absolute right-0 flex flex-col items-end gap-2",
-                scaleInfoBesideTimeline
-                  ? "bottom-3"
-                  : "bottom-[calc(var(--workbench-timeline-height)+1rem)]"
-              )}
+              className="absolute bottom-0 right-0 flex flex-col items-end gap-2"
+              style={{ bottom: timelineScaleLayout.scaleBottom }}
             >
               <div className="flex items-end gap-2 pr-2">
                 <MapZoom mapRef={mapRef} mapReady={mapReady} onHome={fitNetworkBounds} />
               </div>
-              <MapScaleLine mapRef={mapRef} mapReady={mapReady} />
+              <MapScaleLine
+                className="hidden lg:inline-flex"
+                mapRef={mapRef}
+                mapReady={mapReady}
+              />
             </div>
           </div>
         )}
diff --git a/src/features/workbench/operational-timeline/operational-timeline-model.test.ts b/src/features/workbench/operational-timeline/operational-timeline-model.test.ts
index 69c1d8a..4159bb2 100644
--- a/src/features/workbench/operational-timeline/operational-timeline-model.test.ts
+++ b/src/features/workbench/operational-timeline/operational-timeline-model.test.ts
@@ -1,9 +1,10 @@
 import { describe, expect, it } from "vitest";
 import type { ScheduledConditionItem } from "../types";
 import {
-  canDockMapScaleBesideTimeline,
+  canCenterTimelineBesideMapScale,
   clusterOperationalEvents,
-  createOperationalEvents
+  createOperationalEvents,
+  resolveTimelineScaleLayout
 } from "./operational-timeline-model";
 
 const workOrder: ScheduledConditionItem = {
@@ -44,9 +45,20 @@ describe("operational timeline model", () => {
     expect(clusters.find((cluster) => cluster.lane === "plan")?.events).toHaveLength(2);
   });
 
-  it("docks scale info beside a floating timeline only when the business area is wide enough", () => {
-    expect(canDockMapScaleBesideTimeline(2048, "expanded", true)).toBe(true);
-    expect(canDockMapScaleBesideTimeline(1380, "expanded", true)).toBe(false);
-    expect(canDockMapScaleBesideTimeline(1380, "expanded", false)).toBe(true);
+  it("keeps a centered timeline beside scale info only when both side margins are wide enough", () => {
+    expect(canCenterTimelineBesideMapScale(2560, "expanded", true)).toBe(true);
+    expect(canCenterTimelineBesideMapScale(2048, "expanded", true)).toBe(false);
+    expect(canCenterTimelineBesideMapScale(1380, "expanded", false)).toBe(true);
+  });
+
+  it("keeps scale info in the map corner and moves the timeline when horizontal space is tight", () => {
+    expect(resolveTimelineScaleLayout(2560, "expanded", true)).toEqual({
+      scaleBottom: 0,
+      timelineBottom: 24
+    });
+    expect(resolveTimelineScaleLayout(2048, "expanded", true)).toEqual({
+      scaleBottom: 0,
+      timelineBottom: 56
+    });
   });
 });
diff --git a/src/features/workbench/operational-timeline/operational-timeline-model.ts b/src/features/workbench/operational-timeline/operational-timeline-model.ts
index c6e3dab..034441e 100644
--- a/src/features/workbench/operational-timeline/operational-timeline-model.ts
+++ b/src/features/workbench/operational-timeline/operational-timeline-model.ts
@@ -31,15 +31,22 @@ export type OperationalEventCluster = {
 };
 
 export const OPERATIONAL_TIMELINE_LAYOUT = {
-  compact: { height: 72, maxWidth: 980 },
+  compact: { height: 88, maxWidth: 980 },
   expanded: { height: 240, maxWidth: 1180 },
   summary: { height: 52, maxWidth: 760 },
   mobileSummaryHeight: 48,
   mapScaleSafeWidth: 520,
-  floatingGap: 48
+  floatingGap: 48,
+  edgeInset: 24,
+  scaleCollisionOffset: 56
 } as const;
 
-export function canDockMapScaleBesideTimeline(
+export type TimelineScaleLayout = {
+  scaleBottom: number;
+  timelineBottom: number;
+};
+
+export function canCenterTimelineBesideMapScale(
   businessWorkspaceWidth: number,
   mode: OperationalTimelineMode,
   visible: boolean
@@ -48,8 +55,30 @@ export function canDockMapScaleBesideTimeline(
   const layout = OPERATIONAL_TIMELINE_LAYOUT[mode];
   return businessWorkspaceWidth >=
     layout.maxWidth +
-      OPERATIONAL_TIMELINE_LAYOUT.mapScaleSafeWidth +
-      OPERATIONAL_TIMELINE_LAYOUT.floatingGap;
+      2 * (
+        OPERATIONAL_TIMELINE_LAYOUT.mapScaleSafeWidth +
+        OPERATIONAL_TIMELINE_LAYOUT.floatingGap
+      );
+}
+
+export function resolveTimelineScaleLayout(
+  businessWorkspaceWidth: number,
+  mode: OperationalTimelineMode,
+  visible: boolean
+): TimelineScaleLayout {
+  const scaleClearsCenteredTimeline = canCenterTimelineBesideMapScale(
+    businessWorkspaceWidth,
+    mode,
+    visible
+  );
+
+  return {
+    scaleBottom: 0,
+    timelineBottom:
+      visible && !scaleClearsCenteredTimeline
+        ? OPERATIONAL_TIMELINE_LAYOUT.scaleCollisionOffset
+        : OPERATIONAL_TIMELINE_LAYOUT.edgeInset
+  };
 }
 
 export function createOperationalEvents(items: ScheduledConditionItem[]): OperationalEvent[] {
diff --git a/src/features/workbench/operational-timeline/operational-timeline.tsx b/src/features/workbench/operational-timeline/operational-timeline.tsx
index 3238863..9abc7b6 100644
--- a/src/features/workbench/operational-timeline/operational-timeline.tsx
+++ b/src/features/workbench/operational-timeline/operational-timeline.tsx
@@ -1,13 +1,14 @@
 import {
   CalendarClock,
   Check,
-  ChevronDown,
-  ChevronUp,
   Clock3,
   OctagonAlert,
+  PanelBottomClose,
+  PanelBottomOpen,
   RotateCcw,
   TriangleAlert
 } from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import { cn } from "@/shared/ui/cn";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/shared/ui/tooltip";
 import {
@@ -51,18 +52,24 @@ export function OperationalTimeline({
   onClearSelection,
   onReturnNow
 }: OperationalTimelineProps) {
+  const prefersReducedMotion = useReducedMotion();
   const summary = getOperationalEventSummary(events);
   const clusters = clusterOperationalEvents(events, mobile ? 60 : 10);
   const selectedEvent = events.find((event) => event.id === selectedEventId) ?? null;
   const cursorPosition = getDayPosition(cursorTime);
   const height = mobile ? "100%" : OPERATIONAL_TIMELINE_LAYOUT[mode].height;
+  const sizeTransition = prefersReducedMotion
+    ? { duration: 0 }
+    : { duration: 0.3, ease: [0.22, 1, 0.36, 1] as const };
 
   if (mode === "summary" && !mobile) {
     return (
-      <section
+      <motion.section
         aria-label="运行时间轴摘要"
         className="acrylic-panel flex h-full items-center gap-3 rounded-2xl border px-3 text-slate-900"
-        style={{ height }}
+        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>
@@ -80,13 +87,13 @@ export function OperationalTimeline({
           <span className="min-w-0 truncate text-xs text-slate-500">分析视图保持独立时间范围</span>
         )}
         <TimelineActions mode={mode} onModeChange={onModeChange} onReturnNow={onReturnNow} />
-      </section>
+      </motion.section>
     );
   }
 
   return (
     <TooltipProvider delayDuration={180}>
-      <section
+      <motion.section
         aria-label="运行时间轴"
         className={cn(
           "flex min-h-0 flex-col overflow-hidden text-slate-900",
@@ -94,12 +101,14 @@ export function OperationalTimeline({
             ? "surface-reading h-full rounded-t-xl border-t"
             : "acrylic-panel rounded-2xl border"
         )}
-        style={{ height }}
+        initial={false}
+        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-8" : "h-12"
+            mode === "compact" && !mobile ? "h-10" : "h-12"
           )}
         >
           <div className="flex min-w-0 items-center gap-2">
@@ -124,8 +133,16 @@ export function OperationalTimeline({
           <TimelineActions mode={mode} onModeChange={onModeChange} onReturnNow={onReturnNow} />
         </div>
 
-        {mode === "expanded" || mobile ? (
-          <div className="grid min-h-0 flex-1 grid-cols-[52px_minmax(0,1fr)] px-3 pb-2 pt-1.5 sm:grid-cols-[76px_minmax(0,1fr)]">
+        <AnimatePresence initial={false} mode="wait">
+          {mode === "expanded" || mobile ? (
+          <motion.div
+            key="expanded-timeline"
+            className="grid min-h-0 flex-1 grid-cols-[52px_minmax(0,1fr)] px-3 pb-2 pt-1.5 sm:grid-cols-[76px_minmax(0,1fr)]"
+            initial={prefersReducedMotion ? false : { opacity: 0, y: 5 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: -4 }}
+            transition={prefersReducedMotion ? { duration: 0 } : { duration: 0.14 }}
+          >
             <div className="grid grid-rows-[18px_repeat(3,1fr)] pr-2 text-[10px] text-slate-500">
               <span />
               {LANES.map((lane) => (
@@ -150,11 +167,18 @@ export function OperationalTimeline({
                 <span className="absolute -left-1 -top-1 h-2 w-2 rotate-45 bg-blue-500" />
               </div>
             </div>
-          </div>
+          </motion.div>
         ) : (
-          <div className="relative min-h-0 flex-1 px-3">
+          <motion.div
+            key="compact-timeline"
+            className="relative min-h-0 flex-1 px-3"
+            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-1 left-3 right-3 top-3.5">
+            <div className="absolute bottom-2 left-3 right-3 top-4">
               <div className="absolute inset-x-0 top-1/2 h-px bg-slate-300" />
               {clusters.map((cluster, index) => (
                 <TimelineMarker
@@ -171,9 +195,10 @@ export function OperationalTimeline({
                 style={{ left: `${cursorPosition}%` }}
               />
             </div>
-          </div>
+          </motion.div>
         )}
-      </section>
+        </AnimatePresence>
+      </motion.section>
     </TooltipProvider>
   );
 }
@@ -316,26 +341,35 @@ function TimelineActions({
   onReturnNow: () => void;
 }) {
   return (
-    <div className="ml-auto flex shrink-0 items-center gap-1">
+    <div className="surface-control ml-auto flex shrink-0 items-center rounded-xl border border-white/70 p-0.5 shadow-[0_4px_14px_rgba(15,23,42,0.08)]">
       <button
         type="button"
         title="返回现在"
         aria-label="返回现在"
         onClick={onReturnNow}
-        className="surface-control grid h-8 w-8 place-items-center rounded-lg border text-slate-500 hover:text-blue-700"
+        className="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"
       >
-        <RotateCcw size={14} aria-hidden="true" />
+        <RotateCcw size={13} aria-hidden="true" />
+        <span className="hidden sm:inline">现在</span>
       </button>
       {onModeChange ? (
-        <button
-          type="button"
-          title={mode === "expanded" ? "收起时间轴" : "展开时间轴"}
-          aria-label={mode === "expanded" ? "收起时间轴" : "展开时间轴"}
-          onClick={() => onModeChange(mode === "expanded" ? "compact" : "expanded")}
-          className="surface-control grid h-8 w-8 place-items-center rounded-lg border text-slate-500 hover:text-blue-700"
-        >
-          {mode === "expanded" ? <ChevronDown size={15} /> : <ChevronUp size={15} />}
-        </button>
+        <>
+          <span className="mx-0.5 h-4 w-px bg-slate-300/80" aria-hidden="true" />
+          <button
+            type="button"
+            title={mode === "expanded" ? "收起时间轴" : "展开时间轴"}
+            aria-label={mode === "expanded" ? "收起时间轴" : "展开时间轴"}
+            onClick={() => onModeChange(mode === "expanded" ? "compact" : "expanded")}
+            className="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"
+          >
+            {mode === "expanded" ? (
+              <PanelBottomClose size={14} aria-hidden="true" />
+            ) : (
+              <PanelBottomOpen size={14} aria-hidden="true" />
+            )}
+            <span>{mode === "expanded" ? "收起" : "展开"}</span>
+          </button>
+        </>
       ) : null}
     </div>
   );
diff --git a/src/features/workbench/workspace/workbench-main-frame.tsx b/src/features/workbench/workspace/workbench-main-frame.tsx
index 6704a6d..1a42461 100644
--- a/src/features/workbench/workspace/workbench-main-frame.tsx
+++ b/src/features/workbench/workspace/workbench-main-frame.tsx
@@ -1,4 +1,5 @@
 import { ArrowLeft, FileChartColumnIncreasing } from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import type { ReactNode } from "react";
 import { cn } from "@/shared/ui/cn";
 import { OPERATIONAL_TIMELINE_LAYOUT } from "../operational-timeline/operational-timeline-model";
@@ -15,7 +16,7 @@ type WorkbenchMainFrameProps = {
   mapOverlay?: ReactNode;
   timelineContent: ReactNode;
   timelineMode: "compact" | "expanded" | "summary";
-  reserveMapScaleSpace: boolean;
+  timelineBottom: number;
   activeArtifact: AnalysisArtifact | null;
   pendingArtifact: AnalysisArtifact | null;
   surfaceMode: WorkbenchSurfaceMode;
@@ -32,7 +33,7 @@ export function WorkbenchMainFrame({
   mapOverlay,
   timelineContent,
   timelineMode,
-  reserveMapScaleSpace,
+  timelineBottom,
   activeArtifact,
   pendingArtifact,
   surfaceMode,
@@ -43,8 +44,12 @@ export function WorkbenchMainFrame({
   onCollapseArtifact,
   onDestroyArtifact
 }: WorkbenchMainFrameProps) {
+  const prefersReducedMotion = useReducedMotion();
   const showMap = surfaceMode !== "focus";
   const showArtifact = activeArtifact && surfaceMode !== "map_only";
+  const timelineTransition = prefersReducedMotion
+    ? { duration: 0 }
+    : { duration: 0.28, ease: [0.22, 1, 0.36, 1] as const };
 
   return (
     <div
@@ -113,18 +118,30 @@ export function WorkbenchMainFrame({
         ) : null}
       </div>
 
-      <div
-        className="pointer-events-auto absolute bottom-3 left-3 z-40 mx-auto min-h-0"
-        style={{
+      <motion.div
+        className="pointer-events-auto absolute left-3 z-40 mx-auto min-h-0"
+        initial={false}
+        animate={{
+          bottom: timelineBottom,
           maxWidth: OPERATIONAL_TIMELINE_LAYOUT[timelineMode].maxWidth,
-          right: reserveMapScaleSpace
-            ? OPERATIONAL_TIMELINE_LAYOUT.mapScaleSafeWidth +
-              OPERATIONAL_TIMELINE_LAYOUT.floatingGap
-            : 12
+          right: 12
         }}
+        transition={timelineTransition}
       >
-        {timelineContent}
-      </div>
+        <AnimatePresence initial={false}>
+          {timelineContent ? (
+            <motion.div
+              key="operational-timeline"
+              initial={prefersReducedMotion ? false : { opacity: 0, y: 14, scale: 0.985 }}
+              animate={{ opacity: 1, y: 0, scale: 1 }}
+              exit={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 12, scale: 0.985 }}
+              transition={timelineTransition}
+            >
+              {timelineContent}
+            </motion.div>
+          ) : null}
+        </AnimatePresence>
+      </motion.div>
     </div>
   );
 }