@leftoff/cli 0.9.8-beta.7 → 0.9.8-beta.9

package/CHANGELOG.md

@@ -9,6 +9,7 @@ What changed in Leftoff (called Checkpoints until 0.4.5), newest first. The boar
 - **Outside events**: CI or a webhook can post into a live session with this Mac's key (`leftoff live key`), signed through your leftoff.dev board.
 - **Restore from your phone or another Mac**: it asks that Mac first, and nothing opens until someone there confirms.
 - **Sidebar**: the sections move to a narrow rail on the left, with a count on Needs you. On phones they sit in a bar at the bottom, the rest under More.
+- **Tabs**: sessions open in tabs next to the board. A click opens one italic preview tab that the next click replaces; it stays once you send a Live message, type there, or double-click it. On a phone, an Open row on the board and a swipe between open sessions. The layout follows the window's width, so iPad, Split View and folding keep your tabs.
 - **Quick look**: hover Needs you (or long-press it on a phone) to see the five longest waits and Allow or Deny a permission prompt right there.
 - **Pull to refresh** on phones: pull down from the top of any page to read it again.
 - **Always allow here** on permission prompts, like Claude Code's own "don't ask again". It adds the exact rule (say `Bash(rm /tmp/x)`) to the project's `.claude/settings.local.json`; the ⓘ beside it shows which rule and where. Quick look calls it **Always**.
@@ -18,6 +19,7 @@ What changed in Leftoff (called Checkpoints until 0.4.5), newest first. The boar
 - **The Live badge pulses while Claude is working** on a turn, and stays still when the session is idle (no motion with Reduce Motion on).
 - **Notifications on your phone.** Add the board to your iPhone's Home Screen (iOS 16.4+), tap **Turn on notifications** under More, and you get a notification when Claude needs your OK or a Live reply lands. The Mac running the session sends it, encrypted end to end. Any browser with Push works the same.
 ### Fixed
+- `leftoff upgrade` asks npm for fresh package info, so a version published minutes ago installs instead of failing with "No matching version".
 - Live chat: a message no longer stays on **Working** after Claude has answered. It settles when the turn ends, including a second message sent while Claude was busy ("Answered with the reply above"), and stuck ones clear when you update.
 - Live chat: a message sent while an older one was stuck now gets its own reply instead of sitting on **Starting**, and each message shows the time it was sent instead of a frozen "just now".
 - Live chat: **Jump to latest ↓** now shows whenever you've scrolled up, not only when something new arrives, and the chat stays at the bottom while Claude's reply grows.

package/bin/leftoff.js

