diff --git a/.memory/worklog.json b/.memory/worklog.json
index 95821e2..dc53248 100644
--- a/.memory/worklog.json
+++ b/.memory/worklog.json
@@ -3076,6 +3076,19 @@
       "type": "session-heartbeat",
       "message": "Claude 会话活跃 · 最近命令：claude · 3 项未提交变更 · 最近提交：auto-save 2026-05-14 03:31 (~4)",
       "files_changed": 3
+    },
+    {
+      "ts": "2026-05-14T03:37:19+08:00",
+      "type": "commit",
+      "message": "auto-save 2026-05-14 03:37 (~5)",
+      "hash": "26a43fc",
+      "files_changed": 5
+    },
+    {
+      "ts": "2026-05-13T19:38:49Z",
+      "type": "session-heartbeat",
+      "message": "Codex 会话活跃 · 最近命令：codex · 1 项未提交变更 · 最近提交：auto-save 2026-05-14 03:37 (~5)",
+      "files_changed": 1
     }
   ]
 }
diff --git a/docs/source-analysis.html b/docs/source-analysis.html
index 26ac2f1..5e24d79 100644
--- a/docs/source-analysis.html
+++ b/docs/source-analysis.html
@@ -817,6 +817,30 @@ api/main.py
         <h2>变更记录</h2>
         <p>这个记录不是 git log 的替代品。它记录“产品理解发生了什么变化、影响了哪些源码、你以后描述需求时该怎么说”。后续每次改功能都要补一条。</p>
         <div class="changelog">
+          <article class="change">
+            <header>
+              <h3>2026-05-14 · 视频抽帧面板默认静音播放</h3>
+              <span class="tag violet">Input</span>
+              <span class="tag blue">Video</span>
+            </header>
+            <div class="body">
+              <p><strong>问题：</strong>输入视频缩略图改为单击打开抽帧面板后，面板播放器如果自动播放带声音，会打断工作流。</p>
+              <p><strong>改动：</strong><code>VideoFramePanelNode</code> 的主播放器增加 <code>muted</code>，默认静音自动播放；用户仍可通过浏览器视频 controls 自行取消静音。</p>
+              <p><strong>影响：</strong><code>web/components/nodes/index.tsx</code>、<code>docs/source-analysis.html</code>。</p>
+            </div>
+          </article>
+          <article class="change">
+            <header>
+              <h3>2026-05-14 · Canvas Panel 颜色跟随来源卡片且视频单击打开</h3>
+              <span class="tag violet">Canvas Panel</span>
+              <span class="tag blue">UX</span>
+            </header>
+            <div class="body">
+              <p><strong>问题：</strong>视频抽帧面板和画面工作台详情面板框架一致后，标题栏颜色也需要分别跟各自来源卡片一致；输入视频缩略图仍需要双击才能打开抽帧面板，操作偏重。</p>
+              <p><strong>改动：</strong>视频抽帧面板标题栏使用 <code>--grad-input</code>，画面工作台详情面板标题栏使用 <code>--grad-ai</code>；输入视频缩略图改为单击打开抽帧面板，hover 仍负责尺寸预览。</p>
+              <p><strong>影响：</strong><code>web/components/nodes/index.tsx</code>、<code>docs/source-analysis.html</code>。后续面板颜色应从来源卡片类型继承。</p>
+            </div>
+          </article>
           <article class="change">
             <header>
               <h3>2026-05-14 · 画面工作台详情面板统一为 Canvas Panel 框架</h3>
