opencode-session-turns 0.1.1 → 0.1.2

package/dist/gui-experimental.cjs

@@ -1,5 +1,5 @@
-"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 l=require("solid-js/web"),_=require("@opencode/plugin/gui"),i=require("solid-js");var we=l.template("<div class=sr-status>"),xe=l.template('<div class=sr-rail><div class=sr-head><span class=sr-title>会话轮次</span><button type=button class=sr-close title="关闭 (Esc)">×'),ye=l.template("<div class=sr-note>"),ke=l.template("<button type=button class=sr-turn><span class=sr-text><span class=sr-num>#</span> </span><span class=sr-dash>");const H="v11",ae="message-",re="session-turns:diag",U="session-turns:open",$e=40,Ee=200,Se=50,_e=30,Te=15e3,Ce=6e3,Le=800;let le=0,G="",W="";const se=s=>{const r=String(s?.text??"").split(`
+`).map(h=>h.trim()).find(h=>h.length>0);if(r)return r;const c=s?.files?.length??0;return c>0?`[附件 ×${c}]`:"(空消息)"},oe=s=>String(s).padStart(2,"0"),Me=s=>{const r=new Date(s??0);return`${oe(r.getHours())}:${oe(r.getMinutes())}`},ie=s=>new Promise(r=>setTimeout(r,s)),ce=()=>document.querySelector('[data-slot="session-timeline-scroll"] > .scroll-view__viewport')??document.querySelector('[data-slot="session-timeline-scroll"] [data-scrollable]')??(()=>{let r=document.querySelector("[data-message-id]")?.parentElement;for(;r;){const c=getComputedStyle(r);if(/(auto|scroll)/.test(c.overflowY)&&r.scrollHeight>r.clientHeight+1)return r;r=r.parentElement}})(),y=s=>document.getElementById(`${ae}${s}`)??[...document.querySelectorAll("[data-message-id]")].find(r=>r.getAttribute("data-message-id")===s),F=s=>{const r=ce(),c=[...document.querySelectorAll("[data-message-id]")],h=c[0]?.getAttribute("data-message-id")??"",P=W?` · 目标 ${y(W)?"在":"不在"} DOM`:"",T=h?` · 行ID ${h.slice(0,20)}`:"";let k="(空)";try{k=s.router.path()||"(空)"}catch{}return`轮次 ${le} · 容器 ${r?"OK":"缺失"} · DOM ${c.length} 行${P}${T} · 路由 ${k} · hash ${window.location.hash||"(空)"}${G?` · ${G}`:""}`},J=(s,r)=>{r.scrollIntoView({block:"start"});const c=s.querySelector("[data-session-title]"),h=c instanceof HTMLElement?c.offsetHeight:0;h&&(s.scrollTop-=h+12)},Ae=s=>{let r="";try{r=s.router.path()||""}catch{}return r.startsWith("/")?r:""},Ie=s=>{const r=document.createElement("a");r.setAttribute("href",s),r.setAttribute("replace",""),r.setAttribute("noscroll",""),r.style.display="none",document.body.appendChild(r);try{r.dispatchEvent(new MouseEvent("click",{bubbles:!0,cancelable:!0,button:0,view:window}))}finally{r.remove()}},Pe=`
 .sr-rail {
   position: fixed;
   top: 50%;
@@ -16,14 +16,52 @@
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: none;
+  /* keep wheel scrolling from chaining into the host timeline when the rail
+     reaches its own end */
+  overscroll-behavior: contain;
   z-index: 400;
   border-radius: 10px;
   color: var(--text-base, currentColor);
   background: transparent;
-  transition: width .18s ease;
+  transition: width .18s ease, background .18s ease, box-shadow .18s ease;
 }
 .sr-rail::-webkit-scrollbar { display: none; }
-.sr-rail[data-open="true"] { width: 360px; background: transparent; }
+.sr-rail[data-open="true"] {
+  width: 360px;
+  padding: 10px 8px;
+  justify-content: flex-start;
+  background: var(--surface-base, rgba(125,125,125,.16));
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  box-shadow: 0 6px 28px rgba(0,0,0,.22);
+}
+.sr-head {
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 2px 6px;
+  margin-bottom: 4px;
+  border-bottom: 1px solid rgba(127,127,127,.22);
+  flex-shrink: 0;
+  width: 100%;
+}
+.sr-rail[data-open="true"] .sr-head { display: flex; }
+.sr-title { font-size: 11px; opacity: .55; white-space: nowrap; }
+.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)); }
 .sr-turn {
   display: flex;
   align-items: center;
@@ -39,6 +77,7 @@
   font: inherit;
   border-radius: 4px;
 }
