@kedem/okdb 1.8.18 → 1.9.0

package/public/sections/queue/parts/queue-jobs.ok.js

@@ -1 +1 @@
-import e from"@toolkit/elements/ok-icon.ok.js";import t from"@toolkit/elements/ok-table.ok.js";import o from"@toolkit/core/ok-overlay.ok.js";import a from"../modals/edit-job-modal.ok.js";import s from"../modals/enqueue-job-modal.ok.js";import n from"./code-panel.ok.js";import i from"./job-log-panel.ok.js";import r from"../../../stores/events-store.js";import l from"../../../stores/okdb-store.js";const d=new Set;export default{tag:"queue-jobs",dependencies:[e,t,o,s,a,n,i],attr:{type:{}},context:e=>({query:function({apiBase:e,pageSize:t=50}){return{busy:!1,values:[],total:0,hasNext:!1,hasPrev:!1,pageSize:t,loadError:null,type:null,status:null,sort:"when",direction:"asc",_cursors:[null],_pageIdx:0,_nextCursor:null,resetPaging(){this._cursors=[null],this._pageIdx=0,this._nextCursor=null,this.hasNext=!1,this.hasPrev=!1},async load(){const t="function"==typeof e?e():e,o=this._cursors[this._pageIdx];this.busy=!0,this.loadError=null;try{const e=new URLSearchParams({limit:String(this.pageSize),sort:this.sort??"when",direction:this.direction??"asc"});this.type&&e.set("type",this.type),this.status&&e.set("status",this.status),null!=o&&e.set("cursor",JSON.stringify(o));const a=await fetch(`${t}/queue/jobs?${e}`),s=await a.json();if(!a.ok)throw new Error(s?.error?.message||`HTTP ${a.status}`);const n=s.result??s.data??s;this.values=Array.isArray(n.items)?n.items:Array.isArray(n)?n:[],this._nextCursor=n.cursor??null,this.hasNext=null!=this._nextCursor,this.hasPrev=this._pageIdx>0}catch(e){this.loadError=e?.message||String(e),this.values=[]}finally{this.busy=!1}},async nextPage(){this.hasNext&&!this.busy&&(this._pageIdx+1>=this._cursors.length&&this._cursors.push(this._nextCursor),this._pageIdx++,await this.load())},async prevPage(){this.hasPrev&&!this.busy&&(this._pageIdx--,await this.load())}}}({apiBase:()=>l.apiBase,pageSize:50}),type:null,status:null,sortMode:"when",direction:"asc",stats:null,_statsTimer:null,async loadStats(){try{const e=await fetch(l.apiBase+"/queue/stats");if(e.ok){const t=await e.json();this.stats=t.result??t.data??null}}catch{}},_jobCache:{},jobMetaText:e=>JSON.stringify(e,null,2),errorText:e=>JSON.stringify({status_code:e.status_code??null,status_message:e.status_message??null,error_stack:e.error_stack??null},null,2),payloadText(e){const t=this._jobCache[e.id];return void 0===t?(d.has(e.id)||(d.add(e.id),queueMicrotask(()=>this._fetchJobPayload(e.id))),""):"__error__"===t?"// failed to load payload":JSON.stringify(t?.payload??null,null,2)},async _fetchJobPayload(e){let t="__error__";try{const o=await fetch(`${l.apiBase}/queue/job/${encodeURIComponent(e)}`);if(o.ok){const e=await o.json();t=e?.result??e?.data??null}}catch{}finally{d.delete(e),this._jobCache={...this._jobCache,[e]:t}}},_scheduleStats(){clearTimeout(this._statsTimer),this._statsTimer=setTimeout(()=>this.loadStats(),400)},statusCount(e){if(!this.stats)return"";const t=this.type;return e?t?this.stats.byType?.[t]?.byStatus?.[e]??0:this.stats.byStatus?.[e]??0:t?this.stats.byType?.[t]?.total??0:this.stats.total??0},applyTypeAttr(){var t;this.type=null==(t=e.$attr.type)||""===t?null:String(t),this._applyFilterAndReload()},setStatus(e){this.status=null==e||""===e?null:e,this._applyFilterAndReload()},setSort(e){this.sortMode=e,this._applySort(),this.query.resetPaging(),this.query.load()},toggleDirection(){this.direction="asc"===this.direction?"desc":"asc",this._applySort(),this.query.resetPaging(),this.query.load()},_applySort(){this.query.sort=this.sortMode,this.query.direction=this.direction},_applyFilterAndReload(){this.query.type=this.type,this.query.status=this.status,this._applySort(),this.query.resetPaging(),this.query.load()},async refresh(){clearTimeout(this._liveTimer),this.pendingUpdates=0;try{await fetch(l.apiBase+"/queue/reconcile",{method:"POST"})}catch{}await this.query.load(),await this.loadStats(),e.$dispatch("refresh")},async openEnqueue(){const t=this;await e.$ok.shared.modal.open({owner:e,title:"Enqueue Job",content:'<enqueue-job-modal :modal="modal" :initial-type="initialType" :on-done="onDone" />',context:o=>({modal:o,initialType:t.type||"",onDone:async()=>{e.$ok.shared?.toast?.success?.("Job enqueued"),await t.refresh()}})})},async openEditJob(t){const o=this;await e.$ok.shared.modal.open({owner:e,title:`Edit Job ${t.id.slice(0,8)}`,content:'<edit-job-modal :modal="modal" :job-id="jobId" :on-done="onDone" />',context:e=>({modal:e,jobId:t.id,onDone:async()=>{await o.refresh()}})})},async deleteJob(t){if(await e.$ok.shared.modal.confirm(`Delete job <code>${t.id.slice(0,8)}</code>?`)){t._busy=!0;try{if(!(await fetch(l.apiBase+"/queue/job/"+t.id+"/remove",{method:"POST"})).ok)throw new Error("remove failed");const o=this.query.values.indexOf(t);o>=0&&this.query.values.splice(o,1),e.$ok.shared.toast?.info("Deleted "+t.id.slice(0,8)),e.$dispatch("refresh"),this._scheduleStats()}catch{e.$ok.shared.toast?.error("Delete failed")}finally{t._busy=!1}}},async cancelJob(t){if(await e.$ok.shared.modal.confirm(`Cancel job <code>${t.id.slice(0,8)}</code>?`)){t._busy=!0;try{if(!(await fetch(l.apiBase+"/queue/job/"+t.id+"/cancel",{method:"POST"})).ok)throw new Error("cancel failed");e.$ok.shared.toast?.info("Cancelled "+t.id.slice(0,8)),await this.refresh()}catch{e.$ok.shared.toast?.error("Cancel failed")}finally{t._busy=!1}}},async retryJob(t){if(await e.$ok.shared.modal.confirm(`Retry job <code>${t.id.slice(0,8)}</code>?`)){t._busy=!0;try{const o=await fetch(l.apiBase+"/queue/job/"+t.id+"/retry",{method:"POST"}),a=await o.json();if(!o.ok)throw new Error(a?.error?.message||"retry failed");e.$ok.shared.toast?.success("Retried "+t.id.slice(0,8)),await this.refresh()}catch(t){e.$ok.shared.toast?.error("Retry failed: "+(t?.message||t))}finally{t._busy=!1}}},bulkBusy:!1,async retryAllFailed(){if(await e.$ok.shared.modal.confirm(`Retry all failed jobs${this.type?` for type "<b>${this.type}</b>"`:""}?`)){this.bulkBusy=!0;try{const t={limit:5e3};this.type&&(t.type=this.type);const o=await fetch(l.apiBase+"/queue/retryFailed",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t)}),a=await o.json();if(!o.ok)throw new Error(a?.error?.message||"failed");e.$ok.shared?.toast?.success?.(`Retried ${a.data.retried} failed jobs`),await this.refresh()}catch(t){e.$ok.shared?.toast?.error?.("Bulk retry failed: "+(t?.message||t))}finally{this.bulkBusy=!1}}},async deleteAllDone(){if(await e.$ok.shared.modal.confirm(`Clear all "done" jobs${this.type?` for type "<b>${this.type}</b>"`:""}?<br><br>This cannot be undone.`)){this.bulkBusy=!0;try{const t={limit:5e4};this.type&&(t.type=this.type);const o=await fetch(l.apiBase+"/queue/clearDone",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t)}),a=await o.json();if(!o.ok)throw new Error(a?.error?.message||"failed");e.$ok.shared?.toast?.info?.(`Cleared ${a.data.deleted} done jobs`),await this.refresh()}catch(t){e.$ok.shared?.toast?.error?.("Clear done failed: "+(t?.message||t))}finally{this.bulkBusy=!1}}},async deleteAllFailed(){if(await e.$ok.shared.modal.confirm(`Delete all "failed" jobs${this.type?` for type "<b>${this.type}</b>"`:""}?<br><br>This cannot be undone.`)){this.bulkBusy=!0;try{const t={limit:5e4};this.type&&(t.type=this.type);const o=await fetch(l.apiBase+"/queue/clearFailed",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t)}),a=await o.json();if(!o.ok)throw new Error(a?.error?.message||"failed");e.$ok.shared?.toast?.info?.(`Cleared ${a.data.deleted} failed jobs`),await this.refresh()}catch(t){e.$ok.shared?.toast?.error?.("Clear failed jobs error: "+(t?.message||t))}finally{this.bulkBusy=!1}}},async clearStuck(){if(await e.$ok.shared.modal.confirm(`Delete all stuck (expired-claim) running jobs${this.type?` for type "<b>${this.type}</b>"`:""}?<br><br>Stuck jobs are running jobs whose TTL has expired. They will be permanently deleted, not re-queued.`)){this.bulkBusy=!0;try{const t={limit:5e4};this.type&&(t.type=this.type);const o=await fetch(l.apiBase+"/queue/clearStuck",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t)}),a=await o.json();if(!o.ok)throw new Error(a?.error?.message||"failed");e.$ok.shared?.toast?.info?.(`Cleared ${a.data.deleted} stuck jobs`),await this.refresh()}catch(t){e.$ok.shared?.toast?.error?.("Clear stuck failed: "+(t?.message||t))}finally{this.bulkBusy=!1}}},isStatusOn(e){return(this.status??null)===(e??null)},statusBadgeStyle(e){const t={pending:"var(--okdb-warning)",running:"var(--okdb-info)",done:"var(--okdb-success)",failed:"var(--okdb-danger)"}[e]||"#9ca3af";return`color:${t}; border-color:${t};`},formatWhen(e){if(!e)return"—";const t=e-Date.now(),o=Math.abs(t),a=Math.round(o/1e3);if(a<5)return t<=0?"now":"in a moment";if(a<60)return t<0?`${a}s ago`:`in ${a}s`;const s=Math.round(a/60);if(s<60)return t<0?`${s}m ago`:`in ${s}m`;const n=Math.round(s/60);if(n<24)return t<0?`${n}h ago`:`in ${n}h`;const i=Math.round(n/24);return t<0?`${i}d ago`:`in ${i}d`},shortId:e=>(e||"").slice(0,8),_unsubs:[],_liveTimer:null,pendingUpdates:0,_scheduleLiveReload(){this.pendingUpdates++,clearTimeout(this._liveTimer),this._liveTimer=setTimeout(async()=>{await this.query.load(),await this.loadStats(),this._jobCache={},e.$dispatch("refresh"),this.pendingUpdates=0},3e3)}}),async init(e){this.applyTypeAttr(),e.$watch(()=>e.$attr.type,()=>this.applyTypeAttr()),e.$watch(()=>e.$ok.stores.okdb.selectedEnv,()=>{this.stats=null,this.query.resetPaging(),Promise.all([this.query.load(),this.loadStats()])}),await Promise.all([this.query.load(),this.loadStats()])},mount(){const e=()=>this._scheduleLiveReload();this._unsubs=[r.on("queue:enqueued",e),r.on("queue:done",e),r.on("queue:failed",e),r.on("queue:retry",e),r.on("queue:removed",e),r.on("queue:reconciled",e)]},unmount(){clearTimeout(this._liveTimer),clearTimeout(this._statsTimer);for(const e of this._unsubs)e();this._unsubs=[]},template:'\n<div style="display:flex; flex-direction:column; height:100%; min-height:0; gap:10px;">\n\n  \x3c!-- ── Row 1: Status filters + Enqueue ── --\x3e\n  <div style="display:flex; gap:6px; align-items:center; flex-wrap:wrap;">\n    <button @click="setStatus(null)"      :class="isStatusOn(null)      ? \'pill pill--on\'           : \'pill\'">All<span class="pill-count">{{ statusCount(null) }}</span></button>\n    <button @click="setStatus(\'pending\')" :class="isStatusOn(\'pending\') ? \'pill pill--on pill--p\'   : \'pill pill--p\'">Pending<span class="pill-count">{{ statusCount(\'pending\') }}</span></button>\n    <button @click="setStatus(\'running\')" :class="isStatusOn(\'running\') ? \'pill pill--on pill--r\'   : \'pill pill--r\'">Running<span class="pill-count">{{ statusCount(\'running\') }}</span></button>\n    <button @click="setStatus(\'failed\')"  :class="isStatusOn(\'failed\')  ? \'pill pill--on pill--f\'   : \'pill pill--f\'">Failed<span  class="pill-count">{{ statusCount(\'failed\') }}</span></button>\n    <button @click="setStatus(\'done\')"    :class="isStatusOn(\'done\')    ? \'pill pill--on pill--d\'   : \'pill pill--d\'">Done<span    class="pill-count">{{ statusCount(\'done\') }}</span></button>\n\n    <div style="flex:1;"></div>\n\n    <select @change="setSort($el.value)" :value="sortMode" style="font-size:12px;">\n      <option value="when">Sort: When</option>\n      <option value="priority">Sort: Priority</option>\n    </select>\n    <button @click="toggleDirection" style="font-size:12px; min-width:32px;" title="Toggle sort direction">\n      {{ direction === \'asc\' ? \'▲\' : \'▼\' }}\n    </button>\n\n    <button @click="openEnqueue"\n      style="background:color-mix(in srgb, var(--okdb-accent) 13%, transparent); border-color:color-mix(in srgb, var(--okdb-accent) 33%, transparent); color:var(--okdb-accent); font-weight:600; padding:4px 14px; font-size:12px; white-space:nowrap;">\n      + Enqueue\n    </button>\n  </div>\n\n  \x3c!-- ── Row 2: Bulk actions ── --\x3e\n  <div style="display:flex; gap:6px; align-items:center; flex-wrap:wrap; padding:5px 0; border-top:1px solid var(--okdb-app-surface-2); border-bottom:1px solid var(--okdb-app-surface-2);">\n    <button @click="retryAllFailed()" :disabled="bulkBusy"\n      style="font-size:12px; color:var(--okdb-warning); border-color:color-mix(in srgb, var(--okdb-warning) 20%, transparent); background:transparent; padding:3px 10px;"\n      title="Reset all failed jobs back to pending">\n      ↺ Retry Failed\n    </button>\n    <div style="width:1px; height:16px; background:var(--okdb-app-border);"></div>\n    <button @click="deleteAllDone()" :disabled="bulkBusy"\n      style="font-size:12px; color:var(--okdb-success); border-color:color-mix(in srgb, var(--okdb-success) 20%, transparent); background:transparent; padding:3px 10px;"\n      title="Delete all done jobs in one index pass">\n      ✕ Clear Done\n    </button>\n    <button @click="deleteAllFailed()" :disabled="bulkBusy"\n      style="font-size:12px; color:var(--okdb-danger); border-color:color-mix(in srgb, var(--okdb-danger) 20%, transparent); background:transparent; padding:3px 10px;"\n      title="Permanently delete all failed jobs">\n      ✕ Clear Failed\n    </button>\n    <button @click="clearStuck()" :disabled="bulkBusy"\n      style="font-size:12px; color:var(--okdb-app-fg-muted); border-color:color-mix(in srgb, var(--okdb-app-fg-muted) 20%, transparent); background:transparent; padding:3px 10px;"\n      title="Delete running jobs whose claim TTL has expired (permanently, not re-queued)">\n      ✕ Clear Stuck\n    </button>\n    <if :="pendingUpdates > 0">\n      <span style="font-size:11px; color:var(--okdb-warning); opacity:.8; margin-left:4px;">\n        ⟳ {{ pendingUpdates }} pending\n      </span>\n    </if>\n  </div>\n\n  \x3c!-- Table --\x3e\n  <div style="display:flex; flex-direction:column; position:relative; flex:1; min-height:0;">\n    <if :="query.busy">\n      <ok-overlay>\n        <div class="loader-center">\n          <ok-icon name="loader" class="spin" style="width:32px;height:32px;"></ok-icon>\n        </div>\n      </ok-overlay>\n    </if>\n\n    <if :="query.loadError && !query.busy">\n      <div style="color:var(--okdb-danger); padding:12px 14px; border:1px solid color-mix(in srgb, var(--okdb-danger) 33%, transparent); border-radius:8px; margin-bottom:8px; font-size:13px; display:flex; align-items:center; gap:10px;">\n        <span style="flex:1;">{{ query.loadError }}</span>\n        <button @click="query.load()" style="font-size:11px; color:var(--okdb-danger); border-color:color-mix(in srgb, var(--okdb-danger) 33%, transparent); padding:3px 10px;">Retry</button>\n      </div>\n    </if>\n\n    <ok-table :data="query.values" no-scroll style="flex:1; min-height:0; overflow:auto;">\n      <columns>\n        <column width="80px" no-resize>\n          <header>Status</header>\n          <cell let:row>\n            <span class="status-badge" :style="statusBadgeStyle(row.status)">{{ row.status }}</span>\n          </cell>\n        </column>\n        <column width="1fr">\n          <header>Type + Metadata</header>\n          <cell let:row>\n            <div style="display:flex; flex-direction:column; gap:2px;">\n              <div>{{ row.type }}</div>\n              <div style="display:flex; gap:4px; flex-wrap:wrap;">\n                <if :="row.tags && row.tags.length > 0">\n                  <span style="display:inline-block; font-size:11px; padding:1px 6px; background:var(--okdb-app-bg-deep); border-radius:3px; opacity:.7;">{{ row.tags.join(\', \') }}</span>\n                </if>\n                <if :="row.progress">\n                  <span style="display:inline-block; font-size:11px; padding:1px 6px; background:var(--okdb-app-bg-deep); border-radius:3px; opacity:.7;">{{ row.progress }}</span>\n                </if>\n                <if :="row.cron">\n                  <span style="display:inline-block; font-size:11px; padding:1px 6px; background:var(--okdb-app-bg-deep); border-radius:3px; opacity:.7; color:var(--okdb-indigo);">cron: {{ row.cron }}</span>\n                </if>\n                <if :="row.idempotency_key">\n                  <span style="display:inline-block; font-size:11px; padding:1px 6px; background:var(--okdb-app-bg-deep); border-radius:3px; opacity:.7; color:#34d399;">key: {{ row.idempotency_key }}</span>\n                </if>\n              </div>\n            </div>\n          </cell>\n        </column>\n        <column width="130px" no-resize>\n          <header>When</header>\n          <cell let:row>{{ formatWhen(row.when) }}</cell>\n        </column>\n        <column width="70px" no-resize>\n          <header>Tries</header>\n          <cell let:row>\n            <span :style="row.tries >= row.max_tries && row.max_tries > 0 ? \'color:var(--okdb-danger);\' : \'\'">\n              {{ row.tries }} / {{ row.max_tries }}\n            </span>\n          </cell>\n        </column>\n        <column width="180px" no-resize>\n          <header>Actions</header>\n          <cell let:row>\n            <button @click="openEditJob(row)" :disabled="row._busy" style="font-size:11px;">Edit</button>\n            <button @click="retryJob(row)"  :disabled="row._busy" style="font-size:11px;">Retry</button>\n            <if :="row.status === \'pending\' || row.status === \'running\'">\n              <button @click="cancelJob(row)" :disabled="row._busy" style="font-size:11px;">Cancel</button>\n            </if>\n            <button @click="deleteJob(row)" :disabled="row._busy" style="color:#ff6c6b; font-size:11px;">Delete</button>\n          </cell>\n        </column>\n      </columns>\n\n      <expanded let:row>\n        <div style="padding:10px; font-size:12px; display:flex; flex-direction:column; gap:6px;">\n          <if :="row.error_stack || row.status_message">\n            <div>\n              <if :="row.status_message">\n                <div style="white-space:pre-wrap; opacity:.9; margin-bottom:6px;">{{ row.status_message }}</div>\n              </if>\n              <if :="row.error_stack">\n                <pre style="white-space:pre-wrap; opacity:.85; max-height:220px; overflow:auto; background:var(--okdb-app-bg-deep); padding:8px; border-radius:4px;">{{ row.error_stack }}</pre>\n              </if>\n            </div>\n          </if>\n          <div style="display:flex; flex-wrap:wrap; gap:12px; opacity:.8; font-size:11px;">\n            <span>ID: <b>{{ row.id }}</b></span>\n            <span>Status code: <b>{{ row.status_code || \'—\' }}</b></span>\n            <span>Max tries: <b>{{ row.max_tries ?? \'—\' }}</b></span>\n            <span>Retry delay: <b>{{ row.retry_delay ?? 0 }}ms</b></span>\n            <span>Backoff: <b>{{ row.backoff_multiplier ?? 1 }}</b></span>\n            <span>Priority: <b>{{ row.priority ?? 0 }}</b></span>\n            <span :="row.bucket" style="display:inline;">Bucket: <b>{{ row.bucket || \'—\' }}</b></span>\n            <span>Claim expires: <b>{{ formatWhen(row.claim_expires) }}</b></span>\n          </div>\n          <div style="display:flex; flex-direction:column; gap:8px; margin-top:6px;">\n            <code-panel title="Job" lang="json" :text="jobMetaText(row)"></code-panel>\n            <code-panel title="Payload" lang="json" :text="payloadText(row)"></code-panel>\n            <if :="row.status === \'failed\'">\n              <code-panel title="Error" lang="json" :text="errorText(row)"></code-panel>\n            </if>\n            <job-log-panel :job-id="row.id" :env="$ok.stores.okdb.selectedEnv" :job="row"></job-log-panel>\n          </div>\n        </div>\n      </expanded>\n    </ok-table>\n\n    \x3c!-- Pagination --\x3e\n    <div class="ok-pager">\n      <button @click="query.prevPage()" :disabled="!query.hasPrev || query.busy">‹ Prev</button>\n      <span>{{ statusCount(status) }} total · {{ query.pageSize }}/page</span>\n      <button @click="query.nextPage()" :disabled="!query.hasNext || query.busy">Next ›</button>\n    </div>\n  </div>\n\n</div>\n',style:".pill{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--okdb-app-border);background:var(--okdb-app-surface);padding:4px 10px;border-radius:999px;font-size:12px;cursor:pointer;color:var(--okdb-app-fg-muted);transition:border-color .12s,color .12s}.pill:hover{border-color:#3b4754;color:var(--okdb-app-fg)}.pill--on{box-shadow:0 0 0 1px rgba(255,255,255,.07) inset}.pill--p.pill--on{color:var(--okdb-warning);border-color:var(--okdb-warning)}.pill--r.pill--on{color:var(--okdb-info);border-color:var(--okdb-info)}.pill--f.pill--on{color:var(--okdb-danger);border-color:var(--okdb-danger)}.pill--d.pill--on{color:var(--okdb-success);border-color:var(--okdb-success)}.pill-count{font-size:11px;opacity:.65;font-variant-numeric:tabular-nums}.status-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;border:1px solid;white-space:nowrap}"};
+import e from"@toolkit/elements/ok-icon.ok.js";import t from"@toolkit/elements/ok-table.ok.js";import o from"@toolkit/core/ok-overlay.ok.js";import a from"../modals/edit-job-modal.ok.js";import s from"../modals/enqueue-job-modal.ok.js";import n from"./code-panel.ok.js";import i from"./job-log-panel.ok.js";import r from"../../../stores/events-store.js";import l from"../../../stores/okdb-store.js";const d=new Set;export default{tag:"queue-jobs",dependencies:[e,t,o,s,a,n,i],attr:{type:{}},context:e=>({query:function({apiBase:e,pageSize:t=50}){return{busy:!1,values:[],total:0,hasNext:!1,hasPrev:!1,pageSize:t,loadError:null,type:null,status:null,sort:"when",direction:"asc",_cursors:[null],_pageIdx:0,_nextCursor:null,resetPaging(){this._cursors=[null],this._pageIdx=0,this._nextCursor=null,this.hasNext=!1,this.hasPrev=!1},async load(){const t="function"==typeof e?e():e,o=this._cursors[this._pageIdx];this.busy=!0,this.loadError=null;try{const e=new URLSearchParams({limit:String(this.pageSize),sort:this.sort??"when",direction:this.direction??"asc"});this.type&&e.set("type",this.type),this.status&&e.set("status",this.status),null!=o&&e.set("cursor",JSON.stringify(o));const a=await fetch(`${t}/queue/jobs?${e}`),s=await a.json();if(!a.ok)throw new Error(s?.error?.message||`HTTP ${a.status}`);const n=s.result??s.data??s;this.values=Array.isArray(n.items)?n.items:Array.isArray(n)?n:[],this._nextCursor=n.cursor??null,this.hasNext=null!=this._nextCursor,this.hasPrev=this._pageIdx>0}catch(e){this.loadError=e?.message||String(e),this.values=[]}finally{this.busy=!1}},async nextPage(){this.hasNext&&!this.busy&&(this._pageIdx+1>=this._cursors.length&&this._cursors.push(this._nextCursor),this._pageIdx++,await this.load())},async prevPage(){this.hasPrev&&!this.busy&&(this._pageIdx--,await this.load())}}}({apiBase:()=>l.apiBase,pageSize:50}),type:null,status:null,sortMode:"when",direction:"asc",stats:null,_statsTimer:null,async loadStats(){try{const e=await fetch(l.apiBase+"/queue/stats");if(e.ok){const t=await e.json();this.stats=t.result??t.data??null}}catch{}},_jobCache:{},jobMetaText:e=>JSON.stringify(e,null,2),errorText:e=>JSON.stringify({status_code:e.status_code??null,status_message:e.status_message??null,error_stack:e.error_stack??null},null,2),payloadText(e){const t=this._jobCache[e.id];return void 0===t?(d.has(e.id)||(d.add(e.id),queueMicrotask(()=>this._fetchJobPayload(e.id))),""):"__error__"===t?"// failed to load payload":JSON.stringify(t?.payload??null,null,2)},async _fetchJobPayload(e){let t="__error__";try{const o=await fetch(`${l.apiBase}/queue/job/${encodeURIComponent(e)}`);if(o.ok){const e=await o.json();t=e?.result??e?.data??null}}catch{}finally{d.delete(e),this._jobCache={...this._jobCache,[e]:t}}},_scheduleStats(){clearTimeout(this._statsTimer),this._statsTimer=setTimeout(()=>this.loadStats(),400)},statusCount(e){if(!this.stats)return"";const t=this.type;return e?t?this.stats.byType?.[t]?.byStatus?.[e]??0:this.stats.byStatus?.[e]??0:t?this.stats.byType?.[t]?.total??0:this.stats.total??0},applyTypeAttr(){var t;this.type=null==(t=e.$attr.type)||""===t?null:String(t),this._applyFilterAndReload()},setStatus(e){this.status=null==e||""===e?null:e,this._applyFilterAndReload()},setSort(e){this.sortMode=e,this._applySort(),this.query.resetPaging(),this.query.load()},toggleDirection(){this.direction="asc"===this.direction?"desc":"asc",this._applySort(),this.query.resetPaging(),this.query.load()},_applySort(){this.query.sort=this.sortMode,this.query.direction=this.direction},_applyFilterAndReload(){this.query.type=this.type,this.query.status=this.status,this._applySort(),this.query.resetPaging(),this.query.load()},async refresh(){clearTimeout(this._liveTimer),this.pendingUpdates=0;try{await fetch(l.apiBase+"/queue/reconcile",{method:"POST"})}catch{}await this.query.load(),await this.loadStats(),e.$dispatch("refresh")},async openEnqueue(){const t=this;await e.$ok.shared.modal.open({owner:e,title:"Enqueue Job",content:'<enqueue-job-modal :modal="modal" :initial-type="initialType" :on-done="onDone" />',context:o=>({modal:o,initialType:t.type||"",onDone:async()=>{e.$ok.shared?.toast?.success?.("Job enqueued"),await t.refresh()}})})},async openEditJob(t){const o=this;await e.$ok.shared.modal.open({owner:e,title:`Edit Job ${t.id.slice(0,8)}`,content:'<edit-job-modal :modal="modal" :job-id="jobId" :on-done="onDone" />',context:e=>({modal:e,jobId:t.id,onDone:async()=>{await o.refresh()}})})},async deleteJob(t){if(await e.$ok.shared.modal.confirm(`Delete job <code>${t.id.slice(0,8)}</code>?`)){t._busy=!0;try{if(!(await fetch(l.apiBase+"/queue/job/"+t.id+"/remove",{method:"POST"})).ok)throw new Error("remove failed");const o=this.query.values.indexOf(t);o>=0&&this.query.values.splice(o,1),e.$ok.shared.toast?.info("Deleted "+t.id.slice(0,8)),e.$dispatch("refresh"),this._scheduleStats()}catch{e.$ok.shared.toast?.error("Delete failed")}finally{t._busy=!1}}},async cancelJob(t){if(await e.$ok.shared.modal.confirm(`Cancel job <code>${t.id.slice(0,8)}</code>?`)){t._busy=!0;try{if(!(await fetch(l.apiBase+"/queue/job/"+t.id+"/cancel",{method:"POST"})).ok)throw new Error("cancel failed");e.$ok.shared.toast?.info("Cancelled "+t.id.slice(0,8)),await this.refresh()}catch{e.$ok.shared.toast?.error("Cancel failed")}finally{t._busy=!1}}},async retryJob(t){if(await e.$ok.shared.modal.confirm(`Retry job <code>${t.id.slice(0,8)}</code>?`)){t._busy=!0;try{const o=await fetch(l.apiBase+"/queue/job/"+t.id+"/retry",{method:"POST"}),a=await o.json();if(!o.ok)throw new Error(a?.error?.message||"retry failed");e.$ok.shared.toast?.success("Retried "+t.id.slice(0,8)),await this.refresh()}catch(t){e.$ok.shared.toast?.error("Retry failed: "+(t?.message||t))}finally{t._busy=!1}}},bulkBusy:!1,async retryAllFailed(){if(await e.$ok.shared.modal.confirm(`Retry all failed jobs${this.type?` for type "<b>${this.type}</b>"`:""}?`)){this.bulkBusy=!0;try{const t={limit:5e3};this.type&&(t.type=this.type);const o=await fetch(l.apiBase+"/queue/retryFailed",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t)}),a=await o.json();if(!o.ok)throw new Error(a?.error?.message||"failed");e.$ok.shared?.toast?.success?.(`Retried ${a.data.retried} failed jobs`),await this.refresh()}catch(t){e.$ok.shared?.toast?.error?.("Bulk retry failed: "+(t?.message||t))}finally{this.bulkBusy=!1}}},async deleteAllDone(){if(await e.$ok.shared.modal.confirm(`Clear all "done" jobs${this.type?` for type "<b>${this.type}</b>"`:""}?<br><br>This cannot be undone.`)){this.bulkBusy=!0;try{const t={limit:5e4};this.type&&(t.type=this.type);const o=await fetch(l.apiBase+"/queue/clearDone",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t)}),a=await o.json();if(!o.ok)throw new Error(a?.error?.message||"failed");e.$ok.shared?.toast?.info?.(`Cleared ${a.data.deleted} done jobs`),await this.refresh()}catch(t){e.$ok.shared?.toast?.error?.("Clear done failed: "+(t?.message||t))}finally{this.bulkBusy=!1}}},async deleteAllFailed(){if(await e.$ok.shared.modal.confirm(`Delete all "failed" jobs${this.type?` for type "<b>${this.type}</b>"`:""}?<br><br>This cannot be undone.`)){this.bulkBusy=!0;try{const t={limit:5e4};this.type&&(t.type=this.type);const o=await fetch(l.apiBase+"/queue/clearFailed",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t)}),a=await o.json();if(!o.ok)throw new Error(a?.error?.message||"failed");e.$ok.shared?.toast?.info?.(`Cleared ${a.data.deleted} failed jobs`),await this.refresh()}catch(t){e.$ok.shared?.toast?.error?.("Clear failed jobs error: "+(t?.message||t))}finally{this.bulkBusy=!1}}},async clearStuck(){if(await e.$ok.shared.modal.confirm(`Delete all stuck (expired-claim) running jobs${this.type?` for type "<b>${this.type}</b>"`:""}?<br><br>Stuck jobs are running jobs whose TTL has expired. They will be permanently deleted, not re-queued.`)){this.bulkBusy=!0;try{const t={limit:5e4};this.type&&(t.type=this.type);const o=await fetch(l.apiBase+"/queue/clearStuck",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t)}),a=await o.json();if(!o.ok)throw new Error(a?.error?.message||"failed");e.$ok.shared?.toast?.info?.(`Cleared ${a.data.deleted} stuck jobs`),await this.refresh()}catch(t){e.$ok.shared?.toast?.error?.("Clear stuck failed: "+(t?.message||t))}finally{this.bulkBusy=!1}}},isStatusOn(e){return(this.status??null)===(e??null)},statusBadgeStyle(e){const t={pending:"var(--okdb-warning)",running:"var(--okdb-info)",done:"var(--okdb-success)",failed:"var(--okdb-danger)"}[e]||"#9ca3af";return`color:${t}; border-color:${t};`},formatWhen(e){if(!e)return"—";const t=e-Date.now(),o=Math.abs(t),a=Math.round(o/1e3);if(a<5)return t<=0?"now":"in a moment";if(a<60)return t<0?`${a}s ago`:`in ${a}s`;const s=Math.round(a/60);if(s<60)return t<0?`${s}m ago`:`in ${s}m`;const n=Math.round(s/60);if(n<24)return t<0?`${n}h ago`:`in ${n}h`;const i=Math.round(n/24);return t<0?`${i}d ago`:`in ${i}d`},shortId:e=>(e||"").slice(0,8),_unsubs:[],_liveTimer:null,pendingUpdates:0,_scheduleLiveReload(){this.pendingUpdates++,clearTimeout(this._liveTimer),this._liveTimer=setTimeout(async()=>{await this.query.load(),await this.loadStats(),this._jobCache={},e.$dispatch("refresh"),this.pendingUpdates=0},3e3)}}),async init(e){this.applyTypeAttr(),e.$watch(()=>e.$attr.type,()=>this.applyTypeAttr()),e.$watch(()=>e.$ok.stores.okdb.selectedEnv,()=>{this.stats=null,this.query.resetPaging(),Promise.all([this.query.load(),this.loadStats()])}),await Promise.all([this.query.load(),this.loadStats()])},mount(){const e=()=>this._scheduleLiveReload();this._unsubs=[r.on("queue:enqueued",e),r.on("queue:done",e),r.on("queue:failed",e),r.on("queue:retry",e),r.on("queue:removed",e),r.on("queue:reconciled",e)]},unmount(){clearTimeout(this._liveTimer),clearTimeout(this._statsTimer);for(const e of this._unsubs)e();this._unsubs=[]},template:'\n<div style="display:flex; flex-direction:column; height:100%; min-height:0; gap:10px;">\n\n  \x3c!-- ── Row 1: Status filters + Enqueue ── --\x3e\n  <div style="display:flex; gap:6px; align-items:center; flex-wrap:wrap;">\n    <button @click="setStatus(null)"      :class="isStatusOn(null)      ? \'pill pill--on\'           : \'pill\'">All<span class="pill-count">{{ statusCount(null) }}</span></button>\n    <button @click="setStatus(\'pending\')" :class="isStatusOn(\'pending\') ? \'pill pill--on pill--p\'   : \'pill pill--p\'">Pending<span class="pill-count">{{ statusCount(\'pending\') }}</span></button>\n    <button @click="setStatus(\'running\')" :class="isStatusOn(\'running\') ? \'pill pill--on pill--r\'   : \'pill pill--r\'">Running<span class="pill-count">{{ statusCount(\'running\') }}</span></button>\n    <button @click="setStatus(\'failed\')"  :class="isStatusOn(\'failed\')  ? \'pill pill--on pill--f\'   : \'pill pill--f\'">Failed<span  class="pill-count">{{ statusCount(\'failed\') }}</span></button>\n    <button @click="setStatus(\'done\')"    :class="isStatusOn(\'done\')    ? \'pill pill--on pill--d\'   : \'pill pill--d\'">Done<span    class="pill-count">{{ statusCount(\'done\') }}</span></button>\n\n    <div style="flex:1;"></div>\n\n    <select @change="setSort($el.value)" :value="sortMode" style="font-size:12px;">\n      <option value="when">Sort: When</option>\n      <option value="priority">Sort: Priority</option>\n    </select>\n    <button @click="toggleDirection" style="font-size:12px; min-width:32px;" title="Toggle sort direction">\n      {{ direction === \'asc\' ? \'▲\' : \'▼\' }}\n    </button>\n\n    <button @click="openEnqueue"\n      style="background:color-mix(in srgb, var(--okdb-accent) 13%, transparent); border-color:color-mix(in srgb, var(--okdb-accent) 33%, transparent); color:var(--okdb-accent); font-weight:600; padding:4px 14px; font-size:12px; white-space:nowrap;">\n      + Enqueue\n    </button>\n  </div>\n\n  \x3c!-- ── Row 2: Bulk actions ── --\x3e\n  <div style="display:flex; gap:6px; align-items:center; flex-wrap:wrap; padding:5px 0; border-top:1px solid var(--okdb-app-surface-2); border-bottom:1px solid var(--okdb-app-surface-2);">\n    <button @click="retryAllFailed()" :disabled="bulkBusy"\n      style="font-size:12px; color:var(--okdb-warning); border-color:color-mix(in srgb, var(--okdb-warning) 20%, transparent); background:transparent; padding:3px 10px;"\n      title="Reset all failed jobs back to pending">\n      ↺ Retry Failed\n    </button>\n    <div style="width:1px; height:16px; background:var(--okdb-app-border);"></div>\n    <button @click="deleteAllDone()" :disabled="bulkBusy"\n      style="font-size:12px; color:var(--okdb-success); border-color:color-mix(in srgb, var(--okdb-success) 20%, transparent); background:transparent; padding:3px 10px;"\n      title="Delete all done jobs in one index pass">\n      ✕ Clear Done\n    </button>\n    <button @click="deleteAllFailed()" :disabled="bulkBusy"\n      style="font-size:12px; color:var(--okdb-danger); border-color:color-mix(in srgb, var(--okdb-danger) 20%, transparent); background:transparent; padding:3px 10px;"\n      title="Permanently delete all failed jobs">\n      ✕ Clear Failed\n    </button>\n    <button @click="clearStuck()" :disabled="bulkBusy"\n      style="font-size:12px; color:var(--okdb-app-fg-muted); border-color:color-mix(in srgb, var(--okdb-app-fg-muted) 20%, transparent); background:transparent; padding:3px 10px;"\n      title="Delete running jobs whose claim TTL has expired (permanently, not re-queued)">\n      ✕ Clear Stuck\n    </button>\n    <if :="pendingUpdates > 0">\n      <span style="font-size:11px; color:var(--okdb-warning); opacity:.8; margin-left:4px;">\n        ⟳ {{ pendingUpdates }} pending\n      </span>\n    </if>\n  </div>\n\n  \x3c!-- Table --\x3e\n  <div style="display:flex; flex-direction:column; position:relative; flex:1; min-height:0;">\n    <if :="query.busy">\n      <ok-overlay>\n        <div class="loader-center">\n          <ok-icon name="loader" class="spin" style="width:32px;height:32px;"></ok-icon>\n        </div>\n      </ok-overlay>\n    </if>\n\n    <if :="query.loadError && !query.busy">\n      <div style="color:var(--okdb-danger); padding:12px 14px; border:1px solid color-mix(in srgb, var(--okdb-danger) 33%, transparent); border-radius:8px; margin-bottom:8px; font-size:13px; display:flex; align-items:center; gap:10px;">\n        <span style="flex:1;">{{ query.loadError }}</span>\n        <button @click="query.load()" style="font-size:11px; color:var(--okdb-danger); border-color:color-mix(in srgb, var(--okdb-danger) 33%, transparent); padding:3px 10px;">Retry</button>\n      </div>\n    </if>\n\n    <ok-table :data="query.values" no-scroll style="flex:1; min-height:0; overflow:auto;">\n      <columns>\n        <column width="80px" no-resize>\n          <header>Status</header>\n          <cell let:row>\n            <span class="status-badge" :style="statusBadgeStyle(row.status)">{{ row.status }}</span>\n          </cell>\n        </column>\n        <column width="1fr">\n          <header>Type + Metadata</header>\n          <cell let:row>\n            <div style="display:flex; flex-direction:column; gap:2px;">\n              <div>{{ row.type }}</div>\n              <div style="display:flex; gap:4px; flex-wrap:wrap;">\n                <if :="row.tags && row.tags.length > 0">\n                  <span style="display:inline-block; font-size:11px; padding:1px 6px; background:var(--okdb-app-bg-deep); border-radius:3px; opacity:.7;">{{ row.tags.join(\', \') }}</span>\n                </if>\n                <if :="row.progress">\n                  <span style="display:inline-block; font-size:11px; padding:1px 6px; background:var(--okdb-app-bg-deep); border-radius:3px; opacity:.7;">{{ row.progress }}</span>\n                </if>\n                <if :="row.cron">\n                  <span style="display:inline-block; font-size:11px; padding:1px 6px; background:var(--okdb-app-bg-deep); border-radius:3px; opacity:.7; color:var(--okdb-indigo);">cron: {{ row.cron }}</span>\n                </if>\n                <if :="row.idempotency_key">\n                  <span style="display:inline-block; font-size:11px; padding:1px 6px; background:var(--okdb-app-bg-deep); border-radius:3px; opacity:.7; color:#34d399;">key: {{ row.idempotency_key }}</span>\n                </if>\n              </div>\n            </div>\n          </cell>\n        </column>\n        <column width="130px" no-resize>\n          <header>When</header>\n          <cell let:row>{{ formatWhen(row.when) }}</cell>\n        </column>\n        <column width="70px" no-resize>\n          <header>Tries</header>\n          <cell let:row>\n            <span :style="row.tries >= row.max_tries && row.max_tries > 0 ? \'color:var(--okdb-danger);\' : \'\'">\n              {{ row.tries }} / {{ row.max_tries }}\n            </span>\n          </cell>\n        </column>\n        <column width="180px" no-resize>\n          <header>Actions</header>\n          <cell let:row>\n            <button @click="openEditJob(row)" :disabled="row._busy" style="font-size:11px;">Edit</button>\n            <button @click="retryJob(row)"  :disabled="row._busy" style="font-size:11px;">Retry</button>\n            <if :="row.status === \'pending\' || row.status === \'running\'">\n              <button @click="cancelJob(row)" :disabled="row._busy" style="font-size:11px;">Cancel</button>\n            </if>\n            <button @click="deleteJob(row)" :disabled="row._busy" style="color:#ff6c6b; font-size:11px;">Delete</button>\n          </cell>\n        </column>\n      </columns>\n\n      <expanded let:row>\n        <div style="padding:10px; font-size:12px; display:flex; flex-direction:column; gap:6px;">\n          <if :="row.error_stack || row.status_message">\n            <div>\n              <if :="row.status_message">\n                <div style="white-space:pre-wrap; opacity:.9; margin-bottom:6px;">{{ row.status_message }}</div>\n              </if>\n              <if :="row.error_stack">\n                <pre style="white-space:pre-wrap; opacity:.85; max-height:220px; overflow:auto; background:var(--okdb-app-bg-deep); padding:8px; border-radius:4px;">{{ row.error_stack }}</pre>\n              </if>\n            </div>\n          </if>\n          <div style="display:flex; flex-wrap:wrap; gap:12px; opacity:.8; font-size:11px;">\n            <span>ID: <b>{{ row.id }}</b></span>\n            <span>Status code: <b>{{ row.status_code || \'—\' }}</b></span>\n            <span>Max tries: <b>{{ row.max_tries ?? \'—\' }}</b></span>\n            <span>Retry delay: <b>{{ row.retry_delay ?? 0 }}ms</b></span>\n            <span>Backoff: <b>{{ row.backoff_multiplier ?? 1 }}</b></span>\n            <span>Priority: <b>{{ row.priority ?? 0 }}</b></span>\n            <span :="row.bucket" style="display:inline;">Bucket: <b>{{ row.bucket || \'—\' }}</b></span>\n            <span>Claim expires: <b>{{ formatWhen(row.claim_expires) }}</b></span>\n          </div>\n          <div style="display:flex; flex-direction:column; gap:8px; margin-top:6px;">\n            <code-panel :title="\'Job\'" :lang="\'json\'" :text="jobMetaText(row)"></code-panel>\n            <code-panel :title="\'Payload\'" :lang="\'json\'" :text="payloadText(row)"></code-panel>\n            <if :="row.status === \'failed\'">\n              <code-panel :title="\'Error\'" :lang="\'json\'" :text="errorText(row)"></code-panel>\n            </if>\n            <job-log-panel :job-id="row.id" :env="$ok.stores.okdb.selectedEnv" :job="row"></job-log-panel>\n          </div>\n        </div>\n      </expanded>\n    </ok-table>\n\n    \x3c!-- Pagination --\x3e\n    <div class="ok-pager">\n      <button @click="query.prevPage()" :disabled="!query.hasPrev || query.busy">‹ Prev</button>\n      <span>{{ statusCount(status) }} total · {{ query.pageSize }}/page</span>\n      <button @click="query.nextPage()" :disabled="!query.hasNext || query.busy">Next ›</button>\n    </div>\n  </div>\n\n</div>\n',style:".pill{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--okdb-app-border);background:var(--okdb-app-surface);padding:4px 10px;border-radius:999px;font-size:12px;cursor:pointer;color:var(--okdb-app-fg-muted);transition:border-color .12s,color .12s}.pill:hover{border-color:#3b4754;color:var(--okdb-app-fg)}.pill--on{box-shadow:0 0 0 1px rgba(255,255,255,.07) inset}.pill--p.pill--on{color:var(--okdb-warning);border-color:var(--okdb-warning)}.pill--r.pill--on{color:var(--okdb-info);border-color:var(--okdb-info)}.pill--f.pill--on{color:var(--okdb-danger);border-color:var(--okdb-danger)}.pill--d.pill--on{color:var(--okdb-success);border-color:var(--okdb-success)}.pill-count{font-size:11px;opacity:.65;font-variant-numeric:tabular-nums}.status-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;border:1px solid;white-space:nowrap}"};