diff --git a/web/components/nodes/index.tsx b/web/components/nodes/index.tsx
index 8909e23..caeff2f 100644
--- a/web/components/nodes/index.tsx
+++ b/web/components/nodes/index.tsx
@@ -458,10 +458,10 @@ export function InputNode({ data, selected }: NodeProps<{ data: NodeData }> | an
                   type="button"
                   onClick={(e) => {
                     e.stopPropagation()
-                    // 单击：钉住 / 取消钉住大预览 + 切换 active（若需要）
-                    const anchor = canvasThumbnailAnchor(rootRef.current, e.currentTarget)
-                    setPinnedPreviewJob((prev) => (prev?.id === j.id ? null : { id: j.id, ...anchor }))
-                    if (!isActive && ready) d.onSwitchJob(j.id)
+                    if (!ready) return
+                    setPinnedPreviewJob(null)
+                    if (!isActive) d.onSwitchJob(j.id)
+                    d.onOpenVideoPanel?.(j.id)
                   }}
                   onDoubleClick={(e) => {
                     e.stopPropagation()
@@ -471,7 +471,7 @@ export function InputNode({ data, selected }: NodeProps<{ data: NodeData }> | an
                       d.onOpenVideoPanel?.(j.id)
                     }
                   }}
-                  title={ready ? `${j.width}×${j.height} · ${(j.duration ?? 0).toFixed(1)}s · 单击钉住大预览 · 双击打开抽帧面板` : "下载中…"}
+                  title={ready ? `${j.width}×${j.height} · ${(j.duration ?? 0).toFixed(1)}s · 单击打开抽帧面板` : "下载中…"}
                   className="absolute inset-0 w-full h-full overflow-hidden rounded-md"
                 >
                   {ready ? (
@@ -747,7 +747,10 @@ export function VideoFramePanelNode({ data }: any) {
         boxShadow: "0 30px 80px -20px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.05)",
       }}
     >
-      <div className={`video-frame-panel-drag flex h-7 items-center justify-between bg-gradient-to-r from-indigo-500 to-violet-500 px-3 text-white ${docked ? "cursor-default" : "cursor-move"}`}>
+      <div
+        className={`video-frame-panel-drag flex h-7 items-center justify-between px-3 text-white ${docked ? "cursor-default" : "cursor-move"}`}
+        style={{ background: "var(--grad-input)" }}
+      >
         <div className="flex min-w-0 items-center gap-2">
           <FileVideo className="h-3.5 w-3.5 shrink-0" />
           <span className="truncate text-[12px] font-semibold">视频抽帧 · Input</span>
@@ -792,6 +795,7 @@ export function VideoFramePanelNode({ data }: any) {
             src={videoUrl(panelJob.id)}
             controls
             autoPlay
+            muted
             playsInline
             preload="auto"
             onTimeUpdate={(e) => setCurrentT((e.target as HTMLVideoElement).currentTime)}
@@ -1583,7 +1587,10 @@ export function KeyframePanelNode({ data }: any) {
         boxShadow: "0 30px 80px -20px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.05)",
       }}
     >
-      <div className={`keyframe-panel-drag flex h-7 items-center justify-between bg-gradient-to-r from-indigo-500 to-violet-500 px-3 text-white ${docked ? "cursor-default" : "cursor-move"}`}>
+      <div
+        className={`keyframe-panel-drag flex h-7 items-center justify-between px-3 text-white ${docked ? "cursor-default" : "cursor-move"}`}
+        style={{ background: "var(--grad-ai)" }}
+      >
         <div className="flex min-w-0 items-center gap-2">
           <ImageIcon className="h-3.5 w-3.5 shrink-0" />
           <span className="truncate text-[12px] font-semibold">关键帧详情 · 元素提取</span>
@@ -1687,7 +1694,7 @@ export function KeyframePanelNode({ data }: any) {
       <button
         type="button"
         onPointerDown={startResize}
-        className="nodrag absolute bottom-0 right-0 z-[5] h-7 w-7 cursor-nwse-resize rounded-tl-md bg-white/10 text-white/65 hover:bg-violet-400/35 hover:text-white inline-flex items-center justify-center"
+        className="nodrag absolute bottom-0 right-0 z-[5] h-7 w-7 cursor-nwse-resize rounded-tl-md bg-white/10 text-white/65 hover:bg-pink-400/35 hover:text-white inline-flex items-center justify-center"
         title="拖动右下角缩放面板"
       >
         <Maximize2 className="h-3.5 w-3.5" />