feat: add refresh button to browser and anim panes (iframe remount reload)

01_content/src/client/locales.ts

@@ -63,6 +63,7 @@ export const zh = {
   'pane.terminal': '终端',
   'pane.custom': '自定义',
   'pane.anim': '动画',
+  'pane.refresh': '刷新',
   'pane.animUrlPh': '粘贴动画站点地址后回车',
   'custom.title': '自定义这个窗口',
   'custom.hint': '发送后将自动新建一个会话，专门负责这个窗口的自定义设计。',
@@ -196,6 +197,7 @@ export const en = {
   'pane.terminal': 'Terminal',
   'pane.custom': 'Custom',
   'pane.anim': 'Animation',
+  'pane.refresh': 'Refresh',
   'pane.animUrlPh': 'Paste the animation site URL and press Enter',
   'custom.title': 'Customize this pane',
   'custom.hint': 'Sending will create a new conversation dedicated to designing this pane.',

01_content/src/client/split.tsx

@@ -864,10 +864,11 @@ function makeDividerHandler(kind: 'left' | 'chat' | 'top' | 'pane' | 'topPane',
   }
 }
 
-/** 浏览器内置窗：地址栏 + iframe */
+/** 浏览器内置窗：地址栏 + 刷新 + iframe（刷新 = 重新挂载 iframe，跨域也可靠） */
 function BrowserPane() {
   const [url, setUrl] = useState('https://example.com')
   const [src, setSrc] = useState('https://example.com')
+  const [reloadKey, setReloadKey] = useState(0)
   const go = () => {
     const u = url.trim()
     setSrc(/^(\/|https?:\/\/)/i.test(u) ? u : 'about:blank')
@@ -882,9 +883,10 @@ function BrowserPane() {
           onChange={(e) => setUrl(e.target.value)}
           onKeyDown={(e) => { if (e.key === 'Enter') go() }}
         />
+        <button type="button" className="dsh-wt_browserGo" title={T('pane.refresh')} aria-label={T('pane.refresh')} onClick={() => setReloadKey((k) => k + 1)}>↻</button>
         <button type="button" className="dsh-wt_browserGo" onClick={go}>↗</button>
       </div>
-      <iframe className="dsh-wt_paneFrame" src={src} title="browser" />
+      <iframe key={reloadKey} className="dsh-wt_paneFrame" src={src} title="browser" />
     </>
   )
 }
@@ -893,6 +895,7 @@ function BrowserPane() {
 function AnimPane() {
   const [url, setUrl] = useState('')
   const [src, setSrc] = useState('about:blank')
+  const [reloadKey, setReloadKey] = useState(0)
   const go = () => {
     const u = url.trim()
     setSrc(/^(\/|https?:\/\/)/i.test(u) ? u : 'about:blank')
@@ -907,9 +910,10 @@ function AnimPane() {
           onChange={(e) => setUrl(e.target.value)}
           onKeyDown={(e) => { if (e.key === 'Enter') go() }}
         />
+        <button type="button" className="dsh-wt_browserGo" title={T('pane.refresh')} aria-label={T('pane.refresh')} onClick={() => setReloadKey((k) => k + 1)}>↻</button>
         <button type="button" className="dsh-wt_browserGo" onClick={go}>↗</button>
       </div>
-      <iframe className="dsh-wt_paneFrame" src={src} title="anim" />
+      <iframe key={reloadKey} className="dsh-wt_paneFrame" src={src} title="anim" />
     </>
   )
 }

02_process/worklogs/2026-08-16_worktable-v2.md

@@ -1067,6 +1067,16 @@
   reopenKeepsLock=true ✓；functional-diag 全 20 STEP ERROR_COUNT: 0。
 - 备注：纯客户端改动，F5 即生效；夹具目录已清理。
 
+## 补记（浏览器/动画窗加刷新按钮）
+
+- 用户反馈：浏览器窗缺刷新按钮。
+- 实现：BrowserPane 与 AnimPane 地址栏在 ↗ 前加 ↻（title/aria=刷新）；刷新 = reloadKey 递增
+  重新挂载 iframe（React key 重挂载，跨域页面也能可靠整页刷新，不受 iframe 跨域限制）。
+- 验证（probe-refresh.cjs）：按钮 2 个（↻刷新 + ↗）✓；点击后 iframe 元素身份变化
+  （remounted=true）✓；functional-diag 全 20 STEP ERROR_COUNT: 0。
+- 备注：纯客户端改动，F5 即生效。
+
+
 
 
 

04_test/probe-refresh.cjs

@@ -0,0 +1,63 @@
+// probe-refresh.cjs — 浏览器窗刷新按钮：点击后 iframe 重新挂载（元素身份变化）
+const http = require('http');
+const { spawn } = require('child_process');
+const WebSocket = require('ws');
+const PORT = 9369;
+const proc = spawn('C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe', [
+  '--headless=new', '--disable-gpu', '--no-first-run', '--no-default-browser-check',
+  '--window-size=1440,900', '--force-device-scale-factor=1',
+  '--remote-debugging-port=' + PORT,
+  '--user-data-dir=C:\\Users\\SJL\\AppData\\Local\\Temp\\wt-chrome-refresh',
+  'about:blank',
+], { stdio: 'ignore' });
+const getJSON = (p) => new Promise((res, rej) => {
+  http.get({ host: '127.0.0.1', port: PORT, path: p }, (r) => { let d=''; r.on('data',c=>d+=c); r.on('end',()=>{try{res(JSON.parse(d))}catch(e){rej(e)}}) }).on('error', rej);
+});
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+(async () => {
+  let list = null;
+  for (let i = 0; i < 40; i++) { try { list = await getJSON('/json/list'); if (list && list.length) break; } catch {} await sleep(500); }
+  const target = list.find((t) => t.type === 'page') || list[0];
+  const ws = new WebSocket(target.webSocketDebuggerUrl);
+  let id = 0; const pending = new Map();
+  const send = (method, params) => new Promise((res) => { const mid = ++id; pending.set(mid, res); ws.send(JSON.stringify({ id: mid, method, params })); });
+  ws.on('message', (raw) => { const m = JSON.parse(String(raw)); if (m.id && pending.has(m.id)) { pending.get(m.id)(m); pending.delete(m.id); } });
+  await new Promise((r) => ws.on('open', r));
+  await send('Runtime.enable');
+  await send('Page.enable');
+  await send('Page.navigate', { url: 'http://127.0.0.1:3080/' });
+  const evaluate = async (expr) => {
+    const r = await send('Runtime.evaluate', { expression: expr, returnByValue: true, awaitPromise: true });
+    if (r.result && r.result.exceptionDetails) return { __error: (r.result.exceptionDetails.exception || {}).description || r.result.exceptionDetails.text };
+    return r.result && r.result.result ? r.result.result.value : undefined;
+  };
+  let ready = null;
+  for (let i = 0; i < 30; i++) { await sleep(1000); ready = await evaluate("!!window.__dshWorktable"); if (ready === true) break; }
+  await sleep(1200);
+  const step = await evaluate(`(async function(){
+    var out = {};
+    var sleep = function(ms){ return new Promise(function(r){ setTimeout(r, ms); }); };
+    var st = window.__dshWorktable.splitStore;
+    st.open({id:'t-br',title:'b',top:null,main:[{id:'p1',title:'W',min:200,content:null}],chatWidth:{default:320,min:240,max:600}});
+    await sleep(600);
+    st.openTab('main', 0, { kind: 'builtin', type: 'browser' });
+    await sleep(900);
+    var bars = document.querySelectorAll('.dsh-wt_browserBar');
+    out.barCount = bars.length;
+    var btns = [].slice.call(document.querySelectorAll('.dsh-wt_browserBar .dsh-wt_browserGo'));
+    out.btnCount = btns.length;
+    out.btnTitles = btns.map(function(b){ return b.getAttribute('title'); });
+    var f1 = document.querySelector('.dsh-wt_paneFrame');
+    out.frameBefore = f1 ? f1.src.slice(0, 40) : null;
+    var refreshBtn = btns.find(function(b){ return b.textContent.indexOf('\u21bb') >= 0 || b.textContent.indexOf('\u27f3') >= 0; });
+    if (refreshBtn) { refreshBtn.click(); }
+    await sleep(700);
+    var f2 = document.querySelector('.dsh-wt_paneFrame');
+    out.remounted = f1 !== f2;
+    out.frameAfter = f2 ? f2.src.slice(0, 40) : null;
+    st.close();
+    return JSON.stringify(out);
+  })()`);
+  console.log('REFRESH:', JSON.stringify(step));
+  ws.close(); proc.kill(); process.exit(0);
+})().catch((e) => { console.error('FATAL', e && e.stack || e); try { proc.kill(); } catch {} process.exit(1); });