npm - @pramen/admin - Versions diffs - 0.0.2 - Mend

@pramen/admin 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>pramen · admin</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.dm6bgf51.js"></script>
+  </body>
+</html>

package/dist/main.dm6bgf51.js ADDED Viewed

@@ -0,0 +1,185 @@
+var id,W,Pd,ya,C,Md,_d,Ld,wd,u,s,Rd,Wd,Yd,Zd,ka,pd={},rd=[],wa=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,bd=Array.isArray;function P(d,a){for(var p in a)d[p]=a[p];return d}function Xd(d){d&&d.parentNode&&d.parentNode.removeChild(d)}function Ya(d,a,p){var b,i,r,v={};for(r in a)r=="key"?b=a[r]:r=="ref"?i=a[r]:v[r]=a[r];if(arguments.length>2&&(v.children=arguments.length>3?id.call(arguments,2):p),typeof d=="function"&&d.defaultProps!=null)for(r in d.defaultProps)v[r]===void 0&&(v[r]=d.defaultProps[r]);return dd(d,v,b,i,null)}function dd(d,a,p,b,i){var r={type:d,props:a,key:p,ref:b,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:i==null?++Pd:i,__i:-1,__u:0};return i==null&&W.vnode!=null&&W.vnode(r),r}function _(d){return d.children}function ad(d,a){this.props=d,this.context=a}function S(d,a){if(a==null)return d.__?S(d.__,d.__i+1):null;for(var p;a<d.__k.length;a++)if((p=d.__k[a])!=null&&p.__e!=null)return p.__e;return typeof d.type=="function"?S(d):null}function Za(d){if(d.__P&&d.__d){var a=d.__v,p=a.__e,b=[],i=[],r=P({},a);r.__v=a.__v+1,W.vnode&&W.vnode(r),fd(d.__P,r,a,d.__n,d.__P.namespaceURI,32&a.__u?[p]:null,b,p==null?S(a):p,!!(32&a.__u),i),r.__v=a.__v,r.__.__k[r.__i]=r,cd(b,r,i),a.__e=a.__=null,r.__e!=p&&$d(r)}}function $d(d){if((d=d.__)!=null&&d.__c!=null)return d.__e=d.__c.base=null,d.__k.some(function(a){if(a!=null&&a.__e!=null)return d.__e=d.__c.base=a.__e}),$d(d)}function Bd(d){(!d.__d&&(d.__d=!0)&&C.push(d)&&!od.__r++||Md!=W.debounceRendering)&&((Md=W.debounceRendering)||_d)(od)}function od(){try{for(var d,a=1;C.length;)C.length>a&&C.sort(Ld),d=C.shift(),a=C.length,Za(d)}finally{C.length=od.__r=0}}function Cd(d,a,p,b,i,r,v,z,k,m,w){var o,Y,y,f,q,I,Z,Q=b&&b.__k||rd,O=a.length;for(k=Qa(p,a,Q,k,O),o=0;o<O;o++)(y=p.__k[o])!=null&&(Y=y.__i!=-1&&Q[y.__i]||pd,y.__i=o,I=fd(d,y,Y,i,r,v,z,k,m,w),f=y.__e,y.ref&&Y.ref!=y.ref&&(Y.ref&&Kd(Y.ref,null,y),w.push(y.ref,y.__c||f,y)),q==null&&f!=null&&(q=f),(Z=!!(4&y.__u))||Y.__k===y.__k?(k=Ad(y,k,d,Z),Z&&Y.__e&&(Y.__e=null)):typeof y.type=="function"&&I!==void 0?k=I:f&&(k=f.nextSibling),y.__u&=-7);return p.__e=q,k}function Qa(d,a,p,b,i){var r,v,z,k,m,w=p.length,o=w,Y=0;for(d.__k=Array(i),r=0;r<i;r++)(v=a[r])!=null&&typeof v!="boolean"&&typeof v!="function"?(typeof v=="string"||typeof v=="number"||typeof v=="bigint"||v.constructor==String?v=d.__k[r]=dd(null,v,null,null,null):bd(v)?v=d.__k[r]=dd(_,{children:v},null,null,null):v.constructor===void 0&&v.__b>0?v=d.__k[r]=dd(v.type,v.props,v.key,v.ref?v.ref:null,v.__v):d.__k[r]=v,k=r+Y,v.__=d,v.__b=d.__b+1,z=null,(m=v.__i=Wa(v,p,k,o))!=-1&&(o--,(z=p[m])&&(z.__u|=2)),z==null||z.__v==null?(m==-1&&(i>w?Y--:i<w&&Y++),typeof v.type!="function"&&(v.__u|=4)):m!=k&&(m==k-1?Y--:m==k+1?Y++:(m>k?Y--:Y++,v.__u|=4))):d.__k[r]=null;if(o)for(r=0;r<w;r++)(z=p[r])!=null&&(2&z.__u)==0&&(z.__e==b&&(b=S(z)),Td(z,z));return b}function Ad(d,a,p,b){var i,r;if(typeof d.type=="function"){for(i=d.__k,r=0;i&&r<i.length;r++)i[r]&&(i[r].__=d,a=Ad(i[r],a,p,b));return a}d.__e!=a&&(b&&(a&&d.type&&!a.parentNode&&(a=S(d)),p.insertBefore(d.__e,a||null)),a=d.__e);do a=a&&a.nextSibling;while(a!=null&&a.nodeType==8);return a}function Wa(d,a,p,b){var i,r,v,z=d.key,k=d.type,m=a[p],w=m!=null&&(2&m.__u)==0;if(m===null&&z==null||w&&z==m.key&&k==m.type)return p;if(b>(w?1:0)){for(i=p-1,r=p+1;i>=0||r<a.length;)if((m=a[v=i>=0?i--:r++])!=null&&(2&m.__u)==0&&z==m.key&&k==m.type)return v}return-1}function Nd(d,a,p){a[0]=="-"?d.setProperty(a,p==null?"":p):d[a]=p==null?"":typeof p!="number"||wa.test(a)?p:p+"px"}function n(d,a,p,b,i){var r,v;d:if(a=="style")if(typeof p=="string")d.style.cssText=p;else{if(typeof b=="string"&&(d.style.cssText=b=""),b)for(a in b)p&&a in p||Nd(d.style,a,"");if(p)for(a in p)b&&p[a]==b[a]||Nd(d.style,a,p[a])}else if(a[0]=="o"&&a[1]=="n")r=a!=(a=a.replace(Rd,"$1")),v=a.toLowerCase(),a=v in d||a=="onFocusOut"||a=="onFocusIn"?v.slice(2):a.slice(2),d.l||(d.l={}),d.l[a+r]=p,p?b?p[s]=b[s]:(p[s]=Wd,d.addEventListener(a,r?Zd:Yd,r)):d.removeEventListener(a,r?Zd:Yd,r);else{if(i=="http://www.w3.org/2000/svg")a=a.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if(a!="width"&&a!="height"&&a!="href"&&a!="list"&&a!="form"&&a!="tabIndex"&&a!="download"&&a!="rowSpan"&&a!="colSpan"&&a!="role"&&a!="popover"&&a in d)try{d[a]=p==null?"":p;break d}catch(z){}typeof p=="function"||(p==null||p===!1&&a[4]!="-"?d.removeAttribute(a):d.setAttribute(a,a=="popover"&&p==1?"":p))}}function Ud(d){return function(a){if(this.l){var p=this.l[a.type+d];if(a[u]==null)a[u]=Wd++;else if(a[u]<p[s])return;return p(W.event?W.event(a):a)}}}function fd(d,a,p,b,i,r,v,z,k,m){var w,o,Y,y,f,q,I,Z,Q,O,N,U,R,F,B,G=a.type;if(a.constructor!==void 0)return null;128&p.__u&&(k=!!(32&p.__u),r=[z=a.__e=p.__e]),(w=W.__b)&&w(a);d:if(typeof G=="function")try{if(Z=a.props,Q=G.prototype&&G.prototype.render,O=(w=G.contextType)&&b[w.__c],N=w?O?O.props.value:w.__:b,p.__c?I=(o=a.__c=p.__c).__=o.__E:(Q?a.__c=o=new G(Z,N):(a.__c=o=new ad(Z,N),o.constructor=G,o.render=fa),O&&O.sub(o),o.state||(o.state={}),o.__n=b,Y=o.__d=!0,o.__h=[],o._sb=[]),Q&&o.__s==null&&(o.__s=o.state),Q&&G.getDerivedStateFromProps!=null&&(o.__s==o.state&&(o.__s=P({},o.__s)),P(o.__s,G.getDerivedStateFromProps(Z,o.__s))),y=o.props,f=o.state,o.__v=a,Y)Q&&G.getDerivedStateFromProps==null&&o.componentWillMount!=null&&o.componentWillMount(),Q&&o.componentDidMount!=null&&o.__h.push(o.componentDidMount);else{if(Q&&G.getDerivedStateFromProps==null&&Z!==y&&o.componentWillReceiveProps!=null&&o.componentWillReceiveProps(Z,N),a.__v==p.__v||!o.__e&&o.shouldComponentUpdate!=null&&o.shouldComponentUpdate(Z,o.__s,N)===!1){a.__v!=p.__v&&(o.props=Z,o.state=o.__s,o.__d=!1),a.__e=p.__e,a.__k=p.__k,a.__k.some(function(H){H&&(H.__=a)}),rd.push.apply(o.__h,o._sb),o._sb=[],o.__h.length&&v.push(o);break d}o.componentWillUpdate!=null&&o.componentWillUpdate(Z,o.__s,N),Q&&o.componentDidUpdate!=null&&o.__h.push(function(){o.componentDidUpdate(y,f,q)})}if(o.context=N,o.props=Z,o.__P=d,o.__e=!1,U=W.__r,R=0,Q)o.state=o.__s,o.__d=!1,U&&U(a),w=o.render(o.props,o.state,o.context),rd.push.apply(o.__h,o._sb),o._sb=[];else do o.__d=!1,U&&U(a),w=o.render(o.props,o.state,o.context),o.state=o.__s;while(o.__d&&++R<25);o.state=o.__s,o.getChildContext!=null&&(b=P(P({},b),o.getChildContext())),Q&&!Y&&o.getSnapshotBeforeUpdate!=null&&(q=o.getSnapshotBeforeUpdate(y,f)),F=w!=null&&w.type===_&&w.key==null?Sd(w.props.children):w,z=Cd(d,bd(F)?F:[F],a,p,b,i,r,v,z,k,m),o.base=a.__e,a.__u&=-161,o.__h.length&&v.push(o),I&&(o.__E=o.__=null)}catch(H){if(a.__v=null,k||r!=null)if(H.then){for(a.__u|=k?160:128;z&&z.nodeType==8&&z.nextSibling;)z=z.nextSibling;r[r.indexOf(z)]=null,a.__e=z}else{for(B=r.length;B--;)Xd(r[B]);Qd(a)}else a.__e=p.__e,a.__k=p.__k,H.then||Qd(a);W.__e(H,a,p)}else r==null&&a.__v==p.__v?(a.__k=p.__k,a.__e=p.__e):z=a.__e=Xa(p.__e,a,p,b,i,r,v,k,m);return(w=W.diffed)&&w(a),128&a.__u?void 0:z}function Qd(d){d&&(d.__c&&(d.__c.__e=!0),d.__k&&d.__k.some(Qd))}function cd(d,a,p){for(var b=0;b<p.length;b++)Kd(p[b],p[++b],p[++b]);W.__c&&W.__c(a,d),d.some(function(i){try{d=i.__h,i.__h=[],d.some(function(r){r.call(i)})}catch(r){W.__e(r,i.__v)}})}function Sd(d){return typeof d!="object"||d==null||d.__b>0?d:bd(d)?d.map(Sd):d.constructor!==void 0?null:P({},d)}function Xa(d,a,p,b,i,r,v,z,k){var m,w,o,Y,y,f,q,I=p.props||pd,Z=a.props,Q=a.type;if(Q=="svg"?i="http://www.w3.org/2000/svg":Q=="math"?i="http://www.w3.org/1998/Math/MathML":i||(i="http://www.w3.org/1999/xhtml"),r!=null){for(m=0;m<r.length;m++)if((y=r[m])&&"setAttribute"in y==!!Q&&(Q?y.localName==Q:y.nodeType==3)){d=y,r[m]=null;break}}if(d==null){if(Q==null)return document.createTextNode(Z);d=document.createElementNS(i,Q,Z.is&&Z),z&&(W.__m&&W.__m(a,r),z=!1),r=null}if(Q==null)I===Z||z&&d.data==Z||(d.data=Z);else{if(r=Q=="textarea"&&Z.defaultValue!=null?null:r&&id.call(d.childNodes),!z&&r!=null)for(I={},m=0;m<d.attributes.length;m++)I[(y=d.attributes[m]).name]=y.value;for(m in I)y=I[m],m=="dangerouslySetInnerHTML"?o=y:m=="children"||(m in Z)||m=="value"&&("defaultValue"in Z)||m=="checked"&&("defaultChecked"in Z)||n(d,m,null,y,i);for(m in Z)y=Z[m],m=="children"?Y=y:m=="dangerouslySetInnerHTML"?w=y:m=="value"?f=y:m=="checked"?q=y:z&&typeof y!="function"||I[m]===y||n(d,m,y,I[m],i);if(w)z||o&&(w.__html==o.__html||w.__html==d.innerHTML)||(d.innerHTML=w.__html),a.__k=[];else if(o&&(d.innerHTML=""),Cd(a.type=="template"?d.content:d,bd(Y)?Y:[Y],a,p,b,Q=="foreignObject"?"http://www.w3.org/1999/xhtml":i,r,v,r?r[0]:p.__k&&S(p,0),z,k),r!=null)for(m=r.length;m--;)Xd(r[m]);z&&Q!="textarea"||(m="value",Q=="progress"&&f==null?d.removeAttribute("value"):f!=null&&(f!==d[m]||Q=="progress"&&!f||Q=="option"&&f!=I[m])&&n(d,m,f,I[m],i),m="checked",q!=null&&q!=d[m]&&n(d,m,q,I[m],i))}return d}function Kd(d,a,p){try{if(typeof d=="function"){var b=typeof d.__u=="function";b&&d.__u(),b&&a==null||(d.__u=d(a))}else d.current=a}catch(i){W.__e(i,p)}}function Td(d,a,p){var b,i;if(W.unmount&&W.unmount(d),(b=d.ref)&&(b.current&&b.current!=d.__e||Kd(b,null,a)),(b=d.__c)!=null){if(b.componentWillUnmount)try{b.componentWillUnmount()}catch(r){W.__e(r,a)}b.base=b.__P=null}if(b=d.__k)for(i=0;i<b.length;i++)b[i]&&Td(b[i],a,p||typeof d.type!="function");p||Xd(d.__e),d.__c=d.__=d.__e=void 0}function fa(d,a,p){return this.constructor(d,p)}function hd(d,a,p){var b,i,r,v;a==document&&(a=document.documentElement),W.__&&W.__(d,a),i=(b=typeof p=="function")?null:p&&p.__k||a.__k,r=[],v=[],fd(a,d=(!b&&p||a).__k=Ya(_,null,[d]),i||pd,pd,a.namespaceURI,!b&&p?[p]:i?null:a.firstChild?id.call(a.childNodes):null,r,!b&&p?p:i?i.__e:a.firstChild,b,v),cd(r,d,v)}id=rd.slice,W={__e:function(d,a,p,b){for(var i,r,v;a=a.__;)if((i=a.__c)&&!i.__)try{if((r=i.constructor)&&r.getDerivedStateFromError!=null&&(i.setState(r.getDerivedStateFromError(d)),v=i.__d),i.componentDidCatch!=null&&(i.componentDidCatch(d,b||{}),v=i.__d),v)return i.__E=i}catch(z){d=z}throw d}},Pd=0,ya=function(d){return d!=null&&d.constructor===void 0},ad.prototype.setState=function(d,a){var p;p=this.__s!=null&&this.__s!=this.state?this.__s:this.__s=P({},this.state),typeof d=="function"&&(d=d(P({},p),this.props)),d&&P(p,d),d!=null&&this.__v&&(a&&this._sb.push(a),Bd(this))},ad.prototype.forceUpdate=function(d){this.__v&&(this.__e=!0,d&&this.__h.push(d),Bd(this))},ad.prototype.render=_,C=[],_d=typeof Promise=="function"?Promise.prototype.then.bind(Promise.resolve()):setTimeout,Ld=function(d,a){return d.__v.__b-a.__v.__b},od.__r=0,wd=Math.random().toString(8),u="__d"+wd,s="__a"+wd,Rd=/(PointerCapture)$|Capture$/i,Wd=0,Yd=Ud(!1),Zd=Ud(!0),ka=0;var j,K,Id,ed,V=0,nd=[],J=W,sd=J.__b,jd=J.__r,Vd=J.diffed,ld=J.__c,Dd=J.unmount,Ed=J.__;function qd(d,a){J.__h&&J.__h(K,d,V||a),V=0;var p=K.__H||(K.__H={__:[],__h:[]});return d>=p.__.length&&p.__.push({}),p.__[d]}function M(d){return V=1,Ka(aa,d)}function Ka(d,a,p){var b=qd(j++,2);if(b.t=d,!b.__c&&(b.__=[p?p(a):aa(void 0,a),function(z){var k=b.__N?b.__N[0]:b.__[0],m=b.t(k,z);k!==m&&(b.__N=[m,b.__[1]],b.__c.setState({}))}],b.__c=K,!K.__f)){var i=function(z,k,m){if(!b.__c.__H)return!0;var w=b.__c.__H.__.filter(function(Y){return Y.__c});if(w.every(function(Y){return!Y.__N}))return!r||r.call(this,z,k,m);var o=b.__c.props!==z;return w.some(function(Y){if(Y.__N){var y=Y.__[0];Y.__=Y.__N,Y.__N=void 0,y!==Y.__[0]&&(o=!0)}}),r&&r.call(this,z,k,m)||o};K.__f=!0;var{shouldComponentUpdate:r,componentWillUpdate:v}=K;K.componentWillUpdate=function(z,k,m){if(this.__e){var w=r;r=void 0,i(z,k,m),r=w}v&&v.call(this,z,k,m)},K.shouldComponentUpdate=i}return b.__N||b.__}function md(d,a){var p=qd(j++,3);!J.__s&&da(p.__H,a)&&(p.__=d,p.u=a,K.__H.__h.push(p))}function ud(d){return V=5,l(function(){return{current:d}},[])}function l(d,a){var p=qd(j++,7);return da(p.__H,a)&&(p.__=d(),p.__H=a,p.__h=d),p.__}function T(d,a){return V=8,l(function(){return d},a)}function Ia(){for(var d;d=nd.shift();){var a=d.__H;if(d.__P&&a)try{a.__h.some(gd),a.__h.some(Jd),a.__h=[]}catch(p){a.__h=[],J.__e(p,d.__v)}}}J.__b=function(d){K=null,sd&&sd(d)},J.__=function(d,a){d&&a.__k&&a.__k.__m&&(d.__m=a.__k.__m),Ed&&Ed(d,a)},J.__r=function(d){jd&&jd(d),j=0;var a=(K=d.__c).__H;a&&(Id===K?(a.__h=[],K.__h=[],a.__.some(function(p){p.__N&&(p.__=p.__N),p.u=p.__N=void 0})):(a.__h.some(gd),a.__h.some(Jd),a.__h=[],j=0)),Id=K},J.diffed=function(d){Vd&&Vd(d);var a=d.__c;a&&a.__H&&(a.__H.__h.length&&(nd.push(a)!==1&&ed===J.requestAnimationFrame||((ed=J.requestAnimationFrame)||Ja)(Ia)),a.__H.__.some(function(p){p.u&&(p.__H=p.u),p.u=void 0})),Id=K=null},J.__c=function(d,a){a.some(function(p){try{p.__h.some(gd),p.__h=p.__h.filter(function(b){return!b.__||Jd(b)})}catch(b){a.some(function(i){i.__h&&(i.__h=[])}),a=[],J.__e(b,p.__v)}}),ld&&ld(d,a)},J.unmount=function(d){Dd&&Dd(d);var a,p=d.__c;p&&p.__H&&(p.__H.__.some(function(b){try{gd(b)}catch(i){a=i}}),p.__H=void 0,a&&J.__e(a,p.__v))};var td=typeof requestAnimationFrame=="function";function Ja(d){var a,p=function(){clearTimeout(b),td&&cancelAnimationFrame(a),setTimeout(d)},b=setTimeout(p,35);td&&(a=requestAnimationFrame(p))}function gd(d){var a=K,p=d.__c;typeof p=="function"&&(d.__c=void 0,p()),K=a}function Jd(d){var a=K;d.__c=d.__(),K=a}function da(d,a){return!d||d.length!==a.length||a.some(function(p,b){return p!==d[b]})}function aa(d,a){return typeof a=="function"?a(d):a}class c extends Error{code;status;constructor(d,a,p){super(d);this.code=a;this.status=p;this.name="ApiError"}}async function A(d,a,p){let b=d.baseUrl.replace(/\/+$/,""),i;try{i=await fetch(`${b}${a}`,{...p,headers:{...p?.body?{"content-type":"application/json"}:{},authorization:`Bearer ${d.token}`,...p?.headers??{}}})}catch(v){throw new c(`network error reaching ${b} — is pramen running and is CORS_ORIGINS set?`,"network",0)}let r=null;try{r=await i.json()}catch{}if(!i.ok||!r||r.ok===!1){let v=r?.code??String(i.status),z=r?.error??`request failed (${i.status})`;if(i.status===403)z=`not an admin token — ${z}`;throw new c(z,v,i.status)}return r.result}var L={tenants:(d)=>A(d,"/tenants"),schema:(d,a)=>A(d,`/admin/schema?tenant=${encodeURIComponent(a)}`),list:(d,a,p,b,i)=>A(d,"/admin/data",{method:"POST",body:JSON.stringify({tenant:a,table:p,op:"list",limit:b,offset:i})}),count:(d,a,p)=>A(d,"/admin/data",{method:"POST",body:JSON.stringify({tenant:a,table:p,op:"count"})}),get:(d,a,p,b)=>A(d,"/admin/data",{method:"POST",body:JSON.stringify({tenant:a,table:p,op:"get",id:b})}),create:(d,a,p,b)=>A(d,"/admin/data",{method:"POST",body:JSON.stringify({tenant:a,table:p,op:"create",values:b})}),update:(d,a,p,b,i)=>A(d,"/admin/data",{method:"POST",body:JSON.stringify({tenant:a,table:p,op:"update",id:b,patch:i})}),remove:(d,a,p,b)=>A(d,"/admin/data",{method:"POST",body:JSON.stringify({tenant:a,table:p,op:"delete",id:b})})};var qa=0;function g(d,a,p,b,i,r){a||(a={});var v,z,k=a;if("ref"in k)for(z in k={},a)z=="ref"?v=a[z]:k[z]=a[z];var m={type:d,props:k,key:p,ref:v,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:--qa,__i:-1,__u:0,__source:i,__self:r};if(typeof d=="function"&&(v=d.defaultProps))for(z in v)k[z]===void 0&&(k[z]=v[z]);return W.vnode&&W.vnode(m),m}var Fd={base:"pramen.admin.baseUrl",token:"pramen.admin.token",tenant:"pramen.admin.tenant"},h=25,Od=(d,a)=>{let[p,b]=M(()=>localStorage.getItem(d)??a),i=T((r)=>{b(r),localStorage.setItem(d,r)},[d]);return[p,i]};function Fa(d){if(d===null||d===void 0)return g("span",{class:"cell null",children:"null"},void 0,!1,void 0,this);if(typeof d==="boolean")return g("span",{class:"cell bool",children:String(d)},void 0,!1,void 0,this);if(typeof d==="object"){let p=JSON.stringify(d);return g("span",{class:"cell json",title:p,children:p},void 0,!1,void 0,this)}let a=String(d);return g("span",{class:"cell",title:a,children:a},void 0,!1,void 0,this)}function pa(){let[d,a]=Od(Fd.base,"http://localhost:8787"),[p,b]=Od(Fd.token,""),[i,r]=Od(Fd.tenant,"main"),v=l(()=>({baseUrl:d,token:p}),[d,p]),[z,k]=M([]),[m,w]=M(null),[o,Y]=M(null),[y,f]=M(null),[q,I]=M(null),[Z,Q]=M(0),[O,N]=M(!1),[U,R]=M(null),[F,B]=M(null),[G,H]=M(null),[vd,e]=M(!1),$=T((x)=>{if(x instanceof c)R({message:x.message,code:x.code});else R({message:x instanceof Error?x.message:String(x),code:"unknown"})},[]),ia=T(async()=>{if(!p)return;try{k(await L.tenants(v))}catch(x){if(x instanceof c&&x.status===403)$(x)}},[v,p,$]),ba=T(async()=>{if(!p)return;R(null);try{let x=await L.schema(v,i);w(x),Y((X)=>X&&(X in x.tables)?X:Object.keys(x.tables)[0]??null)}catch(x){w(null),Y(null),$(x)}},[v,i,p,$]),D=T(async()=>{if(!p||!o)return;N(!0),R(null);try{let[x,X]=await Promise.all([L.list(v,i,o,h,Z),L.count(v,i,o)]);f(x),I(X)}catch(x){f(null),I(null),$(x)}finally{N(!1)}},[v,i,o,Z,p,$]),xd=ud();md(()=>{return clearTimeout(xd.current),xd.current=setTimeout(()=>{ia(),ba()},250),()=>clearTimeout(xd.current)},[d,p,i]),md(()=>{Q(0)},[o,i]),md(()=>{D()},[o,i,Z,d,p]);let zd=l(()=>(o&&m?m.tables[o]:null)??[],[o,m]),ga=()=>{H(null);let x={};for(let X of zd)if(X!=="id")x[X]=null;B({mode:"create",original:null,text:JSON.stringify(x,null,2)})},ma=async(x)=>{H(null);try{let X=await L.get(v,i,o,x.id)??x;B({mode:"edit",original:X,text:JSON.stringify(X,null,2)})}catch(X){$(X)}},va=async()=>{if(!F||!o)return;let x;try{if(x=JSON.parse(F.text),typeof x!=="object"||x===null||Array.isArray(x))throw Error("must be a JSON object")}catch(X){H(X instanceof Error?X.message:"invalid JSON");return}e(!0),H(null);try{if(F.mode==="create")await L.create(v,i,o,x);else{let X=F.original??{},t=X.id,yd={};for(let[kd,Hd]of Object.entries(x)){if(kd==="id")continue;if(JSON.stringify(Hd)!==JSON.stringify(X[kd]))yd[kd]=Hd}if(Object.keys(yd).length===0){H("no changes to save"),e(!1);return}await L.update(v,i,o,t,yd)}B(null),await D()}catch(X){H(X instanceof c?`${X.message} (${X.code})`:String(X))}finally{e(!1)}},xa=async(x)=>{if(!o)return;if(!confirm(`Delete row id=${JSON.stringify(x.id)} from "${o}"? This cannot be undone.`))return;e(!0);try{await L.remove(v,i,o,x.id),await D()}catch(X){$(X)}finally{e(!1)}},E=m?Object.keys(m.tables):[],za=Math.floor(Z/h)+1,Gd=q!=null?Math.max(1,Math.ceil(q/h)):null;return g(_,{children:[g("div",{class:"bar",children:[g("div",{class:"brand",children:[g("span",{class:"mark",children:"pramen"},void 0,!1,void 0,this),g("span",{class:"sub",children:"admin"},void 0,!1,void 0,this)]},void 0,!0,void 0,this),g("div",{class:"field url",children:[g("label",{children:"base url"},void 0,!1,void 0,this),g("input",{value:d,onInput:(x)=>a(x.target.value),placeholder:"http://localhost:8787",spellcheck:!1},void 0,!1,void 0,this)]},void 0,!0,void 0,this),g("div",{class:"field token",children:[g("label",{children:"admin token"},void 0,!1,void 0,this),g("input",{type:"password",value:p,onInput:(x)=>b(x.target.value),placeholder:'paste an admin JWT (roles include "admin")',spellcheck:!1},void 0,!1,void 0,this)]},void 0,!0,void 0,this),g("div",{class:"hint",children:'Must be an admin token — every endpoint checks roles for "admin".'},void 0,!1,void 0,this)]},void 0,!0,void 0,this),g("div",{class:"layout",children:[g("aside",{class:"side",children:[g("p",{class:"sec-title",children:"Tenant"},void 0,!1,void 0,this),g("div",{class:"tenant-row",children:[z.length>0?g("select",{value:z.includes(i)?i:"",onChange:(x)=>r(x.target.value),children:[!z.includes(i)&&g("option",{value:"",children:[i," (manual)"]},void 0,!0,void 0,this),z.map((x)=>g("option",{value:x,children:x},x,!1,void 0,this))]},void 0,!0,void 0,this):g("input",{value:i,onInput:(x)=>r(x.target.value),placeholder:"main",spellcheck:!1},void 0,!1,void 0,this),g("button",{class:"ghost sm",title:"Edit tenant name manually",onClick:()=>{let x=prompt("Tenant name",i);if(x!=null&&x.trim())r(x.trim())},children:"edit"},void 0,!1,void 0,this)]},void 0,!0,void 0,this),g("p",{class:"sec-title",children:"Schema"},void 0,!1,void 0,this),m?g("div",{class:`hashchip${m.hash?"":" none"}`,title:"applied schema hash",children:[g("span",{class:"dot"},void 0,!1,void 0,this),m.hash?m.hash.slice(0,12):"no schema hash"]},void 0,!0,void 0,this):g("div",{class:"muted",style:"margin-bottom:14px",children:p?"—":"enter a token"},void 0,!1,void 0,this),g("p",{class:"sec-title",children:["Tables",E.length?` · ${E.length}`:""]},void 0,!0,void 0,this),E.length>0?g("ul",{class:"tables",children:E.map((x)=>g("li",{children:g("button",{class:x===o?"active":"",onClick:()=>Y(x),children:[g("span",{class:"tname",children:x},void 0,!1,void 0,this),g("span",{class:"cols",children:[m.tables[x].length," cols"]},void 0,!0,void 0,this)]},void 0,!0,void 0,this)},x,!1,void 0,this))},void 0,!1,void 0,this):g("div",{class:"muted",children:p?"no tables":""},void 0,!1,void 0,this)]},void 0,!0,void 0,this),g("main",{class:"main",children:[U&&g("div",{class:"banner",children:[g("div",{children:[U.message," ",g("code",{children:U.code},void 0,!1,void 0,this)]},void 0,!0,void 0,this),g("button",{class:"ghost sm",onClick:()=>R(null),children:"dismiss"},void 0,!1,void 0,this)]},void 0,!0,void 0,this),!o?g("div",{class:"placeholder",children:[g("div",{class:"big",children:p?"select a table":"paste an admin token to begin"},void 0,!1,void 0,this),g("div",{children:["The dashboard talks to the pramen Worker over HTTP. Tenant defaults to ",g("code",{style:"color:var(--amber)",children:"main"},void 0,!1,void 0,this),"."]},void 0,!0,void 0,this)]},void 0,!0,void 0,this):g(_,{children:[g("div",{class:"main-head",children:[g("h2",{children:o},void 0,!1,void 0,this),g("span",{class:"countchip",children:q==null?"…":`${q} row${q===1?"":"s"}`},void 0,!1,void 0,this),g("span",{class:"spacer"},void 0,!1,void 0,this),g("button",{class:"ghost sm",onClick:()=>void D(),disabled:O,children:"refresh"},void 0,!1,void 0,this),g("button",{class:"primary",onClick:ga,children:"+ new row"},void 0,!1,void 0,this)]},void 0,!0,void 0,this),g("div",{class:"toolbar",children:g("div",{class:"pager",children:[g("button",{class:"sm",disabled:Z===0||O,onClick:()=>Q(Math.max(0,Z-h)),children:"‹ prev"},void 0,!1,void 0,this),g("span",{children:["page ",za,Gd!=null?` / ${Gd}`:""]},void 0,!0,void 0,this),g("button",{class:"sm",disabled:O||q!=null&&Z+h>=q,onClick:()=>Q(Z+h),children:"next ›"},void 0,!1,void 0,this)]},void 0,!0,void 0,this)},void 0,!1,void 0,this),O&&!y?g("div",{class:"loading",children:"loading…"},void 0,!1,void 0,this):y&&y.length===0?g("div",{class:"empty",children:"no rows on this page"},void 0,!1,void 0,this):y?g("div",{class:"tablewrap",children:g("table",{class:"grid",children:[g("thead",{children:g("tr",{children:[zd.map((x)=>g("th",{children:x},x,!1,void 0,this)),g("th",{style:"text-align:right",children:"actions"},void 0,!1,void 0,this)]},void 0,!0,void 0,this)},void 0,!1,void 0,this),g("tbody",{children:y.map((x,X)=>g("tr",{children:[zd.map((t)=>g("td",{children:Fa(x[t])},t,!1,void 0,this)),g("td",{children:g("div",{class:"rowactions",children:[g("button",{class:"ghost sm",onClick:()=>void ma(x),children:"edit"},void 0,!1,void 0,this),g("button",{class:"danger sm",onClick:()=>void xa(x),disabled:vd,children:"del"},void 0,!1,void 0,this)]},void 0,!0,void 0,this)},void 0,!1,void 0,this)]},x.id??X,!0,void 0,this))},void 0,!1,void 0,this)]},void 0,!0,void 0,this)},void 0,!1,void 0,this):null]},void 0,!0,void 0,this)]},void 0,!0,void 0,this)]},void 0,!0,void 0,this),F&&g("div",{class:"scrim",onClick:(x)=>x.target===x.currentTarget&&B(null),children:g("div",{class:"modal",children:[g("div",{class:"modal-head",children:[g("h3",{children:F.mode==="create"?`new ${o} row`:`edit ${o} · id=${JSON.stringify(F.original?.id)}`},void 0,!1,void 0,this),g("span",{class:"spacer"},void 0,!1,void 0,this),g("button",{class:"ghost sm",onClick:()=>B(null),children:"✕"},void 0,!1,void 0,this)]},void 0,!0,void 0,this),g("div",{class:"modal-body",children:[g("label",{children:["row json ",F.mode==="edit"?"(only changed fields are sent as the patch)":"(sent as values)"]},void 0,!0,void 0,this),g("textarea",{value:F.text,spellcheck:!1,onInput:(x)=>B({...F,text:x.target.value})},void 0,!1,void 0,this),G&&g("div",{class:"jsonerr",style:"margin-top:8px",children:G},void 0,!1,void 0,this)]},void 0,!0,void 0,this),g("div",{class:"modal-foot",children:[g("span",{class:"muted",children:F.mode==="edit"?"id is never modified":"id is assigned by the server unless provided"},void 0,!1,void 0,this),g("span",{class:"spacer"},void 0,!1,void 0,this),g("button",{class:"ghost",onClick:()=>B(null),children:"cancel"},void 0,!1,void 0,this),g("button",{class:"primary",onClick:()=>void va(),disabled:vd,children:vd?"saving…":F.mode==="create"?"create":"save changes"},void 0,!1,void 0,this)]},void 0,!0,void 0,this)]},void 0,!0,void 0,this)},void 0,!1,void 0,this)]},void 0,!0,void 0,this)}var ra=`
+:root {
+  --bg:        #0e1116;
+  --surface:   #141921;
+  --surface-2: #181e28;
+  --raise:     #1d2531;
+  --border:    #232c3a;
+  --border-2:  #2e3a4d;
+  --ink:       #e6edf3;
+  --ink-2:     #aab7c7;
+  --ink-3:     #6b7a8d;
+  --spring:    #3fd6c0;
+  --spring-dim:#1c8d80;
+  --spring-bg: #0f2723;
+  --amber:     #e0a458;
+  --danger:    #e0606a;
+  --danger-bg: #2a161a;
+  --radius:    7px;
+  --radius-sm: 5px;
+  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace;
+  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+}
+* { box-sizing: border-box; }
+html, body { margin: 0; height: 100%; }
+body {
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--sans);
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+#app { min-height: 100%; }
+button {
+  font-family: var(--sans);
+  font-size: 13px;
+  cursor: pointer;
+  border: 1px solid var(--border-2);
+  background: var(--raise);
+  color: var(--ink);
+  padding: 6px 11px;
+  border-radius: var(--radius-sm);
+  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
+}
+button:hover:not(:disabled) { background: var(--surface-2); border-color: #3a485e; }
+button:active:not(:disabled) { background: var(--surface); }
+button:disabled { opacity: 0.45; cursor: not-allowed; }
+button:focus-visible { outline: 2px solid var(--spring-dim); outline-offset: 1px; }
+button.primary {
+  background: var(--spring-bg);
+  border-color: var(--spring-dim);
+  color: var(--spring);
+}
+button.primary:hover:not(:disabled) { background: #123029; border-color: var(--spring); }
+button.danger { color: var(--danger); border-color: #4a2a2f; background: var(--danger-bg); }
+button.danger:hover:not(:disabled) { border-color: var(--danger); background: #361a1f; }
+button.ghost { background: transparent; border-color: transparent; color: var(--ink-2); padding: 4px 7px; }
+button.ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
+button.sm { padding: 3px 8px; font-size: 12px; }
+input, textarea {
+  font-family: var(--mono);
+  font-size: 13px;
+  background: var(--bg);
+  color: var(--ink);
+  border: 1px solid var(--border-2);
+  border-radius: var(--radius-sm);
+  padding: 7px 9px;
+}
+input::placeholder, textarea::placeholder { color: var(--ink-3); }
+input:focus, textarea:focus { outline: none; border-color: var(--spring-dim); }
+label { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 4px; }
+/* config bar */
+.bar {
+  position: sticky; top: 0; z-index: 10;
+  display: flex; align-items: flex-end; gap: 14px;
+  padding: 12px 18px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+}
+.brand { display: flex; align-items: baseline; gap: 9px; margin-right: 6px; padding-bottom: 5px; }
+.brand .mark { color: var(--spring); font-family: var(--mono); font-weight: 600; letter-spacing: -0.02em; font-size: 16px; }
+.brand .sub { color: var(--ink-3); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
+.bar .field { display: flex; flex-direction: column; }
+.bar .field.url input { width: 220px; }
+.bar .field.token { flex: 1; min-width: 200px; }
+.bar .field.token input { width: 100%; }
+.bar .hint { font-size: 11px; color: var(--ink-3); padding-bottom: 7px; max-width: 180px; line-height: 1.35; }
+.layout { display: grid; grid-template-columns: 270px 1fr; min-height: calc(100vh - 60px); }
+.side { border-right: 1px solid var(--border); background: var(--surface-2); padding: 16px 14px; }
+.main { padding: 20px 24px; min-width: 0; }
+.sec-title { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 9px; }
+.tenant-row { display: flex; gap: 6px; margin-bottom: 18px; }
+.tenant-row select, .tenant-row input { flex: 1; min-width: 0; }
+select {
+  font-family: var(--mono); font-size: 13px;
+  background: var(--bg); color: var(--ink);
+  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
+  padding: 7px 9px;
+}
+select:focus { outline: none; border-color: var(--spring-dim); }
+.hashchip {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-family: var(--mono); font-size: 11px;
+  color: var(--ink-2); background: var(--raise);
+  border: 1px solid var(--border); border-radius: 20px;
+  padding: 3px 10px; margin-bottom: 14px;
+}
+.hashchip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--spring); }
+.hashchip.none .dot { background: var(--ink-3); }
+.tables { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
+.tables li button {
+  width: 100%; text-align: left; border: 1px solid transparent; background: transparent;
+  display: flex; justify-content: space-between; align-items: center; gap: 8px;
+  padding: 7px 9px; border-radius: var(--radius-sm); color: var(--ink-2);
+}
+.tables li button:hover { background: var(--raise); color: var(--ink); }
+.tables li button.active { background: var(--spring-bg); border-color: var(--spring-dim); color: var(--spring); }
+.tables .tname { font-family: var(--mono); font-size: 13px; }
+.tables .cols { font-size: 11px; color: var(--ink-3); }
+.main-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
+.main-head h2 { margin: 0; font-family: var(--mono); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
+.countchip {
+  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
+  border: 1px solid var(--border); border-radius: 20px; padding: 2px 10px;
+}
+.spacer { flex: 1; }
+.toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
+.pager { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
+.tablewrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; background: var(--surface); }
+table.grid { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; }
+table.grid th {
+  position: sticky; top: 0; background: var(--surface-2);
+  text-align: left; font-weight: 600; color: var(--ink-2);
+  padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap;
+}
+table.grid td { padding: 7px 12px; border-bottom: 1px solid var(--border); color: var(--ink); vertical-align: top; max-width: 360px; }
+table.grid tr:last-child td { border-bottom: none; }
+table.grid tbody tr:hover { background: var(--surface-2); }
+.cell { display: inline-block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cell.json { color: var(--amber); }
+.cell.null { color: var(--ink-3); font-style: italic; }
+.cell.bool { color: var(--spring); }
+.rowactions { display: flex; gap: 4px; white-space: nowrap; }
+.banner {
+  display: flex; align-items: flex-start; gap: 10px;
+  border: 1px solid #4a2a2f; background: var(--danger-bg);
+  color: var(--danger); border-radius: var(--radius);
+  padding: 10px 13px; margin-bottom: 14px; font-size: 13px;
+}
+.banner code { font-family: var(--mono); background: rgba(0,0,0,0.25); padding: 1px 5px; border-radius: 3px; color: var(--amber); }
+.banner button { margin-left: auto; }
+.empty, .loading { color: var(--ink-3); padding: 40px 0; text-align: center; font-size: 13px; }
+.loading { color: var(--ink-2); }
+/* modal */
+.scrim { position: fixed; inset: 0; background: rgba(5,8,12,0.66); display: flex; align-items: flex-start; justify-content: center; padding: 56px 20px; z-index: 50; overflow: auto; }
+.modal { width: 100%; max-width: 640px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius); }
+.modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
+.modal-head h3 { margin: 0; font-family: var(--mono); font-size: 15px; font-weight: 600; }
+.modal-head .spacer { flex: 1; }
+.modal-body { padding: 16px 18px; }
+.modal-body textarea { width: 100%; min-height: 280px; resize: vertical; line-height: 1.55; tab-size: 2; }
+.modal-foot { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--border); }
+.modal-foot .spacer { flex: 1; }
+.jsonerr { color: var(--danger); font-family: var(--mono); font-size: 12px; }
+.muted { color: var(--ink-3); font-size: 12px; }
+.placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 60vh; color: var(--ink-3); gap: 8px; }
+.placeholder .big { font-family: var(--mono); color: var(--ink-2); font-size: 15px; }
+`;var oa=document.createElement("style");oa.textContent=ra;document.head.appendChild(oa);hd(g(pa,{},void 0,!1,void 0,this),document.getElementById("app"));

