opencode-session-turns 0.1.1 → 0.1.3

package/README.md

@@ -20,8 +20,11 @@ click a turn to jump straight to that message.
 ## 功能
 
 - 列出当前会话的每一轮用户提问（从会话消息接口分页拉取，`type=user`）。
-- 鼠标移到窗口右缘的细条上自动展开，移开自动收起。
+- 鼠标移到窗口右缘的细条上自动展开，移开自动收起；长历史跳转期间面板保持展开。
 - 点击任意一轮，**跳转到对应消息**——包括很久以前、尚未渲染的历史轮次。
+- 深历史需要逐页加载时，头部实时显示「跳转中 · 第 N 页」，目标轮次琥珀色脉冲，
+  底部状态条同步提示；按 `Esc` 或点 × 可随时取消。
+- 定位成功后精准描边闪烁**那一条用户气泡**（跟随气泡自身圆角 + 柔光），不再整行填色。
 - 自动高亮当前视口所在的轮次。
 - 斜杠命令 `/turns`、快捷键 `⌘⌥R`（Windows/Linux 为 `Ctrl+Alt+R`）展开轮次条。
 
@@ -62,6 +65,8 @@ OpenCode Desktop 2.2.6 有几个必须绕开的陷阱：
    `window.location`。
 3. 宿主每次 seek 只向前加载**约一页（~5 轮）**历史，所以插件会交替把 hash 指向
    「已加载的最早一轮」和目标，逐页把历史翻出来，直到目标行挂载。
+   每一轮监听行集合指纹，宿主一旦翻入新一页就立即进入下一轮（不再固定等待），
+   并在面板头部显示页码进度；总预算 45 秒，`Esc` 可取消。
 
 已挂载的行则直接用本地滚动，瞬时定位。
 

package/dist/gui-experimental.cjs

