From 3afb31870bc48e57bae76eacfa8166f2fd949ab3 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Tue, 10 Mar 2026 21:47:35 +0800
Subject: [PATCH] Adjust agent mode layout in canvas

---
 app/canvas/[id]/page.tsx | 129 +++++++++++++++++++++------------------
 1 file changed, 70 insertions(+), 59 deletions(-)

diff --git a/app/canvas/[id]/page.tsx b/app/canvas/[id]/page.tsx
index 6d58576f9..03aa8c12a 100644
--- a/app/canvas/[id]/page.tsx
+++ b/app/canvas/[id]/page.tsx
@@ -165,14 +165,8 @@ export default function CanvasEditorPage({ params }: PageProps) {
     : null;
 
   const resolvedPanelWidth = viewportWidth > 0
-    ? isAgentMode
-      ? Math.min(
-          520,
-          Math.max(Math.floor((viewportWidth - DOCKED_PANEL_INSET * 2) / 2), 340)
-        )
-      : Math.min(FLOATING_PANEL_WIDTH, Math.max(viewportWidth - DOCKED_PANEL_INSET, 0))
+    ? Math.min(FLOATING_PANEL_WIDTH, Math.max(viewportWidth - DOCKED_PANEL_INSET, 0))
     : FLOATING_PANEL_WIDTH;
-  const agentPanelWidth = isAgentMode ? resolvedPanelWidth : 0;
   const panelOcclusionRight = isPanelOpen ? resolvedPanelWidth + DOCKED_PANEL_INSET : 0;
   const floatingToolbarOffset = isPanelOpen ? -(panelOcclusionRight / 2) : 0;
   const compactControlsLeft = FLOATING_UI_GAP;
@@ -705,6 +699,73 @@ export default function CanvasEditorPage({ params }: PageProps) {
     );
   }
 
+  const brandEntry = (
+    <div className="absolute top-4 left-4 z-20">
+      <Button
+        variant="ghost"
+        onClick={goHome}
+        className="h-10 gap-2 rounded-none border-0 bg-transparent px-0 shadow-none hover:bg-transparent"
+      >
+        {(siteSettingsData?.siteLogo || siteSettingsData?.siteLogoDark) ? (
+          <img
+            src={siteSettingsData?.siteLogo || siteSettingsData?.siteLogoDark || ""}
+            alt={siteSettingsData?.siteName || "返回首页"}
+            className="h-7 w-7 object-contain"
+            draggable={false}
+          />
+        ) : (
+          <Grid3X3 className="h-5 w-5" />
+        )}
+        <span className="max-w-[180px] truncate text-base font-semibold text-foreground">
+          {siteSettingsData?.siteName || "返回首页"}
+        </span>
+      </Button>
+    </div>
+  );
+
+  const agentDisabledNotice =
+    requestedAgentMode && !isAgentFeatureEnabled ? (
+      <div className="absolute top-4 left-1/2 z-20 -translate-x-1/2">
+        <div className="inline-flex items-center gap-2 rounded-full border border-amber-200 bg-amber-50 px-4 py-2 text-sm text-amber-800 shadow-sm dark:border-amber-900/60 dark:bg-amber-950/80 dark:text-amber-200">
+          <AlertCircle className="h-4 w-4" />
+          <span>智能体功能未开启，请联系管理员在系统设置中开启。</span>
+        </div>
+      </div>
+    ) : null;
+
+  if (isAgentMode) {
+    return (
+      <TooltipProvider>
+        <div className="relative h-dvh w-full overflow-hidden bg-background">
+          {brandEntry}
+          {agentDisabledNotice}
+
+          <div className="absolute inset-0 flex pt-[72px]">
+            <div className="min-w-0 flex-1 border-r bg-white dark:bg-zinc-950">
+              <AgentPresetPanel
+                selectedPresetId={selectedAgentPresetId}
+                onSelectPreset={handleSelectAgentPreset}
+              />
+            </div>
+
+            <div
+              className="shrink-0 border-l bg-white dark:bg-zinc-950"
+              style={{ width: FLOATING_PANEL_WIDTH }}
+            >
+              <div className="h-full overflow-hidden">
+                <CanvasChatPanel
+                  chatId={`canvas-${id}`}
+                  onClose={() => {}}
+                  selectedAgentPresetId={isAgentFeatureEnabled ? selectedAgentPresetId : null}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </TooltipProvider>
+    );
+  }
+
   return (
     <TooltipProvider>
       <div className="relative h-dvh w-full overflow-hidden overscroll-none bg-background">
@@ -714,38 +775,8 @@ export default function CanvasEditorPage({ params }: PageProps) {
            <CanvasWorkspace occlusionRight={panelOcclusionRight} />
         </div>
 
-        {/* Brand Entry (Top Left) */}
-        <div className="absolute top-4 left-4 z-20">
-          <Button
-            variant="ghost"
-            onClick={goHome}
-            className="h-10 gap-2 rounded-none border-0 bg-transparent px-0 shadow-none hover:bg-transparent"
-          >
-            {(siteSettingsData?.siteLogo || siteSettingsData?.siteLogoDark) ? (
-              <img
-                src={siteSettingsData?.siteLogo || siteSettingsData?.siteLogoDark || ""}
-                alt={siteSettingsData?.siteName || "返回首页"}
-                className="h-7 w-7 object-contain"
-                draggable={false}
-              />
-            ) : (
-              <Grid3X3 className="h-5 w-5" />
-            )}
-            <span className="max-w-[180px] truncate text-base font-semibold text-foreground">
-              {siteSettingsData?.siteName || "返回首页"}
-            </span>
-          </Button>
-        </div>
-
-        {/* Agent Disabled Notice */}
-        {requestedAgentMode && !isAgentFeatureEnabled ? (
-          <div className="absolute top-4 left-1/2 z-20 -translate-x-1/2">
-            <div className="inline-flex items-center gap-2 rounded-full border border-amber-200 bg-amber-50 px-4 py-2 text-sm text-amber-800 shadow-sm dark:border-amber-900/60 dark:bg-amber-950/80 dark:text-amber-200">
-              <AlertCircle className="h-4 w-4" />
-              <span>智能体功能未开启，请联系管理员在系统设置中开启。</span>
-            </div>
-          </div>
-        ) : null}
+        {brandEntry}
+        {agentDisabledNotice}
 
         {/* 2. Floating Actions (Top Right) */}
         {!isPanelOpen && (
@@ -762,26 +793,6 @@ export default function CanvasEditorPage({ params }: PageProps) {
         )}
 
         {/* 4. Floating Sidebar (Right) */}
-        {isAgentMode ? (
-          <div
-            className="absolute z-10 transition-all duration-300 ease-in-out"
-            style={{
-              top: DOCKED_PANEL_INSET,
-              left: DOCKED_PANEL_INSET,
-              bottom: DOCKED_PANEL_INSET,
-              width: agentPanelWidth,
-              maxWidth: `calc(100vw - ${DOCKED_PANEL_INSET}px)`,
-            }}
-          >
-            <div className="h-full w-full overflow-hidden border-r bg-white dark:bg-zinc-950">
-              <AgentPresetPanel
-                selectedPresetId={selectedAgentPresetId}
-                onSelectPreset={handleSelectAgentPreset}
-              />
-            </div>
-          </div>
-        ) : null}
-
         <div className={cn(
             "absolute z-10 transition-all duration-300 ease-in-out",
             isPanelOpen ? "translate-x-0 opacity-100" : "translate-x-[120%] opacity-0 pointer-events-none"