package/public/sections/system/index.ok.html

@@ -1 +1 @@
-<script type="module">import e from"../db/modals/create-env-modal.ok.js";import t from"../db/modals/demo-env-modal.ok.js";import o from"../db/modals/remove-env-modal.ok.js";import s from"./modals/data-ops-modal.ok.js";import n from"./parts/system-log.ok.js";import a from"./parts/system-log-history.ok.js";import r from"./parts/system-sync-panel.ok.js";import i from"./parts/system-auth-panel.ok.js";import c from"./parts/system-api-panel.ok.js";import l from"./parts/system-locks-panel.ok.js";import d from"../license/parts/license-panel.ok.js";import h from"@toolkit/components/ok-doc-viewer.ok.js";export default{tag:"system-index",unwrap:!0,dependencies:[n,a,r,i,c,l,d,h,e,t,o,s],context:e=>({_systemWildcard(){const t=e.$vars.$router?.match("/system/*");return t?.params?.["*"]??""},get subView(){return this._parseSubView(this._systemWildcard())},_parseSubView(e){const t=e??"";return t&&"overview"!==t?"logs"===t?"logs":"events"===t?"events":"sync"===t?"sync":"api"===t?"api":"auth"===t?"auth":"license"===t?"license":t.startsWith("docs")?"docs":"overview":"overview"},goToSystemSub(t){const o=e.$vars.$router;if(!o)return;const s=e.$ok.stores.okdb.selectedEnv,n=s?`?env=${encodeURIComponent(s)}`:"";o.push(`/system/${t}${n}`)},docsManifest:[],docsAnchor:"",get docsCurrentFile(){return this._parseDocsFile(this._systemWildcard())},_parseDocsFile(e){const t=e??"",o=t.startsWith("docs/")?t.slice(5):"";return o?o.replace(/\.md$/,"")+".md":"index.md"},docsIsActive(e){return this.docsCurrentFile===e},docsNavigateTo(e){const t=e.replace(/\.md$/,"");this.docsAnchor="",this.goToSystemSub("docs/"+t)},docsOnAnchorChange(e){this.docsAnchor=e},async loadDocsManifest(){if(!this.docsManifest.length)try{const e=await fetch("/docs/manifest.json");e.ok&&(this.docsManifest=await e.json())}catch{}},info:null,runtime:null,syncInfo:null,envs:[],loading:!1,error:null,autoRefresh:!0,_timer:null,metrics:null,async load(){this.loading=!0,this.error=null;try{const e=await fetch(`${__ENV__.API}/info`),t=await e.json();if(!e.ok)throw new Error(t?.error?.message||"Failed to load info");this.info=t.data??t}catch(e){this.error=e?.message||String(e)}finally{this.loading=!1}try{const t=await fetch(`${__ENV__.API}/envs`);if(t.ok){const o=await t.json();this.envs=o.data??[],e.$ok.stores.okdb.envs=this.envs}}catch{}try{const e=await fetch(`${__ENV__.API}/system/runtime`);if(e.ok){const t=await e.json();this.runtime=t.data??t}}catch{}try{const e=await fetch(`${__ENV__.API}/system/metrics`);if(e.ok){const t=await e.json();this.metrics=t.data??null}}catch{}try{const e=await fetch(`${__ENV__.API}/sync/info`);this.syncInfo=e.ok?(await e.json()).data??null:null}catch{this.syncInfo=null}},get approxSize(){const e=(this.envs||[]).reduce((e,t)=>e+(t.size||0),0);if(!e)return"--";const t=["B","KB","MB","GB","TB"];let o=e,s=0;for(;o>=1024&&s<t.length-1;)o/=1024,s++;return o.toFixed(2)+" "+t[s]},get typeList(){const e=[];for(const t of this.envs||[])for(const o of t.types||[])o.name.startsWith("~")||e.push({name:o.name,env:t.name,count:o.count??0});return e.sort((e,t)=>e.name.localeCompare(t.name)||e.env.localeCompare(t.env))},get systemTypeList(){const e=[];for(const t of this.envs||[])for(const o of t.types||[])o.name.startsWith("~")&&e.push({name:o.name,env:t.name,count:o.count??0});return e.sort((e,t)=>e.name.localeCompare(t.name)||e.env.localeCompare(t.env))},get totalTypeCount(){return this.typeList.length},get plugins(){return(this.info?.plugins||[]).filter(Boolean)},get config(){return this.info?.config??null},get durabilityLabel(){const e=this.config?.durability;return{strict:{label:"Strict",color:"var(--okdb-success)",hint:"Full fsync on every commit."},balanced:{label:"Balanced",color:"var(--okdb-accent)",hint:"Async fsync worker — crash-safe, fast."},fast:{label:"Fast",color:"var(--okdb-warning)",hint:"No per-commit fsync. May lose last tx on crash."},custom:{label:"Custom",color:"var(--okdb-purple)",hint:"Manual LMDB flags. No preset applied."}}[e]??{label:e??"--",color:"var(--okdb-app-fg-muted)",hint:""}},get configWarnings(){return this.config?.warnings??[]},formatBytes(e){if(null==e)return"--";const t=["B","KB","MB","GB","TB"];let o=e,s=0;for(;o>=1024&&s<t.length-1;)o/=1024,s++;return o.toFixed(0===s?0:2)+" "+t[s]},formatUptime(e){if(null==e)return"--";const t=Math.floor(e),o=Math.floor(t/86400),s=Math.floor(t%86400/3600),n=Math.floor(t%3600/60),a=t%60;return o>0?`${o}d ${s}h ${n}m`:s>0?`${s}h ${n}m ${a}s`:n>0?`${n}m ${a}s`:`${a}s`},formatLoad:e=>e&&e.length?e.map(e=>e.toFixed(2)).join(" / "):"--",pct:(e,t)=>e&&t?Math.round(e/t*100):0,get clock(){return this.syncInfo?.clock??this.info?.clock??"--"},get nodeId(){return this.syncInfo?.node?.id??this.info?.id??"--"},get nodeAddress(){return this.syncInfo?.node?.address??null},formatNum:e=>null==e?"--":Number(e).toLocaleString(),copyId(){navigator.clipboard?.writeText(this.nodeId).catch(()=>{})},changelogOpen:!1,changelogBusy:!1,changelogError:null,changes:[],changelogLimit:50,async loadChangelog(){this.changelogBusy=!0,this.changelogError=null;try{const e=new URLSearchParams({limit:this.changelogLimit}),t=await fetch(`${__ENV__.API}/system/changelog?${e}`),o=await t.json();if(!t.ok)throw new Error(o?.error?.message||"Failed");this.changes=o.data??[]}catch(e){this.changelogError=e?.message||String(e)}finally{this.changelogBusy=!1}},get changelogHasOlder(){return this.changes.length===this.changelogLimit},loadMoreChangelog(){this.changelogLimit=Math.min(this.changelogLimit+100,1e3),this.loadChangelog()},toggleChangelog(){this.changelogOpen=!this.changelogOpen,this.changelogOpen&&!this.changes.length&&this.loadChangelog()},actionColor:e=>({put:"var(--okdb-success)",remove:"var(--okdb-danger)",type_register:"var(--okdb-accent)",type_drop:"var(--okdb-danger)",index_register:"var(--okdb-purple)",index_drop:"var(--okdb-warning)"}[e]||"var(--okdb-app-fg-muted)"),actionLabel:e=>(e||"").replace(/_/g," ").toUpperCase(),shortKey:e=>e?e.length<=20?e:e.slice(0,10)+"…"+e.slice(-6):"—",relTime(e){if(!e)return"—";const t=Date.now()-e;return t<5e3?"just now":t<6e4?`${Math.round(t/1e3)}s ago`:t<36e5?`${Math.round(t/6e4)}m ago`:t<864e5?`${Math.round(t/36e5)}h ago`:new Date(e).toLocaleDateString()},showSystemEnvs:!1,get totalEnvSize(){return(this.envs||[]).reduce((e,t)=>e+(t.size||0),0)},get userEnvs(){return(this.envs||[]).filter(e=>!e.name.startsWith("~"))},get systemEnvs(){return(this.envs||[]).filter(e=>e.name.startsWith("~"))},get visibleEnvs(){return this.showSystemEnvs?this.envs:this.userEnvs},get orphanedEnvs(){return(this.envs||[]).filter(e=>e.orphaned)},goToEnv(t){e.$ok.stores.okdb.selectEnv(t),e.$vars.$router?.push?.("/db?env="+encodeURIComponent(t))},async openCreateEnv(){await e.$ok.shared.modal.open({owner:e,title:"Create Environment",content:'<create-env-modal :modal="modal" :on-done="onDone" />',context:t=>({modal:t,onDone:async()=>{await e.$ok.stores.okdb.reloadEnvs(),await this.load()}})})},async openDemoModal(){await e.$ok.shared.modal.open({owner:e,title:'<span style="background:linear-gradient(135deg,var(--okdb-accent),var(--okdb-purple) 50%,var(--okdb-success));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;font-size:15px;">✦ Demo Environment</span>',canDrag:!0,content:'<demo-env-modal :modal="modal" :on-done="onDone" />',context:t=>({modal:t,onDone:async t=>{e.$ok.stores.okdb.selectEnv(t),await e.$ok.stores.okdb.reloadEnvs(),await this.load(),e.$ok.shared?.toast?.success?.(`✦ Demo environment "${t}" is ready!`)}})})},_compactingEnvs:{},async compactEnv(t){if(!this._compactingEnvs[t]){this._compactingEnvs={...this._compactingEnvs,[t]:!0};try{const o=await fetch(`${__ENV__.API}/env/${encodeURIComponent(t)}/compact`,{method:"POST"}),s=await o.json();if(!o.ok)throw new Error(s?.error?.message||"Compact failed");const n=s.data??{},a=n.saved>0?`✓ Compacted "${t}": ${this.formatBytes(n.sizeBefore)} → ${this.formatBytes(n.sizeAfter)} (saved ${this.formatBytes(n.saved)}, ${n.savedPct}%)`:`✓ Compacted "${t}" — no space reclaimed (${this.formatBytes(n.sizeAfter)})`;e.$ok.shared?.toast?.success?.(a),await this.load()}catch(t){e.$ok.shared?.toast?.error?.("Compact failed: "+(t?.message||t))}finally{const e={...this._compactingEnvs};delete e[t],this._compactingEnvs=e}}},async openRemoveEnv(t){await e.$ok.shared.modal.open({owner:e,title:"Remove Environment",content:'<remove-env-modal :modal="modal" :env-name="envName" :on-done="onDone" />',context:o=>({modal:o,envName:t,onDone:async(t,o)=>{await e.$ok.stores.okdb.reloadEnvs(),e.$ok.stores.okdb.selectedEnv===t&&e.$ok.stores.okdb.selectEnv(e.$ok.stores.okdb._pickBestEnv()),await this.load(),o?.filesLocked?.length?e.$ok.shared?.toast?.warn?.(`"${t}" removed — some files could not be deleted (locked)`):e.$ok.shared?.toast?.success?.(`Environment "${t}" removed and files deleted`)}})})},async dismissOrphan(t){try{const o=await fetch(`${__ENV__.API}/env/${encodeURIComponent(t)}`,{method:"DELETE"}),s=await o.json().catch(()=>({}));if(!o.ok)throw new Error(s?.error?.message||o.statusText);const n=s.data??s;await e.$ok.stores.okdb.reloadEnvs(),await this.load(),n?.filesLocked?.length?e.$ok.shared?.toast?.warn?.(`Orphan "${t}" dismissed — some files could not be deleted (locked)`):e.$ok.shared?.toast?.info?.(`Orphan "${t}" dismissed`)}catch(t){e.$ok.shared?.toast?.error?.("Dismiss failed: "+(t?.message||t))}},async openDataOps(t){await e.$ok.shared.modal.open({owner:e,title:"⬦ Data Operations",canDrag:!0,content:'<data-ops-modal :modal="modal" :envs="envs" :on-done="onDone" :initial-tab="initialTab" />',context:o=>({modal:o,envs:this.envs,initialTab:t||"export",onDone:async()=>{await this.load(),e.$ok.shared?.toast?.success?.("Operation complete")}})})},logView:"live"}),async mount(e){await this.load(),this._timer=setInterval(()=>{this.autoRefresh&&"overview"===this.subView&&this.load()},1e4);const t=()=>{fetch(`${__ENV__.API}/envs`).then(e=>e.json()).then(t=>{this.envs=t.data??[],e.$ok.stores.okdb.envs=this.envs}).catch(()=>{})},o=e.$ok.stores.events?.on?.("env:opened",t),s=e.$ok.stores.events?.on?.("env:removed",t);this._unsubEnv=()=>{o?.(),s?.()},await this.loadDocsManifest()},unmount(){clearInterval(this._timer),this._unsubEnv?.()}};</script><template><component import="../../layouts/_default.ok.html"><template name="header"></template><template name="sidebar"><if :="subView === 'docs'"><nav class="sys-subnav" style="margin-bottom:6px"><button class="sys-subnav__item" @click="goToSystemSub('overview')" style="opacity:.6;font-size:11px">← System</button></nav><nav class="docs-nav" aria-label="Documentation"><each :of="docsManifest" let:item="item"><if :="item.file"><button class="docs-nav__item docs-nav__item--standalone" :class="{'docs-nav__item--active': docsIsActive(item.file)}" @click="docsNavigateTo(item.file)">{{ item.label }}</button></if><if :="item.children"><div class="docs-nav__group"><span class="docs-nav__group-label">{{ item.label }}</span><each :of="item.children" let:child="child"><button class="docs-nav__item" :class="{'docs-nav__item--active': docsIsActive(child.file)}" @click="docsNavigateTo(child.file)">{{ child.label }}</button></each></div></if></each></nav></if><if :="subView !== 'docs'"><nav class="sys-subnav" aria-label="System navigation"><button class="sys-subnav__item" :class="{'sys-subnav__item--active': subView==='overview'}" @click="goToSystemSub('overview')"><span class="sys-subnav__icon">⚙</span> Overview</button> <button class="sys-subnav__item" :class="{'sys-subnav__item--active': subView==='logs'}" @click="goToSystemSub('logs')"><span class="sys-subnav__icon">📋</span> Logs</button> <button class="sys-subnav__item" :class="{'sys-subnav__item--active': subView==='events'}" @click="goToSystemSub('events')"><span class="sys-subnav__icon">⚡</span> Events</button><div class="sys-subnav__divider"></div><button class="sys-subnav__item" :class="{'sys-subnav__item--active': subView==='sync'}" @click="goToSystemSub('sync')"><span class="sys-subnav__icon">⇄</span> Sync</button> <button class="sys-subnav__item" :class="{'sys-subnav__item--active': subView==='auth'}" @click="goToSystemSub('auth')"><span class="sys-subnav__icon">🔐</span> Auth</button> <button class="sys-subnav__item" :class="{'sys-subnav__item--active': subView==='license'}" @click="goToSystemSub('license')"><span class="sys-subnav__icon">🔑</span> License</button><div class="sys-subnav__divider"></div><button class="sys-subnav__item" :class="{'sys-subnav__item--active': subView==='api'}" @click="goToSystemSub('api')"><span class="sys-subnav__icon">⌁</span> API</button> <button class="sys-subnav__item" :class="{'sys-subnav__item--active': subView==='docs'}" @click="goToSystemSub('docs')"><span class="sys-subnav__icon">≡</span> Docs</button></nav></if></template><template name="default"><if :="subView === 'logs'"><div style="display:flex;flex-direction:column;gap:12px;height:100%;min-height:0"><div style="display:flex;align-items:center;gap:8px;flex-shrink:0"><div style="font-weight:600;font-size:15px;opacity:.8">Logs</div><div style="display:flex;gap:2px;padding:2px;background:var(--okdb-app-surface);border-radius:8px;border:1px solid var(--okdb-app-border)"><button @click="logView='live'" :style="logView==='live'    ?'background:var(--okdb-app-surface-2);color:var(--okdb-accent);border-color:color-mix(in srgb, var(--okdb-accent) 27%, transparent);':'background:transparent;border-color:transparent;opacity:.7;'" style="padding:4px 14px;border-radius:6px;font-size:12px">Live</button> <button @click="logView='history'" :style="logView==='history' ?'background:var(--okdb-app-surface-2);color:var(--okdb-accent);border-color:color-mix(in srgb, var(--okdb-accent) 27%, transparent);':'background:transparent;border-color:transparent;opacity:.7;'" style="padding:4px 14px;border-radius:6px;font-size:12px">History</button></div></div><if :="logView === 'live'"><system-log :initial-source="'log'" style="flex:1;min-height:300px"/></if><if :="logView === 'history'"><system-log-history style="flex:1;min-height:300px"/></if></div></if><if :="subView === 'events'"><div style="display:flex;flex-direction:column;gap:12px;height:100%;min-height:0"><div style="font-weight:600;font-size:15px;opacity:.8;flex-shrink:0">Events</div><system-log :initial-source="'event'" style="flex:1;min-height:300px"/></div></if><if :="subView === 'sync'"><system-sync-panel style="height:100%;min-height:0"/></if><if :="subView === 'auth'"><system-auth-panel style="height:100%;min-height:0"/></if><if :="subView === 'api'"><system-api-panel style="height:100%;min-height:0"/></if><if :="subView === 'docs'"><div class="docs-wrap"><ok-doc-viewer :blocks="[]" root="/docs/" prefix="#/system/docs/" :file="docsCurrentFile" :anchor="docsAnchor" :manifest="docsManifest" sidebar-title="On this page" @anchor-change="docsOnAnchorChange($event.detail)"/></div></if><if :="subView === 'overview'"><div style="display:flex;flex-direction:column;gap:20px;max-width:900px"><div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap"><div style="font-weight:600;font-size:16px">Overview</div><button @click="load()" :disabled="loading" style="opacity:.8;font-size:12px">↻ Refresh</button> <label style="display:flex;align-items:center;gap:6px;font-size:12px;opacity:.7;cursor:pointer"><input type="checkbox" :checked="autoRefresh" @change="autoRefresh = $el.checked"/> Auto-refresh 10s</label><if :="loading"><span style="font-size:12px;opacity:.55">Loading…</span></if></div><if :="error"><div style="color:var(--okdb-danger);font-size:13px;padding:10px;border:1px solid var(--okdb-danger);border-radius:8px">{{error}}</div></if><div style="display:grid;grid-template-columns:1fr 1fr;gap:16px"><div class="card"><div class="card-title">Node Identity</div><div class="kv-grid"><div class="kv-key">Node ID</div><div class="kv-val" style="display:flex;align-items:center;gap:6px"><span style="font-family:monospace;font-size:12px;word-break:break-all">{{nodeId}}</span> <button @click="copyId()" style="font-size:10px;padding:2px 6px;opacity:.7">copy</button></div><if :="nodeAddress"><div class="kv-key">Address</div><div class="kv-val" style="font-family:monospace;font-size:12px">{{nodeAddress}}</div></if><div class="kv-key">Clock</div><div class="kv-val" style="font-family:monospace">{{formatNum(clock)}}</div><div class="kv-key">DB State</div><div class="kv-val" style="color:var(--okdb-success)">open</div><div class="kv-key">OKDB</div><div class="kv-val" style="font-family:monospace">v{{info?.versions?.okdb ?? info?.version ?? '--'}}</div><div class="kv-key">lmdb-js</div><div class="kv-val" style="font-family:monospace">v{{info?.versions?.lmdb ?? '--'}}</div><div class="kv-key">LMDB</div><div class="kv-val" style="font-family:monospace;font-size:11px;opacity:.7">{{info?.versions?.lmdbNative ?? '--'}}</div></div></div><div class="card"><div class="card-title">Storage (all environments)</div><div class="kv-grid"><div class="kv-key">Total Size</div><div class="kv-val" style="font-size:20px;font-weight:600;color:var(--okdb-accent)">{{approxSize}}</div><div class="kv-key">Environments</div><div class="kv-val">{{(envs || []).length}}</div><div class="kv-key">User Types</div><div class="kv-val">{{totalTypeCount}}</div><div class="kv-key">Page Size</div><div class="kv-val">{{formatNum(info?.pageSize)}} B</div><div class="kv-key">Map Size</div><div class="kv-val">{{info?.config?.lmdbOptions?.mapSize ? (info.config.lmdbOptions.mapSize/1024/1024/1024).toFixed(2)+' GB' : '--'}} <span style="opacity:.4;font-size:11px">(per env)</span></div></div></div></div><if :="envs && envs.length > 0"><div class="card"><div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap"><div style="font-weight:600;font-size:14px;flex:1">Environments ({{userEnvs.length}}<if :="systemEnvs.length > 0"><span style="opacity:.4;font-size:12px;font-weight:400">+ {{systemEnvs.length}} system</span></if>)</div><span style="font-size:12px;opacity:.5">{{formatBytes(totalEnvSize)}}</span><if :="systemEnvs.length > 0"><button @click="showSystemEnvs = !showSystemEnvs" style="font-size:11px;padding:3px 8px;opacity:.6">{{showSystemEnvs ? '▴ hide system' : '⚙ show system'}}</button></if><button @click="openCreateEnv()" style="font-size:11px;padding:4px 10px;opacity:.8">+ Create</button> <button @click="openDemoModal()" style="font-size:11px;padding:4px 12px;background:linear-gradient(135deg,color-mix(in srgb,var(--okdb-accent) 7%,transparent),color-mix(in srgb,var(--okdb-purple) 7%,transparent));border:1px solid color-mix(in srgb,var(--okdb-accent) 27%,transparent);color:var(--okdb-accent);border-radius:6px;font-weight:600" title="Generate a demo environment">✦ Demo</button></div><table class="sys-table"><thead><tr><th>Name</th><th style="text-align:right">Size</th><th style="text-align:right">Clock</th><th style="text-align:right">Types</th><th style="text-align:center">Sync</th><th></th></tr></thead><tbody><tr as="repeat" :of="visibleEnvs" let:item="e" class="sys-table-row"><td style="font-family:monospace;font-size:12px"><a @click.prevent="goToEnv(e.name)" href="#" style="color:var(--okdb-accent);text-decoration:none" :title="'Explore '+e.name">{{e.name}}</a><if :="e.parentEnv"><span style="font-size:10px;opacity:.4;font-family:monospace;margin-left:4px">↳ {{e.parentEnv}}</span></if></td><td style="text-align:right;font-size:12px;font-family:monospace;opacity:.8">{{formatBytes(e.size)}}</td><td style="text-align:right;font-family:monospace;font-size:12px;opacity:.7">{{e.sync ? formatNum(e.clock) : '—'}}</td><td style="text-align:right;font-size:12px;opacity:.7">{{e.types ? e.types.length : 0}}</td><td style="text-align:center"><span :style="e.sync?'color:var(--okdb-success);font-size:11px;':'opacity:.4;font-size:11px;'">{{e.sync?'✓':'✗'}}</span></td><td style="text-align:right;white-space:nowrap"><button @click="compactEnv(e.name)" :disabled="_compactingEnvs[e.name]" :style="_compactingEnvs[e.name]?'font-size:10px;padding:2px 8px;opacity:.35;cursor:not-allowed;':'font-size:10px;padding:2px 8px;opacity:.55;'">{{_compactingEnvs[e.name]?'⏳ compacting…':'⬡ compact'}}</button><if :="e.name !== '~system'"><button @click="openRemoveEnv(e.name)" style="font-size:10px;padding:2px 8px;opacity:.45;color:var(--okdb-danger);border-color:color-mix(in srgb,var(--okdb-danger) 20%,transparent);margin-left:4px">🗑 remove</button></if></td></tr></tbody></table><if :="orphanedEnvs.length > 0"><div style="margin-top:16px;border-top:1px solid var(--okdb-app-border);padding-top:14px"><div style="font-size:12px;font-weight:600;opacity:.6;margin-bottom:8px;display:flex;align-items:center;gap:6px"><span style="color:var(--okdb-orange)">⚠</span> Orphaned sub-environments ({{orphanedEnvs.length}}) <span style="font-size:11px;font-weight:400;opacity:.55;margin-left:2px">— parent was removed; data on disk is intact</span></div><table class="sys-table"><tbody><tr as="repeat" :of="orphanedEnvs" let:item="e" class="sys-table-row"><td style="font-family:monospace;font-size:12px;opacity:.5;text-decoration:line-through">{{e.name}}</td><td style="font-size:11px;opacity:.4;font-style:italic">orphaned from <span style="font-family:monospace">{{e.orphanedFrom ?? '—'}}</span></td><td style="text-align:right;white-space:nowrap"><button @click="dismissOrphan(e.name)" style="font-size:10px;padding:2px 8px;opacity:.5;color:var(--okdb-danger);border-color:color-mix(in srgb,var(--okdb-danger) 20%,transparent)">✕ dismiss</button></td></tr></tbody></table></div></if></div></if><div class="card" style="border:1px solid color-mix(in srgb,var(--okdb-accent) 9%,transparent);background:linear-gradient(135deg,var(--okdb-app-bg-deep),var(--okdb-app-surface))"><div style="display:flex;align-items:center;gap:14px;flex-wrap:wrap"><div style="flex:1;min-width:200px"><div style="font-weight:600;font-size:14px;margin-bottom:4px;display:flex;align-items:center;gap:8px"><span style="color:var(--okdb-accent);opacity:.7">⬦</span> Data Operations</div><div style="font-size:12px;opacity:.45;line-height:1.5">Export &amp; import logical NDJSON snapshots · hot filesystem backup</div></div><div style="display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;align-items:center"><button @click="openDataOps('export')" style="display:flex;align-items:center;gap:6px;padding:7px 15px;border-radius:8px;font-size:12px;font-weight:600;background:linear-gradient(135deg,var(--okdb-app-bg-deep),var(--okdb-app-bg-deep));border:1px solid color-mix(in srgb,var(--okdb-accent) 27%,transparent);color:var(--okdb-accent);cursor:pointer;white-space:nowrap">⬇ Export</button> <button @click="openDataOps('import')" style="display:flex;align-items:center;gap:6px;padding:7px 15px;border-radius:8px;font-size:12px;font-weight:600;background:linear-gradient(135deg,var(--okdb-app-bg-deep),var(--okdb-app-bg-deep));border:1px solid color-mix(in srgb,var(--okdb-accent) 27%,transparent);color:var(--okdb-accent);cursor:pointer;white-space:nowrap">⬆ Import</button><div style="width:1px;height:24px;background:var(--okdb-app-border);margin:0 2px;flex-shrink:0"></div><button @click="openDataOps('backup')" style="display:flex;align-items:center;gap:6px;padding:7px 15px;border-radius:8px;font-size:12px;font-weight:600;background:linear-gradient(135deg,var(--okdb-app-bg-deep),var(--okdb-app-bg-deep));border:1px solid color-mix(in srgb,var(--okdb-purple) 27%,transparent);color:var(--okdb-purple);cursor:pointer;white-space:nowrap">🗄 Backup</button></div></div></div><div style="display:grid;grid-template-columns:1fr 1fr;gap:16px"><div class="card"><div class="card-title">Configuration</div><div class="kv-grid"><div class="kv-key">Durability</div><div class="kv-val" style="display:flex;align-items:center;gap:6px"><span :style="'font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid;color:'+durabilityLabel.color+';border-color:'+durabilityLabel.color+'44;background:'+durabilityLabel.color+'11;'">{{durabilityLabel.label}}</span> <span style="opacity:.5;font-size:11px;flex:1">{{durabilityLabel.hint}}</span></div><div class="kv-key">Compression</div><div class="kv-val"><span :style="config?.lmdbOptions?.compression?'color:var(--okdb-success)':'opacity:.5'">{{config?.lmdbOptions?.compression?'LZ4 enabled':'disabled'}}</span></div><div class="kv-key">Encryption</div><div class="kv-val"><span :style="config?.lmdbOptions?.encryptionKey?'color:var(--okdb-success)':'opacity:.5'">{{config?.lmdbOptions?.encryptionKey?'Chacha8 enabled':'none'}}</span></div><div class="kv-key">Map Size</div><div class="kv-val">{{formatBytes(config?.lmdbOptions?.mapSize)}}</div><div class="kv-key">Max DBs</div><div class="kv-val">{{formatNum(config?.lmdbOptions?.maxDbs)}}</div></div><if :="configWarnings.length > 0"><div style="margin-top:10px;display:flex;flex-direction:column;gap:4px"><for :="configWarnings" let:w><div style="font-size:11px;color:var(--okdb-warning);background:color-mix(in srgb,var(--okdb-warning) 7%,transparent);border:1px solid color-mix(in srgb,var(--okdb-warning) 20%,transparent);border-radius:6px;padding:5px 8px;line-height:1.4">⚠ {{w}}</div></for></div></if></div><div class="card"><div class="card-title">Process</div><if :="!runtime"><div style="opacity:.4;font-size:12px">Loading…</div></if><if :="runtime"><div class="kv-grid"><div class="kv-key">PID</div><div class="kv-val" style="font-family:monospace">{{runtime.process?.pid}}</div><div class="kv-key">Uptime</div><div class="kv-val">{{formatUptime(runtime.process?.uptime)}}</div><div class="kv-key">Node.js</div><div class="kv-val" style="font-family:monospace">v{{runtime.process?.node}}</div><div class="kv-key" style="align-self:center">CPU</div><div class="kv-val" style="display:flex;align-items:center;gap:6px"><div style="flex:1;height:6px;background:var(--okdb-app-border);border-radius:3px;overflow:hidden"><div :style="'height:100%;border-radius:3px;transition:width .4s;background:'+(runtime.process?.cpu?.pct>80?'var(--okdb-danger)':runtime.process?.cpu?.pct>40?'var(--okdb-warning)':'var(--okdb-success)')+';width:'+(runtime.process?.cpu?.pct??0)+'%;'"></div></div><span style="font-size:11px;opacity:.6;min-width:30px">{{runtime.process?.cpu?.pct??0}}%</span></div><div class="kv-key">RSS</div><div class="kv-val">{{formatBytes(runtime.process?.memory?.rss)}}</div><div class="kv-key">Heap Used</div><div class="kv-val">{{formatBytes(runtime.process?.memory?.heapUsed)}} <span style="opacity:.45;font-size:11px">/ {{formatBytes(runtime.process?.memory?.heapTotal)}}</span></div><div class="kv-key" style="align-self:center">Heap %</div><div class="kv-val" style="display:flex;align-items:center;gap:6px"><div style="flex:1;height:6px;background:var(--okdb-app-border);border-radius:3px;overflow:hidden"><div :style="'height:100%;background:var(--okdb-accent);border-radius:3px;width:'+pct(runtime.process?.memory?.heapUsed,runtime.process?.memory?.heapTotal)+'%;'"></div></div><span style="font-size:11px;opacity:.6;min-width:30px">{{pct(runtime.process?.memory?.heapUsed,runtime.process?.memory?.heapTotal)}}%</span></div><div class="kv-key">External</div><div class="kv-val">{{formatBytes(runtime.process?.memory?.external)}}</div></div></if></div></div><div class="card"><div class="card-title">Machine</div><if :="!runtime"><div style="opacity:.4;font-size:12px">Loading…</div></if><if :="runtime"><div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px"><div><div style="font-size:11px;opacity:.5;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px">Memory</div><div style="font-size:22px;font-weight:600;color:var(--okdb-accent)">{{formatBytes(runtime.os?.freeMemory)}}</div><div style="font-size:11px;opacity:.5;margin-top:2px">free of {{formatBytes(runtime.os?.totalMemory)}}</div><div style="margin-top:8px;height:6px;background:var(--okdb-app-border);border-radius:3px;overflow:hidden"><div :style="'height:100%;background:var(--okdb-accent);border-radius:3px;width:'+pct(runtime.os?.totalMemory-runtime.os?.freeMemory,runtime.os?.totalMemory)+'%;'"></div></div><div style="font-size:11px;opacity:.45;margin-top:3px">{{pct(runtime.os?.totalMemory-runtime.os?.freeMemory,runtime.os?.totalMemory)}}% used</div></div><div><div style="font-size:11px;opacity:.5;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px">CPU</div><div style="font-size:14px;font-weight:600">{{runtime.os?.cpuCount}} core{{runtime.os?.cpuCount!==1?'s':''}}</div><div style="font-size:11px;opacity:.5;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis" :title="runtime.os?.cpuModel">{{runtime.os?.cpuModel}}</div><div style="margin-top:8px;font-size:11px;opacity:.6">Load avg (1m/5m/15m)</div><div style="font-size:13px;font-family:monospace;margin-top:2px">{{formatLoad(runtime.os?.loadAvg)}}</div></div><div><div style="font-size:11px;opacity:.5;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px">Platform</div><div style="font-size:14px;font-weight:600;text-transform:capitalize">{{runtime.os?.platform}}</div><div style="font-size:11px;opacity:.5;margin-top:3px">{{runtime.os?.arch}}</div><div style="font-size:11px;opacity:.35;margin-top:6px;word-break:break-all">{{runtime.os?.release}}</div><div style="font-size:11px;opacity:.4;margin-top:3px;font-family:monospace">{{runtime.os?.hostname}}</div></div></div></if></div><if :="metrics"><div class="card"><div class="card-title">API Metrics</div><div style="display:grid;grid-template-columns:1fr 1fr;gap:16px"><div><div style="font-size:11px;opacity:.5;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px">Lifetime</div><div class="kv-grid"><div class="kv-key">Requests</div><div class="kv-val" style="color:var(--okdb-accent);font-weight:600">{{formatNum(metrics.lifetime?.requests)}}</div><div class="kv-key">Reads</div><div class="kv-val">{{formatNum(metrics.lifetime?.reads)}}</div><div class="kv-key">Writes</div><div class="kv-val">{{formatNum(metrics.lifetime?.writes)}}</div><div class="kv-key">Errors</div><div class="kv-val" :style="metrics.lifetime?.errors>0?'color:var(--okdb-danger);':'opacity:.5;'">{{formatNum(metrics.lifetime?.errors)}}</div><div class="kv-key">Avg Read</div><div class="kv-val" style="font-family:monospace">{{metrics.lifetime?.avgReadMs!=null?metrics.lifetime.avgReadMs+'ms':'—'}}</div><div class="kv-key">Avg Write</div><div class="kv-val" style="font-family:monospace">{{metrics.lifetime?.avgWriteMs!=null?metrics.lifetime.avgWriteMs+'ms':'—'}}</div></div></div><div><div style="font-size:11px;opacity:.5;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px">Last 60 seconds</div><div class="kv-grid"><div class="kv-key">Req/s</div><div class="kv-val" style="color:var(--okdb-success);font-weight:600">{{metrics.window?.reqPerSec}}</div><div class="kv-key">Read/s</div><div class="kv-val">{{metrics.window?.readPerSec}}</div><div class="kv-key">Write/s</div><div class="kv-val">{{metrics.window?.writePerSec}}</div><div class="kv-key">Requests</div><div class="kv-val">{{formatNum(metrics.window?.requests)}}</div><div class="kv-key">Avg Read</div><div class="kv-val" style="font-family:monospace">{{metrics.window?.avgReadMs!=null?metrics.window.avgReadMs+'ms':'—'}}</div><div class="kv-key">Avg Write</div><div class="kv-val" style="font-family:monospace">{{metrics.window?.avgWriteMs!=null?metrics.window.avgWriteMs+'ms':'—'}}</div></div></div></div></div></if><if :="plugins.length > 0"><div class="card"><div class="card-title">Plugins ({{plugins.length}})</div><div style="display:flex;flex-wrap:wrap;gap:8px"><for :="plugins" let:p><span style="padding:4px 12px;border-radius:999px;font-size:12px;border:1px solid color-mix(in srgb,var(--okdb-accent) 33%,transparent);color:var(--okdb-accent);background:color-mix(in srgb,var(--okdb-accent) 7%,transparent)">{{p}}</span></for></div></div></if><if :="typeList.length > 0"><div class="card"><div class="card-title">Types ({{typeList.length}} across all environments)</div><table class="sys-table"><thead><tr><th>Type</th><th>Environment</th><th style="text-align:right">Records</th></tr></thead><tbody><tr as="repeat" :of="typeList" let:item="entry"><td style="font-family:monospace;font-size:12px">{{entry.name}}</td><td style="font-family:monospace;font-size:11px;opacity:.55">{{entry.env}}</td><td style="text-align:right;color:var(--okdb-accent)">{{formatNum(entry.count)}}</td></tr></tbody></table></div></if><if :="systemTypeList.length > 0"><div class="card"><details><summary style="cursor:pointer;font-weight:600;font-size:13px;list-style:none;display:flex;align-items:center;gap:8px"><span>▶</span><span>Internal / System Types ({{systemTypeList.length}})</span></summary><table class="sys-table" style="margin-top:10px"><thead><tr><th>Type</th><th>Environment</th><th style="text-align:right">Records</th></tr></thead><tbody><tr as="repeat" :of="systemTypeList" let:item="entry"><td style="font-family:monospace;font-size:12px;opacity:.7">{{entry.name}}</td><td style="font-family:monospace;font-size:11px;opacity:.45">{{entry.env}}</td><td style="text-align:right;color:var(--okdb-accent);opacity:.7">{{formatNum(entry.count)}}</td></tr></tbody></table></details></div></if><div class="card"><div style="display:flex;align-items:center;gap:10px;cursor:pointer" @click="toggleChangelog()"><div style="font-weight:600;font-size:14px;flex:1">System Change Log</div><span style="font-size:12px;opacity:.5">all environments</span> <span style="opacity:.5;font-size:12px">{{changelogOpen ? '▲' : '▼'}}</span></div><if :="changelogOpen"><div style="margin-top:12px;display:flex;flex-direction:column;gap:8px"><if :="changelogError"><div style="color:var(--okdb-danger);font-size:12px">{{changelogError}}</div></if><div style="display:flex;gap:6px;align-items:center"><button @click="loadChangelog()" :disabled="changelogBusy" style="font-size:12px;opacity:.8">↻ Refresh</button> <span style="font-size:12px;opacity:.5;margin-left:auto">showing {{changes.length}} entries</span></div><div style="overflow:auto;max-height:400px"><table style="width:100%;border-collapse:collapse;font-size:12px"><thead style="position:sticky;top:0;background:var(--okdb-app-surface);z-index:1"><tr><th class="cl-th" style="width:80px">Env</th><th class="cl-th" style="width:110px">Action</th><th class="cl-th" style="width:80px">Type</th><th class="cl-th">Key</th><th class="cl-th" style="width:90px;text-align:right">When</th></tr></thead><tbody><tr as="repeat" :of="changes" let:item="ch" class="cl-row"><td class="cl-td" style="font-family:monospace;font-size:10px;opacity:.5;white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis" :title="ch._env">{{ch._env||'default'}}</td><td class="cl-td"><span :style="'font-size:10px;padding:2px 5px;border-radius:3px;border:1px solid;color:'+actionColor(ch.action)+';border-color:'+actionColor(ch.action)+'44;'">{{actionLabel(ch.action)}}</span></td><td class="cl-td" style="font-family:monospace;font-size:11px;opacity:.75;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" :title="ch.type">{{ch.type||'—'}}</td><td class="cl-td" style="font-family:monospace;font-size:11px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" :title="ch.key">{{shortKey(ch.key)}}</td><td class="cl-td" style="text-align:right;opacity:.55;white-space:nowrap;font-size:11px">{{relTime(ch.timestamp)}}</td></tr></tbody></table></div><if :="changelogHasOlder"><button @click="loadMoreChangelog()" :disabled="changelogBusy" style="font-size:12px;align-self:flex-end">Load more ▼ ({{changelogLimit+100}})</button></if></div></if></div><div class="card"><system-locks-panel/></div></div></if><if :="subView === 'license'"><license-panel/></if></template></component></template><style>.sys-subnav{display:flex;flex-direction:column;gap:2px}.sys-subnav__item{display:flex;align-items:center;gap:6px;width:100%;text-align:left;padding:6px 10px;border-radius:7px;background:0 0;border-color:transparent;color:var(--okdb-app-fg-muted);font-size:12px;cursor:pointer;transition:color .13s,background .13s,border-color .13s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sys-subnav__item:hover{background:var(--okdb-app-surface-2);border-color:var(--okdb-app-border);color:var(--okdb-app-fg)}.sys-subnav__item--active{background:var(--okdb-app-bg-deep)!important;border-color:color-mix(in srgb,var(--okdb-accent) 27%,transparent)!important;color:var(--okdb-accent)!important}.sys-subnav__icon{font-size:12px;opacity:.7;flex-shrink:0}.sys-subnav__item--active .sys-subnav__icon{opacity:1}.sys-subnav__divider{height:1px;background:var(--okdb-app-surface);margin:3px 2px}.docs-nav{display:flex;flex-direction:column;gap:1px;margin:0 -10px;padding:2px 0}.docs-nav__item{display:block;width:100%;text-align:left;padding:5px 14px;border-radius:0;border:none;border-left:2px solid transparent;background:0 0;color:var(--okdb-app-fg-muted);font-size:12.5px;cursor:pointer;transition:color .13s,background .13s,border-color .13s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.55;letter-spacing:.01em}.docs-nav__item--standalone{font-weight:500;color:var(--okdb-app-fg);margin-top:2px}.docs-nav__item:hover{background:var(--okdb-app-surface-2);color:var(--okdb-app-fg);border-left-color:var(--okdb-app-border-strong)}.docs-nav__item--active{background:var(--okdb-accent-soft-bg)!important;color:var(--okdb-accent)!important;border-left-color:var(--okdb-accent)!important;font-weight:500}.docs-nav__group{margin-top:6px;padding-top:4px;border-top:1px solid var(--okdb-app-surface)}.docs-nav__group-label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--okdb-app-fg-faint);padding:4px 14px 5px;pointer-events:none;user-select:none}.docs-wrap{margin:-20px -24px -6px;min-height:calc(100% + 26px)}.docs-wrap ok-doc-viewer{--ok_color-accent:var(--okdb-accent);--ok_color-fg:var(--okdb-app-fg);--ok_color-muted-fg:var(--okdb-app-fg-muted);--ok_color-muted-border:var(--okdb-app-border);--font-mono:'Cascadia Code','Fira Code','Consolas',monospace;display:block;min-height:100%}.docs-wrap ok-doc-viewer .md table{border-collapse:collapse;width:100%;margin:1.2rem 0;font-size:13px}.docs-wrap ok-doc-viewer .md td,.docs-wrap ok-doc-viewer .md th{border:1px solid var(--okdb-app-border);padding:7px 12px;text-align:left}.docs-wrap ok-doc-viewer .md th{background:var(--okdb-app-surface-2);color:#8fc8e8;font-weight:600;font-size:12px;letter-spacing:.03em}.docs-wrap ok-doc-viewer .md tr:hover td{background:var(--okdb-app-surface)}.docs-wrap ok-doc-viewer .md a{color:var(--okdb-accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--okdb-accent) 27%,transparent);transition:border-color .15s,color .15s}.docs-wrap ok-doc-viewer .md a:hover{color:#7fd8ff;border-bottom-color:#7fd8ff88}.docs-wrap ok-doc-viewer .md code:not(pre code){background:var(--okdb-app-bg-deep);border:1px solid var(--okdb-app-border);color:var(--okdb-accent);padding:1px 6px;border-radius:4px;font-size:.9em}.docs-wrap ok-doc-viewer .md blockquote{border-left:3px solid color-mix(in srgb,var(--okdb-accent) 27%,transparent);margin:1rem 0;padding:6px 14px;background:var(--okdb-app-surface);border-radius:0 6px 6px 0;color:var(--okdb-app-fg-muted);font-style:italic}.card{background:var(--okdb-app-surface);border-radius:12px;padding:16px;box-shadow:0 0 5px #ffffff1a}.card-title{font-weight:600;margin-bottom:12px;font-size:14px}.kv-grid{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;font-size:13px}.kv-key{opacity:.6}.kv-val{word-break:break-all}.sys-table{width:100%;border-collapse:collapse;font-size:13px}.sys-table th{text-align:left;padding:6px 8px;border-bottom:1px solid var(--okdb-app-border);opacity:.6;font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.04em}.sys-table td{padding:5px 8px;border-bottom:1px solid var(--okdb-app-border)}.sys-table tr:last-child td{border-bottom:none}.sys-table tr:hover td{background:#ffffff08}.cl-th{padding:5px 8px;text-align:left;font-weight:500;font-size:10px;text-transform:uppercase;letter-spacing:.04em;opacity:.5;border-bottom:1px solid var(--okdb-app-border)}.cl-td{padding:5px 8px;border-bottom:1px solid var(--okdb-app-border)}.cl-row:hover .cl-td{background:#ffffff06}</style>
+<script type="module">import e from"../db/modals/create-env-modal.ok.js";import t from"../db/modals/demo-env-modal.ok.js";import o from"../db/modals/remove-env-modal.ok.js";import s from"./modals/data-ops-modal.ok.js";import n from"./parts/system-log.ok.js";import a from"./parts/system-log-history.ok.js";import r from"./parts/system-sync-panel.ok.js";import i from"./parts/system-auth-panel.ok.js";import c from"./parts/system-api-panel.ok.js";import l from"./parts/system-locks-panel.ok.js";import d from"./parts/system-processing-panel.ok.js";import m from"./parts/system-process-panel.ok.js";import h from"./parts/system-workers-panel.ok.js";import p from"./parts/system-runtime-overview.ok.js";import g from"../license/parts/license-panel.ok.js";import u from"@toolkit/components/ok-doc-viewer.ok.js";export default{tag:"system-index",unwrap:!0,dependencies:[n,a,r,i,c,l,d,m,h,p,g,u,e,t,o,s],context:e=>({_systemWildcard(){const t=e.$vars.$router?.match("/system/*");return t?.params?.["*"]??""},get subView(){return this._parseSubView(this._systemWildcard())},get isRuntime(){const e=this.subView;return"runtime"===e||"processes"===e||"workers"===e||"processing"===e},get runtimeTab(){const e=this.subView;return"runtime"===e?"overview":e},_parseSubView(e){const t=e??"";return t&&"overview"!==t?"logs"===t?"logs":"events"===t?"events":"sync"===t?"sync":"processing"===t?"processing":"processes"===t?"processes":"workers"===t?"workers":"runtime"===t?"runtime":"api"===t?"api":"auth"===t?"auth":"license"===t?"license":t.startsWith("docs")?"docs":"overview":"overview"},goToSystemSub(t){const o=e.$vars.$router;if(!o)return;const s=e.$ok.stores.okdb.selectedEnv,n=s?`?env=${encodeURIComponent(s)}`:"";o.push(`/system/${t}${n}`)},docsManifest:[],docsAnchor:"",get docsCurrentFile(){return this._parseDocsFile(this._systemWildcard())},_parseDocsFile(e){const t=e??"",o=t.startsWith("docs/")?t.slice(5):"";return o?o.replace(/\.md$/,"")+".md":"index.md"},docsIsActive(e){return this.docsCurrentFile===e},docsNavigateTo(e){const t=e.replace(/\.md$/,"");this.docsAnchor="",this.goToSystemSub("docs/"+t)},docsOnAnchorChange(e){this.docsAnchor=e},async loadDocsManifest(){if(!this.docsManifest.length)try{const e=await fetch("/docs/manifest.json");e.ok&&(this.docsManifest=await e.json())}catch{}},info:null,runtime:null,syncInfo:null,envs:[],loading:!1,error:null,autoRefresh:!0,_timer:null,metrics:null,async load(){this.loading=!0,this.error=null;try{const e=await fetch(`${__ENV__.API}/info`),t=await e.json();if(!e.ok)throw new Error(t?.error?.message||"Failed to load info");this.info=t.data??t}catch(e){this.error=e?.message||String(e)}finally{this.loading=!1}try{const t=await fetch(`${__ENV__.API}/envs`);if(t.ok){const o=await t.json();this.envs=o.data??[],e.$ok.stores.okdb.envs=this.envs}}catch{}try{const e=await fetch(`${__ENV__.API}/system/runtime`);if(e.ok){const t=await e.json();this.runtime=t.data??t}}catch{}try{const e=await fetch(`${__ENV__.API}/system/metrics`);if(e.ok){const t=await e.json();this.metrics=t.data??null}}catch{}try{const e=await fetch(`${__ENV__.API}/sync/info`);this.syncInfo=e.ok?(await e.json()).data??null:null}catch{this.syncInfo=null}},get approxSize(){const e=(this.envs||[]).reduce((e,t)=>e+(t.size||0),0);if(!e)return"--";const t=["B","KB","MB","GB","TB"];let o=e,s=0;for(;o>=1024&&s<t.length-1;)o/=1024,s++;return o.toFixed(2)+" "+t[s]},get typeList(){const e=[];for(const t of this.envs||[])for(const o of t.types||[])o.name.startsWith("~")||e.push({name:o.name,env:t.name,count:o.count??0});return e.sort((e,t)=>e.name.localeCompare(t.name)||e.env.localeCompare(t.env))},get systemTypeList(){const e=[];for(const t of this.envs||[])for(const o of t.types||[])o.name.startsWith("~")&&e.push({name:o.name,env:t.name,count:o.count??0});return e.sort((e,t)=>e.name.localeCompare(t.name)||e.env.localeCompare(t.env))},get totalTypeCount(){return this.typeList.length},get plugins(){return(this.info?.plugins||[]).filter(Boolean)},get config(){return this.info?.config??null},get durabilityLabel(){const e=this.config?.durability;return{strict:{label:"Strict",color:"var(--okdb-success)",hint:"Full fsync on every commit."},balanced:{label:"Balanced",color:"var(--okdb-accent)",hint:"Async fsync worker — crash-safe, fast."},fast:{label:"Fast",color:"var(--okdb-warning)",hint:"No per-commit fsync. May lose last tx on crash."},custom:{label:"Custom",color:"var(--okdb-purple)",hint:"Manual LMDB flags. No preset applied."}}[e]??{label:e??"--",color:"var(--okdb-app-fg-muted)",hint:""}},get configWarnings(){return this.config?.warnings??[]},formatBytes(e){if(null==e)return"--";const t=["B","KB","MB","GB","TB"];let o=e,s=0;for(;o>=1024&&s<t.length-1;)o/=1024,s++;return o.toFixed(0===s?0:2)+" "+t[s]},formatUptime(e){if(null==e)return"--";const t=Math.floor(e),o=Math.floor(t/86400),s=Math.floor(t%86400/3600),n=Math.floor(t%3600/60),a=t%60;return o>0?`${o}d ${s}h ${n}m`:s>0?`${s}h ${n}m ${a}s`:n>0?`${n}m ${a}s`:`${a}s`},formatLoad:e=>e&&e.length?e.map(e=>e.toFixed(2)).join(" / "):"--",processDetail:e=>e?.meta?.env?e.meta.queueType?`${e.meta.env} · ${e.meta.queueType}`:e.meta.env:e?.stats?.threads?.count?`${e.stats.threads.count} worker thread${1!==e.stats.threads.count?"s":""}`:"",pct:(e,t)=>e&&t?Math.round(e/t*100):0,get clock(){return this.syncInfo?.clock??this.info?.clock??"--"},get nodeId(){return this.syncInfo?.node?.id??this.info?.id??"--"},get nodeAddress(){return this.syncInfo?.node?.address??null},formatNum:e=>null==e?"--":Number(e).toLocaleString(),copyId(){navigator.clipboard?.writeText(this.nodeId).catch(()=>{})},changelogOpen:!1,changelogBusy:!1,changelogError:null,changes:[],changelogLimit:50,async loadChangelog(){this.changelogBusy=!0,this.changelogError=null;try{const e=new URLSearchParams({limit:this.changelogLimit}),t=await fetch(`${__ENV__.API}/system/changelog?${e}`),o=await t.json();if(!t.ok)throw new Error(o?.error?.message||"Failed");this.changes=o.data??[]}catch(e){this.changelogError=e?.message||String(e)}finally{this.changelogBusy=!1}},get changelogHasOlder(){return this.changes.length===this.changelogLimit},loadMoreChangelog(){this.changelogLimit=Math.min(this.changelogLimit+100,1e3),this.loadChangelog()},toggleChangelog(){this.changelogOpen=!this.changelogOpen,this.changelogOpen&&!this.changes.length&&this.loadChangelog()},actionColor:e=>({put:"var(--okdb-success)",remove:"var(--okdb-danger)",type_register:"var(--okdb-accent)",type_drop:"var(--okdb-danger)",index_register:"var(--okdb-purple)",index_drop:"var(--okdb-warning)"}[e]||"var(--okdb-app-fg-muted)"),actionLabel:e=>(e||"").replace(/_/g," ").toUpperCase(),shortKey:e=>e?e.length<=20?e:e.slice(0,10)+"…"+e.slice(-6):"—",relTime(e){if(!e)return"—";const t=Date.now()-e;return t<5e3?"just now":t<6e4?`${Math.round(t/1e3)}s ago`:t<36e5?`${Math.round(t/6e4)}m ago`:t<864e5?`${Math.round(t/36e5)}h ago`:new Date(e).toLocaleDateString()},showSystemEnvs:!1,get totalEnvSize(){return(this.envs||[]).reduce((e,t)=>e+(t.size||0),0)},get userEnvs(){return(this.envs||[]).filter(e=>!e.name.startsWith("~"))},get systemEnvs(){return(this.envs||[]).filter(e=>e.name.startsWith("~"))},get visibleEnvs(){return this.showSystemEnvs?this.envs:this.userEnvs},get orphanedEnvs(){return(this.envs||[]).filter(e=>e.orphaned)},goToEnv(t){e.$ok.stores.okdb.selectEnv(t),e.$vars.$router?.push?.("/db?env="+encodeURIComponent(t))},async openCreateEnv(){await e.$ok.shared.modal.open({owner:e,title:"Create Environment",content:'<create-env-modal :modal="modal" :on-done="onDone" />',context:t=>({modal:t,onDone:async()=>{await e.$ok.stores.okdb.reloadEnvs(),await this.load()}})})},async openDemoModal(){await e.$ok.shared.modal.open({owner:e,title:'<span style="background:linear-gradient(135deg,var(--okdb-accent),var(--okdb-purple) 50%,var(--okdb-success));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;font-size:15px;">✦ Demo Environment</span>',canDrag:!0,content:'<demo-env-modal :modal="modal" :on-done="onDone" />',context:t=>({modal:t,onDone:async t=>{e.$ok.stores.okdb.selectEnv(t),await e.$ok.stores.okdb.reloadEnvs(),await this.load(),e.$ok.shared?.toast?.success?.(`✦ Demo environment "${t}" is ready!`)}})})},_compactingEnvs:{},async compactEnv(t){if(!this._compactingEnvs[t]){this._compactingEnvs={...this._compactingEnvs,[t]:!0};try{const o=await fetch(`${__ENV__.API}/env/${encodeURIComponent(t)}/compact`,{method:"POST"}),s=await o.json();if(!o.ok)throw new Error(s?.error?.message||"Compact failed");const n=s.data??{},a=n.saved>0?`✓ Compacted "${t}": ${this.formatBytes(n.sizeBefore)} → ${this.formatBytes(n.sizeAfter)} (saved ${this.formatBytes(n.saved)}, ${n.savedPct}%)`:`✓ Compacted "${t}" — no space reclaimed (${this.formatBytes(n.sizeAfter)})`;e.$ok.shared?.toast?.success?.(a),await this.load()}catch(t){e.$ok.shared?.toast?.error?.("Compact failed: "+(t?.message||t))}finally{const e={...this._compactingEnvs};delete e[t],this._compactingEnvs=e}}},async openRemoveEnv(t){await e.$ok.shared.modal.open({owner:e,title:"Remove Environment",content:'<remove-env-modal :modal="modal" :env-name="envName" :on-done="onDone" />',context:o=>({modal:o,envName:t,onDone:async(t,o)=>{await e.$ok.stores.okdb.reloadEnvs(),e.$ok.stores.okdb.selectedEnv===t&&e.$ok.stores.okdb.selectEnv(e.$ok.stores.okdb._pickBestEnv()),await this.load(),o?.filesLocked?.length?e.$ok.shared?.toast?.warn?.(`"${t}" removed — some files could not be deleted (locked)`):e.$ok.shared?.toast?.success?.(`Environment "${t}" removed and files deleted`)}})})},async dismissOrphan(t){try{const o=await fetch(`${__ENV__.API}/env/${encodeURIComponent(t)}`,{method:"DELETE"}),s=await o.json().catch(()=>({}));if(!o.ok)throw new Error(s?.error?.message||o.statusText);const n=s.data??s;await e.$ok.stores.okdb.reloadEnvs(),await this.load(),n?.filesLocked?.length?e.$ok.shared?.toast?.warn?.(`Orphan "${t}" dismissed — some files could not be deleted (locked)`):e.$ok.shared?.toast?.info?.(`Orphan "${t}" dismissed`)}catch(t){e.$ok.shared?.toast?.error?.("Dismiss failed: "+(t?.message||t))}},async openDataOps(t){await e.$ok.shared.modal.open({owner:e,title:"⬦ Data Operations",canDrag:!0,content:'<data-ops-modal :modal="modal" :envs="envs" :on-done="onDone" :initial-tab="initialTab" />',context:o=>({modal:o,envs:this.envs,initialTab:t||"export",onDone:async()=>{await this.load(),e.$ok.shared?.toast?.success?.("Operation complete")}})})},logView:"live"}),async mount(e){await this.load(),this._timer=setInterval(()=>{this.autoRefresh&&"overview"===this.subView&&this.load()},1e4);const t=()=>{fetch(`${__ENV__.API}/envs`).then(e=>e.json()).then(t=>{this.envs=t.data??[],e.$ok.stores.okdb.envs=this.envs}).catch(()=>{})},o=e.$ok.stores.events?.on?.("env:opened",t),s=e.$ok.stores.events?.on?.("env:removed",t);this._unsubEnv=()=>{o?.(),s?.()},await this.loadDocsManifest()},unmount(){clearInterval(this._timer),this._unsubEnv?.()}};</script><template><component import="../../layouts/_default.ok.html"><template name="header"></template><template name="sidebar"><if :="subView === 'docs'"><nav class="sys-subnav" style="margin-bottom:6px"><button class="sys-subnav__item" @click="goToSystemSub('overview')" style="opacity:.6;font-size:11px">← System</button></nav><nav class="docs-nav" aria-label="Documentation"><each :of="docsManifest" let:item="item"><if :="item.file"><button class="docs-nav__item docs-nav__item--standalone" :class="{'docs-nav__item--active': docsIsActive(item.file)}" @click="docsNavigateTo(item.file)">{{ item.label }}</button></if><if :="item.children"><div class="docs-nav__group"><span class="docs-nav__group-label">{{ item.label }}</span><each :of="item.children" let:child="child"><button class="docs-nav__item" :class="{'docs-nav__item--active': docsIsActive(child.file)}" @click="docsNavigateTo(child.file)">{{ child.label }}</button></each></div></if></each></nav></if><if :="subView !== 'docs'"><nav class="sys-subnav" aria-label="System navigation"><button class="sys-subnav__item" :class="{'sys-subnav__item--active': subView==='overview'}" @click="goToSystemSub('overview')"><span class="sys-subnav__icon">⚙</span> Overview</button> <button class="sys-subnav__item" :class="{'sys-subnav__item--active': subView==='logs'}" @click="goToSystemSub('logs')"><span class="sys-subnav__icon">📋</span> Logs</button> <button class="sys-subnav__item" :class="{'sys-subnav__item--active': subView==='events'}" @click="goToSystemSub('events')"><span class="sys-subnav__icon">⚡</span> Events</button><div class="sys-subnav__divider"></div><button class="sys-subnav__item" :class="{'sys-subnav__item--active': isRuntime}" @click="goToSystemSub('runtime')"><span class="sys-subnav__icon">⊞</span> Runtime</button> <button class="sys-subnav__item" :class="{'sys-subnav__item--active': subView==='sync'}" @click="goToSystemSub('sync')"><span class="sys-subnav__icon">⇄</span> Sync</button> <button class="sys-subnav__item" :class="{'sys-subnav__item--active': subView==='auth'}" @click="goToSystemSub('auth')"><span class="sys-subnav__icon">🔐</span> Auth</button> <button class="sys-subnav__item" :class="{'sys-subnav__item--active': subView==='license'}" @click="goToSystemSub('license')"><span class="sys-subnav__icon">🔑</span> License</button><div class="sys-subnav__divider"></div><button class="sys-subnav__item" :class="{'sys-subnav__item--active': subView==='api'}" @click="goToSystemSub('api')"><span class="sys-subnav__icon">⌁</span> API</button> <button class="sys-subnav__item" :class="{'sys-subnav__item--active': subView==='docs'}" @click="goToSystemSub('docs')"><span class="sys-subnav__icon">≡</span> Docs</button></nav></if></template><template name="default"><if :="subView === 'logs'"><div style="display:flex;flex-direction:column;gap:12px;height:100%;min-height:0"><div style="display:flex;align-items:center;gap:8px;flex-shrink:0"><div style="font-weight:600;font-size:15px;opacity:.8">Logs</div><div style="display:flex;gap:2px;padding:2px;background:var(--okdb-app-surface);border-radius:8px;border:1px solid var(--okdb-app-border)"><button @click="logView='live'" :style="logView==='live'    ?'background:var(--okdb-app-surface-2);color:var(--okdb-accent);border-color:color-mix(in srgb, var(--okdb-accent) 27%, transparent);':'background:transparent;border-color:transparent;opacity:.7;'" style="padding:4px 14px;border-radius:6px;font-size:12px">Live</button> <button @click="logView='history'" :style="logView==='history' ?'background:var(--okdb-app-surface-2);color:var(--okdb-accent);border-color:color-mix(in srgb, var(--okdb-accent) 27%, transparent);':'background:transparent;border-color:transparent;opacity:.7;'" style="padding:4px 14px;border-radius:6px;font-size:12px">History</button></div></div><if :="logView === 'live'"><system-log :initial-source="'log'" style="flex:1;min-height:300px"/></if><if :="logView === 'history'"><system-log-history style="flex:1;min-height:300px"/></if></div></if><if :="subView === 'events'"><div style="display:flex;flex-direction:column;gap:12px;height:100%;min-height:0"><div style="font-weight:600;font-size:15px;opacity:.8;flex-shrink:0">Events</div><system-log :initial-source="'event'" style="flex:1;min-height:300px"/></div></if><if :="isRuntime"><div style="display:flex;flex-direction:column;gap:14px;height:100%;min-height:0"><nav style="display:flex;gap:4px;border-bottom:1px solid var(--okdb-app-border);padding-bottom:0"><button @click="goToSystemSub('runtime')" :style="'font-size:12px;padding:6px 12px;background:none;border:none;border-bottom:2px solid ' + (runtimeTab==='overview'   ? 'var(--okdb-accent)' : 'transparent') + ';cursor:pointer;color:' + (runtimeTab==='overview'   ? 'var(--okdb-app-fg-strong)' : 'var(--okdb-app-fg-subtle)') + ';'">Overview</button> <button @click="goToSystemSub('processes')" :style="'font-size:12px;padding:6px 12px;background:none;border:none;border-bottom:2px solid ' + (runtimeTab==='processes'  ? 'var(--okdb-accent)' : 'transparent') + ';cursor:pointer;color:' + (runtimeTab==='processes'  ? 'var(--okdb-app-fg-strong)' : 'var(--okdb-app-fg-subtle)') + ';'">Processes</button> <button @click="goToSystemSub('workers')" :style="'font-size:12px;padding:6px 12px;background:none;border:none;border-bottom:2px solid ' + (runtimeTab==='workers'    ? 'var(--okdb-accent)' : 'transparent') + ';cursor:pointer;color:' + (runtimeTab==='workers'    ? 'var(--okdb-app-fg-strong)' : 'var(--okdb-app-fg-subtle)') + ';'">Workers</button> <button @click="goToSystemSub('processing')" :style="'font-size:12px;padding:6px 12px;background:none;border:none;border-bottom:2px solid ' + (runtimeTab==='processing' ? 'var(--okdb-accent)' : 'transparent') + ';cursor:pointer;color:' + (runtimeTab==='processing' ? 'var(--okdb-app-fg-strong)' : 'var(--okdb-app-fg-subtle)') + ';'">Processors</button></nav><div style="flex:1;min-height:0;overflow:auto"><if :="runtimeTab === 'overview'"><system-runtime-overview/></if><if :="runtimeTab === 'processes'"><system-process-panel style="height:100%;min-height:0"/></if><if :="runtimeTab === 'workers'"><system-workers-panel/></if><if :="runtimeTab === 'processing'"><system-processing-panel/></if></div></div></if><if :="subView === 'sync'"><system-sync-panel style="height:100%;min-height:0"/></if><if :="subView === 'auth'"><system-auth-panel style="height:100%;min-height:0"/></if><if :="subView === 'api'"><system-api-panel style="height:100%;min-height:0"/></if><if :="subView === 'docs'"><div class="docs-wrap"><ok-doc-viewer :blocks="[]" root="/docs/" prefix="#/system/docs/" :file="docsCurrentFile" :anchor="docsAnchor" :manifest="docsManifest" sidebar-title="On this page" @anchor-change="docsOnAnchorChange($event.detail)"/></div></if><if :="subView === 'overview'"><div style="display:flex;flex-direction:column;gap:20px;max-width:900px"><div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap"><div style="font-weight:600;font-size:16px">Overview</div><button @click="load()" :disabled="loading" style="opacity:.8;font-size:12px">↻ Refresh</button> <label style="display:flex;align-items:center;gap:6px;font-size:12px;opacity:.7;cursor:pointer"><input type="checkbox" :checked="autoRefresh" @change="autoRefresh = $el.checked"/> Auto-refresh 10s</label><if :="loading"><span style="font-size:12px;opacity:.55">Loading…</span></if></div><if :="error"><div style="color:var(--okdb-danger);font-size:13px;padding:10px;border:1px solid var(--okdb-danger);border-radius:8px">{{error}}</div></if><div style="display:grid;grid-template-columns:1fr 1fr;gap:16px"><div class="card"><div class="card-title">Node Identity</div><div class="kv-grid"><div class="kv-key">Node ID</div><div class="kv-val" style="display:flex;align-items:center;gap:6px"><span style="font-family:monospace;font-size:12px;word-break:break-all">{{nodeId}}</span> <button @click="copyId()" style="font-size:10px;padding:2px 6px;opacity:.7">copy</button></div><if :="nodeAddress"><div class="kv-key">Address</div><div class="kv-val" style="font-family:monospace;font-size:12px">{{nodeAddress}}</div></if><div class="kv-key">Clock</div><div class="kv-val" style="font-family:monospace">{{formatNum(clock)}}</div><div class="kv-key">DB State</div><div class="kv-val" style="color:var(--okdb-success)">open</div><div class="kv-key">OKDB</div><div class="kv-val" style="font-family:monospace">v{{info?.versions?.okdb ?? info?.version ?? '--'}}</div><div class="kv-key">lmdb-js</div><div class="kv-val" style="font-family:monospace">v{{info?.versions?.lmdb ?? '--'}}</div><div class="kv-key">LMDB</div><div class="kv-val" style="font-family:monospace;font-size:11px;opacity:.7">{{info?.versions?.lmdbNative ?? '--'}}</div></div></div><div class="card"><div class="card-title">Storage (all environments)</div><div class="kv-grid"><div class="kv-key">Total Size</div><div class="kv-val" style="font-size:20px;font-weight:600;color:var(--okdb-accent)">{{approxSize}}</div><div class="kv-key">Environments</div><div class="kv-val">{{(envs || []).length}}</div><div class="kv-key">User Types</div><div class="kv-val">{{totalTypeCount}}</div><div class="kv-key">Page Size</div><div class="kv-val">{{formatNum(info?.pageSize)}} B</div><div class="kv-key">Map Size</div><div class="kv-val">{{info?.config?.lmdbOptions?.mapSize ? (info.config.lmdbOptions.mapSize/1024/1024/1024).toFixed(2)+' GB' : '--'}} <span style="opacity:.4;font-size:11px">(per env)</span></div></div></div></div><if :="envs && envs.length > 0"><div class="card"><div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap"><div style="font-weight:600;font-size:14px;flex:1">Environments ({{userEnvs.length}}<if :="systemEnvs.length > 0"><span style="opacity:.4;font-size:12px;font-weight:400">+ {{systemEnvs.length}} system</span></if>)</div><span style="font-size:12px;opacity:.5">{{formatBytes(totalEnvSize)}}</span><if :="systemEnvs.length > 0"><button @click="showSystemEnvs = !showSystemEnvs" style="font-size:11px;padding:3px 8px;opacity:.6">{{showSystemEnvs ? '▴ hide system' : '⚙ show system'}}</button></if><button @click="openCreateEnv()" style="font-size:11px;padding:4px 10px;opacity:.8">+ Create</button> <button @click="openDemoModal()" style="font-size:11px;padding:4px 12px;background:linear-gradient(135deg,color-mix(in srgb,var(--okdb-accent) 7%,transparent),color-mix(in srgb,var(--okdb-purple) 7%,transparent));border:1px solid color-mix(in srgb,var(--okdb-accent) 27%,transparent);color:var(--okdb-accent);border-radius:6px;font-weight:600" title="Generate a demo environment">✦ Demo</button></div><table class="sys-table"><thead><tr><th>Name</th><th style="text-align:right">Size</th><th style="text-align:right">Clock</th><th style="text-align:right">Types</th><th style="text-align:center">Sync</th><th></th></tr></thead><tbody><tr as="repeat" :of="visibleEnvs" let:item="e" class="sys-table-row"><td style="font-family:monospace;font-size:12px"><a @click.prevent="goToEnv(e.name)" href="#" style="color:var(--okdb-accent);text-decoration:none" :title="'Explore '+e.name">{{e.name}}</a><if :="e.parentEnv"><span style="font-size:10px;opacity:.4;font-family:monospace;margin-left:4px">↳ {{e.parentEnv}}</span></if></td><td style="text-align:right;font-size:12px;font-family:monospace;opacity:.8">{{formatBytes(e.size)}}</td><td style="text-align:right;font-family:monospace;font-size:12px;opacity:.7">{{e.sync ? formatNum(e.clock) : '—'}}</td><td style="text-align:right;font-size:12px;opacity:.7">{{e.types ? e.types.length : 0}}</td><td style="text-align:center"><span :style="e.sync?'color:var(--okdb-success);font-size:11px;':'opacity:.4;font-size:11px;'">{{e.sync?'✓':'✗'}}</span></td><td style="text-align:right;white-space:nowrap"><button @click="compactEnv(e.name)" :disabled="_compactingEnvs[e.name]" :style="_compactingEnvs[e.name]?'font-size:10px;padding:2px 8px;opacity:.35;cursor:not-allowed;':'font-size:10px;padding:2px 8px;opacity:.55;'">{{_compactingEnvs[e.name]?'⏳ compacting…':'⬡ compact'}}</button><if :="e.name !== '~system'"><button @click="openRemoveEnv(e.name)" style="font-size:10px;padding:2px 8px;opacity:.45;color:var(--okdb-danger);border-color:color-mix(in srgb,var(--okdb-danger) 20%,transparent);margin-left:4px">🗑 remove</button></if></td></tr></tbody></table><if :="orphanedEnvs.length > 0"><div style="margin-top:16px;border-top:1px solid var(--okdb-app-border);padding-top:14px"><div style="font-size:12px;font-weight:600;opacity:.6;margin-bottom:8px;display:flex;align-items:center;gap:6px"><span style="color:var(--okdb-orange)">⚠</span> Orphaned sub-environments ({{orphanedEnvs.length}}) <span style="font-size:11px;font-weight:400;opacity:.55;margin-left:2px">— parent was removed; data on disk is intact</span></div><table class="sys-table"><tbody><tr as="repeat" :of="orphanedEnvs" let:item="e" class="sys-table-row"><td style="font-family:monospace;font-size:12px;opacity:.5;text-decoration:line-through">{{e.name}}</td><td style="font-size:11px;opacity:.4;font-style:italic">orphaned from <span style="font-family:monospace">{{e.orphanedFrom ?? '—'}}</span></td><td style="text-align:right;white-space:nowrap"><button @click="dismissOrphan(e.name)" style="font-size:10px;padding:2px 8px;opacity:.5;color:var(--okdb-danger);border-color:color-mix(in srgb,var(--okdb-danger) 20%,transparent)">✕ dismiss</button></td></tr></tbody></table></div></if></div></if><div class="card" style="border:1px solid color-mix(in srgb,var(--okdb-accent) 9%,transparent);background:linear-gradient(135deg,var(--okdb-app-bg-deep),var(--okdb-app-surface))"><div style="display:flex;align-items:center;gap:14px;flex-wrap:wrap"><div style="flex:1;min-width:200px"><div style="font-weight:600;font-size:14px;margin-bottom:4px;display:flex;align-items:center;gap:8px"><span style="color:var(--okdb-accent);opacity:.7">⬦</span> Data Operations</div><div style="font-size:12px;opacity:.45;line-height:1.5">Export &amp; import logical NDJSON snapshots · hot filesystem backup</div></div><div style="display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;align-items:center"><button @click="openDataOps('export')" style="display:flex;align-items:center;gap:6px;padding:7px 15px;border-radius:8px;font-size:12px;font-weight:600;background:linear-gradient(135deg,var(--okdb-app-bg-deep),var(--okdb-app-bg-deep));border:1px solid color-mix(in srgb,var(--okdb-accent) 27%,transparent);color:var(--okdb-accent);cursor:pointer;white-space:nowrap">⬇ Export</button> <button @click="openDataOps('import')" style="display:flex;align-items:center;gap:6px;padding:7px 15px;border-radius:8px;font-size:12px;font-weight:600;background:linear-gradient(135deg,var(--okdb-app-bg-deep),var(--okdb-app-bg-deep));border:1px solid color-mix(in srgb,var(--okdb-accent) 27%,transparent);color:var(--okdb-accent);cursor:pointer;white-space:nowrap">⬆ Import</button><div style="width:1px;height:24px;background:var(--okdb-app-border);margin:0 2px;flex-shrink:0"></div><button @click="openDataOps('backup')" style="display:flex;align-items:center;gap:6px;padding:7px 15px;border-radius:8px;font-size:12px;font-weight:600;background:linear-gradient(135deg,var(--okdb-app-bg-deep),var(--okdb-app-bg-deep));border:1px solid color-mix(in srgb,var(--okdb-purple) 27%,transparent);color:var(--okdb-purple);cursor:pointer;white-space:nowrap">🗄 Backup</button></div></div></div><div style="display:grid;grid-template-columns:1fr 1fr;gap:16px"><div class="card"><div class="card-title">Configuration</div><div class="kv-grid"><div class="kv-key">Durability</div><div class="kv-val" style="display:flex;align-items:center;gap:6px"><span :style="'font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid;color:'+durabilityLabel.color+';border-color:'+durabilityLabel.color+'44;background:'+durabilityLabel.color+'11;'">{{durabilityLabel.label}}</span> <span style="opacity:.5;font-size:11px;flex:1">{{durabilityLabel.hint}}</span></div><div class="kv-key">Compression</div><div class="kv-val"><span :style="config?.lmdbOptions?.compression?'color:var(--okdb-success)':'opacity:.5'">{{config?.lmdbOptions?.compression?'LZ4 enabled':'disabled'}}</span></div><div class="kv-key">Encryption</div><div class="kv-val"><span :style="config?.lmdbOptions?.encryptionKey?'color:var(--okdb-success)':'opacity:.5'">{{config?.lmdbOptions?.encryptionKey?'Chacha8 enabled':'none'}}</span></div><div class="kv-key">Map Size</div><div class="kv-val">{{formatBytes(config?.lmdbOptions?.mapSize)}}</div><div class="kv-key">Max DBs</div><div class="kv-val">{{formatNum(config?.lmdbOptions?.maxDbs)}}</div></div><if :="configWarnings.length > 0"><div style="margin-top:10px;display:flex;flex-direction:column;gap:4px"><for :="configWarnings" let:w><div style="font-size:11px;color:var(--okdb-warning);background:color-mix(in srgb,var(--okdb-warning) 7%,transparent);border:1px solid color-mix(in srgb,var(--okdb-warning) 20%,transparent);border-radius:6px;padding:5px 8px;line-height:1.4">⚠ {{w}}</div></for></div></if></div><div class="card"><div class="card-title">Process <span style="font-size:11px;opacity:.5;font-weight:400">this responder only{{runtime?.processes ? ' — all processes below' : ''}}</span></div><if :="!runtime"><div style="opacity:.4;font-size:12px">Loading…</div></if><if :="runtime"><div class="kv-grid"><div class="kv-key">PID</div><div class="kv-val" style="font-family:monospace">{{runtime.process?.pid}}</div><div class="kv-key">Uptime</div><div class="kv-val">{{formatUptime(runtime.process?.uptime)}}</div><div class="kv-key">Node.js</div><div class="kv-val" style="font-family:monospace">v{{runtime.process?.node}}</div><div class="kv-key" style="align-self:center">CPU</div><div class="kv-val" style="display:flex;align-items:center;gap:6px"><div style="flex:1;height:6px;background:var(--okdb-app-border);border-radius:3px;overflow:hidden"><div :style="'height:100%;border-radius:3px;transition:width .4s;background:'+(runtime.process?.cpu?.pct>80?'var(--okdb-danger)':runtime.process?.cpu?.pct>40?'var(--okdb-warning)':'var(--okdb-success)')+';width:'+(runtime.process?.cpu?.pct??0)+'%;'"></div></div><span style="font-size:11px;opacity:.6;min-width:30px">{{runtime.process?.cpu?.pct??0}}%</span></div><div class="kv-key">RSS</div><div class="kv-val">{{formatBytes(runtime.process?.memory?.rss)}}</div><div class="kv-key">Heap Used</div><div class="kv-val">{{formatBytes(runtime.process?.memory?.heapUsed)}} <span style="opacity:.45;font-size:11px">/ {{formatBytes(runtime.process?.memory?.heapTotal)}}</span></div><div class="kv-key" style="align-self:center">Heap %</div><div class="kv-val" style="display:flex;align-items:center;gap:6px"><div style="flex:1;height:6px;background:var(--okdb-app-border);border-radius:3px;overflow:hidden"><div :style="'height:100%;background:var(--okdb-accent);border-radius:3px;width:'+pct(runtime.process?.memory?.heapUsed,runtime.process?.memory?.heapTotal)+'%;'"></div></div><span style="font-size:11px;opacity:.6;min-width:30px">{{pct(runtime.process?.memory?.heapUsed,runtime.process?.memory?.heapTotal)}}%</span></div><div class="kv-key">External</div><div class="kv-val">{{formatBytes(runtime.process?.memory?.external)}}</div></div></if></div></div><if :="runtime?.processes"><div class="card"><div class="card-title">Processes <span style="font-size:11px;opacity:.5;font-weight:400">{{runtime.processes.totals?.processes}} · Σ RSS {{formatBytes(runtime.processes.totals?.rss)}} · Σ heap {{formatBytes(runtime.processes.totals?.heapUsed)}}</span></div><div style="display:flex;flex-direction:column;gap:4px"><div style="display:grid;grid-template-columns:110px 70px 1fr 90px 110px 56px;gap:8px;font-size:10px;opacity:.45;text-transform:uppercase;letter-spacing:.05em"><div>Kind</div><div>PID</div><div></div><div style="text-align:right">RSS</div><div style="text-align:right">Heap</div><div style="text-align:right">CPU</div></div><for :="runtime.processes.nodes" let:n><div style="display:grid;grid-template-columns:110px 70px 1fr 90px 110px 56px;gap:8px;font-size:12px;align-items:center"><div style="font-family:monospace">{{n.kind}}</div><div style="font-family:monospace;opacity:.7">{{n.pid}}</div><div style="font-size:11px;opacity:.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{processDetail(n)}}</div><div style="text-align:right;font-family:monospace">{{n.stats ? formatBytes(n.stats.rss) : '--'}}</div><div style="text-align:right;font-family:monospace">{{n.stats ? formatBytes((n.stats.heapUsed||0)+(n.stats.threads?.heapUsed||0)) : '--'}}</div><div style="text-align:right;font-family:monospace">{{n.stats?.cpuPct != null ? n.stats.cpuPct+'%' : '--'}}</div></div></for></div></div></if><div class="card"><div class="card-title">Machine</div><if :="!runtime"><div style="opacity:.4;font-size:12px">Loading…</div></if><if :="runtime"><div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px"><div><div style="font-size:11px;opacity:.5;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px">Memory</div><div style="font-size:22px;font-weight:600;color:var(--okdb-accent)">{{formatBytes(runtime.os?.freeMemory)}}</div><div style="font-size:11px;opacity:.5;margin-top:2px">free of {{formatBytes(runtime.os?.totalMemory)}}</div><div style="margin-top:8px;height:6px;background:var(--okdb-app-border);border-radius:3px;overflow:hidden"><div :style="'height:100%;background:var(--okdb-accent);border-radius:3px;width:'+pct(runtime.os?.totalMemory-runtime.os?.freeMemory,runtime.os?.totalMemory)+'%;'"></div></div><div style="font-size:11px;opacity:.45;margin-top:3px">{{pct(runtime.os?.totalMemory-runtime.os?.freeMemory,runtime.os?.totalMemory)}}% used</div></div><div><div style="font-size:11px;opacity:.5;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px">CPU</div><div style="font-size:14px;font-weight:600">{{runtime.os?.cpuCount}} core{{runtime.os?.cpuCount!==1?'s':''}}</div><div style="font-size:11px;opacity:.5;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis" :title="runtime.os?.cpuModel">{{runtime.os?.cpuModel}}</div><div style="margin-top:8px;font-size:11px;opacity:.6">Load avg (1m/5m/15m)</div><div style="font-size:13px;font-family:monospace;margin-top:2px">{{formatLoad(runtime.os?.loadAvg)}}</div></div><div><div style="font-size:11px;opacity:.5;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px">Platform</div><div style="font-size:14px;font-weight:600;text-transform:capitalize">{{runtime.os?.platform}}</div><div style="font-size:11px;opacity:.5;margin-top:3px">{{runtime.os?.arch}}</div><div style="font-size:11px;opacity:.35;margin-top:6px;word-break:break-all">{{runtime.os?.release}}</div><div style="font-size:11px;opacity:.4;margin-top:3px;font-family:monospace">{{runtime.os?.hostname}}</div></div></div></if></div><if :="metrics"><div class="card"><div class="card-title">API Metrics</div><div style="display:grid;grid-template-columns:1fr 1fr;gap:16px"><div><div style="font-size:11px;opacity:.5;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px">Lifetime</div><div class="kv-grid"><div class="kv-key">Requests</div><div class="kv-val" style="color:var(--okdb-accent);font-weight:600">{{formatNum(metrics.lifetime?.requests)}}</div><div class="kv-key">Reads</div><div class="kv-val">{{formatNum(metrics.lifetime?.reads)}}</div><div class="kv-key">Writes</div><div class="kv-val">{{formatNum(metrics.lifetime?.writes)}}</div><div class="kv-key">Errors</div><div class="kv-val" :style="metrics.lifetime?.errors>0?'color:var(--okdb-danger);':'opacity:.5;'">{{formatNum(metrics.lifetime?.errors)}}</div><div class="kv-key">Avg Read</div><div class="kv-val" style="font-family:monospace">{{metrics.lifetime?.avgReadMs!=null?metrics.lifetime.avgReadMs+'ms':'—'}}</div><div class="kv-key">Avg Write</div><div class="kv-val" style="font-family:monospace">{{metrics.lifetime?.avgWriteMs!=null?metrics.lifetime.avgWriteMs+'ms':'—'}}</div></div></div><div><div style="font-size:11px;opacity:.5;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px">Last 60 seconds</div><div class="kv-grid"><div class="kv-key">Req/s</div><div class="kv-val" style="color:var(--okdb-success);font-weight:600">{{metrics.window?.reqPerSec}}</div><div class="kv-key">Read/s</div><div class="kv-val">{{metrics.window?.readPerSec}}</div><div class="kv-key">Write/s</div><div class="kv-val">{{metrics.window?.writePerSec}}</div><div class="kv-key">Requests</div><div class="kv-val">{{formatNum(metrics.window?.requests)}}</div><div class="kv-key">Avg Read</div><div class="kv-val" style="font-family:monospace">{{metrics.window?.avgReadMs!=null?metrics.window.avgReadMs+'ms':'—'}}</div><div class="kv-key">Avg Write</div><div class="kv-val" style="font-family:monospace">{{metrics.window?.avgWriteMs!=null?metrics.window.avgWriteMs+'ms':'—'}}</div></div></div></div></div></if><if :="plugins.length > 0"><div class="card"><div class="card-title">Plugins ({{plugins.length}})</div><div style="display:flex;flex-wrap:wrap;gap:8px"><for :="plugins" let:p><span style="padding:4px 12px;border-radius:999px;font-size:12px;border:1px solid color-mix(in srgb,var(--okdb-accent) 33%,transparent);color:var(--okdb-accent);background:color-mix(in srgb,var(--okdb-accent) 7%,transparent)">{{p}}</span></for></div></div></if><if :="typeList.length > 0"><div class="card"><div class="card-title">Types ({{typeList.length}} across all environments)</div><table class="sys-table"><thead><tr><th>Type</th><th>Environment</th><th style="text-align:right">Records</th></tr></thead><tbody><tr as="repeat" :of="typeList" let:item="entry"><td style="font-family:monospace;font-size:12px">{{entry.name}}</td><td style="font-family:monospace;font-size:11px;opacity:.55">{{entry.env}}</td><td style="text-align:right;color:var(--okdb-accent)">{{formatNum(entry.count)}}</td></tr></tbody></table></div></if><if :="systemTypeList.length > 0"><div class="card"><details><summary style="cursor:pointer;font-weight:600;font-size:13px;list-style:none;display:flex;align-items:center;gap:8px"><span>▶</span><span>Internal / System Types ({{systemTypeList.length}})</span></summary><table class="sys-table" style="margin-top:10px"><thead><tr><th>Type</th><th>Environment</th><th style="text-align:right">Records</th></tr></thead><tbody><tr as="repeat" :of="systemTypeList" let:item="entry"><td style="font-family:monospace;font-size:12px;opacity:.7">{{entry.name}}</td><td style="font-family:monospace;font-size:11px;opacity:.45">{{entry.env}}</td><td style="text-align:right;color:var(--okdb-accent);opacity:.7">{{formatNum(entry.count)}}</td></tr></tbody></table></details></div></if><div class="card"><div style="display:flex;align-items:center;gap:10px;cursor:pointer" @click="toggleChangelog()"><div style="font-weight:600;font-size:14px;flex:1">System Change Log</div><span style="font-size:12px;opacity:.5">all environments</span> <span style="opacity:.5;font-size:12px">{{changelogOpen ? '▲' : '▼'}}</span></div><if :="changelogOpen"><div style="margin-top:12px;display:flex;flex-direction:column;gap:8px"><if :="changelogError"><div style="color:var(--okdb-danger);font-size:12px">{{changelogError}}</div></if><div style="display:flex;gap:6px;align-items:center"><button @click="loadChangelog()" :disabled="changelogBusy" style="font-size:12px;opacity:.8">↻ Refresh</button> <span style="font-size:12px;opacity:.5;margin-left:auto">showing {{changes.length}} entries</span></div><div style="overflow:auto;max-height:400px"><table style="width:100%;border-collapse:collapse;font-size:12px"><thead style="position:sticky;top:0;background:var(--okdb-app-surface);z-index:1"><tr><th class="cl-th" style="width:80px">Env</th><th class="cl-th" style="width:110px">Action</th><th class="cl-th" style="width:80px">Type</th><th class="cl-th">Key</th><th class="cl-th" style="width:90px;text-align:right">When</th></tr></thead><tbody><tr as="repeat" :of="changes" let:item="ch" class="cl-row"><td class="cl-td" style="font-family:monospace;font-size:10px;opacity:.5;white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis" :title="ch._env">{{ch._env||'default'}}</td><td class="cl-td"><span :style="'font-size:10px;padding:2px 5px;border-radius:3px;border:1px solid;color:'+actionColor(ch.action)+';border-color:'+actionColor(ch.action)+'44;'">{{actionLabel(ch.action)}}</span></td><td class="cl-td" style="font-family:monospace;font-size:11px;opacity:.75;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" :title="ch.type">{{ch.type||'—'}}</td><td class="cl-td" style="font-family:monospace;font-size:11px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" :title="ch.key">{{shortKey(ch.key)}}</td><td class="cl-td" style="text-align:right;opacity:.55;white-space:nowrap;font-size:11px">{{relTime(ch.timestamp)}}</td></tr></tbody></table></div><if :="changelogHasOlder"><button @click="loadMoreChangelog()" :disabled="changelogBusy" style="font-size:12px;align-self:flex-end">Load more ▼ ({{changelogLimit+100}})</button></if></div></if></div><div class="card"><system-locks-panel/></div></div></if><if :="subView === 'license'"><license-panel/></if></template></component></template><style>.sys-subnav{display:flex;flex-direction:column;gap:2px}.sys-subnav__item{display:flex;align-items:center;gap:6px;width:100%;text-align:left;padding:6px 10px;border-radius:7px;background:0 0;border-color:transparent;color:var(--okdb-app-fg-muted);font-size:12px;cursor:pointer;transition:color .13s,background .13s,border-color .13s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sys-subnav__item:hover{background:var(--okdb-app-surface-2);border-color:var(--okdb-app-border);color:var(--okdb-app-fg)}.sys-subnav__item--active{background:var(--okdb-app-bg-deep)!important;border-color:color-mix(in srgb,var(--okdb-accent) 27%,transparent)!important;color:var(--okdb-accent)!important}.sys-subnav__icon{font-size:12px;opacity:.7;flex-shrink:0}.sys-subnav__item--active .sys-subnav__icon{opacity:1}.sys-subnav__divider{height:1px;background:var(--okdb-app-surface);margin:3px 2px}.docs-nav{display:flex;flex-direction:column;gap:1px;margin:0 -10px;padding:2px 0}.docs-nav__item{display:block;width:100%;text-align:left;padding:5px 14px;border-radius:0;border:none;border-left:2px solid transparent;background:0 0;color:var(--okdb-app-fg-muted);font-size:12.5px;cursor:pointer;transition:color .13s,background .13s,border-color .13s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.55;letter-spacing:.01em}.docs-nav__item--standalone{font-weight:500;color:var(--okdb-app-fg);margin-top:2px}.docs-nav__item:hover{background:var(--okdb-app-surface-2);color:var(--okdb-app-fg);border-left-color:var(--okdb-app-border-strong)}.docs-nav__item--active{background:var(--okdb-accent-soft-bg)!important;color:var(--okdb-accent)!important;border-left-color:var(--okdb-accent)!important;font-weight:500}.docs-nav__group{margin-top:6px;padding-top:4px;border-top:1px solid var(--okdb-app-surface)}.docs-nav__group-label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--okdb-app-fg-faint);padding:4px 14px 5px;pointer-events:none;user-select:none}.docs-wrap{margin:-20px -24px -6px;min-height:calc(100% + 26px)}.docs-wrap ok-doc-viewer{--ok_color-accent:var(--okdb-accent);--ok_color-fg:var(--okdb-app-fg);--ok_color-muted-fg:var(--okdb-app-fg-muted);--ok_color-muted-border:var(--okdb-app-border);--font-mono:'Cascadia Code','Fira Code','Consolas',monospace;display:block;min-height:100%}.docs-wrap ok-doc-viewer .md table{border-collapse:collapse;width:100%;margin:1.2rem 0;font-size:13px}.docs-wrap ok-doc-viewer .md td,.docs-wrap ok-doc-viewer .md th{border:1px solid var(--okdb-app-border);padding:7px 12px;text-align:left}.docs-wrap ok-doc-viewer .md th{background:var(--okdb-app-surface-2);color:#8fc8e8;font-weight:600;font-size:12px;letter-spacing:.03em}.docs-wrap ok-doc-viewer .md tr:hover td{background:var(--okdb-app-surface)}.docs-wrap ok-doc-viewer .md a{color:var(--okdb-accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--okdb-accent) 27%,transparent);transition:border-color .15s,color .15s}.docs-wrap ok-doc-viewer .md a:hover{color:#7fd8ff;border-bottom-color:#7fd8ff88}.docs-wrap ok-doc-viewer .md code:not(pre code){background:var(--okdb-app-bg-deep);border:1px solid var(--okdb-app-border);color:var(--okdb-accent);padding:1px 6px;border-radius:4px;font-size:.9em}.docs-wrap ok-doc-viewer .md blockquote{border-left:3px solid color-mix(in srgb,var(--okdb-accent) 27%,transparent);margin:1rem 0;padding:6px 14px;background:var(--okdb-app-surface);border-radius:0 6px 6px 0;color:var(--okdb-app-fg-muted);font-style:italic}.card{background:var(--okdb-app-surface);border-radius:12px;padding:16px;box-shadow:0 0 5px #ffffff1a}.card-title{font-weight:600;margin-bottom:12px;font-size:14px}.kv-grid{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;font-size:13px}.kv-key{opacity:.6}.kv-val{word-break:break-all}.sys-table{width:100%;border-collapse:collapse;font-size:13px}.sys-table th{text-align:left;padding:6px 8px;border-bottom:1px solid var(--okdb-app-border);opacity:.6;font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.04em}.sys-table td{padding:5px 8px;border-bottom:1px solid var(--okdb-app-border)}.sys-table tr:last-child td{border-bottom:none}.sys-table tr:hover td{background:#ffffff08}.cl-th{padding:5px 8px;text-align:left;font-weight:500;font-size:10px;text-transform:uppercase;letter-spacing:.04em;opacity:.5;border-bottom:1px solid var(--okdb-app-border)}.cl-td{padding:5px 8px;border-bottom:1px solid var(--okdb-app-border)}.cl-row:hover .cl-td{background:#ffffff06}</style>