+.sr-turn:focus-visible, .sr-close:focus-visible { outline: 1px solid currentColor; outline-offset: -1px; }
 .sr-dash {
   display: block;
   width: 10px;
@@ -67,6 +106,7 @@
   background: transparent;
 }
 .sr-rail[data-open="true"] .sr-text { display: block; }
+.sr-num { opacity: .75; margin-right: 5px; font-variant-numeric: tabular-nums; }
 .sr-turn:hover .sr-text {
   opacity: 1;
   background: var(--surface-base-hover, rgba(127,127,127,.14));
@@ -76,6 +116,19 @@
   font-weight: 600;
   background: var(--surface-base-hover, rgba(127,127,127,.14));
 }
+/* brief highlight of the row a jump landed on */
+.sr-flash-target { animation: srPulse 1.5s ease-out 1; }
+@keyframes srPulse {
+  0%, 30% { background: rgba(255,170,60,.4); }
+  100% { background: transparent; }
+}
+.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 +144,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 De(s){const r=_.usePlugin(),[c,h]=i.createSignal([]),[P,T]=i.createSignal(""),[k,$]=i.createSignal(!1),[de,ue]=i.createSignal(""),[B,V]=i.createSignal(""),b=new Map;let D=0,C=!1,L=!1,j="",S;const M=()=>s.session()?.id,O=()=>{const e=[...b.values()].sort((n,o)=>n.created-o.created),t=i.untrack(c);t.length===e.length&&t.every((n,o)=>n===e[o])||(h(e),le=e.length)},K=e=>{const t=b.get(e.id);t&&t.created===e.time&&t.text===e.text||b.set(e.id,{id:e.id,created:e.time,text:e.text})},pe=async(e,t,n)=>{const o=n?{sessionID:e,type:"user",limit:t,cursor:n}:{sessionID:e,type:"user",limit:t,order:"desc"};return await r.client.message.list(o)},q=async(e,t)=>{const n=++D;C=!0;let o="";try{let a;const u=t==="full"?$e:1,f=t==="full"?Ee:Se;let d=t!=="full";for(let p=0;p<u;p++){let m;try{m=await pe(e,f,a)}catch(x){o=String(x?.message??x);break}if(n!==D)return;d||(b.clear(),d=!0);let g=0;for(const x of m?.data??[])b.has(x.id)||(K({id:x.id,time:x.time?.created??0,text:se(x)}),g++);O();const w=m?.cursor?.next;if(!w||g===0)break;a=w}}finally{C=!1,j=e,G=o,ue(b.size===0?o||"暂无用户消息":""),L&&(L=!1,Y())}},Y=()=>{S||(S=setTimeout(()=>{S=void 0;const e=i.untrack(M);e&&q(e,"light")},300))},Z=e=>{if(!(!e||e!==i.untrack(M))){if(C){L=!0;return}Y()}},fe=e=>{const t=e?.type;if(t==="message.updated"){const n=e?.data??{},o=n.info;o?.role==="user"&&o?.id&&(K({id:o.id,time:o.time?.created??0,text:se(o)}),O()),Z(n.sessionID)}else if(t==="message.removed"){const n=e?.data??{};n.messageID&&b.delete(n.messageID)&&O(),Z(n.sessionID)}else if(t==="location.shutdown"){const n=i.untrack(M);n&&j===n&&q(n,"full")}};i.onMount(()=>{let e=!1,t=0,n;(async()=>{for(;!e;){const u=r.client.event.subscribe()[Symbol.asyncIterator]();try{for(;!e;){const f=await u.next();if(f.done)break;t=0,fe(f.value)}}catch{}try{await u.return?.()}catch{}if(e)break;t++,await ie(Math.min(2e3*t,15e3))}})(),i.onCleanup(()=>{e=!0,clearTimeout(n),S&&clearTimeout(S)})}),i.createEffect(()=>{const e=M();e&&i.untrack(()=>{j!==e&&(D++,C=!1,L=!1,b.clear(),h([]),T(""),N="",q(e,"full"))})});let A;const I=()=>(A?.isConnected||(A=ce()),A),he=()=>{const e=I();if(!e)return;const t=e.querySelectorAll("[data-message-id]");if(t.length===0)return;const n=e.getBoundingClientRect().top+40;for(const o of t)if(o.getBoundingClientRect().bottom>=n){const a=o.getAttribute("data-message-id");a&&T(a);break}};let R=!1;const X=()=>{R||(R=!0,requestAnimationFrame(()=>{R=!1,he()}))};i.onMount(()=>{const e=()=>X();document.addEventListener("scroll",e,!0);const t=setInterval(X,1500);i.onCleanup(()=>{document.removeEventListener("scroll",e,!0),clearInterval(t)})});let Q=0;const v=(e,t=2600)=>{const n=++Q;V(e),setTimeout(()=>{n===Q&&V("")},t)};i.onMount(()=>{const e=n=>{n.key==="Escape"&&i.untrack(k)&&($(!1),n.stopPropagation())},t=n=>{if(!i.untrack(k))return;(n.composedPath?.()??[]).some(u=>u instanceof Element&&u.closest?.(".sr-rail"))||$(!1)};window.addEventListener("keydown",e,!0),document.addEventListener("pointerdown",t,!0),i.onCleanup(()=>{window.removeEventListener("keydown",e,!0),document.removeEventListener("pointerdown",t,!0)})}),i.onMount(()=>{const e=()=>v(`${H} · ${F(r)}`),t=()=>$(n=>!n);window.addEventListener(re,e),window.addEventListener(U,t),i.onCleanup(()=>{window.removeEventListener(re,e),window.removeEventListener(U,t)}),v(`会话轮次 ${H} 已加载`)});let N="",E=0,ee=0,te="";const z=e=>{try{e.classList.remove("sr-flash-target"),e.offsetWidth,e.classList.add("sr-flash-target"),setTimeout(()=>e.classList.remove("sr-flash-target"),1600)}catch{}},me=()=>{for(const e of c())if(y(e.id))return e},ne=(e,t)=>{Ie(`${e}#${ae}${t}`),N=t},ge=(e,t,n)=>new Promise(o=>{let a=!1,u,f,d;const p=w=>{if(!a){a=!0;try{u?.disconnect()}catch{}clearInterval(f),clearTimeout(d),o(w??null)}},m=()=>{if(t!==E)return p(null);const w=y(e);w&&p(w)},g=y(e);if(g)return p(g);u=new MutationObserver(m),u.observe(document.documentElement,{childList:!0,subtree:!0}),f=setInterval(m,120),d=setTimeout(()=>p(y(e)),Math.max(400,n))}),be=async e=>{const t=++E;W=e.id;const n=Date.now();if(e.id===te&&n-ee<Le){const d=y(e.id),p=I();if(d&&p){J(p,d),z(d);return}}ee=n,te=e.id;const o=I(),a=y(e.id);if(a&&o){J(o,a),z(a),v("已定位");return}const u=Ae(r);if(!u){v(`无法读取当前路由，无法定位 · ${F(r)}`);return}const f=Date.now()+Te;for(let d=0;d<_e&&Date.now()<f;d++){if(t!==E)return;if(v(d===0?"定位中…":`加载历史… ${d}`),N===e.id){const g=me()??c()[0];g&&(ne(u,g.id),await ie(120))}if(t!==E)return;ne(u,e.id);const p=Math.min(Ce,f-Date.now()),m=await ge(e.id,t,p);if(t!==E)return;if(m){const g=I()??o;g&&J(g,m),z(m),v("已定位");return}}t===E&&v(`未能定位 · ${F(r)}`)},ve=[l.createComponent(i.Show,{get when(){return B()},get children(){var e=we();return l.insert(e,B),e}}),(()=>{var e=xe(),t=e.firstChild,n=t.firstChild;n.firstChild;var o=n.nextSibling;return e.addEventListener("mouseleave",()=>$(!1)),e.addEventListener("mouseenter",()=>$(!0)),l.insert(n,(()=>{var a=l.memo(()=>c().length>0);return()=>a()?` · ${c().length}`:""})(),null),o.$$click=()=>$(!1),l.insert(e,l.createComponent(i.Show,{get when(){return c().length>0},get fallback(){return(()=>{var a=ye();return l.insert(a,()=>de()||`… ${H}`),a})()},get children(){return l.createComponent(i.For,{get each(){return c()},children:(a,u)=>(()=>{var f=ke(),d=f.firstChild,p=d.firstChild;p.firstChild;var m=p.nextSibling;return f.$$click=()=>{be(a)},l.insert(p,()=>u()+1,null),l.insert(d,()=>Me(a.created),m),l.insert(d,()=>a.text,null),l.effect(()=>l.setAttribute(f,"data-active",P()===a.id?"true":"false")),f})()})}}),null),l.effect(()=>l.setAttribute(e,"data-open",k()?"true":"false")),e})()];return l.createComponent(l.Portal,{get mount(){return document.body},children:ve})}const je=_.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(s){s.add(_.Style,Pe),s.add(_.Slot,{at:"window.bottom",render:()=>l.createComponent(i.Show,{get when(){return s.sessions.current()},get children(){return l.createComponent(De,{session:()=>s.sessions.current()})}})}),s.add(_.Command,()=>({id:"jump",title:s.t("command.jump"),description:s.t("command.jump.description"),group:s.t("command.jump"),section:"navigation",bind:"mod+alt+r",slash:{name:"turns"},run:()=>{window.dispatchEvent(new Event(U))}}))}});l.delegateEvents(["click"]);exports.default=je;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-session-turns",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "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,23 @@ import { Portal } from "solid-js/web"
 // constants / helpers
 // ---------------------------------------------------------------------------
 