@@ -1,29 +1,85 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("solid-js/web"),h=require("@opencode/plugin/gui"),a=require("solid-js");var Z=s.template("<div class=sr-status>"),tt=s.template("<div class=sr-rail>"),et=s.template("<div class=sr-note>"),nt=s.template("<button type=button class=sr-turn><span class=sr-text> </span><span class=sr-dash>");const C="v10",B="message-",_="session-turns:diag",A="session-turns:open";let F=0,j="",I="";const rt=n=>{const e=String(n?.text??"").split(`
-`).map(d=>d.trim()).find(d=>d.length>0);if(e)return e;const o=n?.files?.length??0;return o>0?`[附件 ×${o}]`:"(空消息)"},N=n=>String(n).padStart(2,"0"),st=n=>{const e=new Date(n??0);return`${N(e.getHours())}:${N(e.getMinutes())}`},z=n=>new Promise(e=>setTimeout(e,n)),x=()=>document.querySelector('[data-slot="session-timeline-scroll"] > .scroll-view__viewport')??document.querySelector('[data-slot="session-timeline-scroll"] [data-scrollable]')??(()=>{let e=document.querySelector("[data-message-id]")?.parentElement;for(;e;){const o=getComputedStyle(e);if(/(auto|scroll)/.test(o.overflowY)&&e.scrollHeight>e.clientHeight+1)return e;e=e.parentElement}})(),y=n=>document.getElementById(`${B}${n}`)??[...document.querySelectorAll("[data-message-id]")].find(e=>e.getAttribute("data-message-id")===n),T=n=>{const e=x(),o=[...document.querySelectorAll("[data-message-id]")],d=o[0]?.getAttribute("data-message-id")??"",$=I?` · 目标 ${y(I)?"在":"不在"} DOM`:"",v=d?` · 行ID ${d.slice(0,20)}`:"";let w="(空)";try{w=n.router.path()||"(空)"}catch{}return`轮次 ${F} · 容器 ${e?"OK":"缺失"} · DOM ${o.length} 行${$}${v} · 路由 ${w} · hash ${window.location.hash||"(空)"}${j?` · ${j}`:""}`},V=(n,e)=>{e.scrollIntoView({block:"start"});const o=n.querySelector("[data-session-title]"),d=o instanceof HTMLElement?o.offsetHeight:0;d&&(n.scrollTop-=d+12)},ot=n=>{let e="";try{e=n.router.path()||""}catch{}return e.startsWith("/")?e:""},at=n=>{const e=document.createElement("a");e.setAttribute("href",n),e.setAttribute("replace",""),e.setAttribute("noscroll",""),e.style.display="none",document.body.appendChild(e);try{e.dispatchEvent(new MouseEvent("click",{bubbles:!0,cancelable:!0,button:0,view:window}))}finally{e.remove()}},it=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("solid-js/web"),A=require("@opencode/plugin/gui"),i=require("solid-js");var Lt=a.template("<div class=sr-status>"),It=a.template('<span class="sr-title sr-progress">跳转中'),Mt=a.template("<div class=sr-rail><div class=sr-head><button type=button class=sr-close>×</button></div><div class=sr-list>"),Pt=a.template("<span class=sr-title>会话轮次"),Dt=a.template("<div class=sr-note>"),jt=a.template("<button type=button class=sr-turn><span class=sr-text><span class=sr-num>#</span><span class=sr-time></span></span><span class=sr-dash>");const G="v12",wt="message-",ht="session-turns:diag",Y="session-turns:open",qt=40,Rt=200,Ot=50,Jt=120,V=45e3,Nt=4e3,zt=300,Ft=800;let xt=0,Z="",X="";const gt=o=>{const n=String(o?.text??"").split(`
+`).map(g=>g.trim()).find(g=>g.length>0);if(n)return n;const f=o?.files?.length??0;return f>0?`[附件 ×${f}]`:"(空消息)"},mt=o=>String(o).padStart(2,"0"),Ht=o=>{const n=new Date(o??0);return`${mt(n.getHours())}:${mt(n.getMinutes())}`},bt=o=>new Promise(n=>setTimeout(n,o)),vt=()=>document.querySelector('[data-slot="session-timeline-scroll"] > .scroll-view__viewport')??document.querySelector('[data-slot="session-timeline-scroll"] [data-scrollable]')??(()=>{let n=document.querySelector("[data-message-id]")?.parentElement;for(;n;){const f=getComputedStyle(n);if(/(auto|scroll)/.test(f.overflowY)&&n.scrollHeight>n.clientHeight+1)return n;n=n.parentElement}})(),$=o=>document.getElementById(`${wt}${o}`)??[...document.querySelectorAll("[data-message-id]")].find(n=>n.getAttribute("data-message-id")===o),W=o=>{const n=vt(),f=[...document.querySelectorAll("[data-message-id]")],g=f[0]?.getAttribute("data-message-id")??"",j=X?` · 目标 ${$(X)?"在":"不在"} DOM`:"",C=g?` · 行ID ${g.slice(0,20)}`:"";let E="(空)";try{E=o.router.path()||"(空)"}catch{}return`轮次 ${xt} · 容器 ${n?"OK":"缺失"} · DOM ${f.length} 行${j}${C} · 路由 ${E} · hash ${window.location.hash||"(空)"}${Z?` · ${Z}`:""}`},K=(o,n)=>{n.scrollIntoView({block:"start"});const f=o.querySelector("[data-session-title]"),g=f instanceof HTMLElement?f.offsetHeight:0;g&&(o.scrollTop-=g+12)},Ut=o=>{let n="";try{n=o.router.path()||""}catch{}return n.startsWith("/")?n:""},Bt=o=>{const n=document.createElement("a");n.setAttribute("href",o),n.setAttribute("replace",""),n.setAttribute("noscroll",""),n.style.display="none",document.body.appendChild(n);try{n.dispatchEvent(new MouseEvent("click",{bubbles:!0,cancelable:!0,button:0,view:window}))}finally{n.remove()}},Gt=`
 .sr-rail {
   position: fixed;
   top: 50%;
   transform: translateY(-50%);
-  right: 10px;
-  max-height: 60vh;
-  width: 14px;
+  right: 14px;
+  max-height: 66vh;
+  width: 16px;
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
   justify-content: center;
-  gap: 2px;
-  padding: 8px 4px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  scrollbar-width: none;
+  padding: 6px 2px;
+  overflow: hidden;
   z-index: 400;
   border-radius: 10px;
+  border: 1px solid transparent;
   color: var(--text-base, currentColor);
   background: transparent;
-  transition: width .18s ease;
+  transition: width .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
+}
+.sr-rail[data-open="true"] {
+  width: 340px;
+  padding: 10px;
+  justify-content: flex-start;
+  background: var(--surface-base, rgba(24,24,26,.86));
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-color: rgba(127,127,127,.25);
+  box-shadow: 0 8px 32px rgba(0,0,0,.28);
+}
+.sr-head {
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 2px 8px;
+  margin-bottom: 6px;
+  border-bottom: 1px solid rgba(127,127,127,.2);
+  flex-shrink: 0;
+}
+.sr-rail[data-open="true"] .sr-head { display: flex; }
+.sr-title { font-size: 12px; opacity: .6; white-space: nowrap; }
+.sr-title.sr-progress {
+  opacity: .95;
+  color: rgba(255,170,60,.95);
+  font-variant-numeric: tabular-nums;
+}
+.sr-close {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  line-height: 1;
+  padding: 2px 7px;
+  border-radius: 4px;
+  cursor: pointer;
+  opacity: .5;
+  flex-shrink: 0;
+}
+.sr-close:hover { opacity: 1; background: var(--surface-base-hover, rgba(127,127,127,.14)); }
+/* the scrollable list; the header stays fixed above it */
+.sr-list {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+}
+.sr-rail[data-open="true"] .sr-list { justify-content: flex-start; gap: 1px; scrollbar-width: thin; }
+.sr-list::-webkit-scrollbar { display: none; }
+.sr-rail[data-open="true"] .sr-list::-webkit-scrollbar { display: block; width: 8px; }
+.sr-list::-webkit-scrollbar-track { background: transparent; }
+.sr-rail[data-open="true"] .sr-list::-webkit-scrollbar-thumb {
+  background: rgba(127,127,127,.35);
+  border-radius: 4px;
 }
-.sr-rail::-webkit-scrollbar { display: none; }
-.sr-rail[data-open="true"] { width: 360px; background: transparent; }
 .sr-turn {
   display: flex;
   align-items: center;
@@ -39,6 +95,16 @@
   font: inherit;
   border-radius: 4px;
 }
+/* expanded: dash flips to a left-side indicator, content reads left-to-right */
+.sr-rail[data-open="true"] .sr-turn {
+  flex-direction: row-reverse;
+  justify-content: flex-start;
+  gap: 9px;
+  padding: 5px 8px;
+  min-height: 0;
+  border-radius: 6px;
+}
+.sr-turn:focus-visible, .sr-close:focus-visible { outline: 1px solid currentColor; outline-offset: -1px; }
 .sr-dash {
   display: block;
   width: 10px;
@@ -47,10 +113,13 @@
   background: currentColor;
   opacity: .28;
   flex-shrink: 0;
-  transition: opacity .12s ease, width .12s ease;
+  transition: opacity .12s ease, width .12s ease, height .12s ease;
 }
 .sr-turn:hover .sr-dash,
 .sr-turn[data-active="true"] .sr-dash { opacity: .95; width: 18px; }
+.sr-rail[data-open="true"] .sr-dash { width: 3px; height: 16px; }
+.sr-rail[data-open="true"] .sr-turn:hover .sr-dash,
+.sr-rail[data-open="true"] .sr-turn[data-active="true"] .sr-dash { width: 3px; height: 22px; }
 .sr-text {
   display: none;
   margin-right: 10px;
@@ -66,16 +135,71 @@
   opacity: .45;
   background: transparent;
 }
-.sr-rail[data-open="true"] .sr-text { display: block; }
-.sr-turn:hover .sr-text {
-  opacity: 1;
-  background: var(--surface-base-hover, rgba(127,127,127,.14));
+.sr-rail[data-open="true"] .sr-text {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+  white-space: normal;
+  line-height: 1.45;
+  max-width: none;
+  opacity: .8;
+}
+.sr-num, .sr-time {
+  opacity: .55;
+  margin-right: 6px;
+  font-variant-numeric: tabular-nums;
 }
-.sr-turn[data-active="true"] .sr-text {
+.sr-turn:hover { background: var(--surface-base-hover, rgba(127,127,127,.14)); }
+.sr-rail[data-open="true"] .sr-turn:hover .sr-text,
+.sr-rail[data-open="true"] .sr-turn[data-active="true"] .sr-text { opacity: 1; }
+.sr-turn[data-active="true"] { font-weight: 500; }
+/* the turn currently being jumped to */
+.sr-turn[data-busy="true"] { background: rgba(255,170,60,.12); }
+.sr-turn[data-busy="true"] .sr-dash {
   opacity: 1;
-  font-weight: 600;
-  background: var(--surface-base-hover, rgba(127,127,127,.14));
+  width: 3px;
+  height: 22px;
+  background: rgba(255,170,60,.95);
+  animation: srBusy 1s ease-in-out infinite;
+}
+.sr-turn[data-busy="false"] .sr-dash { animation: none; }
+@keyframes srBusy {
+  0%, 100% { opacity: .35; }
+  50% { opacity: 1; }
+}
+/* pulse a landed bubble: outline follows the bubble's own border-radius, so no
+   shape is imposed and the message background stays untouched */
+.sr-flash-ring { animation: srRing 1.8s ease-out 1; }
+@keyframes srRing {
+  0% {
+    outline: 2px solid rgba(255,170,60,.95);
+    outline-offset: 2px;
+    box-shadow: 0 0 24px rgba(255,170,60,.45);
+  }
+  60% {
+    outline: 2px solid rgba(255,170,60,.35);
+    outline-offset: 2px;
+    box-shadow: 0 0 12px rgba(255,170,60,.15);
+  }
+  100% {
+    outline: 2px solid rgba(255,170,60,0);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 rgba(255,170,60,0);
+  }
+}
+.sr-note {
+  display: none;
+  font-size: 11px;
+  opacity: .4;
+  padding: 2px;
 }
+.sr-rail[data-open="true"] .sr-note { display: block; }
 .sr-status {
   position: fixed;
   right: 30px;
@@ -91,5 +215,4 @@
   white-space: pre-wrap;
   max-width: min(720px, 90vw);
 }
-.sr-note { font-size: 11px; opacity: .4; padding: 2px; }
-`;function lt(n){const e=h.usePlugin(),[o,d]=a.createSignal([]),[$,v]=a.createSignal(""),[w,b]=a.createSignal(!1),[J,Y]=a.createSignal(""),[q,L]=a.createSignal("");let S=!1,M="",k,E="";const R=async t=>{if(!t||S)return;S=!0;const r=new Map;let l,i="";try{for(let u=0;u<40;u++){const g=l?{sessionID:t,type:"user",limit:200,cursor:l}:{sessionID:t,type:"user",limit:200,order:"desc"};let f;try{f=await e.client.message.list(g)}catch(p){i=String(p?.message??p);break}const U=f?.data??[];let D=0;for(const p of U)r.has(p.id)||(r.set(p.id,{id:p.id,created:p.time?.created??0,text:rt(p)}),D++);const H=f?.cursor?.next;if(!H||D===0)break;l=H}}finally{S=!1}const c=[...r.values()].sort((u,g)=>u.created-g.created);d(c),F=c.length,j=i,Y(c.length===0?i||"暂无用户消息":""),M=t},O=()=>n.session()?.id;a.createEffect(()=>{const t=O();t&&a.untrack(()=>{M!==t&&(d([]),v(""),E="",R(t))})});const G=setInterval(()=>{const t=O();t&&R(t)},5e3);a.onCleanup(()=>clearInterval(G));const K=setInterval(()=>{const t=x();if(!t)return;const r=[...t.querySelectorAll("[data-message-id]")];if(r.length===0)return;const l=t.getBoundingClientRect().top+40;for(const i of r)if(i.getBoundingClientRect().bottom>=l){const c=i.getAttribute("data-message-id");c&&v(c);break}},400);a.onCleanup(()=>clearInterval(K));const m=t=>{L(t),setTimeout(()=>L(r=>r===t?"":r),3e3)};a.onMount(()=>{const t=()=>m(`${C} · ${T(e)}`),r=()=>{b(!0),clearTimeout(k),k=setTimeout(()=>b(!1),4e3)};window.addEventListener(_,t),window.addEventListener(A,r),a.onCleanup(()=>{window.removeEventListener(_,t),window.removeEventListener(A,r),clearTimeout(k)}),m(`会话轮次 ${C} 已加载`)});const W=()=>{for(const t of o())if(y(t.id))return t},P=(t,r)=>{at(`${t}#${B}${r}`),E=r},X=async t=>{I=t.id;const r=x(),l=y(t.id);if(l&&r){V(r,l),m("已定位");return}const i=ot(e);if(!i){m(`无法读取当前路由，无法定位 · ${T(e)}`);return}for(let c=0;c<30;c++){if(m(c===0?"定位中…":`加载历史… ${c}`),E===t.id){const u=W()??o()[0];u&&(P(i,u.id),await z(120))}P(i,t.id);for(let u=0;u<6;u++){await z(80);const g=y(t.id);if(!g)continue;const f=x()??r;f&&V(f,g),m("已定位");return}}m(`未能定位 · ${T(e)}`)},Q=[s.createComponent(a.Show,{get when(){return q()},get children(){var t=Z();return s.insert(t,q),t}}),(()=>{var t=tt();return t.addEventListener("mouseleave",()=>b(!1)),t.addEventListener("mouseenter",()=>b(!0)),s.insert(t,s.createComponent(a.Show,{get when(){return o().length>0},get fallback(){return(()=>{var r=et();return s.insert(r,()=>J()||`… ${C}`),r})()},get children(){return s.createComponent(a.For,{get each(){return o()},children:r=>(()=>{var l=nt(),i=l.firstChild,c=i.firstChild;return l.$$click=()=>{X(r)},s.insert(i,()=>st(r.created),c),s.insert(i,()=>r.text,null),s.effect(()=>s.setAttribute(l,"data-active",$()===r.id?"true":"false")),l})()})}})),s.effect(()=>s.setAttribute(t,"data-open",w()?"true":"false")),t})()];return s.createComponent(s.Portal,{get mount(){return document.body},children:Q})}const ct=h.Plugin.define({i18n:{en:{"command.jump":"Session turns: show / jump","command.jump.description":"Reveal the turn rail; click a turn to jump to that message"}},setup(n){n.add(h.Style,it),n.add(h.Slot,{at:"window.bottom",render:()=>s.createComponent(a.Show,{get when(){return n.sessions.current()},get children(){return s.createComponent(lt,{session:()=>n.sessions.current()})}})}),n.add(h.Command,()=>({id:"jump",title:n.t("command.jump"),description:n.t("command.jump.description"),group:n.t("command.jump"),section:"navigation",bind:"mod+alt+r",slash:{name:"turns"},run:()=>{window.dispatchEvent(new Event(A)),window.dispatchEvent(new Event(_))}}))}});s.delegateEvents(["click"]);exports.default=ct;
+`;function Vt(o){const n=A.usePlugin(),[f,g]=i.createSignal([]),[j,C]=i.createSignal(""),[E,S]=i.createSignal(!1),[yt,kt]=i.createSignal(""),[Q,tt]=i.createSignal(""),[x,q]=i.createSignal(!1),[et,L]=i.createSignal(0),[rt,R]=i.createSignal(""),v=new Map;let O=0,I=!1,M=!1,J="",_;const P=()=>o.session()?.id,N=()=>{const t=[...v.values()].sort((r,l)=>r.created-l.created),e=i.untrack(f);e.length===t.length&&e.every((r,l)=>r===t[l])||(g(t),xt=t.length)},nt=t=>{const e=v.get(t.id);e&&e.created===t.time&&e.text===t.text||v.set(t.id,{id:t.id,created:t.time,text:t.text})},St=async(t,e,r)=>{const l=r?{sessionID:t,type:"user",limit:e,cursor:r}:{sessionID:t,type:"user",limit:e,order:"desc"};return await n.client.message.list(l)},z=async(t,e)=>{const r=++O;I=!0;let l="";try{let s;const c=e==="full"?qt:1,d=e==="full"?Rt:Ot;let p=e!=="full";for(let b=0;b<c;b++){let m;try{m=await St(t,d,s)}catch(h){l=String(h?.message??h);break}if(r!==O)return;p||(v.clear(),p=!0);let u=0;for(const h of m?.data??[])v.has(h.id)||(nt({id:h.id,time:h.time?.created??0,text:gt(h)}),u++);N();const k=m?.cursor?.next;if(!k||u===0)break;s=k}}finally{I=!1,J=t,Z=l,kt(v.size===0?l||"暂无用户消息":""),M&&(M=!1,st())}},st=()=>{_||(_=setTimeout(()=>{_=void 0;const t=i.untrack(P);t&&z(t,"light")},300))},at=t=>{if(!(!t||t!==i.untrack(P))){if(I){M=!0;return}st()}},$t=t=>{const e=t?.type;if(e==="message.updated"){const r=t?.data??{},l=r.info;l?.role==="user"&&l?.id&&(nt({id:l.id,time:l.time?.created??0,text:gt(l)}),N()),at(r.sessionID)}else if(e==="message.removed"){const r=t?.data??{};r.messageID&&v.delete(r.messageID)&&N(),at(r.sessionID)}else if(e==="location.shutdown"){const r=i.untrack(P);r&&J===r&&z(r,"full")}};i.onMount(()=>{let t=!1,e=0,r;(async()=>{for(;!t;){const c=n.client.event.subscribe()[Symbol.asyncIterator]();try{for(;!t;){const d=await c.next();if(d.done)break;e=0,$t(d.value)}}catch{}try{await c.return?.()}catch{}if(t)break;e++,await bt(Math.min(2e3*e,15e3))}})(),i.onCleanup(()=>{t=!0,clearTimeout(r),_&&clearTimeout(_)})}),i.createEffect(()=>{const t=P();t&&i.untrack(()=>{J!==t&&(O++,I=!1,M=!1,v.clear(),g([]),C(""),H="",z(t,"full"))})});let D;const T=()=>(D?.isConnected||(D=vt()),D),Et=()=>{const t=T();if(!t)return;const e=t.querySelectorAll("[data-message-id]");if(e.length===0)return;const r=t.getBoundingClientRect().top+40;for(const l of e)if(l.getBoundingClientRect().bottom>=r){const s=l.getAttribute("data-message-id");s&&C(s);break}};let F=!1;const ot=()=>{F||(F=!0,requestAnimationFrame(()=>{F=!1,Et()}))};i.onMount(()=>{const t=()=>ot();document.addEventListener("scroll",t,!0);const e=setInterval(ot,1500);i.onCleanup(()=>{document.removeEventListener("scroll",t,!0),clearInterval(e)})});let it=0;const w=(t,e=2600)=>{const r=++it;tt(t),setTimeout(()=>{r===it&&tt("")},e)};i.onMount(()=>{const t=r=>{if(r.key==="Escape"){if(i.untrack(x)){pt(),r.stopPropagation();return}i.untrack(E)&&(S(!1),r.stopPropagation())}},e=r=>{if(!i.untrack(E))return;(r.composedPath?.()??[]).some(c=>c instanceof Element&&c.closest?.(".sr-rail"))||S(!1)};window.addEventListener("keydown",t,!0),document.addEventListener("pointerdown",e,!0),i.onCleanup(()=>{window.removeEventListener("keydown",t,!0),document.removeEventListener("pointerdown",e,!0)})}),i.onMount(()=>{const t=()=>w(`${G} · ${W(n)}`),e=()=>S(r=>!r);window.addEventListener(ht,t),window.addEventListener(Y,e),i.onCleanup(()=>{window.removeEventListener(ht,t),window.removeEventListener(Y,e)}),w(`会话轮次 ${G} 已加载`)});let H="",y=0,lt=0,ct="";const U=t=>{try{const e=t.querySelector('[data-slot="user-message-text"]')??t.querySelector('[data-slot="user-message-body"]')??t;e.classList.remove("sr-flash-ring"),e.offsetWidth,e.classList.add("sr-flash-ring"),setTimeout(()=>e.classList.remove("sr-flash-ring"),1900)}catch{}},_t=()=>{for(const t of f())if($(t.id))return t},dt=(t,e)=>{Bt(`${t}#${wt}${e}`),H=e},ut=()=>{const e=T()?.querySelectorAll("[data-message-id]")??[];if(e.length===0)return"0";const r=e[0].getAttribute("data-message-id")??"",l=e[e.length-1].getAttribute("data-message-id")??"";return`${e.length}:${r}:${l}`},Tt=(t,e,r)=>new Promise(l=>{let s=!1,c,d,p;const b=Date.now(),m=ut(),u=B=>{if(!s){s=!0;try{c?.disconnect()}catch{}clearInterval(d),clearTimeout(p),l(B??null)}},k=B=>{if(e!==y)return u(null);const ft=$(t);if(ft)return u(ft);B&&Date.now()-b>zt&&ut()!==m&&u(null)},h=$(t);if(h)return u(h);c=new MutationObserver(()=>k(!1)),c.observe(document.documentElement,{childList:!0,subtree:!0}),d=setInterval(()=>k(!0),120),p=setTimeout(()=>u($(t)),Math.max(400,r))}),pt=()=>{y++,q(!1),L(0),R(""),w("已取消跳转")},At=async t=>{const e=++y;X=t.id;const r=Date.now();if(t.id===ct&&r-lt<Ft){const d=$(t.id),p=T();if(d&&p){K(p,d),U(d);return}}lt=r,ct=t.id;const l=T(),s=$(t.id);if(s&&l){K(l,s),U(s),w("已定位");return}const c=Ut(n);if(!c){w(`无法读取当前路由，无法定位 · ${W(n)}`);return}q(!0),R(t.id),L(0),S(!0),w("正在定位…",V);try{const d=Date.now()+V;for(let p=0;p<Jt&&Date.now()<d;p++){if(e!==y)return;if(L(p+1),w(`跳转中 · 第 ${p+1} 页`,V),H===t.id){const u=_t()??f()[0];u&&(dt(c,u.id),await bt(120))}if(e!==y)return;dt(c,t.id);const b=Math.min(Nt,d-Date.now()),m=await Tt(t.id,e,b);if(e!==y)return;if(m){const u=T()??l;u&&K(u,m),U(m),w("已定位");return}}e===y&&w(`未能定位 · ${W(n)}`)}finally{e===y&&(q(!1),L(0),R(""))}};i.createEffect(()=>{x()&&rt()&&requestAnimationFrame(()=>{try{document.querySelector('.sr-list .sr-turn[data-busy="true"]')?.scrollIntoView({block:"nearest"})}catch{}})});const Ct=[a.createComponent(i.Show,{get when(){return Q()},get children(){var t=Lt();return a.insert(t,Q),t}}),(()=>{var t=Mt(),e=t.firstChild,r=e.firstChild,l=e.nextSibling;return t.addEventListener("mouseleave",()=>{x()||S(!1)}),t.addEventListener("mouseenter",()=>S(!0)),a.insert(e,a.createComponent(i.Show,{get when(){return x()},get fallback(){return(()=>{var s=Pt();return s.firstChild,a.insert(s,(()=>{var c=a.memo(()=>f().length>0);return()=>c()?` · ${f().length}`:""})(),null),s})()},get children(){var s=It();return s.firstChild,a.insert(s,(()=>{var c=a.memo(()=>et()>0);return()=>c()?` · 第 ${et()} 页`:""})(),null),s}}),r),r.$$click=()=>{x()?pt():S(!1)},a.insert(l,a.createComponent(i.Show,{get when(){return f().length>0},get fallback(){return(()=>{var s=Dt();return a.insert(s,()=>yt()||`… ${G}`),s})()},get children(){return a.createComponent(i.For,{get each(){return f()},children:(s,c)=>(()=>{var d=jt(),p=d.firstChild,b=p.firstChild;b.firstChild;var m=b.nextSibling;return d.$$click=()=>{At(s)},a.insert(b,()=>c()+1,null),a.insert(m,()=>Ht(s.created)),a.insert(p,()=>s.text,null),a.effect(u=>{var k=j()===s.id?"true":"false",h=x()&&rt()===s.id?"true":"false";return k!==u.e&&a.setAttribute(d,"data-active",u.e=k),h!==u.t&&a.setAttribute(d,"data-busy",u.t=h),u},{e:void 0,t:void 0}),d})()})}})),a.effect(s=>{var c=E()?"true":"false",d=x()?"true":"false",p=x()?"取消跳转 (Esc)":"关闭 (Esc)";return c!==s.e&&a.setAttribute(t,"data-open",s.e=c),d!==s.t&&a.setAttribute(t,"data-jumping",s.t=d),p!==s.a&&a.setAttribute(r,"title",s.a=p),s},{e:void 0,t:void 0,a:void 0}),t})()];return a.createComponent(a.Portal,{get mount(){return document.body},children:Ct})}const Wt=A.Plugin.define({i18n:{en:{"command.jump":"Session turns: show / jump","command.jump.description":"Reveal the turn rail; click a turn to jump to that message"}},setup(o){o.add(A.Style,Gt),o.add(A.Slot,{at:"window.bottom",render:()=>a.createComponent(i.Show,{get when(){return o.sessions.current()},get children(){return a.createComponent(Vt,{session:()=>o.sessions.current()})}})}),o.add(A.Command,()=>({id:"jump",title:o.t("command.jump"),description:o.t("command.jump.description"),group:o.t("command.jump"),section:"navigation",bind:"mod+alt+r",slash:{name:"turns"},run:()=>{window.dispatchEvent(new Event(Y))}}))}});a.delegateEvents(["click"]);exports.default=Wt;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-session-turns",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "OpenCode Desktop 插件：在会话右缘列出每一轮用户提问，点击即可跳转到对应消息。A right-edge rail of user turns; click one to jump to that message.",
   "type": "module",
   "license": "MIT",

