diff --git a/components/canvas/RealtimeCanvasDialog.tsx b/components/canvas/RealtimeCanvasDialog.tsx
index 532c84d0a..0aa1b5795 100644
--- a/components/canvas/RealtimeCanvasDialog.tsx
+++ b/components/canvas/RealtimeCanvasDialog.tsx
@@ -703,6 +703,8 @@ export function RealtimeCanvasDialog({
     defaultRealtimeConfig.transport.throttleInterval
   );
   const [refreshToken, setRefreshToken] = useState(0);
+  const [siteName, setSiteName] = useState("AI Chatbot");
+  const [siteLogo, setSiteLogo] = useState<string | null>(null);
 
   const statusBadge = useMemo(() => {
     if (status === "live") return { label: "实时中", className: "bg-emerald-50 text-emerald-700" };
@@ -723,6 +725,31 @@ export function RealtimeCanvasDialog({
     return selectedImageLayer.width / baseWidth;
   }, [selectedImageLayer]);
 
+  useEffect(() => {
+    let cancelled = false;
+
+    fetch(`/api/site-settings?t=${Date.now()}`, { cache: "no-store" })
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data) => {
+        if (!data || cancelled) return;
+        if (typeof data.siteName === "string" && data.siteName.trim()) {
+          setSiteName(data.siteName.trim());
+        }
+        if (typeof data.siteLogo === "string" && data.siteLogo.trim()) {
+          setSiteLogo(data.siteLogo.trim());
+        } else if (typeof data.siteLogoDark === "string" && data.siteLogoDark.trim()) {
+          setSiteLogo(data.siteLogoDark.trim());
+        }
+      })
+      .catch((error) => {
+        console.warn("[RealtimeCanvas] Failed to load site settings:", error);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
   const pushMetric = useCallback((event: any) => {
     metricsQueueRef.current.push(event);
     if (metricsQueueRef.current.length > 120) {
@@ -2257,7 +2284,22 @@ export function RealtimeCanvasDialog({
           <div className="pointer-events-auto rounded-[24px] border border-black/10 bg-white/98 shadow-[0_12px_36px_rgba(15,23,42,0.1)]">
             <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-black/10 bg-zinc-50 px-3">
-                <span className="text-sm font-semibold text-zinc-900">Realtime Canvas</span>
+                <div className="flex items-center gap-2 pr-1">
+                  {siteLogo ? (
+                    <img
+                      src={/^https?:\/\//i.test(siteLogo) ? buildImageProxyUrl(siteLogo) : siteLogo}
+                      alt={siteName}
+                      className="h-5 w-5 rounded object-contain"
+                    />
+                  ) : (
+                    <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 text-sm font-semibold text-zinc-900">
+                    {siteName}
+                  </span>
+                </div>
                 <span
                   className={cn(
                     "flex items-center gap-1.5 rounded-full px-2 py-1 text-xs font-medium",
@@ -2284,36 +2326,36 @@ export function RealtimeCanvasDialog({
               <div className="flex h-10 shrink-0 items-center gap-0.5 rounded-full border border-black/10 bg-white px-1">
                 <Button
                   type="button"
-                  size="sm"
+                  size="icon"
                   variant="ghost"
-                  className="h-8 rounded-full px-2.5 text-xs"
+                  className="h-8 w-8 rounded-full"
                   onClick={() => void saveCurrentProject()}
+                  title="保存项目"
                 >
-                  <Save className="mr-1.5 h-3.5 w-3.5" />
-                  保存项目
+                  <Save className="h-4 w-4" />
                 </Button>
                 <Button
                   type="button"
-                  size="sm"
+                  size="icon"
                   variant="ghost"
-                  className="h-8 rounded-full px-2.5 text-xs"
+                  className="h-8 w-8 rounded-full"
                   onClick={() => {
                     refreshSavedProjects();
                     setProjectPanelOpen((openState) => !openState);
                   }}
+                  title="项目列表"
                 >
-                  <FolderOpen className="mr-1.5 h-3.5 w-3.5" />
-                  项目列表
+                  <FolderOpen className="h-4 w-4" />
                 </Button>
                 <Button
                   type="button"
-                  size="sm"
+                  size="icon"
                   variant="ghost"
-                  className="h-8 rounded-full px-2.5 text-xs"
+                  className="h-8 w-8 rounded-full"
                   onClick={startBlankProject}
+                  title="新建空白"
                 >
-                  <Plus className="mr-1.5 h-3.5 w-3.5" />
-                  新建空白
+                  <Plus className="h-4 w-4" />
                 </Button>
                 {standalone ? (
                   <Button
@@ -2648,40 +2690,34 @@ export function RealtimeCanvasDialog({
                     />
                 </div>
              </div>
-             <div className="absolute left-3 top-28 bottom-4 z-10 flex w-[11.75rem] max-w-[38vw] flex-col rounded-[20px] border border-black/10 bg-white/96 p-3 shadow-xl">
-                <div className="flex items-center justify-between border-b border-black/10 pb-3">
-                  <div className="flex items-center gap-2 text-sm font-semibold text-zinc-900">
+             <div className="absolute left-3 top-28 bottom-4 z-10 flex w-[4.9rem] max-w-[20vw] flex-col rounded-[20px] border border-black/10 bg-white/96 p-2 shadow-xl">
+                <div className="flex items-center justify-between border-b border-black/10 pb-2">
+                  <div className="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-50 text-zinc-900">
                     <Layers3 className="h-4 w-4" />
-                    图层
                   </div>
-                  <span className="rounded-full bg-zinc-100 px-2 py-0.5 text-[11px] text-zinc-500">
+                  <span className="rounded-full bg-zinc-100 px-1.5 py-0.5 text-[10px] text-zinc-500">
                     {imageLayers.length} 张
                   </span>
                 </div>
-                <div className="mt-3 flex-1 space-y-2 overflow-y-auto pr-1">
+                <div className="mt-2 flex-1 space-y-2 overflow-y-auto pr-0.5">
                   <button
                     type="button"
                     className={cn(
-                      "w-full rounded-2xl border px-3 py-2 text-left transition",
+                      "flex w-full flex-col items-center gap-1 rounded-2xl border px-1.5 py-2 text-center transition",
                       selectedLayerId === DRAW_LAYER_ID
                         ? "border-black/20 bg-zinc-900 text-white shadow-sm"
                         : "border-dashed border-black/10 bg-zinc-50 text-zinc-900 hover:bg-zinc-100"
                     )}
                     onClick={() => setSelectedLayerId(DRAW_LAYER_ID)}
                   >
-                    <div className="text-[11px] font-medium text-zinc-600">画笔图层</div>
-                    <div
-                      className={cn(
-                        "mt-1 text-[11px]",
-                        selectedLayerId === DRAW_LAYER_ID ? "text-zinc-300" : "text-zinc-400"
-                      )}
-                    >
-                      固定在最上层，适合标注和结构草绘
+                    <Paintbrush className={cn("h-4 w-4", selectedLayerId === DRAW_LAYER_ID ? "text-white" : "text-zinc-700")} />
+                    <div className={cn("text-[10px] font-medium", selectedLayerId === DRAW_LAYER_ID ? "text-white" : "text-zinc-600")}>
+                      画笔
                     </div>
                   </button>
                   {imageLayers.length === 0 ? (
-                    <div className="rounded-2xl border border-dashed border-black/10 px-3 py-4 text-center text-xs text-zinc-400">
-                      暂无图片图层
+                    <div className="rounded-2xl border border-dashed border-black/10 px-1 py-4 text-center text-[10px] leading-4 text-zinc-400">
+                      暂无图层
                     </div>
                   ) : (
                     [...imageLayers].reverse().map((layer, displayIndex) => {
@@ -2692,60 +2728,64 @@ export function RealtimeCanvasDialog({
                         <div
                           key={layer.id}
                           className={cn(
-                            "rounded-2xl border bg-white px-2.5 py-2 shadow-sm transition",
+                            "rounded-2xl border bg-white px-1.5 py-1.5 shadow-sm transition",
                             selectedLayerId === layer.id
                               ? "border-black/20 ring-2 ring-black/5"
                               : "border-black/10"
                           )}
                         >
-                          <div className="flex items-center gap-2">
+                          <button
+                            type="button"
+                            className="w-full"
+                            onClick={() => setSelectedLayerId(layer.id)}
+                            title={layer.name}
+                          >
                             <img
                               src={/^https?:\/\//i.test(layer.src) ? buildImageProxyUrl(layer.src) : layer.src}
                               alt={layer.name}
-                              className="h-12 w-12 rounded-xl border border-black/10 object-cover"
+                              className="h-11 w-11 rounded-xl border border-black/10 object-cover"
                             />
-                            <div className="min-w-0 flex-1">
-                              <button
-                                type="button"
-                                className="w-full text-left"
-                                onClick={() => setSelectedLayerId(layer.id)}
-                              >
-                                <div className="truncate text-xs font-medium text-zinc-900">{layer.name}</div>
-                              </button>
-                              <div className="mt-1 text-[11px] text-zinc-400">
-                                {isTopMost ? "当前最上层" : isBottomMost ? "当前底层" : "中间图层"}
-                              </div>
-                            </div>
-                            <div className="flex flex-col gap-1">
+                          </button>
+                          <div className="mt-1 flex items-center justify-center gap-0.5">
+                            <Button
+                              size="icon"
+                              variant="ghost"
+                              className="h-5 w-5 rounded-md p-0 text-zinc-500 hover:bg-zinc-100"
+                              onClick={() => setSelectedLayerId(layer.id)}
+                              title={isTopMost ? "当前最上层" : isBottomMost ? "当前底层" : "中间图层"}
+                            >
+                              <div className="h-1.5 w-1.5 rounded-full bg-zinc-400" />
+                            </Button>
+                            <div className="flex flex-col gap-0.5">
                               <Button
                                 size="icon"
                                 variant="ghost"
-                                className="h-7 w-7 rounded-lg text-zinc-500 hover:bg-zinc-100"
+                                className="h-5 w-5 rounded-md p-0 text-zinc-500 hover:bg-zinc-100"
                                 onClick={() => moveImageLayer(layer.id, "up")}
                                 disabled={isTopMost}
                                 title="上移图层"
                               >
-                                <ChevronUp className="h-4 w-4" />
+                                <ChevronUp className="h-3 w-3" />
                               </Button>
                               <Button
                                 size="icon"
                                 variant="ghost"
-                                className="h-7 w-7 rounded-lg text-zinc-500 hover:bg-zinc-100"
+                                className="h-5 w-5 rounded-md p-0 text-zinc-500 hover:bg-zinc-100"
                                 onClick={() => moveImageLayer(layer.id, "down")}
                                 disabled={isBottomMost}
                                 title="下移图层"
                               >
-                                <ChevronDown className="h-4 w-4" />
+                                <ChevronDown className="h-3 w-3" />
                               </Button>
                             </div>
                             <Button
                               size="icon"
                               variant="ghost"
-                              className="h-7 w-7 rounded-lg text-zinc-500 hover:bg-rose-50 hover:text-rose-600"
+                              className="h-5 w-5 rounded-md p-0 text-zinc-500 hover:bg-rose-50 hover:text-rose-600"
                               onClick={() => removeImageLayer(layer.id)}
                               title="删除图层"
                             >
-                              <Trash2 className="h-4 w-4" />
+                              <Trash2 className="h-3 w-3" />
                             </Button>
                           </div>
                         </div>
@@ -2754,17 +2794,16 @@ export function RealtimeCanvasDialog({
                   )}
                 </div>
                 {selectedImageLayer ? (
-                  <div className="mt-3 rounded-2xl border border-black/10 bg-zinc-50 p-3">
-                    <div className="flex items-center justify-between text-xs font-medium text-zinc-700">
-                      <span>图层缩放</span>
-                      <span>{Math.round(selectedImageLayerScale * 100)}%</span>
+                  <div className="mt-2 rounded-2xl border border-black/10 bg-zinc-50 p-1.5">
+                    <div className="text-center text-[10px] font-medium text-zinc-700">
+                      {Math.round(selectedImageLayerScale * 100)}%
                     </div>
-                    <div className="mt-3 flex items-center gap-2">
+                    <div className="mt-1 flex items-center justify-center gap-1">
                       <Button
                         type="button"
                         size="icon"
                         variant="ghost"
-                        className="h-8 w-8 rounded-full"
+                        className="h-6 w-6 rounded-full"
                         onClick={() => {
                           const nextLayers = scaleImageLayer(
                             selectedImageLayer.id,
@@ -2777,34 +2816,13 @@ export function RealtimeCanvasDialog({
                           }
                         }}
                       >
-                        <span className="text-base leading-none">-</span>
+                        <span className="text-sm leading-none">-</span>
                       </Button>
-                      <Slider
-                        value={[Math.round(selectedImageLayerScale * 100)]}
-                        min={20}
-                        max={300}
-                        step={5}
-                        onValueChange={([value]) => {
-                          scaleImageLayer(selectedImageLayer.id, value / 100);
-                        }}
-                        onValueCommit={([value]) => {
-                          const nextLayers = scaleImageLayer(selectedImageLayer.id, value / 100);
-                          if (nextLayers) {
-                            saveHistory(nextLayers);
-                            markCanvasDirty(null);
-                            scheduleFlush(true);
-                          }
-                        }}
-                        className="flex-1"
-                        trackClassName="h-2.5 bg-zinc-200 shadow-inner"
-                        rangeClassName="bg-sky-500"
-                        thumbClassName="h-5 w-5 border border-zinc-300 bg-white shadow-sm"
-                      />
                       <Button
                         type="button"
                         size="icon"
                         variant="ghost"
-                        className="h-8 w-8 rounded-full"
+                        className="h-6 w-6 rounded-full"
                         onClick={() => {
                           const nextLayers = scaleImageLayer(
                             selectedImageLayer.id,
@@ -2817,7 +2835,7 @@ export function RealtimeCanvasDialog({
                           }
                         }}
                       >
-                        <span className="text-base leading-none">+</span>
+                        <span className="text-sm leading-none">+</span>
                       </Button>
                     </div>
                   </div>
@@ -2825,11 +2843,11 @@ export function RealtimeCanvasDialog({
                 <Button
                   type="button"
                   variant="outline"
-                  className="mt-3 h-10 rounded-xl bg-white"
+                  className="mt-2 h-10 rounded-xl bg-white px-0"
                   onClick={() => uploadInputRef.current?.click()}
+                  title="添加图片图层"
                 >
-                  <Upload className="mr-2 h-4 w-4" />
-                  添加图片图层
+                  <Upload className="h-4 w-4" />
                 </Button>
              </div>
           </div>