package/package.json ADDED Viewed

@@ -0,0 +1,26 @@
+{
+  "name": "@pramen/admin",
+  "version": "0.0.2",
+  "description": "pramen admin dashboard — a Preact single-page browser client for the pramen admin HTTP API (tenants, schema, and generic row browse/edit).",
+  "license": "MIT",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/netvarec/pramen.git",
+    "directory": "packages/admin"
+  },
+  "homepage": "https://github.com/netvarec/pramen#readme",
+  "bugs": "https://github.com/netvarec/pramen/issues",
+  "type": "module",
+  "files": ["dist", "src", "scripts"],
+  "scripts": {
+    "build": "bun run scripts/build.ts",
+    "dev": "bun run scripts/build.ts --watch"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "preact": "^10.25.0"
+  }
+}

package/scripts/build.ts ADDED Viewed

@@ -0,0 +1,71 @@
+// Build the admin SPA: bundle src/main.tsx -> dist/ and emit dist/index.html.
+// This is an app, not a library, so `bun build` is the right tool here (it only
+// mangles pure re-export barrels; app code bundles fine). Pass --watch to rebuild
+// on change and serve a preview on http://localhost:5174.
+import { rm, mkdir, writeFile } from "node:fs/promises";
+const root = new URL("..", import.meta.url).pathname;
+const dist = `${root}dist`;
+const entry = `${root}src/main.tsx`;
+const watch = process.argv.includes("--watch");
+const html = (jsName: string) => `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>pramen · admin</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./${jsName}"></script>
+  </body>
+</html>
+`;
+async function build(): Promise<void> {
+  const out = await Bun.build({
+    entrypoints: [entry],
+    outdir: dist,
+    target: "browser",
+    minify: !watch,
+    sourcemap: watch ? "linked" : "none",
+    naming: "[dir]/[name].[hash].[ext]",
+  });
+  if (!out.success) {
+    for (const log of out.logs) console.error(log);
+    throw new Error("build failed");
+  }
+  const js = out.outputs.find((o) => o.path.endsWith(".js"));
+  if (!js) throw new Error("no js output");
+  const jsName = js.path.split("/").pop()!;
+  await writeFile(`${dist}/index.html`, html(jsName));
+  console.log(`built dist/${jsName} + index.html`);
+}
+await rm(dist, { recursive: true, force: true });
+await mkdir(dist, { recursive: true });
+await build();
+if (watch) {
+  const { watch: fsWatch } = await import("node:fs");
+  let pending = false;
+  fsWatch(`${root}src`, { recursive: true }, () => {
+    if (pending) return;
+    pending = true;
+    setTimeout(() => {
+      pending = false;
+      build().catch((e) => console.error(e));
+    }, 80);
+  });
+  Bun.serve({
+    port: 5174,
+    fetch(req) {
+      const url = new URL(req.url);
+      const path = url.pathname === "/" ? "/index.html" : url.pathname;
+      return new Response(Bun.file(`${dist}${path}`));
+    },
+  });
+  console.log("watching src/ — preview on http://localhost:5174");
+}

