export default{tag:"system-locks-panel",context:e=>({locks:[],busy:!1,releaseConfirm:null,releaseError:null,async load(){this.busy=!0;try{const e=await fetch(`${__ENV__.API}/locks`);e.ok&&(this.locks=(await e.json()).result??[])}catch{}finally{this.busy=!1}},ageLabel(e){const o=Date.now()-(e.acquiredAt??0);return o<2e3?"<1s":o<6e4?Math.floor(o/1e3)+"s":o<36e5?Math.floor(o/6e4)+"m":Math.floor(o/36e5)+"h"},holderLabel(e){const o=e.holder;return o?o.hostname?`pid:${o.pid}@${o.hostname}`:`pid:${o.pid}`:"—"},confirmRelease(e){this.releaseConfirm=e,this.releaseError=null},cancelRelease(){this.releaseConfirm=null,this.releaseError=null},async doRelease(){const e=this.releaseConfirm;if(e){this.releaseError=null;try{const o=e.env?`?env=${encodeURIComponent(e.env)}`:"",r=await fetch(`${__ENV__.API}/locks/${encodeURIComponent(e.namespace)}/${encodeURIComponent(e.id)}${o}`,{method:"DELETE"}),n=await r.json();if(!n.result?.released)return void(this.releaseError=n.result?.reason??"Release failed");this.releaseConfirm=null,await this.load()}catch(e){this.releaseError=e?.message??String(e)}}}}),async mount(){await this.load()},template:'\n        <div style="display:flex;flex-direction:column;gap:10px;">\n            <div style="display:flex;align-items:center;gap:8px;">\n                <span style="font-size:12px;font-weight:600;color:var(--okdb-app-fg-subtle);text-transform:uppercase;letter-spacing:.04em;">Locks</span>\n                <button @click="load()" style="font-size:11px;padding:2px 8px;background:var(--okdb-app-bg-2);border:1px solid var(--okdb-app-border);border-radius:4px;cursor:pointer;color:var(--okdb-app-fg);" :disabled="busy">Refresh</button>\n            </div>\n\n            <if :="releaseConfirm">\n                <div style="padding:10px 12px;background:var(--okdb-app-bg-2);border:1px solid var(--okdb-danger);border-radius:6px;font-size:12px;display:flex;flex-direction:column;gap:8px;">\n                    <span style="color:var(--okdb-danger);font-weight:600;">Force-release lock?</span>\n                    <span style="color:var(--okdb-app-fg-subtle);">{{ releaseConfirm.namespace }}:{{ releaseConfirm.id }} on {{ releaseConfirm.env }}</span>\n                    <if :="releaseError">\n                        <span style="color:var(--okdb-danger);">{{ releaseError }}</span>\n                    </if>\n                    <div style="display:flex;gap:8px;">\n                        <button @click="doRelease()" style="padding:3px 10px;background:var(--okdb-danger);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:11px;">Release</button>\n                        <button @click="cancelRelease()" style="padding:3px 10px;background:var(--okdb-app-bg-2);border:1px solid var(--okdb-app-border);border-radius:4px;cursor:pointer;font-size:11px;color:var(--okdb-app-fg);">Cancel</button>\n                    </div>\n                </div>\n            </if>\n\n            <if :="!locks.length &amp;&amp; !busy">\n                <div style="font-size:12px;color:var(--okdb-app-fg-subtle);padding:8px 0;">No active locks.</div>\n            </if>\n\n            <if :="locks.length"><div style="display:flex;flex-direction:column;font-size:12px;">\n                \x3c!-- header row --\x3e\n                <div style="display:grid;grid-template-columns:120px 120px 1fr 200px 60px 80px;gap:8px;padding:4px 8px;color:var(--okdb-app-fg-subtle);border-bottom:1px solid var(--okdb-app-border);font-weight:500;">\n                    <div>env</div>\n                    <div>namespace</div>\n                    <div>id</div>\n                    <div>holder</div>\n                    <div>age</div>\n                    <div></div>\n                </div>\n                <each :of="locks" let:item="lock">\n                    <div style="display:grid;grid-template-columns:120px 120px 1fr 200px 60px 80px;gap:8px;padding:4px 8px;border-bottom:1px solid var(--okdb-app-border-faint,rgba(255,255,255,.05));align-items:center;">\n                        <div style="color:var(--okdb-app-fg-subtle);">{{ lock.env }}</div>\n                        <div>{{ lock.namespace }}</div>\n                        <div style="font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" :title="lock.id">{{ lock.id }}</div>\n                        <div style="font-family:monospace;">{{ holderLabel(lock.entry) }}</div>\n                        <div style="color:var(--okdb-app-fg-subtle);">{{ ageLabel(lock.entry) }}</div>\n                        <div>\n                            <button @click="confirmRelease(lock)" style="font-size:10px;padding:2px 7px;background:transparent;border:1px solid var(--okdb-danger);color:var(--okdb-danger);border-radius:3px;cursor:pointer;">Release</button>\n                        </div>\n                    </div>\n                </each>\n            </div></if>\n        </div>\n    '};