fix: improve mobile workbench controls

features/workbench/map-workbench-page.tsx

@@ -12,7 +12,6 @@ import {
   type KeyboardEvent as ReactKeyboardEvent,
   type PointerEvent as ReactPointerEvent
 } from "react";
-import { X } from "lucide-react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import {
   AgentCollapsedRail,
@@ -220,6 +219,15 @@ export function MapWorkbenchPage() {
     onUiEnvelope: handleAgentUiEnvelope,
     onFrontendAction: handleFrontendAction
   });
+  function openAgentPanelForViewport() {
+    if (isLargeScreen) {
+      agent.expandPanel();
+      return;
+    }
+
+    agent.openMobilePanel();
+  }
+
   const leftPanelOpen = isLargeScreen && agent.panelOpen;
   const rightPanelOpen = isLargeScreen && (devPanelOpen || shouldShowConditionFeed);
 
@@ -488,7 +496,7 @@ export function MapWorkbenchPage() {
       return;
     }
 
-    agent.expandPanel();
+    openAgentPanelForViewport();
 
     try {
       await agent.submitPrompt(
@@ -931,7 +939,7 @@ export function MapWorkbenchPage() {
             onExpandedChange={setConditionFeedExpanded}
             onFocusRequestHandled={handleConditionFocusRequestHandled}
             onSelectedConditionChange={setSelectedConditionId}
-            onExpandAgent={agent.expandPanel}
+            onExpandAgent={openAgentPanelForViewport}
             onLoadHistorySession={handleLoadAgentHistorySession}
             onSubmitPrompt={agent.submitPrompt}
           />
@@ -963,14 +971,14 @@ export function MapWorkbenchPage() {
         ) : null}
       </div>
 
-      <MobileAgentToggle
-        open={agent.mobileOpen}
-        personaState={agent.personaState}
-        statusLabel={agent.statusLabel}
-        streaming={agent.streaming}
-        onOpen={agent.openMobilePanel}
-        onClose={agent.closeMobilePanel}
-      />
+      {!agent.mobileOpen ? (
+        <MobileAgentToggle
+          personaState={agent.personaState}
+          statusLabel={agent.statusLabel}
+          streaming={agent.streaming}
+          onOpen={agent.openMobilePanel}
+        />
+      ) : null}
 
       {!agent.mobileOpen ? (
         <div className="absolute bottom-20 left-3 right-3 z-30 lg:hidden">
@@ -1111,36 +1119,16 @@ function getScheduledConditionIdFromAlertId(alertId: string) {
 }
 
 function MobileAgentToggle({
-  open,
   personaState,
   statusLabel,
   streaming,
-  onOpen,
-  onClose
+  onOpen
 }: {
-  open: boolean;
   personaState: ComponentProps<typeof AgentPersona>["state"];
   statusLabel: string;
   streaming: boolean;
   onOpen: () => void;
-  onClose: () => void;
 }) {
-  if (open) {
-    return (
-      <div className="absolute bottom-20 right-3 z-40 lg:hidden">
-        <button
-          type="button"
-          aria-label="关闭 Agent 面板"
-          title="关闭 Agent 面板"
-          onClick={onClose}
-          className="agent-panel-icon-button grid h-10 w-10 place-items-center rounded-2xl text-slate-700 transition"
-        >
-          <X size={18} aria-hidden="true" />
-        </button>
-      </div>
-    );
-  }
-
   return (
     <div className="absolute bottom-20 left-3 z-30 lg:hidden">
       <button
@@ -1155,8 +1143,8 @@ function MobileAgentToggle({
         )}
       >
         <AgentPersona
-          className="h-10 w-10"
-          fallbackClassName="h-10 w-10"
+          className="pointer-events-none h-10 w-10"
+          fallbackClassName="pointer-events-none h-10 w-10"
           state={personaState}
           statusLabel={statusLabel}
           streaming={streaming}