package/src/api.ts ADDED Viewed

@@ -0,0 +1,112 @@
+// Thin browser client for pramen's admin HTTP API. Every call carries the admin
+// bearer token; failures surface as an ApiError that the UI renders verbatim
+// (error + code), with a friendlier hint for a 403 (not an admin token).
+export type Row = Record<string, unknown>;
+export interface SchemaResult {
+  hash: string | null;
+  tables: Record<string, string[]>;
+}
+export class ApiError extends Error {
+  constructor(
+    message: string,
+    readonly code: string,
+    readonly status: number,
+  ) {
+    super(message);
+    this.name = "ApiError";
+  }
+}
+export interface Config {
+  baseUrl: string;
+  token: string;
+}
+interface Envelope<T> {
+  ok: boolean;
+  result?: T;
+  error?: string;
+  code?: string;
+}
+async function call<T>(cfg: Config, path: string, init?: RequestInit): Promise<T> {
+  const base = cfg.baseUrl.replace(/\/+$/, "");
+  let res: Response;
+  try {
+    res = await fetch(`${base}${path}`, {
+      ...init,
+      headers: {
+        ...(init?.body ? { "content-type": "application/json" } : {}),
+        authorization: `Bearer ${cfg.token}`,
+        ...(init?.headers ?? {}),
+      },
+    });
+  } catch (e) {
+    throw new ApiError(
+      `network error reaching ${base} — is pramen running and is CORS_ORIGINS set?`,
+      "network",
+      0,
+    );
+  }
+  let body: Envelope<T> | null = null;
+  try {
+    body = (await res.json()) as Envelope<T>;
+  } catch {
+    // non-JSON (e.g. the plain-text root help page or an upstream 500)
+  }
+  if (!res.ok || !body || body.ok === false) {
+    const code = body?.code ?? String(res.status);
+    let message = body?.error ?? `request failed (${res.status})`;
+    if (res.status === 403) message = `not an admin token — ${message}`;
+    throw new ApiError(message, code, res.status);
+  }
+  return body.result as T;
+}
+export const api = {
+  tenants: (cfg: Config) => call<string[]>(cfg, "/tenants"),
+  schema: (cfg: Config, tenant: string) =>
+    call<SchemaResult>(cfg, `/admin/schema?tenant=${encodeURIComponent(tenant)}`),
+  list: (cfg: Config, tenant: string, table: string, limit: number, offset: number) =>
+    call<Row[]>(cfg, "/admin/data", {
+      method: "POST",
+      body: JSON.stringify({ tenant, table, op: "list", limit, offset }),
+    }),
+  count: (cfg: Config, tenant: string, table: string) =>
+    call<number>(cfg, "/admin/data", {
+      method: "POST",
+      body: JSON.stringify({ tenant, table, op: "count" }),
+    }),
+  get: (cfg: Config, tenant: string, table: string, id: unknown) =>
+    call<Row | null>(cfg, "/admin/data", {
+      method: "POST",
+      body: JSON.stringify({ tenant, table, op: "get", id }),
+    }),
+  create: (cfg: Config, tenant: string, table: string, values: Row) =>
+    call<Row>(cfg, "/admin/data", {
+      method: "POST",
+      body: JSON.stringify({ tenant, table, op: "create", values }),
+    }),
+  update: (cfg: Config, tenant: string, table: string, id: unknown, patch: Row) =>
+    call<Row | null>(cfg, "/admin/data", {
+      method: "POST",
+      body: JSON.stringify({ tenant, table, op: "update", id, patch }),
+    }),
+  remove: (cfg: Config, tenant: string, table: string, id: unknown) =>
+    call<boolean>(cfg, "/admin/data", {
+      method: "POST",
+      body: JSON.stringify({ tenant, table, op: "delete", id }),
+    }),
+};

