Merge pull request #29 from legop3/REFACTOR-participation-mode-ptz

Refactor participation mode ptz

server/public/assets/Preview-CKTJqKe-.js

@@ -0,0 +1,2 @@
+import{r as g,R as a}from"./index-5EWtcenj.js";const d="64px",u={},k=({src:s,light:t,oEmbedUrl:o,onClickPreview:n,playIcon:b,previewTabIndex:_,previewAriaLabel:p})=>{const[f,r]=g.useState(null);g.useEffect(()=>{!s||!t||!o||x({src:s,light:t,oEmbedUrl:o})},[s,t,o]);const x=async({src:e,light:i,oEmbedUrl:E})=>{if(a.isValidElement(i))return;if(typeof i=="string"){r(i);return}if(u[e]){r(u[e]);return}r(null);const m=await(await fetch(E.replace("{url}",e))).json();if(m.thumbnail_url){const h=m.thumbnail_url.replace("height=100","height=480").replace("-d_295x166","-d_640");r(h),u[e]=h}},I=e=>{(e.key==="Enter"||e.key===" ")&&n?.(e)},v=e=>{n?.(e)},l=a.isValidElement(t),y={display:"flex",alignItems:"center",justifyContent:"center"},c={preview:{width:"100%",height:"100%",backgroundImage:f&&!l?`url(${f})`:void 0,backgroundSize:"cover",backgroundPosition:"center",cursor:"pointer",...y},shadow:{background:"radial-gradient(rgb(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 60%)",borderRadius:d,width:d,height:d,position:l?"absolute":void 0,...y},playIcon:{borderStyle:"solid",borderWidth:"16px 0 16px 26px",borderColor:"transparent transparent transparent white",marginLeft:"7px"}},w=a.createElement("div",{style:c.shadow,className:"react-player__shadow"},a.createElement("div",{style:c.playIcon,className:"react-player__play-icon"}));return a.createElement("div",{style:c.preview,className:"react-player__preview",tabIndex:_,onClick:v,onKeyDown:I,...p?{"aria-label":p}:{}},l?t:null,b||w)};var C=k;export{C as default};
+//# sourceMappingURL=Preview-CKTJqKe-.js.map

server/public/assets/SetupApp-DN7XBkOe.js

@@ -0,0 +1,2 @@
+import{e as F,r as s,j as e,S as P,C as c,L as q}from"./index-5EWtcenj.js";import{o as $,p as D,q as I}from"./api-B8GGCEeo.js";function R(){const l=F(),[a,m]=s.useState(null),[n,b]=s.useState(""),[d,C]=s.useState(""),[p,N]=s.useState(""),[r,S]=s.useState(""),[f,v]=s.useState(""),[o,w]=s.useState(null),[x,h]=s.useState(!1),[g,i]=s.useState("");s.useEffect(()=>{$(l).then(t=>m(t.required)).catch(t=>i(t.message))},[l]);async function j(t){h(!0),i("");try{await t(),m(!1),i("Setup completed. You can now open the administration application and log in.")}catch(u){const E=Array.isArray(u.validationErrors)?` ${u.validationErrors.map(y=>`${y.path}: ${y.message}`).join("; ")}`:"";i(`${u.message}${E}`)}finally{h(!1)}}function k(t){if(t.preventDefault(),r!==f){i("Passwords do not match.");return}j(()=>D(l,{setupCode:n,username:d,discordId:p,password:r}))}function A(t){t.preventDefault(),o&&j(async()=>I(l,{setupCode:n,fileName:o.name,yaml:await o.text()}))}return e.jsxs("div",{className:"min-h-screen bg-neutral-950 p-1 text-slate-100",children:[e.jsx(P,{}),e.jsxs("main",{className:"mx-auto flex min-h-screen w-full max-w-3xl flex-col justify-center gap-0.5",children:[e.jsxs(c,{title:"MultiRover setup",meta:a===null?"checking":a?"required":"complete",bodyClassName:"space-y-0.5 p-1 text-sm",children:[a?e.jsx("p",{children:"Enter the one-time code from setup-code.txt in the server data folder, then create the first lockdown administrator or import an existing configuration."}):null,a===!1?e.jsx(q,{className:"button-dark inline-block",to:"/admin",children:"Open administration"}):null,g?e.jsx("p",{className:"surface p-1 text-sm text-slate-200",children:g}):null]}),a?e.jsxs(e.Fragment,{children:[e.jsxs(c,{title:"Setup authorization",bodyClassName:"p-1",children:[e.jsx("label",{className:"block text-xs font-semibold text-slate-200",children:"One-time setup code"}),e.jsx("input",{className:"field-input mt-0.5 w-full font-mono",value:n,onChange:t=>b(t.target.value)})]}),e.jsx(c,{title:"Create first administrator",bodyClassName:"p-1",children:e.jsxs("form",{className:"grid gap-0.5 md:grid-cols-2",onSubmit:k,children:[e.jsx("input",{className:"field-input",placeholder:"Username",value:d,onChange:t=>C(t.target.value)}),e.jsx("input",{className:"field-input",placeholder:"Discord id (optional)",value:p,onChange:t=>N(t.target.value)}),e.jsx("input",{className:"field-input",type:"password",placeholder:"Password",value:r,onChange:t=>S(t.target.value)}),e.jsx("input",{className:"field-input",type:"password",placeholder:"Confirm password",value:f,onChange:t=>v(t.target.value)}),e.jsx("button",{className:"button-dark md:col-span-2",type:"submit",disabled:x||!n||!d||!r,children:"Create lockdown administrator"})]})}),e.jsxs(c,{title:"Import configuration file",bodyClassName:"space-y-0.5 p-1 text-sm",children:[e.jsx("p",{className:"text-xs text-slate-400",children:"Choose an existing YAML configuration explicitly. The server validates and imports it once, and its secrets are never displayed back in the browser."}),e.jsxs("form",{className:"flex flex-col gap-0.5 md:flex-row",onSubmit:A,children:[e.jsx("input",{className:"field-input flex-1",type:"file",accept:".yaml,.yml,text/yaml",onChange:t=>w(t.target.files?.[0]||null)}),e.jsx("button",{className:"button-dark",type:"submit",disabled:x||!n||!o,children:"Import selected YAML"})]})]})]}):null]})]})}export{R as default};
+//# sourceMappingURL=SetupApp-DN7XBkOe.js.map

server/public/assets/react-DxdYv-AY.js