@@ -218,7 +218,7 @@ Turn it off first: tailscale funnel --https=`+w+" off"),1;if((y.proxy||y.other)&
 `).trim()}))}function wi(n=AM){try{return tg(vM.readFileSync(n,"utf8"))}catch{return[]}}function ki(n,e,t){return n.filter(s=>(!e||mt(s.version,e)>0)&&(!t||mt(s.version,t)<=0))}function av(n,e,t){return n.map(s=>({...s,isNew:(!t||mt(s.version,t)<=0)&&(!e||mt(s.version,e)>0)}))}function Td(n,{colors:e=null,width:t=78}={}){let s=e||{bold:i=>i,dim:i=>i,cyan:i=>i,green:i=>i},r=[],o=(i,a)=>{let l=String(i).replace(/\*\*(.+?)\*\*/g,"$1").split(/\s+/),c=[],u="";for(let d of l)(u+" "+d).trim().length>t-a.length?(c.push(u),u=d):u=(u+" "+d).trim();return u&&c.push(u),c.map((d,f)=>(f?a:"")+d)};for(let i of n){r.push(s.bold(s.cyan("v"+i.version))+(i.date?s.dim("  "+i.date):"")+(i.isNew?"  "+s.green("new"):""));for(let a of i.sections){r.push("  "+s.bold(a.title));for(let l of a.items)r.push("  • "+o(l,"    ").join(`
 `))}r.push("")}return r.join(`
 `)}var AM,_d,Ed=K(()=>{Em();AM=ov.resolve(ov.dirname(xM(import.meta.url)),"..","CHANGELOG.md");_d=n=>eg(n)!==null});var wv={};at(wv,{CHECK_EVERY_MS:()=>og,DEFAULT_SOURCE:()=>ml,GITHUB_REPO:()=>ts,NPM_PACKAGE:()=>gt,PACKAGE_DIRS:()=>gl,REPO_DIR:()=>rr,STAMP_FILE:()=>rg,checkForUpdate:()=>wl,defaultCacheDir:()=>cg,fetchRemoteFiles:()=>yv,installInfo:()=>yl,isNpmBuild:()=>fv,isNpxCacheDir:()=>sg,lsRemote:()=>gv,normalizeSource:()=>bi,npmDistTags:()=>lg,npmLatest:()=>CM,npmPackageUrl:()=>Od,npmRegistry:()=>Cd,npmTarget:()=>pv,npmUpgradeCommand:()=>ag,packageManagerOf:()=>hv,readPkg:()=>dv,readStamp:()=>cv,registryPath:()=>uv,renamedSource:()=>oo,runGit:()=>Zt,sshFallback:()=>mv,writeStamp:()=>ig});import Si from"node:fs";import _M from"node:os";import ps from"node:path";import{execFile as TM}from"node:child_process";import{fileURLToPath as EM}from"node:url";function bi(n){let e=String(n||"").trim();if(!e)return ml;let t=e.match(/^(?:github:)?([\w.-]+)\/([\w.-]+?)(?:\.git)?(?:#.*)?$/);return t&&!e.includes("://")&&!e.startsWith("/")&&!e.startsWith(".")?oo("https://github.com/"+t[1]+"/"+t[2]+".git"):oo(e)}function oo(n){let e=String(n||"");for(let t of j0){let s=t.replace(/[.]/g,"\\."),r=new RegExp("^(https://github\\.com/|git@github\\.com:|ssh://git@github\\.com/)"+s+"(?:\\.git)?/?$","i"),o=e.match(r);if(o)return o[1]+ts+".git"}return e}function Zt(n,{cwd:e,timeoutMs:t=15e3,env:s=process.env}={}){return new Promise(r=>{let o={...s,GIT_TERMINAL_PROMPT:"0",GIT_ASKPASS:s.GIT_ASKPASS||"echo",SSH_ASKPASS:"echo",GIT_SSH_COMMAND:s.GIT_SSH_COMMAND||"ssh -o BatchMode=yes"};TM(s.CHECKPOINTS_GIT||"git",n,{cwd:e,timeout:t,env:o,maxBuffer:4*1024*1024},(i,a,l)=>{r({code:i?typeof i.code=="number"?i.code:-1:0,stdout:String(a||""),stderr:String(l||(i&&!a?i.message:"")||"")})})})}function cv(n=rr){try{return JSON.parse(Si.readFileSync(ps.join(n,rg),"utf8"))}catch{return null}}function ig(n,e=rr){let t={version:n.version||Q,sha:n.sha||null,source:n.source||null,at:n.at||new Date().toISOString()};return Si.writeFileSync(ps.join(e,rg),JSON.stringify(t,null,2)+`
-`),t}function sg(n){return/[\\/]_npx[\\/]/.test(n)||/[\\/]\.npm[\\/]/.test(n)}function uv(n=gt){return n.startsWith("@")?"@"+n.slice(1).split("/").map(encodeURIComponent).join("%2f"):encodeURIComponent(n)}function Od(n=process.env,e=gt){return Cd(n)+"/"+uv(e)}function dv(n=rr){try{return JSON.parse(Si.readFileSync(ps.join(n,"package.json"),"utf8"))}catch{return null}}function fv(n=rr){let e=dv(n);return!!(e&&e.leftoffBuild==="npm")}function hv(n,e=process.env){if(e.LEFTOFF_PM)return e.LEFTOFF_PM;let t=String(n||"");return/[\\/]\.?pnpm[\\/]/i.test(t)||/[\\/]pnpm-global[\\/]/i.test(t)?"pnpm":/[\\/]\.bun[\\/]/.test(t)?"bun":"npm"}function ag(n,e=gt+"@latest"){let t=process.platform==="win32";return n==="pnpm"?[t?"pnpm.cmd":"pnpm","add","-g",e]:n==="bun"?["bun","add","-g",e]:[t?"npm.cmd":"npm","install","-g",e,"--no-fund","--no-audit","--loglevel=error"]}function Cd(n=process.env){return String(n.LEFTOFF_NPM_REGISTRY||n.npm_config_registry||"https://registry.npmjs.org").replace(/\/+$/,"")}async function lg({env:n=process.env,fetchImpl:e=fetch,timeoutMs:t=15e3}={}){let s=Od(n);try{let r=await e(s,{headers:{accept:"application/vnd.npm.install-v1+json; q=1.0, application/json; q=0.8"},signal:AbortSignal.timeout(t)});if(r.status===404)return{ok:!1,tags:{},error:gt+" isn’t on "+Cd(n)+" (404)"};if(!r.ok)return{ok:!1,tags:{},error:Cd(n)+" answered "+r.status};let o=await r.json(),i={...o&&o["dist-tags"]||{}};return!i.latest&&o&&o.version&&(i.latest=o.version),i.latest?{ok:!0,tags:i,error:null}:{ok:!1,tags:{},error:"no version in the registry answer"}}catch(r){return{ok:!1,tags:{},error:r.message}}}async function CM(n={}){let e=await lg(n);return e.ok?{ok:!0,version:e.tags.latest,error:null}:{ok:!1,version:null,error:e.error}}function pv(n,e={},t=null){let s=t||(_d(n)?"beta":"latest"),r=e.latest||null,o="latest";s==="beta"&&e.beta&&(!r||mt(e.beta,r)>0)&&(r=e.beta,o="beta");let i=!!r&&mt(r,n)>0;return{version:r,tag:o,available:i,command:o==="beta"?"leftoff upgrade --beta":"leftoff upgrade"}}async function yl({repoDir:n=rr,env:e=process.env,globalRoot:t}={}){let s={version:Q,sha:null,kind:"local",source:null,repoDir:n};if(Si.existsSync(ps.join(n,".git"))){s.kind="clone";let o=await Zt(["rev-parse","HEAD"],{cwd:n,env:e});o.code===0&&(s.sha=o.stdout.trim());let i=await Zt(["remote","get-url","origin"],{cwd:n,env:e});return s.source=i.code===0?i.stdout.trim():null,s}if(fv(n))return s.kind="npm",s.source="npm:"+gt,s.pm=hv(n,e),s.npx=sg(n),s;let r=cv(n);return r&&(s.sha=r.sha||null,s.source=r.source||null),sg(n)?s.kind="npx":(t?n.startsWith(t):/[\\/]node_modules[\\/](checkpoints|leftoff|@leftoff[\\/]cli)$/.test(n))&&(s.kind="global"),s}function mv(n){let e=String(n||"").match(/^https:\/\/github\.com\/([\w.-]+)\/([\w.-]+?)(?:\.git)?\/?$/);return e?"git@github.com:"+e[1]+"/"+e[2]+".git":null}async function lv(n,{env:e,timeoutMs:t}){let s=await Zt(["ls-remote",n,"HEAD"],{env:e,timeoutMs:t}),r=s.code===0?(s.stdout.match(/^([0-9a-f]{40})\s+HEAD$/m)||[])[1]:null;return r?{ok:!0,sha:r,error:null,source:n}:{ok:!1,sha:null,error:ng(s.stderr)||"git ls-remote exited "+s.code,source:n}}async function gv(n,{env:e=process.env,timeoutMs:t=15e3}={}){let s=bi(n),r=await lv(s,{env:e,timeoutMs:t});if(r.ok)return r;let o=mv(s);if(!o)return r;let i=await lv(o,{env:e,timeoutMs:t});return i.ok?i:{ok:!1,sha:null,source:s,error:r.error+" (also tried "+o+": "+i.error+")"}}async function yv(n,{cacheDir:e=cg(),env:t=process.env,timeoutMs:s=3e4}={}){try{if(Si.mkdirSync(e,{recursive:!0}),!Si.existsSync(ps.join(e,"HEAD"))){let c=await Zt(["init","--bare","-q",e],{env:t});if(c.code!==0)return{ok:!1,error:ng(c.stderr)}}let r=await Zt(["fetch","-q","--depth=1",bi(n),"HEAD"],{cwd:e,env:t,timeoutMs:s});if(r.code!==0)return{ok:!1,error:ng(r.stderr)||"git fetch exited "+r.code};let o=(await Zt(["rev-parse","FETCH_HEAD"],{cwd:e,env:t})).stdout.trim()||null,i=await Zt(["show","FETCH_HEAD:CHANGELOG.md"],{cwd:e,env:t}),a=await Zt(["show","FETCH_HEAD:package.json"],{cwd:e,env:t}),l=null;try{l=JSON.parse(a.stdout).version||null}catch{}return{ok:!0,sha:o,version:l,changelog:i.code===0?i.stdout:null,error:null}}catch(r){return{ok:!1,error:r.message}}}function cg(n=process.env){return ps.join(n.XDG_CACHE_HOME||ps.join(_M.homedir(),".cache"),"checkpoints","remote.git")}async function wl({info:n,source:e,env:t=process.env,cacheDir:s,now:r=Date.now(),fetchFiles:o=!0,channel:i=null,fetchImpl:a=null}={}){let l=n||await yl({env:t});if(l.kind==="npm"){let h={checkedAt:new Date(r).toISOString(),source:"npm:"+gt,current:{version:l.version,sha:null},remote:{sha:null,version:null},available:!1,incoming:[],error:null},p=await lg({env:t,...a?{fetchImpl:a}:{}});if(!p.ok)return h.error=p.error,h;let m=pv(l.version,p.tags,i);return h.remote.version=m.version,h.remote.tag=m.tag,h.upgradeCommand=m.command,p.tags.latest&&p.tags.latest!==m.version&&(h.remote.latest=p.tags.latest),h.available=m.available,h}let c=bi(e||l.source||ml),u={checkedAt:new Date(r).toISOString(),source:c,current:{version:l.version,sha:l.sha},remote:{sha:null,version:null},available:!1,incoming:[],error:null},d=await gv(c,{env:t});if(!d.ok)return u.error=d.error,u;if(u.source=d.source,u.remote.sha=d.sha,l.sha&&l.sha===d.sha)return u;if(o){let h=await yv(u.source,{cacheDir:s||cg(t),env:t});h.ok?(u.remote.version=h.version,h.changelog&&(u.incoming=ki(tg(h.changelog),l.version,h.version).map(p=>({version:p.version,date:p.date,sections:p.sections})))):u.fetchError=h.error}let f=u.remote.version?mt(u.remote.version,l.version):null;return u.available=f===1||f===0&&!!l.sha||f===null&&!!l.sha,f===-1&&(u.available=!1),u}var rr,ml,rg,og,ng,gt,gl,kl=K(()=>{Rt();Ae();Ed();rr=ps.resolve(ps.dirname(EM(import.meta.url)),".."),ml="https://github.com/"+ts+".git",rg=".install.json",og=24*3600*1e3;ng=n=>String(n||"").trim().split(`
+`),t}function sg(n){return/[\\/]_npx[\\/]/.test(n)||/[\\/]\.npm[\\/]/.test(n)}function uv(n=gt){return n.startsWith("@")?"@"+n.slice(1).split("/").map(encodeURIComponent).join("%2f"):encodeURIComponent(n)}function Od(n=process.env,e=gt){return Cd(n)+"/"+uv(e)}function dv(n=rr){try{return JSON.parse(Si.readFileSync(ps.join(n,"package.json"),"utf8"))}catch{return null}}function fv(n=rr){let e=dv(n);return!!(e&&e.leftoffBuild==="npm")}function hv(n,e=process.env){if(e.LEFTOFF_PM)return e.LEFTOFF_PM;let t=String(n||"");return/[\\/]\.?pnpm[\\/]/i.test(t)||/[\\/]pnpm-global[\\/]/i.test(t)?"pnpm":/[\\/]\.bun[\\/]/.test(t)?"bun":"npm"}function ag(n,e=gt+"@latest"){let t=process.platform==="win32";return n==="pnpm"?[t?"pnpm.cmd":"pnpm","add","-g",e]:n==="bun"?["bun","add","-g",e]:[t?"npm.cmd":"npm","install","-g",e,"--prefer-online","--no-fund","--no-audit","--loglevel=error"]}function Cd(n=process.env){return String(n.LEFTOFF_NPM_REGISTRY||n.npm_config_registry||"https://registry.npmjs.org").replace(/\/+$/,"")}async function lg({env:n=process.env,fetchImpl:e=fetch,timeoutMs:t=15e3}={}){let s=Od(n);try{let r=await e(s,{headers:{accept:"application/vnd.npm.install-v1+json; q=1.0, application/json; q=0.8"},signal:AbortSignal.timeout(t)});if(r.status===404)return{ok:!1,tags:{},error:gt+" isn’t on "+Cd(n)+" (404)"};if(!r.ok)return{ok:!1,tags:{},error:Cd(n)+" answered "+r.status};let o=await r.json(),i={...o&&o["dist-tags"]||{}};return!i.latest&&o&&o.version&&(i.latest=o.version),i.latest?{ok:!0,tags:i,error:null}:{ok:!1,tags:{},error:"no version in the registry answer"}}catch(r){return{ok:!1,tags:{},error:r.message}}}async function CM(n={}){let e=await lg(n);return e.ok?{ok:!0,version:e.tags.latest,error:null}:{ok:!1,version:null,error:e.error}}function pv(n,e={},t=null){let s=t||(_d(n)?"beta":"latest"),r=e.latest||null,o="latest";s==="beta"&&e.beta&&(!r||mt(e.beta,r)>0)&&(r=e.beta,o="beta");let i=!!r&&mt(r,n)>0;return{version:r,tag:o,available:i,command:o==="beta"?"leftoff upgrade --beta":"leftoff upgrade"}}async function yl({repoDir:n=rr,env:e=process.env,globalRoot:t}={}){let s={version:Q,sha:null,kind:"local",source:null,repoDir:n};if(Si.existsSync(ps.join(n,".git"))){s.kind="clone";let o=await Zt(["rev-parse","HEAD"],{cwd:n,env:e});o.code===0&&(s.sha=o.stdout.trim());let i=await Zt(["remote","get-url","origin"],{cwd:n,env:e});return s.source=i.code===0?i.stdout.trim():null,s}if(fv(n))return s.kind="npm",s.source="npm:"+gt,s.pm=hv(n,e),s.npx=sg(n),s;let r=cv(n);return r&&(s.sha=r.sha||null,s.source=r.source||null),sg(n)?s.kind="npx":(t?n.startsWith(t):/[\\/]node_modules[\\/](checkpoints|leftoff|@leftoff[\\/]cli)$/.test(n))&&(s.kind="global"),s}function mv(n){let e=String(n||"").match(/^https:\/\/github\.com\/([\w.-]+)\/([\w.-]+?)(?:\.git)?\/?$/);return e?"git@github.com:"+e[1]+"/"+e[2]+".git":null}async function lv(n,{env:e,timeoutMs:t}){let s=await Zt(["ls-remote",n,"HEAD"],{env:e,timeoutMs:t}),r=s.code===0?(s.stdout.match(/^([0-9a-f]{40})\s+HEAD$/m)||[])[1]:null;return r?{ok:!0,sha:r,error:null,source:n}:{ok:!1,sha:null,error:ng(s.stderr)||"git ls-remote exited "+s.code,source:n}}async function gv(n,{env:e=process.env,timeoutMs:t=15e3}={}){let s=bi(n),r=await lv(s,{env:e,timeoutMs:t});if(r.ok)return r;let o=mv(s);if(!o)return r;let i=await lv(o,{env:e,timeoutMs:t});return i.ok?i:{ok:!1,sha:null,source:s,error:r.error+" (also tried "+o+": "+i.error+")"}}async function yv(n,{cacheDir:e=cg(),env:t=process.env,timeoutMs:s=3e4}={}){try{if(Si.mkdirSync(e,{recursive:!0}),!Si.existsSync(ps.join(e,"HEAD"))){let c=await Zt(["init","--bare","-q",e],{env:t});if(c.code!==0)return{ok:!1,error:ng(c.stderr)}}let r=await Zt(["fetch","-q","--depth=1",bi(n),"HEAD"],{cwd:e,env:t,timeoutMs:s});if(r.code!==0)return{ok:!1,error:ng(r.stderr)||"git fetch exited "+r.code};let o=(await Zt(["rev-parse","FETCH_HEAD"],{cwd:e,env:t})).stdout.trim()||null,i=await Zt(["show","FETCH_HEAD:CHANGELOG.md"],{cwd:e,env:t}),a=await Zt(["show","FETCH_HEAD:package.json"],{cwd:e,env:t}),l=null;try{l=JSON.parse(a.stdout).version||null}catch{}return{ok:!0,sha:o,version:l,changelog:i.code===0?i.stdout:null,error:null}}catch(r){return{ok:!1,error:r.message}}}function cg(n=process.env){return ps.join(n.XDG_CACHE_HOME||ps.join(_M.homedir(),".cache"),"checkpoints","remote.git")}async function wl({info:n,source:e,env:t=process.env,cacheDir:s,now:r=Date.now(),fetchFiles:o=!0,channel:i=null,fetchImpl:a=null}={}){let l=n||await yl({env:t});if(l.kind==="npm"){let h={checkedAt:new Date(r).toISOString(),source:"npm:"+gt,current:{version:l.version,sha:null},remote:{sha:null,version:null},available:!1,incoming:[],error:null},p=await lg({env:t,...a?{fetchImpl:a}:{}});if(!p.ok)return h.error=p.error,h;let m=pv(l.version,p.tags,i);return h.remote.version=m.version,h.remote.tag=m.tag,h.upgradeCommand=m.command,p.tags.latest&&p.tags.latest!==m.version&&(h.remote.latest=p.tags.latest),h.available=m.available,h}let c=bi(e||l.source||ml),u={checkedAt:new Date(r).toISOString(),source:c,current:{version:l.version,sha:l.sha},remote:{sha:null,version:null},available:!1,incoming:[],error:null},d=await gv(c,{env:t});if(!d.ok)return u.error=d.error,u;if(u.source=d.source,u.remote.sha=d.sha,l.sha&&l.sha===d.sha)return u;if(o){let h=await yv(u.source,{cacheDir:s||cg(t),env:t});h.ok?(u.remote.version=h.version,h.changelog&&(u.incoming=ki(tg(h.changelog),l.version,h.version).map(p=>({version:p.version,date:p.date,sections:p.sections})))):u.fetchError=h.error}let f=u.remote.version?mt(u.remote.version,l.version):null;return u.available=f===1||f===0&&!!l.sha||f===null&&!!l.sha,f===-1&&(u.available=!1),u}var rr,ml,rg,og,ng,gt,gl,kl=K(()=>{Rt();Ae();Ed();rr=ps.resolve(ps.dirname(EM(import.meta.url)),".."),ml="https://github.com/"+ts+".git",rg=".install.json",og=24*3600*1e3;ng=n=>String(n||"").trim().split(`
 `).filter(Boolean).pop()||"";gt="@leftoff/cli",gl=[gt,"leftoff","checkpoints"]});import hn from"node:fs";import vi from"node:path";import OM from"node:crypto";function Nd(n){return!n||typeof n.toolName!="string"||!n.toolName?null:n.ruleContent!=null&&n.ruleContent!==""?n.toolName+"("+String(n.ruleContent)+")":n.toolName}function vv(n){let e=/^([A-Za-z_][\w-]*)(?:\((.*)\))?$/s.exec(String(n||""));return e?e[2]!=null?{toolName:e[1],ruleContent:e[2]}:{toolName:e[1]}:null}function MM(n){if(typeof n!="string")return null;let e=n.trim();if(!e||e.length>NM||/[\n\r`*()]/.test(e)||e.includes("$(")||e.includes("${")||/[\u2026\u22ef\u00b7]/.test(e)||/redacted/i.test(e))return null;let t=[],s="",r=null;for(let i=0;i<e.length;i++){let a=e[i],l=e[i+1];if(r){if(a==="\\"&&r==='"'){s+=a+(l||""),i++;continue}a===r&&(r=null),s+=a;continue}if(a==="\\"){if(l==null)return null;s+=a+l,i++;continue}if(a==="'"||a==='"'){r=a,s+=a;continue}if(a==="&"&&l==="&"||a==="|"&&l==="|"){t.push(s),s="",i++;continue}if(a===";"||a==="|"){t.push(s),s="";continue}s+=a}if(r)return null;t.push(s);let o=[];for(let i of t){let a=(i.match(Sv())||[]).join("");if(/[<>&]/.test(a)&&kv().test(i)||(i=i.replace(kv()," ").trim(),!i))return null;let l=i.replace(Sv(),'""');if(/[<>&{}]/.test(l)||/^[A-Za-z_][A-Za-z0-9_]*=/.test(l))return null;o.includes(i)||o.push(i)}return o.length&&o.length<=bv?o:null}function IM(n,e){let t=String(n||"");if(t==="Bash"){let s=MM(e&&e.command);return s?s.map(r=>({toolName:"Bash",ruleContent:r})):null}if(/^mcp__[\w-]+__[\w-]+$/.test(t))return[{toolName:t}];if(t==="WebFetch"&&e&&typeof e.url=="string"){let s;try{s=new URL(e.url)}catch{return null}return!/^https?:$/.test(s.protocol)||!s.hostname||/[*()]/.test(s.hostname)?null:[{toolName:"WebFetch",ruleContent:"domain:"+s.hostname}]}return null}function LM(n){if(!Array.isArray(n))return null;let e=[];for(let t of n)if(!(!t||t.type!=="addRules"||t.behavior==="deny"||t.behavior==="ask"||!Array.isArray(t.rules)))for(let s of t.rules){let r=Nd(s);r&&!/[\n\r]/.test(r)&&!e.some(o=>Nd(o)===r)&&e.push({toolName:s.toolName,...s.ruleContent!=null&&s.ruleContent!==""?{ruleContent:String(s.ruleContent)}:{}})}return e.length?e.slice(0,bv):null}function jM(n){try{let e=JSON.parse(String(n||""));return e&&typeof e=="object"&&!Array.isArray(e)?e:null}catch{return null}}function Md(n){if(!n||n.kind!=="permission")return null;let e=LM(n.suggestions);if(e)return{rules:e.map(Nd),source:"claude"};let t=n.input&&Object.keys(n.input).length?n.input:jM(n.preview),s=IM(n.tool,t);return s?{rules:s.map(Nd),source:"derived"}:null}function ms(n,e){let t=new Error(e);return t.status=409,t.code=n,t}function xv(n,e){if(!n||typeof n!="string"||!vi.isAbsolute(n))throw ms("no_folder","Leftoff doesn’t know this session’s project folder, so it can’t save the rule. Allow once instead.");let t;try{t=hn.statSync(n)}catch{t=null}if(!t||!t.isDirectory())throw ms("no_folder","The project folder "+n+" isn’t there, so the rule can’t be saved. Allow once instead.");let s=(Array.isArray(e)?e:[]).map(String).filter(Boolean);if(!s.length)throw ms("no_rule","No rule to save for this request.");let r=vi.join(n,".claude"),o=vi.join(r,"settings.local.json");try{hn.lstatSync(o).isSymbolicLink()&&(o=hn.realpathSync(o))}catch{}let i=null,a=420;try{i=hn.readFileSync(o,"utf8"),a=hn.statSync(o).mode&511}catch(p){if(p.code!=="ENOENT")throw ms("settings_unreadable","Couldn’t read "+gs+" ("+p.code+"). Nothing was changed.")}let l={};if(i!=null&&i.trim()){try{l=JSON.parse(i)}catch(p){throw ms("settings_malformed",gs+" in "+n+" isn’t valid JSON, so Leftoff left it alone. Fix it or Allow once. ("+p.message+")")}if(!l||typeof l!="object"||Array.isArray(l))throw ms("settings_malformed",gs+" in "+n+" isn’t a JSON object, so Leftoff left it alone. Allow once instead.")}let c=l.permissions==null?{}:l.permissions;if(!c||typeof c!="object"||Array.isArray(c))throw ms("settings_malformed",'"permissions" in '+gs+" isn’t an object, so Leftoff left it alone. Allow once instead.");let u=c.allow==null?[]:c.allow;if(!Array.isArray(u))throw ms("settings_malformed",'"permissions.allow" in '+gs+" isn’t a list, so Leftoff left it alone. Allow once instead.");let d=s.filter((p,m)=>!u.includes(p)&&s.indexOf(p)===m);if(!d.length)return{file:o,added:[],already:s,changed:!1};let f={...l,permissions:{...c,allow:[...u,...d]}};hn.mkdirSync(vi.dirname(o),{recursive:!0});let h=vi.join(vi.dirname(o),".settings.local.json."+process.pid+"."+OM.randomBytes(4).toString("hex")+".tmp");try{let p=hn.openSync(h,"w",a);try{hn.writeSync(p,JSON.stringify(f,null,2)+`
 `),hn.fsyncSync(p)}finally{hn.closeSync(p)}hn.renameSync(h,o)}catch(p){try{hn.unlinkSync(h)}catch{}throw ms("settings_unwritable","Couldn’t write "+gs+" ("+(p.code||p.message)+"). Nothing was changed.")}return{file:o,added:d,already:s.filter(p=>!d.includes(p)),changed:!0}}var gs,NM,bv,kv,Sv,ug=K(()=>{gs=".claude/settings.local.json",NM=600,bv=6;kv=()=>/(^|\s)(?:[12]?>&[12]|&>\s*\/dev\/null|[12]?>\s*\/dev\/null)(?=\s|$)/g,Sv=()=>/'[^']*'|"(?:\\.|[^"\\])*"/g});import Tv from"node:crypto";import PM from"node:path";function dg(){return"rq_"+Tv.randomBytes(9).toString("base64url")}function Sl(n,e){let t=s=>Array.isArray(s)?"["+s.map(t).join(",")+"]":s&&typeof s=="object"?"{"+Object.keys(s).filter(r=>r!=="answers").sort().map(r=>JSON.stringify(r)+":"+t(s[r])).join(",")+"}":JSON.stringify(s===void 0?null:s);return Tv.createHash("sha256").update(String(n||"")+`
 `+t(e||{})).digest("hex").slice(0,16)}function fg(n,e={}){let t=e&&typeof e=="object"?e:{};switch(n){case"Bash":return{verb:"Run",detail:yt(t.command,400),note:t.description?yt(t.description,160):null};case"Edit":case"MultiEdit":return{verb:"Edit",detail:yt(t.file_path,300),note:null};case"Write":return{verb:"Write",detail:yt(t.file_path,300),note:t.content?yt(String(t.content).split(`
@@ -512,7 +512,7 @@ leftoff live key [--new]      the key for outside events (CI, webhooks), with a
 # leftoff upgrade, `+new Date().toISOString()+(o?"":" (--verbose)")),n.finish)return LP({flags:n,out:e,env:t,c:r,say:a,ok:l,warn:c,fail:u,P:i});let d=s||await yl({env:t,globalRoot:t.CHECKPOINTS_NPM_GLOBAL_ROOT||void 0}),f=bi(n.source||t.CHECKPOINTS_UPDATE_SOURCE||(ee().updates||{}).source||d.source||ml);d.kind==="npm"&&(f="npm:"+gt),a(r.bold(Ge+" v"+d.version)+r.dim((d.kind==="npm"?" · installed from npm with "+d.pm+" at ":" ("+Tr(d.sha)+") · "+{clone:"a git clone at ",global:"installed globally at ",npx:"an npx copy at ",local:"installed at "}[d.kind])+d.repoDir));let h=n.beta&&OP(d);if(h)return i.warn(h),2;i.start("Checking for updates…");let p=d.kind==="npm"?n.beta?"beta":"latest":null,m=await wl({info:d,source:f,env:t,channel:p});if(m.error&&d.kind==="npm")return u("Couldn't reach the npm registry ("+Od(t)+"): "+m.error),1;if(m.error)return a(r.dim("  (git uses your own credentials; for a private repo, check `git ls-remote "+f+'` works, or set "updates": { "source": "git@github.com:'+ts+'.git" } in config.json)')),u("Couldn't reach "+f+": "+m.error),1;if(m.source&&m.source!==f&&(a(r.dim("· reached GitHub over SSH ("+m.source+")")),f=m.source),!(m.available||!d.sha&&m.remote.version&&mt(m.remote.version,d.version)>0)&&!n.force)return d.kind==="npm"&&_d(d.version)&&!n.beta?(i.done("Up to date: "+Ge+" "+d.version+", a beta"+(m.remote.version?" (latest is "+m.remote.version+")":"")),a(r.dim("Next beta: leftoff upgrade --beta")),0):(o?i.done("Up to date: "+Ge+" "+d.version):l("Up to date"+r.dim(" (remote "+Tr(m.remote.sha)+(m.remote.version?", v"+m.remote.version:"")+")")),0);let S=m.remote.version||Tr(m.remote.sha);if(i.done("Found "+S+" (you have "+d.version+")"),a(r.bold(r.cyan("Update available: "))+(m.remote.version?"v"+d.version+" → v"+m.remote.version:"")+(d.kind==="npm"?"":r.dim("  "+Tr(d.sha)+" → "+Tr(m.remote.sha)))),m.incoming.length?a(`
 `+Td(m.incoming,{colors:r})):m.fetchError&&a(r.dim("  (couldn't read the new changelog: "+m.fetchError+")")),n.check)return a(r.dim("Run `"+(m.upgradeCommand||"leftoff upgrade")+"` to install it.")),0;i.start("Downloading "+S+"…");let y=d.repoDir;if(d.kind==="npm"){let b=ag(d.pm,gt+"@"+(m.remote.version||m.remote.tag||"latest"));a(r.dim("$ "+b.join(" ")));let x=await Lw(b[0],b.slice(1),{env:t,log:i.log});if(x.status!==0)return o||a((x.stderr||"").trim()),u(b.slice(0,3).join(" ")+" failed: "+((x.stderr||"").trim().split(`
 `).pop()||"exit "+x.status)),1;let E=t.CHECKPOINTS_NPM_GLOBAL_ROOT||$_(t,d.pm);y=E&&Pt.existsSync(zt.join(E,gt,"package.json"))?zt.join(E,gt):d.repoDir;let O=null;try{O=JSON.parse(Pt.readFileSync(zt.join(y,"package.json"),"utf8")).version}catch{}if(m.remote.version&&O&&O!==m.remote.version)return u("npm installed "+O+", not "+m.remote.version+". npm may still be catching up; try again in a minute."),1;l("Installed "+gt+"@"+(O||m.remote.version||"latest")+r.dim(" → "+y))}else if(d.kind==="clone"){d.source&&oo(d.source)!==d.source&&(await Zt(["remote","set-url","origin",oo(d.source)],{cwd:d.repoDir,env:t})).code===0&&a(r.dim("· the repo is now "+ts+"; pointed origin at "+oo(d.source))),a(r.dim("$ git -C "+d.repoDir+" pull --ff-only"));let b=await Zt(["pull","--ff-only","-q"],{cwd:d.repoDir,env:t,timeoutMs:12e4});if(b.code!==0)return a(b.stderr.trim()),a(r.dim("  Local changes? Commit or stash them and run `leftoff upgrade` again.")),u("git pull failed: "+(b.stderr.trim().split(`
-`).pop()||"exit "+b.code)),1;l("Pulled "+Tr(m.remote.sha))}else{let b=f.match(/^(?:https:\/\/github\.com\/|git@github\.com:)([\w.-]+\/[\w.-]+?)(?:\.git)?$/),x=b?"github:"+b[1]:f;a(r.dim("$ npm install -g "+x));let E=await Lw(z_(),["install","-g",x,"--no-fund","--no-audit","--loglevel=error"],{env:t,log:i.log});if(E.status!==0)return o||a((E.stderr||"").trim()),u("npm install -g failed: "+((E.stderr||"").trim().split(`
+`).pop()||"exit "+b.code)),1;l("Pulled "+Tr(m.remote.sha))}else{let b=f.match(/^(?:https:\/\/github\.com\/|git@github\.com:)([\w.-]+\/[\w.-]+?)(?:\.git)?$/),x=b?"github:"+b[1]:f;a(r.dim("$ npm install -g "+x));let E=await Lw(z_(),["install","-g",x,"--prefer-online","--no-fund","--no-audit","--loglevel=error"],{env:t,log:i.log});if(E.status!==0)return o||a((E.stderr||"").trim()),u("npm install -g failed: "+((E.stderr||"").trim().split(`
 `).pop()||"exit "+E.status)),1;let O=t.CHECKPOINTS_NPM_GLOBAL_ROOT||$_(t);y=O?TP(O):d.repoDir,l("Installed "+x+r.dim(" → "+y));try{Pt.existsSync(zt.join(y,".install.json"))||ig({sha:m.remote.sha,source:f,version:m.remote.version||void 0},y)}catch{}}i.done("Downloaded "+S),i.start("Updating the Claude Code plugin…");let k=null,v=Vi(t);if(d.kind==="npm")try{zy({from:y,env:t})}catch(b){c("Couldn't refresh the mod's files: "+b.message)}if(!v)c("`claude` isn't on PATH; update the mod later with: claude plugin marketplace update "+Vn+" && claude plugin update "+We);else{let b=oh(v,t);if(!b.installed&&b.legacyInstalled){a(r.dim("$ claude plugin marketplace update "+Vn));let x=As(v,["plugin","marketplace","update",Vn],{env:t});x.code!==0&&c("`claude plugin marketplace update "+Vn+"` failed: "+((x.stderr||x.stdout).trim().split(`
 `).pop()||"exit "+x.code))}else if(!b.installed)a(r.dim("· The mod isn't installed through `claude plugin`; nothing to update there.")),k="skip";else{let x=!1;for(let E of[["plugin","marketplace","update",Vn],["plugin","update",We]]){a(r.dim("$ claude "+E.join(" ")));let O=await Lw(v,E,{env:{...t,CHECKPOINTS_INTERNAL:"1",LEFTOFF_INTERNAL:"1"},log:i.log,timeoutMs:12e4});if(O.status!==0){x=!0,c("`claude "+E.join(" ")+"` failed: "+((O.stderr||O.stdout).trim().split(`
 `).pop()||"exit "+O.status));break}}l("Mod updated"+r.dim(" · restart open Claude Code sessions to load it")),x||(k="ok")}}o&&(k==="ok"?i.done("Updated the Claude Code plugin"):k==="skip"?i.done("Claude Code plugin: not installed with `claude plugin`, nothing to update"):i.stop());let T=[zt.join(y,"bin","checkpoints.js"),"upgrade","--finish","--from="+d.version,"--from-sha="+(d.sha||""),"--repo="+y];if(n["no-restart"]&&T.push("--no-restart"),!o){let b=Lh(process.execPath,T,{env:t,stdio:"inherit"});return b.status==null?1:b.status}T.push("--quiet","--log="+i.logFile);let g=Lh(process.execPath,T,{env:{...t,LEFTOFF_PROGRESS_TTY:e.isTTY&&!t.CI?"1":"0"},stdio:["ignore","inherit","pipe"],encoding:"utf8"});return g.stderr&&i.log(g.stderr.trimEnd()),g.status!==0?(i.fail("Finishing the upgrade failed (exit "+g.status+")"),g.status==null?1:g.status):0}var NP=n=>String(n).replace(/\x1b\[2m.*?\x1b\[22m/g,"").trim();function MP(n,e=3){let t=n.map(r=>{let o=r.sections.flatMap(a=>a.items),i=o.filter(a=>/^\*\*/.test(a));return i.length?i:o}),s=[];for(let r=0;s.length<e&&t.some(o=>o.length>r);r++)for(let o of t){if(s.length>=e||!o[r])continue;let i=o[r].match(/^\*\*(.+?)\*\*/),a=(i?i[1]:o[r]).replace(/[*`]/g,"").replace(/\s+/g," ").trim().replace(/[.:]$/,"");a.length>72&&(a=a.slice(0,71).replace(/\s+\S*$/,"")+"…"),s.push(a)}return s}function IP(n,e,t=Q){let s=[];for(let[r,o]of Object.entries(uo(n)))r!==e&&o.valid&&o.card.version&&mt(o.card.version,t)<0&&s.push(r+" ("+o.card.version+")");return s.sort()}async function LP({flags:n,out:e,env:t,c:s,say:r,ok:o,warn:i,fail:a,P:l}){let c=l.quiet,u=String(n.from||""),d=String(n.repo||rr),f=await yl({repoDir:d,env:t}),h=Z(),p=ht(h);if(p){let{cfg:y,applied:k}=_P(p,u,Q);if(k.length){Pt.writeFileSync(ve(h).config,JSON.stringify(y,null,2)+`

package/mod/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "leftoff",
-  "version": "0.9.8-beta.7",
+  "version": "0.9.8-beta.9",
   "description": "Leftoff (formerly Checkpoints): WTF was I working on? Tracks every Claude Code session on this machine, writes a 3-line checkpoint when one goes quiet, and adds /cp (checkpoint now), /cp-name and a /leftoff pane. Talks to the local Leftoff daemon on 127.0.0.1:7429 and falls back to writing markdown in ~/checkpoints.",
   "author": {
     "name": "Joel"

package/mod/hooks/register.js

@@ -28,7 +28,7 @@ const END_TIMEOUT_MS = 1000
 const MODEL_TIMEOUT_MS = 20000
 
 // Module state. $.state is not used: the pane redraws with $.ui.invalidate.
-const MOD_VERSION = '0.9.8-beta.7' // keep in step with .claude-plugin/plugin.json
+const MOD_VERSION = '0.9.8-beta.9' // keep in step with .claude-plugin/plugin.json
 
 const st = {
   internal: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leftoff/cli",
-  "version": "0.9.8-beta.7",
+  "version": "0.9.8-beta.9",
   "description": "Leftoff: WTF was I working on? Tracks every Claude Code session, writes a 3-line checkpoint when one goes quiet, and gives you a daily digest and a board, on your Mac and (optionally) your phone.",
   "keywords": [
     "claude",

package/ui/app.css

@@ -2141,10 +2141,10 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
 }
 
 /* ------------------------------------------------------------ the sidebar rail (0.9.8)
-   From 820px up: a narrow rail on the left. The Leftoff mark at the top, then
+   From 700px up (0.9.8 tabs: was 820): a narrow rail on the left. The Leftoff mark at the top, then
    the sections as an icon over a small label, the current one in a soft pill,
    a red count on Needs you; search, What's new, Settings and this Mac's status
-   (the Mac switcher) at the bottom. Under 820px: the mark, search and status in
+   (the Mac switcher) at the bottom; 700–1099px it shows icons only. Under 700px: the mark, search and status in
    a slim top row, and a bottom tab bar (Board, Needs you, Lists, PRs, More). */
 :root { --rail-w: 84px; --rail-on: color-mix(in srgb, var(--accent) 13%, transparent); --bar-h: 58px; }
 .tab-more { display: none; }
@@ -2153,7 +2153,7 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
 .moredot[hidden] { display: none; }
 .iconbtn .lbl { display: none; }
 .tabs a, .tab-more { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
-@media (min-width: 820px) {
+@media (min-width: 700px) {
   body { padding-left: calc(var(--rail-w) + env(safe-area-inset-left)); }
   .top { position: fixed !important; top: 0; bottom: 0; left: 0; width: calc(var(--rail-w) + env(safe-area-inset-left)); z-index: 20; /* !important: the rail never joins the page flow */
     flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 6px; min-height: 0;
@@ -2181,11 +2181,11 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
   .newdot, .topdot { top: 8px; right: calc(50% - 15px); box-shadow: 0 0 0 2px var(--bg); }
   .set-nav { top: 24px; }
 }
-@media (min-width: 820px) and (max-height: 640px) {
+@media (min-width: 700px) and (max-height: 640px) {
   .tabs a, .topright .searchbtn, .topright .iconbtn, .topright .health { min-height: 46px; padding: 4px 2px; gap: 2px; }
   .brand { padding-bottom: 4px; }
 }
-@media (max-width: 819.98px) {
+@media (max-width: 699.98px) {
   .top { flex-wrap: nowrap; gap: 8px; min-height: 52px; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
   .brand { order: 1; }
   .topright { order: 2; margin-left: auto; gap: 2px; }
@@ -2224,7 +2224,7 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
 .moremenu a.on { background: var(--rail-on); }
 .moremenu a.on .ic { color: var(--accent); }
 .moremenu .newdot, .moremenu .topdot { position: static; margin-left: auto; box-shadow: none; }
-@media (min-width: 820px) { .moremenu { display: none !important; } }
+@media (min-width: 700px) { .moremenu { display: none !important; } }
 /* Quick look on Needs you (0.9.8) */
 .quicklook { position: fixed; z-index: 45; width: 360px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain;
   background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(15, 20, 35, .18), 0 2px 6px rgba(15, 20, 35, .08); padding: 12px 12px 8px; font-size: 13.5px; animation: lo-in .12s ease-out; }
@@ -2254,8 +2254,8 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
 .ql-foot { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 44px; padding: 0 6px; margin-top: 2px; color: var(--accent); font-weight: 600; text-decoration: none; border-radius: 8px; }
 .ql-foot:hover { text-decoration: underline; }
 .ql-foot:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
-@media (pointer: coarse), (max-width: 819.98px) { .ql-actions .btn { min-height: 44px; min-width: 64px; } .ql-main { min-height: 44px; justify-content: center; } }
-@media (max-width: 819.98px) { .quicklook { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); width: auto; max-width: none; bottom: calc(var(--bar-h) + 8px + env(safe-area-inset-bottom)); max-height: calc(100vh - var(--bar-h) - 80px); } }
+@media (pointer: coarse), (max-width: 699.98px) { .ql-actions .btn { min-height: 44px; min-width: 64px; } .ql-main { min-height: 44px; justify-content: center; } }
+@media (max-width: 699.98px) { .quicklook { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); width: auto; max-width: none; bottom: calc(var(--bar-h) + 8px + env(safe-area-inset-bottom)); max-height: calc(100vh - var(--bar-h) - 80px); } }
 @media (prefers-reduced-motion: reduce) { .quicklook, .moremenu { animation: none; } }
 
 /* Pull to refresh (phones, 0.9.8): the spinner comes down from under the top row */
@@ -2267,7 +2267,7 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
 .ptr-ring svg { width: 19px; height: 19px; }
 .ptr.armed { color: var(--accent); }
 .ptr.busy .ptr-ring { animation: spin .8s linear infinite; }
-@media (pointer: coarse) and (max-width: 819.98px) { html, body { overscroll-behavior-y: contain; } }
+@media (pointer: coarse) and (max-width: 699.98px) { html, body { overscroll-behavior-y: contain; } }
 @media (prefers-reduced-motion: reduce) { .ptr-ring { transform: none; } .ptr.busy .ptr-ring { animation: lo-pulse 1.2s ease-in-out infinite; } }
 @keyframes lo-pulse { 50% { opacity: .35; } }
 
@@ -2328,3 +2328,81 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
 .moremenu .push-slot { border-top: 1px solid var(--line); margin-top: 6px; padding: 12px 8px 6px; }
 .moremenu:has(.push-slot:not([hidden])) { width: 270px; }
 .form .push-slot { grid-column: 1 / -1; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card2, transparent); margin-top: 4px; }
+
+/* ------------------------------------------------------------ tabs for sessions (0.9.8)
+   By width, never by device. Under 700px: no strip; an Open row on the board
+   and "‹ 2 of 4 ›" on a session page (swipe works too). 700–1099px: the strip,
+   the rail as icons. From 1100px: the full rail and the strip. */
+.tabstrip, .openrow, .tabpager { display: none; }
+.tabstrip[hidden], .openrow[hidden], .tabpager[hidden] { display: none !important; }
+.tab-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.preview .tab-t, .tab-s.preview .tab-t, .ochip.preview .tab-t { font-style: italic; }
+.tab-live, .tab-need { flex: none; width: 8px; height: 8px; border-radius: 50%; position: relative; }
+.tab-live { background: var(--green); animation: live-pulse 1.6s ease-in-out infinite; }
+.tab-need { background: var(--red); }
+@media (prefers-reduced-motion: reduce) { .tab-live { animation: none; } }
+@media (min-width: 700px) {
+  .tabstrip { display: flex; position: sticky; top: 0; z-index: 15; align-items: stretch; height: 44px; background: var(--bg); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
+  .tabstrip-in { flex: 1; min-width: 0; display: flex; align-items: stretch; }
+  .tab-scroll { flex: 1; min-width: 0; display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
+  .tab-scroll::-webkit-scrollbar { display: none; }
+  .tab { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500; white-space: nowrap; }
+  .tab .ic { width: 16px; height: 16px; flex: none; }
+  .tab:hover { color: var(--text); }
+  .tab:focus-visible, .tab-x:focus-visible, .tab-all:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+  .tab-board { flex: none; border-right: 1px solid var(--line); }
+  .tab-cell { position: relative; flex: 0 1 200px; min-width: 120px; display: flex; align-items: stretch; border-right: 1px solid var(--line); }
+  .tab-s { flex: 1; min-width: 0; padding-right: 0; }
+  .tab.on, .tab-cell.on { color: var(--text); background: var(--card); }
+  .tab-board.on, .tab-cell.on { box-shadow: inset 0 -2px 0 var(--accent); }
+  .tab-x { flex: none; width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; border-radius: 8px; }
+  .tab-x .ic { width: 14px; height: 14px; }
+  .tab-x { position: relative; }
+  .tab-x::before { content: ''; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: transparent; transition: background .12s; }
+  .tab-x .ic { position: relative; }
+  .tab-x:hover { color: var(--text); background: none; }
+  .tab-x:hover::before { background: color-mix(in srgb, var(--text) 9%, transparent); }
+  .tab-keep .ic { width: 12px; height: 12px; }
+  .tab-keep { opacity: 0; }
+  .tab-cell:hover .tab-keep, .tab-keep:focus-visible, .tab-cell.on .tab-keep { opacity: 1; }
+  .tab-cell.dragging { opacity: .5; }
+  .tab-cell.drop-before { box-shadow: inset 2px 0 0 var(--accent); }
+  .tab-all { flex: none; width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-left: 1px solid var(--line); background: var(--bg); color: var(--muted); cursor: pointer; }
+  .tab-all .ic { width: 18px; height: 18px; }
+  .tab-all:hover, .tab-all[aria-expanded="true"] { color: var(--text); background: var(--bg2); }
+  .tab-all[hidden] { display: none; }
+}
+@media (min-width: 700px) and (pointer: coarse) { .tab-keep { opacity: 1; } }
+/* the rail as icons (700–1099px): the labels stay for screen readers */
+@media (min-width: 700px) and (max-width: 1099.98px) {
+  :root { --rail-w: 64px; }
+  .tabs a .lbl, .topright .lbl, .topright .sb-lbl, .topright .health .label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
+  .tabs a, .topright .searchbtn, .topright .iconbtn, .topright .health { min-height: 48px; padding: 6px 2px; }
+  .navcount { left: calc(50% + 2px); }
+}
+/* phones (under 700px): the Open row on the board, ‹ N of M › on a session page */
+@media (max-width: 699.98px) {
+  body[data-route="board"] .openrow { display: block; }
+  body[data-route="s"] .tabpager { display: block; }
+  .openrow { padding: 8px 0 0; }
+  .openrow-h { display: flex; gap: 8px; align-items: baseline; padding: 0 max(16px, env(safe-area-inset-left)); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
+  .openrow-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 8px max(16px, env(safe-area-inset-left)) 6px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
+  .openrow-chips::-webkit-scrollbar { display: none; }
+  .ochip-cell { flex: none; display: flex; align-items: stretch; max-width: 62vw; border: 1px solid var(--line); border-radius: 22px; background: var(--card); scroll-snap-align: start; }
+  .ochip-cell.preview { border-style: dashed; }
+  .ochip { display: flex; align-items: center; gap: 7px; min-height: 44px; min-width: 44px; padding: 0 14px; color: var(--text); text-decoration: none; font-size: 15px; max-width: 100%; min-width: 0; }
+  .ochip-cell:not(.preview) .ochip { padding-right: 2px; }
+  .ochip-x { flex: none; width: 44px; min-height: 44px; border: 0; background: none; color: var(--muted); display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 22px; }
+  .ochip-x .ic { width: 15px; height: 15px; }
+  .tabpager { padding: 4px max(8px, env(safe-area-inset-left)) 0; }
+  .pager-in { display: flex; align-items: center; gap: 6px; }
+  .pager-b { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 22px; color: var(--text); text-decoration: none; }
+  .pager-b .ic { width: 22px; height: 22px; }
+  .pager-b.off { opacity: .25; }
+  .pager-b:not(.off):active { background: var(--bg2); }
+  .pager-n { flex: 1; text-align: center; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
+  .pager-keep { flex: none; min-height: 44px; }
+  .swipe-next main { animation: lo-page-fwd .18s ease-out; }
+  .swipe-prev main { animation: lo-page-back .18s ease-out; }
+}
+@media (prefers-reduced-motion: reduce) { .swipe-next main, .swipe-prev main { animation: none !important; } }

package/ui/app.js

@@ -19,9 +19,10 @@ import { cardPrsHtml, sessionPrsSection, prsPageHtml, prsBodyHtml, prRowHtml, pr
 import { wantsSetupBanner, setupCandidate, localLeftoffAnswers, thisOneSuffix, isPhoneUa } from './viewer.js'
 import { restoreAccess, hintHtml, restoreWhen, askLine } from './restore-gate.js'
 import { defaultEmoji, PICKER_SET, isEmoji } from './machines.js'
-import { sessionTitle, titleIsWhere, titleHtml, cardPills, foldsAsEmpty, threadHtml, earlierHtml, createLiveKeeper, liveHref, parseLiveRoute, hasUnread, scrollDecision, atBottom, jumpView, liveBadgeHtml, lockPulses } from './live-view.js' // 0.9.8 Live link polish
+import { sessionTitle, titleIsWhere, titleHtml, cardPills, foldsAsEmpty, threadHtml, earlierHtml, createLiveKeeper, liveHref, parseLiveRoute, hasUnread, scrollDecision, atBottom, jumpView, liveBadgeHtml, lockPulses, liveWorking } from './live-view.js' // 0.9.8 Live link polish
 import { statusView, elapsedText } from './live-status.js'
 import { mountPush, paintPush } from './push.js' // 0.9.8 phone notifications
+import { TABS_KEY, layoutFor, parseStored, serialize, openTab, promote, remember, closeTab, moveTab, neighbours, indexOf, sessionOfHash, keepHash, tabView, stripHtml, allTabsItems, openRowHtml, pagerHtml, swipeDir } from './tabs.js' // 0.9.8 tabs for sessions
 import { todosSection, sessionTodosSection, cardHandoffChips, sessionFilesSection, docViewerBody, docDownloadHref, docMenuItems, docFileName, renderDoc } from './handoffs.js'
 const $app = document.getElementById('app')
 // 0.9.8: the pulsing dots (Live while Claude works, active, a blocking ask) keep their beat through the board's redraws
@@ -3380,6 +3381,7 @@ function parseRoute() {
 async function render() {
   const r = (state.route = parseRoute())
   paintNav(r)
+  tabsOnRoute(r)
   try {
     if (r.name === 's' && r.arg) await viewSession(r.arg)
     else if (r.name === 'waiting') await viewWaiting()
@@ -3394,6 +3396,7 @@ async function render() {
     else if (r.name === 'search') await viewSearch(r.q || '')
     else if (r.name === 'setup') await viewSetup()
     else await viewBoard()
+    tabsAfterRender()
   } catch (e) {
     if (e.code === 'login_required') return showLogin()
     $app.innerHTML = '<div class="empty">Couldn’t load: ' + esc(e.message) + '</div>'
@@ -3501,12 +3504,12 @@ function paintTopDot() {
 }
 
 // ------------------------------------------------------------ the rail, the bottom bar and Quick look (0.9.8)
-// From 820px up the sections sit in a rail on the left; under it, in a bottom
+// From 700px up the sections sit in a rail on the left; under it, in a bottom
 // bar with the rest under More. Hover the Needs you item (or long-press it on a
 // phone, or press ↓/→ on it) for Quick look: the count and the five longest
 // waits, with Allow / Deny on permission prompts (the Needs you page's own
 // buttons, so the same checks apply and nothing is answered without a click).
-const railMode = () => window.matchMedia('(min-width: 820px)').matches
+const railMode = () => window.matchMedia('(min-width: 700px)').matches
 function paintNav(r = state.route || parseRoute()) {
   const key = navKey(r.name)
   document.querySelectorAll('.tabs a[data-route], .topright a[data-route], #moreMenu a[data-route]').forEach((a) => { const on = a.dataset.route === key; a.classList.toggle('on', on); if (on) a.setAttribute('aria-current', 'page'); else a.removeAttribute('aria-current') })
@@ -3664,6 +3667,214 @@ function closeQuickLook(focusTab = false) {
   window.addEventListener('resize', () => { placeQuickLook(); if (statusOpen()) placeStatus() })
 }
 
+// ------------------------------------------------------------ tabs for sessions (0.9.8, ui/tabs.js)
+// The board is the first tab; a session opens as the one preview tab (italic)
+// that the next click replaces, and stays open once you send a Live message,
+// type there, choose Keep open or double-click its tab (⌘/Ctrl-click or a
+// middle-click opens it permanent straight away). Kept per device in
+// localStorage. By width: under 700px the Open row on the board and ‹ N of M ›
+// (or a swipe) on a session page; from 700px the strip. A width change (fold,
+// Split View, rotation) only changes the CSS: the open set, the session and
+// where you were on the page stay.
+const tabsUi = { m: parseStored(localStorage.getItem(TABS_KEY)), active: null, route: null, permanent: null, html: { strip: '', row: '', pager: '' }, anchor: null, logs: new WeakMap(), quietUntil: 0, fetchT: 0, fetchedAt: 0, scrolls: {} }
+window.leftoffTabs = { model: () => JSON.parse(serialize(tabsUi.m)) } // read by test:tabs-ui
+function setTabs(m) {
+  if (m === tabsUi.m) return
+  tabsUi.m = m
+  try { localStorage.setItem(TABS_KEY, serialize(m)) } catch {}
+}
+const tabSession = (id) => state.sessions.find((s) => s.id === id)
+const tabViews = () => tabsUi.m.tabs.map((t) => tabView(t, tabSession(t.id), { title: sessionTitle, working: (s) => liveWorking(s) }))
+function tabsOnRoute(r) {
+  const id = r.name === 's' && r.arg ? String(r.arg) : null
+  if (tabsUi.active && tabsUi.active !== id) tabsUi.scrolls[tabsUi.active] = window.scrollY || 0
+  if (id) {
+    const permanent = tabsUi.permanent === id
+    setTabs(openTab(tabsUi.m, id, { permanent, hash: keepHash(location.hash), title: (tabSession(id) && sessionTitle(tabSession(id))) || '' }))
+  }
+  tabsUi.permanent = null
+  const changed = tabsUi.active !== id || tabsUi.route !== r.name
+  tabsUi.active = id; tabsUi.route = r.name
+  document.body.dataset.route = r.name
+  paintTabs()
+  if (changed) scrollActiveTab()
+}
+function tabsAfterRender() {
+  let m = tabsUi.m
+  for (const t of m.tabs) { const s = tabSession(t.id); if (s) m = remember(m, t.id, { title: sessionTitle(s) }) }
+  setTabs(m)
+  paintTabs()
+  const back = tabsUi.active && tabsUi.restoreScroll === tabsUi.active ? tabsUi.scrolls[tabsUi.active] : null
+  tabsUi.restoreScroll = null
+  if (back != null) window.scrollTo(0, back)
+  noteAnchor()
+  // the other open tabs' pulse and dot: read the sessions again now and then while you're off the board
+  if (tabsUi.route !== 'board' && tabsUi.m.tabs.some((t) => t.id !== tabsUi.active) && Date.now() - tabsUi.fetchedAt > 15000) refreshTabSessions()
+}
+async function refreshTabSessions() {
+  tabsUi.fetchedAt = Date.now()
+  try {
+    const { sessions = [], parked = [] } = await api('GET', '/v1/sessions?limit=200')
+    const fresh = new Map(sessions.concat(parked).map((s) => [s.id, s]))
+    state.sessions = state.sessions.map((s) => (s.id !== tabsUi.active && fresh.has(s.id) ? fresh.get(s.id) : s)).concat([...fresh.values()].filter((s) => !state.sessions.some((x) => x.id === s.id)))
+    paintTabs()
+  } catch {}
+}
+function paintTabs() {
+  const views = tabViews()
+  const strip = document.getElementById('tabStrip'), row = document.getElementById('openRow'), pager = document.getElementById('tabPager')
+  if (!strip) return
+  const sh = stripHtml(views, tabsUi.active, tabsUi.route === 'board', esc)
+  if (sh !== tabsUi.html.strip) {
+    const sc = strip.querySelector('.tab-scroll'), left = sc ? sc.scrollLeft : 0
+    const had = strip.contains(document.activeElement) ? (document.activeElement.dataset.tab || document.activeElement.dataset.tabClose || document.activeElement.dataset.tabKeep || document.activeElement.id) : null
+    strip.innerHTML = sh; tabsUi.html.strip = sh
+    const nsc = strip.querySelector('.tab-scroll'); if (nsc) nsc.scrollLeft = left
+    if (had) { const el = strip.querySelector('[data-tab="' + CSS.escape(had) + '"], [data-tab-close="' + CSS.escape(had) + '"], [data-tab-keep="' + CSS.escape(had) + '"], #' + CSS.escape(had)); if (el) el.focus({ preventScroll: true }) }
+  }
+  strip.hidden = false
+  const rh = openRowHtml(views, esc)
+  if (rh !== tabsUi.html.row) { const c = row.querySelector('.openrow-chips'), l = c ? c.scrollLeft : 0; row.innerHTML = rh; tabsUi.html.row = rh; const nc = row.querySelector('.openrow-chips'); if (nc) nc.scrollLeft = l }
+  row.hidden = !rh
+  const ph = tabsUi.active ? pagerHtml(tabsUi.m, tabsUi.active, views, esc) : ''
+  if (ph !== tabsUi.html.pager) { pager.innerHTML = ph; tabsUi.html.pager = ph }
+  pager.hidden = !ph
+}
+function scrollActiveTab() {
+  const el = document.querySelector('#tabStrip .tab-cell.on'), sc = document.querySelector('#tabStrip .tab-scroll')
+  if (!el || !sc) return
+  const r = el.getBoundingClientRect(), b = sc.getBoundingClientRect()
+  if (r.left < b.left) sc.scrollLeft -= b.left - r.left + 8
+  else if (r.right > b.right) sc.scrollLeft += r.right - b.right + 8
+}
+function keepTab(id) { setTabs(promote(tabsUi.m, id)); paintTabs() }
+function closeTabNow(id) {
+  const { model, next } = closeTab(tabsUi.m, id, tabsUi.active)
+  setTabs(model)
+  delete tabsUi.scrolls[id]
+  if (tabsUi.active === String(id)) {
+    const t = next && model.tabs.find((x) => x.id === next)
+    if (t) tabsUi.restoreScroll = t.id
+    location.hash = t ? tabView(t).href : '#/'
+  } else paintTabs()
+}
+function goTab(href) {
+  const id = sessionOfHash(href)
+  if (id) tabsUi.restoreScroll = id
+  if (location.hash === href) render(); else location.hash = href
+}
+// ⌘/Ctrl-click or a middle-click on any session link: open it as a permanent tab (here, not a new browser tab)
+function sessionLinkId(a) { return a && a.getAttribute && sessionOfHash(a.getAttribute('href') || '') }
+document.addEventListener('click', (e) => {
+  const a = e.target.closest && e.target.closest('a[href^="#/s/"]')
+  if (!a || !(e.metaKey || e.ctrlKey) || e.button !== 0) return
+  const id = sessionLinkId(a); if (!id) return
+  e.preventDefault(); e.stopPropagation()
+  if (indexOf(tabsUi.m, id) >= 0) setTabs(promote(tabsUi.m, id)); else tabsUi.permanent = id
+  if (location.hash === a.getAttribute('href')) render(); else location.hash = a.getAttribute('href')
+}, true)
+document.addEventListener('mousedown', (e) => { if (e.button === 1 && e.target.closest && e.target.closest('a[href^="#/s/"], #tabStrip .tab-cell')) e.preventDefault() }) // no autoscroll
+document.addEventListener('auxclick', (e) => {
+  if (e.button !== 1 || !e.target.closest) return
+  const cell = e.target.closest('#tabStrip .tab-cell')
+  if (cell) { e.preventDefault(); closeTabNow(cell.dataset.tabId); return } // middle-click a tab: close it
+  const a = e.target.closest('a[href^="#/s/"]')
+  const id = sessionLinkId(a); if (!id) return
+  e.preventDefault()
+  if (indexOf(tabsUi.m, id) >= 0) { setTabs(promote(tabsUi.m, id)); paintTabs() }
+  else { setTabs(openTab(tabsUi.m, id, { permanent: true })); paintTabs() } // opened in the background, the way a middle-click does
+})
+document.addEventListener('click', (e) => {
+  if (!e.target.closest) return
+  const close = e.target.closest('[data-tab-close]')
+  if (close) { e.preventDefault(); return closeTabNow(close.dataset.tabClose) }
+  const keep = e.target.closest('[data-tab-keep]')
+  if (keep) { e.preventDefault(); return keepTab(keep.dataset.tabKeep) }
+  const go = e.target.closest('[data-tab-go]')
+  if (go) { e.preventDefault(); return goTab(go.dataset.tabGo) }
+  const all = e.target.closest('#tabAll')
+  if (all) { e.preventDefault(); return openActionMenu(all, allTabsItems(tabViews(), tabsUi.active), { title: 'Open sessions' }) }
+  const t = e.target.closest('#tabStrip a[data-tab], #openRow a[data-tab], #tabPager a[data-tab]')
+  if (t && !e.metaKey && !e.ctrlKey && t.dataset.tab !== 'board') { e.preventDefault(); goTab(t.getAttribute('href')) }
+})
+document.addEventListener('dblclick', (e) => { const t = e.target.closest && e.target.closest('#tabStrip .tab-cell'); if (t) { e.preventDefault(); keepTab(t.dataset.tabId) } })
+// Working in a session keeps its tab: a Live message, typing there, answering Claude there
+const promoteActive = () => { if (tabsUi.active && tabsUi.route === 's') { const m = promote(tabsUi.m, tabsUi.active); if (m !== tabsUi.m) { setTabs(m); paintTabs() } } }
+for (const ev of ['input', 'change', 'submit']) document.addEventListener(ev, (e) => { if (e.target && $app.contains(e.target) && e.target.type !== 'search') promoteActive() }, true)
+document.addEventListener('click', (e) => { if (e.target.closest && $app.contains(e.target) && e.target.closest('[data-action="live-send"], .live-box [data-action], .need [data-choice], [data-action="ask-answer"], [data-action="rename"]')) promoteActive() }, true)
+// Drag a tab to reorder
+{
+  let dragId = null
+  document.addEventListener('dragstart', (e) => { const c = e.target.closest && e.target.closest('#tabStrip .tab-cell'); if (!c) return; dragId = c.dataset.tabId; c.classList.add('dragging'); try { e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', dragId) } catch {} })
+  document.addEventListener('dragover', (e) => { if (!dragId) return; const c = e.target.closest && e.target.closest('#tabStrip .tab-cell'); if (!c) return; e.preventDefault(); document.querySelectorAll('#tabStrip .drop-before').forEach((x) => x.classList.remove('drop-before')); c.classList.add('drop-before') })
+  document.addEventListener('drop', (e) => { if (!dragId) return; const c = e.target.closest && e.target.closest('#tabStrip .tab-cell'); if (c) { e.preventDefault(); const to = indexOf(tabsUi.m, c.dataset.tabId); const from = indexOf(tabsUi.m, dragId); setTabs(moveTab(tabsUi.m, dragId, from < to ? to - 1 : to)); paintTabs() } })
+  document.addEventListener('dragend', () => { dragId = null; document.querySelectorAll('#tabStrip .dragging, #tabStrip .drop-before').forEach((x) => x.classList.remove('dragging', 'drop-before')) })
+}
+// Phones: swipe left / right on a session page for the next / previous open session
+{
+  let sw = null
+  const narrowQ = window.matchMedia('(max-width: 699.98px)')
+  const scrollsSideways = (el) => { for (let n = el; n && n !== document.body; n = n.parentElement) { if (n.scrollWidth > n.clientWidth + 2 && /(auto|scroll)/.test(getComputedStyle(n).overflowX)) return true } return false }
+  document.addEventListener('touchstart', (e) => {
+    sw = null
+    if (!narrowQ.matches || tabsUi.route !== 's' || e.touches.length !== 1) return
+    const t = e.target
+    if (t.closest('input, textarea, select, [contenteditable], .lo-menu, .cmdk, .doc-viewer, .tabs, .moremenu') || scrollsSideways(t)) return
+    sw = { x: e.touches[0].clientX, y: e.touches[0].clientY, at: Date.now() }
+  }, { passive: true })
+  document.addEventListener('touchend', (e) => {
+    if (!sw || !e.changedTouches.length) return
+    const p = e.changedTouches[0]
+    const dir = swipeDir(p.clientX - sw.x, p.clientY - sw.y, Date.now() - sw.at)
+    sw = null
+    if (!dir || (window.getSelection && String(window.getSelection()))) return
+    const n = neighbours(tabsUi.m, tabsUi.active)
+    const to = dir === 'next' ? n.next : n.prev
+    if (!to) return
+    const t = tabsUi.m.tabs.find((x) => x.id === to)
+    document.body.classList.remove('swipe-next', 'swipe-prev'); void document.body.offsetWidth
+    document.body.classList.add('swipe-' + dir); setTimeout(() => document.body.classList.remove('swipe-' + dir), 260)
+    goTab(tabView(t).href)
+  }, { passive: true })
+}
+// A width change keeps your place: the element at the top of the page stays at
+// the top, and a Live chat that was at its newest stays there.
+function anchorY() {
+  let y = 0
+  for (const el of [document.querySelector('.top'), document.getElementById('tabStrip'), document.getElementById('tabPager')]) {
+    if (!el) continue
+    const cs = getComputedStyle(el); if (cs.display === 'none' || !/(fixed|sticky)/.test(cs.position)) continue
+    const r = el.getBoundingClientRect(); if (r.top <= 1 && r.bottom < innerHeight / 2) y = Math.max(y, r.bottom)
+  }
+  return y
+}
+function noteAnchor() {
+  if (Date.now() < tabsUi.quietUntil) return
+  const y = anchorY() + 6, m = $app.getBoundingClientRect()
+  if (m.bottom < y) { tabsUi.anchor = null; return }
+  let el = document.elementFromPoint(Math.max(m.left + 24, Math.min(m.left + m.width / 2, innerWidth - 24)), y)
+  if (!el || !$app.contains(el) || el === $app) { const kids = [...$app.querySelectorAll('h1, h2, h3, p, li, .card, .fact, .lv-msg, section, div')]; el = kids.find((k) => { const r = k.getBoundingClientRect(); return r.bottom > y && r.height > 0 }) || null }
+  tabsUi.anchor = el ? { el, top: el.getBoundingClientRect().top, scrollY: window.scrollY } : null
+}
+function keepPlace() {
+  const a = tabsUi.anchor
+  tabsUi.quietUntil = Date.now() + 250
+  if (a && a.el.isConnected && a.scrollY > 0) window.scrollBy(0, a.el.getBoundingClientRect().top - a.top)
+  document.querySelectorAll('.live-log').forEach((log) => { const st = tabsUi.logs.get(log); if (st && st.bottom) log.scrollTop = log.scrollHeight })
+}
+{
+  let raf = 0
+  window.addEventListener('scroll', () => { if (raf) return; raf = requestAnimationFrame(() => { raf = 0; noteAnchor() }) }, { passive: true })
+  document.addEventListener('scroll', (e) => { const log = e.target; if (log && log.classList && log.classList.contains('live-log') && Date.now() >= tabsUi.quietUntil) tabsUi.logs.set(log, { bottom: log.scrollHeight - log.scrollTop - log.clientHeight < 24 }) }, true)
+  let lay = layoutFor(innerWidth)
+  window.addEventListener('resize', () => {
+    keepPlace()
+    const now = layoutFor(innerWidth)
+    if (now !== lay) { lay = now; document.body.dataset.layout = now; scrollActiveTab() }
+  })
+  document.body.dataset.layout = lay
+}
+
 // Pull to refresh (phones, 0.9.8): pull down from the top of a page and let go
 // past the line; the page reads its data again, the same as a live update (no
 // full reload unless that fails). Never from a field, the Live box or a menu.
@@ -3672,7 +3883,7 @@ function closeQuickLook(focusTab = false) {
   ptr.className = 'ptr'; ptr.id = 'ptr'; ptr.setAttribute('aria-hidden', 'true'); ptr.hidden = true
   ptr.innerHTML = '<span class="ptr-ring"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg></span>'
   document.body.appendChild(ptr)
-  const coarse = window.matchMedia('(pointer: coarse)'), narrow = window.matchMedia('(max-width: 819.98px)')
+  const coarse = window.matchMedia('(pointer: coarse)'), narrow = window.matchMedia('(max-width: 699.98px)')
   const overlayOpen = () => qlUi.open || moreOpen() || statusOpen() || !!document.querySelector('.cmdk:not([hidden]), .lo-menu, .doc-viewer:not([hidden]), .emoji-sheet-wrap')
   let pull = null, refreshing = false
   const paint = (step) => {

package/ui/index.html

@@ -57,6 +57,9 @@
       <div class="cmdk-foot"><span><kbd>↑</kbd><kbd>↓</kbd> to move</span><span><kbd>↵</kbd> to open</span><span><kbd>esc</kbd> to close</span></div>
     </div>
   </div>
+  <nav class="tabstrip" id="tabStrip" aria-label="Open sessions" hidden></nav>
+  <div class="openrow" id="openRow" role="navigation" aria-label="Open sessions" hidden></div>
+  <div class="tabpager" id="tabPager" role="navigation" aria-label="Open sessions" hidden></div>
   <main id="app"></main>
   <div class="toast" id="toast" role="status" aria-live="polite"></div>
   <script src="relay-client.js" type="module"></script>

package/ui/tabs.js

@@ -0,0 +1,216 @@
+// Tabs for sessions (0.9.8). The board is always the first tab and can't be
+// closed. Clicking a session opens it in ONE preview tab (its title in italics)
+// that the next click replaces, VS Code style; it stays open (permanent, with a
+// close ×) once you send a Live message in it, type there, choose Keep open or
+// double-click the tab, and a middle-click or ⌘/Ctrl-click opens a session
+// straight as permanent. The open set and its order are kept per device
+// (localStorage) and survive a reload; a deep link opens as the preview.
+//
+// The layout follows the window's WIDTH, never the device: under 700px no strip
+// (an Open row on the board, swipe or ‹ › between open sessions on a session
+// page); 700–1099px the strip with the rail as icons; from 1100px the full rail
+// and the strip. Pure functions over a plain model; app.js wires them.
+
+export const TABS_KEY = 'cp.tabs'
+export const MAX_TABS = 40
+export const NARROW_MAX = 699.98 // < 700: phones, a foldable closed
+export const WIDE_MIN = 1100 // ≥ 1100: iPad landscape, a Mac
+
+// 'narrow' | 'medium' | 'wide' for a CSS width
+export function layoutFor(width) {
+  const w = Number(width) || 0
+  return w < 700 ? 'narrow' : w < WIDE_MIN ? 'medium' : 'wide'
+}
+
+const clean = (e) => ({ id: String(e.id), title: typeof e.title === 'string' ? e.title.slice(0, 200) : '', preview: !!e.preview, ...(typeof e.hash === 'string' && e.hash.startsWith('#/s/') ? { hash: e.hash } : {}) })
+
+// Any stored or hand-made value → a valid model: string ids, no repeats, at most
+// one preview (the last one wins), at most MAX_TABS.
+export function normalize(raw) {
+  const list = raw && Array.isArray(raw.tabs) ? raw.tabs : []
+  const seen = new Set(), tabs = []
+  for (const e of list) {
+    if (!e || e.id == null || e.id === '' || seen.has(String(e.id))) continue
+    seen.add(String(e.id)); tabs.push(clean(e))
+  }
+  let pi = -1
+  tabs.forEach((t, i) => { if (t.preview) { if (pi >= 0) tabs[pi].preview = false; pi = i } })
+  return { tabs: tabs.slice(-MAX_TABS) }
+}
+export function emptyTabs() { return { tabs: [] } }
+export function parseStored(text) {
+  try { return normalize(JSON.parse(text || 'null')) } catch { return emptyTabs() }
+}
+export function serialize(m) { return JSON.stringify({ v: 1, tabs: normalize(m).tabs }) }
+
+export const indexOf = (m, id) => m.tabs.findIndex((t) => t.id === String(id))
+export const isOpen = (m, id) => indexOf(m, id) >= 0
+export const previewOf = (m) => m.tabs.find((t) => t.preview) || null
+
+// Open a session. Already open: it just gets focus (permanent promotes a preview).
+// Not open: as the preview, replacing the old preview in place; or, permanent,
+// appended at the end.
+export function openTab(m, id, { permanent = false, title, hash } = {}) {
+  const tabs = m.tabs.map((t) => ({ ...t }))
+  id = String(id)
+  const i = tabs.findIndex((t) => t.id === id)
+  const extra = { ...(title ? { title: String(title).slice(0, 200) } : {}), ...(hash && hash.startsWith('#/s/') ? { hash } : {}) }
+  if (i >= 0) {
+    Object.assign(tabs[i], extra)
+    if (permanent) tabs[i].preview = false
+    return { tabs }
+  }
+  const e = { id, title: '', preview: !permanent, ...extra }
+  const pi = tabs.findIndex((t) => t.preview)
+  if (!permanent && pi >= 0) tabs[pi] = e
+  else tabs.push(e)
+  // too many: the oldest permanent tab that isn't this one goes
+  while (tabs.length > MAX_TABS) { const k = tabs.findIndex((t) => t.id !== id); tabs.splice(k, 1) }
+  return { tabs }
+}
+
+// The preview becomes permanent (a Live message, typing there, Keep open, a double-click).
+export function promote(m, id) {
+  const i = indexOf(m, id)
+  if (i < 0 || !m.tabs[i].preview) return m
+  return { tabs: m.tabs.map((t, k) => (k === i ? { ...t, preview: false } : t)) }
+}
+
+// Keep a tab's title (shown while its session isn't loaded) and where in it you were.
+export function remember(m, id, { title, hash } = {}) {
+  const i = indexOf(m, id)
+  if (i < 0) return m
+  const t = m.tabs[i]
+  const nt = { ...t, ...(title && title !== t.title ? { title: String(title).slice(0, 200) } : {}), ...(hash && hash.startsWith('#/s/') && hash !== t.hash ? { hash } : {}) }
+  if (nt.title === t.title && nt.hash === t.hash) return m
+  return { tabs: m.tabs.map((x, k) => (k === i ? nt : x)) }
+}
+
+// Close a tab. When it was the one you're on, `next` is where to go: the
+// neighbour on the right, else the one on the left, else the board (null).
+export function closeTab(m, id, activeId = null) {
+  const i = indexOf(m, id)
+  if (i < 0) return { model: m, next: activeId == null ? null : String(activeId) }
+  const tabs = m.tabs.filter((_, k) => k !== i)
+  let next = activeId == null ? null : String(activeId)
+  if (String(id) === next) next = tabs.length ? (tabs[i] || tabs[i - 1]).id : null
+  return { model: { tabs }, next }
+}
+
+// Move a tab to another position (drag on the strip).
+export function moveTab(m, id, to) {
+  const i = indexOf(m, id)
+  if (i < 0) return m
+  const tabs = m.tabs.slice()
+  const [t] = tabs.splice(i, 1)
+  tabs.splice(Math.max(0, Math.min(tabs.length, to)), 0, t)
+  return { tabs }
+}
+
+// Where a session sits among the open ones (the phone's "2 of 4", swipe and ‹ ›).
+export function neighbours(m, id) {
+  const i = indexOf(m, id)
+  if (i < 0) return { index: 0, count: m.tabs.length, prev: null, next: null }
+  return { index: i + 1, count: m.tabs.length, prev: i > 0 ? m.tabs[i - 1].id : null, next: i < m.tabs.length - 1 ? m.tabs[i + 1].id : null }
+}
+
+// The session id a hash opens (#/s/<id>, #/s/<id>/live, #/s/<id>?hit=…), or null.
+export function sessionOfHash(hash) {
+  const h = String(hash || '').replace(/^#\/?/, '').split('?')[0]
+  const p = h.split('/').filter(Boolean)
+  if (p[0] !== 's' || !p[1]) return null
+  try { return decodeURIComponent(p[1]) } catch { return p[1] }
+}
+// Where a tab goes back to: its own page, keeping /live (not a search hit).
+export function tabHref(t) {
+  const base = '#/s/' + encodeURIComponent(t.id)
+  if (t.hash && sessionOfHash(t.hash) === t.id && t.hash.split('?')[0].endsWith('/live')) return base + '/live'
+  return base
+}
+export function keepHash(hash) { return String(hash || '').split('?')[0] }
+
+// What a tab shows for its session: the title, the Live pulse while Claude is
+// working (the Live chip's own signal), a dot when it needs you (the same as
+// Needs you). `session` may be missing (not loaded yet): the kept title, no marks.
+export function tabView(t, session, { title, working } = {}) {
+  const s = session || null
+  return {
+    id: t.id, preview: !!t.preview, href: tabHref(t),
+    title: (s && title ? title(s) : '') || t.title || 'Session',
+    working: !!(s && working && working(s)),
+    needs: !!(s && s.needsYou && !s.archived),
+  }
+}
+
+const X = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>'
+const BOARD_IC = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>'
+const DOTS = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>'
+const PREV = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m15 18-6-6 6-6"/></svg>'
+const NEXT = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m9 18 6-6-6-6"/></svg>'
+
+// The marks after a title: a pulsing Live dot, or the red needs-you dot (both when both).
+function marks(v, esc) {
+  return (v.working ? '<span class="tab-live" title="Claude is working"><span class="lo-vh">, Claude is working</span></span>' : '') +
+    (v.needs ? '<span class="tab-need" title="Needs you"><span class="lo-vh">, needs you</span></span>' : '')
+}
+function label(v) { return (v.preview ? 'Preview: ' : '') + v.title + (v.working ? ' · Claude is working' : '') + (v.needs ? ' · needs you' : '') }
+
+// The strip (700px and up): Board, then the open sessions, then ⋯ (all of them).
+// The current tab is aria-current="true" (the current item of this set); the rail keeps "page".
+export function stripHtml(views, activeId, onBoard, esc) {
+  const board = '<a class="tab tab-board' + (onBoard ? ' on' : '') + '" href="#/" data-tab="board"' + (onBoard ? ' aria-current="true"' : '') + ' title="Board">' + BOARD_IC + '<span class="tab-t">Board</span></a>'
+  const tabs = views.map((v) => {
+    const on = v.id === activeId
+    return '<div class="tab-cell' + (on ? ' on' : '') + (v.preview ? ' preview' : '') + '" data-tab-id="' + esc(v.id) + '">' +
+      '<a class="tab tab-s' + (on ? ' on' : '') + (v.preview ? ' preview' : '') + '" href="' + esc(v.href) + '" data-tab="' + esc(v.id) + '"' + (on ? ' aria-current="true"' : '') + ' title="' + esc(v.title + (v.preview ? ' · preview: double-click to keep it open' : '')) + '" aria-label="' + esc(label(v)) + '" draggable="true">' +
+      '<span class="tab-t">' + esc(v.title) + '</span>' + marks(v, esc) + '</a>' +
+      (v.preview
+        ? '<button type="button" class="tab-x tab-keep" data-tab-keep="' + esc(v.id) + '" title="Keep open" aria-label="' + esc('Keep ' + v.title + ' open') + '"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg></button>'
+        : '<button type="button" class="tab-x" data-tab-close="' + esc(v.id) + '" title="Close tab" aria-label="' + esc('Close ' + v.title) + '">' + X + '</button>') +
+      '</div>'
+  }).join('')
+  return '<div class="tabstrip-in">' + board + '<div class="tab-scroll" role="list">' + tabs + '</div></div>' +
+    '<button type="button" class="tab-all" id="tabAll" title="All open sessions" aria-label="All open sessions (' + views.length + ')" aria-haspopup="menu"' + (views.length ? '' : ' hidden') + '>' + DOTS + '</button>'
+}
+
+// The menu behind ⋯ (picker.js's action menu): every open session, in order.
+export function allTabsItems(views, activeId) {
+  return [{ label: 'Board', attrs: { 'data-tab-go': '#/' }, on: activeId == null }].concat(views.map((v) => ({
+    label: v.title + (v.preview ? ' (preview)' : ''), sub: [v.working ? 'Claude is working' : '', v.needs ? 'Needs you' : ''].filter(Boolean).join(' · ') || undefined,
+    on: v.id === activeId, attrs: { 'data-tab-go': v.href },
+  })))
+}
+
+// The phone's Open row on the board: the same order, the same marks, the preview in italics.
+export function openRowHtml(views, esc) {
+  if (!views.length) return ''
+  return '<div class="openrow-h"><span>Open</span><span class="faint">' + views.length + '</span></div><div class="openrow-chips">' + views.map((v) =>
+    '<span class="ochip-cell' + (v.preview ? ' preview' : '') + '"><a class="ochip' + (v.preview ? ' preview' : '') + '" href="' + esc(v.href) + '" data-tab="' + esc(v.id) + '" aria-label="' + esc(label(v)) + '"><span class="tab-t">' + esc(v.title) + '</span>' + marks(v, esc) + '</a>' +
+    (v.preview ? '' : '<button type="button" class="ochip-x" data-tab-close="' + esc(v.id) + '" aria-label="' + esc('Close ' + v.title) + '" title="Close">' + X + '</button>') + '</span>').join('') + '</div>'
+}
+
+// A session page on a phone: "2 of 4" with ‹ › (44px) for people who don't swipe,
+// and Keep open on a preview.
+export function pagerHtml(m, id, views, esc) {
+  const n = neighbours(m, id)
+  if (!n.index || n.count < 2) {
+    const v = views.find((x) => x.id === String(id))
+    return v && v.preview ? '<div class="pager-in"><span class="pager-n faint">Preview</span><button type="button" class="btn pager-keep" data-tab-keep="' + esc(v.id) + '">Keep open</button></div>' : ''
+  }
+  const byId = (x) => views.find((v) => v.id === x)
+  const v = byId(String(id))
+  const btn = (to, dir) => {
+    const t = to ? byId(to) : null
+    return t ? '<a class="pager-b pager-' + dir + '" href="' + esc(t.href) + '" data-tab="' + esc(t.id) + '" data-pager="' + dir + '" aria-label="' + esc((dir === 'prev' ? 'Previous: ' : 'Next: ') + t.title) + '" title="' + esc(t.title) + '">' + (dir === 'prev' ? PREV : NEXT) + '</a>'
+      : '<span class="pager-b pager-' + dir + ' off" aria-hidden="true">' + (dir === 'prev' ? PREV : NEXT) + '</span>'
+  }
+  return '<div class="pager-in">' + btn(n.prev, 'prev') + '<span class="pager-n" aria-live="polite">' + n.index + ' of ' + n.count + '<span class="lo-vh"> open sessions</span></span>' +
+    (v && v.preview ? '<button type="button" class="btn pager-keep" data-tab-keep="' + esc(v.id) + '">Keep open</button>' : '') + btn(n.next, 'next') + '</div>'
+}
+
+// A horizontal swipe on a phone's session page: which way, or null. Mostly
+// sideways (twice as far across as down), at least 60px, quick (under 700ms).
+export function swipeDir(dx, dy, ms) {
+  if (Math.abs(dx) < 60 || Math.abs(dx) < 2 * Math.abs(dy) || ms > 700) return null
+  return dx < 0 ? 'next' : 'prev'
+}