diff --git a/components/canvas/RealtimeCanvasDialog.tsx b/components/canvas/RealtimeCanvasDialog.tsx
index 6fde01ab0..a5ce546f3 100644
--- a/components/canvas/RealtimeCanvasDialog.tsx
+++ b/components/canvas/RealtimeCanvasDialog.tsx
@@ -2856,7 +2856,7 @@ export function RealtimeCanvasDialog({
                       )}
                     </div>
                     <div className="min-w-0 flex-1 pt-1">
-                      <div className="truncate font-medium text-sm text-foreground">
+                      <div className="truncate font-medium text-foreground text-sm">
                         {project.name}
                       </div>
                     </div>
@@ -3111,365 +3111,377 @@ export function RealtimeCanvasDialog({
       />
       <div className="-translate-x-1/2 pointer-events-none absolute bottom-4 left-1/2 z-30 flex w-[min(600px,calc(100vw-2rem))] flex-col items-center gap-2.5">
         <TooltipProvider delayDuration={120}>
-          <div className="pointer-events-auto flex w-full flex-wrap items-center justify-center gap-1.5">
-            <div className="flex items-center justify-center gap-1 rounded-[24px] border border-border/40 bg-background/80 px-1.5 py-1.5 shadow-xl backdrop-blur-md">
-              <Tooltip>
+          <div className="pointer-events-auto flex flex-wrap items-center justify-center gap-1 rounded-[24px] border border-border/40 bg-background/80 p-1.5 shadow-xl backdrop-blur-md">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  className={cn(
+                    compactToolButtonClass,
+                    brushMode === "select" && compactToolButtonActiveClass
+                  )}
+                  onClick={() => {
+                    setSelectedLayerId(DRAW_LAYER_ID);
+                    setBrushMode("select");
+                  }}
+                  size="icon"
+                  type="button"
+                  variant="ghost"
+                >
+                  <MousePointer2 className="h-4.5 w-4.5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <div className="font-medium text-sm">鼠标</div>
+                <div className="text-muted-foreground text-xs">
+                  选择图层并拖动位置
+                </div>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  className={cn(
+                    compactToolButtonClass,
+                    brushMode === "brush" && compactToolButtonActiveClass
+                  )}
+                  onClick={() => {
+                    setSelectedLayerId(DRAW_LAYER_ID);
+                    setBrushMode("brush");
+                  }}
+                  size="icon"
+                  type="button"
+                  variant="ghost"
+                >
+                  <Paintbrush className="h-4.5 w-4.5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <div className="font-medium text-sm">画笔</div>
+                <div className="text-muted-foreground text-xs">
+                  在画布上自由绘制
+                </div>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  className={cn(
+                    compactToolButtonClass,
+                    brushMode === "eraser" && compactToolButtonActiveClass
+                  )}
+                  onClick={() => {
+                    setSelectedLayerId(DRAW_LAYER_ID);
+                    setBrushMode("eraser");
+                  }}
+                  size="icon"
+                  type="button"
+                  variant="ghost"
+                >
+                  <Eraser className="h-4.5 w-4.5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <div className="font-medium text-sm">橡皮</div>
+                <div className="text-muted-foreground text-xs">
+                  擦除当前草图笔触
+                </div>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <Popover>
                 <TooltipTrigger asChild>
-                  <Button
-                    className={cn(
-                      compactToolButtonClass,
-                      brushMode === "select" && compactToolButtonActiveClass
-                    )}
-                    onClick={() => {
-                      setSelectedLayerId(DRAW_LAYER_ID);
-                      setBrushMode("select");
-                    }}
-                    size="icon"
-                    type="button"
-                    variant="ghost"
-                  >
-                    <MousePointer2 className="h-4.5 w-4.5" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <div className="font-medium text-sm">鼠标</div>
-                  <div className="text-xs text-muted-foreground">
-                    选择图层并拖动位置
-                  </div>
-                </TooltipContent>
-              </Tooltip>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    className={cn(
-                      compactToolButtonClass,
-                      brushMode === "brush" && compactToolButtonActiveClass
-                    )}
-                    onClick={() => {
-                      setSelectedLayerId(DRAW_LAYER_ID);
-                      setBrushMode("brush");
-                    }}
-                    size="icon"
-                    type="button"
-                    variant="ghost"
-                  >
-                    <Paintbrush className="h-4.5 w-4.5" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <div className="font-medium text-sm">画笔</div>
-                  <div className="text-xs text-muted-foreground">在画布上自由绘制</div>
-                </TooltipContent>
-              </Tooltip>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    className={cn(
-                      compactToolButtonClass,
-                      brushMode === "eraser" && compactToolButtonActiveClass
-                    )}
-                    onClick={() => {
-                      setSelectedLayerId(DRAW_LAYER_ID);
-                      setBrushMode("eraser");
-                    }}
-                    size="icon"
-                    type="button"
-                    variant="ghost"
-                  >
-                    <Eraser className="h-4.5 w-4.5" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <div className="font-medium text-sm">橡皮</div>
-                  <div className="text-xs text-muted-foreground">擦除当前草图笔触</div>
-                </TooltipContent>
-              </Tooltip>
-              <Tooltip>
-                <Popover>
-                  <TooltipTrigger asChild>
-                    <PopoverTrigger asChild>
-                      <Button
-                        className={cn(
-                          compactToolButtonClass,
-                          isShapeMode(brushMode) && compactToolButtonActiveClass
-                        )}
-                        size="icon"
-                        type="button"
-                        variant="ghost"
-                      >
-                        <Square className="h-4.5 w-4.5" />
-                      </Button>
-                    </PopoverTrigger>
-                  </TooltipTrigger>
-                  <PopoverContent className="w-[220px] rounded-[18px] border-border/40 bg-background/95 p-3 shadow-xl backdrop-blur-md">
-                    <div className="mb-2 font-medium text-xs text-muted-foreground">
-                      形状工具
-                    </div>
-                    <div className="grid grid-cols-3 gap-2">
-                      <Button
-                        className={cn(
-                          "h-10 rounded-xl",
-                          brushMode === "rect" &&
-                            "bg-primary text-primary-foreground hover:bg-primary"
-                        )}
-                        onClick={() => {
-                          setSelectedLayerId(DRAW_LAYER_ID);
-                          setBrushMode("rect");
-                        }}
-                        type="button"
-                        variant="ghost"
-                      >
-                        <Square className="h-4.5 w-4.5" />
-                      </Button>
-                      <Button
-                        className={cn(
-                          "h-10 rounded-xl",
-                          brushMode === "circle" &&
-                            "bg-primary text-primary-foreground hover:bg-primary"
-                        )}
-                        onClick={() => {
-                          setSelectedLayerId(DRAW_LAYER_ID);
-                          setBrushMode("circle");
-                        }}
-                        type="button"
-                        variant="ghost"
-                      >
-                        <CircleIcon className="h-4.5 w-4.5" />
-                      </Button>
-                      <Button
-                        className={cn(
-                          "h-10 rounded-xl",
-                          brushMode === "line" &&
-                            "bg-primary text-primary-foreground hover:bg-primary"
-                        )}
-                        onClick={() => {
-                          setSelectedLayerId(DRAW_LAYER_ID);
-                          setBrushMode("line");
-                        }}
-                        type="button"
-                        variant="ghost"
-                      >
-                        <Slash className="h-4.5 w-4.5" />
-                      </Button>
-                    </div>
-                  </PopoverContent>
-                </Popover>
-                <TooltipContent>
-                  <div className="font-medium text-sm">形状</div>
-                  <div className="text-xs text-muted-foreground">矩形、圆形与直线</div>
-                </TooltipContent>
-              </Tooltip>
-            </div>
-
-            <div className="flex items-center justify-center gap-1 rounded-[24px] border border-border/40 bg-background/80 px-1.5 py-1.5 shadow-xl backdrop-blur-md">
-              <Tooltip>
-                <Popover>
-                  <TooltipTrigger asChild>
-                    <PopoverTrigger asChild>
-                      <Button
-                        className={compactToolButtonClass}
-                        size="icon"
-                        type="button"
-                        variant="ghost"
-                      >
-                        <SlidersHorizontal className="h-4.5 w-4.5" />
-                      </Button>
-                    </PopoverTrigger>
-                  </TooltipTrigger>
-                  <PopoverContent className="w-[250px] rounded-[18px] border-border/40 bg-background/95 p-4 shadow-xl backdrop-blur-md">
-                    <div className="space-y-4">
-                      <div className="space-y-2">
-                        <div className="font-medium text-xs text-muted-foreground">
-                          颜色
-                        </div>
-                        <button
-                          className="flex h-10 w-full items-center justify-between rounded-xl border border-border bg-background px-3 font-medium text-foreground text-sm"
-                          onClick={() => colorInputRef.current?.click()}
-                          type="button"
-                        >
-                          <span>选择颜色</span>
-                          <span
-                            className="h-5 w-5 rounded-full border border-border/20 shadow-inner"
-                            style={{ backgroundColor: brushColor }}
-                          />
-                        </button>
-                        <input
-                          className="sr-only"
-                          onChange={(event) =>
-                            setBrushColor(event.target.value)
-                          }
-                          ref={colorInputRef}
-                          title="自定义颜色"
-                          type="color"
-                          value={brushColor}
-                        />
-                      </div>
-                      <div className="space-y-2">
-                        <div className="flex items-center justify-between font-medium text-xs text-muted-foreground">
-                          <span>粗细</span>
-                          <span className="w-8 text-right text-foreground">
-                            {brushSize}
-                          </span>
-                        </div>
-                        <Slider
-                          className="w-full"
-                          max={50}
-                          min={2}
-                          onValueChange={([val]) => setBrushSize(val)}
-                          rangeClassName="bg-primary"
-                          step={1}
-                          thumbClassName="h-5 w-5 border border-border bg-background shadow-sm"
-                          trackClassName="h-2.5 bg-muted shadow-inner"
-                          value={[brushSize]}
-                        />
-                      </div>
-                    </div>
-                  </PopoverContent>
-                </Popover>
-                <TooltipContent>
-                  <div className="font-medium text-sm">画笔设置</div>
-                  <div className="text-xs text-muted-foreground">调整颜色和粗细</div>
-                </TooltipContent>
-              </Tooltip>
-            </div>
-
-            <div className="flex items-center justify-center gap-1 rounded-[24px] border border-border/40 bg-background/80 px-1.5 py-1.5 shadow-xl backdrop-blur-md">
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    className={compactToolButtonClass}
-                    onClick={() => uploadInputRef.current?.click()}
-                    size="icon"
-                    type="button"
-                    variant="ghost"
-                  >
-                    <Upload className="h-4.5 w-4.5" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <div className="font-medium text-sm">上传图片</div>
-                  <div className="text-xs text-muted-foreground">添加新的图片图层</div>
-                </TooltipContent>
-              </Tooltip>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    className={compactToolButtonClass}
-                    onClick={() => void saveCurrentProject()}
-                    size="icon"
-                    type="button"
-                    variant="ghost"
-                  >
-                    <Save className="h-4.5 w-4.5" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <div className="font-medium text-sm">保存项目</div>
-                  <div className="text-xs text-muted-foreground">保存当前画布状态</div>
-                </TooltipContent>
-              </Tooltip>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    className={compactToolButtonClass}
-                    onClick={() => {
-                      refreshSavedProjects();
-                      setProjectPanelOpen((openState) => !openState);
-                    }}
-                    size="icon"
-                    type="button"
-                    variant="ghost"
-                  >
-                    <FolderOpen className="h-4.5 w-4.5" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <div className="font-medium text-sm">项目列表</div>
-                  <div className="text-xs text-muted-foreground">打开已保存项目</div>
-                </TooltipContent>
-              </Tooltip>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    className={compactToolButtonClass}
-                    onClick={startBlankProject}
-                    size="icon"
-                    type="button"
-                    variant="ghost"
-                  >
-                    <Plus className="h-4.5 w-4.5" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <div className="font-medium text-sm">新建空白</div>
-                  <div className="text-xs text-muted-foreground">清空并开始新项目</div>
-                </TooltipContent>
-              </Tooltip>
-            </div>
-
-            <div className="flex items-center justify-center gap-1 rounded-[24px] border border-border/40 bg-background/80 px-1.5 py-1.5 shadow-xl backdrop-blur-md">
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    className={compactToolButtonClass}
-                    disabled={!canUndo}
-                    onClick={undo}
-                    size="icon"
-                    type="button"
-                    variant="ghost"
-                  >
-                    <Undo2 className="h-4.5 w-4.5" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <div className="font-medium text-sm">撤销</div>
-                  <div className="text-xs text-muted-foreground">回退上一步编辑</div>
-                </TooltipContent>
-              </Tooltip>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    className={compactToolButtonClass}
-                    disabled={!canRedo}
-                    onClick={redo}
-                    size="icon"
-                    type="button"
-                    variant="ghost"
-                  >
-                    <Redo2 className="h-4.5 w-4.5" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <div className="font-medium text-sm">重做</div>
-                  <div className="text-xs text-muted-foreground">恢复已撤销操作</div>
-                </TooltipContent>
-              </Tooltip>
-              {standalone ? (
-                <Tooltip>
-                  <TooltipTrigger asChild>
+                  <PopoverTrigger asChild>
                     <Button
-                      className="h-9 w-9 rounded-[16px] bg-primary text-primary-foreground transition hover:bg-primary/90 hover:text-primary-foreground"
-                      onClick={() => onOpenChange(false)}
+                      className={cn(
+                        compactToolButtonClass,
+                        isShapeMode(brushMode) && compactToolButtonActiveClass
+                      )}
                       size="icon"
                       type="button"
                       variant="ghost"
                     >
-                      <X className="h-4.5 w-4.5" />
+                      <Square className="h-4.5 w-4.5" />
                     </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <div className="font-medium text-sm">关闭页面</div>
-                    <div className="text-xs text-muted-foreground">返回上一层画布</div>
-                  </TooltipContent>
-                </Tooltip>
-              ) : null}
-            </div>
+                  </PopoverTrigger>
+                </TooltipTrigger>
+                <PopoverContent className="w-[220px] rounded-[18px] border-border/40 bg-background/95 p-3 shadow-xl backdrop-blur-md">
+                  <div className="mb-2 font-medium text-muted-foreground text-xs">
+                    形状工具
+                  </div>
+                  <div className="grid grid-cols-3 gap-2">
+                    <Button
+                      className={cn(
+                        "h-10 rounded-xl",
+                        brushMode === "rect" &&
+                          "bg-primary text-primary-foreground hover:bg-primary"
+                      )}
+                      onClick={() => {
+                        setSelectedLayerId(DRAW_LAYER_ID);
+                        setBrushMode("rect");
+                      }}
+                      type="button"
+                      variant="ghost"
+                    >
+                      <Square className="h-4.5 w-4.5" />
+                    </Button>
+                    <Button
+                      className={cn(
+                        "h-10 rounded-xl",
+                        brushMode === "circle" &&
+                          "bg-primary text-primary-foreground hover:bg-primary"
+                      )}
+                      onClick={() => {
+                        setSelectedLayerId(DRAW_LAYER_ID);
+                        setBrushMode("circle");
+                      }}
+                      type="button"
+                      variant="ghost"
+                    >
+                      <CircleIcon className="h-4.5 w-4.5" />
+                    </Button>
+                    <Button
+                      className={cn(
+                        "h-10 rounded-xl",
+                        brushMode === "line" &&
+                          "bg-primary text-primary-foreground hover:bg-primary"
+                      )}
+                      onClick={() => {
+                        setSelectedLayerId(DRAW_LAYER_ID);
+                        setBrushMode("line");
+                      }}
+                      type="button"
+                      variant="ghost"
+                    >
+                      <Slash className="h-4.5 w-4.5" />
+                    </Button>
+                  </div>
+                </PopoverContent>
+              </Popover>
+              <TooltipContent>
+                <div className="font-medium text-sm">形状</div>
+                <div className="text-muted-foreground text-xs">
+                  矩形、圆形与直线
+                </div>
+              </TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <Popover>
+                <TooltipTrigger asChild>
+                  <PopoverTrigger asChild>
+                    <Button
+                      className={compactToolButtonClass}
+                      size="icon"
+                      type="button"
+                      variant="ghost"
+                    >
+                      <SlidersHorizontal className="h-4.5 w-4.5" />
+                    </Button>
+                  </PopoverTrigger>
+                </TooltipTrigger>
+                <PopoverContent className="w-[250px] rounded-[18px] border-border/40 bg-background/95 p-4 shadow-xl backdrop-blur-md">
+                  <div className="space-y-4">
+                    <div className="space-y-2">
+                      <div className="font-medium text-muted-foreground text-xs">
+                        颜色
+                      </div>
+                      <button
+                        className="flex h-10 w-full items-center justify-between rounded-xl border border-border bg-background px-3 font-medium text-foreground text-sm"
+                        onClick={() => colorInputRef.current?.click()}
+                        type="button"
+                      >
+                        <span>选择颜色</span>
+                        <span
+                          className="h-5 w-5 rounded-full border border-border/20 shadow-inner"
+                          style={{ backgroundColor: brushColor }}
+                        />
+                      </button>
+                      <input
+                        className="sr-only"
+                        onChange={(event) => setBrushColor(event.target.value)}
+                        ref={colorInputRef}
+                        title="自定义颜色"
+                        type="color"
+                        value={brushColor}
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <div className="flex items-center justify-between font-medium text-muted-foreground text-xs">
+                        <span>粗细</span>
+                        <span className="w-8 text-right text-foreground">
+                          {brushSize}
+                        </span>
+                      </div>
+                      <Slider
+                        className="w-full"
+                        max={50}
+                        min={2}
+                        onValueChange={([val]) => setBrushSize(val)}
+                        rangeClassName="bg-primary"
+                        step={1}
+                        thumbClassName="h-5 w-5 border border-border bg-background shadow-sm"
+                        trackClassName="h-2.5 bg-muted shadow-inner"
+                        value={[brushSize]}
+                      />
+                    </div>
+                  </div>
+                </PopoverContent>
+              </Popover>
+              <TooltipContent>
+                <div className="font-medium text-sm">画笔设置</div>
+                <div className="text-muted-foreground text-xs">
+                  调整颜色和粗细
+                </div>
+              </TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  className={compactToolButtonClass}
+                  onClick={() => uploadInputRef.current?.click()}
+                  size="icon"
+                  type="button"
+                  variant="ghost"
+                >
+                  <Upload className="h-4.5 w-4.5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <div className="font-medium text-sm">上传图片</div>
+                <div className="text-muted-foreground text-xs">
+                  添加新的图片图层
+                </div>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  className={compactToolButtonClass}
+                  onClick={() => void saveCurrentProject()}
+                  size="icon"
+                  type="button"
+                  variant="ghost"
+                >
+                  <Save className="h-4.5 w-4.5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <div className="font-medium text-sm">保存项目</div>
+                <div className="text-muted-foreground text-xs">
+                  保存当前画布状态
+                </div>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  className={compactToolButtonClass}
+                  onClick={() => {
+                    refreshSavedProjects();
+                    setProjectPanelOpen((openState) => !openState);
+                  }}
+                  size="icon"
+                  type="button"
+                  variant="ghost"
+                >
+                  <FolderOpen className="h-4.5 w-4.5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <div className="font-medium text-sm">项目列表</div>
+                <div className="text-muted-foreground text-xs">
+                  打开已保存项目
+                </div>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  className={compactToolButtonClass}
+                  onClick={startBlankProject}
+                  size="icon"
+                  type="button"
+                  variant="ghost"
+                >
+                  <Plus className="h-4.5 w-4.5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <div className="font-medium text-sm">新建空白</div>
+                <div className="text-muted-foreground text-xs">
+                  清空并开始新项目
+                </div>
+              </TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  className={compactToolButtonClass}
+                  disabled={!canUndo}
+                  onClick={undo}
+                  size="icon"
+                  type="button"
+                  variant="ghost"
+                >
+                  <Undo2 className="h-4.5 w-4.5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <div className="font-medium text-sm">撤销</div>
+                <div className="text-muted-foreground text-xs">
+                  回退上一步编辑
+                </div>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  className={compactToolButtonClass}
+                  disabled={!canRedo}
+                  onClick={redo}
+                  size="icon"
+                  type="button"
+                  variant="ghost"
+                >
+                  <Redo2 className="h-4.5 w-4.5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <div className="font-medium text-sm">重做</div>
+                <div className="text-muted-foreground text-xs">
+                  恢复已撤销操作
+                </div>
+              </TooltipContent>
+            </Tooltip>
+            {standalone ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    className="h-9 w-9 rounded-[16px] bg-primary text-primary-foreground transition hover:bg-primary/90 hover:text-primary-foreground"
+                    onClick={() => onOpenChange(false)}
+                    size="icon"
+                    type="button"
+                    variant="ghost"
+                  >
+                    <X className="h-4.5 w-4.5" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <div className="font-medium text-sm">关闭页面</div>
+                  <div className="text-muted-foreground text-xs">
+                    返回上一层画布
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            ) : null}
           </div>
         </TooltipProvider>
 
-        <div className="pointer-events-auto w-full rounded-[28px] border border-border/40 bg-background/80 p-[18px] shadow-2xl backdrop-blur-md">
+        <div className="pointer-events-auto w-full rounded-[24px] border border-border/40 bg-background/80 p-3 shadow-2xl backdrop-blur-md">
           <Textarea
-            className="min-h-[102px] resize-none border-0 bg-transparent p-0 text-[15px] leading-7 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
+            className="min-h-[48px] resize-none border-0 bg-transparent p-0 text-[15px] leading-6 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
             onBlur={() => scheduleFlush(true, false)}
             onChange={(e) => setPrompt(e.target.value)}
             onKeyDown={(event) => {
@@ -3481,7 +3493,28 @@ export function RealtimeCanvasDialog({
             placeholder="输入指令，基于当前画布实时生成"
             value={prompt}
           />
-          <div className="mt-4 flex flex-col gap-2.5 sm:flex-row sm:items-end sm:justify-end">
+          <div className="mt-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+            <div className="flex items-center gap-2">
+              <div
+                className={cn(
+                  "flex h-6 items-center gap-1.5 rounded-full px-2.5 font-medium text-xs",
+                  statusBadge.className
+                )}
+              >
+                <div
+                  className={cn(
+                    "h-1.5 w-1.5 rounded-full",
+                    status === "live" || status === "connecting"
+                      ? "animate-pulse bg-current"
+                      : "bg-current"
+                  )}
+                />
+                {statusBadge.label}
+              </div>
+              <div className="flex h-6 items-center rounded-full bg-muted px-2.5 font-medium text-muted-foreground text-xs">
+                延迟 {adaptiveThrottleMs}ms
+              </div>
+            </div>
             <div className="flex items-center gap-2">
               <Button
                 className="h-9 shrink-0 rounded-full bg-primary px-4 font-medium text-primary-foreground hover:bg-primary/90"