opencode-timeline-gui 0.0.0-stage → 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 meiyx7
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,111 @@
-# Temporary Holding Version
+# opencode-timeline-gui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+**OpenCode Desktop 插件：在会话右缘列出每一轮的「用户提问」，悬停展开，点击即刻跳转到那一条消息。**
+
+An OpenCode Desktop plugin that adds a slim rail on the right edge of the
+conversation, listing every user turn of the current session. Hover to expand;
+click a turn to jump straight to that message.
+
+> 本包原名 `opencode-session-turns`，自 0.2.0 起更名为 `opencode-timeline-gui`。
+> 已安装旧包的话，把配置里的包名换成新名字即可，功能不变。
+
+适用 OpenCode Desktop 2.2.6（以预构建的 `./gui-experimental` 包形式加载）。
+
+```
+┌─ 会话轮次 (12) ─────────────┐
+│ 09:14  #1  帮我看看这个报错… │
+│ 09:22  #2  那改成异步呢？     │
+│ 09:35  #3  继续              │
+│ ...                         │
+└─────────────────────────────┘
+```
+
+## 功能
+
+- 列出当前会话的每一轮用户提问（从会话消息接口分页拉取，`type=user`）。
+- 鼠标移到窗口右缘的细条上自动展开，移开自动收起；长历史跳转期间面板保持展开。
+- **搜索轮次**：≥ 8 轮时面板顶部出现搜索框，按关键字即时过滤（匹配数显示在标题里）；`↑`/`↓` 在结果间移动光标，`Enter` 跳转，无鼠标也能导航。
+- **面板固定**：标题栏图钉按钮或 `⌘⌥P`（斜杠命令 `/turns-pin`）把面板钉住，鼠标移开不收起；`Esc` 先解固定、再关面板。
+- 点击任意一轮，**跳转到对应消息**——包括很久以前、尚未渲染的历史轮次。
+- 深历史需要逐页加载时，面板头部显示进度，目标轮次带徽标并琥珀色脉冲；
+  按 `Esc` 或点 × 可随时取消。
+- **历史预热**：宿主自己加载历史每页之间有 2 秒硬冷却，深历史跳转因此要等好几秒。
+  轮次条会在**打开会话时**（轮次列表加载完、≥15 轮）就后台把历史预热完并还原视口，
+  悬停面板或 `/turns` 也会触发。预热完成后所有跳转都是瞬时的。
+- **点击与预热的配合**：点到的轮次已预热 → 直接瞬时跳转；还没预热到 → 头部显示
+  「预热中 · 稍等一下」，等预热翻到该轮后自动落地（不打断预热）。
+- 定位成功后精准描边闪烁**那一条用户气泡**（跟随气泡自身圆角），不再整行填色。
+- 自动高亮当前视口所在的轮次（IntersectionObserver 驱动，后台窗口零开销）。
+- 跨天会话的时间标注会带上「昨天」或日期，不再只有 `HH:mm` 造成歧义。
+- 尊重系统的「减弱动态效果」（`prefers-reduced-motion`）：保留状态色彩，去掉动画。
+- 斜杠命令 `/turns`、快捷键 `⌘⌥R`（Windows/Linux 为 `Ctrl+Alt+R`）展开轮次条。
+
+## 安装
+
+把包名加入 `opencode.json` 的 `plugins` 列表，OpenCode 启动时会自动从 npm 安装：
+
+```json
+{
+  "plugins": ["opencode-timeline-gui"]
+}
+```
+
+然后重启 OpenCode Desktop（GUI bundle 在窗口启动时加载）。
+
+## 使用
+
+- 把鼠标移到会话右侧的细条上展开；
+- 或按 `⌘⌥R` / 输入 `/turns` 展开；
+- 点击某一轮即可跳到那条消息。
+
+## 实现原理（为什么并不简单）
+
+OpenCode Desktop 2.2.6 有几个必须绕开的陷阱：
+
+- 时间线是**虚拟渲染**的：只有视口附近的行动态挂载，远端轮次不在 DOM 里。
+- 桌面端使用**内存路由**：`window.location` 始终停在 `oc://renderer/index.html`，
+  与真实路由解耦。直接往 `window.location` 写 `#message-<id>` 或派发 `popstate`，
+  会让宿主把 `/index.html` 当成路由解析并抛出致命的 `Unrecognised route!`（会崩）。
+- GUI SDK **没有** `scrollToMessage()` / `navigate()` 这类公开 API（`ctx.router` 只读）。
+
+因此本插件的做法是：
+
+1. 用 `ctx.router.path()` 取到真实路由（合法的 `/server/…/session/…` 路径）；
+2. 伪造一个 `<a href="<路由>#message-<id>">` 并派发冒泡 click。宿主在 `document`
+   上注册的链接拦截器（Solid Router 的 `create` 钩子）会把它交给**内存 router 的
+   navigate()**，从而驱动宿主自己的游标状态机加载历史并定位到该行——全程不碰
+   `window.location`。
+3. 宿主每次 seek 只向前加载**约一页（~5 轮）**历史。宿主在 `hash.changed` 后会进入
+   `pending(目标)` 状态并**异步**加载缺失的历史（内部最多重试 12 次）。因此插件
+   **只设置一次 hash 然后耐心等待**：任何额外的 hash 切换都会把宿主的 `pending`
+   状态重置、打断正在飞行的历史请求，表现为"每次点击只前进一页"。
+   只有当宿主连续 5 秒（首屏 9 秒）毫无变化、判定这一轮已经结束时，插件才把
+   hash 弹到一个已挂载的轮次再切回来，开启新的一轮；面板头部实时显示
+   「已加载 N 页 / 耗时 Xs」，总预算 45 秒，`Esc` 可取消。
+
+已挂载的行则直接用本地滚动，瞬时定位。
+
+## 构建
+
+```sh
+npm install
+npm run build      # -> dist/gui-experimental.cjs
+```
+
+改完源码后重新构建，并在 OpenCode Desktop 里 Reload 插件
+（Settings → Extensions → Plugins → Reload）或重启应用。
+
+## 发布
+
+版本发布只通过 GitHub Actions（`.github/workflows/publish.yml`）；本地 `npm publish` 已被 `prepublishOnly` 守卫禁止：
+
+```sh
+npm version patch   # 或 minor / major：自动改版本、提交并打 v* tag
+git push --follow-tags origin main
+```
+
+CI 会校验 tag 与 `package.json` 版本一致，随后构建并发布到 npm。
+
+## 许可证
+
+MIT © meiyx7