-const VERSION = "v10"
+const VERSION = "v11"
 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
+const JUMP_ROUNDS = 30
+const JUMP_TOTAL_MS = 15000
+const JUMP_ROW_TIMEOUT_MS = 6000
+const SAME_TARGET_WINDOW_MS = 800
+
 // Filled by Rail.load()/jump() so the command palette can report diagnostics.
 let lastTurnCount = 0
 let lastNote = ""
@@ -143,14 +155,52 @@ const CSS = `
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: none;
+  /* keep wheel scrolling from chaining into the host timeline when the rail
+     reaches its own end */
+  overscroll-behavior: contain;
   z-index: 400;
   border-radius: 10px;
   color: var(--text-base, currentColor);
   background: transparent;
-  transition: width .18s ease;
+  transition: width .18s ease, background .18s ease, box-shadow .18s ease;
 }
 .sr-rail::-webkit-scrollbar { display: none; }
-.sr-rail[data-open="true"] { width: 360px; background: transparent; }
+.sr-rail[data-open="true"] {
+  width: 360px;
+  padding: 10px 8px;
+  justify-content: flex-start;
+  background: var(--surface-base, rgba(125,125,125,.16));
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  box-shadow: 0 6px 28px rgba(0,0,0,.22);
+}
+.sr-head {
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 2px 6px;
+  margin-bottom: 4px;
+  border-bottom: 1px solid rgba(127,127,127,.22);
+  flex-shrink: 0;
+  width: 100%;
+}
+.sr-rail[data-open="true"] .sr-head { display: flex; }
+.sr-title { font-size: 11px; opacity: .55; white-space: nowrap; }
+.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)); }
 .sr-turn {
   display: flex;
   align-items: center;
@@ -166,6 +216,7 @@ const CSS = `
   font: inherit;
   border-radius: 4px;
 }
