opencode-session-turns 0.1.13 → 0.1.14

package/README.md

@@ -22,8 +22,8 @@ click a turn to jump straight to that message.
 - 列出当前会话的每一轮用户提问（从会话消息接口分页拉取，`type=user`）。
 - 鼠标移到窗口右缘的细条上自动展开，移开自动收起；长历史跳转期间面板保持展开。
 - 点击任意一轮，**跳转到对应消息**——包括很久以前、尚未渲染的历史轮次。
-- 深历史需要逐页加载时，头部实时显示「已加载 N 页 / 耗时 Xs」，目标轮次琥珀色脉冲，
-  底部状态条同步提示；按 `Esc` 或点 × 可随时取消。
+- 深历史需要逐页加载时，面板头部显示「加载历史中 · N 页 · Xs」，目标轮次带「加载中」
+  徽标并琥珀色脉冲；按 `Esc` 或点 × 可随时取消。
 - **历史预热**：宿主自己加载历史每页之间有 2 秒硬冷却，深历史跳转因此要等好几秒。
   轮次条会在你打开面板时（悬停或 `/turns`）后台把历史预热完并还原视口，
   之后所有跳转都是瞬时的；也可以点面板上的「预热」手动触发。

package/dist/gui-experimental.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("solid-js/web"),q=require("@opencode/plugin/gui"),l=require("solid-js");var Xt=a.template("<div class=sr-status>"),Qt=a.template('<span class="sr-title sr-progress">跳转中'),te=a.template("<div class=sr-rail><div class=sr-head><button type=button class=sr-close>×</button></div><div class=sr-list>"),ee=a.template("<span class=sr-title>会话轮次"),ne=a.template("<div class=sr-note>"),re=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 Lt="v16",ct="message-",Dt="session-turns:diag",dt="session-turns:open",se=40,oe=200,ie=50,ae=30,Pt=45e3,le=2e4,ce=8e3,de=12e3,ue=220,pe=800;let Bt=0,ut="",pt="",ft="";const jt=o=>{const s=String(o?.text??"").split(`
-`).map(p=>p.trim()).find(p=>p.length>0);if(s)return s;const d=o?.files?.length??0;return d>0?`[附件 ×${d}]`:"(空消息)"},Rt=o=>String(o).padStart(2,"0"),fe=o=>{const s=new Date(o??0);return`${Rt(s.getHours())}:${Rt(s.getMinutes())}`},ot=o=>new Promise(s=>setTimeout(s,o)),gt=()=>document.querySelector('[data-slot="session-timeline-scroll"] > .scroll-view__viewport')??document.querySelector('[data-slot="session-timeline-scroll"] [data-scrollable]')??(()=>{let s=document.querySelector("[data-message-id]")?.parentElement;for(;s;){const d=getComputedStyle(s);if(/(auto|scroll)/.test(d.overflowY)&&s.scrollHeight>s.clientHeight+1)return s;s=s.parentElement}})(),x=o=>{const s=document.getElementById(`${ct}${o}`);if(s)return s;const d=`[data-message-id="${o.replace(/"/g,'\\"')}"]`;for(const p of document.querySelectorAll(d))if(p.getAttribute("data-timeline-row")==="UserMessage"||p.querySelector('[data-slot="user-message-text"]'))return p},it=o=>{const s=gt(),d=[...document.querySelectorAll("[data-message-id]")],p=d[0]?.getAttribute("data-message-id")??"",S=ft?` · 目标 ${x(ft)?"在":"不在"} DOM`:"",$=p?` · 行ID ${p.slice(0,20)}`:"";let M="(空)";try{M=o.router.path()||"(空)"}catch{}return`轮次 ${Bt} · 容器 ${s?"OK":"缺失"} · DOM ${d.length} 行${S}${$} · 路由 ${M} · hash ${window.location.hash||"(空)"}${pt?` · ${pt}`:""}${ut?` · ${ut}`:""}`},ge=o=>{const s=o.getBoundingClientRect().top;let d=s;for(const p of o.querySelectorAll(".sticky, [data-session-title]")){if(!(p instanceof HTMLElement)||getComputedStyle(p).position!=="sticky"&&!p.hasAttribute("data-session-title"))continue;const $=p.getBoundingClientRect();$.height!==0&&($.top>s+4||(d=Math.max(d,$.bottom)))}return d},at=o=>{try{const s=gt();if(!s||!o.isConnected)return;const d=o.querySelector('[data-slot="user-message-text"]')??o,p=ge(s),S=d.getBoundingClientRect().top-(p+18);Math.abs(S)>2&&(s.scrollTop+=S),pt=`inset ${Math.round(p)} · delta ${Math.round(S)}`}catch{}},lt=o=>{at(o),setTimeout(()=>at(o),450),setTimeout(()=>at(o),1e3)},qt=o=>{let s="";try{s=o.router.path()||""}catch{}return s.startsWith("/")?s:""},he=o=>{const s=document.createElement("a");s.setAttribute("href",o),s.setAttribute("replace",""),s.setAttribute("noscroll",""),s.style.display="none",document.body.appendChild(s);try{s.dispatchEvent(new MouseEvent("click",{bubbles:!0,cancelable:!0,button:0,view:window}))}finally{s.remove()}},me=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("solid-js/web"),q=require("@opencode/plugin/gui"),l=require("solid-js");var Le=o.template("<div class=sr-status>"),Xe=o.template('<span class="sr-title sr-progress">加载历史中'),Qe=o.template("<div class=sr-foot>"),et=o.template("<div class=sr-rail><div class=sr-head><button type=button class=sr-close>×</button></div><div class=sr-list>"),tt=o.template("<span class=sr-title>会话轮次"),rt=o.template("<div class=sr-note>"),nt=o.template("<span class=sr-badge>加载中"),st=o.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 De="v16",le="message-",Pe="session-turns:diag",ce="session-turns:open",ot=40,at=200,it=50,lt=30,ct=45e3,dt=2e4,ut=8e3,pt=12e3,ft=220,gt=800;let Be=0,de="",ue="",pe="";const je=a=>{const s=String(a?.text??"").split(`
+`).map(p=>p.trim()).find(p=>p.length>0);if(s)return s;const d=a?.files?.length??0;return d>0?`[附件 ×${d}]`:"(空消息)"},Re=a=>String(a).padStart(2,"0"),ht=a=>{const s=new Date(a??0);return`${Re(s.getHours())}:${Re(s.getMinutes())}`},se=a=>new Promise(s=>setTimeout(s,a)),fe=()=>document.querySelector('[data-slot="session-timeline-scroll"] > .scroll-view__viewport')??document.querySelector('[data-slot="session-timeline-scroll"] [data-scrollable]')??(()=>{let s=document.querySelector("[data-message-id]")?.parentElement;for(;s;){const d=getComputedStyle(s);if(/(auto|scroll)/.test(d.overflowY)&&s.scrollHeight>s.clientHeight+1)return s;s=s.parentElement}})(),y=a=>{const s=document.getElementById(`${le}${a}`);if(s)return s;const d=`[data-message-id="${a.replace(/"/g,'\\"')}"]`;for(const p of document.querySelectorAll(d))if(p.getAttribute("data-timeline-row")==="UserMessage"||p.querySelector('[data-slot="user-message-text"]'))return p},oe=a=>{const s=fe(),d=[...document.querySelectorAll("[data-message-id]")],p=d[0]?.getAttribute("data-message-id")??"",S=pe?` · 目标 ${y(pe)?"在":"不在"} DOM`:"",$=p?` · 行ID ${p.slice(0,20)}`:"";let E="(空)";try{E=a.router.path()||"(空)"}catch{}return`轮次 ${Be} · 容器 ${s?"OK":"缺失"} · DOM ${d.length} 行${S}${$} · 路由 ${E} · hash ${window.location.hash||"(空)"}${ue?` · ${ue}`:""}${de?` · ${de}`:""}`},mt=a=>{const s=a.getBoundingClientRect().top;let d=s;for(const p of a.querySelectorAll(".sticky, [data-session-title]")){if(!(p instanceof HTMLElement)||getComputedStyle(p).position!=="sticky"&&!p.hasAttribute("data-session-title"))continue;const $=p.getBoundingClientRect();$.height!==0&&($.top>s+4||(d=Math.max(d,$.bottom)))}return d},ae=a=>{try{const s=fe();if(!s||!a.isConnected)return;const d=a.querySelector('[data-slot="user-message-text"]')??a,p=mt(s),S=d.getBoundingClientRect().top-(p+18);Math.abs(S)>2&&(s.scrollTop+=S),ue=`inset ${Math.round(p)} · delta ${Math.round(S)}`}catch{}},ie=a=>{ae(a),setTimeout(()=>ae(a),450),setTimeout(()=>ae(a),1e3)},qe=a=>{let s="";try{s=a.router.path()||""}catch{}return s.startsWith("/")?s:""},bt=a=>{const s=document.createElement("a");s.setAttribute("href",a),s.setAttribute("replace",""),s.setAttribute("noscroll",""),s.style.display="none",document.body.appendChild(s);try{s.dispatchEvent(new MouseEvent("click",{bubbles:!0,cancelable:!0,button:0,view:window}))}finally{s.remove()}},wt=`
 .sr-rail {
   position: fixed;
   top: 50%;
@@ -60,7 +60,10 @@
   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 */
+/* the scrollable list; the header stays fixed above it.
+   The collapsed rail must NOT be a scroll container: centering the content
+   inside a scroller overflows in both directions, so the browser clamps the
+   scroll offset and the list snaps to the top/bottom when the panel opens. */
 .sr-list {
   flex: 1;
   min-height: 0;
@@ -68,11 +71,15 @@
   flex-direction: column;
   justify-content: center;
   gap: 2px;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden;
   scrollbar-width: none;
 }
-.sr-rail[data-open="true"] .sr-list { justify-content: flex-start; gap: 1px; scrollbar-width: thin; }
+.sr-rail[data-open="true"] .sr-list {
+  justify-content: flex-start;
+  gap: 1px;
+  overflow-y: auto;
+  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; }
@@ -94,9 +101,6 @@
   color: inherit;
   font: inherit;
   border-radius: 4px;
-  /* long sessions: skip layout/paint for rows outside the panel viewport */
-  content-visibility: auto;
-  contain-intrinsic-size: 0 26px;
 }
 /* expanded: dash flips to a left-side indicator, content reads left-to-right */
 .sr-rail[data-open="true"] .sr-turn {
@@ -192,6 +196,17 @@
     box-shadow: inset 0 0 0 2px rgba(255,170,60,0), inset 0 0 0 rgba(255,170,60,0);
   }
 }
+.sr-badge {
+  font-size: 10px;
+  line-height: 1.4;
+  padding: 0 5px;
+  border-radius: 4px;
+  color: rgba(255,170,60,.95);
+  background: rgba(255,170,60,.14);
+  border: 1px solid rgba(255,170,60,.35);
+  flex-shrink: 0;
+  white-space: nowrap;
+}
 .sr-note {
   display: none;
   font-size: 11px;
@@ -199,19 +214,32 @@
   padding: 2px;
 }
 .sr-rail[data-open="true"] .sr-note { display: block; }
+.sr-foot {
+  flex-shrink: 0;
+  font-size: 11px;
+  line-height: 1.5;
+  color: rgba(255,170,60,.92);
+  padding: 6px 2px 0;
+  margin-top: 6px;
+  border-top: 1px solid rgba(127,127,127,.2);
+  white-space: pre-wrap;
+  max-height: 64px;
+  overflow: hidden;
+}
 .sr-status {
   position: fixed;
-  right: 30px;
-  bottom: 150px;
+  right: 42px;
+  top: 50%;
+  transform: translateY(-50%);
   z-index: 401;
   font-size: 11px;
-  padding: 3px 8px;
+  line-height: 1.5;
+  padding: 4px 9px;
   border-radius: 6px;
-  background: var(--background-strong, rgba(0,0,0,.75));
+  background: var(--background-strong, rgba(0,0,0,.82));
   color: var(--text-base, #fff);
-  opacity: .9;
-  pointer-events: none;
+  border: 1px solid rgba(127,127,127,.25);
   white-space: pre-wrap;
-  max-width: min(720px, 90vw);
+  max-width: 260px;
 }
-`;function be(o){const s=q.usePlugin(),[d,p]=l.createSignal([]),[S,$]=l.createSignal(""),[M,T]=l.createSignal(!1),[Jt,Ot]=l.createSignal(""),[ht,mt]=l.createSignal(""),[y,B]=l.createSignal(!1),[G,L]=l.createSignal(0),[W,D]=l.createSignal(0),[ve,J]=l.createSignal(0),[V,O]=l.createSignal(""),E=new Map;let K=0,H=!1,N=!1,Y="",P;const v=()=>o.session()?.id,Z=()=>{const t=[...E.values()].sort((n,i)=>n.created-i.created),e=l.untrack(d);e.length===t.length&&e.every((n,i)=>n===t[i])||(p(t),Bt=t.length)},bt=t=>{const e=E.get(t.id);e&&e.created===t.time&&e.text===t.text||E.set(t.id,{id:t.id,created:t.time,text:t.text})},Ht=async(t,e,n)=>{const i=n?{sessionID:t,type:"user",limit:e,cursor:n}:{sessionID:t,type:"user",limit:e,order:"desc"};return await s.client.message.list(i)},X=async(t,e)=>{const n=++K;H=!0;let i="";try{let r;const c=e==="full"?se:1,u=e==="full"?oe:ie;let h=e!=="full";for(let w=0;w<c;w++){let m;try{m=await Ht(t,u,r)}catch(g){i=String(g?.message??g);break}if(n!==K)return;h||(E.clear(),h=!0);let f=0;for(const g of m?.data??[])E.has(g.id)||(bt({id:g.id,time:g.time?.created??0,text:jt(g)}),f++);Z();const b=m?.cursor?.next;if(!b||f===0)break;r=b}}finally{H=!1,Y=t,ut=i,Ot(E.size===0?i||"暂无用户消息":""),N&&(N=!1,wt())}},wt=()=>{P||(P=setTimeout(()=>{P=void 0;const t=l.untrack(v);t&&X(t,"light")},300))},vt=t=>{if(!(!t||t!==l.untrack(v))){if(H){N=!0;return}wt()}},Nt=t=>{const e=t?.type;if(e==="message.updated"){const n=t?.data??{},i=n.info;i?.role==="user"&&i?.id&&(bt({id:i.id,time:i.time?.created??0,text:jt(i)}),Z()),vt(n.sessionID)}else if(e==="message.removed"){const n=t?.data??{};n.messageID&&E.delete(n.messageID)&&Z(),vt(n.sessionID)}else if(e==="location.shutdown"){const n=l.untrack(v);n&&Y===n&&X(n,"full")}};l.onMount(()=>{let t=!1,e=0,n;(async()=>{for(;!t;){const c=s.client.event.subscribe()[Symbol.asyncIterator]();try{for(;!t;){const u=await c.next();if(u.done)break;e=0,Nt(u.value)}}catch{}try{await c.return?.()}catch{}if(t)break;e++,await ot(Math.min(2e3*e,15e3))}})(),l.onCleanup(()=>{t=!0,clearTimeout(n),P&&clearTimeout(P)})}),l.createEffect(()=>{const t=v();t&&l.untrack(()=>{Y!==t&&(K++,H=!1,N=!1,E.clear(),p([]),$(""),tt="",X(t,"full"))})});let F;const _=()=>(F?.isConnected||(F=gt()),F),Ft=()=>{const t=_();if(!t)return;const e=t.querySelectorAll("[data-message-id]");if(e.length===0)return;const n=t.getBoundingClientRect().top+40;for(const i of e)if(i.getBoundingClientRect().bottom>=n){const r=i.getAttribute("data-message-id");r&&$(r);break}};let Q=!1;const xt=()=>{Q||(Q=!0,requestAnimationFrame(()=>{Q=!1,Ft()}))};l.onMount(()=>{const t=()=>xt();document.addEventListener("scroll",t,!0);const e=setInterval(xt,1500);l.onCleanup(()=>{document.removeEventListener("scroll",t,!0),clearInterval(e)})});let yt=0;const I=(t,e=2600)=>{const n=++yt;mt(t),setTimeout(()=>{n===yt&&mt("")},e)};l.onMount(()=>{const t=n=>{if(n.key==="Escape"){if(l.untrack(y)){Et(),n.stopPropagation();return}l.untrack(M)&&(T(!1),n.stopPropagation())}},e=n=>{if(!l.untrack(M))return;(n.composedPath?.()??[]).some(c=>c instanceof Element&&c.closest?.(".sr-rail"))||T(!1)};window.addEventListener("keydown",t,!0),document.addEventListener("pointerdown",e,!0),l.onCleanup(()=>{window.removeEventListener("keydown",t,!0),document.removeEventListener("pointerdown",e,!0)})}),l.onMount(()=>{const t=()=>I(`${Lt} · ${it(s)}`),e=()=>{T(n=>!n),Ct()};window.addEventListener(Dt,t),window.addEventListener(dt,e),l.onCleanup(()=>{window.removeEventListener(Dt,t),window.removeEventListener(dt,e)})});let tt="",C=0,kt=0,St="";const et=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{}},Ut=()=>{for(const t of d())if(x(t.id))return t},nt=(t,e)=>{he(`${t}#${ct}${e}`),tt=e},$t=()=>{const e=_()?.querySelectorAll("[data-message-id]")??[];if(e.length===0)return"0";const n=e[0].getAttribute("data-message-id")??"",i=e[e.length-1].getAttribute("data-message-id")??"";return`${e.length}:${n}:${i}`},zt=(t,e,n,i)=>new Promise(r=>{let c=!1,u,h,w;const m=Date.now();let b=$t(),g=m,R=0;const k=z=>{if(!c){c=!0;try{u?.disconnect()}catch{}clearInterval(h),clearTimeout(w),r(z??null)}},A=z=>{if(e!==C)return k(null);const Tt=z?x(t):document.getElementById(`${ct}${t}`);if(Tt)return k(Tt);if(!z)return;const Mt=$t(),It=Date.now();if(Mt!==b){b=Mt,g=It,R++,i?.(R);return}const Zt=R>0?ce:de;It-g>Zt&&k(null)},At=x(t);if(At)return k(At);u=new MutationObserver(()=>A(!1)),u.observe(document.documentElement,{childList:!0,subtree:!0}),h=setInterval(()=>A(!0),120),w=setTimeout(()=>k(x(t)),Math.max(400,n))}),Et=()=>{C++,B(!1),L(0),D(0),J(0),O(""),I("已取消跳转")},Gt=async t=>{if(U()&&Vt(),y()&&V()===t.id){I(`正在跳转 · 已加载 ${G()} 页 · ${W()}s`,Pt);return}const e=++C;B(!1),L(0),D(0),J(0),O(""),ft=t.id;const n=Date.now();if(t.id===St&&n-kt<pe){const f=x(t.id),b=_();if(f&&b){lt(f),et(f);return}}kt=n,St=t.id;const i=_(),r=x(t.id);if(r&&i){lt(r),et(r);return}const c=qt(s);if(!c){I(`无法读取当前路由，无法定位 · ${it(s)}`);return}const u=v();B(!0),O(t.id),L(0),D(0),T(!0),I(U()?"正在预热历史，请稍候…":"正在加载历史…",5e3);const h=Date.now(),w=setInterval(()=>{D(Math.round((Date.now()-h)/1e3))},500);let m=0;try{const f=Date.now()+Pt;for(let b=0;b<ae&&Date.now()<f;b++){if(e!==C||v()!==u)return;if(J(b+1),tt===t.id){const A=Ut()??d()[0];A&&(nt(c,A.id),await ot(ue))}if(e!==C||v()!==u)return;nt(c,t.id);let g=0;const R=Math.min(le,f-Date.now()),k=await zt(t.id,e,R,A=>{g=A,L(m+A)});if(m+=g,e!==C||v()!==u)return;if(k){lt(k),et(k);return}}e===C&&I(`未能定位 · ${it(s)}`)}finally{clearInterval(w),e===C&&(B(!1),L(0),D(0),J(0),O(""))}},[U,rt]=l.createSignal(!1);let j=0,st="";const Wt=()=>{const t=_();if(!t)return;const e=t.getBoundingClientRect();for(const n of t.querySelectorAll("[data-message-id]")){const i=n.getBoundingClientRect();if(i.bottom<=e.top+1)continue;const r=n.getAttribute("data-message-id");if(r)return{el:n,id:r,offset:i.top-e.top}}},_t=t=>{if(!t)return;const e=_();if(!e)return;const n=t.el?.isConnected?t.el:x(t.id);if(!n)return;const i=e.getBoundingClientRect(),r=n.getBoundingClientRect().top-i.top-t.offset;Math.abs(r)>2&&(e.scrollTop+=r)},Vt=()=>{j++,rt(!1)},Ct=()=>{const t=v();!t||U()||st!==t&&(d().length<15||Kt())},Kt=async()=>{if(U())return;const t=qt(s),e=d()[0],n=v();if(!t||!e||!n||st===n&&x(e.id))return;const i=++j,r=Wt(),c=_(),u=c?c.scrollTop+c.clientHeight>=c.scrollHeight-32:!0;rt(!0);try{nt(t,e.id);const h=Date.now()+12e4,w=setInterval(()=>_t(r),150);try{for(;Date.now()<h&&i===j&&!x(e.id);)await ot(250)}finally{clearInterval(w)}if(i!==j)return;if(_t(r),u){const m=_();m&&(m.scrollTop=m.scrollHeight)}st=n}finally{i===j&&rt(!1)}};l.createEffect(()=>{y()&&V()&&requestAnimationFrame(()=>{try{document.querySelector('.sr-list .sr-turn[data-busy="true"]')?.scrollIntoView({block:"nearest"})}catch{}})});const Yt=[a.createComponent(l.Show,{get when(){return ht()},get children(){var t=Xt();return a.insert(t,ht),t}}),(()=>{var t=te(),e=t.firstChild,n=e.firstChild,i=e.nextSibling;return t.addEventListener("mouseleave",()=>{y()||T(!1)}),t.addEventListener("mouseenter",()=>{T(!0),Ct()}),a.insert(e,a.createComponent(l.Show,{get when(){return y()},get fallback(){return(()=>{var r=ee();return r.firstChild,a.insert(r,(()=>{var c=a.memo(()=>d().length>0);return()=>c()?` · ${d().length}`:""})(),null),r})()},get children(){var r=Qt();return r.firstChild,a.insert(r,(()=>{var c=a.memo(()=>G()>0);return()=>c()?` · 已加载 ${G()} 页`:""})(),null),a.insert(r,(()=>{var c=a.memo(()=>W()>0);return()=>c()?` · ${W()}s`:""})(),null),r}}),n),n.$$click=()=>{y()?Et():T(!1)},a.insert(i,a.createComponent(l.Show,{get when(){return d().length>0},get fallback(){return(()=>{var r=ne();return a.insert(r,()=>Jt()||`… ${Lt}`),r})()},get children(){return a.createComponent(l.For,{get each(){return d()},children:(r,c)=>(()=>{var u=re(),h=u.firstChild,w=h.firstChild;w.firstChild;var m=w.nextSibling;return u.$$click=()=>{Gt(r)},a.insert(w,()=>c()+1,null),a.insert(m,()=>fe(r.created)),a.insert(h,()=>r.text,null),a.effect(f=>{var b=S()===r.id?"true":"false",g=y()&&V()===r.id?"true":"false";return b!==f.e&&a.setAttribute(u,"data-active",f.e=b),g!==f.t&&a.setAttribute(u,"data-busy",f.t=g),f},{e:void 0,t:void 0}),u})()})}})),a.effect(r=>{var c=M()?"true":"false",u=y()?"true":"false",h=y()?"取消跳转 (Esc)":"关闭 (Esc)";return c!==r.e&&a.setAttribute(t,"data-open",r.e=c),u!==r.t&&a.setAttribute(t,"data-jumping",r.t=u),h!==r.a&&a.setAttribute(n,"title",r.a=h),r},{e:void 0,t:void 0,a:void 0}),t})()];return a.createComponent(a.Portal,{get mount(){return document.body},children:Yt})}const we=q.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(q.Style,me),o.add(q.Slot,{at:"window.bottom",render:()=>a.createComponent(l.Show,{get when(){return o.sessions.current()},get children(){return a.createComponent(be,{session:()=>o.sessions.current()})}})}),o.add(q.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(dt))}}))}});a.delegateEvents(["click"]);exports.default=we;
+`;function xt(a){const s=q.usePlugin(),[d,p]=l.createSignal([]),[S,$]=l.createSignal(""),[E,I]=l.createSignal(!1),[Je,Oe]=l.createSignal(""),[L,ge]=l.createSignal(""),[x,B]=l.createSignal(!1),[he,D]=l.createSignal(0),[me,P]=l.createSignal(0),[yt,J]=l.createSignal(0),[O,N]=l.createSignal(""),_=new Map;let W=0,H=!1,z=!1,V="",j;const v=()=>a.session()?.id,Y=()=>{const e=[..._.values()].sort((r,i)=>r.created-i.created),t=l.untrack(d);t.length===e.length&&t.every((r,i)=>r===e[i])||(p(e),Be=e.length)},be=e=>{const t=_.get(e.id);t&&t.created===e.time&&t.text===e.text||_.set(e.id,{id:e.id,created:e.time,text:e.text})},Ne=async(e,t,r)=>{const i=r?{sessionID:e,type:"user",limit:t,cursor:r}:{sessionID:e,type:"user",limit:t,order:"desc"};return await s.client.message.list(i)},K=async(e,t)=>{const r=++W;H=!0;let i="";try{let n;const c=t==="full"?ot:1,u=t==="full"?at:it;let g=t!=="full";for(let b=0;b<c;b++){let m;try{m=await Ne(e,u,n)}catch(h){i=String(h?.message??h);break}if(r!==W)return;g||(_.clear(),g=!0);let w=0;for(const h of m?.data??[])_.has(h.id)||(be({id:h.id,time:h.time?.created??0,text:je(h)}),w++);Y();const f=m?.cursor?.next;if(!f||w===0)break;n=f}}finally{H=!1,V=e,de=i,Oe(_.size===0?i||"暂无用户消息":""),z&&(z=!1,we())}},we=()=>{j||(j=setTimeout(()=>{j=void 0;const e=l.untrack(v);e&&K(e,"light")},300))},xe=e=>{if(!(!e||e!==l.untrack(v))){if(H){z=!0;return}we()}},He=e=>{const t=e?.type;if(t==="message.updated"){const r=e?.data??{},i=r.info;i?.role==="user"&&i?.id&&(be({id:i.id,time:i.time?.created??0,text:je(i)}),Y()),xe(r.sessionID)}else if(t==="message.removed"){const r=e?.data??{};r.messageID&&_.delete(r.messageID)&&Y(),xe(r.sessionID)}else if(t==="location.shutdown"){const r=l.untrack(v);r&&V===r&&K(r,"full")}};l.onMount(()=>{let e=!1,t=0,r;(async()=>{for(;!e;){const c=s.client.event.subscribe()[Symbol.asyncIterator]();try{for(;!e;){const u=await c.next();if(u.done)break;t=0,He(u.value)}}catch{}try{await c.return?.()}catch{}if(e)break;t++,await se(Math.min(2e3*t,15e3))}})(),l.onCleanup(()=>{e=!0,clearTimeout(r),j&&clearTimeout(j)})}),l.createEffect(()=>{const e=v();e&&l.untrack(()=>{V!==e&&(W++,H=!1,z=!1,_.clear(),p([]),$(""),X="",K(e,"full"))})});let F;const C=()=>(F?.isConnected||(F=fe()),F),ze=()=>{const e=C();if(!e)return;const t=e.querySelectorAll("[data-message-id]");if(t.length===0)return;const r=e.getBoundingClientRect().top+40;for(const i of t)if(i.getBoundingClientRect().bottom>=r){const n=i.getAttribute("data-message-id");n&&$(n);break}};let Z=!1;const ve=()=>{Z||(Z=!0,requestAnimationFrame(()=>{Z=!1,ze()}))};l.onMount(()=>{const e=()=>ve();document.addEventListener("scroll",e,!0);const t=setInterval(ve,1500);l.onCleanup(()=>{document.removeEventListener("scroll",e,!0),clearInterval(t)})});let ye=0;const U=(e,t=2600)=>{const r=++ye;ge(e),setTimeout(()=>{r===ye&&ge("")},t)};l.onMount(()=>{const e=r=>{if(r.key==="Escape"){if(l.untrack(x)){Ee(),r.stopPropagation();return}l.untrack(E)&&(I(!1),r.stopPropagation())}},t=r=>{if(!l.untrack(E))return;(r.composedPath?.()??[]).some(c=>c instanceof Element&&c.closest?.(".sr-rail"))||I(!1)};window.addEventListener("keydown",e,!0),document.addEventListener("pointerdown",t,!0),l.onCleanup(()=>{window.removeEventListener("keydown",e,!0),document.removeEventListener("pointerdown",t,!0)})}),l.onMount(()=>{const e=()=>U(`${De} · ${oe(s)}`),t=()=>{I(r=>!r),Ce()};window.addEventListener(Pe,e),window.addEventListener(ce,t),l.onCleanup(()=>{window.removeEventListener(Pe,e),window.removeEventListener(ce,t)})});let X="",T=0,ke=0,Se="";const Q=e=>{try{const t=e.querySelector('[data-slot="user-message-text"]')??e.querySelector('[data-slot="user-message-body"]')??e;t.classList.remove("sr-flash-ring"),t.offsetWidth,t.classList.add("sr-flash-ring"),setTimeout(()=>t.classList.remove("sr-flash-ring"),1900)}catch{}},Fe=()=>{for(const e of d())if(y(e.id))return e},ee=(e,t)=>{bt(`${e}#${le}${t}`),X=t},$e=()=>{const t=C()?.querySelectorAll("[data-message-id]")??[];if(t.length===0)return"0";const r=t[0].getAttribute("data-message-id")??"",i=t[t.length-1].getAttribute("data-message-id")??"";return`${t.length}:${r}:${i}`},Ue=(e,t,r,i)=>new Promise(n=>{let c=!1,u,g,b;const m=Date.now();let f=$e(),h=m,A=0;const k=G=>{if(!c){c=!0;try{u?.disconnect()}catch{}clearInterval(g),clearTimeout(b),n(G??null)}},M=G=>{if(t!==T)return k(null);const Ae=G?y(e):document.getElementById(`${le}${e}`);if(Ae)return k(Ae);if(!G)return;const Me=$e(),Ie=Date.now();if(Me!==f){f=Me,h=Ie,A++,i?.(A);return}const Ze=A>0?ut:pt;Ie-h>Ze&&k(null)},Te=y(e);if(Te)return k(Te);u=new MutationObserver(()=>M(!1)),u.observe(document.documentElement,{childList:!0,subtree:!0}),g=setInterval(()=>M(!0),120),b=setTimeout(()=>k(y(e)),Math.max(400,r))}),Ee=()=>{T++,B(!1),D(0),P(0),J(0),N(""),U("已取消跳转")},Ge=async e=>{if(te()&&Ve(),x()&&O()===e.id)return;const t=++T;B(!1),D(0),P(0),J(0),N(""),pe=e.id;const r=Date.now();if(e.id===Se&&r-ke<gt){const w=y(e.id),f=C();if(w&&f){ie(w),Q(w);return}}ke=r,Se=e.id;const i=C(),n=y(e.id);if(n&&i){ie(n),Q(n);return}const c=qe(s);if(!c){U(`无法读取当前路由，无法定位 · ${oe(s)}`);return}const u=v();B(!0),N(e.id),D(0),P(0),I(!0);const g=Date.now(),b=setInterval(()=>{P(Math.round((Date.now()-g)/1e3))},500);let m=0;try{const w=Date.now()+ct;for(let f=0;f<lt&&Date.now()<w;f++){if(t!==T||v()!==u)return;if(J(f+1),X===e.id){const M=Fe()??d()[0];M&&(ee(c,M.id),await se(ft))}if(t!==T||v()!==u)return;ee(c,e.id);let h=0;const A=Math.min(dt,w-Date.now()),k=await Ue(e.id,t,A,M=>{h=M,D(m+M)});if(m+=h,t!==T||v()!==u)return;if(k){ie(k),Q(k);return}}t===T&&U(`未能定位 · ${oe(s)}`)}finally{clearInterval(b),t===T&&(B(!1),D(0),P(0),J(0),N(""))}},[te,re]=l.createSignal(!1);let R=0,ne="";const We=()=>{const e=C();if(!e)return;const t=e.getBoundingClientRect();for(const r of e.querySelectorAll("[data-message-id]")){const i=r.getBoundingClientRect();if(i.bottom<=t.top+1)continue;const n=r.getAttribute("data-message-id");if(n)return{el:r,id:n,offset:i.top-t.top}}},_e=e=>{if(!e)return;const t=C();if(!t)return;const r=e.el?.isConnected?e.el:y(e.id);if(!r)return;const i=t.getBoundingClientRect(),n=r.getBoundingClientRect().top-i.top-e.offset;Math.abs(n)>2&&(t.scrollTop+=n)},Ve=()=>{R++,re(!1)},Ce=()=>{const e=v();!e||te()||ne!==e&&(d().length<15||Ye())},Ye=async()=>{if(te())return;const e=qe(s),t=d()[0],r=v();if(!e||!t||!r||ne===r&&y(t.id))return;const i=++R,n=We(),c=C(),u=c?c.scrollTop+c.clientHeight>=c.scrollHeight-32:!0;re(!0);try{ee(e,t.id);const g=Date.now()+12e4,b=setInterval(()=>_e(n),150);try{for(;Date.now()<g&&i===R&&!y(t.id);)await se(250)}finally{clearInterval(b)}if(i!==R)return;if(_e(n),u){const m=C();m&&(m.scrollTop=m.scrollHeight)}ne=r}finally{i===R&&re(!1)}};l.createEffect(()=>{x()&&O()&&requestAnimationFrame(()=>{try{document.querySelector('.sr-list .sr-turn[data-busy="true"]')?.scrollIntoView({block:"nearest"})}catch{}})});const Ke=[o.createComponent(l.Show,{get when(){return L()},get children(){var e=Le();return o.insert(e,L),e}}),(()=>{var e=et(),t=e.firstChild,r=t.firstChild,i=t.nextSibling;return e.addEventListener("mouseleave",()=>{x()||I(!1)}),e.addEventListener("mouseenter",()=>{I(!0),Ce()}),o.insert(t,o.createComponent(l.Show,{get when(){return x()},get fallback(){return(()=>{var n=tt();return n.firstChild,o.insert(n,(()=>{var c=o.memo(()=>d().length>0);return()=>c()?` · ${d().length}`:""})(),null),n})()},get children(){var n=Xe();return n.firstChild,o.insert(n,(()=>{var c=o.memo(()=>he()>0);return()=>c()?` · ${he()} 页`:""})(),null),o.insert(n,(()=>{var c=o.memo(()=>me()>0);return()=>c()?` · ${me()}s`:""})(),null),n}}),r),r.$$click=()=>{x()?Ee():I(!1)},o.insert(i,o.createComponent(l.Show,{get when(){return d().length>0},get fallback(){return(()=>{var n=rt();return o.insert(n,()=>Je()||`… ${De}`),n})()},get children(){return o.createComponent(l.For,{get each(){return d()},children:(n,c)=>(()=>{var u=st(),g=u.firstChild,b=g.firstChild;b.firstChild;var m=b.nextSibling,w=g.nextSibling;return u.$$click=()=>{Ge(n)},o.insert(b,()=>c()+1,null),o.insert(m,()=>ht(n.created)),o.insert(g,()=>n.text,null),o.insert(u,o.createComponent(l.Show,{get when(){return o.memo(()=>!!x())()&&O()===n.id},get children(){return nt()}}),w),o.effect(f=>{var h=S()===n.id?"true":"false",A=x()&&O()===n.id?"true":"false";return h!==f.e&&o.setAttribute(u,"data-active",f.e=h),A!==f.t&&o.setAttribute(u,"data-busy",f.t=A),f},{e:void 0,t:void 0}),u})()})}})),o.insert(e,o.createComponent(l.Show,{get when(){return o.memo(()=>!!E())()&&L()},get children(){var n=Qe();return o.insert(n,L),n}}),null),o.effect(n=>{var c=E()?"true":"false",u=x()?"true":"false",g=x()?"取消跳转 (Esc)":"关闭 (Esc)";return c!==n.e&&o.setAttribute(e,"data-open",n.e=c),u!==n.t&&o.setAttribute(e,"data-jumping",n.t=u),g!==n.a&&o.setAttribute(r,"title",n.a=g),n},{e:void 0,t:void 0,a:void 0}),e})(),o.createComponent(l.Show,{get when(){return o.memo(()=>!E())()&&L()},get children(){var e=Le();return o.insert(e,L),e}})];return o.createComponent(o.Portal,{get mount(){return document.body},children:Ke})}const vt=q.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(a){a.add(q.Style,wt),a.add(q.Slot,{at:"window.bottom",render:()=>o.createComponent(l.Show,{get when(){return a.sessions.current()},get children(){return o.createComponent(xt,{session:()=>a.sessions.current()})}})}),a.add(q.Command,()=>({id:"jump",title:a.t("command.jump"),description:a.t("command.jump.description"),group:a.t("command.jump"),section:"navigation",bind:"mod+alt+r",slash:{name:"turns"},run:()=>{window.dispatchEvent(new Event(ce))}}))}});o.delegateEvents(["click"]);exports.default=vt;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-session-turns",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "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