package/dist/gui-experimental.cjs

@@ -0,0 +1,318 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("solid-js/web"),J=require("@opencode/plugin/gui"),a=require("solid-js");var st=r.template("<div class=sr-status>"),$t=r.template('<span class="sr-title sr-progress">'),St=r.template('<svg><path d="M6 3l7 7-3.5.5L7 13 3 9l2.5-2.5z"></svg>',!1,!0,!1),Ct=r.template('<svg><path d="M4 12l-1.5 1.5"></svg>',!1,!0,!1),Et=r.template("<button type=button class=sr-search-clear aria-label=清除搜索>×"),_t=r.template("<div class=sr-search><input type=text class=sr-search-input placeholder=搜索轮次…>"),At=r.template("<div class=sr-foot>"),Mt=r.template('<div class=sr-rail><div class=sr-head><span class=sr-head-actions><button type=button class=sr-iconbtn><svg viewBox="0 0 16 16"fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true></svg></button><button type=button class=sr-close>×</button></span></div><div class=sr-list tabindex=-1>'),Tt=r.template("<span class=sr-title>会话轮次"),Dt=r.template('<svg><path d="M9.5 2.5l4 4-2.6.9-1.4 3.5-4.4-4.4L8.6 5.1z"></svg>',!1,!0,!1),It=r.template('<svg><path d="M5.1 6.5L2.5 9.1l4.4 4.4 2.6-2.6"></svg>',!1,!0,!1),Lt=r.template("<div class=sr-note>"),Pt=r.template("<span class=sr-badge>"),jt=r.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 ot="v22",_e="message-",it="session-turns:diag",Ae="session-turns:open",Me="session-turns:pin",Rt=40,qt=200,Bt=50,Ot=30,Ft=45e3,zt=2e4,Jt=6e3,Nt=6e3,at=220,Ht=800;let dt=0,Te="",De="",Ie="";const lt=l=>{const o=String(l?.text??"").split(`
+`).map(m=>m.trim()).find(m=>m.length>0);if(o)return o;const c=l?.files?.length??0;return c>0?`[附件 ×${c}]`:"(空消息)"},P=l=>String(l).padStart(2,"0"),Ut=l=>{const o=new Date(l??0),c=new Date;if(o.getFullYear()===c.getFullYear()&&o.getMonth()===c.getMonth()&&o.getDate()===c.getDate())return`${P(o.getHours())}:${P(o.getMinutes())}`;const $=new Date(c);return $.setDate(c.getDate()-1),o.getFullYear()===$.getFullYear()&&o.getMonth()===$.getMonth()&&o.getDate()===$.getDate()?`昨天 ${P(o.getHours())}:${P(o.getMinutes())}`:`${P(o.getMonth()+1)}-${P(o.getDate())} ${P(o.getHours())}:${P(o.getMinutes())}`},pe=l=>new Promise(o=>setTimeout(o,l)),Le=()=>document.querySelector('[data-slot="session-timeline-scroll"] > .scroll-view__viewport')??document.querySelector('[data-slot="session-timeline-scroll"] [data-scrollable]')??(()=>{let o=document.querySelector("[data-message-id]")?.parentElement;for(;o;){const c=getComputedStyle(o);if(/(auto|scroll)/.test(c.overflowY)&&o.scrollHeight>o.clientHeight+1)return o;o=o.parentElement}})(),_=l=>{const o=document.getElementById(`${_e}${l}`);if(o)return o;const c=`[data-message-id="${l.replace(/"/g,'\\"')}"]`;for(const m of document.querySelectorAll(c))if(m.getAttribute("data-timeline-row")==="UserMessage"||m.querySelector('[data-slot="user-message-text"]'))return m},Ce=l=>{const o=Le(),c=[...document.querySelectorAll("[data-message-id]")],m=c[0]?.getAttribute("data-message-id")??"",$=Ie?` · 目标 ${_(Ie)?"在":"不在"} DOM`:"",T=m?` · 行ID ${m.slice(0,20)}`:"";let S="(空)";try{S=l.router.path()||"(空)"}catch{}return`轮次 ${dt} · 容器 ${o?"OK":"缺失"} · DOM ${c.length} 行${$}${T} · 路由 ${S} · hash ${window.location.hash||"(空)"}${De?` · ${De}`:""}${Te?` · ${Te}`:""}`},Wt=l=>{const o=l.getBoundingClientRect().top;let c=o;for(const m of l.querySelectorAll(".sticky, [data-session-title]")){if(!(m instanceof HTMLElement)||getComputedStyle(m).position!=="sticky"&&!m.hasAttribute("data-session-title"))continue;const T=m.getBoundingClientRect();T.height!==0&&(T.top>o+4||(c=Math.max(c,T.bottom)))}return c},Ee=l=>{try{const o=Le();if(!o||!l.isConnected)return;const c=l.querySelector('[data-slot="user-message-text"]')??l,m=Wt(o),$=c.getBoundingClientRect().top-(m+18);Math.abs($)>2&&(o.scrollTop+=$),De=`inset ${Math.round(m)} · delta ${Math.round($)}`}catch{}},fe=l=>{Ee(l),setTimeout(()=>Ee(l),450),setTimeout(()=>Ee(l),1e3)},ct=l=>{let o="";try{o=l.router.path()||""}catch{}return o.startsWith("/")?o:""},Yt=l=>{const o=document.createElement("a");o.setAttribute("href",l),o.setAttribute("replace",""),o.setAttribute("noscroll",""),o.style.display="none",document.body.appendChild(o);try{o.dispatchEvent(new MouseEvent("click",{bubbles:!0,cancelable:!0,button:0,view:window}))}finally{o.remove()}},Gt=`
+.sr-rail {
+  position: fixed;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 14px;
+  max-height: 66vh;
+  width: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  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, 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-head-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
+.sr-iconbtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  border-radius: 4px;
+  opacity: .5;
+}
+.sr-iconbtn svg { width: 13px; height: 13px; }
+.sr-iconbtn:hover { opacity: 1; background: var(--surface-base-hover, rgba(127,127,127,.14)); }
+.sr-iconbtn[data-on="true"] { opacity: .95; color: rgba(255,170,60,.95); }
+.sr-iconbtn:focus-visible { outline: 1px solid currentColor; outline-offset: -1px; }
+/* search box */
+.sr-search {
+  position: relative;
+  flex-shrink: 0;
+  margin: 0 0 6px;
+}
+.sr-search-input {
+  width: 100%;
+  box-sizing: border-box;
+  height: 26px;
+  padding: 0 24px 0 8px;
+  border: 1px solid rgba(127,127,127,.25);
+  border-radius: 6px;
+  background: color-mix(in srgb, currentColor 6%, transparent);
+  color: inherit;
+  font: inherit;
+  font-size: 12px;
+  outline: none;
+  transition: border-color .12s ease, box-shadow .12s ease;
+}
+.sr-search-input::placeholder { color: currentColor; opacity: .4; }
+.sr-search-input:focus {
+  border-color: rgba(255,170,60,.6);
+  box-shadow: 0 0 0 2px rgba(255,170,60,.14);
+}
+.sr-search-clear {
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: .5;
+}
+.sr-search-clear:hover { opacity: 1; background: var(--surface-base-hover, rgba(127,127,127,.14)); }
+/* keyboard cursor (↑/↓) */
+.sr-turn[data-cursor="true"] { background: var(--surface-base-hover, rgba(127,127,127,.14)); }
+.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.
+   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;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  overflow: hidden;
+  scrollbar-width: none;
+}
+.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; }
+.sr-rail[data-open="true"] .sr-list::-webkit-scrollbar-thumb {
+  background: rgba(127,127,127,.35);
+  border-radius: 4px;
+}
+.sr-turn {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  min-height: 14px;
+  flex-shrink: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  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;
+  height: 2px;
+  border-radius: 1px;
+  background: currentColor;
+  opacity: .28;
+  flex-shrink: 0;
+  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;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 1.5;
+  text-align: right;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 300px;
+  opacity: .45;
+  background: transparent;
+}
+.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: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;
+  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: an INSET ring, so it follows the bubble's own
+   border-radius and can never be clipped by an ancestor that clips overflow
+   (the timeline rows do) - an outline/box-shadow drawn outside the bubble
+   loses its top edge exactly where the row clips. */
+.sr-flash-ring { animation: srRing 1.8s ease-out 1; }
+@keyframes srRing {
+  0% {
+    box-shadow: inset 0 0 0 2px rgba(255,170,60,.95), inset 0 0 26px rgba(255,170,60,.30);
+  }
+  55% {
+    box-shadow: inset 0 0 0 2px rgba(255,170,60,.40), inset 0 0 14px rgba(255,170,60,.12);
+  }
+  100% {
+    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;
+  opacity: .4;
+  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: 42px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 401;
+  font-size: 11px;
+  line-height: 1.5;
+  padding: 4px 9px;
+  border-radius: 6px;
+  background: var(--background-strong, rgba(0,0,0,.82));
+  color: var(--text-base, #fff);
+  border: 1px solid rgba(127,127,127,.25);
+  white-space: pre-wrap;
+  max-width: 260px;
+}
+/* Reduced motion: keep the signals (colors, widths) but drop the animation. */
+@media (prefers-reduced-motion: reduce) {
+  .sr-rail, .sr-dash, .sr-text { transition: none !important; }
+  .sr-turn[data-busy="true"] .sr-dash { animation: none !important; opacity: 1 !important; }
+  .sr-flash-ring { animation: none !important; box-shadow: inset 0 0 0 2px rgba(255,170,60,.5) !important; }
+}
+`;function Vt(l){const o=J.usePlugin(),[c,m]=a.createSignal([]),[$,T]=a.createSignal(""),[S,I]=a.createSignal(!1),[ut,pt]=a.createSignal(""),[O,Pe]=a.createSignal(""),[Q,je]=a.createSignal(""),[A,he]=a.createSignal(!1),[M,X]=a.createSignal(!1),[Re,F]=a.createSignal(0),[qe,N]=a.createSignal(0),[Zt,H]=a.createSignal(0),[ee,te]=a.createSignal(""),[Be,U]=a.createSignal(!1),D=new Map;let ge=0,W=!1,re=!1,ne="",Y;const k=()=>l.session()?.id,me=()=>{const e=[...D.values()].sort((n,i)=>n.created-i.created),t=a.untrack(c);t.length===e.length&&t.every((n,i)=>n===e[i])||(m(e),dt=e.length)},Oe=e=>{const t=D.get(e.id);t&&t.created===e.time&&t.text===e.text||D.set(e.id,{id:e.id,created:e.time,text:e.text})},ft=async(e,t,n)=>{const i=n?{sessionID:e,type:"user",limit:t,cursor:n}:{sessionID:e,type:"user",limit:t,order:"desc"};return await o.client.message.list(i)},be=async(e,t)=>{const n=++ge;W=!0,t==="full"&&(z="",$e="");let i="";try{let p;const f=t==="full"?Rt:1,x=t==="full"?qt:Bt;let s=t!=="full";for(let d=0;d<f;d++){let u;try{u=await ft(e,x,p)}catch(w){i=String(w?.message??w);break}if(n!==ge)return;s||(D.clear(),s=!0);let h=0;for(const w of u?.data??[])D.has(w.id)||(Oe({id:w.id,time:w.time?.created??0,text:lt(w)}),h++);me();const b=u?.cursor?.next;if(!b||h===0)break;p=b}}finally{W=!1,ne=e,Te=i,pt(D.size===0?i||"暂无用户消息":""),re&&(re=!1,Fe()),t==="full"&&!i&&e===a.untrack(k)&&D.size>=1&&setTimeout(()=>V(),400)}},Fe=()=>{Y||(Y=setTimeout(()=>{Y=void 0;const e=a.untrack(k);e&&be(e,"light")},300))},ze=e=>{if(!(!e||e!==a.untrack(k))){if(W){re=!0;return}Fe()}},ht=e=>{const t=e?.type;if(t==="message.updated"){const n=e?.data??{},i=n.info;i?.role==="user"&&i?.id&&(Oe({id:i.id,time:i.time?.created??0,text:lt(i)}),me()),ze(n.sessionID)}else if(t==="message.removed"){const n=e?.data??{};n.messageID&&D.delete(n.messageID)&&me(),ze(n.sessionID)}else if(t==="location.shutdown"){const n=a.untrack(k);n&&ne===n&&be(n,"full")}};a.onMount(()=>{let e=!1,t=0,n;(async()=>{for(;!e;){const f=o.client.event.subscribe()[Symbol.asyncIterator]();try{for(;!e;){const x=await f.next();if(x.done)break;t=0,ht(x.value)}}catch{}try{await f.return?.()}catch{}if(e)break;t++,await pe(Math.min(2e3*t,15e3))}})(),a.onCleanup(()=>{e=!0,clearTimeout(n),Y&&clearTimeout(Y)})}),a.createEffect(()=>{const e=k();e&&a.untrack(()=>{ne!==e&&(ge++,W=!1,re=!1,D.clear(),m([]),T(""),xe="",be(e,"full"))})});let se;const j=()=>(se?.isConnected||(se=Le()),se),Je=new WeakSet;let G;const gt=()=>G||(G=new IntersectionObserver(e=>{e.length!==0&&ve()},{rootMargin:"-40px 0px 0px 0px",threshold:0}),G),mt=()=>{const e=gt();for(const t of document.querySelectorAll("[data-message-id]"))Je.has(t)||(Je.add(t),e.observe(t))},bt=()=>{const e=j();if(!e)return;const t=e.querySelectorAll("[data-message-id]");if(t.length===0)return;const n=e.getBoundingClientRect().top+40;for(const i of t)if(i.getBoundingClientRect().bottom>=n){const p=i.getAttribute("data-message-id");p&&p!==$()&&T(p);break}};let we=!1;const ve=()=>{we||(we=!0,requestAnimationFrame(()=>{we=!1,bt(),mt()}))};a.onMount(()=>{const e=()=>ve();document.addEventListener("scroll",e,!0);const t=setInterval(()=>{document.hidden||ve()},4e3);a.onCleanup(()=>{document.removeEventListener("scroll",e,!0),clearInterval(t),G?.disconnect()})});let Ne=0;const oe=(e,t=2600)=>{const n=++Ne;Pe(e),setTimeout(()=>{n===Ne&&Pe("")},t)};a.onMount(()=>{const e=n=>{if(n.key==="Escape"){if(a.untrack(M)){Ye(),n.stopPropagation();return}a.untrack(S)&&(a.untrack(A)?he(!1):I(!1),n.stopPropagation())}},t=n=>{if(!a.untrack(S)||a.untrack(A))return;(n.composedPath?.()??[]).some(f=>f instanceof Element&&f.closest?.(".sr-rail"))||I(!1)};window.addEventListener("keydown",e,!0),document.addEventListener("pointerdown",t,!0),a.onCleanup(()=>{window.removeEventListener("keydown",e,!0),document.removeEventListener("pointerdown",t,!0)})}),a.onMount(()=>{const e=()=>oe(`${ot} · ${Ce(o)}`),t=()=>{I(i=>!i),V()},n=()=>{he(i=>!i),a.untrack(S)||(I(!0),V())};window.addEventListener(it,e),window.addEventListener(Ae,t),window.addEventListener(Me,n),a.onCleanup(()=>{window.removeEventListener(it,e),window.removeEventListener(Ae,t),window.removeEventListener(Me,n)})});let xe="",C=0,He=0,Ue="";const ie=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{}},ye=()=>{for(const e of c())if(_(e.id))return e},L=(e,t)=>{Yt(`${e}#${_e}${t}`),xe=t},ae=()=>{const t=j()?.querySelectorAll("[data-message-id]")??[];if(t.length===0)return"0";const n=t[0].getAttribute("data-message-id")??"",i=t[t.length-1].getAttribute("data-message-id")??"";return`${t.length}:${n}:${i}`},We=(e,t,n,i,p)=>new Promise(f=>{let x=!1,s,d,u;const h=Date.now(),b=ae();let w=b,y=h,g=0,v=!1;const B=4e3,E=de=>{if(!x){x=!0;try{s?.disconnect()}catch{}clearInterval(d),clearTimeout(u),f(de??null)}},Z=de=>{if(t!==C)return E(null);const rt=de?_(e):document.getElementById(`${_e}${e}`);if(rt)return E(rt);if(!de)return;const nt=ae(),ue=Date.now();if(nt!==w){w=nt,y=ue,g++,i?.(g);return}const kt=g>0?Jt:Nt;if(!v&&p&&b==="0"&&ue-y>B){v=!0,y=ue,p();return}ue-y>kt&&E(null)},tt=_(e);if(tt)return E(tt);s=new MutationObserver(()=>Z(!1)),s.observe(document.documentElement,{childList:!0,subtree:!0}),d=setInterval(()=>Z(!0),120),u=setTimeout(()=>E(_(e)),Math.max(400,n))}),Ye=()=>{C++,X(!1),F(0),N(0),H(0),te(""),U(!1),oe("已取消跳转")},Ge=async e=>{if(M()&&ee()===e.id)return;const t=ct(o),n=j(),i=_(e.id);if(i&&n){R()&&(le(),t&&L(t,e.id)),fe(i),ie(i);return}const p=Date.now();if(e.id===Ue&&p-He<Ht){const h=_(e.id);if(h&&n){fe(h),ie(h);return}}if(He=p,Ue=e.id,Ie=e.id,!t){oe(`无法读取当前路由，无法定位 · ${Ce(o)}`);return}const f=++C,x=k();X(!0),te(e.id),F(0),N(0),H(0),U(R()),I(!0);const s=Date.now(),d=setInterval(()=>{N(Math.round((Date.now()-s)/1e3))},500);let u=0;try{if(R()){const b=await We(e.id,f,2e4,w=>F(w));if(f!==C||k()!==x)return;if(b){le(),L(t,e.id),fe(b),ie(b);return}if(R()&&le(),U(!1),f!==C||k()!==x)return}const h=Date.now()+Ft;for(let b=0;b<Ot&&Date.now()<h;b++){if(f!==C||k()!==x)return;if(H(b+1),xe===e.id){const v=ye()??c()[0];v&&(L(t,v.id),await pe(at))}if(f!==C||k()!==x)return;L(t,e.id);let w=0;const y=Math.min(zt,h-Date.now()),g=await We(e.id,f,y,v=>{w=v,F(u+v)},()=>{const v=ye()??c()[0];v&&v.id!==e.id&&L(t,v.id)});if(u+=w,f!==C||k()!==x)return;if(g){fe(g),ie(g);return}}f===C&&oe(`未能定位 · ${Ce(o)}`)}finally{clearInterval(d),f===C&&(X(!1),F(0),N(0),H(0),te(""),U(!1))}},[R,ke]=a.createSignal(!1);let q=0,z="",$e="";const wt=()=>{const e=j();if(!e)return;const t=e.getBoundingClientRect();for(const n of e.querySelectorAll("[data-message-id]")){const i=n.getBoundingClientRect();if(i.bottom<=t.top+1)continue;const p=n.getAttribute("data-message-id");if(p)return{el:n,id:p,offset:i.top-t.top}}},Ve=e=>{if(!e)return;const t=j();if(!t)return;const n=e.el?.isConnected?e.el:_(e.id);if(!n)return;const i=t.getBoundingClientRect(),p=n.getBoundingClientRect().top-i.top-e.offset;Math.abs(p)>2&&(t.scrollTop+=p)},le=()=>{q++,ke(!1)},V=()=>{const e=k();!e||R()||z!==e&&(c().length<1||vt())},vt=async()=>{if(R())return;const e=ct(o),t=c()[0],n=k();if(!e||!t||!n)return;if(_(t.id)){z=n;return}if(z===n)return;const i=++q,p=wt(),f=j(),x=f?f.scrollTop+f.clientHeight>=f.scrollHeight-32:!0;ke(!0);try{L(e,t.id);const s=Date.now()+3e4;let d=ae(),u=Date.now(),h=0;const b=setInterval(()=>Ve(p),150);try{for(;Date.now()<s&&i===q&&!(_(t.id)||(await pe(250),i!==q));){const y=Date.now(),g=ae();if(g!==d)d=g,u=y,h=0;else if(y-u>3e3){if(h>=2)break;const v=ye();if(v&&v.id!==t.id&&(L(e,v.id),await pe(at),i!==q))break;L(e,t.id),u=Date.now(),h++}}}finally{clearInterval(b)}if(i!==q)return;const w=!!_(t.id);if(Ve(p),x){const y=j();y&&(y.scrollTop=y.scrollHeight)}w?z=n:$e=n}finally{i===q&&ke(!1)}};let Ke=a.untrack(k);a.createEffect(()=>{const e=k();e!==Ke&&(Ke=e,le(),C++,X(!1),F(0),N(0),H(0),te(""),U(!1))}),a.createEffect(()=>{const e=k(),t=c().length,n=R();if(!e||t<1||n||z===e||$e===e||W||ne!==e)return;const i=setTimeout(()=>V(),400);a.onCleanup(()=>clearTimeout(i))});const K=a.createMemo(()=>{const e=c(),t=Q().trim().toLowerCase();return t?e.filter(n=>n.text.toLowerCase().includes(t)):e}),[ce,Ze]=a.createSignal(-1),Qe=()=>Ze(-1),Xe=e=>{const t=K();if(t.length===0)return;let n=ce();if(n<0){const i=$();n=t.findIndex(p=>p.id===i),n<0&&(n=e>0?-1:0)}n=Math.min(t.length-1,Math.max(0,n+e)),Ze(n),requestAnimationFrame(()=>{document.querySelector(`.sr-list .sr-turn[data-index="${n}"]`)?.scrollIntoView({block:"nearest"})})},xt=()=>{const e=K()[ce()];e&&Ge(e)};let Se;const et=e=>{e.key==="ArrowDown"?(e.preventDefault(),e.stopPropagation(),Xe(1)):e.key==="ArrowUp"?(e.preventDefault(),e.stopPropagation(),Xe(-1)):e.key==="Enter"&&ce()>=0&&(e.preventDefault(),e.stopPropagation(),xt())};a.createEffect(()=>{M()&&ee()&&requestAnimationFrame(()=>{try{document.querySelector('.sr-list .sr-turn[data-busy="true"]')?.scrollIntoView({block:"nearest"})}catch{}})});const yt=[r.createComponent(a.Show,{get when(){return O()},get children(){var e=st();return r.insert(e,O),e}}),(()=>{var e=Mt(),t=e.firstChild,n=t.firstChild,i=n.firstChild,p=i.firstChild,f=i.nextSibling,x=t.nextSibling;return e.addEventListener("mouseleave",()=>{!M()&&!A()&&I(!1)}),e.addEventListener("mouseenter",()=>{I(!0),V()}),r.insert(t,r.createComponent(a.Show,{get when(){return M()},get fallback(){return(()=>{var s=Tt();return s.firstChild,r.insert(s,(()=>{var d=r.memo(()=>c().length>0);return()=>d()?` · ${c().length}`:""})(),null),r.insert(s,r.createComponent(a.Show,{get when(){return Q().trim()},get children(){return[" · 匹配 ",r.memo(()=>K().length)]}}),null),s})()},get children(){var s=$t();return r.insert(s,()=>Be()?"预热中 · 稍等一下":"加载历史中",null),r.insert(s,(()=>{var d=r.memo(()=>Re()>0);return()=>d()?` · ${Re()} 页`:""})(),null),r.insert(s,(()=>{var d=r.memo(()=>qe()>0);return()=>d()?` · ${qe()}s`:""})(),null),s}}),n),i.$$click=()=>he(!A()),r.insert(p,r.createComponent(a.Show,{get when(){return A()},get fallback(){return[Dt(),It()]},get children(){return[St(),Ct()]}})),f.$$click=()=>{M()?Ye():I(!1)},r.insert(e,r.createComponent(a.Show,{get when(){return c().length>=8},get children(){var s=_t(),d=s.firstChild;d.$$keydown=et,d.$$input=h=>{je(h.currentTarget.value),Qe()};var u=Se;return typeof u=="function"?r.use(u,d):Se=d,r.insert(s,r.createComponent(a.Show,{get when(){return Q()},get children(){var h=Et();return h.$$click=()=>{je(""),Qe(),Se?.focus()},h}}),null),r.effect(()=>d.value=Q()),s}}),x),x.$$keydown=et,r.insert(x,r.createComponent(a.Show,{get when(){return K().length>0},get fallback(){return(()=>{var s=Lt();return r.insert(s,()=>ut()||`… ${ot}`),s})()},get children(){return r.createComponent(a.For,{get each(){return K()},children:(s,d)=>(()=>{var u=jt(),h=u.firstChild,b=h.firstChild;b.firstChild;var w=b.nextSibling,y=h.nextSibling;return u.$$click=()=>{Ge(s)},r.insert(b,()=>c().indexOf(s)+1,null),r.insert(w,()=>Ut(s.created)),r.insert(h,()=>s.text,null),r.insert(u,r.createComponent(a.Show,{get when(){return r.memo(()=>!!M())()&&ee()===s.id},get children(){var g=Pt();return r.insert(g,()=>Be()?"稍等":"加载中"),g}}),y),r.effect(g=>{var v=$()===s.id?"true":"false",B=ce()===d()?"true":"false",E=M()&&ee()===s.id?"true":"false",Z=d();return v!==g.e&&r.setAttribute(u,"data-active",g.e=v),B!==g.t&&r.setAttribute(u,"data-cursor",g.t=B),E!==g.a&&r.setAttribute(u,"data-busy",g.a=E),Z!==g.o&&r.setAttribute(u,"data-index",g.o=Z),g},{e:void 0,t:void 0,a:void 0,o:void 0}),u})()})}})),r.insert(e,r.createComponent(a.Show,{get when(){return r.memo(()=>!!S())()&&O()},get children(){var s=At();return r.insert(s,O),s}}),null),r.effect(s=>{var d=S()?"true":"false",u=M()?"true":"false",h=A()?"true":"false",b=S()?"dialog":void 0,w=S()?"会话轮次":void 0,y=A()?"true":"false",g=A()?"取消固定 (⌘⌥P)":"固定面板 (⌘⌥P)",v=A()?"取消固定面板":"固定面板",B=A()?"true":"false",E=M()?"取消跳转 (Esc)":"关闭 (Esc)";return d!==s.e&&r.setAttribute(e,"data-open",s.e=d),u!==s.t&&r.setAttribute(e,"data-jumping",s.t=u),h!==s.a&&r.setAttribute(e,"data-pinned",s.a=h),b!==s.o&&r.setAttribute(e,"role",s.o=b),w!==s.i&&r.setAttribute(e,"aria-label",s.i=w),y!==s.n&&r.setAttribute(i,"data-on",s.n=y),g!==s.s&&r.setAttribute(i,"title",s.s=g),v!==s.h&&r.setAttribute(i,"aria-label",s.h=v),B!==s.r&&r.setAttribute(i,"aria-pressed",s.r=B),E!==s.d&&r.setAttribute(f,"title",s.d=E),s},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0,n:void 0,s:void 0,h:void 0,r:void 0,d:void 0}),e})(),r.createComponent(a.Show,{get when(){return r.memo(()=>!S())()&&O()},get children(){var e=st();return r.insert(e,O),e}})];return r.createComponent(r.Portal,{get mount(){return document.body},children:yt})}const Kt=J.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","command.pin":"Session turns: pin panel","command.pin.description":"Toggle pinning the turn rail open (⌘⌥P)"}},setup(l){l.add(J.Style,Gt),l.add(J.Slot,{at:"window.bottom",render:()=>r.createComponent(a.Show,{get when(){return l.sessions.current()},get children(){return r.createComponent(Vt,{session:()=>l.sessions.current()})}})}),l.add(J.Command,()=>({id:"jump",title:l.t("command.jump"),description:l.t("command.jump.description"),section:"navigation",bind:"mod+alt+r",slash:{name:"turns"},run:()=>{window.dispatchEvent(new Event(Ae))}})),l.add(J.Command,()=>({id:"pin",title:l.t("command.pin"),description:l.t("command.pin.description"),section:"navigation",bind:"mod+alt+p",slash:{name:"turns-pin"},run:()=>{window.dispatchEvent(new Event(Me))}}))}});r.delegateEvents(["click","input","keydown"]);exports.default=Kt;