package/src/gui.tsx

@@ -6,11 +6,26 @@ import { Portal } from "solid-js/web"
 // constants / helpers
 // ---------------------------------------------------------------------------
 
-const VERSION = "v10"
+const VERSION = "v12"
 const HASH_PREFIX = "message-"
 const DIAG_EVENT = "session-turns:diag"
 const OPEN_EVENT = "session-turns:open"
 
+// paging: a full load walks every page; a light refresh pulls just the newest
+// page (new messages always land at the head of a desc listing).
+const FULL_PAGE_LIMIT = 40
+const FULL_PAGE_SIZE = 200
+const LIGHT_PAGE_SIZE = 50
+
+// jump loop budgets. One round pages in roughly one host history page (~5
+// turns); a round ends as soon as the host appends rows, so the loop is paced
+// by real progress instead of a fixed sleep.
+const JUMP_ROUNDS = 120
+const JUMP_TOTAL_MS = 45000
+const JUMP_ROW_TIMEOUT_MS = 4000
+const JUMP_SETTLE_MS = 300
+const SAME_TARGET_WINDOW_MS = 800
+
 // Filled by Rail.load()/jump() so the command palette can report diagnostics.
 let lastTurnCount = 0
 let lastNote = ""
@@ -131,26 +146,82 @@ const CSS = `
   position: fixed;
   top: 50%;
   transform: translateY(-50%);
-  right: 10px;
-  max-height: 60vh;
-  width: 14px;
+  right: 14px;
+  max-height: 66vh;
+  width: 16px;
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
   justify-content: center;
-  gap: 2px;
-  padding: 8px 4px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  scrollbar-width: none;
+  padding: 6px 2px;
+  overflow: hidden;
   z-index: 400;
   border-radius: 10px;
+  border: 1px solid transparent;
   color: var(--text-base, currentColor);
   background: transparent;
-  transition: width .18s ease;
+  transition: width .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
+}
+.sr-rail[data-open="true"] {
+  width: 340px;
+  padding: 10px;
+  justify-content: flex-start;
+  background: var(--surface-base, rgba(24,24,26,.86));
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-color: rgba(127,127,127,.25);
+  box-shadow: 0 8px 32px rgba(0,0,0,.28);
+}
+.sr-head {
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 2px 8px;
+  margin-bottom: 6px;
+  border-bottom: 1px solid rgba(127,127,127,.2);
+  flex-shrink: 0;
+}
+.sr-rail[data-open="true"] .sr-head { display: flex; }
+.sr-title { font-size: 12px; opacity: .6; white-space: nowrap; }
+.sr-title.sr-progress {
+  opacity: .95;
+  color: rgba(255,170,60,.95);
+  font-variant-numeric: tabular-nums;
+}
+.sr-close {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  line-height: 1;
+  padding: 2px 7px;
+  border-radius: 4px;
+  cursor: pointer;
+  opacity: .5;
+  flex-shrink: 0;
+}
+.sr-close:hover { opacity: 1; background: var(--surface-base-hover, rgba(127,127,127,.14)); }
+/* the scrollable list; the header stays fixed above it */
+.sr-list {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+}
+.sr-rail[data-open="true"] .sr-list { justify-content: flex-start; gap: 1px; scrollbar-width: thin; }
+.sr-list::-webkit-scrollbar { display: none; }
+.sr-rail[data-open="true"] .sr-list::-webkit-scrollbar { display: block; width: 8px; }
+.sr-list::-webkit-scrollbar-track { background: transparent; }
+.sr-rail[data-open="true"] .sr-list::-webkit-scrollbar-thumb {
+  background: rgba(127,127,127,.35);
+  border-radius: 4px;
 }
-.sr-rail::-webkit-scrollbar { display: none; }
-.sr-rail[data-open="true"] { width: 360px; background: transparent; }
 .sr-turn {
   display: flex;
   align-items: center;
@@ -166,6 +237,16 @@ const CSS = `
   font: inherit;
   border-radius: 4px;
 }