+.sr-turn:focus-visible, .sr-close:focus-visible { outline: 1px solid currentColor; outline-offset: -1px; }
 .sr-dash {
   display: block;
   width: 10px;
@@ -194,6 +245,7 @@ const CSS = `
   background: transparent;
 }
 .sr-rail[data-open="true"] .sr-text { display: block; }
+.sr-num { opacity: .75; margin-right: 5px; font-variant-numeric: tabular-nums; }
 .sr-turn:hover .sr-text {
   opacity: 1;
   background: var(--surface-base-hover, rgba(127,127,127,.14));
@@ -203,6 +255,19 @@ const CSS = `
   font-weight: 600;
   background: var(--surface-base-hover, rgba(127,127,127,.14));
 }
+/* brief highlight of the row a jump landed on */
+.sr-flash-target { animation: srPulse 1.5s ease-out 1; }
+@keyframes srPulse {
+  0%, 30% { background: rgba(255,170,60,.4); }
+  100% { background: transparent; }
+}
+.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 +283,6 @@ const CSS = `
   white-space: pre-wrap;
   max-width: min(720px, 90vw);
 }
-.sr-note { font-size: 11px; opacity: .4; padding: 2px; }
 `
 
 // ---------------------------------------------------------------------------
@@ -233,93 +297,214 @@ function Rail(props) {
   const [note, setNote] = createSignal("")
   const [status, setStatus] = createSignal("")
 
-  let loading = false
+  // ---- 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 load = async (sessionID) => {
-    if (!sessionID || loading) return
-    loading = true
-    const collected = new Map()
-    let cursor
+  const sessionID = () => props.session()?.id
+
+  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 +513,98 @@ 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
+      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 row a jump landed on. The row may be unmounted by
+  // the virtual list right after; the timer then just no-ops.
+  const pulse = (row) => {
+    try {
+      row.classList.remove("sr-flash-target")
+      void row.offsetWidth // restart the animation when re-pulsing the same row
+      row.classList.add("sr-flash-target")
+      setTimeout(() => row.classList.remove("sr-flash-target"), 1600)
+    } 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 +617,63 @@ function Rail(props) {
     lastNavID = id
   }
 
+  // Resolves when the row enters the DOM (MutationObserver, with a cheap poll
+  // as a belt-and-braces fallback), or null on timeout / supersession.
+  const waitForRow = (messageID, token, timeout) =>
+    new Promise((resolve) => {
+      let done = false
+      let observer
+      let poll
+      let timer
+      const finish = (row) => {
+        if (done) return
+        done = true
+        try {
+          observer?.disconnect()
+        } catch {}
+        clearInterval(poll)
+        clearTimeout(timer)
+        resolve(row ?? null)
+      }
+      const check = () => {
+        if (token !== jumpToken) return finish(null)
+        const row = findRow(messageID)
+        if (row) finish(row)
+      }
+      const existing = findRow(messageID)
+      if (existing) return finish(existing)
+      observer = new MutationObserver(check)
+      observer.observe(document.documentElement, { childList: true, subtree: true })
+      poll = setInterval(check, 120)
+      timer = setTimeout(() => finish(findRow(messageID)), Math.max(400, timeout))
+    })
+
   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
     }
@@ -387,7 +687,10 @@ function Rail(props) {
     // 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++) {
+    // A newer click bumps jumpToken, which cancels this loop at every await.
+    const deadline = Date.now() + JUMP_TOTAL_MS
+    for (let round = 0; round < JUMP_ROUNDS && Date.now() < deadline; round++) {
+      if (token !== jumpToken) return
       flash(round === 0 ? "定位中…" : `加载历史… ${round}`)
 
       if (lastNavID === turn.id) {
@@ -397,20 +700,22 @@ function Rail(props) {
           await sleep(120)
         }
       }
+      if (token !== jumpToken) 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
+      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
       }
     }
 
-    flash(`未能定位 · ${diagnostics(ctx)}`)
+    if (token === jumpToken) flash(`未能定位 · ${diagnostics(ctx)}`)
   }
 
   const rail = (
@@ -424,9 +729,15 @@ function Rail(props) {
         onMouseEnter={() => setOpen(true)}
         onMouseLeave={() => setOpen(false)}
       >
+        <div class="sr-head">
+          <span class="sr-title">会话轮次{turns().length > 0 ? ` · ${turns().length}` : ""}</span>
+          <button type="button" class="sr-close" title="关闭 (Esc)" onClick={() => setOpen(false)}>
+            ×
+          </button>
+        </div>
         <Show when={turns().length > 0} fallback={<div class="sr-note">{note() || `… ${VERSION}`}</div>}>
           <For each={turns()}>
-            {(turn) => (
+            {(turn, index) => (
               <button
                 type="button"
                 class="sr-turn"
@@ -434,6 +745,7 @@ function Rail(props) {
                 onClick={() => void jump(turn)}
               >
                 <span class="sr-text">
+                  <span class="sr-num">#{index() + 1}</span>
                   {formatTime(turn.created)} {turn.text}
                 </span>
                 <span class="sr-dash" />
@@ -486,7 +798,6 @@ export default Plugin.define({
       slash: { name: "turns" },
       run: () => {
         window.dispatchEvent(new Event(OPEN_EVENT))
-        window.dispatchEvent(new Event(DIAG_EVENT))
       },
     }))
   },