@@ -253,7 +253,10 @@ const CSS = `
   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 */
+/* the scrollable list; the header stays fixed above it.
+   The collapsed rail must NOT be a scroll container: centering the content
+   inside a scroller overflows in both directions, so the browser clamps the
+   scroll offset and the list snaps to the top/bottom when the panel opens. */
 .sr-list {
   flex: 1;
   min-height: 0;
@@ -261,11 +264,15 @@ const CSS = `
   flex-direction: column;
   justify-content: center;
   gap: 2px;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden;
   scrollbar-width: none;
 }
-.sr-rail[data-open="true"] .sr-list { justify-content: flex-start; gap: 1px; scrollbar-width: thin; }
+.sr-rail[data-open="true"] .sr-list {
+  justify-content: flex-start;
+  gap: 1px;
+  overflow-y: auto;
+  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; }
@@ -287,9 +294,6 @@ const CSS = `
   color: inherit;
   font: inherit;
   border-radius: 4px;
-  /* long sessions: skip layout/paint for rows outside the panel viewport */
-  content-visibility: auto;
-  contain-intrinsic-size: 0 26px;
 }
 /* expanded: dash flips to a left-side indicator, content reads left-to-right */
 .sr-rail[data-open="true"] .sr-turn {
@@ -385,6 +389,17 @@ const CSS = `
     box-shadow: inset 0 0 0 2px rgba(255,170,60,0), inset 0 0 0 rgba(255,170,60,0);
   }
 }