package/package.json

@@ -1,6 +1,51 @@
 {
   "name": "opencode-timeline-gui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.1",
+  "description": "OpenCode Desktop 插件：在会话右缘列出每一轮用户提问，点击即可跳转到对应消息。A right-edge rail of user turns; click one to jump to that message. (formerly opencode-session-turns)",
+  "type": "module",
+  "license": "MIT",
+  "author": "meiyx7",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/meiyx7/opencode-timeline-gui.git"
+  },
+  "homepage": "https://github.com/meiyx7/opencode-timeline-gui#readme",
+  "bugs": {
+    "url": "https://github.com/meiyx7/opencode-timeline-gui/issues"
+  },
+  "keywords": [
+    "opencode",
+    "opencode-plugin",
+    "timeline",
+    "gui",
+    "session",
+    "turns",
+    "navigation",
+    "jump",
+    "message"
+  ],
+  "exports": {
+    "./gui-experimental": "./dist/gui-experimental.cjs",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "prepublishOnly": "node scripts/ensure-ci-publish.mjs && npm run build"
+  },
+  "devDependencies": {
+    "@opencode/plugin": "^2.2.6",
+    "solid-js": "^1.9.0",
+    "vite": "^7.0.0",
+    "vite-plugin-solid": "^2.11.0"
+  }
+}