+/* expanded: dash flips to a left-side indicator, content reads left-to-right */
+.sr-rail[data-open="true"] .sr-turn {
+  flex-direction: row-reverse;
+  justify-content: flex-start;
+  gap: 9px;
+  padding: 5px 8px;
+  min-height: 0;
+  border-radius: 6px;
+}
+.sr-turn:focus-visible, .sr-close:focus-visible { outline: 1px solid currentColor; outline-offset: -1px; }
 .sr-dash {
   display: block;
   width: 10px;
@@ -174,10 +255,13 @@ const CSS = `
   background: currentColor;
   opacity: .28;
   flex-shrink: 0;
-  transition: opacity .12s ease, width .12s ease;
+  transition: opacity .12s ease, width .12s ease, height .12s ease;
 }
 .sr-turn:hover .sr-dash,
 .sr-turn[data-active="true"] .sr-dash { opacity: .95; width: 18px; }
+.sr-rail[data-open="true"] .sr-dash { width: 3px; height: 16px; }
+.sr-rail[data-open="true"] .sr-turn:hover .sr-dash,
+.sr-rail[data-open="true"] .sr-turn[data-active="true"] .sr-dash { width: 3px; height: 22px; }
 .sr-text {
   display: none;
   margin-right: 10px;
@@ -193,16 +277,71 @@ const CSS = `
   opacity: .45;
   background: transparent;
 }