package/src/app.tsx ADDED Viewed

@@ -0,0 +1,380 @@
+// The pramen admin dashboard. A single focused inspector: config bar -> tenant
+// vessel -> schema strata (tables) -> row browser, with view/edit/create/delete
+// over the /admin/data primitives. Editing is a robust JSON textarea (no schema
+// guessing). All API failures render verbatim (error + code) in a banner.
+import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { api, ApiError, type Config, type Row, type SchemaResult } from "./api";
+const LS = { base: "pramen.admin.baseUrl", token: "pramen.admin.token", tenant: "pramen.admin.tenant" };
+const PAGE = 25;
+const useLocal = (key: string, initial: string): [string, (v: string) => void] => {
+  const [v, setV] = useState(() => localStorage.getItem(key) ?? initial);
+  const set = useCallback(
+    (next: string) => {
+      setV(next);
+      localStorage.setItem(key, next);
+    },
+    [key],
+  );
+  return [v, set];
+};
+function renderCell(v: unknown) {
+  if (v === null || v === undefined) return <span class="cell null">null</span>;
+  if (typeof v === "boolean") return <span class="cell bool">{String(v)}</span>;
+  if (typeof v === "object") {
+    const s = JSON.stringify(v);
+    return (
+      <span class="cell json" title={s}>
+        {s}
+      </span>
+    );
+  }
+  const s = String(v);
+  return (
+    <span class="cell" title={s}>
+      {s}
+    </span>
+  );
+}
+type Editor = { mode: "create" | "edit"; original: Row | null; text: string } | null;
+export function App() {
+  const [baseUrl, setBaseUrl] = useLocal(LS.base, "http://localhost:8787");
+  const [token, setToken] = useLocal(LS.token, "");
+  const [tenant, setTenant] = useLocal(LS.tenant, "main");
+  const cfg: Config = useMemo(() => ({ baseUrl, token }), [baseUrl, token]);
+  const [tenants, setTenants] = useState<string[]>([]);
+  const [schema, setSchema] = useState<SchemaResult | null>(null);
+  const [table, setTable] = useState<string | null>(null);
+  const [rows, setRows] = useState<Row[] | null>(null);
+  const [count, setCount] = useState<number | null>(null);
+  const [offset, setOffset] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [err, setErr] = useState<{ message: string; code: string } | null>(null);
+  const [editor, setEditor] = useState<Editor>(null);
+  const [editErr, setEditErr] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const report = useCallback((e: unknown) => {
+    if (e instanceof ApiError) setErr({ message: e.message, code: e.code });
+    else setErr({ message: e instanceof Error ? e.message : String(e), code: "unknown" });
+  }, []);
+  // Load tenant list (best-effort: a fresh deploy may have none; manual entry still works).
+  const loadTenants = useCallback(async () => {
+    if (!token) return;
+    try {
+      setTenants(await api.tenants(cfg));
+    } catch (e) {
+      // Surface only if it's auth — a missing list is fine.
+      if (e instanceof ApiError && e.status === 403) report(e);
+    }
+  }, [cfg, token, report]);
+  const loadSchema = useCallback(async () => {
+    if (!token) return;
+    setErr(null);
+    try {
+      const s = await api.schema(cfg, tenant);
+      setSchema(s);
+      setTable((cur) => (cur && cur in s.tables ? cur : (Object.keys(s.tables)[0] ?? null)));
+    } catch (e) {
+      setSchema(null);
+      setTable(null);
+      report(e);
+    }
+  }, [cfg, tenant, token, report]);
+  const loadRows = useCallback(async () => {
+    if (!token || !table) return;
+    setLoading(true);
+    setErr(null);
+    try {
+      const [r, c] = await Promise.all([api.list(cfg, tenant, table, PAGE, offset), api.count(cfg, tenant, table)]);
+      setRows(r);
+      setCount(c);
+    } catch (e) {
+      setRows(null);
+      setCount(null);
+      report(e);
+    } finally {
+      setLoading(false);
+    }
+  }, [cfg, tenant, table, offset, token, report]);
+  // tenants + schema react to config/tenant; rows react to table/page.
+  const debounce = useRef<ReturnType<typeof setTimeout>>();
+  useEffect(() => {
+    clearTimeout(debounce.current);
+    debounce.current = setTimeout(() => {
+      void loadTenants();
+      void loadSchema();
+    }, 250);
+    return () => clearTimeout(debounce.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [baseUrl, token, tenant]);
+  useEffect(() => {
+    setOffset(0);
+  }, [table, tenant]);
+  useEffect(() => {
+    void loadRows();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [table, tenant, offset, baseUrl, token]);
+  const columns = useMemo(() => (table && schema ? schema.tables[table] : null) ?? [], [table, schema]);
+  const openCreate = () => {
+    setEditErr(null);
+    const skeleton: Row = {};
+    for (const c of columns) if (c !== "id") skeleton[c] = null;
+    setEditor({ mode: "create", original: null, text: JSON.stringify(skeleton, null, 2) });
+  };
+  const openEdit = async (row: Row) => {
+    setEditErr(null);
+    try {
+      const full = (await api.get(cfg, tenant, table!, row.id)) ?? row;
+      setEditor({ mode: "edit", original: full, text: JSON.stringify(full, null, 2) });
+    } catch (e) {
+      report(e);
+    }
+  };
+  const saveEditor = async () => {
+    if (!editor || !table) return;
+    let parsed: Row;
+    try {
+      parsed = JSON.parse(editor.text) as Row;
+      if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) throw new Error("must be a JSON object");
+    } catch (e) {
+      setEditErr(e instanceof Error ? e.message : "invalid JSON");
+      return;
+    }
+    setBusy(true);
+    setEditErr(null);
+    try {
+      if (editor.mode === "create") {
+        await api.create(cfg, tenant, table, parsed);
+      } else {
+        const orig = editor.original ?? {};
+        const id = orig.id;
+        // Send only changed fields as the patch; never send id back.
+        const patch: Row = {};
+        for (const [k, v] of Object.entries(parsed)) {
+          if (k === "id") continue;
+          if (JSON.stringify(v) !== JSON.stringify(orig[k])) patch[k] = v;
+        }
+        if (Object.keys(patch).length === 0) {
+          setEditErr("no changes to save");
+          setBusy(false);
+          return;
+        }
+        await api.update(cfg, tenant, table, id, patch);
+      }
+      setEditor(null);
+      await loadRows();
+    } catch (e) {
+      setEditErr(e instanceof ApiError ? `${e.message} (${e.code})` : String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const del = async (row: Row) => {
+    if (!table) return;
+    if (!confirm(`Delete row id=${JSON.stringify(row.id)} from "${table}"? This cannot be undone.`)) return;
+    setBusy(true);
+    try {
+      await api.remove(cfg, tenant, table, row.id);
+      await loadRows();
+    } catch (e) {
+      report(e);
+    } finally {
+      setBusy(false);
+    }
+  };
+  const tableNames = schema ? Object.keys(schema.tables) : [];
+  const page = Math.floor(offset / PAGE) + 1;
+  const totalPages = count != null ? Math.max(1, Math.ceil(count / PAGE)) : null;
+  return (
+    <>
+      <div class="bar">
+        <div class="brand">
+          <span class="mark">pramen</span>
+          <span class="sub">admin</span>
+        </div>
+        <div class="field url">
+          <label>base url</label>
+          <input value={baseUrl} onInput={(e) => setBaseUrl((e.target as HTMLInputElement).value)} placeholder="http://localhost:8787" spellcheck={false} />
+        </div>
+        <div class="field token">
+          <label>admin token</label>
+          <input type="password" value={token} onInput={(e) => setToken((e.target as HTMLInputElement).value)} placeholder="paste an admin JWT (roles include &quot;admin&quot;)" spellcheck={false} />
+        </div>
+        <div class="hint">Must be an admin token — every endpoint checks roles for &quot;admin&quot;.</div>
+      </div>
+      <div class="layout">
+        <aside class="side">
+          <p class="sec-title">Tenant</p>
+          <div class="tenant-row">
+            {tenants.length > 0 ? (
+              <select value={tenants.includes(tenant) ? tenant : ""} onChange={(e) => setTenant((e.target as HTMLSelectElement).value)}>
+                {!tenants.includes(tenant) && <option value="">{tenant} (manual)</option>}
+                {tenants.map((t) => (
+                  <option key={t} value={t}>
+                    {t}
+                  </option>
+                ))}
+              </select>
+            ) : (
+              <input value={tenant} onInput={(e) => setTenant((e.target as HTMLInputElement).value)} placeholder="main" spellcheck={false} />
+            )}
+            <button class="ghost sm" title="Edit tenant name manually" onClick={() => {
+              const next = prompt("Tenant name", tenant);
+              if (next != null && next.trim()) setTenant(next.trim());
+            }}>edit</button>
+          </div>
+          <p class="sec-title">Schema</p>
+          {schema ? (
+            <div class={`hashchip${schema.hash ? "" : " none"}`} title="applied schema hash">
+              <span class="dot" />
+              {schema.hash ? schema.hash.slice(0, 12) : "no schema hash"}
+            </div>
+          ) : (
+            <div class="muted" style="margin-bottom:14px">{token ? "—" : "enter a token"}</div>
+          )}
+          <p class="sec-title">Tables{tableNames.length ? ` · ${tableNames.length}` : ""}</p>
+          {tableNames.length > 0 ? (
+            <ul class="tables">
+              {tableNames.map((t) => (
+                <li key={t}>
+                  <button class={t === table ? "active" : ""} onClick={() => setTable(t)}>
+                    <span class="tname">{t}</span>
+                    <span class="cols">{schema!.tables[t].length} cols</span>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <div class="muted">{token ? "no tables" : ""}</div>
+          )}
+        </aside>
+        <main class="main">
+          {err && (
+            <div class="banner">
+              <div>
+                {err.message} <code>{err.code}</code>
+              </div>
+              <button class="ghost sm" onClick={() => setErr(null)}>dismiss</button>
+            </div>
+          )}
+          {!table ? (
+            <div class="placeholder">
+              <div class="big">{token ? "select a table" : "paste an admin token to begin"}</div>
+              <div>The dashboard talks to the pramen Worker over HTTP. Tenant defaults to <code style="color:var(--amber)">main</code>.</div>
+            </div>
+          ) : (
+            <>
+              <div class="main-head">
+                <h2>{table}</h2>
+                <span class="countchip">{count == null ? "…" : `${count} row${count === 1 ? "" : "s"}`}</span>
+                <span class="spacer" />
+                <button class="ghost sm" onClick={() => void loadRows()} disabled={loading}>refresh</button>
+                <button class="primary" onClick={openCreate}>+ new row</button>
+              </div>
+              <div class="toolbar">
+                <div class="pager">
+                  <button class="sm" disabled={offset === 0 || loading} onClick={() => setOffset(Math.max(0, offset - PAGE))}>‹ prev</button>
+                  <span>
+                    page {page}
+                    {totalPages != null ? ` / ${totalPages}` : ""}
+                  </span>
+                  <button class="sm" disabled={loading || (count != null && offset + PAGE >= count)} onClick={() => setOffset(offset + PAGE)}>next ›</button>
+                </div>
+              </div>
+              {loading && !rows ? (
+                <div class="loading">loading…</div>
+              ) : rows && rows.length === 0 ? (
+                <div class="empty">no rows on this page</div>
+              ) : rows ? (
+                <div class="tablewrap">
+                  <table class="grid">
+                    <thead>
+                      <tr>
+                        {columns.map((c) => (
+                          <th key={c}>{c}</th>
+                        ))}
+                        <th style="text-align:right">actions</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {rows.map((row, i) => (
+                        <tr key={(row.id as string) ?? i}>
+                          {columns.map((c) => (
+                            <td key={c}>{renderCell(row[c])}</td>
+                          ))}
+                          <td>
+                            <div class="rowactions">
+                              <button class="ghost sm" onClick={() => void openEdit(row)}>edit</button>
+                              <button class="danger sm" onClick={() => void del(row)} disabled={busy}>del</button>
+                            </div>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              ) : null}
+            </>
+          )}
+        </main>
+      </div>
+      {editor && (
+        <div class="scrim" onClick={(e) => e.target === e.currentTarget && setEditor(null)}>
+          <div class="modal">
+            <div class="modal-head">
+              <h3>{editor.mode === "create" ? `new ${table} row` : `edit ${table} · id=${JSON.stringify(editor.original?.id)}`}</h3>
+              <span class="spacer" />
+              <button class="ghost sm" onClick={() => setEditor(null)}>✕</button>
+            </div>
+            <div class="modal-body">
+              <label>row json {editor.mode === "edit" ? "(only changed fields are sent as the patch)" : "(sent as values)"}</label>
+              <textarea
+                value={editor.text}
+                spellcheck={false}
+                onInput={(e) => setEditor({ ...editor, text: (e.target as HTMLTextAreaElement).value })}
+              />
+              {editErr && <div class="jsonerr" style="margin-top:8px">{editErr}</div>}
+            </div>
+            <div class="modal-foot">
+              <span class="muted">{editor.mode === "edit" ? "id is never modified" : "id is assigned by the server unless provided"}</span>
+              <span class="spacer" />
+              <button class="ghost" onClick={() => setEditor(null)}>cancel</button>
+              <button class="primary" onClick={() => void saveEditor()} disabled={busy}>
+                {busy ? "saving…" : editor.mode === "create" ? "create" : "save changes"}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/src/main.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+// SPA entry: inject the inline stylesheet and mount the admin dashboard.
+import { render } from "preact";
+import { App } from "./app";
+import { css } from "./styles";
+const style = document.createElement("style");
+style.textContent = css;
+document.head.appendChild(style);
+render(<App />, document.getElementById("app")!);

package/src/styles.ts ADDED Viewed

@@ -0,0 +1,190 @@
+// Inline stylesheet for the admin SPA. Borders-only depth, a single spring-teal
+// accent (the "pramen" / source motif), semantic amber+red only. Tokens are named
+// for the product's world: ink/slate for structure, spring for the live accent,
+// strata for the schema panel. Mono everywhere data lives.
+export const css = `
+:root {
+  --bg:        #0e1116;
+  --surface:   #141921;
+  --surface-2: #181e28;
+  --raise:     #1d2531;
+  --border:    #232c3a;
+  --border-2:  #2e3a4d;
+  --ink:       #e6edf3;
+  --ink-2:     #aab7c7;
+  --ink-3:     #6b7a8d;
+  --spring:    #3fd6c0;
+  --spring-dim:#1c8d80;
+  --spring-bg: #0f2723;
+  --amber:     #e0a458;
+  --danger:    #e0606a;
+  --danger-bg: #2a161a;
+  --radius:    7px;
+  --radius-sm: 5px;
+  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace;
+  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+}
+* { box-sizing: border-box; }
+html, body { margin: 0; height: 100%; }
+body {
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--sans);
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+#app { min-height: 100%; }
+button {
+  font-family: var(--sans);
+  font-size: 13px;
+  cursor: pointer;
+  border: 1px solid var(--border-2);
+  background: var(--raise);
+  color: var(--ink);
+  padding: 6px 11px;
+  border-radius: var(--radius-sm);
+  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
+}
+button:hover:not(:disabled) { background: var(--surface-2); border-color: #3a485e; }
+button:active:not(:disabled) { background: var(--surface); }
+button:disabled { opacity: 0.45; cursor: not-allowed; }
+button:focus-visible { outline: 2px solid var(--spring-dim); outline-offset: 1px; }
+button.primary {
+  background: var(--spring-bg);
+  border-color: var(--spring-dim);
+  color: var(--spring);
+}
+button.primary:hover:not(:disabled) { background: #123029; border-color: var(--spring); }
+button.danger { color: var(--danger); border-color: #4a2a2f; background: var(--danger-bg); }
+button.danger:hover:not(:disabled) { border-color: var(--danger); background: #361a1f; }
+button.ghost { background: transparent; border-color: transparent; color: var(--ink-2); padding: 4px 7px; }
+button.ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
+button.sm { padding: 3px 8px; font-size: 12px; }
+input, textarea {
+  font-family: var(--mono);
+  font-size: 13px;
+  background: var(--bg);
+  color: var(--ink);
+  border: 1px solid var(--border-2);
+  border-radius: var(--radius-sm);
+  padding: 7px 9px;
+}
+input::placeholder, textarea::placeholder { color: var(--ink-3); }
+input:focus, textarea:focus { outline: none; border-color: var(--spring-dim); }
+label { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 4px; }
+/* config bar */
+.bar {
+  position: sticky; top: 0; z-index: 10;
+  display: flex; align-items: flex-end; gap: 14px;
+  padding: 12px 18px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+}
+.brand { display: flex; align-items: baseline; gap: 9px; margin-right: 6px; padding-bottom: 5px; }
+.brand .mark { color: var(--spring); font-family: var(--mono); font-weight: 600; letter-spacing: -0.02em; font-size: 16px; }
+.brand .sub { color: var(--ink-3); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
+.bar .field { display: flex; flex-direction: column; }
+.bar .field.url input { width: 220px; }
+.bar .field.token { flex: 1; min-width: 200px; }
+.bar .field.token input { width: 100%; }
+.bar .hint { font-size: 11px; color: var(--ink-3); padding-bottom: 7px; max-width: 180px; line-height: 1.35; }
+.layout { display: grid; grid-template-columns: 270px 1fr; min-height: calc(100vh - 60px); }
+.side { border-right: 1px solid var(--border); background: var(--surface-2); padding: 16px 14px; }
+.main { padding: 20px 24px; min-width: 0; }
+.sec-title { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 9px; }
+.tenant-row { display: flex; gap: 6px; margin-bottom: 18px; }
+.tenant-row select, .tenant-row input { flex: 1; min-width: 0; }
+select {
+  font-family: var(--mono); font-size: 13px;
+  background: var(--bg); color: var(--ink);
+  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
+  padding: 7px 9px;
+}
+select:focus { outline: none; border-color: var(--spring-dim); }
+.hashchip {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-family: var(--mono); font-size: 11px;
+  color: var(--ink-2); background: var(--raise);
+  border: 1px solid var(--border); border-radius: 20px;
+  padding: 3px 10px; margin-bottom: 14px;
+}
+.hashchip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--spring); }
+.hashchip.none .dot { background: var(--ink-3); }
+.tables { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
+.tables li button {
+  width: 100%; text-align: left; border: 1px solid transparent; background: transparent;
+  display: flex; justify-content: space-between; align-items: center; gap: 8px;
+  padding: 7px 9px; border-radius: var(--radius-sm); color: var(--ink-2);
+}
+.tables li button:hover { background: var(--raise); color: var(--ink); }
+.tables li button.active { background: var(--spring-bg); border-color: var(--spring-dim); color: var(--spring); }
+.tables .tname { font-family: var(--mono); font-size: 13px; }
+.tables .cols { font-size: 11px; color: var(--ink-3); }
+.main-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
+.main-head h2 { margin: 0; font-family: var(--mono); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
+.countchip {
+  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
+  border: 1px solid var(--border); border-radius: 20px; padding: 2px 10px;
+}
+.spacer { flex: 1; }
+.toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
+.pager { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
+.tablewrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; background: var(--surface); }
+table.grid { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; }
+table.grid th {
+  position: sticky; top: 0; background: var(--surface-2);
+  text-align: left; font-weight: 600; color: var(--ink-2);
+  padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap;
+}
+table.grid td { padding: 7px 12px; border-bottom: 1px solid var(--border); color: var(--ink); vertical-align: top; max-width: 360px; }
+table.grid tr:last-child td { border-bottom: none; }
+table.grid tbody tr:hover { background: var(--surface-2); }
+.cell { display: inline-block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cell.json { color: var(--amber); }
+.cell.null { color: var(--ink-3); font-style: italic; }
+.cell.bool { color: var(--spring); }
+.rowactions { display: flex; gap: 4px; white-space: nowrap; }
+.banner {
+  display: flex; align-items: flex-start; gap: 10px;
+  border: 1px solid #4a2a2f; background: var(--danger-bg);
+  color: var(--danger); border-radius: var(--radius);
+  padding: 10px 13px; margin-bottom: 14px; font-size: 13px;
+}
+.banner code { font-family: var(--mono); background: rgba(0,0,0,0.25); padding: 1px 5px; border-radius: 3px; color: var(--amber); }
+.banner button { margin-left: auto; }
+.empty, .loading { color: var(--ink-3); padding: 40px 0; text-align: center; font-size: 13px; }
+.loading { color: var(--ink-2); }
+/* modal */
+.scrim { position: fixed; inset: 0; background: rgba(5,8,12,0.66); display: flex; align-items: flex-start; justify-content: center; padding: 56px 20px; z-index: 50; overflow: auto; }
+.modal { width: 100%; max-width: 640px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius); }
+.modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
+.modal-head h3 { margin: 0; font-family: var(--mono); font-size: 15px; font-weight: 600; }
+.modal-head .spacer { flex: 1; }
+.modal-body { padding: 16px 18px; }
+.modal-body textarea { width: 100%; min-height: 280px; resize: vertical; line-height: 1.55; tab-size: 2; }
+.modal-foot { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--border); }
+.modal-foot .spacer { flex: 1; }
+.jsonerr { color: var(--danger); font-family: var(--mono); font-size: 12px; }
+.muted { color: var(--ink-3); font-size: 12px; }
+.placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 60vh; color: var(--ink-3); gap: 8px; }
+.placeholder .big { font-family: var(--mono); color: var(--ink-2); font-size: 15px; }
+`;