@@ -0,0 +1,35 @@
+import{R as W}from"./index-5EWtcenj.js";const $=["abort","canplay","canplaythrough","durationchange","emptied","encrypted","ended","error","loadeddata","loadedmetadata","loadstart","pause","play","playing","progress","ratechange","seeked","seeking","stalled","suspend","timeupdate","volumechange","waiting","waitingforkey","resize","enterpictureinpicture","leavepictureinpicture","webkitbeginfullscreen","webkitendfullscreen","webkitpresentationmodechanged"],A=globalThis.document?.createElement("template");A&&(A.innerHTML=`
+    <style>
+      :host {
+        display: inline-block;
+        line-height: 0;
+      }
+
+      video,
+      audio {
+        max-width: 100%;
+        max-height: 100%;
+        min-width: 100%;
+        min-height: 100%;
+      }
+    </style>
+    <slot></slot>
+  `);const N=(i,{tag:t,is:s})=>{const d=globalThis.document?.createElement(t,{is:s}),f=d?S(d):[];return class g extends i{static Events=$;static template=A;static skipAttributes=[];static#t;static get observedAttributes(){return g.#l(),[...d?.constructor?.observedAttributes??[],"autopictureinpicture","disablepictureinpicture","disableremoteplayback","autoplay","controls","controlslist","crossorigin","loop","muted","playsinline","poster","preload","src"]}static#l(){if(this.#t)return;this.#t=!0;const e=new Set(this.observedAttributes);e.delete("muted");for(let o of f){if(o in this.prototype)continue;if(typeof d[o]=="function")this.prototype[o]=function(...r){this.#e();const a=()=>this.call?this.call(o,...r):this.nativeEl[o].apply(this.nativeEl,r);return this.loadComplete&&!this.isLoaded?this.loadComplete.then(a):a()};else{let r={get(){this.#e();let a=o.toLowerCase();if(e.has(a)){const p=this.getAttribute(a);return p===null?!1:p===""?!0:p}return this.get?.(o)??this.nativeEl?.[o]??this.#s[o]}};o!==o.toUpperCase()&&(r.set=async function(a){this.#e();let p=o.toLowerCase();if(e.has(p)){a===!0||a===!1||a==null?this.toggleAttribute(p,!!a):this.setAttribute(p,a);return}if(this.loadComplete&&!this.isLoaded&&await this.loadComplete,this.set){this.set(o,a);return}this.nativeEl[o]=a}),Object.defineProperty(this.prototype,o,r)}}}#o;#n;#r=!1;#i=!1;#a;#s;constructor(){super(),this.shadowRoot||(this.attachShadow({mode:"open"}),this.shadowRoot.append(this.constructor.template.content.cloneNode(!0))),this.load!==g.prototype.load&&(this.loadComplete=new O)}get loadComplete(){return this.#n}set loadComplete(e){this.#i=!1,this.#n=e,e?.then(()=>{this.#i=!0})}get isLoaded(){return this.#i}get nativeEl(){return this.#a??this.shadowRoot.querySelector(t)??this.querySelector(t)}set nativeEl(e){this.#a=e}get defaultMuted(){return this.hasAttribute("muted")}set defaultMuted(e){this.toggleAttribute("muted",!!e)}get src(){return this.getAttribute("src")}set src(e){this.setAttribute("src",`${e}`)}get preload(){return this.getAttribute("preload")??this.nativeEl?.preload}set preload(e){this.setAttribute("preload",`${e}`)}async#e(){if(this.#o)return;this.#o=!0,this.#u(),this.#c();for(let u of f)this.#d(u);const e=new Map,o=this.shadowRoot.querySelector("slot:not([name])");o?.addEventListener("slotchange",()=>{const u=new Map(e);o.assignedElements().filter(r=>["track","source"].includes(r.localName)).forEach(async r=>{u.delete(r);let a=e.get(r);a||(a=r.cloneNode(),e.set(r,a)),this.loadComplete&&!this.isLoaded&&await this.loadComplete,this.nativeEl.append?.(a)}),u.forEach(r=>r.remove())});for(let u of this.constructor.Events)this.shadowRoot.addEventListener?.(u,r=>{r.target===this.nativeEl&&this.dispatchEvent(new CustomEvent(r.type,{detail:r.detail}))},!0)}#d(e){if(Object.prototype.hasOwnProperty.call(this,e)){const o=this[e];delete this[e],this[e]=o}}#u(){const e=document.createElement(t,{is:s});e.muted=this.hasAttribute("muted");for(let{name:o,value:u}of this.attributes)e.setAttribute(o,u);this.#s={};for(let o of S(e))this.#s[o]=e[o];e.removeAttribute("src"),e.load()}async#c(){if(this.loadComplete&&!this.isLoaded&&await this.loadComplete,!this.nativeEl){const e=document.createElement(t,{is:s});e.part=t,this.shadowRoot.append(e)}this.nativeEl.muted=this.hasAttribute("muted")}attributeChangedCallback(e,o,u){this.#e(),e==="src"&&this.load!==g.prototype.load&&this.#h(),this.#p(e,o,u)}async#h(){this.#r&&(this.loadComplete=new O),this.#r=!0,await Promise.resolve(),await this.load(),this.loadComplete?.resolve(),await this.loadComplete}async#p(e,o,u){this.loadComplete&&!this.isLoaded&&await this.loadComplete,!["id","class",...this.constructor.skipAttributes].includes(e)&&(u===null?this.nativeEl.removeAttribute?.(e):this.nativeEl.setAttribute?.(e,u))}connectedCallback(){this.#e()}}};function S(i){let t=[];for(let s=Object.getPrototypeOf(i);s&&s!==HTMLElement.prototype;s=Object.getPrototypeOf(s))t.push(...Object.getOwnPropertyNames(s));return t}class O extends Promise{constructor(t=()=>{}){let s,d;super((f,c)=>{t(f,c),s=f,d=c}),this.resolve=s,this.reject=d}}const B=globalThis.document?N(HTMLElement,{tag:"video"}):class{};globalThis.document&&N(HTMLElement,{tag:"audio"});var H,R;const L=(H=globalThis.document)==null?void 0:H.createElement("template");L&&(L.innerHTML=`
+  <div class="wistia_embed"></div>
+  `);const P=(R=globalThis.document)==null?void 0:R.createElement("template");P&&(P.innerHTML=`
+  <style>
+    :host {
+      display: inline-block;
+      min-width: 300px;
+      min-height: 150px;
+      position: relative;
+    }
+    ::slotted(.wistia_embed) {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+  <slot></slot>
+  `);function D(i,t){if(Object.hasOwn(i,t)){const s=i[t];delete i[t],i[t]=s}}class q extends B{static template=P;static skipAttributes=["src"];#t=null;constructor(){super(),D(this,"config")}get config(){return this.#t}set config(t){this.#t=t}get nativeEl(){var t;return((t=this.api)==null?void 0:t.elem())??this.querySelector("video")}async load(){var t;if((t=this.querySelector(".wistia_embed"))==null||t.remove(),!this.src)return;await new Promise(o=>setTimeout(o,50));const s=/(?:wistia\.com|wi\.st)\/(?:medias|embed)\/(.*)$/i,d=this.src.match(s)[1],f={autoPlay:this.autoplay,silentAutoPlay:this.autoplay?"allow":void 0,preload:this.preload??"metadata",playsinline:this.playsInline,endVideoBehavior:this.loop?"loop":void 0,chromeless:!this.controls,playButton:this.controls,muted:this.defaultMuted,...this.#t??{}};this.append(L.content.cloneNode(!0));const c=this.querySelector(".wistia_embed");c.id||(c.id=z(d)),c.classList.add(`wistia_async_${d}`),await F("https://fast.wistia.com/assets/external/E-v1.js","Wistia"),this.api=await new Promise(o=>{globalThis._wq.push({id:c.id,onReady:o,options:f})})}async attributeChangedCallback(t,s,d){if(t==="controls"){switch(await this.loadComplete,t){case"controls":this.api.bigPlayButtonEnabled(this.controls),this.controls?this.api.releaseChromeless():this.api.requestChromeless();break}return}super.attributeChangedCallback(t,s,d)}get duration(){var t;return(t=this.api)==null?void 0:t.duration()}async play(){return await this.loadComplete,this.api.play(),new Promise(t=>this.addEventListener("playing",t))}}const T={};async function F(i,t){if(T[i])return T[i];if(self[t])return self[t];const s=new Promise((d,f)=>{const c=document.createElement("script");c.defer=!0,c.src=i,c.onload=()=>d(self[t]),c.onerror=f,document.head.append(c)});return T[i]=s,s}let U=0;function z(i){const t=++U;return`${i}${t}`}globalThis.customElements&&!globalThis.customElements.get("wistia-video")&&globalThis.customElements.define("wistia-video",q);var V=q,G=new Set(["style","children","ref","key","suppressContentEditableWarning","suppressHydrationWarning","dangerouslySetInnerHTML"]),J={className:"class",htmlFor:"for"};function I(i){return i.toLowerCase()}function j(i){if(typeof i=="boolean")return i?"":void 0;if(typeof i!="function"&&!(typeof i=="object"&&i!==null))return i}function K({react:i,tagName:t,elementClass:s,events:d,displayName:f,defaultProps:c,toAttributeName:e=I,toAttributeValue:o=j}){const u=Number.parseInt(i.version)>=19,r=i.forwardRef((a,p)=>{var M,k;const m=i.useRef(null),E=i.useRef(new Map),C={},_={},v={},w={};for(const[n,l]of Object.entries(a)){if(G.has(n)){v[n]=l;continue}const h=e(J[n]??n);if(s.prototype&&n in s.prototype&&!(n in(((M=globalThis.HTMLElement)==null?void 0:M.prototype)??{}))&&!((k=s.observedAttributes)!=null&&k.some(b=>b===h))){w[n]=l;continue}if(n.startsWith("on")){C[n]=l;continue}const y=o(l);if(h&&y!=null&&(_[h]=String(y),u||(v[h]=y)),h&&u){const b=j(l);y!==b?v[h]=y:v[h]=l}}if(typeof window<"u"){for(const n in C){const l=C[n],h=n.endsWith("Capture"),y=(d?.[n]??n.slice(2).toLowerCase()).slice(0,h?-7:void 0);i.useLayoutEffect(()=>{const b=m?.current;if(!(!b||typeof l!="function"))return b.addEventListener(y,l,h),()=>{b.removeEventListener(y,l,h)}},[m?.current,l])}i.useLayoutEffect(()=>{if(m.current===null)return;const n=new Map;for(const l in w)x(m.current,l,w[l]),E.current.delete(l),n.set(l,w[l]);for(const[l,h]of E.current)x(m.current,l,void 0);E.current=n})}if(typeof window>"u"&&s?.getTemplateHTML&&s?.shadowRootOptions){const{mode:n,delegatesFocus:l}=s.shadowRootOptions,h=i.createElement("template",{shadowrootmode:n,shadowrootdelegatesfocus:l,dangerouslySetInnerHTML:{__html:s.getTemplateHTML(_,a)},key:"ce-la-react-ssr-template-shadow-root"});v.children=[h,v.children]}return i.createElement(t,{...c,...v,ref:i.useCallback(n=>{m.current=n,typeof p=="function"?p(n):p!==null&&(p.current=n)},[p])},v.children)});return r.displayName=f??s.name,r}function x(i,t,s){var d;i[t]=s,s==null&&t in(((d=globalThis.HTMLElement)==null?void 0:d.prototype)??{})&&i.removeAttribute(t)}var X=K({react:W,tagName:"wistia-video",elementClass:V,toAttributeName(i){return i==="muted"?"":i==="defaultMuted"?"muted":I(i)}});export{X as default};
+//# sourceMappingURL=react-DxdYv-AY.js.map

server/public/assets/react-gdx3v4jU.js

@@ -0,0 +1,7 @@
+import{_ as N,R as A}from"./index-5EWtcenj.js";import{M as D,C as S}from"./mixin-BY5xW4uI.js";class P extends D(S){static shadowRootOptions={...S.shadowRootOptions};static getTemplateHTML=i=>{const{src:n,...o}=i;return S.getTemplateHTML(o)};#t;attributeChangedCallback(i,n,o){i!=="src"&&super.attributeChangedCallback(i,n,o),i==="src"&&n!=o&&this.load()}async _initThumbnails(i){const n=async(d,m)=>{const v=[],g=i.timescale||1,h=i.startNumber||1,E=i.presentationTimeOffset?i.presentationTimeOffset/g:0,_=i.segmentDuration;for(let l=0;l<d;l++){const T=C({thIndex:l,thduration:m,ttiles:d,tduration:_,startNumber:h,pto:E}),w=T+m,M=new Promise((f,y)=>{this.api.provideThumbnail(T,({url:a,width:s,height:c,x:p,y:b})=>{try{const R=new VTTCue(T,w,`${a}#xywh=${p},${b},${s},${c}`);f(R)}catch(R){y(R)}})});v.push(M)}return await Promise.all(v).catch(l=>console.error("Error processing thumbnails",l))},{totalThumbnails:o,thumbnailDuration:e}=$(i),u=await n(o,e);let r=this.nativeEl.querySelector('track[label="thumbnails"]');if(!r){r=O(),this.nativeEl.appendChild(r);const d=x(u);r.src=d,r.dispatchEvent(new Event("change"))}}async load(){if(this.#t){this.api.attachSource(this.src);return}this.#t=!0;const i=await N(()=>import("./dash.all.min-C9gxBrL1.js"),[]);this.api=i.MediaPlayer().create(),this.api.initialize(this.nativeEl,this.src,this.autoplay),this.api.on(i.MediaPlayer.events.STREAM_INITIALIZED,()=>{const n=this.api.getRepresentationsByType("video");let o=this.videoTracks.getTrackById("main");o||(o=this.addVideoTrack("main"),o.id="main",o.selected=!0),n.forEach(e=>{const u=e.bandwidth??e.bitrate??(Number.isFinite(e.bitrateInKbit)?e.bitrateInKbit*1e3:void 0),r=o.addRendition(e.id,e.width,e.height,e.mimeType??e.codec,u);r.id=e.id}),this.videoRenditions.addEventListener("change",()=>{const e=this.videoRenditions[this.videoRenditions.selectedIndex];e?.id?(this.api.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!1}}}}),this.api.setRepresentationForTypeById("video",e.id,!0)):this.api.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!0}}}})}),this.api.isDynamic()||this.api.getRepresentationsByType("image").forEach(async(u,r)=>{r>0||this._initThumbnails(u)})})}}function $(t){var i,n;const o=t.essentialProperties[0],[e,u]=o.value.split("x").map(Number),r=e*u,d=((n=(i=t.adaptation)==null?void 0:i.period)==null?void 0:n.duration)||null,m=t.segmentDuration,v=t.timescale||1,h=m/v/r;return{totalThumbnails:d!=null?Math.ceil(d/h):Math.ceil(m/h),thumbnailDuration:h}}function C({thIndex:t,tduration:i,thduration:n,ttiles:o,startNumber:e,pto:u}){const r=Math.floor(t/o)+e,d=t%o+1,m=(r-1)*i-u,v=(d-1)*n;return m+v}function O(){const t=document.createElement("track");return t.kind="metadata",t.label="thumbnails",t.srclang="en",t.mode="hidden",t.default=!0,t}function x(t){let i=`WEBVTT
+
+`;for(const e of t)i+=`${o(e.startTime)} --> ${o(e.endTime)}
+`,i+=`${e.text}
+
+`;const n=new Blob([i],{type:"text/vtt"});return URL.createObjectURL(n);function o(e){const u=String(Math.floor(e/3600)).padStart(2,"0"),r=String(Math.floor(e%3600/60)).padStart(2,"0"),d=(e%60).toFixed(3).padStart(6,"0");return`${u}:${r}:${d}`}}globalThis.customElements&&!globalThis.customElements.get("dash-video")&&globalThis.customElements.define("dash-video",P);var B=P,H=new Set(["style","children","ref","key","suppressContentEditableWarning","suppressHydrationWarning","dangerouslySetInnerHTML"]),F={className:"class",htmlFor:"for"};function I(t){return t.toLowerCase()}function k(t){if(typeof t=="boolean")return t?"":void 0;if(typeof t!="function"&&!(typeof t=="object"&&t!==null))return t}function W({react:t,tagName:i,elementClass:n,events:o,displayName:e,defaultProps:u,toAttributeName:r=I,toAttributeValue:d=k}){const m=Number.parseInt(t.version)>=19,v=t.forwardRef((g,h)=>{var E,_;const l=t.useRef(null),T=t.useRef(new Map),w={},M={},f={},y={};for(const[a,s]of Object.entries(g)){if(H.has(a)){f[a]=s;continue}const c=r(F[a]??a);if(n.prototype&&a in n.prototype&&!(a in(((E=globalThis.HTMLElement)==null?void 0:E.prototype)??{}))&&!((_=n.observedAttributes)!=null&&_.some(b=>b===c))){y[a]=s;continue}if(a.startsWith("on")){w[a]=s;continue}const p=d(s);if(c&&p!=null&&(M[c]=String(p),m||(f[c]=p)),c&&m){const b=k(s);p!==b?f[c]=p:f[c]=s}}if(typeof window<"u"){for(const a in w){const s=w[a],c=a.endsWith("Capture"),p=(o?.[a]??a.slice(2).toLowerCase()).slice(0,c?-7:void 0);t.useLayoutEffect(()=>{const b=l?.current;if(!(!b||typeof s!="function"))return b.addEventListener(p,s,c),()=>{b.removeEventListener(p,s,c)}},[l?.current,s])}t.useLayoutEffect(()=>{if(l.current===null)return;const a=new Map;for(const s in y)L(l.current,s,y[s]),T.current.delete(s),a.set(s,y[s]);for(const[s,c]of T.current)L(l.current,s,void 0);T.current=a})}if(typeof window>"u"&&n?.getTemplateHTML&&n?.shadowRootOptions){const{mode:a,delegatesFocus:s}=n.shadowRootOptions,c=t.createElement("template",{shadowrootmode:a,shadowrootdelegatesfocus:s,dangerouslySetInnerHTML:{__html:n.getTemplateHTML(M,g)},key:"ce-la-react-ssr-template-shadow-root"});f.children=[c,f.children]}return t.createElement(i,{...u,...f,ref:t.useCallback(a=>{l.current=a,typeof h=="function"?h(a):h!==null&&(h.current=a)},[h])},f.children)});return v.displayName=e??n.name,v}function L(t,i,n){var o;t[i]=n,n==null&&i in(((o=globalThis.HTMLElement)==null?void 0:o.prototype)??{})&&t.removeAttribute(i)}var V=W({react:A,tagName:"dash-video",elementClass:B,toAttributeName(t){return t==="muted"?"":t==="defaultMuted"?"muted":I(t)}});export{V as default};
+//# sourceMappingURL=react-gdx3v4jU.js.map

server/src/services/assignmentService/index.js

@@ -7,6 +7,7 @@ const logger = require('../../globals/logger').child('assignment');
 const { MODES, getMode, modeEvents } = require('../modeManager');
 const { roleEvents, getRole, isAdmin, isLockdownAdmin } = require('../roleService');
 const roverManager = require('../roverManager');
+const { getOperatingMode } = require('../operatingModeService');
 const { compareRoversForAssignment } = require('./roverRanking');
 
 const socketRefs = new Map(); // socketId -> socket
@@ -131,7 +132,7 @@ roverManager.managerEvents.on('switch', ({ socketId, roverId }) => {
 });
 
 function assignSocket(socket, options = {}) {
-  if (!socket || isAdmin(socket) || getRole(socket) !== 'user') {
+  if (!socket || getOperatingMode(socket) !== 'rover' || isAdmin(socket) || getRole(socket) !== 'user') {
     return;
   }
   // avoid double assignment
@@ -311,13 +312,22 @@ function describeAssignment(socketId) {
 
 module.exports = {
   assignmentEvents,
+  resumeAssignment: assignSocket,
+  releaseForOperatingMode: (socket) => {
+    // Include direct admin control as well as automatic assignment ownership.
+    const roverIds = new Set(roverManager.getRoversForSocket(socket.id));
+    const assigned = assignments.get(socket.id);
+    if (assigned) roverIds.add(assigned);
+    waiting.delete(socket.id);
+    roverIds.forEach((roverId) => forceRelease(roverId, socket.id));
+  },
   describeAssignment,
   forceRelease,
   forceReleaseWithNotice,
   rerollAssignments,
   getAssignedRover: (socketId) => assignments.get(socketId) || null,
   moveAssignment: (socket, roverId, { releasePrevious = true } = {}) => {
-    if (!socket || !roverId) return;
+    if (!socket || !roverId || getOperatingMode(socket) !== 'rover') return;
     const previous = assignments.get(socket.id);
     if (previous && previous !== roverId && releasePrevious) {
       roverManager.releaseControl(previous, socket);

server/src/services/chatService/contextBuilders.js

@@ -2,20 +2,14 @@
 // Purpose: Builds normalized chat message/typing payloads and rover context snapshots.
 // Scope: Encapsulates chat DTO construction and rover/driver metadata extraction.
 const { v4: uuidv4 } = require('uuid');
-const io = require('../../globals/io');
 const roverManager = require('../roverManager');
 const { getRole } = require('../roleService');
+const { getOperatingMode } = require('../operatingModeService');
 const { describeAssignment } = require('../assignmentService');
 const { getNickname } = require('../nicknameService');
 const ptzCameraService = require('../ptzCameraService');
 
-function resolvePtzChatTarget(socketId) {
-  return ptzCameraService.getChatTargetForSocket(socketId) || null;
-}
-
 function resolveRoverId(socketId) {
-  const ptzTarget = resolvePtzChatTarget(socketId);
-  if (ptzTarget?.roverId) return ptzTarget.roverId;
   const primary = roverManager.getPrimaryRoverForSocket(socketId);
   if (primary) return primary;
   const assignment = describeAssignment(socketId);
@@ -24,54 +18,22 @@ function resolveRoverId(socketId) {
 
 function resolveRoverColor(roverId) {
   if (!roverId) return null;
-  if (String(roverId) === ptzCameraService.PTZ_CAMERA_ID) {
-    return ptzCameraService.getPublicState()?.color || null;
-  }
   const record = roverManager.rovers.get(String(roverId));
   return record?.meta?.color || null;
 }
 
 function resolveRoverName(roverId) {
   if (!roverId) return null;
-  if (String(roverId) === ptzCameraService.PTZ_CAMERA_ID) {
-    return ptzCameraService.getPublicState()?.name || null;
-  }
   const record = roverManager.rovers.get(String(roverId));
   return record?.meta?.name || null;
 }
 
-function isPtzChatTargetId(roverId) {
-  /*
-    PTZ is intentionally treated as a virtual rover for chat identity only. It
-    does not live in roverManager.rovers because movement, video authorization,
-    and queue ownership are PTZ-service concerns, but chat needs one stable
-    "rover-like" id so the existing web UI, Discord bridge, and AI transcript
-    code can all render the same badge without learning PTZ internals.
-  */
-  return Boolean(roverId) && String(roverId) === ptzCameraService.PTZ_CAMERA_ID;
-}
-
 function isPublicChatTargetId(roverId, socket = null) {
-  if (!roverId) return false;
-  /*
-    Normal rovers remain governed by the existing replay visibility rule, which
-    is also the rule chat historically used to avoid exposing closed private
-    rover activity. PTZ gets an explicit allow-list entry here because it is a
-    public chat target that deliberately pretends to be a rover, even though it
-    is not a roverManager record.
-  */
-  if (isPtzChatTargetId(roverId)) return true;
-  return roverManager.canReplayRoverId(roverId, socket) === true;
+  return Boolean(roverId) && roverManager.canReplayRoverId(roverId, socket) === true;
 }
 
 function isPrivateClosedRoverId(roverId) {
-  if (!roverId) return false;
-  /*
-    PTZ uses the existing rover badge fields so chat rows can reuse RoverLabel,
-    but it is not a private rover. Let PTZ-badged messages broadcast normally
-    instead of falling into the closed-private rover path for unknown ids.
-  */
-  return !isPublicChatTargetId(roverId);
+  return Boolean(roverId) && !isPublicChatTargetId(roverId);
 }
 
 function normalizeProfileImageUrl(value) {
@@ -170,6 +132,8 @@ function buildMessage(socket, text, meta = {}) {
     socketId: socket?.id || null,
     nickname: meta.nickname || getNickname(socket) || null,
     role: meta.role || getRole(socket),
+    operatingMode: socket ? getOperatingMode(socket) : null,
+    operatingModeDisplay: socket ? ptzCameraService.getOperatingModeDisplay(socket.id) : null,
     roverId,
     roverName,
     roverColor,
@@ -215,6 +179,8 @@ function buildTypingPayload(socket, meta = {}) {
     socketId,
     nickname: meta.nickname || getNickname(socket) || null,
     role: meta.role || getRole(socket),
+    operatingMode: socket ? getOperatingMode(socket) : null,
+    operatingModeDisplay: socket ? ptzCameraService.getOperatingModeDisplay(socket.id) : null,
     roverId,
     roverName,
     roverColor,
@@ -231,7 +197,6 @@ function buildTypingPayload(socket, meta = {}) {
 
 module.exports = {
   resolveRoverId,
-  isPtzChatTargetId,
   isPublicChatTargetId,
   isPrivateClosedRoverId,
   buildRoverCtxSnapshot,

server/src/services/chatService/notifications.js

@@ -19,13 +19,6 @@ const { getLastAccessNoticeAt, setLastAccessNoticeAt } = require('./state');
 
 function playTypingNote(roverId, note, socketId) {
   if (!roverId) return;
-  /*
-    PTZ borrows the roverId field for chat badges, but it has no rover command
-    channel. Skipping the song command here keeps PTZ chat from producing noisy
-    "unknown rover" command attempts while still allowing the message itself to
-    behave like rover chat everywhere else.
-  */
-  if (String(roverId) === ptzCameraService.PTZ_CAMERA_ID) return;
   try {
     issueCommand(roverId, {
       type: 'song',
@@ -90,8 +83,8 @@ function maybeSendAccessNotice(message, sendSystemMessage) {
 }
 
 function maybeSpeak(socket, message, ttsOptions) {
-  if (!ttsOptions || !message?.roverId) return;
-  if (String(message.roverId) === ptzCameraService.PTZ_CAMERA_ID) {
+  if (!ttsOptions || !message) return;
+  if (message.operatingMode === 'ptz') {
     /*
       PTZ has no rover websocket, but it does have a real speaker behind the
       Reolink/neolink path. Keep PTZ routing here so chat remains the single
@@ -107,6 +100,7 @@ function maybeSpeak(socket, message, ttsOptions) {
       });
     return;
   }
+  if (!message.roverId) return;
   const record = roverManager.rovers.get(message.roverId);
   const ttsEnabled = Boolean(record?.meta?.audio?.ttsEnabled);
   if (!ttsEnabled) return;

server/src/services/discordBotService/integrations/chatBridge.js

@@ -59,12 +59,6 @@ function createChatBridgeHandlers(deps) {
   function handleChatBridgeOutbound(event) {
     const payload = event?.payload;
     if (!payload) return;
-    /*
-      Outbound bridge filtering must use chat visibility, not rover replay
-      visibility. PTZ deliberately uses roverId: "ptz-camera" so the existing
-      chat badge path can be reused, but that id is not a roverManager rover and
-      would be dropped by canReplayRoverId().
-    */
     if (payload?.roverId && !isPublicChatTargetId(payload.roverId)) return;
     const guildConfigs = listGuildConfigs();
     if (!guildConfigs.length) return;

server/src/services/discordBotService/integrations/helpers.js

@@ -24,14 +24,8 @@ function formatWebhookUsername(payload) {
     const origin = payload.discordGuildName ? ` (From: ${payload.discordGuildName})` : '';
     return `${name}${origin}${botTag}${spectatorTag}${adminTag}`;
   }
-  /*
-    The chat payload already carries the resolved display name for rover-like
-    targets. Prefer that name so PTZ, which is intentionally pretending to be a
-    rover in chat, shows up as "PTZ Camera" instead of the internal id
-    "ptz-camera"; fall back to the id for older payloads or missing metadata.
-  */
-  const roverTagLabel = payload.roverName || payload.roverId;
-  const roverTag = payload.roverId ? ` [${roverTagLabel}]` : '';
+  const tagLabel = payload.operatingModeDisplay?.name || payload.roverName || payload.roverId;
+  const roverTag = tagLabel ? ` [${tagLabel}]` : '';
   return `${name}${botTag}${spectatorTag}${adminTag}${roverTag}`;
 }
 

server/src/services/interInstanceService/index.js

@@ -10,7 +10,8 @@ const { loadConfig, getFeatureFlags, registerConfigurationHandler } = require('.
 const { getConfiguredSocials } = require('../sessionService/configuration');
 const { getMode, MODES } = require('../modeManager');
 const roverManager = require('../roverManager');
-const { getTurnQueues } = require('../turnService');
+const { getTurnQueues, getActiveDrivers } = require('../turnService');
+const { buildRoverTurn } = require('../turnService/display');
 const { getRoomCameras, getRoomCameraState } = require('../roomCameraService');
 const { getRoverSnapshotState } = require('../roverSnapshotService');
 const { getRole } = require('../roleService');
@@ -157,22 +158,6 @@ function publicRoverIdSet(roster = []) {
   return new Set(roster.map((rover) => String(rover?.id || '')).filter(Boolean));
 }
 
-function filterPublicTurnQueues(turnQueues = {}, publicIds) {
-  const visible = publicIds instanceof Set ? publicIds : new Set();
-  const next = {};
-  /*
-    RoverQueuesPanel creates fallback rows for queue ids that are not present in
-    the roster, so the public payload must filter queues with the exact same
-    privacy boundary as the roster. Otherwise a closed-private rover can leak as
-    an orphan queue row after a private access grant assigns someone to it.
-  */
-  Object.entries(turnQueues || {}).forEach(([roverId, info]) => {
-    if (!visible.has(String(roverId))) return;
-    next[roverId] = info;
-  });
-  return next;
-}
-
 function filterPublicUsers(users = [], publicIds) {
   const visible = publicIds instanceof Set ? publicIds : new Set();
   /*
@@ -203,6 +188,8 @@ function buildLocalInfo() {
   const publicIds = publicRoverIdSet(publicRoster);
   const roster = publicRoster.map((rover) => (lockdown ? rover : addRoverSnapshotLinks(rover)));
   const users = filterPublicUsers(Array.from(io.sockets.sockets.values()).map(buildUserEntry), publicIds);
+  const turnQueues = getTurnQueues();
+  const activeDrivers = getActiveDrivers();
   const roomCameras = lockdown || !features.roomCameras ? [] : getRoomCameras().map(buildRoomCameraInfo);
   return {
     instance: {
@@ -212,8 +199,12 @@ function buildLocalInfo() {
       features,
       updatedAt: Date.now(),
     },
-    roster,
-    turnQueues: filterPublicTurnQueues(getTurnQueues(), publicIds),
+    // Only public roster entries reach the builder; queue metadata follows the
+    // same visibility boundary instead of creating separate orphan queue rows.
+    roster: roster.map((rover) => ({
+      ...rover,
+      turn: buildRoverTurn({ rover, mode, socketId: null, turnInfo: turnQueues[rover.id], activeDriverId: activeDrivers[rover.id], users }),
+    })),
     users,
     roomCameras,
     socials: features.socials ? getConfiguredSocials(config) : [],
@@ -349,7 +340,6 @@ function normalizeRemotePayload(entry, payload) {
       features: instance.features && typeof instance.features === 'object' ? instance.features : {},
     },
     roster: Array.isArray(payload?.roster) ? payload.roster : [],
-    turnQueues: payload?.turnQueues && typeof payload.turnQueues === 'object' ? payload.turnQueues : {},
     users: Array.isArray(payload?.users) ? payload.users : [],
     roomCameras: Array.isArray(payload?.roomCameras) ? payload.roomCameras : [],
     socials: Array.isArray(payload?.socials) ? payload.socials : [],
@@ -419,7 +409,6 @@ function markOffline(entry, error) {
       publicUrl: previous.instance?.publicUrl || entry.url,
     },
     roster: previous.roster || [],
-    turnQueues: previous.turnQueues || {},
     users: previous.users || [],
     roomCameras: previous.roomCameras || [],
     socials: previous.socials || [],

server/src/services/llmCommentaryService/snapshotEngine.js

@@ -370,11 +370,6 @@ function createSnapshotEngine(deps) {
       .filter((entry) => {
         const roverId = entry?.roverId ? String(entry.roverId) : null;
         if (!roverId) return true;
-        /*
-          This is a chat transcript filter, not a physical-rover filter. PTZ
-          chat intentionally carries a rover-like id so transcript consumers can
-          render it consistently, even though roverManager cannot replay that id.
-        */
         return isPublicChatTargetId(roverId);
       });
     const chatRecent = allRecentMessages
@@ -430,6 +425,8 @@ function createSnapshotEngine(deps) {
         type: 'chat',
         nickname: entry.nickname || entry.socketId?.slice(0, 6) || 'unknown',
         text: entry.text || '',
+        operating_mode: entry.operatingMode || null,
+        operating_mode_name: entry.operatingModeDisplay?.name || null,
         rover_id: roverId,
         rover_ctx: { ...baseCtx, ...storedCtx },
       };

server/src/services/operatingModeService/index.js

@@ -0,0 +1,74 @@
+const EventEmitter = require('events');
+
+const operatingModeEvents = new EventEmitter();
+const transitions = new WeakMap();
+
+function getOperatingMode(socket) {
+  // Handshake intent reserves the mode before role-driven assignment runs.
+  // It grants no camera permissions; entry still checks access and readiness.
+  return socket?.data?.operatingMode
+    || (socket?.handshake?.auth?.operatingMode === 'ptz' ? 'ptz' : 'rover');
+}
+
+async function transition(socket, operatingMode) {
+  // Resolve services at the action boundary to avoid a dependency cycle with
+  // assignment and camera policy, which both read operating mode.
+  const assignment = require('../assignmentService');
+  const roverManager = require('../roverManager');
+  const ptz = require('../ptzCameraService');
+  if (operatingMode === 'rover' && getOperatingMode(socket) === 'rover') {
+    return { operatingMode, state: ptz.getPublicState(socket) };
+  }
+  if (operatingMode === 'ptz') {
+    await ptz.prepareParticipation(socket);
+    if (socket.disconnected) throw new Error('Session disconnected');
+    ptz.checkParticipationAccess(socket);
+    const leave = roverManager.canLeaveCurrentRover(socket);
+    if (!leave.ok) throw new Error(leave.message);
+
+    // Block new rover ownership before release events notify other services.
+    socket.data.operatingMode = 'ptz';
+    assignment.releaseForOperatingMode(socket);
+    socket.data.ptzEntered = true;
+  } else {
+    ptz.releaseTurn(socket);
+    socket.data.ptzEntered = false;
+    socket.data.operatingMode = 'rover';
+    assignment.resumeAssignment(socket);
+  }
+  operatingModeEvents.emit('change', { socket, operatingMode });
+  return { operatingMode, state: ptz.getPublicState(socket) };
+}
+
+function enqueueTransition(socket, action) {
+  // Camera initialization can yield. Serialize switches and turn release per
+  // socket so a late entry cannot undo a subsequent exit or release request.
+  const previous = transitions.get(socket) || Promise.resolve();
+  const next = previous.catch(() => {}).then(() => {
+    if (socket.disconnected) throw new Error('Session disconnected');
+    return action();
+  });
+  transitions.set(socket, next);
+  return next;
+}
+
+function setOperatingMode(socket, operatingMode) {
+  if (!['rover', 'ptz'].includes(operatingMode)) {
+    return Promise.reject(new Error('Invalid operating mode'));
+  }
+  return enqueueTransition(socket, () => transition(socket, operatingMode));
+}
+
+function runPtzTurnAction(socket, action) {
+  return enqueueTransition(socket, () => {
+    const ptz = require('../ptzCameraService');
+    if (action === 'release') return ptz.releaseTurn(socket);
+    if (action !== 'request') throw new Error('Invalid PTZ turn action');
+    if (getOperatingMode(socket) !== 'ptz' || !socket.data.ptzEntered) {
+      throw new Error('Enter PTZ before requesting a turn');
+    }
+    return ptz.claimTurn(socket);
+  });
+}
+
+module.exports = { getOperatingMode, setOperatingMode, runPtzTurnAction, operatingModeEvents };

server/src/services/overseerControlService/index.js

@@ -396,11 +396,6 @@ async function runDecision(triggerReason) {
     .filter((entry) => Number(entry?.ts || 0) >= runtime.contextResetAt)
     .filter((entry) => {
       if (!entry?.roverId) return true;
-      /*
-        Chat context should preserve every public chat target, including the
-        PTZ virtual rover. Rover replay visibility alone would drop PTZ because
-        it is owned by ptzCameraService instead of roverManager.
-      */
       return isPublicChatTargetId(entry.roverId);
     })
     .slice(-(MAX_CHAT_CONTEXT + MAX_BOT_CONTEXT));

server/src/services/ptzCameraService/audioPlayback.js

@@ -2,7 +2,6 @@
 // Purpose: Generates server-side TTS files and sends them to the Reolink TrackMix speaker through neolink.
 // Scope: Owns file/cache/process details for PTZ speech only; PTZ ownership, chat identity, and camera motion stay in index.js.
 const crypto = require('crypto');
-const fs = require('fs');
 const fsp = require('fs/promises');
 const path = require('path');
 const { spawn } = require('child_process');
@@ -78,6 +77,7 @@ function createPtzAudioPlayback(deps) {
   const volume = clampNumber(audioConfig.volume, DEFAULT_VOLUME, 0, 4);
   const fliteDefaultVoice = String(audioConfig.fliteDefaultVoice || 'kal').trim();
 
+  let disposed = false;
   let playbackProc = null;
   let playbackSeq = 0;
 
@@ -244,12 +244,16 @@ function createPtzAudioPlayback(deps) {
     }, 1200);
   }
 
-  async function playFile(filePath, context = {}) {
-    if (!audioEnabled) throw new Error('PTZ audio disabled');
+  async function playFile(filePath, context = {}, authorize = () => {}) {
+    if (disposed || !audioEnabled) throw new Error('PTZ audio unavailable');
+    authorize();
     const neolinkConfigPath = await ensureNeolinkConfig();
     const stat = await fsp.stat(filePath);
     if (!stat.isFile()) throw new Error(`PTZ TTS file is not a regular file: ${filePath}`);
 
+    // Rendering and config IO may outlive a turn or camera configuration.
+    if (disposed) throw new Error('PTZ audio configuration changed');
+    authorize();
     stopActivePlayback('new-playback');
     const seq = ++playbackSeq;
     const args = [
@@ -302,13 +306,13 @@ function createPtzAudioPlayback(deps) {
     return { pid: proc.pid || null, seq };
   }
 
-  async function speakText(text, ttsOptions = {}, context = {}) {
+  async function speakText(text, ttsOptions = {}, context = {}, authorize = () => {}) {
     const rendered = await ensureTtsFile(text, ttsOptions);
     await playFile(rendered.filePath, {
       ...context,
       engine: rendered.engine,
       cached: rendered.cached,
-    });
+    }, authorize);
     return rendered;
   }
 
@@ -316,6 +320,10 @@ function createPtzAudioPlayback(deps) {
     getState,
     speakText,
     stopActivePlayback,
+    dispose: () => {
+      disposed = true;
+      stopActivePlayback('configuration-change');
+    },
   };
 }
 

server/src/services/ptzCameraService/participation.js

@@ -0,0 +1,98 @@
+// Owns PTZ turns only. Camera IO, permissions and operating-mode entry are supplied
+// by the service, so queue transitions cannot create physical rover ownership.
+function createParticipation({ io, events, emitChange, getTurnDurationMs, canParticipate, stopMotion, revokeVideo }) {
+  const state = { operatorSocketId: null, queue: [], deadline: null, generation: 0 };
+  let timer = null;
+
+  function remove(socketId) {
+    state.queue = state.queue.filter((id) => id !== socketId);
+  }
+
+  function stopOperator(reason) {
+    clearTimeout(timer);
+    timer = null;
+    const previous = state.operatorSocketId;
+    state.operatorSocketId = null;
+    state.deadline = null;
+    state.generation += 1;
+    if (!previous) return;
+    revokeVideo(previous);
+    stopMotion(reason).catch(() => {});
+    events.emit('operator', { socketId: previous, action: 'release', reason });
+  }
+
+  function scheduleTurn() {
+    // Uncontested control has no deadline. Starting a new wait gets a full turn,
+    // while later queue changes must not reset an already running countdown.
+    if (!state.operatorSocketId || !state.queue.length) {
+      clearTimeout(timer);
+      timer = null;
+      state.deadline = null;
+      return;
+    }
+    if (timer) return;
+    const duration = getTurnDurationMs();
+    state.deadline = Date.now() + duration;
+    timer = setTimeout(() => {
+      timer = null;
+      state.queue = state.queue.filter(eligible);
+      if (state.queue.length) {
+        // Preserve PTZ's explicit request-to-rejoin rule after a handoff.
+        stopOperator('turn-expired');
+        advance('turn-expired');
+      } else {
+        scheduleTurn();
+        emitChange('turn-uncontested');
+      }
+    }, duration);
+  }
+
+  function eligible(socketId) {
+    const socket = io.sockets.sockets.get(socketId);
+    return socket && !socket.disconnected && canParticipate(socket);
+  }
+
+  function advance(reason) {
+    state.queue = state.queue.filter(eligible);
+    while (!state.operatorSocketId && state.queue.length) {
+      const next = state.queue.shift();
+      if (!eligible(next)) continue;
+      state.operatorSocketId = next;
+      state.generation += 1;
+      events.emit('operator', { socketId: next, action: 'active' });
+    }
+    scheduleTurn();
+    emitChange(reason);
+  }
+
+  function claim(socket) {
+    if (!eligible(socket.id)) throw new Error('PTZ participation required');
+    if (state.operatorSocketId === socket.id || state.queue.includes(socket.id)) return;
+    state.queue.push(socket.id);
+    advance('queue-join');
+  }
+
+  function release(socketId, reason = 'turn-release') {
+    remove(socketId);
+    if (state.operatorSocketId === socketId) stopOperator(reason);
+    advance(reason);
+  }
+
+  function reconcile() {
+    state.queue = state.queue.filter(eligible);
+    if (state.operatorSocketId && !eligible(state.operatorSocketId)) stopOperator('access-change');
+    advance('access-change');
+  }
+
+  function clear(reason) {
+    state.queue = [];
+    stopOperator(reason);
+  }
+
+  return {
+    state, claim, release, reconcile, clear,
+    revoke: (reason) => { stopOperator(reason); advance(reason); },
+  };
+}
+
+module.exports = { createParticipation };

server/src/services/ptzCameraService/socketGateway.js

@@ -0,0 +1,123 @@
+// Socket transport delegates policy and lifecycle decisions to the PTZ service.
+function registerSocketGateway(deps) {
+  const { io, isAdmin, participation, emitChange, normalizeSocketArgs,
+    runPtzTurnAction, acceptMotionIntent, getStatus, setSpotlight, setIr,
+    listPresets, gotoPreset, createPreset, removePreset, passesMode,
+    normalizeSnapshotIds, addSnapshotSubscription, sendSnapshotFrame,
+    getSnapshot, removeSnapshotSubscriptions } = deps;
+  io.on('connection', (socket) => {
+    socket.on('ptzCamera:revokeOperator', (firstArg, secondArg) => {
+      const { cb } = normalizeSocketArgs(firstArg, secondArg);
+      if (!isAdmin(socket)) return cb({ error: 'Admin required' });
+      participation.revoke('admin-revoke');
+      cb({ ok: true });
+    });
+    socket.on('ptzCamera:requestTurn', async (firstArg, secondArg) => {
+      const { cb } = normalizeSocketArgs(firstArg, secondArg);
+      try { cb({ ok: true, state: await runPtzTurnAction(socket, 'request') }); }
+      catch (err) { cb({ error: err.message }); }
+    });
+    socket.on('ptzCamera:release', async (firstArg, secondArg) => {
+      const { cb } = normalizeSocketArgs(firstArg, secondArg);
+      try {
+        cb({ ok: true, state: await runPtzTurnAction(socket, 'release') });
+      } catch (err) {
+        cb({ error: err.message });
+      }
+    });
+    socket.on('ptzCamera:motion', (firstArg, secondArg) => {
+      const { payload, cb } = normalizeSocketArgs(firstArg, secondArg);
+      try {
+        /*
+          Acknowledge acceptance of the newest desired state immediately. The
+          serialized ONVIF pump deliberately runs independently of Socket.IO
+          request latency so browser heartbeats cannot accumulate while waiting
+          for a camera SOAP response.
+        */
+        cb(acceptMotionIntent(socket, payload));
+      } catch (err) {
+        cb({ error: err.message });
+      }
+    });
+    socket.on('ptzCamera:status', async (firstArg, secondArg) => {
+      const { cb } = normalizeSocketArgs(firstArg, secondArg);
+      try {
+        cb({ ok: true, status: await getStatus(socket) });
+      } catch (err) {
+        cb({ error: err.message });
+      }
+    });
+    socket.on('ptzCamera:spotlight', async (firstArg, secondArg) => {
+      const { payload, cb } = normalizeSocketArgs(firstArg, secondArg);
+      try {
+        cb({ ok: true, light: await setSpotlight(socket, payload) });
+      } catch (err) {
+        cb({ error: err.message });
+      }
+    });
+    socket.on('ptzCamera:ir', async (firstArg, secondArg) => {
+      const { payload, cb } = normalizeSocketArgs(firstArg, secondArg);
+      try {
+        cb({ ok: true, ir: await setIr(socket, payload) });
+      } catch (err) {
+        cb({ error: err.message });
+      }
+    });
+    socket.on('ptzCamera:presets:list', async (firstArg, secondArg) => {
+      const { cb } = normalizeSocketArgs(firstArg, secondArg);
+      try {
+        cb({ ok: true, presets: await listPresets(socket) });
+      } catch (err) {
+        cb({ error: err.message });
+      }
+    });
+    socket.on('ptzCamera:preset:goto', async (firstArg, secondArg) => {
+      const { payload, cb } = normalizeSocketArgs(firstArg, secondArg);
+      try {
+        cb(await gotoPreset(socket, payload));
+      } catch (err) {
+        cb({ error: err.message });
+      }
+    });
+    socket.on('ptzCamera:preset:create', async (firstArg, secondArg) => {
+      const { payload, cb } = normalizeSocketArgs(firstArg, secondArg);
+      try {
+        cb(await createPreset(socket, payload));
+      } catch (err) {
+        cb({ error: err.message });
+      }
+    });
+    socket.on('ptzCamera:preset:remove', async (firstArg, secondArg) => {
+      const { payload, cb } = normalizeSocketArgs(firstArg, secondArg);
+      try {
+        cb(await removePreset(socket, payload));
+      } catch (err) {
+        cb({ error: err.message });
+      }
+    });
+    socket.on('ptzCamera:snapshotSubscribe', (firstArg, secondArg) => {
+      const { payload, cb } = normalizeSocketArgs(firstArg, secondArg);
+      try {
+        if (!passesMode(socket)) throw new Error('Not authorized for PTZ snapshots');
+        const ids = normalizeSnapshotIds(payload);
+        addSnapshotSubscription(socket, ids);
+        const lastSnapshotState = getSnapshot();
+        if (lastSnapshotState?.frame) sendSnapshotFrame(socket, lastSnapshotState.frame, lastSnapshotState.ts);
+        cb({ ok: true, subscribed: ids });
+      } catch (err) {
+        cb({ error: err.message });
+      }
+    });
+    socket.on('ptzCamera:snapshotUnsubscribe', (firstArg, secondArg) => {
+      const { payload } = normalizeSocketArgs(firstArg, secondArg);
+      removeSnapshotSubscriptions(socket.id, normalizeSnapshotIds(payload));
+    });
+    socket.on('disconnect', () => {
+      participation.release(socket.id, 'disconnect');
+      removeSnapshotSubscriptions(socket.id);
+      emitChange('disconnect');
+    });
+  });
+}
+
+module.exports = { registerSocketGateway };

server/src/services/ptzCameraService/turnLabels.js

@@ -0,0 +1,9 @@
+const labels = {
+  ...require('../turnService/labels'),
+  waiting: 'Someone else has control',
+  active: 'You control the camera',
+  showName: 'Show camera name',
+  hideName: 'Hide camera name',
+};
+
+module.exports = labels;

server/src/services/replayEngineV2/replaySources.js

@@ -68,13 +68,13 @@ function getDefaultWebSources(assignment = {}, socket = null) {
     replay`, follows the camera currently controlled by that socket just as it
     follows an assigned rover below.
 
-    isOperator is deliberately stricter than PTZ access or queue membership:
+    turn.ownsControl is deliberately stricter than PTZ access or queue membership:
     spectators and users waiting for a camera turn must not silently replay a
     camera they are not currently operating. Keeping this rule here also makes
     every web replay entry point share the same default instead of teaching the
     chat-command adapter about PTZ-specific state.
   */
-  if (ptzCameraService.getPublicState(socket).isOperator) {
+  if (ptzCameraService.getPublicState(socket).turn.ownsControl) {
     const source = ptzCameraService.getReplaySource();
     if (!source) return [];
     return [{ type: source.type, id: String(source.id), label: source.label || source.id }];

server/src/services/roverManager/privateAccess.js

@@ -1,3 +1,4 @@
+const { getOperatingMode } = require('../operatingModeService');
 // rover Manager private access
 // Purpose: Encapsulates private-rover visibility and control-authorization policy checks.
 // Scope: Keeps runtime behavior unchanged while isolating policy decisions from orchestration wiring.
@@ -80,6 +81,7 @@ function createPrivateAccessPolicy(deps) {
       allowClosedPrivateGrantInLockdown = false,
       allowClosedPrivateCurrentDriver = false,
     } = options;
+    if (getOperatingMode(socket) !== 'rover') return 'Leave PTZ before requesting rover control';
     if (!record) return 'Unknown rover';
     if (!allowUser && !isAdmin(socket)) return 'Only admins can request control';
     if (record.locked && !isAdmin(socket)) return 'Rover locked';

server/src/services/sessionService/index.js

@@ -5,16 +5,18 @@ const io = require('../../globals/io');
 const logger = require('../../globals/logger').child('sessionService');
 const { getFeatureFlags, configurationEvents } = require('../../configuration');
 const { getRole, isAdmin, roleEvents } = require('../roleService');
+const { getOperatingMode, setOperatingMode, operatingModeEvents } = require('../operatingModeService');
 const { getMode, modeEvents } = require('../modeManager');
 const roverManager = require('../roverManager');
 const { managerEvents } = roverManager;
 const assignmentService = require('../assignmentService');
-const { getActiveDrivers, getTurnQueues, turnEvents } = require('../turnService');
+const { getActiveDrivers, getTurnQueues, canDrive, turnEvents } = require('../turnService');
+const { buildRoverTurn } = require('../turnService/display');
 const { getRoomCameras, roomCameraEvents } = require('../roomCameraService');
 const {
   getPublicState: getPtzCameraState,
-  getChatTargetForSocket: getPtzChatTargetForSocket,
-  PTZ_CAMERA_ID,
+  getOperatingModeDisplay,
+  getParticipantSocketIds,
   ptzCameraEvents,
 } = require('../ptzCameraService');
 const { getState: getHomeAssistantState, homeAssistantEvents } = require('../homeAssistantService');
@@ -111,18 +113,13 @@ function buildBandwidthSavingsSessionState(socket, controllableUserCount = 0) {
 
 function countControllableUsers(userEntries = []) {
   const ids = new Set();
+  const ptzParticipants = new Set(getParticipantSocketIds());
   userEntries.forEach((entry) => {
     const role = String(entry?.role || '');
     if (role === 'spectator') return;
     const socketId = String(entry?.socketId || '').trim();
     const roverId = String(entry?.roverId || '').trim();
-    /*
-      buildUserEntry already maps PTZ queued/operators to the PTZ pseudo-rover
-      id and normal drivers to their physical rover. Counting entries after that
-      normalization gives the browser the same conceptual "controllable users"
-      count it shows in the user/queue panels without duplicating PTZ UI logic.
-    */
-    if (socketId && roverId) ids.add(socketId);
+    if (socketId && (roverId || ptzParticipants.has(socketId))) ids.add(socketId);
   });
   return ids.size;
 }
@@ -146,19 +143,14 @@ function buildUserEntry(socket) {
     && roverManager.isDriver(assignment.roverId, socket)
     ? assignment.roverId
     : null;
-  const ptzChatTarget = getPtzChatTargetForSocket(socket.id);
   return {
     socketId: socket.id,
     userId: socket?.data?.userId || null,
     nickname: getNickname(socket) || null,
     role,
-    /*
-      PTZ is not inserted into the physical rover roster, but for chat and user
-      presence it should read like the user moved to a rover-like target. Prefer
-      the PTZ chat target while the socket is queued or operating so presence,
-      queue lookup, and chat identity all agree.
-    */
-    roverId: ptzChatTarget?.roverId || verifiedPrimaryRover || verifiedAssignmentRover || null,
+    operatingMode: getOperatingMode(socket),
+    operatingModeDisplay: getOperatingModeDisplay(socket.id),
+    roverId: verifiedPrimaryRover || verifiedAssignmentRover || null,
   };
 }
 
@@ -171,15 +163,7 @@ function buildSession(socket) {
   const controllableUserCount = countControllableUsers(userEntries);
   const users = userEntries.map((entry) => ({
     ...entry,
-    /*
-      PTZ is intentionally not a roverManager record, so the normal physical
-      rover visibility filter would erase the user's PTZ chat target. Preserve
-      it here because getPtzChatTargetForSocket already applied the PTZ access
-      and queue/operator rules before buildUserEntry returned it.
-    */
-    roverId: entry.roverId === PTZ_CAMERA_ID
-      ? entry.roverId
-      : filterVisibleRoverId(socket, entry.roverId),
+    roverId: filterVisibleRoverId(socket, entry.roverId),
   }));
   const roster = roverManager.getRosterForSocket(socket);
   const assignment = assignmentService.describeAssignment(socket?.id || '');
@@ -201,6 +185,7 @@ function buildSession(socket) {
   return {
     socketId: socket?.id || null,
     role: getRole(socket),
+    operatingMode: getOperatingMode(socket),
     mode: getMode(),
     isLocalNetwork: isLocalNetwork(getSocketIp(socket)),
     bandwidthSavings: buildBandwidthSavingsSessionState(socket, controllableUserCount),
@@ -210,15 +195,24 @@ function buildSession(socket) {
       of navigation and layout without maintaining another feature registry.
     */
     features,
-    roster,
+    roster: roster.map((rover) => ({
+      ...rover,
+      permissions: { canControl: getRole(socket) !== 'spectator' && canDrive(rover.id, socket) },
+      turn: buildRoverTurn({
+        rover,
+        mode: getMode(),
+        socketId: socket?.id,
+        turnInfo: turnQueues[rover.id],
+        activeDriverId: activeDrivers[rover.id],
+        users,
+      }),
+    })),
     odometers: roverManager.getOdometersForSocket(socket),
     assignment: {
       ...assignment,
       roverId: assignmentRoverId,
       status: assignmentRoverId ? assignment.status : assignment.status === 'waiting' ? 'waiting' : null,
     },
-    activeDrivers,
-    turnQueues,
     roomCameras: getRoomCameras(),
     ptzCamera: getPtzCameraState(socket),
     homeAssistant: getHomeAssistantState(),
@@ -280,10 +274,19 @@ function syncAll() {
 }
 
 io.on('connection', (socket) => {
+  socket.on('session:setOperatingMode', async ({ operatingMode } = {}, cb = () => {}) => {
+    try {
+      cb({ ok: true, ...await setOperatingMode(socket, operatingMode) });
+    } catch (err) {
+      cb({ error: err.message });
+    }
+  });
   logger.info('New socket connected', socket.id);
   syncSocket(socket);
 });
 
+operatingModeEvents.on('change', () => syncAll());
+
 roleEvents.on('change', ({ socket }) => {
   if (!socket) return;
   logger.info('Role changed; syncing session', socket.id);

server/src/services/turnService/display.js

@@ -0,0 +1,39 @@
+const { describeQueue } = require('./queueDisplay');
+const { TURN_DURATION_MS, IDLE_TIMEOUT_MS } = require('./constants');
+
+const labels = {
+  ...require('./labels'),
+  waiting: 'Someone else is driving',
+  active: 'You’re driving',
+  showName: 'Show rover name',
+  hideName: 'Hide rover name',
+};
+
+// Build this from visibility-filtered session data so private rover state stays private.
+function buildRoverTurn({ rover, mode, socketId, turnInfo, activeDriverId, users }) {
+  const queue = turnInfo?.queue || [];
+  // Direct ownership can arrive before queue details on load/reconnect.
+  const currentDriverId = activeDriverId || turnInfo?.current || null;
+  const currentIndex = currentDriverId ? queue.indexOf(currentDriverId) : -1;
+  const userIndex = socketId ? queue.indexOf(socketId) : -1;
+  const enabled = mode === 'turns' && queue.length > 1 && currentIndex >= 0 && userIndex >= 0;
+  const turnsAhead = enabled ? (userIndex - currentIndex + queue.length) % queue.length : null;
+  const display = describeQueue(queue, currentDriverId, users);
+  return {
+    target: { id: rover.id, name: rover.name, color: rover.color, fallback: rover.id },
+    ...display,
+    // Null distinguishes a rover that has never had a queue from an empty queue.
+    queue: turnInfo ? display.queue : null,
+    enabled,
+    ownsControl: Boolean(socketId && currentDriverId === socketId),
+    turnsAhead,
+    queueLength: queue.length,
+    deadline: turnInfo?.deadline || null,
+    durationMs: TURN_DURATION_MS,
+    idleDeadline: turnInfo?.idleDeadline || null,
+    idleGraceMs: IDLE_TIMEOUT_MS,
+    labels,
+  };
+}
+
+module.exports = { buildRoverTurn };

server/src/services/turnService/labels.js

@@ -0,0 +1,10 @@
+module.exports = {
+  handoff: 'It’s your turn!',
+  idleWarning: 'Start driving or your turn will be skipped',
+  activeTimer: 'Your turn',
+  waitingTimer: 'Waiting',
+  untilTurn: 'until your turn',
+  timeRemaining: 'left',
+  showTimer: 'Show turn timer',
+  hideTimer: 'Hide turn timer',
+};

server/src/services/turnService/queueDisplay.js

@@ -0,0 +1,20 @@
+// Queue entries are complete display records. No browser-side user lookup or
+// naming fallback is needed, including when the queue comes from another server.
+function describeQueue(socketIds, currentId, users) {
+  const byId = new Map(users.map((user) => [user.socketId, user]));
+  const currentIndex = currentId ? socketIds.indexOf(currentId) : -1;
+  return {
+    queue: socketIds.map((socketId) => {
+      const user = byId.get(socketId);
+      return {
+        socketId,
+        name: user?.nickname || user?.name || socketId.slice(0, 6) || 'unknown',
+        role: user?.role || null,
+      };
+    }),
+    currentId,
+    nextId: socketIds.length > 1 ? socketIds[(currentIndex + 1) % socketIds.length] : null,
+  };
+}
+
+module.exports = { describeQueue };

server/src/services/verificationService/index.js

@@ -157,11 +157,11 @@ function identifySocket(socket, payload = {}) {
   }
 
   /*
-    Spectator-style pages carry identity too, but only the driver surface
-    participates in duplicate-driver enforcement. This flag remains on the
+    Spectator-style pages carry identity too, but only the driver and PTZ surfaces
+    participate in duplicate-driver enforcement. This flag remains on the
     socket because it is connection-specific, not person-specific.
   */
-  socket.data.identitySurface = payload.identitySurface === 'driver' ? 'driver' : 'passive';
+  socket.data.identitySurface = ['driver', 'ptz'].includes(payload.identitySurface) ? payload.identitySurface : 'passive';
 
   const result = identifyCanonicalSocket(socket, {
     ...payload,
@@ -207,7 +207,7 @@ function enforceSingleDriverSocketPerIdentity(currentSocket) {
   if (
     !currentSocket?.id ||
     !currentUserId ||
-    currentSocket.data?.identitySurface !== 'driver' ||
+    !['driver', 'ptz'].includes(currentSocket.data?.identitySurface) ||
     !enforceForCurrentSocket
   ) {
     return;
@@ -215,7 +215,7 @@ function enforceSingleDriverSocketPerIdentity(currentSocket) {
 
   const duplicates = Array.from(io.sockets.sockets.values()).filter((candidate) => {
     if (!candidate?.id || candidate.id === currentSocket.id || candidate.disconnected) return false;
-    if (candidate?.data?.identitySurface !== 'driver') return false;
+    if (!['driver', 'ptz'].includes(candidate?.data?.identitySurface)) return false;
     return getUserIdForSocket(candidate) === currentUserId;
   });
 

webui/src/components/ChatMessageRow/index.jsx

@@ -132,11 +132,11 @@ export function ChatIdentity({ message, toolsToggle = null }) {
           bot
         </span>
       ) : null}
-      {message.roverId && (
+      {(message.roverId || message.operatingModeDisplay) && (
         <RoverLabel
           roverId={message.roverId}
-          name={message.roverName}
-          color={message.roverColor}
+          name={message.operatingModeDisplay?.name || message.roverName}
+          color={message.operatingModeDisplay?.color || message.roverColor}
           fallback={message.roverId}
           className="shrink-0 text-[0.7rem]"
         />

webui/src/components/ChatPanel/index.jsx

@@ -51,33 +51,19 @@ function resolveTtsSettings(settings) {
 
 function useChatComposerSessionState(allowSpectatorInput) {
   const role = useSessionSelector((state) => state.session?.role || null);
-  const socketId = useSessionSelector((state) => state.session?.socketId || null);
+  const operatingMode = useSessionSelector((state) => state.session?.operatingMode || 'rover');
   const currentRoverId = useSessionSelector((state) => state.session?.assignment?.roverId || null);
-  const users = useSessionSelector((state) => state.session?.users ?? []);
   const roster = useSessionSelector((state) => state.session?.roster ?? []);
   const ptz = useSessionSelector((state) => state.session?.ptzCamera || null);
 
-  const chatTargetId = useMemo(() => {
-    /*
-      PTZ is intentionally not a roster entry, but session users expose the
-      current chat target for each socket. Prefer the self user entry so the TTS
-      control follows PTZ queue/operation state instead of only physical rover
-      assignment state.
-    */
-    const self = users.find((entry) => entry?.socketId === socketId);
-    if (!self?.roverId && ptz?.id && (ptz?.isOperator || ptz?.queuedPosition)) return ptz.id;
-    return self?.roverId || currentRoverId || null;
-  }, [currentRoverId, ptz?.id, ptz?.isOperator, ptz?.queuedPosition, socketId, users]);
-
   const rover = useMemo(
-    () => roster.find((entry) => String(entry.id) === String(chatTargetId)) || null,
-    [chatTargetId, roster],
+    () => roster.find((entry) => String(entry.id) === String(currentRoverId)) || null,
+    [currentRoverId, roster],
   );
   const ptzTtsSupported = Boolean(
-    ptz?.id &&
-      String(chatTargetId) === String(ptz.id) &&
+    operatingMode === 'ptz' &&
       ptz?.audio?.enabled &&
-      (ptz?.isOperator || ptz?.queuedPosition),
+      (ptz?.turn?.ownsControl || ptz?.turn?.turnsAhead > 0),
   );
 
   return {

webui/src/components/HudOverlays/HudChatInput/index.jsx

@@ -27,9 +27,8 @@ function detectSafari() {
 
 function HudChatInput({ compact = false, variant = 'legacy', open = true, onOpenChange = null }) {
   const role = useSessionSelector((state) => state.session?.role || null);
-  const socketId = useSessionSelector((state) => state.session?.socketId || null);
+  const operatingMode = useSessionSelector((state) => state.session?.operatingMode || 'rover');
   const currentRoverId = useSessionSelector((state) => state.session?.assignment?.roverId || null);
-  const users = useSessionSelector((state) => state.session?.users || []);
   const roverRoster = useSessionSelector((state) => state.session?.roster || []);
   const ptz = useSessionSelector((state) => state.session?.ptzCamera || null);
   const { sendMessage, onInputFocus, onInputBlur, blurChat, registerInputRef, setTypingActive } = useChatActions();
@@ -49,26 +48,14 @@ function HudChatInput({ compact = false, variant = 'legacy', open = true, onOpen
   const { navigateHistory, resetHistoryNavigation } = useChatMessageHistoryNavigation();
   const canChat = role !== 'spectator';
   const hideHudChat = role === 'spectator';
-  const chatTargetId = useMemo(() => {
-    /*
-      HUD chat does not render the full composer controls, but it still sends
-      TTS payloads when the active target supports speech. PTZ appears only in
-      the session user target, not the physical rover roster, so use the same
-      self-target resolution as the full chat panel.
-    */
-    const self = users.find((entry) => entry?.socketId === socketId);
-    if (!self?.roverId && ptz?.id && (ptz?.isOperator || ptz?.queuedPosition)) return ptz.id;
-    return self?.roverId || currentRoverId || null;
-  }, [currentRoverId, ptz?.id, ptz?.isOperator, ptz?.queuedPosition, socketId, users]);
   const rover = useMemo(
-    () => roverRoster.find((entry) => String(entry.id) === String(chatTargetId)) || null,
-    [chatTargetId, roverRoster],
+    () => roverRoster.find((entry) => String(entry.id) === String(currentRoverId)) || null,
+    [currentRoverId, roverRoster],
   );
   const ptzTtsSupported = Boolean(
-    ptz?.id &&
-      String(chatTargetId) === String(ptz.id) &&
+    operatingMode === 'ptz' &&
       ptz?.audio?.enabled &&
-      (ptz?.isOperator || ptz?.queuedPosition),
+      (ptz?.turn?.ownsControl || ptz?.turn?.turnsAhead > 0),
   );
   const ttsSupported = Boolean(rover?.audio?.ttsEnabled || ptzTtsSupported);
   const ttsPayload = useMemo(() => {

webui/src/components/HudOverlays/HudOverlay/index.jsx

@@ -40,10 +40,8 @@ function HudOverlay({
   });
   const derivedDriverLabel = useSessionSelector((state) => {
     if (!effectiveRoverId || variant !== 'spectator') return null;
-    const activeId = state.session?.activeDrivers?.[effectiveRoverId] || null;
-    const users = state.session?.users || [];
-    const match = users.find((u) => String(u.socketId || '') === String(activeId || ''));
-    return match?.nickname || match?.name || null;
+    const turn = state.session?.roster?.find((rover) => String(rover.id) === String(effectiveRoverId))?.turn;
+    return turn?.queue?.find((entry) => entry.socketId === turn.currentId)?.name || null;
   });
   const resolvedSensors = sensors ?? null;
   const resolvedLabel = label ?? rosterInfo.label ?? null;

webui/src/components/HudOverlays/TurnsOverlay/index.jsx

@@ -7,16 +7,13 @@ import SocialButton from '../../SocialButton/index.jsx';
 function TurnsOverlay({
   roverId = null,
   mobileHud = false,
-  turnModel = null,
 }) {
   const assignedRoverId = useSessionSelector((state) => state.session?.assignment?.roverId ?? null);
-  const effectiveRoverId = turnModel?.targetId ?? roverId ?? assignedRoverId;
+  const effectiveRoverId = roverId ?? assignedRoverId;
   const mode = useSessionSelector((state) => state.session?.mode || null);
   const roster = useSessionSelector((state) => state.session?.roster ?? []);
   const users = useSessionSelector((state) => state.session?.users ?? []);
-  const turnQueues = useSessionSelector((state) => state.session?.turnQueues ?? {});
   const socketId = useSessionSelector((state) => state.session?.socketId || null);
-  const activeDrivers = useSessionSelector((state) => state.session?.activeDrivers ?? {});
   const lastControlIntentAt = useControlSelector((control) => control.state.lastControlIntentAt);
   const [showTurnCue, setShowTurnCue] = useState(false);
   const [turnCueStartAt, setTurnCueStartAt] = useState(null);
@@ -30,30 +27,15 @@ function TurnsOverlay({
   const subClass = mobileHud ? 'text-xs' : 'text-sm';
   const cueTimerClass = mobileHud ? 'text-[0.55rem]' : 'text-[0.75rem]';
   const cuePadClass = mobileHud ? 'px-4 py-3' : 'px-6 py-4';
-  const turnInfo = turnModel ? null : effectiveRoverId ? turnQueues?.[effectiveRoverId] : null;
-  const activeDriverId = turnModel
-    ? turnModel.activeId || null
-    : effectiveRoverId
-    ? activeDrivers?.[effectiveRoverId] || null
-    : null;
-  const isActiveDriver = turnModel
-    ? Boolean(turnModel.isActive)
-    : Boolean(socketId && activeDriverId === socketId);
-  const isTurnsMode = turnModel ? Boolean(turnModel.enabled) : mode === 'turns';
+  const turnInfo = roster.find((rover) => String(rover.id) === String(effectiveRoverId))?.turn;
+  const activeDriverId = turnInfo?.currentId || null;
+  const isActiveDriver = Boolean(turnInfo?.ownsControl);
+  const isTurnsMode = mode === 'turns';
   const now = useSharedClock(1000, isTurnsMode);
-  const nextDriverId = useMemo(() => {
-    if (turnModel) return turnModel.nextId || null;
-    const queue = turnInfo?.queue || [];
-    if (!queue.length || !turnInfo?.current || queue.length <= 1) return null;
-    const idx = queue.findIndex((id) => id === turnInfo.current);
-    if (idx === -1) return queue[0] || null;
-    return queue[(idx + 1) % queue.length] || null;
-  }, [turnInfo, turnModel]);
-  const isNextDriver = turnModel
-    ? Boolean(turnModel.isNext)
-    : Boolean(socketId && nextDriverId === socketId);
-  const deadline = turnModel ? turnModel.deadline || null : turnInfo?.deadline || null;
-  const idleDeadline = turnModel ? turnModel.idleDeadline || null : turnInfo?.idleDeadline || null;
+  const nextDriverId = turnInfo?.currentId ? turnInfo.nextId : null;
+  const isNextDriver = Boolean(socketId && nextDriverId === socketId);
+  const deadline = turnInfo?.deadline || null;
+  const idleDeadline = turnInfo?.idleDeadline || null;
   const msUntilTurn = deadline ? deadline - now : null;
   const msUntilIdleSkip = idleDeadline ? idleDeadline - now : null;
   const totalRovers = roster.length;
@@ -69,14 +51,10 @@ function TurnsOverlay({
     });
     return unique.size;
   }, [users]);
-  const shouldUsePreviewByLoad = turnModel
-    ? Boolean(turnModel.showPreviewReason)
-    : isTurnsMode && totalDrivers > totalRovers;
+  const shouldUsePreviewByLoad = isTurnsMode && totalDrivers > totalRovers;
   const isPreSwitchWindow =
     isTurnsMode && isNextDriver && msUntilTurn != null && msUntilTurn <= 5000 && msUntilTurn > 0;
-  const showNotTurnNotice = turnModel
-    ? Boolean(turnModel.showNotTurnNotice ?? (isTurnsMode && !isActiveDriver))
-    : isTurnsMode && !isActiveDriver;
+  const showNotTurnNotice = isTurnsMode && !isActiveDriver;
   const showPreviewReason = showNotTurnNotice && !isPreSwitchWindow && shouldUsePreviewByLoad;
   const turnSeconds =
     msUntilTurn != null && Number.isFinite(msUntilTurn) ? Math.max(0, Math.ceil(msUntilTurn / 1000)) : null;
@@ -105,12 +83,9 @@ function TurnsOverlay({
   const turnTimerFlashActive = noticeFlashActive;
 
   useEffect(() => {
-    /*
-      Rover turns and PTZ turns now arrive through the same render path. Use the
-      normalized isTurnsMode flag here instead of checking the server's rover
-      mode directly, otherwise PTZ can render the notice but never trigger the
-      "your turn" cue when camera ownership changes.
-    */
+    // The legacy overlay still follows the server's turns mode; ownership
+    // and deadlines now come from the same turn object as the new HUD.
+
     if (!isTurnsMode) {
       lastTurnRef.current = { initialized: false, roverId: null, activeDriverId: null };
       /*

webui/src/components/HudOverlays/newgen/CornerPods/BottomLeftPod.jsx

@@ -6,33 +6,11 @@ import { useControlActions, useControlSelector } from '../../../../controls/inde
 import ControlHint from '../../../ControlHint/index.jsx';
 import { useSessionSelector } from '../../../../context/SessionContext.jsx';
 import useCanControlRover from '../../../../hooks/useCanControlRover.js';
-import KeyPill from '../../../vip/VipAudioUploadCard/KeyPill.jsx';
+import RoundControl from './RoundControl.jsx';
+import PeripheralPod from './PeripheralPod.jsx';
 import HornSettingsExpansion from './HornSettingsExpansion.jsx';
-import CornerPodToggle from './CornerPodToggle.jsx';
 import usePodVisibility from './usePodVisibility.js';
 
-function RoundControl({ label, icon, keyLabel, active, tone, disabled = false, onClick, onPointerDown, onPointerUp, large = false, className = '' }) {
-  const ControlIcon = icon;
-  const toneClass = tone === 'horn'
-    ? active ? 'border-fuchsia-300/70 bg-fuchsia-700 text-fuchsia-50' : 'border-cyan-300/70 bg-cyan-900 text-cyan-50'
-    : active ? 'border-emerald-300/70 bg-emerald-800 text-emerald-50' : 'border-amber-300/70 bg-amber-900 text-amber-50';
-  return (
-    <button
-      type="button"
-      aria-label={label}
-      disabled={disabled}
-      onClick={onClick}
-      onPointerDown={onPointerDown}
-      onPointerUp={onPointerUp}
-      onPointerCancel={onPointerUp}
-      className={`flex shrink-0 select-none flex-col items-center justify-center gap-1 rounded-full border-2 ${toneClass} ${large ? 'h-20 w-20' : 'h-16 w-16'} disabled:cursor-not-allowed disabled:opacity-40 ${className}`}
-    >
-      <ControlIcon className={large ? 'text-xl' : 'text-base'} aria-hidden="true" />
-      <KeyPill label={keyLabel} />
-    </button>
-  );
-}
-
 export default function BottomLeftPod({ roverId }) {
   const [open, setOpen] = usePodVisibility('peripherals', true);
   const [hornSettingsOpen, setHornSettingsOpen] = usePodVisibility('hornSettings', false);
@@ -67,30 +45,25 @@ export default function BottomLeftPod({ roverId }) {
 
   return (
     <>
-      {open ? (
-        <div className="pointer-events-auto absolute bottom-0 left-0 z-20 h-40 w-40 rounded-tr-[4.25rem] bg-black/60">
-          {/*
-            The horn's center is the origin of an invisible 76px-radius arc. Headlight and laser
-            sit at -75 and -15 degrees on either side of that arc's diagonal midpoint. Their
-            sixty-degree separation leaves a visible gap between the small circles while keeping
-            both controls equally distant from the horn. These explicit positions are the
-            rendered result of that geometry, not unrelated visual nudges.
-          */}
-          {/* Physical rover actions become visibly and behaviorally unavailable
-              while another queued driver owns the turn. Pod/settings controls
-              remain interactive because they do not mutate rover hardware. */}
-          {hornDevice ? <RoundControl label="Horn" icon={FaBullhorn} keyLabel={<ControlHint actionId="hornHonk" />} active={hornActive} tone="horn" disabled={!canControl} large onPointerDown={startHornPointer} onPointerUp={stopHornPointer} className="absolute bottom-1 left-1" /> : null}
-          {headlight ? <RoundControl label="Headlight" icon={FaLightbulb} keyLabel={<ControlHint actionId="headlightToggle" />} active={headlightOn} disabled={!canControl} onClick={() => setHeadlight(!headlightOn)} className="absolute left-[1.979rem] top-[0.662rem]" /> : null}
-          {/* The room-light lock deliberately blocks laser activation because
-              the laser is only intended for use while the room is dark. This
-              mirrors the old desktop control's visible disabled state; turn
-              ownership remains the other independent control restriction. */}
-          {laser ? <RoundControl label="Laser" icon={FaCrosshairs} keyLabel={<ControlHint actionId="laserToggle" />} active={laserOn} disabled={!canControl || roomLightsLockedOn} onClick={() => setLaser(!laserOn)} className="absolute left-[5.338rem] top-[4.021rem]" /> : null}
-          <CornerPodToggle corner="bottom-left" expanded label="Hide rover controls" onClick={() => setOpen(false)} />
-        </div>
-      ) : (
-        <CornerPodToggle corner="bottom-left" expanded={false} label="Show rover controls" onClick={() => setOpen(true)} />
-      )}
+      <PeripheralPod open={open} onOpenChange={setOpen} label="rover controls">
+        {/*
+          The horn's center is the origin of an invisible 76px-radius arc. Headlight and laser
+          sit at -75 and -15 degrees on either side of that arc's diagonal midpoint. Their
+          sixty-degree separation leaves a visible gap between the small circles while keeping
+          both controls equally distant from the horn. These explicit positions are the
+          rendered result of that geometry, not unrelated visual nudges.
+        */}
+        {/* Physical rover actions become visibly and behaviorally unavailable
+            while another queued driver owns the turn. Pod/settings controls
+            remain interactive because they do not mutate rover hardware. */}
+        {hornDevice ? <RoundControl label="Horn" icon={FaBullhorn} keyLabel={<ControlHint actionId="hornHonk" />} active={hornActive} tone="horn" disabled={!canControl} large onPointerDown={startHornPointer} onPointerUp={stopHornPointer} className="absolute bottom-1 left-1" /> : null}
+        {headlight ? <RoundControl label="Headlight" icon={FaLightbulb} keyLabel={<ControlHint actionId="headlightToggle" />} active={headlightOn} disabled={!canControl} onClick={() => setHeadlight(!headlightOn)} className="absolute left-[1.979rem] top-[0.662rem]" /> : null}
+        {/* The room-light lock deliberately blocks laser activation because
+            the laser is only intended for use while the room is dark. This
+            mirrors the old desktop control's visible disabled state; turn
+            ownership remains the other independent control restriction. */}
+        {laser ? <RoundControl label="Laser" icon={FaCrosshairs} keyLabel={<ControlHint actionId="laserToggle" />} active={laserOn} disabled={!canControl || roomLightsLockedOn} onClick={() => setLaser(!laserOn)} className="absolute left-[5.338rem] top-[4.021rem]" /> : null}
+      </PeripheralPod>
       {hornDevice ? <HornSettingsExpansion open={hornSettingsOpen} onOpenChange={setHornSettingsOpen} /> : null}
     </>
   );

webui/src/components/HudOverlays/newgen/CornerPods/BottomRightPod.jsx

@@ -5,7 +5,7 @@ import { FaVideo } from 'react-icons/fa';
 import { useControlActions, useControlSelector } from '../../../../controls/index.js';
 import ControlHint from '../../../ControlHint/index.jsx';
 import useCanControlRover from '../../../../hooks/useCanControlRover.js';
-import { useDriverLayout } from '../../../../layouts/driver/DriverLayoutContext.jsx';
+import { useLayout } from '../../../../layouts/LayoutContext.jsx';
 import KeyPill from '../../../vip/VipAudioUploadCard/KeyPill.jsx';
 import ChatExpansion from './ChatExpansion.jsx';
 import CornerPodToggle from './CornerPodToggle.jsx';
@@ -28,7 +28,7 @@ function pointOnArc(fraction) {
 }
 
 export default function BottomRightPod({ roverId }) {
-  const layout = useDriverLayout();
+  const layout = useLayout();
   const [open, setOpen] = usePodVisibility('camera', true);
   const camera = useControlSelector((control) => control.state.camera);
   const dockAssistActive = useControlSelector((control) => Boolean(control.state.manualDockAssist?.active));

webui/src/components/HudOverlays/newgen/CornerPods/PeripheralPod.jsx

@@ -0,0 +1,12 @@
+import CornerPodToggle from './CornerPodToggle.jsx';
+
+export default function PeripheralPod({ open, onOpenChange, label, children, className = 'h-40 w-40' }) {
+  return open ? (
+    <div className={`pointer-events-auto absolute bottom-0 left-0 z-20 rounded-tr-[4.25rem] bg-black/60 ${className}`}>
+      {children}
+      <CornerPodToggle corner="bottom-left" expanded label={`Hide ${label}`} onClick={() => onOpenChange(false)} />
+    </div>
+  ) : (
+    <CornerPodToggle corner="bottom-left" expanded={false} label={`Show ${label}`} onClick={() => onOpenChange(true)} />
+  );
+}

webui/src/components/HudOverlays/newgen/CornerPods/RoundControl.jsx

@@ -0,0 +1,25 @@
+import KeyPill from '../../../vip/VipAudioUploadCard/KeyPill.jsx';
+
+export default function RoundControl({ label, icon, keyLabel, active, tone, disabled = false, onClick, onPointerDown, onPointerUp, large = false, className = '', value = null }) {
+  const ControlIcon = icon;
+  const toneClass = tone === 'horn'
+    ? active ? 'border-fuchsia-300/70 bg-fuchsia-700 text-fuchsia-50' : 'border-cyan-300/70 bg-cyan-900 text-cyan-50'
+    : active ? 'border-emerald-300/70 bg-emerald-800 text-emerald-50' : 'border-amber-300/70 bg-amber-900 text-amber-50';
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      disabled={disabled}
+      onClick={onClick}
+      onPointerDown={onPointerDown}
+      onPointerUp={onPointerUp}
+      onPointerCancel={onPointerUp}
+      className={`flex shrink-0 select-none flex-col items-center justify-center gap-1 rounded-full border-2 ${toneClass} ${large ? 'h-20 w-20' : 'h-16 w-16'} disabled:cursor-not-allowed disabled:opacity-40 ${className}`}
+    >
+      <ControlIcon className={large ? 'text-xl' : 'text-base'} aria-hidden="true" />
+      {value != null ? <span className="text-xs font-semibold leading-none">{value}</span> : null}
+      <KeyPill label={keyLabel} />
+    </button>
+  );
+}
+

webui/src/components/HudOverlays/newgen/CornerPods/TopLeftPod.jsx

@@ -1,40 +1,28 @@
 // Top-left Corner Pod
-// Purpose: Shows the user's current-turn or queue-wait countdown and the rover identity expansion.
+// Purpose: Renders the caller's turn-display object without knowing its operating mode.
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useControlSelector } from '../../../../controls/index.js';
-import { useSessionSelector } from '../../../../context/SessionContext.jsx';
 import { useSharedClock } from '../../../../hooks/useSharedClock.js';
 import RoverLabel from '../../../RoverLabel/index.jsx';
 import CornerPodToggle from './CornerPodToggle.jsx';
 import ExpansionPanel from './ExpansionPanel.jsx';
 import usePodVisibility from './usePodVisibility.js';
 
-export default function TopLeftPod({ roverId }) {
+export default function TopLeftPod({ turns, compact = false }) {
   const [timerOpen, setTimerOpen] = usePodVisibility('turnTimer', true);
   const [nameOpen, setNameOpen] = usePodVisibility('roverName', true);
-  const mode = useSessionSelector((state) => state.session?.mode || null);
-  const socketId = useSessionSelector((state) => state.session?.socketId || null);
-  const turnInfo = useSessionSelector((state) => state.session?.turnQueues?.[roverId] || null);
-  const activeDriverId = useSessionSelector((state) => state.session?.activeDrivers?.[roverId] || null);
   const lastControlIntentAt = useControlSelector((control) => control.state.lastControlIntentAt);
-  const deadline = turnInfo?.deadline || null;
-  const idleDeadline = turnInfo?.idleDeadline || null;
-  const queue = turnInfo?.queue || [];
-  // Direct ownership is published independently from the detailed queue and is
-  // therefore the reliable initial-load/reconnect source for the current turn.
-  const currentDriverId = activeDriverId || turnInfo?.current || null;
-  const currentIndex = currentDriverId ? queue.indexOf(currentDriverId) : -1;
-  const userIndex = socketId ? queue.indexOf(socketId) : -1;
-  const turnActive = mode === 'turns' && queue.length > 1 && currentIndex >= 0 && userIndex >= 0;
+  const { target, labels, enabled: turnActive, queueLength, turnsAhead, ownsControl: isCurrentTurn } = turns;
+  const deadline = turns.deadline;
+  const idleDeadline = turns.idleDeadline;
+  const durationSeconds = turns.durationMs / 1000;
   const hasTurnDeadline = Boolean(turnActive && deadline);
   const now = useSharedClock(1000, hasTurnDeadline);
   const currentTurnSeconds = hasTurnDeadline ? Math.max(0, Math.ceil((deadline - now) / 1000)) : null;
   const idleSkipSeconds = idleDeadline ? Math.max(0, Math.ceil((idleDeadline - now) / 1000)) : null;
-  const turnsAhead = turnActive ? (userIndex - currentIndex + queue.length) % queue.length : null;
   const seconds = currentTurnSeconds == null || turnsAhead == null
     ? null
-    : currentTurnSeconds + Math.max(0, turnsAhead - 1) * 60;
-  const isCurrentTurn = turnsAhead === 0;
+    : currentTurnSeconds + Math.max(0, turnsAhead - 1) * durationSeconds;
   const isWaitingForTurn = turnActive && !isCurrentTurn;
   const [showTurnCue, setShowTurnCue] = useState(false);
   const [turnCueStartedAt, setTurnCueStartedAt] = useState(null);
@@ -81,25 +69,20 @@ export default function TopLeftPod({ roverId }) {
   }, [lastControlIntentAt, showTurnCue, turnCueStartedAt]);
   const gaugePercent = useMemo(() => {
     if (seconds == null) return 0;
-    /*
-      The server's rover turns are sixty seconds long. Waiting users need one complete
-      turn added for each driver between the current driver and themselves. A complete
-      queue rotation is a stable scale across handoffs, so the ring drains continuously
-      instead of jumping back to full when the current driver changes.
-    */
-    const rotationSeconds = Math.max(60, queue.length * 60);
+    // Scale waiting time by this target's actual turn duration. PTZ and rover
+    // turns have different lengths, but use the same presentation.
+    const rotationSeconds = Math.max(durationSeconds, queueLength * durationSeconds);
     return Math.max(0, Math.min(1, seconds / rotationSeconds));
-  }, [queue.length, seconds]);
+  }, [durationSeconds, queueLength, seconds]);
   const visibleGaugePercent = showTurnCue && idleSkipSeconds != null
-    // The server's initial inactivity grace is seven seconds. Mirroring that known lifecycle
-    // makes the enlarged ring itself reinforce the prominent skip countdown in the center.
-    ? Math.max(0, Math.min(1, idleSkipSeconds / 7))
+    // The caller supplies its inactivity grace alongside the idle deadline.
+    ? Math.max(0, Math.min(1, idleSkipSeconds / (turns.idleGraceMs / 1000)))
     : gaugePercent;
   const showTimer = Boolean(turnActive && timerOpen);
   const showLargeTimer = isWaitingForTurn || showTurnCue;
   const timerLabel = seconds == null
     // Ownership should remain visible while the detailed deadline is in flight.
-    ? isCurrentTurn ? 'Your turn' : 'Waiting'
+    ? isCurrentTurn ? labels.activeTimer : labels.waitingTimer
     : seconds >= 60
       ? `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`
       : `${seconds}s`;
@@ -113,8 +96,8 @@ export default function TopLeftPod({ roverId }) {
               // The waiting/handoff state replaces the old full-screen turn cue.
               // It must be opaque and above every other in-video HUD surface so
               // sensor graphics, chat, and docking controls cannot muddy the text.
-              ? 'h-102 w-102 rounded-br-[12.75rem] bg-black'
-              : 'h-34 w-34 rounded-br-[4.25rem] bg-black/60'
+              ? compact ? 'h-[min(12rem,45vw)] w-[min(12rem,45vw)] rounded-br-[6rem] bg-black' : 'h-102 w-102 rounded-br-[12.75rem] bg-black'
+              : compact ? 'h-24 w-24 rounded-br-[3rem] bg-black/60' : 'h-34 w-34 rounded-br-[4.25rem] bg-black/60'
           }`}
         >
           {/* The SVG fills the shell. Its circle geometry supplies the same slim visible inset
@@ -129,31 +112,31 @@ export default function TopLeftPod({ roverId }) {
                 fixed-size so it never becomes a giant obstruction over the video. */}
             {showLargeTimer ? (
               <>
-                <span className={`mb-2 text-[1.75rem] font-bold leading-tight transition-colors duration-300 ${showTurnCue ? 'text-amber-200' : 'text-sky-100'}`}>
-                  {showTurnCue ? 'It’s your turn!' : 'Someone else is driving'}
+                <span className={`${compact ? 'mb-1 text-sm' : 'mb-2 text-[1.75rem]'} font-bold leading-tight transition-colors duration-300 ${showTurnCue ? 'text-amber-200' : 'text-sky-100'}`}>
+                  {showTurnCue ? labels.handoff : labels.waiting}
                 </span>
-                <strong className="text-[3.375rem] leading-none">
+                <strong className={`${compact ? "text-2xl" : "text-[3.375rem]"} leading-none`}>
                   {showTurnCue && idleSkipSeconds != null ? `${idleSkipSeconds}s` : timerLabel}
                 </strong>
-                <span className={`mt-2 text-[1rem] font-semibold leading-tight ${showTurnCue ? 'text-amber-200' : 'text-sky-200'}`}>
+                <span className={`${compact ? 'mt-1 text-xs' : 'mt-2 text-[1rem]'} font-semibold leading-tight ${showTurnCue ? 'text-amber-200' : 'text-sky-200'}`}>
                   {showTurnCue
                     ? idleSkipSeconds != null
-                      ? 'Start driving or your turn will be skipped'
-                      : 'You’re driving'
-                    : 'until your turn'}
+                      ? labels.idleWarning
+                      : labels.active
+                    : labels.untilTurn}
                 </span>
               </>
             ) : (
               <>
                 <strong className="text-lg leading-none">{timerLabel}</strong>
-                {seconds != null ? <span className="mt-1 text-[0.6rem] font-semibold text-sky-200">left</span> : null}
+                {seconds != null ? <span className="mt-1 text-[0.6rem] font-semibold text-sky-200">{labels.timeRemaining}</span> : null}
               </>
             )}
           </span>
-          <CornerPodToggle corner="top-left" expanded label="Hide turn timer" onClick={() => setTimerOpen(false)} />
+          <CornerPodToggle corner="top-left" expanded label={labels.hideTimer} onClick={() => setTimerOpen(false)} />
         </div>
       ) : turnActive ? (
-        <CornerPodToggle corner="top-left" expanded={false} label="Show turn timer" onClick={() => setTimerOpen(true)} />
+        <CornerPodToggle corner="top-left" expanded={false} label={labels.showTimer} onClick={() => setTimerOpen(true)} />
       ) : null}
 
       {/* The rover name is an independent edge expansion. Its visibility control lives in
@@ -166,10 +149,10 @@ export default function TopLeftPod({ roverId }) {
         panelClassName={`flex h-11 min-w-max items-center gap-2 bg-black/60 px-2 pt-3 ${showTimer ? '' : 'rounded-br-xl'}`}
         openDirection="down"
         closeDirection="up"
-        openLabel="Show rover name"
-        closeLabel="Hide rover name"
+        openLabel={labels.showName}
+        closeLabel={labels.hideName}
       >
-          <RoverLabel roverId={roverId} fallback={roverId} className="px-2 py-1 text-base" />
+          <RoverLabel name={target.name} color={target.color} fallback={target.fallback} className="px-2 py-1 text-base" />
       </ExpansionPanel>
     </div>
   );

webui/src/components/HudOverlays/newgen/CornerPods/index.jsx

@@ -1,19 +1,22 @@
 // New Drive Corner Pods
 // Purpose: Composes the four independently owned corner controls around the shared video stage.
 import TopLeftPod from './TopLeftPod.jsx';
+import { useSessionSelector } from '../../../../context/SessionContext.jsx';
 import TopRightPod from './TopRightPod.jsx';
 import BottomLeftPod from './BottomLeftPod.jsx';
 import BottomRightPod from './BottomRightPod.jsx';
 import AccessoriesExpansion from './AccessoriesExpansion.jsx';
-import { useDriverLayout } from '../../../../layouts/driver/DriverLayoutContext.jsx';
+import { useLayout } from '../../../../layouts/LayoutContext.jsx';
 
 export default function CornerPods({ roverId }) {
-  const layout = useDriverLayout();
+  const layout = useLayout();
+  const turns = useSessionSelector((state) => state.session?.roster
+    ?.find((rover) => String(rover.id) === String(roverId))?.turn);
   const showPhysicalControlPods = layout === 'desktop';
 
   return (
     <>
-      <TopLeftPod roverId={roverId} />
+      {turns ? <TopLeftPod turns={turns} /> : null}
       <TopRightPod roverId={roverId} />
       {/* The mobile layouts already provide large touch controls around the video.
           Omitting this pod avoids presenting duplicate horn, light, and laser actions. */}

webui/src/components/HudOverlays/newgen/DockingHud/index.jsx

@@ -11,7 +11,7 @@ import { dockTelemetryEqual, selectDockTelemetry } from '../../../../context/tel
 import { useManualDockAssist } from '../../../../features/manualDockAssist/useManualDockAssist.js';
 import { useSettingsNamespace } from '../../../../settings/index.js';
 import useCanControlRover from '../../../../hooks/useCanControlRover.js';
-import { useDriverLayout } from '../../../../layouts/driver/DriverLayoutContext.jsx';
+import { useLayout } from '../../../../layouts/LayoutContext.jsx';
 import { useSessionSelector } from '../../../../context/SessionContext.jsx';
 import KeyPill from '../../../vip/VipAudioUploadCard/KeyPill.jsx';
 import ExpansionPanel from '../CornerPods/ExpansionPanel.jsx';
@@ -250,7 +250,7 @@ function UndockTransitionGhost({ onFinish }) {
 }
 
 export default function DockingHud({ roverId }) {
-  const layout = useDriverLayout();
+  const layout = useLayout();
   const actions = useControlActions();
   const dockTelemetry = useTelemetrySelector(roverId, selectDockTelemetry, dockTelemetryEqual);
   // This replaces ManualDockAssistOverlay as the current HUD's one lifecycle owner. It preserves the

webui/src/components/InterInstancePanel/index.jsx

@@ -170,8 +170,6 @@ export function ExternalInstancesCompact({ onBrowse = null }) {
             key={remote.url}
             title={remote.instance?.name || remote.url}
             roster={remote.roster}
-            turnQueues={remote.turnQueues}
-            users={remote.users}
             externalInstance={remote}
             disabledOverlay={getRemoteAvailability(remote).blocked ? getRemoteAvailability(remote).overlay : ''}
           />
@@ -221,8 +219,6 @@ function InterInstanceCards({ instances, centered = false, singleColumn = false
               <RemoteMediaStrip remote={remote} />
               <RoverQueuesPanel
                 roster={remote.roster}
-                turnQueues={remote.turnQueues}
-                users={remote.users}
                 externalInstance={remote}
                 disabledOverlay={getRemoteAvailability(remote).blocked ? getRemoteAvailability(remote).overlay : ''}
               />

webui/src/components/NewDriveVideo/index.jsx

@@ -11,7 +11,7 @@ import BottomSensorHud from '../HudOverlays/newgen/BottomSensorHud/index.jsx';
 import { useSessionSelector } from '../../context/SessionContext.jsx';
 import { useControlSelector } from '../../controls/index.js';
 import { useDriverVideoModePolicy } from '../../hooks/useDriverVideoModePolicy.js';
-import { useDriverLayout } from '../../layouts/driver/DriverLayoutContext.jsx';
+import { useLayout } from '../../layouts/LayoutContext.jsx';
 import EmptyDriverVideoNotice from '../DriverVideo/EmptyDriverVideoNotice.jsx';
 
 // Mobile keeps the same HUD composition and coordinate system as desktop, but its
@@ -21,7 +21,7 @@ import EmptyDriverVideoNotice from '../DriverVideo/EmptyDriverVideoNotice.jsx';
 const MOBILE_HUD_SCALE = 0.68;
 
 export default function NewDriveVideo() {
-  const layout = useDriverLayout();
+  const layout = useLayout();
   const mobileHud = layout !== 'desktop';
   const roverId = useSessionSelector((state) => state.session?.assignment?.roverId ?? null);
   const videoMode = useDriverVideoModePolicy(roverId);

webui/src/components/OperatingModeRouteSync/index.jsx

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useSessionActions } from '../../context/SessionContext.jsx';
+
+export default function OperatingModeRouteSync() {
+  const { pathname } = useLocation();
+  const previousPath = useRef(pathname);
+  const { setOperatingMode, pushAlert } = useSessionActions();
+
+  useEffect(() => {
+    const leavingPtz = previousPath.current === '/ptz' && pathname !== '/ptz';
+    previousPath.current = pathname;
+    if (!leavingPtz) return;
+    // Observe actual navigation rather than component cleanup, which also runs
+    // during Strict Mode remounts. Entry remains gated by the PTZ request action.
+    setOperatingMode('rover').catch((err) => {
+      pushAlert({ title: 'Operating mode', message: err.message, color: '#f59e0b' });
+    });
+  }, [pathname, pushAlert, setOperatingMode]);
+
+  return null;
+}

webui/src/components/PtzCamera/index.jsx

@@ -1,32 +1,13 @@
-// PTZ Camera UI
-// Purpose: Integrates the single PTZ camera into the main rover UI flow as a
-// queueable controllable target instead of a VIP-panel card.
-// Scope: Owns the driver-page PTZ entry card and the dedicated PTZ route
-// composition; PTZ command authority, queue ownership, and stream authorization
-// remain server-owned.
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+// Driver-page entry card; PTZ route lifecycle belongs to the PTZ page.
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import CardFrame from '../CardFrame/index.jsx';
-import ChatPanel from '../ChatPanel/index.jsx';
-import ControlPadPanel from '../MobileControls/ControlPadPanel.jsx';
-import GPIOToggleControl from '../GPIOToggleControl/index.jsx';
-import HomeAssistantControls from '../HomeAssistantControls/index.jsx';
-import PtzLiveVideo, { PTZ_CAMERA_ID } from '../PtzLiveVideo/index.jsx';
-import ReplaySourcesPanel from '../ReplaySourcesPanel/index.jsx';
-import QueueTargetRow, { QueueUserChips } from '../QueueTargetRow/index.jsx';
-import TurnsOverlay from '../HudOverlays/TurnsOverlay/index.jsx';
-import KeyPill from '../vip/VipAudioUploadCard/KeyPill.jsx';
-import { useControlActions } from '../../controls/index.js';
-import ControlHint from '../ControlHint/index.jsx';
+import QueueTargetRow from '../QueueTargetRow/index.jsx';
+import { PTZ_CAMERA_ID } from '../PtzLiveVideo/index.jsx';
 import { useSessionActions, useSessionSelector } from '../../context/SessionContext.jsx';
-import { usePtzCameraSnapshots } from '../../hooks/usePtzCameraSnapshot.js';
 import { useSharedClock } from '../../hooks/useSharedClock.js';
 import { isFeatureEnabled } from '../../lib/features.js';
-import { useSettingsNamespace } from '../../settings/index.js';
-import { DEFAULT_PAGE_THEME_KEY, usePageThemeClass } from '../../themes/index.js';
-import { triggerTouchHaptic } from '../../lib/touchHaptics.js';
-
-const PTZ_DEFAULT_COLOR = '#38bdf8';
+const PTZ_DEFAULT_COLOR = '#387bf8';
 
 function formatRemaining(deadline, now) {
   const remaining = Math.max(0, Math.ceil((Number(deadline || 0) - now) / 1000));
@@ -36,840 +17,17 @@ function formatRemaining(deadline, now) {
   return `${minutes}:${String(seconds).padStart(2, '0')}`;
 }
 
-function isSpotlightOn(light = {}) {
-  if (typeof light?.on === 'boolean') return light.on;
-  const raw = light?.state;
-  if (typeof raw === 'string') {
-    const normalized = raw.trim().toLowerCase();
-    return !['', '0', 'off', 'false'].includes(normalized);
-  }
-  return Boolean(Number(raw));
-}
-
-function normalizeIrMode(mode) {
-  const normalized = String(mode || '').trim().toLowerCase();
-  if (normalized === 'on') return 'On';
-  if (normalized === 'off') return 'Off';
-  return 'Auto';
-}
-
-function nextIrMode(currentMode) {
-  const current = normalizeIrMode(currentMode);
-  if (current === 'Auto') return 'On';
-  if (current === 'On') return 'Off';
-  return 'Auto';
-}
-
-function normalizePtzQueue(ptz = null) {
-  /*
-    The PTZ service exposes the current operator separately from the waiting
-    queue, while the rover queue row expects one ordered queue plus a current id.
-    Normalizing once keeps every PTZ surface consistent with the shared queue
-    renderer without making that renderer understand PTZ service internals.
-  */
-  const currentId = ptz?.operatorSocketId || null;
-  const waiting = Array.isArray(ptz?.queue)
-    ? ptz.queue.map((entry) => entry?.socketId || entry).filter(Boolean)
-    : [];
-  const queue = currentId ? [currentId, ...waiting.filter((id) => id !== currentId)] : waiting;
-  const nextId = currentId ? waiting[0] || null : queue[0] || null;
-  return { queue, currentId, nextId };
-}
-
-function usePtzQueueLookup(ptz = null) {
-  const users = useSessionSelector((state) => state.session?.users ?? []);
-  return useCallback(
-    (socketId) => {
-      const fromUsers = users.find((entry) => entry.socketId === socketId);
-      if (fromUsers) return fromUsers;
-      if (ptz?.operatorSocketId === socketId) {
-        return { socketId, nickname: ptz?.operatorLabel || null, role: null };
-      }
-      const fromQueue = Array.isArray(ptz?.queue)
-        ? ptz.queue.find((entry) => (entry?.socketId || entry) === socketId)
-        : null;
-      return {
-        socketId,
-        nickname: fromQueue?.label || null,
-        role: null,
-      };
-    },
-    [ptz, users],
-  );
-}
-
-function PtzSnapshotPreview({ feed, label = 'PTZ Camera', className = 'h-full w-full' }) {
-  return (
-    <div className={`relative overflow-hidden bg-black ${className}`}>
-      {feed?.objectUrl ? (
-        <img src={feed.objectUrl} alt={label} className="h-full w-full object-contain" />
-      ) : (
-        <div className="flex h-full w-full items-center justify-center text-xs text-slate-400">Waiting for snapshot...</div>
-      )}
-      {/*
-        Snapshot mode should look like the regular rover video player: the
-        camera name belongs to the surrounding card/menu, while the media pane
-        only exposes stream health in the small top-left diagnostic overlay.
-      */}
-      <div className="pointer-events-none absolute left-1 top-1 z-20 font-medium text-slate-100 text-[0.65rem]">
-        <div className="flex flex-col gap-0.5 leading-none">
-          <span>Status: {feed?.error ? `Error: ${feed.error}` : feed?.status || 'connecting'}</span>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function PtzQueueSummary({ ptz, title = 'PTZ queue' }) {
-  const selfId = useSessionSelector((state) => state.session?.socketId || null);
-  const lookupUser = usePtzQueueLookup(ptz);
-  const { queue, currentId, nextId } = normalizePtzQueue(ptz);
-
-  return (
-    <CardFrame title={title} bodyClassName="space-y-0.5 p-1 text-sm">
-      <QueueUserChips
-        targetId={ptz?.id || PTZ_CAMERA_ID}
-        queue={queue}
-        currentId={currentId}
-        nextId={nextId}
-        selfId={selfId}
-        lookupUser={lookupUser}
-      />
-    </CardFrame>
-  );
-}
-
-function PtzLightingControls({ ptz, disabled = false }) {
-  const { ptzSpotlight, ptzIr } = useSessionActions();
-  const [busy, setBusy] = useState('');
-  const spotlightOn = isSpotlightOn(ptz?.light);
-  const irMode = normalizeIrMode(ptz?.ir?.state);
-
-  const toggleSpotlight = async (nextOn) => {
-    if (disabled) return;
-    setBusy('spotlight');
-    try {
-      await ptzSpotlight({ state: nextOn ? 1 : 0 });
-    } finally {
-      setBusy('');
-    }
-  };
-
-  const cycleIr = async () => {
-    if (disabled) return;
-    triggerTouchHaptic('button');
-    setBusy('ir');
-    try {
-      await ptzIr({ state: nextIrMode(irMode) });
-    } finally {
-      setBusy('');
-    }
-  };
-
-  return (
-    <div className="mobile-touch-control grid grid-cols-2 gap-0.5 text-sm">
-      <GPIOToggleControl
-        label="Spotlight"
-        on={spotlightOn}
-        disabled={disabled || busy === 'spotlight'}
-        onToggle={toggleSpotlight}
-        heightClass="min-h-14"
-      />
-      <button
-        type="button"
-        className="mobile-touch-control flex min-h-14 flex-col items-center justify-center gap-0.5 rounded-xl border-2 border-cyan-300/70 bg-cyan-900 px-1 py-0.75 text-center text-cyan-50 disabled:opacity-50"
-        disabled={disabled || busy === 'ir'}
-        onClick={cycleIr}
-      >
-        <span className="text-sm font-semibold">Infrared</span>
-        <span className="rounded-sm bg-cyan-300 px-1 py-0.5 text-[0.7rem] font-semibold text-cyan-950">{irMode}</span>
-      </button>
-    </div>
-  );
-}
-
-function PtzMobileZoomButtons({ disabled = false }) {
-  const { setCameraAxisIntent } = useControlActions();
-
-  const stopZoom = useCallback(() => {
-    /*
-      Zero only releases the zoom axis. The PTZ adapter combines it with any
-      pan/tilt direction still held on the movement pad, so lifting one finger
-      cannot erase the other finger's intent.
-    */
-    setCameraAxisIntent(0);
-  }, [setCameraAxisIntent]);
-
-  const startZoom = useCallback(
-    (direction) => (event) => {
-      /*
-        Publish held state once. The adapter owns the single motion heartbeat,
-        so this button no longer creates a second interval whose queued callback
-        could run after pointerup and restart zoom.
-      */
-      event.preventDefault();
-      if (disabled) return;
-      triggerTouchHaptic('button');
-      event.currentTarget.setPointerCapture?.(event.pointerId);
-      setCameraAxisIntent(direction);
-    },
-    [disabled, setCameraAxisIntent],
-  );
-  const stopFromPointer = useCallback(
-    (event) => {
-      event?.preventDefault?.();
-      if (disabled) return;
-      stopZoom();
-    },
-    [disabled, stopZoom],
-  );
-
-  useEffect(
-    () => () => {
-      /*
-        A touch surface can unmount during orientation changes or fullscreen
-        close while a pointer is still down. Explicitly clear zoom here because
-        an unmounted DOM node cannot deliver its pointerup/pointercancel event.
-      */
-      setCameraAxisIntent(0);
-    },
-    [setCameraAxisIntent],
-  );
-
-  return (
-    <div className="mobile-touch-control grid grid-cols-2 gap-0.5 text-sm">
-      <button
-        type="button"
-        className="mobile-touch-control button-dark min-h-10 text-xs disabled:opacity-50"
-        disabled={disabled}
-        onPointerDown={startZoom(-1)}
-        onPointerUp={stopFromPointer}
-        onPointerCancel={stopFromPointer}
-        onLostPointerCapture={stopFromPointer}
-        onContextMenu={(event) => event.preventDefault()}
-      >
-        Zoom out
-      </button>
-      <button
-        type="button"
-        className="mobile-touch-control button-dark min-h-10 text-xs disabled:opacity-50"
-        disabled={disabled}
-        onPointerDown={startZoom(1)}
-        onPointerUp={stopFromPointer}
-        onPointerCancel={stopFromPointer}
-        onLostPointerCapture={stopFromPointer}
-        onContextMenu={(event) => event.preventDefault()}
-      >
-        Zoom in
-      </button>
-    </div>
-  );
-}
-
-function PtzMobileControlsPanel({ ptz, disabled = false }) {
-  return (
-    <div className="mobile-touch-control space-y-0.5">
-      <PtzMobileZoomButtons disabled={disabled} />
-      <div className="mobile-touch-control h-44 min-h-0">
-        {/*
-          Reuse the rover control pad so touch intent still enters the normal
-          control system. The PTZ adapter translates that same drive vector into
-          pan/tilt commands only while this user is the PTZ operator.
-        */}
-        <ControlPadPanel compact disabled={disabled} />
-      </div>
-      <PtzLightingControls ptz={ptz} disabled={disabled} />
-    </div>
-  );
-}
-
-function PtzControlReference() {
-  const rows = [
-    ['Tilt up', 'driveForward'],
-    ['Tilt down', 'driveBackward'],
-    ['Pan left', 'driveLeft'],
-    ['Pan right', 'driveRight'],
-    ['Zoom in', 'cameraUp'],
-    ['Zoom out', 'cameraDown'],
-    ['Spotlight', 'headlightToggle'],
-    ['Infrared mode', 'laserToggle'],
-  ];
-
-  return (
-    <CardFrame title="Controls" bodyClassName="space-y-0.5 p-1 text-xs">
-      {rows.map(([label, actionId]) => (
-        <div key={label} className="surface flex items-center justify-between gap-1">
-          <span className="text-slate-400">{label}</span>
-          <KeyPill label={<ControlHint actionId={actionId} />} />
-        </div>
-      ))}
-    </CardFrame>
-  );
-}
-
-function PtzPresetPanel({ ptz }) {
-  const role = useSessionSelector((state) => state.session?.role || null);
-  const {
-    ptzListPresets,
-    ptzGotoPreset,
-    ptzCreatePreset,
-    ptzRemovePreset,
-  } = useSessionActions();
-  const [name, setName] = useState('');
-  const [busy, setBusy] = useState('');
-  const presets = Array.isArray(ptz?.presets) ? ptz.presets : [];
-  const isPresetAdmin = role === 'admin' || role === 'lockdown';
-  const canCreatePreset = Boolean(ptz?.canUse);
-  const canMoveToPreset = Boolean(ptz?.isOperator);
-
-  const refreshPresets = async () => {
-    if (busy) return;
-    setBusy('refresh');
-    try {
-      /*
-        Presets live on the camera, not in browser state. A manual refresh gives
-        admins a simple recovery path if another admin or the camera's native
-        app changes preset storage while this UI is already open.
-      */
-      await ptzListPresets();
-    } catch (err) {
-      alert(err.message || 'Failed to refresh PTZ presets.');
-    } finally {
-      setBusy('');
-    }
-  };
-
-  const goToPreset = async (preset) => {
-    if (!canMoveToPreset || busy || !preset?.token) return;
-    setBusy(`goto:${preset.token}`);
-    try {
-      /*
-        Moving to a preset is a physical camera move, so the server still checks
-        that this browser owns the active PTZ turn before accepting the command.
-      */
-      await ptzGotoPreset({ token: preset.token });
-    } catch (err) {
-      alert(err.message || 'Failed to move to PTZ preset.');
-    } finally {
-      setBusy('');
-    }
-  };
-
-  const createPreset = async (event) => {
-    event.preventDefault();
-    const trimmed = name.trim();
-    if (!canCreatePreset || busy || !trimmed) return;
-    setBusy('create');
-    try {
-      /*
-        ONVIF setPreset stores the camera's current physical position. The UI
-        only sends the user's label; the server supplies the active profile
-        token so browser code does not need camera profile internals, and the
-        server still enforces the PTZ feature gate for raw socket callers.
-      */
-      await ptzCreatePreset({ name: trimmed });
-      setName('');
-    } catch (err) {
-      alert(err.message || 'Failed to create PTZ preset.');
-    } finally {
-      setBusy('');
-    }
-  };
-
-  const removePreset = async (preset) => {
-    if (!isPresetAdmin || busy || !preset?.token) return;
-    const confirmed = window.confirm(`Remove preset "${preset.name}"?`);
-    if (!confirmed) return;
-    setBusy(`remove:${preset.token}`);
-    try {
-      /*
-        The token is the camera's durable preset identifier. Names are only UI
-        labels and may not be unique, so deletion always targets the token.
-      */
-      await ptzRemovePreset({ token: preset.token });
-    } catch (err) {
-      alert(err.message || 'Failed to remove PTZ preset.');
-    } finally {
-      setBusy('');
-    }
-  };
-
-  return (
-    <CardFrame
-      title="Position presets"
-      fillHeight
-      actions={(
-        <button type="button" className="button-dark text-xs" disabled={Boolean(busy)} onClick={refreshPresets}>
-          Refresh
-        </button>
-      )}
-      bodyClassName="flex min-h-0 flex-col gap-1 p-1 text-xs"
-    >
-      {ptz?.presetsError ? (
-        <div className="rounded-sm border border-amber-500/50 bg-amber-950/40 p-1 text-amber-100">
-          {ptz.presetsError}
-        </div>
-      ) : null}
-      <div className="flex min-h-0 flex-1 flex-wrap content-start items-start gap-0.5 overflow-y-auto">
-        {/*
-          Presets should behave like a compact pile of actions, not a table.
-          flex-wrap lets each preset keep its natural button width and only
-          starts a new visual line when the current line runs out of room.
-        */}
-        {presets.length ? presets.map((preset) => {
-          const gotoBusy = busy === `goto:${preset.token}`;
-          const removeBusy = busy === `remove:${preset.token}`;
-          return (
-            <div key={preset.token} className="surface inline-flex max-w-full items-center gap-1">
-              <button
-                type="button"
-                className="button-dark min-w-0 max-w-40 truncate text-left text-xs disabled:opacity-50"
-                disabled={!canMoveToPreset || Boolean(busy)}
-                onClick={() => goToPreset(preset)}
-                title={canMoveToPreset ? `Move to ${preset.name}` : 'Your PTZ turn must be active'}
-              >
-                {gotoBusy ? 'Moving...' : preset.name}
-              </button>
-              {isPresetAdmin ? (
-                <button
-                  type="button"
-                  className="button-dark text-xs text-rose-200 disabled:opacity-50"
-                  disabled={Boolean(busy)}
-                  onClick={() => removePreset(preset)}
-                >
-                  {removeBusy ? 'Removing...' : 'Remove'}
-                </button>
-              ) : null}
-            </div>
-          );
-        }) : (
-          <div className="rounded-sm border border-slate-700 bg-black/30 p-2 text-center text-slate-400">
-            No presets saved.
-          </div>
-        )}
-      </div>
-      {canCreatePreset ? (
-        <form className="grid grid-cols-[minmax(0,1fr)_auto] gap-1" onSubmit={createPreset}>
-          <input
-            className="field-input min-w-0 text-xs"
-            value={name}
-            maxLength={60}
-            disabled={Boolean(busy)}
-            onChange={(event) => setName(event.target.value)}
-            placeholder="Preset name"
-          />
-          <button type="submit" className="button-dark text-xs" disabled={Boolean(busy) || !name.trim()}>
-            {busy === 'create' ? 'Saving...' : 'Save'}
-          </button>
-        </form>
-      ) : null}
-    </CardFrame>
-  );
-}
-
-function buildPtzTurnModel(ptz, selfId) {
-  const { queue, currentId, nextId } = normalizePtzQueue(ptz);
-  const isActive = Boolean(ptz?.isOperator);
-  const isQueued = Boolean(ptz?.queuedPosition);
-  return {
-    enabled: Boolean(ptz && (isActive || isQueued || currentId)),
-    targetId: ptz?.id || PTZ_CAMERA_ID,
-    activeId: currentId,
-    nextId,
-    isActive,
-    isNext: Boolean(selfId && nextId === selfId),
-    deadline: ptz?.deadline || null,
-    idleDeadline: null,
-    showNotTurnNotice: Boolean(!isActive && (isQueued || currentId || queue.length)),
-    showPreviewReason: false,
-  };
-}
-
-function PtzMediaPane({ ptz, open, framed = true }) {
-  const isOperator = Boolean(ptz?.isOperator);
-  const isParticipant = Boolean(isOperator || ptz?.queuedPosition);
-  const nonTurnSnapshotsActive = useSessionSelector(
-    (state) => Boolean(state.session?.bandwidthSavings?.nonTurnVideo?.snapshotsActive),
-  );
-  const selfId = useSessionSelector((state) => state.session?.socketId || null);
-  /*
-    PTZ has its own turn queue, so non-operators are the camera equivalent of a
-    non-active rover driver. The server enforces the same policy in
-    canRequestLiveVideo(); this branch only chooses the expected browser render
-    path and never unlocks movement controls.
-  */
-  /*
-    A direct /ptz load renders before its automatic queue claim is acknowledged.
-    Do not mount the live player during that short pre-claim window: its first
-    token request would correctly be rejected, and PtzLiveVideo intentionally
-    treats authorization rejection as a terminal snapshot fallback. Once the
-    session confirms queue/operator membership, mounting the player creates a
-    fresh authorized request without changing shared retry or server policy.
-  */
-  const shouldUseLiveVideo = isParticipant && (isOperator || !nonTurnSnapshotsActive);
-  const snapshotFeeds = usePtzCameraSnapshots([PTZ_CAMERA_ID], { enabled: open && !shouldUseLiveVideo });
-  const snapshot = snapshotFeeds[PTZ_CAMERA_ID] || null;
-  const turnModel = useMemo(() => buildPtzTurnModel(ptz, selfId), [ptz, selfId]);
-  const media = (
-    <>
-      {shouldUseLiveVideo ? (
-        <PtzLiveVideo enabled={open} startMuted={false} />
-      ) : (
-        <PtzSnapshotPreview feed={snapshot} label={ptz?.name || 'PTZ Camera'} />
-      )}
-      <TurnsOverlay turnModel={turnModel} />
-    </>
-  );
-
-  if (!framed) {
-    return <div className="relative h-full min-h-0 w-full overflow-hidden bg-black">{media}</div>;
-  }
-
-  return (
-    <div className="flex h-full min-h-0 w-full items-center justify-center overflow-hidden bg-black">
-      <div className="relative aspect-video max-h-full w-full max-w-full overflow-hidden bg-black">
-        {media}
-      </div>
-    </div>
-  );
-}
-
-function PtzDesktopFullscreen({ ptz, releasePending }) {
-  return (
-    <div className="grid h-full min-h-0 grid-rows-[minmax(0,1fr)_minmax(7rem,0.22fr)] gap-0.5 overflow-hidden p-0.5">
-      <div className="flex min-h-0 min-w-0 gap-0.5 overflow-hidden">
-        <main className="min-h-0 shrink-0 overflow-hidden bg-black" style={{ aspectRatio: '16 / 9' }}>
-          <PtzMediaPane ptz={ptz} open framed />
-        </main>
-        {/* Keep the sidebar itself transparent. Its child cards still own their dark surfaces,
-            while the shared PTZ page theme can show through the same compact gaps as the driver
-            layout instead of being covered by one solid sidebar rectangle. */}
-        <aside className="flex min-h-0 min-w-56 flex-1 flex-col gap-0.5 overflow-y-auto text-sm">
-          <PtzQueueSummary ptz={ptz} />
-          {ptz?.isOperator ? (
-            <PtzLightingControls ptz={ptz} />
-          ) : (
-            <CardFrame title="Controls" bodyClassName="p-1 text-xs text-slate-400">
-              Live PTZ controls unlock when your camera turn is active.
-            </CardFrame>
-          )}
-          <PtzControlReference />
-          <ReplaySourcesPanel panelId="ptz-controller-replay" defaultSelectedKey={`ptz:${PTZ_CAMERA_ID}`} />
-          {/*
-            Desktop keeps room lights as the final sidebar tool so camera
-            turn controls and replay remain above the less-frequent room-wide
-            actions. HomeAssistantControls owns its own feature and policy gate.
-          */}
-          <HomeAssistantControls />
-        </aside>
-      </div>
-      <div className="grid min-h-0 grid-cols-[minmax(0,1.6fr)_minmax(16rem,0.7fr)] gap-0.5 overflow-hidden">
-        <ChatPanel fillHeight title="Chat" allowSpectatorInput inputTarget="overlay" />
-        <PtzPresetPanel ptz={ptz} />
-      </div>
-      {releasePending ? (
-        <div className="pointer-events-none absolute bottom-1 right-1 rounded-sm bg-black/80 px-2 py-1 text-xs text-slate-200">
-          Closing...
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-function PtzMobileLandscape({ ptz, onClose, releasePending = false }) {
-  return (
-    <div className="flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto p-0.5">
-      {/*
-        Landscape intentionally retains one control column beside the video.
-        This is the established PTZ interaction and avoids forcing rover-style
-        left/right columns onto a camera that has a smaller control inventory.
-      */}
-      <section className="mobile-touch-control grid min-h-[calc(100dvh-0.25rem)] shrink-0 grid-cols-[minmax(0,1fr)_13rem] items-start gap-0.5">
-        {/*
-          The video keeps one viewport of height, but the grid row is allowed to
-          grow when the control column is taller. That makes the sidebar's tail
-          extend below the video instead of forcing it into a nested scroller.
-        */}
-        <div className="min-w-0 space-y-0.5">
-          <main className="relative h-[calc(100dvh-0.25rem)] min-h-0 overflow-hidden bg-black">
-            <button
-              type="button"
-              className="absolute left-1 top-1 z-50 rounded-sm border border-white/40 bg-black/80 px-2 py-1 text-xs font-semibold text-white shadow-sm disabled:opacity-50"
-              disabled={releasePending}
-              onClick={onClose}
-            >
-              Close
-            </button>
-            <PtzMediaPane ptz={ptz} open framed={false} />
-          </main>
-          {/*
-            The right control column is naturally taller than the viewport.
-            Placing room lights after the fixed-height video uses that left-
-            column space while the whole landscape page continues scrolling as
-            one surface.
-          */}
-          <HomeAssistantControls />
-        </div>
-        {/*
-          Do not put overflow scrolling on this column. The surrounding PTZ
-          landscape content is the single page scroller, so a swipe over either
-          the video area or these controls advances the same document flow.
-        */}
-        <aside className="min-h-0 space-y-0.5">
-          {/*
-            Landscape keeps all turn-critical controls in its one existing
-            sidebar. Queue position belongs first so the operator can confirm
-            control ownership before touching the camera, while replay follows
-            the lighting buttons because it is the next secondary action in
-            the same scroll column.
-          */}
-          <PtzQueueSummary ptz={ptz} />
-          <PtzMobileControlsPanel ptz={ptz} disabled={!ptz?.isOperator} />
-          <ReplaySourcesPanel
-            panelId="ptz-controller-replay-mobile-landscape"
-            defaultSelectedKey={`ptz:${PTZ_CAMERA_ID}`}
-          />
-        </aside>
-      </section>
-      <section className="grid gap-0.5 md:grid-cols-[minmax(0,1fr)_minmax(0,0.7fr)]">
-        <ChatPanel title="Chat" allowSpectatorInput inputTarget="overlay" />
-        <PtzPresetPanel ptz={ptz} />
-      </section>
-    </div>
-  );
-}
-
-function PtzMobilePortrait({ ptz, onClose, releasePending = false }) {
-  return (
-    <div className="flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto p-0.5">
-      <main className="relative aspect-video min-h-0 shrink-0 overflow-hidden bg-black">
-        <button
-          type="button"
-          className="absolute left-1 top-1 z-50 rounded-sm border border-white/40 bg-black/80 px-2 py-1 text-xs font-semibold text-white shadow-sm disabled:opacity-50"
-          disabled={releasePending}
-          onClick={onClose}
-        >
-          Close
-        </button>
-        <PtzMediaPane ptz={ptz} open framed={false} />
-      </main>
-      {/*
-        Portrait gives the video its full available width and places controls
-        below it. Reusing the landscape sidebar width here was the source of the
-        cramped portrait presentation, while the controls themselves remain the
-        same shared PTZ controls used in landscape.
-      */}
-      <section className="mobile-touch-control">
-        <PtzMobileControlsPanel ptz={ptz} disabled={!ptz?.isOperator} />
-      </section>
-      <section className="space-y-0.5">
-        {/*
-          Replay and presets are compact secondary actions, so portrait places
-          them in one equal-width row before the full-width queue and chat. The
-          explicit two-column grid keeps this arrangement local to portrait and
-          leaves the desktop and one-column landscape compositions unchanged.
-        */}
-        <div className="grid grid-cols-2 items-start gap-0.5">
-          <ReplaySourcesPanel
-            panelId="ptz-controller-replay-mobile-portrait"
-            defaultSelectedKey={`ptz:${PTZ_CAMERA_ID}`}
-          />
-          <PtzPresetPanel ptz={ptz} />
-        </div>
-        <PtzQueueSummary ptz={ptz} />
-        <ChatPanel title="Chat" allowSpectatorInput inputTarget="overlay" />
-        {/* Portrait keeps room lights immediately after chat as requested. */}
-        <HomeAssistantControls />
-      </section>
-    </div>
-  );
-}
-
-export function PtzControllerPage({ layout = 'desktop' }) {
-  const ptz = useSessionSelector((state) => state.session?.ptzCamera || null);
-  const featureEnabled = useSessionSelector((state) => isFeatureEnabled(state, 'ptzCamera'));
-  const isVerified = useSessionSelector((state) => Boolean(state.session?.isVerified));
-  const role = useSessionSelector((state) => state.session?.role || null);
-  const socketId = useSessionSelector((state) => state.session?.socketId || null);
-  const { ptzClaim, ptzRelease, pushAlert } = useSessionActions();
-  const { stopAllMotion } = useControlActions();
-  const navigate = useNavigate();
-  const [releasePending, setReleasePending] = useState(false);
-  const autoClaimSocketRef = useRef(null);
-  const routeExitReleaseTimerRef = useRef(null);
-  const participantRef = useRef(false);
-  const closingThroughButtonRef = useRef(false);
-  const { value: pageSettings } = useSettingsNamespace('page', {
-    backgroundTheme: DEFAULT_PAGE_THEME_KEY,
-  });
-  const isMobile = layout !== 'desktop';
-  const canUse = Boolean(ptz?.canUse || isVerified || role === 'admin' || role === 'lockdown');
-  const isParticipant = Boolean(ptz?.isOperator || ptz?.queuedPosition);
-  // PTZ is a separate route but shares the browser's page settings. Applying the catalog class to
-  // its body surface exposes the theme only through layout padding and card gaps; camera pixels,
-  // controls, and card interiors retain their purpose-built dark backgrounds.
-  const pageBackgroundClass = usePageThemeClass(pageSettings?.backgroundTheme);
-
-  useEffect(() => {
-    // Route-exit cleanup runs after the last render, so retain the latest
-    // server-confirmed membership without making the lifecycle effect resubscribe.
-    participantRef.current = isParticipant;
-  }, [isParticipant]);
-
-  useEffect(() => {
-    if (routeExitReleaseTimerRef.current) {
-      clearTimeout(routeExitReleaseTimerRef.current);
-      routeExitReleaseTimerRef.current = null;
-    }
-
-    return () => {
-      if (!participantRef.current || closingThroughButtonRef.current) return;
-      /*
-        Browser Back and route navigation unmount the PTZ page without invoking
-        its Close button. Defer release by one task so React Strict Mode's
-        development-only cleanup/remount cycle can cancel it in the next setup;
-        a real route exit has no replacement setup, so membership is released.
-
-        This is intentionally membership-gated. An admin release command can
-        revoke the current operator even when the admin is not that operator,
-        so an admin merely visiting/leaving a disabled or unjoined page must not
-        emit a release command.
-      */
-      routeExitReleaseTimerRef.current = setTimeout(() => {
-        routeExitReleaseTimerRef.current = null;
-        ptzRelease().catch(() => {});
-      }, 0);
-    };
-  }, [ptzRelease]);
-
-  useEffect(() => {
-    if (!featureEnabled || !ptz || !socketId || !canUse) return undefined;
-
-    if (ptz.isOperator || ptz.queuedPosition) {
-      /*
-        Navigation from the driver queue normally arrives with membership
-        already established. Mark this socket complete so later session syncs
-        cannot turn that normal route transition into another claim request.
-      */
-      autoClaimSocketRef.current = socketId;
-      return undefined;
-    }
-
-    if (autoClaimSocketRef.current === socketId) return undefined;
-    autoClaimSocketRef.current = socketId;
-    let active = true;
-
-    /*
-      A direct /ptz load still receives the ordinary user role first, which can
-      briefly assign a rover. Claiming through the existing server action is
-      deliberate: ptzCameraService releases that rover ownership before it
-      activates or queues this socket, keeping one authoritative transition.
-
-      The socket-keyed ref suppresses repeats caused by session updates and
-      React's development effect replay. The server claim is also idempotent for
-      an existing operator/queue member, which covers an acknowledgement racing
-      with a fresh public-state sync.
-    */
-    ptzClaim().catch((err) => {
-      if (!active) return;
-      pushAlert({
-        id: `ptz-auto-claim-${socketId}`,
-        title: 'PTZ camera',
-        message: err?.message || 'Unable to join the PTZ queue.',
-        color: '#f59e0b',
-        lifetimeMs: 6000,
-      });
-    });
-
-    return () => {
-      // Do not emit or update UI from a rejected request after this route has
-      // unmounted; the server still owns completion of any request in flight.
-      active = false;
-    };
-  }, [canUse, featureEnabled, ptz, ptzClaim, pushAlert, socketId]);
-
-  const releaseAndClose = useCallback(async () => {
-    if (releasePending) return;
-    setReleasePending(true);
-    closingThroughButtonRef.current = true;
-    try {
-      /*
-        Stop first so a held key/pointer cannot leave ONVIF continuous movement
-        running while the server removes this socket from the PTZ queue.
-      */
-      stopAllMotion?.();
-      if (ptz?.isOperator || ptz?.queuedPosition) {
-        await ptzRelease();
-      }
-      navigate('/');
-    } catch (err) {
-      // A rejected manual release leaves the route mounted, so route-exit
-      // cleanup must remain armed for a later Back/navigation attempt.
-      closingThroughButtonRef.current = false;
-      throw err;
-    } finally {
-      setReleasePending(false);
-    }
-  }, [navigate, ptz?.isOperator, ptz?.queuedPosition, ptzRelease, releasePending, stopAllMotion]);
-
-  if (!featureEnabled) {
-    return (
-      <main className={`flex min-h-dvh items-center justify-center p-2 text-slate-100 ${pageBackgroundClass}`}>
-        <CardFrame title="PTZ camera" bodyClassName="space-y-1 p-2 text-sm">
-          <p>The PTZ camera is not available.</p>
-          <button type="button" className="button-dark w-full" onClick={() => navigate('/')}>Return to driver page</button>
-        </CardFrame>
-      </main>
-    );
-  }
-
-  return (
-    <main className={`h-dvh w-full overflow-hidden text-slate-100 ${pageBackgroundClass}`}>
-      {/* The fullscreen CardFrame remains the structural shell. Painting its otherwise
-          transparent body is what lets every desktop and mobile PTZ composition share one
-          continuous pattern without threading theme props into each individual child panel. */}
-      <CardFrame
-        title={isMobile ? '' : ptz?.name || 'PTZ Camera'}
-        actions={isMobile ? null : (
-          <button type="button" className="button-dark text-xs" disabled={releasePending} onClick={releaseAndClose}>
-            Close
-          </button>
-        )}
-        hideHeader={isMobile}
-        fillHeight
-        clipOverflow={false}
-        className="h-dvh w-screen rounded-none border-0 bg-black!"
-        bodyClassName={`relative min-h-0 flex-1 ${pageBackgroundClass}`}
-      >
-        {isMobile ? (
-          layout === 'mobile-landscape' ? (
-            <PtzMobileLandscape ptz={ptz} onClose={releaseAndClose} releasePending={releasePending} />
-          ) : (
-            <PtzMobilePortrait ptz={ptz} onClose={releaseAndClose} releasePending={releasePending} />
-          )
-        ) : (
-          <PtzDesktopFullscreen ptz={ptz} releasePending={releasePending} />
-        )}
-      </CardFrame>
-    </main>
-  );
-}
-
 export default function PtzQueueCard() {
   const featureEnabled = useSessionSelector((state) => isFeatureEnabled(state, 'ptzCamera'));
   const ptz = useSessionSelector((state) => state.session?.ptzCamera || null);
-  const isVerified = useSessionSelector((state) => Boolean(state.session?.isVerified));
-  const role = useSessionSelector((state) => state.session?.role || null);
   const selfId = useSessionSelector((state) => state.session?.socketId || null);
-  const { ptzClaim, ptzRelease } = useSessionActions();
+  const { setOperatingMode } = useSessionActions();
   const navigate = useNavigate();
-  const lookupUser = usePtzQueueLookup(ptz);
-  const { queue, currentId, nextId } = normalizePtzQueue(ptz);
-  const now = useSharedClock(1000, Boolean(ptz?.deadline));
+  const now = useSharedClock(1000, Boolean(ptz?.turn?.deadline));
   const [pending, setPending] = useState(false);
-  const canUse = Boolean(ptz?.canUse || isVerified || role === 'admin' || role === 'lockdown');
-  const isParticipant = Boolean(ptz?.isOperator || ptz?.queuedPosition);
-  const timerLabel = ptz?.isOperator && ptz?.deadline ? `${formatRemaining(ptz.deadline, now)} left` : '';
+  const canUse = Boolean(ptz?.permissions?.canEnter);
+  const isParticipant = Boolean(ptz?.turn?.ownsControl || ptz?.turn?.turnsAhead);
+  const timerLabel = ptz?.turn?.ownsControl && ptz?.turn?.deadline ? `${formatRemaining(ptz.turn.deadline, now)} left` : '';
 
   if (!featureEnabled) return null;
 
@@ -881,13 +39,9 @@ export default function PtzQueueCard() {
     }
     setPending(true);
     try {
-      const response = await ptzClaim();
-      /*
-        The server is authoritative for whether the click became an active turn
-        or a queued wait. Open only after it confirms one of those states so a
-        dock-guard rejection does not strand the user in fullscreen.
-      */
-      if (response?.state?.isOperator || response?.state?.queuedPosition) {
+      const response = await setOperatingMode('ptz');
+      // Enter first; the page requests its initial turn after navigation.
+      if (response?.operatingMode === 'ptz') {
         navigate('/ptz');
       }
     } catch (err) {
@@ -901,7 +55,7 @@ export default function PtzQueueCard() {
     if (pending) return;
     setPending(true);
     try {
-      await ptzRelease();
+      await setOperatingMode('rover');
     } catch (err) {
       alert(err.message || 'Failed to leave PTZ camera.');
     } finally {
@@ -909,13 +63,7 @@ export default function PtzQueueCard() {
     }
   };
 
-  const actionLabel = pending
-    ? '...'
-    : ptz?.isOperator
-    ? 'Open'
-    : ptz?.queuedPosition
-    ? 'Open'
-    : 'request';
+  const actionLabel = pending ? '...' : isParticipant ? 'Open' : 'request';
 
   return (
     <CardFrame title={ptz?.name || 'PTZ camera'} bodyClassName="relative space-y-0.5 text-sm">
@@ -925,22 +73,14 @@ export default function PtzQueueCard() {
               id: ptz?.id || PTZ_CAMERA_ID,
               name: ptz?.name || 'PTZ Camera',
               color: ptz?.color || PTZ_DEFAULT_COLOR,
-              // description: ptz?.isOperator
-              //   ? 'Live camera turn active'
-              //   : ptz?.queuedPosition
-              //   ? `Queue position ${ptz.queuedPosition}`
-              //   : 'Pan, tilt, and zoom camera',
             }}
-            queue={queue}
-            currentId={currentId}
-            nextId={nextId}
+            turn={ptz?.turn}
             selfId={selfId}
-            lookupUser={lookupUser}
             canClick={canUse && !pending}
             pending={pending}
             buttonLabel={actionLabel}
-            batteryLabel={ptz?.isOperator ? 'LIVE' : ptz?.queuedPosition ? `#${ptz.queuedPosition}` : '--'}
-            batteryClassName={ptz?.isOperator ? 'text-emerald-300' : ptz?.queuedPosition ? 'text-sky-300' : 'text-slate-400'}
+            batteryLabel={ptz?.turn?.ownsControl ? 'LIVE' : ptz?.turn?.turnsAhead ? `#${ptz.turn.turnsAhead}` : '--'}
+            batteryClassName={ptz?.turn?.ownsControl ? 'text-emerald-300' : ptz?.turn?.turnsAhead ? 'text-sky-300' : 'text-slate-400'}
             timerLabel={timerLabel}
             onRequest={handleRequest}
             showAction={canUse}

webui/src/components/PtzLiveVideo/index.jsx

@@ -1,15 +1,14 @@
 // PTZ Live Video
 // Purpose: Plays the single PTZ camera WHEP stream with the same fresh-session retry loop used by rover video.
 // Scope: Owns browser-side WHEP playback/retry only; server authorization and snapshot fallback policy stay outside.
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useVideoRequests } from '../../hooks/useVideoRequests.js';
-import { WhepPlayer } from '../../lib/whepPlayer.js';
-import { RESTART_DELAY_MS } from '../RoverMediaPlayer/constants.js';
+import { startWhepPlayback } from '../../lib/whepPlayback.js';
+import useWhepRestart from '../../hooks/useWhepRestart.js';
 
 export const PTZ_CAMERA_ID = 'ptz-camera';
 
 const PTZ_AUDIO_RETRY_MS = 1000;
-const TERMINAL_WHEP_STATES = new Set(['error', 'failed', 'disconnected', 'closed']);
 const AUTHORIZATION_ERROR_RE = /not authorized/i;
 
 function isAuthorizationError(error) {
@@ -25,14 +24,10 @@ export default function PtzLiveVideo({
   fallback = null,
 }) {
   const videoRef = useRef(null);
-  const retryTimerRef = useRef(null);
   const playTimerRef = useRef(null);
-  const enabledRef = useRef(enabled);
-  const fallbackRef = useRef(false);
-  const playerGenerationRef = useRef(0);
   const [status, setStatus] = useState('idle');
   const [detail, setDetail] = useState(null);
-  const [restartToken, setRestartToken] = useState(0);
+  const { restartToken, scheduleRestart, cancelRestart } = useWhepRestart(enabled);
   const sources = useVideoRequests(
     [{ type: 'ptz', id: PTZ_CAMERA_ID, key: PTZ_CAMERA_ID }],
     { enabled, version: restartToken },
@@ -41,100 +36,34 @@ export default function PtzLiveVideo({
   const shouldUseFallback = Boolean(source?.error && isAuthorizationError(source.error));
 
   useEffect(() => {
-    enabledRef.current = enabled;
-  }, [enabled]);
-
-  useEffect(() => {
-    fallbackRef.current = shouldUseFallback;
-  }, [shouldUseFallback]);
-
-  useEffect(() => {
-    if (enabled && !shouldUseFallback) return undefined;
-    /*
-      A retry that was scheduled before the server denied live access should not
-      keep firing in snapshot mode. Clear it when live playback is no longer the
-      active display policy.
-    */
-    if (retryTimerRef.current) {
-      clearTimeout(retryTimerRef.current);
-      retryTimerRef.current = null;
-    }
-    return undefined;
-  }, [enabled, shouldUseFallback]);
-
-  const scheduleRestart = useCallback(() => {
-    if (!enabledRef.current || fallbackRef.current) return;
-    /*
-      WHEP sessions are one-shot browser/server negotiations. When the camera
-      reboots, the old PeerConnection and token can look alive enough to keep a
-      black element on screen, but they are not useful anymore. Bumping this
-      token forces useVideoRequests to ask the server for a new MediaMTX auth
-      session before creating the next WhepPlayer.
-    */
-    clearTimeout(retryTimerRef.current);
-    retryTimerRef.current = setTimeout(() => {
-      retryTimerRef.current = null;
-      setRestartToken(Date.now());
-    }, RESTART_DELAY_MS);
-  }, []);
+    // An authorization denial switches to snapshots and cancels any queued retry.
+    if (shouldUseFallback) cancelRestart();
+  }, [shouldUseFallback, cancelRestart]);
 
   useEffect(() => {
     if (!enabled || shouldUseFallback || !source?.url || !videoRef.current) return undefined;
-    let active = true;
-    const generation = playerGenerationRef.current + 1;
-    playerGenerationRef.current = generation;
-    const player = new WhepPlayer({
+    const video = videoRef.current;
+    const stop = startWhepPlayback({
       url: source.url,
       token: source.token,
       video: videoRef.current,
       startMuted,
+      scheduleRestart,
       onStatus: (nextStatus, info) => {
-        /*
-          Old PeerConnection callbacks can arrive after React has already
-          cleaned up this effect for a newer token. Only the currently-owned
-          generation is allowed to update status or schedule another restart.
-        */
-        if (!active || playerGenerationRef.current !== generation) return;
-        const normalized = String(nextStatus || '').toLowerCase();
         setStatus(nextStatus || 'unknown');
         setDetail(info || null);
-        if (TERMINAL_WHEP_STATES.has(normalized)) {
-          scheduleRestart();
-        }
+      },
+      onError: (err) => {
+        setStatus('error');
+        setDetail(err.message || 'WHEP start failed');
       },
     });
-
-    player.start().catch((err) => {
-      if (!active || playerGenerationRef.current !== generation) return;
-      setStatus('error');
-      setDetail(err.message || 'WHEP start failed');
-      scheduleRestart();
-    });
-
-    return () => {
-      /*
-        Mark inactive before stop() because WhepPlayer reports "stopped" during
-        normal cleanup. Cleanup-driven stops should not immediately schedule the
-        next retry; only the replacement effect should own the new connection.
-      */
-      active = false;
-      player.stop();
-    };
-  }, [enabled, scheduleRestart, shouldUseFallback, source?.token, source?.url, startMuted]);
-
-  useEffect(() => {
-    const video = videoRef.current;
-    if (!enabled || shouldUseFallback || !source?.url || !video) return undefined;
-    const generation = playerGenerationRef.current;
-
     const handleEnded = () => {
-      if (playerGenerationRef.current !== generation) return;
       setStatus('stopped');
       setDetail('ended');
       scheduleRestart();
     };
     const handleError = () => {
-      if (playerGenerationRef.current !== generation) return;
       setStatus('error');
       setDetail(video.error?.message || 'video element error');
       scheduleRestart();
@@ -145,8 +74,9 @@ export default function PtzLiveVideo({
     return () => {
       video.removeEventListener('ended', handleEnded);
       video.removeEventListener('error', handleError);
+      stop();
     };
-  }, [enabled, scheduleRestart, shouldUseFallback, source?.url]);
+  }, [enabled, scheduleRestart, shouldUseFallback, source?.token, source?.url, startMuted]);
 
   useEffect(() => {
     const video = videoRef.current;
@@ -178,7 +108,6 @@ export default function PtzLiveVideo({
   }, [enabled, shouldUseFallback, source?.url, startMuted, status]);
 
   useEffect(() => () => {
-    if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
     if (playTimerRef.current) clearInterval(playTimerRef.current);
   }, []);
 

webui/src/components/QueueTargetRow/index.jsx

@@ -21,36 +21,20 @@ function roleColors(role) {
   }
 }
 
-function formatQueueUserLabel(user, selfId) {
-  /*
-    Queue chips need to be readable even when a socket has no nickname yet.
-    Keeping the socket-prefix fallback here means rover queues and PTZ queues
-    degrade identically instead of each target inventing its own anonymous label.
-  */
-  if (!user) return '';
-  const base = user.nickname || user.label || user.socketId?.slice(0, 6) || 'unknown';
-  if (user.socketId && user.socketId === selfId) {
-    return `${base} (you)`;
-  }
-  return base;
-}
-
 export function QueueUserChips({
   targetId,
-  queue = [],
-  currentId = null,
-  nextId = null,
+  turn,
   selfId = null,
-  lookupUser,
 }) {
-  if (!queue.length) {
+  const { queue = [], currentId, nextId } = turn || {};
+  if (!queue?.length) {
     return <p className="text-[0.7rem] text-slate-500">No queue.</p>;
   }
 
   return (
     <div className="flex flex-wrap items-center gap-0.5">
-      {queue.map((socketId, idx) => {
-        const user = lookupUser?.(socketId) || { socketId, nickname: null, role: null };
+      {queue.map((user, idx) => {
+        const { socketId } = user;
         const isCurrent = socketId === currentId;
         const isNext = Boolean(nextId && socketId === nextId && !isCurrent);
         /*
@@ -69,7 +53,7 @@ export function QueueUserChips({
             className={`flex items-center gap-0.5 rounded-sm px-1 text-[0.7rem] ${highlightClass}`}
           >
             <span className={`${roleColors(user.role)} font-semibold`}>
-              {formatQueueUserLabel(user, selfId)}
+              {user.name}{socketId === selfId ? ' (you)' : ''}
             </span>
             {isCurrent && <span className="text-[0.65rem] text-slate-200">now</span>}
             {isNext && <span className="text-[0.65rem] text-emerald-100">next</span>}
@@ -82,11 +66,8 @@ export function QueueUserChips({
 
 export default function QueueTargetRow({
   target,
-  queue = [],
-  currentId = null,
-  nextId = null,
+  turn,
   selfId = null,
-  lookupUser,
   canClick = false,
   pending = false,
   locked = false,
@@ -164,11 +145,8 @@ export default function QueueTargetRow({
         </div>
         <QueueUserChips
           targetId={targetId}
-          queue={queue}
-          currentId={currentId}
-          nextId={nextId}
+          turn={turn}
           selfId={selfId}
-          lookupUser={lookupUser}
         />
       </div>
       {showAction ? (

webui/src/components/RoverMediaPlayer/constants.js

@@ -1,7 +1,6 @@
 // constants
 // Purpose: Defines the constants module and the local helpers/components used in this file.
 // Scope: Keeps behavior unchanged while isolating this concern into a clear, single-responsibility unit.
-export const RESTART_DELAY_MS = 2000;
 export const UNMUTE_RETRY_MS = 3000;
 export const AUDIO_RETRY_MS = 3000;
 export const BRUSH_CURRENT_THRESHOLD_MA = 40;

webui/src/components/RoverMediaPlayer/index.jsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { WhepPlayer } from '../../lib/whepPlayer.js';
+import { startWhepPlayback } from '../../lib/whepPlayback.js';
+import useWhepRestart from '../../hooks/useWhepRestart.js';
 import { useTelemetrySelector } from '../../context/TelemetryContext.jsx';
 import {
   mainBrushAudioTelemetryEqual,
@@ -11,7 +12,6 @@ import { useRoverSnapshots } from '../../hooks/useRoverSnapshots.js';
 import { useSettingsNamespace } from '../../settings/index.js';
 import { AUDIO_SETTINGS_DEFAULTS, VIDEO_SETTINGS_DEFAULTS } from '../../settings/namespaces.js';
 import {
-  RESTART_DELAY_MS,
   UNMUTE_RETRY_MS,
   AUDIO_RETRY_MS,
   BRUSH_CURRENT_THRESHOLD_MA,
@@ -212,10 +212,10 @@ export default function RoverMediaPlayer({
         mainBrushOvercurrent: Boolean(sensors?.wheelOvercurrents?.mainBrush),
       }
     : mainBrushTelemetry;
+  const { restartToken, scheduleRestart } = useWhepRestart();
+  const { restartToken: audioRestartToken, scheduleRestart: scheduleAudioRestart } = useWhepRestart();
   const videoRef = useRef(null);
   const audioRef = useRef(null);
-  const restartTimer = useRef(null);
-  const audioRestartTimer = useRef(null);
   const audioPlayInterval = useRef(null);
   const unmuteTimer = useRef(null);
   const volumeFadeFrameRef = useRef(null);
@@ -224,8 +224,6 @@ export default function RoverMediaPlayer({
   const [detail, setDetail] = useState(null);
   const [audioStatus, setAudioStatus] = useState('idle');
   const [audioDetail, setAudioDetail] = useState(null);
-  const [restartToken, setRestartToken] = useState(0);
-  const [audioRestartToken, setAudioRestartToken] = useState(0);
   const [muted, setMuted] = useState(true);
   const hasDedicatedAudio = Boolean(resolvedAudioSessionInfo?.url);
   const usingSnapshot = videoMode === 'snapshot' || (!videoMode && !resolvedSessionInfo?.url);
@@ -341,15 +339,6 @@ export default function RoverMediaPlayer({
     logAudio('settings/update');
   }, [logAudio]);
 
-  const scheduleRestart = useCallback(() => {
-    clearTimeout(restartTimer.current);
-    restartTimer.current = setTimeout(() => setRestartToken(Date.now()), RESTART_DELAY_MS);
-  }, []);
-  const scheduleAudioRestart = useCallback(() => {
-    clearTimeout(audioRestartTimer.current);
-    audioRestartTimer.current = setTimeout(() => setAudioRestartToken(Date.now()), RESTART_DELAY_MS);
-  }, []);
-
   const ensurePlayback = useCallback(async () => {
     const video = videoRef.current;
     if (!video) return;
@@ -397,8 +386,6 @@ export default function RoverMediaPlayer({
 
   useEffect(
     () => () => {
-      clearTimeout(restartTimer.current);
-      clearTimeout(audioRestartTimer.current);
       clearTimeout(unmuteTimer.current);
       clearInterval(audioPlayInterval.current);
       if (volumeFadeFrameRef.current) {
@@ -426,41 +413,27 @@ export default function RoverMediaPlayer({
     if (!isVideoVisible || usingSnapshot || !resolvedSessionInfo?.url || !videoRef.current) {
       return undefined;
     }
-    let active = true;
-    let player;
     const resetMuteId = setTimeout(() => setMuted(true), 0);
-    const handleStatus = (nextStatus, info) => {
-      if (!active) return;
-      logAudio('video/status', { nextStatus, info: info || null });
-      setStatus(nextStatus);
-      setDetail(info || null);
-      if (nextStatus === 'playing') {
-        ensurePlayback();
-      }
-      if (['error', 'failed', 'disconnected', 'closed'].includes(nextStatus)) {
-        scheduleRestart();
-      }
-    };
-
-    player = new WhepPlayer({
+    const stop = startWhepPlayback({
       url: resolvedSessionInfo.url,
       token: resolvedSessionInfo.token,
       video: videoRef.current,
       receiveAudio: !hasDedicatedAudio,
-      onStatus: handleStatus,
+      scheduleRestart,
+      onStatus: (nextStatus, info) => {
+        logAudio('video/status', { nextStatus, info: info || null });
+        setStatus(nextStatus);
+        setDetail(info || null);
+        if (nextStatus === 'playing') ensurePlayback();
+      },
+      onError: (err) => {
+        setStatus('error');
+        setDetail(err.message);
+      },
     });
-
-    player.start().catch((err) => {
-      if (!active) return;
-      setStatus('error');
-      setDetail(err.message);
-      scheduleRestart();
-    });
-
     return () => {
-      active = false;
       clearTimeout(resetMuteId);
-      player?.stop();
+      stop();
     };
   }, [
     usingSnapshot,
@@ -536,37 +509,24 @@ export default function RoverMediaPlayer({
     if (!resolvedAudioSessionInfo?.url || !audioRef.current) {
       return undefined;
     }
-    let active = true;
-    let player;
-    const handleStatus = (nextStatus, info) => {
-      if (!active) return;
-      logAudio('audio/status', { nextStatus, info: info || null });
-      setAudioStatus(nextStatus);
-      setAudioDetail(info || null);
-      if (['error', 'failed'].includes(nextStatus)) {
-        scheduleAudioRestart();
-      }
-    };
-
-    player = new WhepPlayer({
+    return startWhepPlayback({
       url: resolvedAudioSessionInfo.url,
       token: resolvedAudioSessionInfo.token,
       video: audioRef.current,
       audioOnly: true,
-      onStatus: handleStatus,
+      // Dedicated rover audio historically retries only errors and failures.
+      terminalStates: ['error', 'failed'],
+      scheduleRestart: scheduleAudioRestart,
+      onStatus: (nextStatus, info) => {
+        logAudio('audio/status', { nextStatus, info: info || null });
+        setAudioStatus(nextStatus);
+        setAudioDetail(info || null);
+      },
+      onError: (err) => {
+        setAudioStatus('error');
+        setAudioDetail(err.message);
+      },
     });
-
-    player.start().catch((err) => {
-      if (!active) return;
-      setAudioStatus('error');
-      setAudioDetail(err.message);
-      scheduleAudioRestart();
-    });
-
-    return () => {
-      active = false;
-      player?.stop();
-    };
   }, [
     resolvedAudioSessionInfo?.url,
     resolvedAudioSessionInfo?.token,

webui/src/components/RoverQueuesPanel/index.jsx

@@ -96,16 +96,12 @@ function ScrollableQueueContent({ enabled = false, children }) {
 export default function RoverQueuesPanel({
   title = 'Rovers',
   roster: rosterOverride = null,
-  turnQueues: turnQueuesOverride = null,
-  users: usersOverride = null,
   externalInstance = null,
   disabledOverlay = '',
   fillHeight = false,
 }) {
   const role = useSessionSelector((state) => state.session?.role || null);
   const localRoster = useSessionSelector((state) => state.session?.roster ?? []);
-  const localTurnQueues = useSessionSelector((state) => state.session?.turnQueues ?? {});
-  const localUsers = useSessionSelector((state) => state.session?.users ?? []);
   const interInstanceEnabled = useSessionSelector((state) => isFeatureEnabled(state, 'interInstance'));
   const { value: pageSettings } = useSettingsNamespace('page', { interInstanceTransferSettings: true });
   const selfId = useSessionSelector((state) => state.session?.socketId || null);
@@ -124,8 +120,6 @@ export default function RoverQueuesPanel({
   const externalBlocked = Boolean(externalMode && disabledOverlay);
   const includeInterInstanceSettings = pageSettings?.interInstanceTransferSettings !== false;
   const roster = Array.isArray(rosterOverride) ? rosterOverride : localRoster;
-  const turnQueues = turnQueuesOverride && typeof turnQueuesOverride === 'object' ? turnQueuesOverride : localTurnQueues;
-  const users = Array.isArray(usersOverride) ? usersOverride : localUsers;
 
   const canRequest = useMemo(
     () => (externalMode ? !externalBlocked : role && role !== 'spectator'),
@@ -136,8 +130,8 @@ export default function RoverQueuesPanel({
     [role],
   );
   const hasDeadlines = useMemo(
-    () => Object.values(turnQueues || {}).some((info) => info?.deadline || info?.idleDeadline),
-    [turnQueues],
+    () => roster.some((rover) => rover.turn?.deadline || rover.turn?.idleDeadline),
+    [roster],
   );
   /*
     Queue timers are shown in whole seconds, and several queue panels can be
@@ -146,14 +140,6 @@ export default function RoverQueuesPanel({
   */
   const now = useSharedClock(1000, hasDeadlines);
 
-  const rosterItems = useMemo(() => {
-    const known = new Set(roster.map((rover) => String(rover.id)));
-    const extra = Object.keys(turnQueues || {})
-      .filter((id) => !known.has(String(id)))
-      .map((id) => ({ id, name: id, locked: false, batteryState: null }));
-    return [...roster, ...extra];
-  }, [roster, turnQueues]);
-
   async function handleRequest(targetRoverId) {
     if (!targetRoverId) return;
     if (externalBlocked) return;
@@ -181,8 +167,6 @@ export default function RoverQueuesPanel({
     }
   }
 
-  const lookupUser = (socketId) =>
-    users.find((u) => u.socketId === socketId) || { socketId, nickname: null, role: null };
 
   async function handleRebootOwnRover() {
     if (rebootPending) return;
@@ -224,14 +208,13 @@ export default function RoverQueuesPanel({
       >
         <ScrollableQueueContent enabled={fillHeight}>
           <div className="relative space-y-0.5">
-            {rosterItems.length === 0 ? (
+            {roster.length === 0 ? (
               <p className="text-sm text-slate-500">No rovers registered.</p>
             ) : (
               <ul className="space-y-0.5 text-sm">
-                {rosterItems.map((rover) => {
+                {roster.map((rover) => {
                   const roverId = String(rover.id);
-                  const info = turnQueues?.[roverId] || null;
-                  const queue = info?.queue || [];
+                  const info = rover.turn;
                   /*
                     A turn handoff and an inactivity skip are separate server
                     deadlines. Keep them separate through formatting so an idle
@@ -246,14 +229,8 @@ export default function RoverQueuesPanel({
                   const idleRemainingSeconds = idleDeadline
                     ? Math.max(0, Math.ceil((idleDeadline - now) / 1000))
                     : null;
-                  const currentId = info?.current || null;
-                  const currentIdx = currentId ? queue.findIndex((id) => id === currentId) : -1;
-                  const nextId =
-                    queue.length > 1
-                      ? currentIdx >= 0
-                        ? queue[(currentIdx + 1) % queue.length]
-                        : queue[0]
-                      : null;
+                  const currentId = info?.currentId || null;
+                  const nextId = info?.nextId || null;
                   const isSelfCurrent = Boolean(selfId && currentId && currentId === selfId);
                   const isSelfNext = Boolean(selfId && nextId && nextId === selfId);
                   const timerLabel = isSelfCurrent
@@ -281,11 +258,8 @@ export default function RoverQueuesPanel({
                     <QueueTargetRow
                       key={rover.id}
                       target={{ ...rover, rover, roverId, id: roverId }}
-                      queue={queue}
-                      currentId={currentId}
-                      nextId={nextId}
+                      turn={info}
                       selfId={selfId}
-                      lookupUser={lookupUser}
                       canClick={canClickRow}
                       pending={Boolean(pending[roverId])}
                       locked={locked}

webui/src/components/TurnAlertListener/index.jsx

@@ -25,7 +25,6 @@ function useAudio(src, volume = 1) {
 
 export default function TurnAlertListener() {
   const socketId = useSessionSelector((state) => state.session?.socketId || null);
-  const assignments = useSessionSelector((state) => state.session?.turnQueues || {});
   const roster = useSessionSelector((state) => state.session?.roster || []);
   const { pushAlert } = useSessionActions();
   const { value: audioSettings } = useSettingsNamespace('audio', AUDIO_SETTINGS_DEFAULTS);
@@ -38,18 +37,19 @@ export default function TurnAlertListener() {
   useEffect(() => {
     if (!socketId) return;
     const newlyMine = [];
-    Object.entries(assignments).forEach(([roverId, info]) => {
-      if (!info || !info.current || info.current !== socketId) return;
+    roster.forEach((rover) => {
+      const roverId = String(rover.id);
+      if (!rover.turn?.ownsControl) return;
       if (!seenRoversRef.current.has(roverId)) {
         newlyMine.push(roverId);
         seenRoversRef.current.add(roverId);
       }
     });
-    Object.keys(assignments).forEach((roverId) => {
-      if (!assignments[roverId] || assignments[roverId].current !== socketId) {
+    for (const roverId of seenRoversRef.current) {
+      if (!roster.some((rover) => String(rover.id) === roverId && rover.turn?.ownsControl)) {
         seenRoversRef.current.delete(roverId);
       }
-    });
+    }
     if (newlyMine.length === 0) return;
     newlyMine.forEach((roverId) => {
       const roverName = roster.find((r) => String(r.id) === String(roverId))?.name || roverId;
@@ -60,7 +60,7 @@ export default function TurnAlertListener() {
       });
     });
     playSound();
-  }, [assignments, playSound, pushAlert, roster, socketId]);
+  }, [playSound, pushAlert, roster, socketId]);
 
   return null;
 }

webui/src/components/UserListPanel/index.jsx

@@ -73,8 +73,8 @@ export default function UserListPanel({
   const users = useSessionSelector((state) => state.session?.users ?? []);
   const selfId = useSessionSelector((state) => state.session?.socketId || null);
   const mode = useSessionSelector((state) => state.session?.mode || null);
-  const turnQueues = useSessionSelector((state) => state.session?.turnQueues || {});
   const roster = useSessionSelector((state) => state.session?.roster || []);
+  const queuedRovers = roster.filter((rover) => rover.turn?.queue != null);
   const isTurnsMode = mode === 'turns';
   const [turnView, setTurnView] = useState('queues');
 
@@ -98,11 +98,6 @@ export default function UserListPanel({
     [roster],
   );
 
-  const lookupUser = useCallback(
-    (socketId) => users.find((u) => u.socketId === socketId) || { socketId, nickname: null, role: null },
-    [users],
-  );
-
   const secondsRemaining = useCallback((deadline) => {
     if (!deadline) return null;
     const ms = deadline - Date.now();
@@ -141,10 +136,11 @@ export default function UserListPanel({
             className={`flex items-center gap-0.5 ${compact ? 'py-0.25 text-[0.8rem]' : 'text-sm'}`}
           >
             <p className={`font-semibold ${roleColors(user.role)}`}>{formatLabel(user, selfId)}</p>
-            {user.roverId ? (
+            {user.roverId || user.operatingModeDisplay ? (
               <RoverLabel
                 roverId={user.roverId}
-                color={rosterEntry(user.roverId)?.color}
+                name={user.operatingModeDisplay?.name}
+                color={user.operatingModeDisplay?.color || rosterEntry(user.roverId)?.color}
                 fallback={user.roverId}
                 className="text-[0.7rem]"
               />
@@ -164,7 +160,7 @@ export default function UserListPanel({
   return (
     <CardFrame
       title={!hideHeader ? (isTurnsMode ? (showQueuesSection ? 'Turn queues' : 'Users') : 'Users') : ''}
-      meta={!hideHeader ? (showQueuesSection && isTurnsMode ? Object.keys(turnQueues || {}).length : sorted.length) : null}
+      meta={!hideHeader ? (showQueuesSection && isTurnsMode ? queuedRovers.length : sorted.length) : null}
       hideHeader={hideHeader}
       fillHeight={fillHeight}
       className={className}
@@ -208,21 +204,14 @@ export default function UserListPanel({
         ) : null}
         {showQueuesSection ? (
           <div className={`space-y-0.5 px-0 pb-0 ${turnsListClass} ${compact ? 'text-[0.8rem]' : ''}`}>
-            {Object.keys(turnQueues || {}).length === 0 ? (
+            {queuedRovers.length === 0 ? (
               <p className="text-sm text-slate-500">No turn queues yet.</p>
             ) : (
-              Object.entries(turnQueues).map(([roverId, info]) => {
+              queuedRovers.map(({ id: roverId, turn: info }) => {
                 const queue = info?.queue || [];
                 const deadline = info?.idleDeadline || info?.deadline || null;
                 const remaining = secondsRemaining(deadline);
-                const currentId = info?.current || null;
-                const currentIdx = currentId ? queue.findIndex((id) => id === currentId) : -1;
-                const nextId =
-                  queue.length > 1
-                    ? currentIdx >= 0
-                      ? queue[(currentIdx + 1) % queue.length]
-                      : queue[0]
-                    : null;
+                const { currentId, nextId } = info;
                 return (
                   <div key={roverId} className={`flex flex-col gap-0.5 ${compact ? 'text-[0.8rem] py-0.25' : 'text-sm'}`}>
                     <div className="flex items-center gap-0.5">
@@ -239,11 +228,10 @@ export default function UserListPanel({
                       <p className="text-[0.75rem] text-slate-500">No drivers queued.</p>
                     ) : (
                       <div className="flex flex-wrap items-center gap-0.5">
-                        {queue.map((socketId, idx) => {
-                          const user = lookupUser(socketId);
+                        {queue.map((user, idx) => {
+                          const { socketId } = user;
                           const isCurrent = socketId === currentId;
                           const isNext = Boolean(nextId && socketId === nextId && !isCurrent);
-                          const isSelf = Boolean(selfId && socketId === selfId);
                           const isAdmin =
                             user.role === 'admin' || user.role === 'lockdown';
                           const highlightClass = isCurrent
@@ -257,10 +245,9 @@ export default function UserListPanel({
                               className={`flex items-center gap-0.5 rounded-sm px-1 ${compact ? 'text-[0.7rem]' : 'text-[0.8rem]'} ${highlightClass}`}
                             >
                               <span className={`${roleColors(user.role)} font-semibold`}>
-                                {formatLabel(user, selfId)}
+                                {user.name}{socketId === selfId ? ' (you)' : ''}
                               </span>
                               {isAdmin && <span className="text-[0.7rem] text-amber-200">★</span>}
-                              {/* {isSelf && <span className="text-[0.7rem] text-white">YOU</span>} */}
                               {isCurrent && <span className="text-[0.7rem] text-slate-200">now</span>}
                               {isNext && <span className="text-[0.7rem] text-emerald-100">next</span>}
                             </span>

webui/src/components/vip/VipPtzCameraCard.jsx

@@ -1,596 +0,0 @@
-// Vip PTZ Camera Card
-// Purpose: Provides the verified-user entry point and fullscreen controller for the single Reolink PTZ camera.
-// Scope: Owns PTZ UI state only; server-side PTZ ownership, rover handoff, and command authorization remain authoritative.
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import '../MobileControls/mobileControls.css';
-import { createPortal } from 'react-dom';
-import ChatPanel from '../ChatPanel/index.jsx';
-import CardFrame from '../CardFrame/index.jsx';
-import GPIOToggleControl from '../GPIOToggleControl/index.jsx';
-import ControlPadPanel from '../MobileControls/ControlPadPanel.jsx';
-import PtzLiveVideo from '../PtzLiveVideo/index.jsx';
-import ReplaySourcesPanel from '../ReplaySourcesPanel/index.jsx';
-import KeyPill from './VipAudioUploadCard/KeyPill.jsx';
-import { useSessionActions, useSessionSelector } from '../../context/SessionContext.jsx';
-import { useControlActions } from '../../controls/index.js';
-import ControlHint from '../ControlHint/index.jsx';
-import { usePtzCameraSnapshots } from '../../hooks/usePtzCameraSnapshot.js';
-import { isFeatureEnabled } from '../../lib/features.js';
-import { triggerTouchHaptic } from '../../lib/touchHaptics.js';
-
-const PTZ_CAMERA_ID = 'ptz-camera';
-
-function formatRemaining(deadline) {
-  const remaining = Math.max(0, Math.ceil((Number(deadline || 0) - Date.now()) / 1000));
-  if (!remaining) return '--';
-  const minutes = Math.floor(remaining / 60);
-  const seconds = remaining % 60;
-  return `${minutes}:${String(seconds).padStart(2, '0')}`;
-}
-
-function isSpotlightOn(light = {}) {
-  if (typeof light?.on === 'boolean') return light.on;
-  const raw = light?.state;
-  if (typeof raw === 'string') {
-    const normalized = raw.trim().toLowerCase();
-    return !['', '0', 'off', 'false'].includes(normalized);
-  }
-  return Boolean(Number(raw));
-}
-
-function normalizeIrMode(mode) {
-  const normalized = String(mode || '').trim().toLowerCase();
-  if (normalized === 'on') return 'On';
-  if (normalized === 'off') return 'Off';
-  return 'Auto';
-}
-
-function nextIrMode(currentMode) {
-  const current = normalizeIrMode(currentMode);
-  if (current === 'Auto') return 'On';
-  if (current === 'On') return 'Off';
-  return 'Auto';
-}
-
-function PtzSnapshotPreview({ feed, label = 'PTZ Camera' }) {
-  return (
-    <div className="relative w-full overflow-hidden bg-black" style={{ aspectRatio: '16 / 9' }}>
-      {feed?.objectUrl ? (
-        <img src={feed.objectUrl} alt={label} className="h-full w-full object-cover" />
-      ) : (
-        <div className="flex h-full w-full items-center justify-center text-xs text-slate-400">Waiting for snapshot...</div>
-      )}
-      {/*
-        Even on this legacy VIP surface, keep the video pane itself identical
-        to rover media panes: no camera title inside the frame, only the small
-        top-left stream status. Any PTZ name/context belongs to the card chrome
-        around the media, not the media player.
-      */}
-      <div className="pointer-events-none absolute left-1 top-1 z-20 font-medium text-slate-100 text-[0.65rem]">
-        <div className="flex flex-col gap-0.5 leading-none">
-          <span>Status: {feed?.error ? `Error: ${feed.error}` : feed?.status || 'connecting'}</span>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function StatusRow({ label, value, tone = '' }) {
-  return (
-    <div className="flex items-center justify-between gap-1 text-xs">
-      <span className="text-slate-400">{label}</span>
-      <span className={`min-w-0 truncate font-medium ${tone || 'text-slate-100'}`}>{value}</span>
-    </div>
-  );
-}
-
-function formatPublisherProgress(progress = null) {
-  /*
-    ffmpeg progress is intentionally shown as raw operational numbers instead
-    of translated prose. When the PTZ video feels delayed, fps/speed/drop/out
-    time make it obvious whether ffmpeg itself is keeping up or the delay is
-    somewhere before/after the transcoder.
-  */
-  if (!progress) return null;
-  return [
-    progress.fps ? `fps ${progress.fps}` : null,
-    progress.speed ? `speed ${progress.speed}` : null,
-    progress.drop_frames ? `drop ${progress.drop_frames}` : null,
-    progress.out_time ? `out ${progress.out_time}` : null,
-  ].filter(Boolean).join(' | ');
-}
-
-function PtzQueueList({ queue = [], operatorLabel = '' }) {
-  const hasQueue = Array.isArray(queue) && queue.length > 0;
-  return (
-    <div className="space-y-0.5">
-      <div className="panel-muted text-xs">Turn queue</div>
-      <div className="space-y-0.5">
-        {operatorLabel ? (
-          <div className="surface flex items-center justify-between gap-1 text-xs">
-            <span className="text-slate-400">Now</span>
-            <span className="min-w-0 truncate text-emerald-200">{operatorLabel}</span>
-          </div>
-        ) : null}
-        {hasQueue ? queue.map((entry, index) => (
-          <div key={entry.socketId || `${entry.label}-${index}`} className="surface flex items-center justify-between gap-1 text-xs">
-            <span className="text-slate-400">{index + 1}</span>
-            <span className="min-w-0 truncate text-slate-100">{entry.label || entry.socketId || 'queued user'}</span>
-          </div>
-        )) : (
-          <div className="surface text-xs text-slate-400">No one waiting</div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function PtzStatePanel({ ptz, onClose, onRelease, releaseDisabled = false }) {
-  const spotlightOn = isSpotlightOn(ptz?.light);
-  const irMode = normalizeIrMode(ptz?.ir?.state);
-  const publisher = ptz?.publisher || {};
-  const publisherStatus = publisher.running
-    ? `running${publisher.pid ? ` ${publisher.pid}` : ''}`
-    : publisher.restartAt
-      ? 'restarting'
-      : publisher.lastEvent || 'stopped';
-  const publisherProgress = formatPublisherProgress(publisher.progress);
-  const statusTone = ptz?.error ? 'text-amber-300' : ptz?.isOperator ? 'text-emerald-300' : 'text-slate-100';
-
-  return (
-    <CardFrame
-      title="Camera state"
-      actions={onClose ? <button type="button" className="button-dark text-xs" onClick={onClose}>Close</button> : null}
-      bodyClassName="space-y-0.5 p-1 text-sm"
-    >
-      <StatusRow label="Mode" value={ptz?.isOperator ? 'operator' : ptz?.queuedPosition ? `queued ${ptz.queuedPosition}` : 'spectator'} tone={statusTone} />
-      <StatusRow label="Operator" value={ptz?.operatorLabel || 'none'} />
-      <StatusRow label="Remaining" value={formatRemaining(ptz?.deadline)} />
-      <StatusRow label="Spotlight" value={spotlightOn ? 'On' : 'Off'} tone={spotlightOn ? 'text-emerald-300' : 'text-slate-200'} />
-      <StatusRow label="Infrared mode" value={irMode} />
-      <StatusRow label="Stream" value={ptz?.status || ptz?.error || 'idle'} tone={ptz?.error ? 'text-amber-300' : ''} />
-      <StatusRow label="Transcoder" value={publisherStatus} tone={publisher.running ? 'text-emerald-300' : 'text-amber-300'} />
-      {publisherProgress ? <StatusRow label="Progress" value={publisherProgress} /> : null}
-      {publisher.lastStderr ? (
-        <div className="surface max-h-24 overflow-y-auto whitespace-pre-wrap wrap-break-word font-mono text-[0.68rem] leading-tight text-slate-200">
-          {publisher.lastStderr}
-        </div>
-      ) : null}
-      {ptz?.blocked?.message ? (
-        <div className="rounded-sm border border-amber-500/50 bg-amber-950/40 p-1 text-xs text-amber-100">
-          {ptz.blocked.message}
-        </div>
-      ) : null}
-      {onRelease ? (
-        <button type="button" className="button-dark w-full text-xs" disabled={releaseDisabled} onClick={onRelease}>
-          Release camera
-        </button>
-      ) : null}
-    </CardFrame>
-  );
-}
-
-function PtzLightingControls({ ptz, disabled = false }) {
-  const { ptzSpotlight, ptzIr } = useSessionActions();
-  const [busy, setBusy] = useState('');
-  const spotlightOn = isSpotlightOn(ptz?.light);
-  const irMode = normalizeIrMode(ptz?.ir?.state);
-
-  const toggleSpotlight = async (nextOn) => {
-    if (disabled) return;
-    setBusy('spotlight');
-    try {
-      await ptzSpotlight({ state: nextOn ? 1 : 0 });
-    } finally {
-      setBusy('');
-    }
-  };
-
-  const cycleIr = async () => {
-    if (disabled) return;
-    triggerTouchHaptic('button');
-    setBusy('ir');
-    try {
-      await ptzIr({ state: nextIrMode(irMode) });
-    } finally {
-      setBusy('');
-    }
-  };
-
-  return (
-    <div className="mobile-touch-control grid grid-cols-2 gap-0.5 text-sm">
-      <GPIOToggleControl
-        label="Spotlight"
-        on={spotlightOn}
-        disabled={disabled || busy === 'spotlight'}
-        onToggle={toggleSpotlight}
-        heightClass="min-h-14"
-      />
-      <button
-        type="button"
-        className="mobile-touch-control flex min-h-14 flex-col items-center justify-center gap-0.5 rounded-xl border-2 border-cyan-300/70 bg-cyan-900 px-1 py-0.75 text-center text-cyan-50 disabled:opacity-50"
-        disabled={disabled || busy === 'ir'}
-        onClick={cycleIr}
-      >
-        <span className="text-sm font-semibold">Infrared</span>
-        <span className="rounded-sm bg-cyan-300 px-1 py-0.5 text-[0.7rem] font-semibold text-cyan-950">{irMode}</span>
-      </button>
-    </div>
-  );
-}
-
-function PtzMobileZoomButtons({ disabled = false }) {
-  const { setCameraAxisIntent } = useControlActions();
-  const stopZoom = useCallback(() => {
-    // This is a zoom-only release; the shared adapter retains any simultaneous
-    // pan/tilt intent from the movement pad in its next combined motion state.
-    setCameraAxisIntent(0);
-  }, [setCameraAxisIntent]);
-  const startZoom = useCallback(
-    (direction) => (event) => {
-      /*
-        The adapter owns renewal for held PTZ state. Publishing the direction
-        once avoids a component-local repeat timer and keeps this legacy card on
-        the exact same motion path as the dedicated PTZ route.
-      */
-      event.preventDefault();
-      if (disabled) return;
-      triggerTouchHaptic('button');
-      event.currentTarget.setPointerCapture?.(event.pointerId);
-      setCameraAxisIntent(direction);
-    },
-    [disabled, setCameraAxisIntent],
-  );
-  const stopFromPointer = useCallback(
-    (event) => {
-      event?.preventDefault?.();
-      if (disabled) return;
-      stopZoom();
-    },
-    [disabled, stopZoom],
-  );
-
-  useEffect(
-    () => () => {
-      // Orientation changes can unmount the button before pointerup. Clear the
-      // held zoom state explicitly instead of waiting for the server watchdog.
-      setCameraAxisIntent(0);
-    },
-    [setCameraAxisIntent],
-  );
-
-  return (
-    <div className="mobile-touch-control grid grid-cols-2 gap-0.5 text-sm">
-      <button
-        type="button"
-        className="mobile-touch-control button-dark min-h-10 text-xs disabled:opacity-50"
-        disabled={disabled}
-        onPointerDown={startZoom(-1)}
-        onPointerUp={stopFromPointer}
-        onPointerCancel={stopFromPointer}
-        onLostPointerCapture={stopFromPointer}
-        onContextMenu={(event) => event.preventDefault()}
-      >
-        Zoom out
-      </button>
-      <button
-        type="button"
-        className="mobile-touch-control button-dark min-h-10 text-xs disabled:opacity-50"
-        disabled={disabled}
-        onPointerDown={startZoom(1)}
-        onPointerUp={stopFromPointer}
-        onPointerCancel={stopFromPointer}
-        onLostPointerCapture={stopFromPointer}
-        onContextMenu={(event) => event.preventDefault()}
-      >
-        Zoom in
-      </button>
-    </div>
-  );
-}
-
-function PtzMobileControlsPanel({ ptz, disabled = false }) {
-  return (
-    <div className="mobile-touch-control space-y-0.5">
-      <PtzMobileZoomButtons disabled={disabled} />
-      <div className="mobile-touch-control h-44 min-h-0">
-        {/*
-          Reuse the rover mobile movement card instead of building a second PTZ
-          joystick. Its drive vector goes through the shared internal control
-          layer, where the PTZ adapter already converts movement plus speed mode
-          into camera pan/tilt commands.
-        */}
-        <ControlPadPanel compact disabled={disabled} />
-      </div>
-      <PtzLightingControls ptz={ptz} disabled={disabled} />
-    </div>
-  );
-}
-
-function PtzControlReference() {
-  const rows = [
-    ['Tilt up', 'driveForward'],
-    ['Tilt down', 'driveBackward'],
-    ['Pan left', 'driveLeft'],
-    ['Pan right', 'driveRight'],
-    ['Zoom in', 'cameraUp'],
-    ['Zoom out', 'cameraDown'],
-    ['Spotlight', 'headlightToggle'],
-    ['Infrared mode', 'laserToggle'],
-  ];
-
-  return (
-    <CardFrame title="Controls" bodyClassName="space-y-0.5 p-1 text-xs">
-      {rows.map(([label, actionId]) => (
-        <div key={label} className="surface flex items-center justify-between gap-1">
-          <span className="text-slate-400">{label}</span>
-          {/* Use the same key display component as the rest of the UI so PTZ
-              controls read as normal mapped controls instead of custom labels. */}
-          <KeyPill label={<ControlHint actionId={actionId} />} />
-        </div>
-      ))}
-    </CardFrame>
-  );
-}
-
-function PtzController({ open, onClose, layout = 'desktop' }) {
-  const ptz = useSessionSelector((state) => state.session?.ptzCamera || null);
-  const isOperator = Boolean(ptz?.isOperator);
-  const nonTurnSnapshotsActive = useSessionSelector(
-    (state) => Boolean(state.session?.bandwidthSavings?.nonTurnVideo?.snapshotsActive),
-  );
-  const isMobile = layout === 'mobile-portrait' || layout === 'mobile-landscape';
-  const { ptzRelease } = useSessionActions();
-  /*
-    The VIP fullscreen surface is available to queued PTZ users too. Let queued
-    users see live video only when the central non-turn video policy allows it;
-    all movement and light controls still remain guarded by isOperator.
-  */
-  const shouldUseLiveVideo = isOperator || !nonTurnSnapshotsActive;
-  const snapshotFeeds = usePtzCameraSnapshots([PTZ_CAMERA_ID], { enabled: open && !shouldUseLiveVideo });
-  const snapshot = snapshotFeeds[PTZ_CAMERA_ID] || null;
-  const [releasePending, setReleasePending] = useState(false);
-
-  if (!open) return null;
-
-  const releaseAndClose = async () => {
-    setReleasePending(true);
-    try {
-      await ptzRelease();
-      onClose();
-    } finally {
-      setReleasePending(false);
-    }
-  };
-
-  const desktopSidebar = (
-    <>
-
-      <div className="shrink-0">
-        <PtzQueueList queue={ptz?.queue} operatorLabel={ptz?.operatorLabel} />
-      </div>
-      {isOperator ? (
-        <div className="shrink-0">
-          <PtzLightingControls ptz={ptz} />
-        </div>
-      ) : (
-        <div className="shrink-0">
-          <CardFrame title="Controls" bodyClassName="p-1 text-xs text-slate-400">
-            Live PTZ controls unlock when your camera turn is active.
-          </CardFrame>
-        </div>
-      )}
-      <div className="shrink-0">
-        <PtzControlReference />
-      </div>
-      <div className="min-h-48 flex-1">
-        {/*
-          The global chat key focuses the input registered by ChatPanel through
-          ChatContext. Keeping a real ChatPanel mounted inside the PTZ fullscreen
-          sidebar lets the normal keyboard path focus chat and lets Enter submit
-          through the existing chat composer form instead of adding PTZ-specific
-          chat handling.
-        */}
-        <ChatPanel fillHeight title="Chat" />
-      </div>
-      <div className="shrink-0">
-        <ReplaySourcesPanel panelId="ptz-controller-replay" defaultSelectedKey={`ptz:${PTZ_CAMERA_ID}`} />
-      </div>
-      <div className="shrink-0">
-        <PtzStatePanel
-          ptz={ptz}
-          onClose={onClose}
-          onRelease={isOperator ? releaseAndClose : null}
-          releaseDisabled={releasePending}
-        />
-      </div>
-    </>
-  );
-
-  const mobileSidebar = (
-    <>
-      <div className="shrink-0">
-        <PtzMobileControlsPanel ptz={ptz} disabled={!isOperator} />
-      </div>
-      <div className="min-h-40 flex-1">
-        {/*
-          Mobile uses the same ChatPanel registration as desktop so the mapped
-          chat key and the on-screen input stay on one shared chat implementation.
-        */}
-        <ChatPanel fillHeight title="Chat" />
-      </div>
-      <div className="shrink-0">
-        <ReplaySourcesPanel
-          panelId="ptz-controller-replay-mobile"
-          defaultSelectedKey={`ptz:${PTZ_CAMERA_ID}`}
-        />
-      </div>
-      <div className="shrink-0">
-        <PtzStatePanel
-          ptz={ptz}
-          onClose={onClose}
-          onRelease={isOperator ? releaseAndClose : null}
-          releaseDisabled={releasePending}
-        />
-      </div>
-      <div className="shrink-0">
-        <PtzQueueList queue={ptz?.queue} operatorLabel={ptz?.operatorLabel} />
-      </div>
-    </>
-  );
-
-  const sidebarWidthClass = isMobile
-    ? 'grid-cols-[minmax(0,1fr)_14rem]'
-    : 'grid-cols-[minmax(0,1fr)_20rem]';
-
-  const controller = (
-    <div className="fixed inset-0 z-110 h-dvh w-screen overflow-hidden bg-black text-slate-100">
-      <CardFrame
-        hideHeader
-        fillHeight
-        clipOverflow={false}
-        className="h-dvh w-screen rounded-none border-0 bg-black!"
-        bodyClassName={`grid h-full min-h-0 overflow-hidden ${sidebarWidthClass}`}
-      >
-        <main className="relative min-h-0 min-w-0 bg-black">
-          {shouldUseLiveVideo ? (
-            <PtzLiveVideo enabled startMuted={false} />
-          ) : (
-            <PtzSnapshotPreview feed={snapshot} label={ptz?.name || 'PTZ Camera'} />
-          )}
-        </main>
-        <aside className="flex h-full min-h-0 items-stretch overflow-hidden border-l border-neutral-600 bg-neutral-950 text-sm">
-          <div className="flex min-h-0 w-full flex-col gap-0.5 overflow-y-auto p-0.5">
-            {isMobile ? mobileSidebar : desktopSidebar}
-          </div>
-        </aside>
-      </CardFrame>
-    </div>
-  );
-
-  /*
-    The controller is a true fullscreen surface, so mount it directly under
-    document.body instead of inside the VIP tab/card tree. That keeps tab panel
-    spacing, mobile banners, and parent overflow rules from creating visible
-    gaps around a fixed-position camera interface.
-  */
-  return createPortal(controller, document.body);
-}
-
-export default function VipPtzCameraCard({ onMessage, fullWidth = false, layout = 'desktop' }) {
-  const featureEnabled = useSessionSelector((state) => isFeatureEnabled(state, 'ptzCamera'));
-  const ptz = useSessionSelector((state) => state.session?.ptzCamera || null);
-  const isVerified = useSessionSelector((state) => Boolean(state.session?.isVerified));
-  const { ptzClaim, ptzRelease } = useSessionActions();
-  const snapshotFeeds = usePtzCameraSnapshots([PTZ_CAMERA_ID], { enabled: Boolean(featureEnabled) });
-  const snapshot = snapshotFeeds[PTZ_CAMERA_ID] || null;
-  const [controllerOpen, setControllerOpen] = useState(false);
-  const [pending, setPending] = useState(false);
-
-  const wrapClass = fullWidth ? 'w-full' : 'mx-auto w-full max-w-xl';
-  const queueText = useMemo(() => {
-    if (ptz?.isOperator) return 'Your turn';
-    if (ptz?.queuedPosition) return `Queue position ${ptz.queuedPosition}`;
-    if (ptz?.operatorLabel) return `${ptz.operatorLabel} operating`;
-    return 'Available';
-  }, [ptz?.isOperator, ptz?.operatorLabel, ptz?.queuedPosition]);
-
-  if (!featureEnabled) return null;
-
-  const handleClaim = async () => {
-    setPending(true);
-    onMessage?.('');
-    try {
-      const response = await ptzClaim();
-      /*
-        Requesting the PTZ camera is only enough to open fullscreen after the
-        server confirms the user actually became the operator or entered the
-        queue. Dock-required failures reject before queue entry, so they must
-        leave the user on this card with the dock/charge message visible.
-      */
-      if (response?.state?.isOperator || response?.state?.queuedPosition) setControllerOpen(true);
-      if (response?.state?.isOperator) onMessage?.('PTZ camera turn active.');
-      else if (response?.state?.queuedPosition) onMessage?.(`Joined PTZ queue at position ${response.state.queuedPosition}.`);
-    } catch (err) {
-      /*
-        Rover-to-rover switch denial uses the browser alert popup for the
-        dock-and-charge message. PTZ claim denial should feel identical because
-        it is enforcing the same "do not abandon an undocked rover" rule.
-      */
-      alert(err.message || 'PTZ request failed.');
-      onMessage?.(err.message || 'PTZ request failed.');
-    } finally {
-      setPending(false);
-    }
-  };
-
-  const handleRelease = async () => {
-    setPending(true);
-    try {
-      await ptzRelease();
-      onMessage?.('Left PTZ camera.');
-    } catch (err) {
-      onMessage?.(err.message || 'Failed to leave PTZ camera.');
-    } finally {
-      setPending(false);
-    }
-  };
-
-  return (
-    <>
-      <CardFrame title="PTZ camera" className={wrapClass} bodyClassName="text-sm text-slate-300">
-        <div className="grid w-full gap-0.5 md:grid-cols-[minmax(16rem,0.8fr)_minmax(0,1.2fr)] md:items-start">
-          <PtzSnapshotPreview feed={snapshot} label={ptz?.name || 'PTZ Camera'} />
-          <div className="flex w-full min-w-0 flex-col gap-0.5">
-            <div className="grid w-full grid-cols-2 gap-0.5 text-left text-xs">
-              <div className="surface-muted p-1">
-                <p className="text-slate-500">State</p>
-                <p className="truncate text-slate-100">{queueText}</p>
-              </div>
-              <div className="surface-muted p-1">
-                <p className="text-slate-500">Remaining</p>
-                <p className="text-slate-100">{formatRemaining(ptz?.deadline)}</p>
-              </div>
-              <div className="surface-muted p-1">
-                <p className="text-slate-500">Spotlight</p>
-                <p className="truncate text-slate-100">{isSpotlightOn(ptz?.light) ? 'On' : 'Off'}</p>
-              </div>
-              <div className="surface-muted p-1">
-                <p className="text-slate-500">Infrared</p>
-                <p className="truncate text-slate-100">{normalizeIrMode(ptz?.ir?.state)}</p>
-              </div>
-            </div>
-            <PtzQueueList queue={ptz?.queue} operatorLabel={ptz?.operatorLabel} />
-            {ptz?.blocked?.message ? (
-              <p className="w-full rounded-sm border border-amber-500/50 bg-amber-950/40 p-1 text-xs text-amber-100">
-                {ptz.blocked.message}
-              </p>
-            ) : null}
-            <div className="grid w-full grid-cols-2 gap-0.5">
-              {ptz?.isOperator ? (
-                <>
-                  <button type="button" className="button-dark text-xs" onClick={() => setControllerOpen(true)}>
-                    Open controller
-                  </button>
-                  <button type="button" className="button-dark text-xs" disabled={pending} onClick={handleRelease}>
-                    Release
-                  </button>
-                </>
-              ) : (
-                <button
-                  type="button"
-                  className="button-dark col-span-2 text-xs"
-                  disabled={pending || !isVerified}
-                  onClick={ptz?.queuedPosition ? handleRelease : handleClaim}
-                >
-                  {ptz?.queuedPosition ? 'Leave queue' : pending ? 'Requesting...' : 'Claim camera'}
-                </button>
-              )}
-            </div>
-          </div>
-        </div>
-      </CardFrame>
-      <PtzController open={controllerOpen} onClose={() => setControllerOpen(false)} layout={layout} />
-    </>
-  );
-}

webui/src/context/SessionContext.jsx

@@ -411,8 +411,10 @@ export function SessionProvider({ children }) {
         emitWithAck('audioLevels:setPersonalAdjustmentRange', { maxAdjustmentPercent }),
       setPrivateSafety: (roverId, safety = {}) =>
         emitWithAck('session:privateSafety:set', { roverId, safety }),
-      ptzClaim: () => emitWithAck('ptzCamera:claim'),
+      setOperatingMode: (operatingMode) => emitWithAck('session:setOperatingMode', { operatingMode }),
+      ptzRequestTurn: () => emitWithAck('ptzCamera:requestTurn'),
       ptzRelease: () => emitWithAck('ptzCamera:release'),
+      ptzRevokeOperator: () => emitWithAck('ptzCamera:revokeOperator'),
       ptzSpotlight: (payload = {}) => emitWithAck('ptzCamera:spotlight', payload),
       ptzIr: (payload = {}) => emitWithAck('ptzCamera:ir', payload),
       ptzListPresets: () => emitWithAck('ptzCamera:presets:list'),

webui/src/controls/ptzControlAdapter.js

@@ -2,7 +2,7 @@
 // Purpose: Hooks the single PTZ camera into the internal control action layer.
 // Scope: Owns PTZ-specific control mixing and socket commands so keyboard,
 // mobile, desktop, and gamepad inputs do not each learn camera-specific rules.
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSocket } from '../context/SocketContext.jsx';
 import { useSessionActions, useSessionSelector } from '../context/SessionContext.jsx';
 
@@ -102,9 +102,27 @@ function nextIrMode(currentMode) {
 
 export function usePtzControlAdapter() {
   const socket = useSocket();
-  const { ptzSpotlight, ptzIr } = useSessionActions();
+  const { ptzSpotlight, ptzIr, pushAlert } = useSessionActions();
   const ptz = useSessionSelector((state) => state.session?.ptzCamera || null);
-  const isActive = Boolean(ptz?.isOperator);
+  const isActive = Boolean(ptz?.permissions?.canControl);
+  const [lightingPending, setLightingPending] = useState({});
+  const lightingPendingRef = useRef({});
+  const spotlightOn = isSpotlightOn(ptz?.light);
+  const irMode = normalizeIrMode(ptz?.ir?.state);
+
+  const sendLighting = useCallback((key, send) => {
+    // Keyboard repeats and simultaneous touch/key input share one in-flight
+    // command per light, so neither can race a pending state change.
+    if (lightingPendingRef.current[key]) return;
+    lightingPendingRef.current[key] = true;
+    setLightingPending((current) => ({ ...current, [key]: true }));
+    send().catch((err) => {
+      pushAlert({ title: 'PTZ camera', message: err.message, color: '#f59e0b' });
+    }).finally(() => {
+      lightingPendingRef.current[key] = false;
+      setLightingPending((current) => ({ ...current, [key]: false }));
+    });
+  }, [pushAlert]);
   const lastMotionSignatureRef = useRef(payloadSignature(PTZ_STOP));
   const desiredMotionRef = useRef(PTZ_STOP);
   const panTiltIntentRef = useRef({ pan: 0, tilt: 0 });
@@ -227,7 +245,7 @@ export function usePtzControlAdapter() {
   const setSpotlight = useCallback(
     (nextOn) => {
       if (!isActive) return false;
-      const desiredOn = typeof nextOn === 'boolean' ? nextOn : !isSpotlightOn(ptz?.light);
+      const desiredOn = typeof nextOn === 'boolean' ? nextOn : !spotlightOn;
       /*
         Lighting keybinds should use the exact acknowledged command action as
         the visible PTZ buttons. Movement remains fire-and-forget because it is
@@ -235,10 +253,10 @@ export function usePtzControlAdapter() {
         from the existing authorization/error contract and must not maintain a
         second socket-only behavior merely because its source is a keybind.
       */
-      ptzSpotlight({ state: desiredOn ? 1 : 0 }).catch(() => {});
+      sendLighting('spotlight', () => ptzSpotlight({ state: desiredOn ? 1 : 0 }));
       return true;
     },
-    [isActive, ptz?.light, ptzSpotlight],
+    [isActive, spotlightOn, ptzSpotlight, sendLighting],
   );
 
   const setIr = useCallback(
@@ -246,13 +264,13 @@ export function usePtzControlAdapter() {
       if (!isActive) return false;
       const desiredState = typeof nextOn === 'boolean'
         ? (nextOn ? 'On' : 'Off')
-        : nextIrMode(ptz?.ir?.state);
+        : nextIrMode(irMode);
       // Match the button path for the same reason as spotlight above. The
       // shared laser key continues to select IR; only its transport is unified.
-      ptzIr({ state: desiredState }).catch(() => {});
+      sendLighting('ir', () => ptzIr({ state: desiredState }));
       return true;
     },
-    [isActive, ptz?.ir?.state, ptzIr],
+    [isActive, irMode, ptzIr, sendLighting],
   );
 
   useEffect(() => {
@@ -300,12 +318,13 @@ export function usePtzControlAdapter() {
     () => ({
       isActive,
       state: ptz,
+      lighting: { spotlightOn, irMode, pending: lightingPending },
       applyDriveVector,
       setZoomIntent,
       setSpotlight,
       setIr,
       stopMotion,
     }),
-    [applyDriveVector, isActive, ptz, setIr, setSpotlight, setZoomIntent, stopMotion],
+    [applyDriveVector, isActive, ptz, spotlightOn, irMode, lightingPending, setIr, setSpotlight, setZoomIntent, stopMotion],
   );
 }

webui/src/display/ServerDisplayApp/components/DisplayPtzOperatorBadge.jsx

@@ -7,7 +7,7 @@ import { useSessionSelector } from '../../../context/SessionContext.jsx';
 
 export default function DisplayPtzOperatorBadge() {
   const ptz = useSessionSelector((state) => state.session?.ptzCamera || null);
-  const operatorLabel = String(ptz?.operatorLabel || '').trim();
+  const operatorLabel = String(ptz?.turn?.queue?.find((entry) => entry.socketId === ptz.turn.currentId)?.name || '').trim();
   const visible = Boolean(ptz?.enabled && operatorLabel);
 
   return (

webui/src/display/ServerDisplayApp/utils.js

@@ -13,13 +13,9 @@ export function formatUserName(user) {
 }
 
 export function findDriverForRover({ roverId, session }) {
-  const activeDriverId = session?.activeDrivers?.[roverId] || null;
-  if (!activeDriverId) return null;
-  const user = (session?.users || []).find((entry) => entry.socketId === activeDriverId);
-  return {
-    socketId: activeDriverId,
-    label: formatUserName(user || { socketId: activeDriverId }),
-  };
+  const turn = session?.roster?.find((rover) => String(rover.id) === String(roverId))?.turn;
+  const driver = turn?.queue?.find((entry) => entry.socketId === turn.currentId);
+  return driver ? { socketId: driver.socketId, label: driver.name } : null;
 }
 
 export function getDisplayBatteryVisual({ rover, frame }) {

webui/src/driver/DriverPageRoot.jsx

@@ -24,7 +24,8 @@ import {
   usePageThemeClass,
 } from '../themes/index.js';
 import useLayoutMode from '../hooks/useLayoutMode.js';
-import { DriverLayoutProvider } from '../layouts/driver/DriverLayoutContext.jsx';
+import { DriverHelpProvider } from '../layouts/driver/DriverHelpContext.jsx';
+import { LayoutProvider } from '../layouts/LayoutContext.jsx';
 import DriverLayoutRoot from '../layouts/driver/DriverLayoutRoot.jsx';
 import UndockedPageExitGuard from '../components/UndockedPageExitGuard/index.jsx';
 
@@ -98,11 +99,13 @@ function DriverPageContent({ layout, oldDesktop }) {
       <KeyboardInputManager />
       <GamepadInputManager />
       <main className={`relative flex w-full flex-col ${themeGapClass} text-base`}>
-        <DriverLayoutProvider layout={layout} openHelp={openHelp}>
-          {/* Route selection affects only which desktop composition is mounted;
-              all providers, overlays, inputs, and mobile layouts remain shared. */}
-          <DriverLayoutRoot oldDesktop={oldDesktop} />
-        </DriverLayoutProvider>
+        <LayoutProvider layout={layout}>
+          <DriverHelpProvider openHelp={openHelp}>
+            {/* Route selection affects only which desktop composition is mounted;
+                all providers, overlays, inputs, and mobile layouts remain shared. */}
+            <DriverLayoutRoot oldDesktop={oldDesktop} />
+          </DriverHelpProvider>
+        </LayoutProvider>
       </main>
       <AlertFeed />
       <DuplicateIdentityOverlay />

webui/src/hooks/useCanControlRover.js

@@ -1,25 +1,7 @@
-// Rover Control Availability
-// Purpose: Mirrors the server turnService.canDrive rule for immediate, consistent UI disabling.
 import { useSessionSelector } from '../context/SessionContext.jsx';
 
 export function selectCanControlRover(state, roverId) {
-  const session = state.session;
-  if (!roverId || session?.role === 'spectator') return false;
-  if (session?.mode !== 'turns') return true;
-
-  const turnInfo = session?.turnQueues?.[roverId] || null;
-  const queue = Array.isArray(turnInfo?.queue) ? turnInfo.queue : [];
-
-  /* The server permits control when a turns queue is absent or contains at most
-     one driver. Only a genuinely shared queue requires the active socket id.
-     Keeping this exact ordering prevents initial session loading from disabling
-     an otherwise uncontested rover. The server remains the final authority. */
-  if (queue.length <= 1) return true;
-  /* activeDrivers is the server's direct ownership map and can arrive before
-     the richer queue snapshot during an initial load or reconnect. The queue
-     field remains a compatibility fallback for intermediate payloads. */
-  const activeDriverId = session?.activeDrivers?.[roverId] || turnInfo?.current || null;
-  return Boolean(session?.socketId && activeDriverId === session.socketId);
+  return Boolean(state.session?.roster?.find((rover) => String(rover.id) === String(roverId))?.permissions?.canControl);
 }
 
 export default function useCanControlRover(roverId) {

webui/src/hooks/useDriverVideoModePolicy.js

@@ -1,12 +1,9 @@
-import { useMemo } from 'react';
 import { useSessionSelector } from '../context/SessionContext.jsx';
 import { useSharedClock } from './useSharedClock.js';
 
 export function useDriverVideoModePolicy(roverId) {
   const mode = useSessionSelector((state) => state.session?.mode || null);
-  const turnQueues = useSessionSelector((state) => state.session?.turnQueues ?? {});
   const socketId = useSessionSelector((state) => state.session?.socketId || null);
-  const activeDrivers = useSessionSelector((state) => state.session?.activeDrivers ?? {});
   const nonTurnSnapshotsActive = useSessionSelector(
     (state) => Boolean(state.session?.bandwidthSavings?.nonTurnVideo?.snapshotsActive),
   );
@@ -18,16 +15,9 @@ export function useDriverVideoModePolicy(roverId) {
   */
   const now = useSharedClock(1000, isTurnsMode);
 
-  const turnInfo = roverId ? turnQueues?.[roverId] || null : null;
-  const activeDriverId = roverId ? activeDrivers?.[roverId] || null : null;
-  const isActiveDriver = Boolean(socketId && activeDriverId === socketId);
-  const nextDriverId = useMemo(() => {
-    const queue = turnInfo?.queue || [];
-    if (!queue.length || !turnInfo?.current || queue.length <= 1) return null;
-    const idx = queue.findIndex((id) => id === turnInfo.current);
-    if (idx === -1) return queue[0] || null;
-    return queue[(idx + 1) % queue.length] || null;
-  }, [turnInfo]);
+  const turnInfo = useSessionSelector((state) => state.session?.roster?.find((rover) => String(rover.id) === String(roverId))?.turn);
+  const isActiveDriver = Boolean(turnInfo?.ownsControl);
+  const nextDriverId = turnInfo?.currentId ? turnInfo.nextId : null;
   const isNextDriver = Boolean(socketId && nextDriverId === socketId);
   const deadline = turnInfo?.deadline || null;
   const msUntilTurn = deadline ? deadline - now : null;

webui/src/hooks/useUserIdentitySync.js

@@ -33,7 +33,7 @@ export default function useUserIdentitySync({ identitySurface = 'passive' } = {}
   const cookieUserId = (identity?.cookieUserId || '').trim();
   const nickname = (profile?.nickname || '').trim();
   const overseerEnabled = Boolean(overseerPreference?.enabled);
-  const normalizedIdentitySurface = identitySurface === 'driver' ? 'driver' : 'passive';
+  const normalizedIdentitySurface = ['driver', 'ptz'].includes(identitySurface) ? identitySurface : 'passive';
 
   const sendIdentify = useCallback(async () => {
     if (!ready || !connected || !socket?.id) return;

webui/src/hooks/useWhepRestart.js

@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { RESTART_DELAY_MS } from '../lib/whepPlayback.js';
+
+export default function useWhepRestart(enabled = true) {
+  const timer = useRef(null);
+  const enabledRef = useRef(enabled);
+  const [restartToken, setRestartToken] = useState(0);
+  const cancelRestart = useCallback(() => {
+    clearTimeout(timer.current);
+    timer.current = null;
+  }, []);
+  useEffect(() => {
+    enabledRef.current = enabled;
+    if (!enabled) cancelRestart();
+  }, [enabled, cancelRestart]);
+  const scheduleRestart = useCallback(() => {
+    if (!enabledRef.current) return;
+    cancelRestart();
+    // Re-negotiate instead of reusing the failed PeerConnection. Callers that
+    // own session requests also use this token to obtain fresh authorization.
+    timer.current = setTimeout(() => {
+      timer.current = null;
+      setRestartToken(Date.now());
+    }, RESTART_DELAY_MS);
+  }, [cancelRestart]);
+  useEffect(() => cancelRestart, [cancelRestart]);
+  return { restartToken, scheduleRestart, cancelRestart };
+}

webui/src/layouts/LayoutContext.jsx

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+
+const LayoutContext = createContext(null);
+
+export function LayoutProvider({ layout, children }) {
+  return <LayoutContext.Provider value={layout}>{children}</LayoutContext.Provider>;
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useLayout() {
+  const layout = useContext(LayoutContext);
+  if (!layout) throw new Error('useLayout must be used within LayoutProvider.');
+  return layout;
+}

webui/src/layouts/driver/DesktopLayout/index.jsx

@@ -58,9 +58,9 @@ function CommunityColumn() {
       <OverseerPreferencePanel />
       <ReplaySourcesPanel panelId="newdrive-replay-sources" />
       <RoverQueuesPanel title="Rovers" />
-      <RawUserPilePanel compact hideNicknameForm />
       <LinkButtonsPanel fillHeight={false} />
       <PtzQueueCard layout="desktop" />
+      <RawUserPilePanel compact hideNicknameForm />
     </div>
   );
 }

webui/src/layouts/driver/DriverHelpContext.jsx

@@ -0,0 +1,15 @@
+// Driver Help is independent of responsive layout and only exists on this route.
+import { createContext, useContext } from 'react';
+
+const DriverHelpContext = createContext(null);
+
+export function DriverHelpProvider({ openHelp, children }) {
+  return <DriverHelpContext.Provider value={openHelp}>{children}</DriverHelpContext.Provider>;
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useOpenDriverHelp() {
+  const openHelp = useContext(DriverHelpContext);
+  if (!openHelp) throw new Error('useOpenDriverHelp must be used within DriverHelpProvider.');
+  return openHelp;
+}

webui/src/layouts/driver/DriverLayoutContext.jsx

@@ -1,38 +0,0 @@
-// Driver Layout Context
-// Purpose: Exposes the existing global Help-overlay action to deeply placed tab content.
-// Scope: Avoids threading a layout callback through otherwise concrete composition files.
-import { createContext, useContext } from 'react';
-
-const DriverLayoutContext = createContext(null);
-
-export function DriverLayoutProvider({ layout, openHelp, children }) {
-  /*
-    Layout mode is classified once at the driver-route boundary. Concrete
-    layouts and tabs read it here instead of each installing a resize listener
-    or receiving chains of layout/configuration props.
-  */
-  return <DriverLayoutContext.Provider value={{ layout, openHelp }}>{children}</DriverLayoutContext.Provider>;
-}
-
-/*
-  This hook intentionally lives beside its tiny route-local provider so the
-  driver layout contract remains discoverable in one file. It is not a React
-  component export, so the Fast Refresh rule needs this narrow exception.
-*/
-// eslint-disable-next-line react-refresh/only-export-components
-export function useOpenDriverHelp() {
-  const context = useContext(DriverLayoutContext);
-  if (!context) {
-    throw new Error('useOpenDriverHelp must be used within DriverLayoutProvider.');
-  }
-  return context.openHelp;
-}
-
-// eslint-disable-next-line react-refresh/only-export-components
-export function useDriverLayout() {
-  const context = useContext(DriverLayoutContext);
-  if (!context) {
-    throw new Error('useDriverLayout must be used within DriverLayoutProvider.');
-  }
-  return context.layout;
-}

webui/src/layouts/driver/DriverLayoutRoot.jsx

@@ -5,10 +5,10 @@ import DesktopLayout from './DesktopLayout/index.jsx';
 import OldDesktopLayout from './OldDesktopLayout/index.jsx';
 import MobilePortraitLayout from './MobilePortraitLayout/index.jsx';
 import MobileLandscapeLayout from './MobileLandscapeLayout/index.jsx';
-import { useDriverLayout } from './DriverLayoutContext.jsx';
+import { useLayout } from '../LayoutContext.jsx';
 
 export default function DriverLayoutRoot({ oldDesktop = false }) {
-  const layout = useDriverLayout();
+  const layout = useLayout();
 
   if (layout === 'desktop') {
     // /old changes only the desktop composition. Mobile keeps one canonical

webui/src/layouts/driver/MobileLayoutFrame/index.jsx

@@ -9,11 +9,11 @@ import { useTelemetryVisualPolicy } from '../../../context/TelemetryContext.jsx'
 import { useFullscreenPrompt } from '../../../hooks/useFullscreenPrompt.js';
 import { useSettingsNamespace } from '../../../settings/index.js';
 import { themeGapClass } from '../../../themes/index.js';
-import { useDriverLayout } from '../DriverLayoutContext.jsx';
+import { useLayout } from '../../LayoutContext.jsx';
 import './styles.css';
 
 export default function MobileLayoutFrame({ children }) {
-  const layout = useDriverLayout();
+  const layout = useLayout();
   useTelemetryVisualPolicy({ mobile: true });
   const fullscreen = useFullscreenPrompt(layout);
   const { value: pageSettings } = useSettingsNamespace('page', { swapMobileControlColumns: false });

webui/src/layouts/driver/MobileSecondaryContent/index.jsx

@@ -5,11 +5,11 @@ import PtzQueueCard from '../../../components/PtzCamera/index.jsx';
 import ReplaySourcesPanel from '../../../components/ReplaySourcesPanel/index.jsx';
 import RoverQueuesPanel from '../../../components/RoverQueuesPanel/index.jsx';
 import { themeGapClass } from '../../../themes/index.js';
-import { useDriverLayout } from '../DriverLayoutContext.jsx';
+import { useLayout } from '../../LayoutContext.jsx';
 import MobileTabs from '../MobileTabs/index.jsx';
 
 export default function MobileSecondaryContent() {
-  const layout = useDriverLayout();
+  const layout = useLayout();
   const portrait = layout === 'mobile-portrait';
   const replayPanelId = portrait
     ? 'replay-sources-mobile-portrait'

webui/src/layouts/driver/tabs/mobile/RoomControlsTab/index.jsx

@@ -4,10 +4,10 @@ import { TabPanel } from '../../../../../components/Tabs/index.jsx';
 import HomeAssistantControls from '../../../../../components/HomeAssistantControls/index.jsx';
 import RoomCameraPanel from '../../../../../components/RoomCameraPanel/index.jsx';
 import { themeStackClass } from '../../../../../themes/index.js';
-import { useDriverLayout } from '../../../DriverLayoutContext.jsx';
+import { useLayout } from '../../../../LayoutContext.jsx';
 
 export default function RoomControlsTab() {
-  const layout = useDriverLayout();
+  const layout = useLayout();
   const panelId = layout === 'mobile-landscape' ? 'mobile-landscape-room' : 'mobile-portrait-room';
   return (
     <TabPanel id="roomcontrols">

webui/src/layouts/driver/tabs/shared/ActivitiesTab/index.jsx

@@ -11,10 +11,10 @@ import ButtonBoxPanel from '../../../../../components/ButtonBoxPanel/index.jsx';
 import KinectPanel from '../../../../../components/KinectPanel/index.jsx';
 import FleetReportsCard from '../../../../../components/FleetReportsCard/index.jsx';
 import { themeGapClass } from '../../../../../themes/index.js';
-import { useDriverLayout } from '../../../DriverLayoutContext.jsx';
+import { useLayout } from '../../../../LayoutContext.jsx';
 
 export default function ActivitiesTab() {
-  const layout = useDriverLayout();
+  const layout = useLayout();
   return (
     <TabPanel id="activities">
       <div className={`flex flex-col ${layout === 'desktop' ? 'gap-y-2' : themeGapClass}`}>

webui/src/layouts/driver/tabs/shared/HelpTab/index.jsx

@@ -2,12 +2,12 @@
 // Purpose: Owns the shared driver help panel placement.
 import { TabPanel } from '../../../../../components/Tabs/index.jsx';
 import HelpPanel from '../../../../../components/HelpPanel/index.jsx';
-import { useOpenDriverHelp } from '../../../DriverLayoutContext.jsx';
-import { useDriverLayout } from '../../../DriverLayoutContext.jsx';
+import { useOpenDriverHelp } from '../../../DriverHelpContext.jsx';
+import { useLayout } from '../../../../LayoutContext.jsx';
 
 export default function HelpTab() {
   const openHelp = useOpenDriverHelp();
-  const layout = useDriverLayout();
+  const layout = useLayout();
   return (
     <TabPanel id="help">
       <HelpPanel layout={layout} onOpenOverlay={openHelp} />

webui/src/layouts/driver/tabs/shared/SettingsTab/index.jsx

@@ -3,10 +3,10 @@
 import { TabPanel } from '../../../../../components/Tabs/index.jsx';
 import SettingsPanel from '../../../../../components/SettingsPanel/index.jsx';
 import { themeStackClass } from '../../../../../themes/index.js';
-import { useDriverLayout } from '../../../DriverLayoutContext.jsx';
+import { useLayout } from '../../../../LayoutContext.jsx';
 
 export default function SettingsTab() {
-  const layout = useDriverLayout();
+  const layout = useLayout();
   const wrapped = layout !== 'desktop';
   return (
     <TabPanel id="settings">

webui/src/layouts/driver/tabs/shared/VipTab/index.jsx

@@ -2,10 +2,10 @@
 // Purpose: Owns the shared keep-mounted VIP panel lifecycle.
 import { TabPanel, useTabIsActive } from '../../../../../components/Tabs/index.jsx';
 import VipPanel from '../../../../../components/VipPanel/index.jsx';
-import { useDriverLayout } from '../../../DriverLayoutContext.jsx';
+import { useLayout } from '../../../../LayoutContext.jsx';
 
 export default function VipTab() {
-  const layout = useDriverLayout();
+  const layout = useLayout();
   const isActive = useTabIsActive('vip');
   return (
     <TabPanel id="vip" keepMounted>

webui/src/lib/socket.js

@@ -20,9 +20,8 @@ function getIdentitySurface() {
   */
   return window.location.pathname === '/'
     || window.location.pathname === '/old'
-    || window.location.pathname === '/ptz'
     ? 'driver'
-    : 'passive';
+    : window.location.pathname === '/ptz' ? 'ptz' : 'passive';
 }
 
 async function buildSocketIdentity() {
@@ -43,6 +42,7 @@ async function buildSocketIdentity() {
     audioAdjustments: currentSettings?.audioAdjustments || {},
     overseerEnabled: Boolean(currentSettings?.overseerPreference?.enabled),
     identitySurface: getIdentitySurface(),
+    operatingMode: window.location.pathname === '/ptz' ? 'ptz' : 'rover',
   };
 }
 

webui/src/lib/whepPlayback.js

@@ -0,0 +1,28 @@
+import { WhepPlayer } from './whepPlayer.js';
+
+export const RESTART_DELAY_MS = 2000;
+
+const TERMINAL_STATES = ['error', 'failed', 'disconnected', 'closed'];
+
+// A mounted effect owns exactly one connection. Invalidate its callbacks before
+// stopping it so a late rejection or cleanup status cannot restart old media.
+export function startWhepPlayback({ onStatus, onError, scheduleRestart, terminalStates = TERMINAL_STATES, ...options }) {
+  let active = true;
+  const player = new WhepPlayer({
+    ...options,
+    onStatus: (status, detail) => {
+      if (!active) return;
+      onStatus(status, detail);
+      if (terminalStates.includes(String(status || '').toLowerCase())) scheduleRestart();
+    },
+  });
+  player.start().catch((error) => {
+    if (!active) return;
+    onError(error);
+    scheduleRestart();
+  });
+  return () => {
+    active = false;
+    player.stop();
+  };
+}

webui/src/main.jsx

@@ -20,6 +20,7 @@ import { SettingsProvider } from './settings/index.js'
 import DeterrenceChaos from './components/DeterrenceChaos/index.jsx'
 import AnalyticsReporter from './analytics/AnalyticsReporter.jsx'
 import PtzAppRoot from './ptz/PtzAppRoot.jsx'
+import OperatingModeRouteSync from './components/OperatingModeRouteSync/index.jsx'
 import InitialSessionOverlay from './components/InitialSessionOverlay/index.jsx'
 
 // Reporting and administration carry substantial route-specific libraries.
@@ -53,6 +54,7 @@ createRoot(document.getElementById('root')).render(
               <DeterrenceChaos />
               <BrowserRouter>
                 <AnalyticsReporter />
+                <OperatingModeRouteSync />
                 <Routes>
                   <Route path="/" element={<DriverPageRoot />} />
                   {/* The retired desktop composition remains available for direct comparison
@@ -62,7 +64,6 @@ createRoot(document.getElementById('root')).render(
                   <Route path="/mini" element={<MiniSummaryApp />} />
                   <Route path="/display" element={<ServerDisplayApp />} />
                   <Route path="/scanner" element={<ScannerApp />} />
-                  <Route path="/database" element={<Navigate to="/admin?section=users" replace />} />
                   <Route path="/setup" element={lazyRoute(<SetupApp />, 'setup')} />
                   <Route path="/admin" element={lazyRoute(<AdminApp />, 'administration')} />
                   {/*

webui/src/mini/MiniSummaryApp/MiniSummaryContent.jsx

@@ -173,13 +173,12 @@ export default function MiniSummaryContent() {
   const frames = useVisualTelemetryFrames();
   const roster = session?.roster ?? [];
   const ptz = session?.ptzCamera || null;
-  const ptzOperatorLabel = String(ptz?.operatorLabel || '').trim();
+  const ptzOperatorLabel = String(ptz?.turn?.queue?.find((entry) => entry.socketId === ptz.turn.currentId)?.name || '').trim();
   const hasActivePtzOperator = Boolean(ptz?.enabled && ptzOperatorLabel);
   const [index, setIndex] = useState(0);
-  const activeDrivers = session?.activeDrivers || {};
   const driverRoster = useMemo(
-    () => roster.filter((rover) => activeDrivers[rover.id]),
-    [roster, activeDrivers],
+    () => roster.filter((rover) => rover.turn?.currentId),
+    [roster],
   );
   const mediaRovers = useMemo(
     () => roster.filter((rover) => rover?.id),