+.sr-badge {
+  font-size: 10px;
+  line-height: 1.4;
+  padding: 0 5px;
+  border-radius: 4px;
+  color: rgba(255,170,60,.95);
+  background: rgba(255,170,60,.14);
+  border: 1px solid rgba(255,170,60,.35);
+  flex-shrink: 0;
+  white-space: nowrap;
+}
 .sr-note {
   display: none;
   font-size: 11px;
@@ -392,20 +407,33 @@ const CSS = `
   padding: 2px;
 }
 .sr-rail[data-open="true"] .sr-note { display: block; }
+.sr-foot {
+  flex-shrink: 0;
+  font-size: 11px;
+  line-height: 1.5;
+  color: rgba(255,170,60,.92);
+  padding: 6px 2px 0;
+  margin-top: 6px;
+  border-top: 1px solid rgba(127,127,127,.2);
+  white-space: pre-wrap;
+  max-height: 64px;
+  overflow: hidden;
+}
 .sr-status {
   position: fixed;
-  right: 30px;
-  bottom: 150px;
+  right: 42px;
+  top: 50%;
+  transform: translateY(-50%);
   z-index: 401;
   font-size: 11px;
-  padding: 3px 8px;
+  line-height: 1.5;
+  padding: 4px 9px;
   border-radius: 6px;
-  background: var(--background-strong, rgba(0,0,0,.75));
+  background: var(--background-strong, rgba(0,0,0,.82));
   color: var(--text-base, #fff);
-  opacity: .9;
-  pointer-events: none;
+  border: 1px solid rgba(127,127,127,.25);
   white-space: pre-wrap;
-  max-width: min(720px, 90vw);
+  max-width: 260px;
 }
 `
 
@@ -851,12 +879,9 @@ function Rail(props) {
 
     // Clicking the same turn again while its jump is running must NOT restart
     // the loop: every restart cancels the host's in-flight page load, which is
-    // what makes a deep jump advance only one page per click. Re-affirm the
-    // progress instead and let the running loop finish.
-    if (jumping() && busyID() === turn.id) {
-      flash(`正在跳转 · 已加载 ${jumpPages()} 页 · ${jumpElapsed()}s`, JUMP_TOTAL_MS)
-      return
-    }
+    // what makes a deep jump advance only one page per click. The header
+    // already shows the progress, so just leave it running.
+    if (jumping() && busyID() === turn.id) return
 
     const token = ++jumpToken
     // A new click always owns the progress UI. This also clears a previous
@@ -920,9 +945,8 @@ function Rail(props) {
     setJumpElapsed(0)
     // Pin the panel open even if the pointer has left it meanwhile.
     setOpen(true)
-    // Only say something when the click cannot be served instantly: the target
-    // is not in the DOM yet, so the host has to load history first.
-    flash(warming() ? "正在预热历史，请稍候…" : "正在加载历史…", 5000)
+    // The loading state is shown in the panel header and on the target row -
+    // no toast needed, the toast would land outside the user's focus.
     const startedAt = Date.now()
     const elapsedTimer = setInterval(() => {
       setJumpElapsed(Math.round((Date.now() - startedAt) / 1000))
@@ -1120,7 +1144,7 @@ function Rail(props) {
             }
           >
             <span class="sr-title sr-progress">
-              跳转中{jumpPages() > 0 ? ` · 已加载 ${jumpPages()} 页` : ""}
+              加载历史中{jumpPages() > 0 ? ` · ${jumpPages()} 页` : ""}
               {jumpElapsed() > 0 ? ` · ${jumpElapsed()}s` : ""}
             </span>
           </Show>
@@ -1152,13 +1176,25 @@ function Rail(props) {
                     <span class="sr-time">{formatTime(turn.created)}</span>
                     {turn.text}
                   </span>
+                  <Show when={jumping() && busyID() === turn.id}>
+                    <span class="sr-badge">加载中</span>
+                  </Show>
                   <span class="sr-dash" />
                 </button>
               )}
             </For>
           </Show>
         </div>
+        {/* Messages that need attention (errors, cancel confirmations) live in
+            the panel footer while it is open, and next to the collapsed rail
+            when it is closed - the old bottom-right toast was easy to miss. */}
+        <Show when={open() && status()}>
+          <div class="sr-foot">{status()}</div>
+        </Show>
       </div>
+      <Show when={!open() && status()}>
+        <div class="sr-status">{status()}</div>
+      </Show>
     </>
   )