-.sr-rail[data-open="true"] .sr-text { display: block; }
-.sr-turn:hover .sr-text {
-  opacity: 1;
-  background: var(--surface-base-hover, rgba(127,127,127,.14));
+.sr-rail[data-open="true"] .sr-text {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+  white-space: normal;
+  line-height: 1.45;
+  max-width: none;
+  opacity: .8;
+}
+.sr-num, .sr-time {
+  opacity: .55;
+  margin-right: 6px;
+  font-variant-numeric: tabular-nums;
 }
-.sr-turn[data-active="true"] .sr-text {
+.sr-turn:hover { background: var(--surface-base-hover, rgba(127,127,127,.14)); }
+.sr-rail[data-open="true"] .sr-turn:hover .sr-text,
+.sr-rail[data-open="true"] .sr-turn[data-active="true"] .sr-text { opacity: 1; }
+.sr-turn[data-active="true"] { font-weight: 500; }
+/* the turn currently being jumped to */
+.sr-turn[data-busy="true"] { background: rgba(255,170,60,.12); }
+.sr-turn[data-busy="true"] .sr-dash {
   opacity: 1;
-  font-weight: 600;
-  background: var(--surface-base-hover, rgba(127,127,127,.14));
+  width: 3px;
+  height: 22px;
+  background: rgba(255,170,60,.95);
+  animation: srBusy 1s ease-in-out infinite;
+}
+.sr-turn[data-busy="false"] .sr-dash { animation: none; }
+@keyframes srBusy {
+  0%, 100% { opacity: .35; }
+  50% { opacity: 1; }
 }
+/* pulse a landed bubble: outline follows the bubble's own border-radius, so no
+   shape is imposed and the message background stays untouched */
+.sr-flash-ring { animation: srRing 1.8s ease-out 1; }
+@keyframes srRing {
+  0% {
+    outline: 2px solid rgba(255,170,60,.95);
+    outline-offset: 2px;
+    box-shadow: 0 0 24px rgba(255,170,60,.45);
+  }
+  60% {
+    outline: 2px solid rgba(255,170,60,.35);
+    outline-offset: 2px;
+    box-shadow: 0 0 12px rgba(255,170,60,.15);
+  }
+  100% {
+    outline: 2px solid rgba(255,170,60,0);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 rgba(255,170,60,0);
+  }
+}
+.sr-note {
+  display: none;
+  font-size: 11px;
+  opacity: .4;
+  padding: 2px;
+}
+.sr-rail[data-open="true"] .sr-note { display: block; }
 .sr-status {
   position: fixed;
   right: 30px;
@@ -218,7 +357,6 @@ const CSS = `
   white-space: pre-wrap;
   max-width: min(720px, 90vw);
 }
-.sr-note { font-size: 11px; opacity: .4; padding: 2px; }
 `
 
 // ---------------------------------------------------------------------------
@@ -232,94 +370,220 @@ function Rail(props) {
   const [open, setOpen] = createSignal(false)
   const [note, setNote] = createSignal("")
   const [status, setStatus] = createSignal("")
-
-  let loading = false
+  // Jump progress. While `jumping` is true the panel stays pinned open and the
+  // header reports the page being loaded; `busyID` marks the target row.
+  const [jumping, setJumping] = createSignal(false)
+  const [jumpPage, setJumpPage] = createSignal(0)
+  const [busyID, setBusyID] = createSignal("")
+
+  // ---- turn cache ---------------------------------------------------------
+  // Object identity is kept stable across refreshes so Solid's <For> reuses
+  // existing DOM instead of rebuilding the whole list on every update.
+  const cache = new Map()
+  let loadToken = 0
+  let loadingActive = false
+  let pendingBump = false
   let loadedFor = ""
-  let closeTimer
-  // The memory router's hash is invisible to us (window.location is stale), so
-  // track the last id we navigated to in order to force a hash change each round.
-  let lastNavID = ""
+  let lightTimer
+
+  const sessionID = () => props.session()?.id
 
-  const load = async (sessionID) => {
-    if (!sessionID || loading) return
-    loading = true
-    const collected = new Map()
-    let cursor
+  const publish = () => {
+    const list = [...cache.values()].sort((a, b) => a.created - b.created)
+    const prev = untrack(turns)
+    // Skip the signal write when nothing changed; <For> diffs by reference.
+    if (prev.length === list.length && prev.every((item, i) => item === list[i])) return
+    setTurns(list)
+    lastTurnCount = list.length
+  }
+
+  const upsert = (item) => {
+    const existing = cache.get(item.id)
+    if (existing && existing.created === item.time && existing.text === item.text) return
+    cache.set(item.id, { id: item.id, created: item.time, text: item.text })
+  }
+
+  const fetchPage = async (id, limit, cursor) => {
+    // The server rejects `cursor` together with `order`
+    // (InvalidCursorError: "Cursor cannot be combined with order").
+    // The cursor itself already encodes the original order/direction,
+    // so only the first page declares order: "desc".
+    const params = cursor
+      ? { sessionID: id, type: "user", limit, cursor }
+      : { sessionID: id, type: "user", limit, order: "desc" }
+    return await ctx.client.message.list(params)
+  }
+
+  const load = async (id, mode) => {
+    const token = ++loadToken
+    loadingActive = true
     let error = ""
     try {
-      for (let page = 0; page < 40; page++) {
-        // The server rejects `cursor` together with `order`
-        // (InvalidCursorError: "Cursor cannot be combined with order").
-        // The cursor itself already encodes the original order/direction,
-        // so only the first page declares order: "desc".
-        const params = cursor
-          ? { sessionID, type: "user", limit: 200, cursor }
-          : { sessionID, type: "user", limit: 200, order: "desc" }
-
+      let cursor
+      const pages = mode === "full" ? FULL_PAGE_LIMIT : 1
+      const limit = mode === "full" ? FULL_PAGE_SIZE : LIGHT_PAGE_SIZE
+      let cleared = mode !== "full"
+      for (let page = 0; page < pages; page++) {
         let response
         try {
-          response = await ctx.client.message.list(params)
+          response = await fetchPage(id, limit, cursor)
         } catch (cause) {
           error = String(cause?.message ?? cause)
           break
         }
-
-        const data = response?.data ?? []
+        // Superseded by a newer load (or a session switch): drop this page
+        // instead of polluting the new session's cache with stale ids.
+        if (token !== loadToken) return
+        // Full mode clears only after the first page succeeded, so a server
+        // error never blanks out the rail (v10's hard-won lesson).
+        if (!cleared) {
+          cache.clear()
+          cleared = true
+        }
         let fresh = 0
-        for (const message of data) {
-          if (collected.has(message.id)) continue
-          collected.set(message.id, {
-            id: message.id,
-            created: message.time?.created ?? 0,
-            text: firstLine(message),
-          })
+        for (const message of response?.data ?? []) {
+          if (cache.has(message.id)) continue
+          upsert({ id: message.id, time: message.time?.created ?? 0, text: firstLine(message) })
           fresh++
         }
+        // Publish page by page: long sessions appear progressively instead of
+        // popping in all at once after every page has been fetched.
+        publish()
         const next = response?.cursor?.next
         if (!next || fresh === 0) break
         cursor = next
       }
     } finally {
-      loading = false
+      loadingActive = false
+      loadedFor = id
+      lastNote = error
+      setNote(cache.size === 0 ? error || "暂无用户消息" : "")
+      // A message arrived while a full load was running: catch up now.
+      if (pendingBump) {
+        pendingBump = false
+        scheduleLight()
+      }
     }
+  }
 
-    // Publish whatever was collected even if a later page failed — a paging
-    // error must never blank out the whole rail again.
-    const list = [...collected.values()].sort((a, b) => a.created - b.created)
-    setTurns(list)
-    lastTurnCount = list.length
-    lastNote = error
-    setNote(list.length === 0 ? error || "暂无用户消息" : "")
-    loadedFor = sessionID
+  // ---- event-driven refresh (replaces the 5s full-list polling) -----------
+  // The SDK shares one SSE connection with the host; consuming it here is a
+  // second iterator over the same stream, not a second connection. Events are
+  // debounced into a single-page light refresh, so streaming bursts cost
+  // nothing beyond a few cheap `type` comparisons per event.
+  const scheduleLight = () => {
+    if (lightTimer) return
+    lightTimer = setTimeout(() => {
+      lightTimer = undefined
+      const id = untrack(sessionID)
+      if (id) void load(id, "light")
+    }, 300)
   }
 
-  const sessionID = () => props.session()?.id
+  const bump = (eventSessionID) => {
+    // Only the session currently shown matters; ignore everything else.
+    if (!eventSessionID || eventSessionID !== untrack(sessionID)) return
+    if (loadingActive) {
+      pendingBump = true
+      return
+    }
+    scheduleLight()
+  }
+
+  const handleEvent = (event) => {
+    const type = event?.type
+    if (type === "message.updated") {
+      const data = event?.data ?? {}
+      const info = data.info
+      // Fast path: the payload carries the message itself, so a new user turn
+      // shows up instantly; the debounced light refresh reconciles the rest.
+      if (info?.role === "user" && info?.id) {
+        upsert({ id: info.id, time: info.time?.created ?? 0, text: firstLine(info) })
+        publish()
+      }
+      bump(data.sessionID)
+    } else if (type === "message.removed") {
+      const data = event?.data ?? {}
+      if (data.messageID && cache.delete(data.messageID)) publish()
+      bump(data.sessionID)
+    } else if (type === "location.shutdown") {
+      // Server rebuilt: do one full reload of the current session.
+      const id = untrack(sessionID)
+      if (id && loadedFor === id) void load(id, "full")
+    }
+  }
+
+  onMount(() => {
+    let stopped = false
+    let attempt = 0
+    let retryTimer
+    const run = async () => {
+      while (!stopped) {
+        const stream = ctx.client.event.subscribe()
+        const iterator = stream[Symbol.asyncIterator]()
+        try {
+          while (!stopped) {
+            const next = await iterator.next()
+            if (next.done) break
+            attempt = 0
+            handleEvent(next.value)
+          }
+        } catch {}
+        // iterator.return() cancels the SSE reader (the SDK's generator
+        // finally-block); errors from it are irrelevant at this point.
+        try {
+          await iterator.return?.()
+        } catch {}
+        if (stopped) break
+        attempt++
+        await sleep(Math.min(2000 * attempt, 15000))
+      }
+    }
+    void run()
+    onCleanup(() => {
+      stopped = true
+      clearTimeout(retryTimer)
+      if (lightTimer) clearTimeout(lightTimer)
+    })
+  })
 
   createEffect(() => {
     const id = sessionID()
     if (!id) return
     untrack(() => {
       if (loadedFor !== id) {
+        // Invalidate anything in flight for the previous session first, so its
+        // finally-block can't write `loadedFor`/`note` for the wrong session.
+        loadToken++
+        loadingActive = false
+        pendingBump = false
+        cache.clear()
         setTurns([])
         setActive("")
         lastNavID = ""
-        void load(id)
+        void load(id, "full")
       }
     })
   })
 
-  const poll = setInterval(() => {
-    const id = sessionID()
-    if (id) void load(id)
-  }, 5000)
-  onCleanup(() => clearInterval(poll))
+  // ---- active-turn tracking ----------------------------------------------
+  // Driven by scroll events (captured at document level so it also sees the
+  // real scroller without querying first) plus one rAF-throttled pass, with a
+  // slow interval as a fallback for rows mounting without a scroll (history
+  // paging, virtual list swaps).
+  let scrollerCache
+  const scroller = () => {
+    if (scrollerCache?.isConnected) return scrollerCache
+    scrollerCache = findScroller()
+    return scrollerCache
+  }
 
   const trackActive = () => {
-    const scroller = findScroller()
-    if (!scroller) return
-    const rows = [...scroller.querySelectorAll("[data-message-id]")]
+    const sc = scroller()
+    if (!sc) return
+    const rows = sc.querySelectorAll("[data-message-id]")
     if (rows.length === 0) return
-    const top = scroller.getBoundingClientRect().top + 40
+    const top = sc.getBoundingClientRect().top + 40
     for (const row of rows) {
       if (row.getBoundingClientRect().bottom >= top) {
         const id = row.getAttribute("data-message-id")
@@ -328,32 +592,112 @@ function Rail(props) {
       }
     }
   }
-  const track = setInterval(trackActive, 400)
-  onCleanup(() => clearInterval(track))
 
-  const flash = (text) => {
+  let rafPending = false
+  const scheduleTrack = () => {
+    if (rafPending) return
+    rafPending = true
+    requestAnimationFrame(() => {
+      rafPending = false
+      trackActive()
+    })
+  }
+
+  onMount(() => {
+    const onScroll = () => scheduleTrack()
+    document.addEventListener("scroll", onScroll, true)
+    const fallback = setInterval(scheduleTrack, 1500)
+    onCleanup(() => {
+      document.removeEventListener("scroll", onScroll, true)
+      clearInterval(fallback)
+    })
+  })
+
+  // ---- status flash -------------------------------------------------------
+  // A sequence guard so a slow timeout from an earlier flash can never clear a
+  // newer message.
+  let flashSeq = 0
+  const flash = (text, ms = 2600) => {
+    const seq = ++flashSeq
     setStatus(text)
-    setTimeout(() => setStatus((current) => (current === text ? "" : current)), 3000)
+    setTimeout(() => {
+      if (seq === flashSeq) setStatus("")
+    }, ms)
   }
 
+  // ---- open / close interactions ------------------------------------------
   onMount(() => {
-    const onDiag = () => flash(`${VERSION} · ${diagnostics(ctx)}`)
-    const onOpen = () => {
-      setOpen(true)
-      clearTimeout(closeTimer)
-      closeTimer = setTimeout(() => setOpen(false), 4000)
+    const onKey = (event) => {
+      if (event.key !== "Escape") return
+      // During a long jump Esc cancels the jump first and keeps the panel open,
+      // so the progress display doesn't vanish mid-flight.
+      if (untrack(jumping)) {
+        cancelJump()
+        event.stopPropagation()
+        return
+      }
+      if (untrack(open)) {
+        setOpen(false)
+        // Only swallow Esc while the rail is actually open, so the host keeps
+        // its own Escape handling the rest of the time.
+        event.stopPropagation()
+      }
     }
+    const onPointerDown = (event) => {
+      if (!untrack(open)) return
+      const path = event.composedPath?.() ?? []
+      const inside = path.some((node) => node instanceof Element && node.closest?.(".sr-rail"))
+      if (!inside) setOpen(false)
+    }
+    window.addEventListener("keydown", onKey, true)
+    document.addEventListener("pointerdown", onPointerDown, true)
+    onCleanup(() => {
+      window.removeEventListener("keydown", onKey, true)
+      document.removeEventListener("pointerdown", onPointerDown, true)
+    })
+  })
+
+  onMount(() => {
+    const onDiag = () => flash(`${VERSION} · ${diagnostics(ctx)}`)
+    // /turns toggles the panel; Esc / outside click / × also close it. No more
+    // forced auto-close after 4s.
+    const onOpen = () => setOpen((value) => !value)
     window.addEventListener(DIAG_EVENT, onDiag)
     window.addEventListener(OPEN_EVENT, onOpen)
     onCleanup(() => {
       window.removeEventListener(DIAG_EVENT, onDiag)
       window.removeEventListener(OPEN_EVENT, onOpen)
-      clearTimeout(closeTimer)
     })
     // One-shot confirmation that this window actually runs the rebuilt bundle.
     flash(`会话轮次 ${VERSION} 已加载`)
   })
 
+  // ---- jump ----------------------------------------------------------------
+  // The memory router's hash is invisible to us (window.location is stale), so
+  // track the last id we navigated to in order to force a hash change each round.
+  let lastNavID = ""
+  let jumpToken = 0
+  let lastJumpAt = 0
+  let lastJumpTurnID = ""
+
+  // Brief highlight on the message bubble. The timeline row spans the whole
+  // width, so tinting it looks like a stray orange band. The visible bubble is
+  // `[data-slot="user-message-text"]` (background + 10px radius); its parent
+  // `user-message-body` is only a layout column. An outline + glow hugs the
+  // bubble's own shape without altering its background.
+  const pulse = (row) => {
+    try {
+      const target =
+        row.querySelector('[data-slot="user-message-text"]') ??
+        row.querySelector('[data-slot="user-message-body"]') ??
+        row
+      target.classList.remove("sr-flash-ring")
+      void target.offsetWidth // restart the animation when re-pulsing the same node
+      target.classList.add("sr-flash-ring")
+      setTimeout(() => target.classList.remove("sr-flash-ring"), 1900)
+    } catch {}
+  }
+
   // Oldest turn that is currently mounted (i.e. already paged in), used as a
   // safe "different id" to toggle the router hash so it re-runs its seek.
   const oldestLoadedTurn = () => {
@@ -366,14 +710,90 @@ function Rail(props) {
     lastNavID = id
   }
 
+  // Cheap fingerprint of the mounted timeline rows. Paging in older history
+  // prepends rows, so a changed fingerprint means the host did real work and
+  // the next hash toggle can be sent immediately.
+  const rowSignature = () => {
+    const sc = scroller()
+    const rows = sc?.querySelectorAll("[data-message-id]") ?? []
+    if (rows.length === 0) return "0"
+    const first = rows[0].getAttribute("data-message-id") ?? ""
+    const last = rows[rows.length - 1].getAttribute("data-message-id") ?? ""
+    return `${rows.length}:${first}:${last}`
+  }
+
+  // Resolves when the row enters the DOM (MutationObserver, with a cheap poll
+  // as a belt-and-braces fallback), or null on timeout / supersession / when
+  // the host has paged in another slice (the caller then drives the next seek).
+  const waitForRow = (messageID, token, timeout) =>
+    new Promise((resolve) => {
+      let done = false
+      let observer
+      let poll
+      let timer
+      const started = Date.now()
+      const baseline = rowSignature()
+      const finish = (row) => {
+        if (done) return
+        done = true
+        try {
+          observer?.disconnect()
+        } catch {}
+        clearInterval(poll)
+        clearTimeout(timer)
+        resolve(row ?? null)
+      }
+      const check = (full) => {
+        if (token !== jumpToken) return finish(null)
+        const row = findRow(messageID)
+        if (row) return finish(row)
+        // Let the click settle before trusting a DOM change as "a page arrived".
+        // Only the poll evaluates the row fingerprint: streaming output fires
+        // the observer constantly and a full query on every mutation is wasted.
+        if (full && Date.now() - started > JUMP_SETTLE_MS && rowSignature() !== baseline) finish(null)
+      }
+      const existing = findRow(messageID)
+      if (existing) return finish(existing)
+      observer = new MutationObserver(() => check(false))
+      observer.observe(document.documentElement, { childList: true, subtree: true })
+      poll = setInterval(() => check(true), 120)
+      timer = setTimeout(() => finish(findRow(messageID)), Math.max(400, timeout))
+    })
+
+  const cancelJump = () => {
+    jumpToken++
+    setJumping(false)
+    setJumpPage(0)
+    setBusyID("")
+    flash("已取消跳转")
+  }
+
   const jump = async (turn) => {
+    const token = ++jumpToken
     lastJumpID = turn.id
-    const scroller = findScroller()
+    const now = Date.now()
+
+    // Same target clicked again shortly after: treat as idempotent re-scroll
+    // instead of restarting the paging loop.
+    if (turn.id === lastJumpTurnID && now - lastJumpAt < SAME_TARGET_WINDOW_MS) {
+      const row = findRow(turn.id)
+      const sc = scroller()
+      if (row && sc) {
+        scrollToRow(sc, row)
+        pulse(row)
+        return
+      }
+    }
+    lastJumpAt = now
+    lastJumpTurnID = turn.id
+
+    const sc = scroller()
     const row = findRow(turn.id)
 
     // Fast path: the row is mounted, scroll locally.
-    if (row && scroller) {
-      scrollToRow(scroller, row)
+    if (row && sc) {
+      scrollToRow(sc, row)
+      pulse(row)
       flash("已定位")
       return
     }
@@ -384,35 +804,72 @@ function Rail(props) {
       return
     }
 
-    // The host only pages in ~one history page (~5 turns) per seek and then goes
-    // idle. Drive it: each round toggles the hash to an already-loaded turn and
-    // back to the target, so the cursor machine runs another seek/page.
-    for (let round = 0; round < 30; round++) {
-      flash(round === 0 ? "定位中…" : `加载历史… ${round}`)
-
-      if (lastNavID === turn.id) {
-        const other = oldestLoadedTurn() ?? turns()[0]
-        if (other) {
-          navTo(path, other.id)
-          await sleep(120)
+    // Deep history: the host only pages in ~one history page (~5 turns) per
+    // seek and then goes idle. Drive it: each round toggles the hash to an
+    // already-loaded turn and back to the target, so the cursor machine runs
+    // another seek/page. A round ends as soon as rows appear instead of always
+    // sleeping 6s. A newer click bumps jumpToken, which cancels this loop at
+    // every await; Esc cancels it too.
+    setJumping(true)
+    setBusyID(turn.id)
+    setJumpPage(0)
+    // Pin the panel open even if the pointer has left it meanwhile.
+    setOpen(true)
+    flash("正在定位…", JUMP_TOTAL_MS)
+    try {
+      const deadline = Date.now() + JUMP_TOTAL_MS
+      for (let round = 0; round < JUMP_ROUNDS && Date.now() < deadline; round++) {
+        if (token !== jumpToken) return
+        setJumpPage(round + 1)
+        flash(`跳转中 · 第 ${round + 1} 页`, JUMP_TOTAL_MS)
+
+        if (lastNavID === turn.id) {
+          const other = oldestLoadedTurn() ?? turns()[0]
+          if (other) {
+            navTo(path, other.id)
+            await sleep(120)
+          }
+        }
+        if (token !== jumpToken) return
+        navTo(path, turn.id)
+
+        const remaining = Math.min(JUMP_ROW_TIMEOUT_MS, deadline - Date.now())
+        const landed = await waitForRow(turn.id, token, remaining)
+        if (token !== jumpToken) return
+        if (landed) {
+          const live = scroller() ?? sc
+          if (live) scrollToRow(live, landed)
+          pulse(landed)
+          flash("已定位")
+          return
         }
       }
-      navTo(path, turn.id)
-
-      for (let k = 0; k < 6; k++) {
-        await sleep(80)
-        const landed = findRow(turn.id)
-        if (!landed) continue
-        const live = findScroller() ?? scroller
-        if (live) scrollToRow(live, landed)
-        flash("已定位")
-        return
+
+      if (token === jumpToken) flash(`未能定位 · ${diagnostics(ctx)}`)
+    } finally {
+      // A newer jump owns the signals when the token moved on.
+      if (token === jumpToken) {
+        setJumping(false)
+        setJumpPage(0)
+        setBusyID("")
       }
     }
-
-    flash(`未能定位 · ${diagnostics(ctx)}`)
   }
 
+  // Keep the busy row visible in the panel list while the jump pages through
+  // history, so the "which turn am I waiting for" answer stays on screen.
+  createEffect(() => {
+    if (!jumping()) return
+    if (!busyID()) return
+    requestAnimationFrame(() => {
+      try {
+        document
+          .querySelector('.sr-list .sr-turn[data-busy="true"]')
+          ?.scrollIntoView({ block: "nearest" })
+      } catch {}
+    })
+  })
+
   const rail = (
     <>
       <Show when={status()}>
@@ -421,26 +878,60 @@ function Rail(props) {
       <div
         class="sr-rail"
         data-open={open() ? "true" : "false"}
+        data-jumping={jumping() ? "true" : "false"}
         onMouseEnter={() => setOpen(true)}
-        onMouseLeave={() => setOpen(false)}
+        // Keep the panel pinned while a long history jump runs; otherwise the
+        // mouse drifting off the rail hides exactly the progress the user is
+        // waiting for. Esc / × still close (or cancel) it.
+        onMouseLeave={() => {
+          if (!jumping()) setOpen(false)
+        }}
       >
-        <Show when={turns().length > 0} fallback={<div class="sr-note">{note() || `… ${VERSION}`}</div>}>
-          <For each={turns()}>
-            {(turn) => (
-              <button
-                type="button"
-                class="sr-turn"
-                data-active={active() === turn.id ? "true" : "false"}
-                onClick={() => void jump(turn)}
-              >
-                <span class="sr-text">
-                  {formatTime(turn.created)} {turn.text}
-                </span>
-                <span class="sr-dash" />
-              </button>
-            )}
-          </For>
-        </Show>
+        <div class="sr-head">
+          <Show
+            when={jumping()}
+            fallback={
+              <span class="sr-title">会话轮次{turns().length > 0 ? ` · ${turns().length}` : ""}</span>
+            }
+          >
+            <span class="sr-title sr-progress">
+              跳转中{jumpPage() > 0 ? ` · 第 ${jumpPage()} 页` : ""}
+            </span>
+          </Show>
+          <button
+            type="button"
+            class="sr-close"
+            title={jumping() ? "取消跳转 (Esc)" : "关闭 (Esc)"}
+            onClick={() => {
+              if (jumping()) cancelJump()
+              else setOpen(false)
+            }}
+          >
+            ×
+          </button>
+        </div>
+        <div class="sr-list">
+          <Show when={turns().length > 0} fallback={<div class="sr-note">{note() || `… ${VERSION}`}</div>}>
+            <For each={turns()}>
+              {(turn, index) => (
+                <button
+                  type="button"
+                  class="sr-turn"
+                  data-active={active() === turn.id ? "true" : "false"}
+                  data-busy={jumping() && busyID() === turn.id ? "true" : "false"}
+                  onClick={() => void jump(turn)}
+                >
+                  <span class="sr-text">
+                    <span class="sr-num">#{index() + 1}</span>
+                    <span class="sr-time">{formatTime(turn.created)}</span>
+                    {turn.text}
+                  </span>
+                  <span class="sr-dash" />
+                </button>
+              )}
+            </For>
+          </Show>
+        </div>
       </div>
     </>
   )
@@ -486,7 +977,6 @@ export default Plugin.define({
       slash: { name: "turns" },
       run: () => {
         window.dispatchEvent(new Event(OPEN_EVENT))
-        window.dispatchEvent(new Event(DIAG_EVENT))
       },
     }))
   },