diff --git a/components/canvas/RealtimeCanvasDialog.tsx b/components/canvas/RealtimeCanvasDialog.tsx
index 7603ad1ea..6fde01ab0 100644
--- a/components/canvas/RealtimeCanvasDialog.tsx
+++ b/components/canvas/RealtimeCanvasDialog.tsx
@@ -786,13 +786,25 @@ export function RealtimeCanvasDialog({
 
   const statusBadge = useMemo(() => {
     if (status === "live")
-      return { label: "实时中", className: "bg-emerald-50 text-emerald-700" };
+      return {
+        label: "实时中",
+        className: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400",
+      };
     if (status === "connecting") {
-      return { label: "连接中", className: "bg-blue-50 text-blue-700" };
+      return {
+        label: "连接中",
+        className: "bg-blue-500/15 text-blue-600 dark:text-blue-400",
+      };
     }
     if (status === "error")
-      return { label: "异常", className: "bg-rose-50 text-rose-700" };
-    return { label: "待启动", className: "bg-zinc-100 text-zinc-600" };
+      return {
+        label: "异常",
+        className: "bg-rose-500/15 text-rose-600 dark:text-rose-400",
+      };
+    return {
+      label: "待启动",
+      className: "bg-muted text-muted-foreground",
+    };
   }, [status]);
 
   const selectedImageLayer = useMemo(
@@ -2654,9 +2666,9 @@ export function RealtimeCanvasDialog({
   }, [clearPreviewCanvas, resetCanvas]);
 
   const compactToolButtonClass =
-    "h-9 w-9 rounded-[16px] text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-900";
+    "h-9 w-9 rounded-[16px] text-muted-foreground transition hover:bg-accent hover:text-foreground";
   const compactToolButtonActiveClass =
-    "bg-black text-white hover:bg-black hover:text-white";
+    "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground";
   const currentModeLabel =
     brushMode === "select"
       ? "鼠标"
@@ -2695,269 +2707,51 @@ export function RealtimeCanvasDialog({
           <DialogDescription>左侧绘制草图，右侧实时预览。</DialogDescription>
         </DialogHeader>
       )}
-      <div className="pointer-events-none absolute top-4 right-4 left-4 z-50 hidden">
-        <div className="pointer-events-auto rounded-[24px] border border-border/40 bg-background/95 shadow-xl backdrop-blur-md">
-          <div className="flex items-center gap-2 overflow-x-auto px-2 py-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-            <div className="flex h-10 shrink-0 items-center gap-2 rounded-full border border-border/40 bg-background/80 px-3 shadow-sm backdrop-blur-md">
-              <div className="flex items-center gap-2 pr-1">
-                {siteLogo ? (
-                  <img
-                    alt={siteName}
-                    className="h-5 w-5 rounded object-contain"
-                    src={
-                      /^https?:\/\//i.test(siteLogo)
-                        ? buildImageProxyUrl(siteLogo)
-                        : siteLogo
-                    }
-                  />
-                ) : (
-                  <div className="flex h-5 w-5 items-center justify-center rounded bg-zinc-900 text-white">
-                    <Sparkles className="h-3 w-3" />
-                  </div>
-                )}
-                <span className="max-w-[11rem] truncate font-semibold text-sm text-zinc-900">
-                  {siteName}
-                </span>
-              </div>
-              <span
-                className={cn(
-                  "flex items-center gap-1.5 rounded-full px-2 py-1 font-medium text-xs",
-                  statusBadge.className
-                )}
-              >
-                <span
-                  className={cn(
-                    "h-2 w-2 rounded-full",
-                    status === "live"
-                      ? "animate-pulse bg-emerald-500"
-                      : status === "error"
-                        ? "bg-rose-500"
-                        : "bg-zinc-400"
-                  )}
-                />
-                {statusBadge.label}
-              </span>
-              <span className="hidden text-xs text-zinc-500 sm:inline">
-                延迟 {adaptiveThrottleMs}ms
-              </span>
+      <div className="pointer-events-none absolute top-6 left-6 z-50 flex items-center gap-3">
+        <div className="pointer-events-auto flex items-center gap-3 rounded-full border border-border/40 bg-background/80 px-4 py-2 shadow-sm backdrop-blur-md">
+          {siteLogo ? (
+            <img
+              alt={siteName}
+              className="h-6 w-6 rounded object-contain"
+              src={
+                /^https?:\/\//i.test(siteLogo)
+                  ? buildImageProxyUrl(siteLogo)
+                  : siteLogo
+              }
+            />
+          ) : (
+            <div className="flex h-6 w-6 items-center justify-center rounded bg-primary text-primary-foreground">
+              <Sparkles className="h-3.5 w-3.5" />
             </div>
+          )}
+          <span className="font-semibold text-foreground text-sm">
+            {siteName}
+          </span>
+        </div>
+      </div>
 
-            <div className="flex h-10 shrink-0 items-center gap-0.5 rounded-full border border-border/40 bg-background/80 px-1 shadow-sm backdrop-blur-md">
-              <Button
-                className="h-8 w-8 rounded-full"
-                onClick={() => void saveCurrentProject()}
-                size="icon"
-                title="保存项目"
-                type="button"
-                variant="ghost"
-              >
-                <Save className="h-4 w-4" />
-              </Button>
-              <Button
-                className="h-8 w-8 rounded-full"
-                onClick={() => {
-                  refreshSavedProjects();
-                  setProjectPanelOpen((openState) => !openState);
-                }}
-                size="icon"
-                title="项目列表"
-                type="button"
-                variant="ghost"
-              >
-                <FolderOpen className="h-4 w-4" />
-              </Button>
-              <Button
-                className="h-8 w-8 rounded-full"
-                onClick={startBlankProject}
-                size="icon"
-                title="新建空白"
-                type="button"
-                variant="ghost"
-              >
-                <Plus className="h-4 w-4" />
-              </Button>
-            </div>
-
-            <div className="flex h-10 shrink-0 items-center gap-0.5 rounded-full border border-border/40 bg-background/80 px-1 shadow-sm backdrop-blur-md">
-              <Button
-                className={cn(
-                  "h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100",
-                  brushMode === "select" && "bg-black text-white hover:bg-black"
-                )}
-                onClick={() => {
-                  setSelectedLayerId(DRAW_LAYER_ID);
-                  setBrushMode("select");
-                }}
-                size="icon"
-                title="鼠标"
-                variant="ghost"
-              >
-                <MousePointer2 className="h-4.5 w-4.5" />
-              </Button>
-              <Button
-                className={cn(
-                  "h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100",
-                  brushMode === "brush" && "bg-black text-white hover:bg-black"
-                )}
-                onClick={() => {
-                  setSelectedLayerId(DRAW_LAYER_ID);
-                  setBrushMode("brush");
-                }}
-                size="icon"
-                title="画笔"
-                variant="ghost"
-              >
-                <Paintbrush className="h-5 w-5" />
-              </Button>
-              <Button
-                className={cn(
-                  "h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100",
-                  brushMode === "eraser" && "bg-black text-white hover:bg-black"
-                )}
-                onClick={() => {
-                  setSelectedLayerId(DRAW_LAYER_ID);
-                  setBrushMode("eraser");
-                }}
-                size="icon"
-                title="橡皮"
-                variant="ghost"
-              >
-                <Eraser className="h-5 w-5" />
-              </Button>
-              <Button
-                className={cn(
-                  "h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100",
-                  brushMode === "rect" && "bg-black text-white hover:bg-black"
-                )}
-                onClick={() => {
-                  setSelectedLayerId(DRAW_LAYER_ID);
-                  setBrushMode("rect");
-                }}
-                size="icon"
-                title="矩形"
-                variant="ghost"
-              >
-                <Square className="h-5 w-5" />
-              </Button>
-              <Button
-                className={cn(
-                  "h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100",
-                  brushMode === "circle" && "bg-black text-white hover:bg-black"
-                )}
-                onClick={() => {
-                  setSelectedLayerId(DRAW_LAYER_ID);
-                  setBrushMode("circle");
-                }}
-                size="icon"
-                title="圆形"
-                variant="ghost"
-              >
-                <CircleIcon className="h-5 w-5" />
-              </Button>
-              <Button
-                className={cn(
-                  "h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100",
-                  brushMode === "line" && "bg-black text-white hover:bg-black"
-                )}
-                onClick={() => {
-                  setSelectedLayerId(DRAW_LAYER_ID);
-                  setBrushMode("line");
-                }}
-                size="icon"
-                title="直线"
-                variant="ghost"
-              >
-                <Slash className="h-5 w-5" />
-              </Button>
-            </div>
-
-            <div className="flex h-10 shrink-0 items-center gap-2 rounded-full border border-border/40 bg-background/80 px-3 shadow-sm backdrop-blur-md">
-              <button
-                className="flex h-8 items-center gap-2 rounded-full border border-border/10 bg-background px-3 font-medium text-foreground text-xs transition hover:bg-muted"
-                onClick={() => colorInputRef.current?.click()}
-                title="选择画笔颜色"
-                type="button"
-              >
-                <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 className="flex w-[210px] items-center gap-3 rounded-full border border-border/10 bg-background px-3 py-1.5">
-                <span className="whitespace-nowrap font-medium text-xs text-zinc-600">
-                  粗细 {brushSize}
-                </span>
-                <Slider
-                  className="min-w-[140px] flex-1"
-                  max={50}
-                  min={2}
-                  onValueChange={([val]) => setBrushSize(val)}
-                  rangeClassName="bg-sky-500"
-                  step={1}
-                  thumbClassName="h-5 w-5 border border-zinc-300 bg-white shadow-sm"
-                  trackClassName="h-2.5 bg-zinc-200 shadow-inner"
-                  value={[brushSize]}
-                />
-              </div>
-            </div>
-
-            <div className="flex h-10 shrink-0 items-center gap-0.5 rounded-full border border-border/40 bg-background/80 px-1 shadow-sm backdrop-blur-md">
-              <Button
-                className="h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100"
-                disabled={!canUndo}
-                onClick={undo}
-                size="icon"
-                title="撤销"
-                variant="ghost"
-              >
-                <Undo2 className="h-5 w-5" />
-              </Button>
-              <Button
-                className="h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100"
-                disabled={!canRedo}
-                onClick={redo}
-                size="icon"
-                title="重做"
-                variant="ghost"
-              >
-                <Redo2 className="h-5 w-5" />
-              </Button>
-            </div>
-
-            {standalone ? (
-              <div className="flex h-10 shrink-0 items-center rounded-full border border-black bg-black px-1 shadow-sm">
-                <Button
-                  className="h-8 w-8 rounded-full text-white hover:bg-white/10 hover:text-white"
-                  onClick={() => onOpenChange(false)}
-                  size="icon"
-                  title="关闭页面"
-                  type="button"
-                  variant="ghost"
-                >
-                  <X className="h-4 w-4" />
-                </Button>
-              </div>
-            ) : null}
-          </div>
+      <div className="pointer-events-none absolute top-6 right-6 z-50">
+        <div className="pointer-events-auto rounded-full border border-border/40 bg-background/80 p-1 shadow-sm backdrop-blur-md">
+          <Button
+            className="h-9 w-9 rounded-full text-muted-foreground transition hover:bg-muted hover:text-foreground"
+            onClick={() => onOpenChange(false)}
+            size="icon"
+            title="关闭"
+            type="button"
+            variant="ghost"
+          >
+            <X className="h-5 w-5" />
+          </Button>
         </div>
       </div>
       {saveProjectDialogOpen ? (
         <div className="-translate-x-1/2 absolute top-24 left-1/2 z-40 w-[22rem] max-w-[calc(100vw-2rem)] rounded-[24px] border border-border/40 bg-background/95 p-4 shadow-2xl backdrop-blur-xl">
           <div className="flex items-center justify-between">
             <div>
-              <div className="font-semibold text-sm text-zinc-900">
+              <div className="font-semibold text-foreground text-sm">
                 保存项目
               </div>
-              <div className="text-xs text-zinc-400">
+              <div className="text-muted-foreground text-xs">
                 请输入项目名称后保存当前画布
               </div>
             </div>
@@ -2994,7 +2788,7 @@ export function RealtimeCanvasDialog({
               取消
             </Button>
             <Button
-              className="h-10 flex-1 rounded-2xl bg-black text-white hover:bg-black/90"
+              className="h-10 flex-1 rounded-2xl bg-primary text-primary-foreground hover:bg-primary/90"
               onClick={() => void confirmSaveCurrentProject()}
               type="button"
             >
@@ -3007,10 +2801,10 @@ export function RealtimeCanvasDialog({
         <div className="absolute top-20 left-4 z-40 w-[22rem] max-w-[calc(100vw-2rem)] rounded-[24px] border border-border/40 bg-background/95 p-4 shadow-2xl backdrop-blur-xl">
           <div className="flex items-center justify-between">
             <div>
-              <div className="font-semibold text-sm text-zinc-900">
+              <div className="font-semibold text-foreground text-sm">
                 项目列表
               </div>
-              <div className="text-xs text-zinc-400">
+              <div className="text-muted-foreground text-xs">
                 本地保存，便于下次继续编辑
               </div>
             </div>
@@ -3032,7 +2826,7 @@ export function RealtimeCanvasDialog({
             ) : (
               savedProjects.map((project) => (
                 <div
-                  className="rounded-2xl border border-black/10 bg-white p-2.5 shadow-sm"
+                  className="rounded-2xl border border-border bg-card p-2.5 shadow-sm"
                   key={project.id}
                 >
                   <div className="flex gap-3">
@@ -3056,13 +2850,13 @@ export function RealtimeCanvasDialog({
                           }
                         />
                       ) : (
-                        <div className="flex h-full items-center justify-center text-[11px] text-zinc-400">
+                        <div className="flex h-full items-center justify-center text-[11px] text-muted-foreground">
                           无预览
                         </div>
                       )}
                     </div>
                     <div className="min-w-0 flex-1 pt-1">
-                      <div className="truncate font-medium text-sm text-zinc-900">
+                      <div className="truncate font-medium text-sm text-foreground">
                         {project.name}
                       </div>
                     </div>
@@ -3207,7 +3001,7 @@ export function RealtimeCanvasDialog({
             </div>
             <div className="mt-2 flex flex-1 flex-col items-center space-y-2 overflow-y-auto py-1">
               {imageLayers.length === 0 ? (
-                <div className="rounded-2xl border border-black/10 border-dashed px-1 py-4 text-center text-[10px] text-zinc-400 leading-4">
+                <div className="rounded-2xl border border-black/10 border-dashed px-1 py-4 text-center text-[10px] text-muted-foreground leading-4">
                   暂无图层
                 </div>
               ) : (
@@ -3278,7 +3072,7 @@ export function RealtimeCanvasDialog({
                 src={previewUrl}
               />
             ) : (
-              <div className="flex flex-col items-center justify-center gap-3 text-zinc-400">
+              <div className="flex flex-col items-center justify-center gap-3 text-muted-foreground">
                 {status === "connecting" ? (
                   <>
                     <Loader2 className="h-8 w-8 animate-spin opacity-50" />
@@ -3287,7 +3081,6 @@ export function RealtimeCanvasDialog({
                 ) : (
                   <>
                     <Sparkles className="h-8 w-8 opacity-20" />
-                    <span className="text-sm">Start drawing to generate</span>
                   </>
                 )}
               </div>
@@ -3340,7 +3133,7 @@ export function RealtimeCanvasDialog({
                 </TooltipTrigger>
                 <TooltipContent>
                   <div className="font-medium text-sm">鼠标</div>
-                  <div className="text-xs text-zinc-500">
+                  <div className="text-xs text-muted-foreground">
                     选择图层并拖动位置
                   </div>
                 </TooltipContent>
@@ -3365,7 +3158,7 @@ export function RealtimeCanvasDialog({
                 </TooltipTrigger>
                 <TooltipContent>
                   <div className="font-medium text-sm">画笔</div>
-                  <div className="text-xs text-zinc-500">在画布上自由绘制</div>
+                  <div className="text-xs text-muted-foreground">在画布上自由绘制</div>
                 </TooltipContent>
               </Tooltip>
               <Tooltip>
@@ -3388,7 +3181,7 @@ export function RealtimeCanvasDialog({
                 </TooltipTrigger>
                 <TooltipContent>
                   <div className="font-medium text-sm">橡皮</div>
-                  <div className="text-xs text-zinc-500">擦除当前草图笔触</div>
+                  <div className="text-xs text-muted-foreground">擦除当前草图笔触</div>
                 </TooltipContent>
               </Tooltip>
               <Tooltip>
@@ -3409,7 +3202,7 @@ export function RealtimeCanvasDialog({
                     </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-zinc-500">
+                    <div className="mb-2 font-medium text-xs text-muted-foreground">
                       形状工具
                     </div>
                     <div className="grid grid-cols-3 gap-2">
@@ -3417,7 +3210,7 @@ export function RealtimeCanvasDialog({
                         className={cn(
                           "h-10 rounded-xl",
                           brushMode === "rect" &&
-                            "bg-black text-white hover:bg-black"
+                            "bg-primary text-primary-foreground hover:bg-primary"
                         )}
                         onClick={() => {
                           setSelectedLayerId(DRAW_LAYER_ID);
@@ -3432,7 +3225,7 @@ export function RealtimeCanvasDialog({
                         className={cn(
                           "h-10 rounded-xl",
                           brushMode === "circle" &&
-                            "bg-black text-white hover:bg-black"
+                            "bg-primary text-primary-foreground hover:bg-primary"
                         )}
                         onClick={() => {
                           setSelectedLayerId(DRAW_LAYER_ID);
@@ -3447,7 +3240,7 @@ export function RealtimeCanvasDialog({
                         className={cn(
                           "h-10 rounded-xl",
                           brushMode === "line" &&
-                            "bg-black text-white hover:bg-black"
+                            "bg-primary text-primary-foreground hover:bg-primary"
                         )}
                         onClick={() => {
                           setSelectedLayerId(DRAW_LAYER_ID);
@@ -3463,7 +3256,7 @@ export function RealtimeCanvasDialog({
                 </Popover>
                 <TooltipContent>
                   <div className="font-medium text-sm">形状</div>
-                  <div className="text-xs text-zinc-500">矩形、圆形与直线</div>
+                  <div className="text-xs text-muted-foreground">矩形、圆形与直线</div>
                 </TooltipContent>
               </Tooltip>
             </div>
@@ -3486,11 +3279,11 @@ export function RealtimeCanvasDialog({
                   <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-zinc-500">
+                        <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-black/10 bg-white px-3 font-medium text-sm text-zinc-700"
+                          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"
                         >
@@ -3512,9 +3305,9 @@ export function RealtimeCanvasDialog({
                         />
                       </div>
                       <div className="space-y-2">
-                        <div className="flex items-center justify-between font-medium text-xs text-zinc-500">
+                        <div className="flex items-center justify-between font-medium text-xs text-muted-foreground">
                           <span>粗细</span>
-                          <span className="w-8 text-right text-zinc-900">
+                          <span className="w-8 text-right text-foreground">
                             {brushSize}
                           </span>
                         </div>
@@ -3523,10 +3316,10 @@ export function RealtimeCanvasDialog({
                           max={50}
                           min={2}
                           onValueChange={([val]) => setBrushSize(val)}
-                          rangeClassName="bg-black"
+                          rangeClassName="bg-primary"
                           step={1}
-                          thumbClassName="h-5 w-5 border border-zinc-300 bg-white shadow-sm"
-                          trackClassName="h-2.5 bg-zinc-200 shadow-inner"
+                          thumbClassName="h-5 w-5 border border-border bg-background shadow-sm"
+                          trackClassName="h-2.5 bg-muted shadow-inner"
                           value={[brushSize]}
                         />
                       </div>
@@ -3535,7 +3328,7 @@ export function RealtimeCanvasDialog({
                 </Popover>
                 <TooltipContent>
                   <div className="font-medium text-sm">画笔设置</div>
-                  <div className="text-xs text-zinc-500">调整颜色和粗细</div>
+                  <div className="text-xs text-muted-foreground">调整颜色和粗细</div>
                 </TooltipContent>
               </Tooltip>
             </div>
@@ -3555,7 +3348,7 @@ export function RealtimeCanvasDialog({
                 </TooltipTrigger>
                 <TooltipContent>
                   <div className="font-medium text-sm">上传图片</div>
-                  <div className="text-xs text-zinc-500">添加新的图片图层</div>
+                  <div className="text-xs text-muted-foreground">添加新的图片图层</div>
                 </TooltipContent>
               </Tooltip>
               <Tooltip>
@@ -3572,7 +3365,7 @@ export function RealtimeCanvasDialog({
                 </TooltipTrigger>
                 <TooltipContent>
                   <div className="font-medium text-sm">保存项目</div>
-                  <div className="text-xs text-zinc-500">保存当前画布状态</div>
+                  <div className="text-xs text-muted-foreground">保存当前画布状态</div>
                 </TooltipContent>
               </Tooltip>
               <Tooltip>
@@ -3592,7 +3385,7 @@ export function RealtimeCanvasDialog({
                 </TooltipTrigger>
                 <TooltipContent>
                   <div className="font-medium text-sm">项目列表</div>
-                  <div className="text-xs text-zinc-500">打开已保存项目</div>
+                  <div className="text-xs text-muted-foreground">打开已保存项目</div>
                 </TooltipContent>
               </Tooltip>
               <Tooltip>
@@ -3609,7 +3402,7 @@ export function RealtimeCanvasDialog({
                 </TooltipTrigger>
                 <TooltipContent>
                   <div className="font-medium text-sm">新建空白</div>
-                  <div className="text-xs text-zinc-500">清空并开始新项目</div>
+                  <div className="text-xs text-muted-foreground">清空并开始新项目</div>
                 </TooltipContent>
               </Tooltip>
             </div>
@@ -3630,7 +3423,7 @@ export function RealtimeCanvasDialog({
                 </TooltipTrigger>
                 <TooltipContent>
                   <div className="font-medium text-sm">撤销</div>
-                  <div className="text-xs text-zinc-500">回退上一步编辑</div>
+                  <div className="text-xs text-muted-foreground">回退上一步编辑</div>
                 </TooltipContent>
               </Tooltip>
               <Tooltip>
@@ -3648,14 +3441,14 @@ export function RealtimeCanvasDialog({
                 </TooltipTrigger>
                 <TooltipContent>
                   <div className="font-medium text-sm">重做</div>
-                  <div className="text-xs text-zinc-500">恢复已撤销操作</div>
+                  <div className="text-xs text-muted-foreground">恢复已撤销操作</div>
                 </TooltipContent>
               </Tooltip>
               {standalone ? (
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <Button
-                      className="h-9 w-9 rounded-[16px] bg-black text-white transition hover:bg-black/90 hover:text-white"
+                      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"
@@ -3666,7 +3459,7 @@ export function RealtimeCanvasDialog({
                   </TooltipTrigger>
                   <TooltipContent>
                     <div className="font-medium text-sm">关闭页面</div>
-                    <div className="text-xs text-zinc-500">返回上一层画布</div>
+                    <div className="text-xs text-muted-foreground">返回上一层画布</div>
                   </TooltipContent>
                 </Tooltip>
               ) : null}
@@ -3688,39 +3481,10 @@ export function RealtimeCanvasDialog({
             placeholder="输入指令，基于当前画布实时生成"
             value={prompt}
           />
-          <div className="mt-4 flex flex-col gap-2.5 sm:flex-row sm:items-end sm:justify-between">
-            <div className="flex flex-wrap items-center gap-2">
-              <span
-                className={cn(
-                  "flex items-center gap-1.5 rounded-full px-2.5 py-1.5 font-medium text-[11px]",
-                  statusBadge.className
-                )}
-              >
-                <span
-                  className={cn(
-                    "h-2 w-2 rounded-full",
-                    status === "live"
-                      ? "animate-pulse bg-emerald-500"
-                      : status === "error"
-                        ? "bg-rose-500"
-                        : "bg-zinc-400"
-                  )}
-                />
-                {statusBadge.label}
-              </span>
-              <span className="rounded-full bg-zinc-100 px-2.5 py-1.5 text-[11px] text-zinc-600">
-                延迟 {adaptiveThrottleMs}ms
-              </span>
-              <span className="rounded-full bg-black px-2.5 py-1.5 font-medium text-[11px] text-white">
-                当前工具 {currentModeLabel}
-              </span>
-              <span className="rounded-full bg-zinc-100 px-2.5 py-1.5 text-[11px] text-zinc-600">
-                {currentModeDescription}
-              </span>
-            </div>
+          <div className="mt-4 flex flex-col gap-2.5 sm:flex-row sm:items-end sm:justify-end">
             <div className="flex items-center gap-2">
               <Button
-                className="h-9 shrink-0 rounded-full bg-black px-4 font-medium text-white hover:bg-black/90"
+                className="h-9 shrink-0 rounded-full bg-primary px-4 font-medium text-primary-foreground hover:bg-primary/90"
                 disabled={status === "connecting"}
                 onClick={triggerGenerate}
                 size="sm"