akv-manager 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akv-manager",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Local web console to browse and manage Azure Key Vaults — secrets, keys, certificates, expiry — plus read-only AKS monitoring (pods, logs, ingress, key-vault tracing), using your own az login. No credentials are stored.",
   "type": "commonjs",
   "main": "server.js",

package/public/index.html

@@ -123,6 +123,24 @@
   </div>
 </div>
 
+<div class="kvmeta-overlay" id="kvMetaOverlay" aria-hidden="true"></div>
+<div class="kvmeta-drawer" id="kvMetaDrawer" role="dialog" aria-modal="true" aria-labelledby="kvMetaTitle" aria-hidden="true">
+  <header>
+    <div><div class="eyebrow">Key Vault details</div><div class="dt" id="kvMetaTitle"></div></div>
+    <button class="iconbtn" id="kvMetaClose" aria-label="Close Key Vault details">✕</button>
+  </header>
+  <div class="kvmeta-body" id="kvMetaBody"></div>
+</div>
+
+<div class="kvmeta-overlay" id="podDetailOverlay" aria-hidden="true"></div>
+<div class="kvmeta-drawer poddetail-drawer" id="podDetailDrawer" role="dialog" aria-modal="true" aria-labelledby="podDetailTitle" aria-hidden="true">
+  <header>
+    <div><div class="eyebrow">Pod details</div><div class="dt" id="podDetailTitle"></div></div>
+    <button class="iconbtn" id="podDetailClose" aria-label="Close pod details">✕</button>
+  </header>
+  <div class="kvmeta-body" id="podDetailBody"></div>
+</div>
+
 <div class="toast" id="toast"></div>
 
 <script>
@@ -136,7 +154,8 @@ const extractFirewallIp = (txt) => {
 let STATE = { vaults: [], subs: [], accounts: { users: [], activeSubscription: null }, account: null,
               vaultWarnings: [], vaultsAggregate: false,
               env: 'all', q: '', sort: 'name', dir: 1,
-              kind: 'secrets', drawerVault: null, route: 'dashboard', facets: {} };
+              kind: 'secrets', drawerVault: null, route: 'dashboard', facets: { roles: 'kv_app' },
+              tagKey: '', tagValue: '' };
 let CFG = { envRules: null, title: null, version: null, protectedTags: [] };
 function tagMatch(p,k){ p=String(p).toLowerCase(); k=String(k).toLowerCase(); return p.endsWith('*')?k.startsWith(p.slice(0,-1)):k===p; }
 function isProtectedTag(k){ return (CFG.protectedTags||[]).some(p=>tagMatch(p,k)); }
@@ -164,16 +183,17 @@ const findVault = n => STATE.vaults.find(v=>v.name.toLowerCase()===String(n||'')
 function prettyEnv(s){
   const x=String(s).toLowerCase().trim();
   // exact short codes commonly used in `env` tags
-  const code={dv:'Dev',dev:'Dev',d:'Dev',qa:'QA',ts:'Test',tst:'Test',tes:'Test',t:'Test',
+  const code={dv:'DV',dev:'DV',d:'DV',in:'IN',int:'IN',qua:'QA',qa:'QA',ts:'Test',tst:'Test',tes:'Test',t:'Test',
     st:'Stage',stg:'Stage',stag:'Stage',uat:'Stage',pp:'Stage',pr:'Prod',prd:'Prod',prod:'Prod',p:'Prod',
     sb:'Sandbox',sbx:'Sandbox',sand:'Sandbox'}[x];
   if(code) return code;
   if(/prod|prd|\blive\b/.test(x)) return 'Prod';
   if(/stag|stg|\buat\b|preprod|pre-prod|accept/.test(x)) return 'Stage';
-  if(/\bqa\b|quality/.test(x)) return 'QA';
+  if(/\b(?:qa|qua)\b|quality/.test(x)) return 'QA';
   if(/sandbox|sbx|\bdemo\b/.test(x)) return 'Sandbox';
-  if(/dev|develop/.test(x)) return 'Dev';
-  if(/test|tst|\bint\b|integration|nonprod/.test(x)) return 'Test';
+  if(/dev|develop/.test(x)) return 'DV';
+  if(/\b(?:in|int)\b|integration/.test(x)) return 'IN';
+  if(/test|tst|nonprod/.test(x)) return 'Test';
   return s.charAt(0).toUpperCase()+s.slice(1);
 }
 // Prefer the vault's real `env` tag; fall back to the subscription-name heuristic.
@@ -190,16 +210,17 @@ function envLabel(name){
   const n = name || '';
   if(CFG.envRules){ for(const [pat,label] of CFG.envRules){ try{ if(new RegExp(pat,'i').test(n)) return label; }catch{} } }
   // Only label a subscription when a known environment keyword is present; otherwise '—'.
-  return /(prod|prd|\blive\b|stag|stg|\buat\b|preprod|pre-prod|accept|\bqa\b|sandbox|sbx|\bdemo\b|\bdev\b|develop|test|tst|\bint\b|integration|nonprod)/i.test(n)
+  return /(prod|prd|\blive\b|stag|stg|\buat\b|preprod|pre-prod|accept|\b(?:qa|qua)\b|sandbox|sbx|\bdemo\b|\b(?:dv|dev)\b|develop|test|tst|\b(?:in|int)\b|integration|nonprod)/i.test(n)
     ? prettyEnv(n) : '—';
 }
 function envClass(env){
   const s = (env||'').toLowerCase();
   if(/prod|live/.test(s)) return 'e-prod';
   if(/stag|uat|preprod/.test(s)) return 'e-stage';
-  if(/qa/.test(s)) return 'e-qa';
+  if(/qa|qua/.test(s)) return 'e-qa';
   if(/sandbox|demo/.test(s)) return 'e-sandbox';
-  if(/dev/.test(s)) return 'e-dev';
+  if(/dev|^dv$/.test(s)) return 'e-dev';
+  if(/^(in|int)$|integration/.test(s)) return 'e-test';
   if(/test|int/.test(s)) return 'e-test';
   return 'e-other';
 }
@@ -295,6 +316,8 @@ function router(){
   const parts = parseHash();
   const route = parts[0]||'dashboard';
   STATE.route = route;
+  if(route!=='vaults') closeVaultDetails();
+  if(route!=='cluster') closePodDetails();
   if(route!=='cluster') teardownTerm();   // close any open pod shell when leaving Clusters
   if(route!=='vault') mountedVault=null;
   if(route==='vaults'){ setHead('vaults'); viewVaults(); }
@@ -381,26 +404,36 @@ function expCounts(){
 }
 
 // ---------- VAULTS (inventory) ----------
-const FACET_PREF = ['solution','cost-center','contact-main','contact-ccoe','owner','roles'];
+const FACET_PREF = ['roles','solution'];
+const FACET_EXCLUDE = new Set(['cost-center','contact-main','contact-ccoe','owner','location']);
 const isEnvKey = k => /^(env|environment)$/i.test(k);
 // Pick up to 4 tag dimensions to expose as dropdown facets: preferred keys first
 // (case-insensitive match to the real tag casing), then the most common remaining keys.
 function facetKeys(){
   const freq = {};
-  STATE.vaults.forEach(v=>Object.keys(v.tags||{}).forEach(k=>{ if(!isEnvKey(k)) freq[k]=(freq[k]||0)+1; }));
+  STATE.vaults.forEach(v=>Object.keys(v.tags||{}).forEach(k=>{
+    if(!isEnvKey(k) && !FACET_EXCLUDE.has(k.toLowerCase())) freq[k]=(freq[k]||0)+1;
+  }));
   const real = Object.keys(freq);
   const matchPref = p => real.find(k=>k.toLowerCase()===p);
   const picked = [];
-  for(const p of FACET_PREF){ const k=matchPref(p); if(k && !picked.includes(k)) picked.push(k); }
-  for(const [k] of Object.entries(freq).sort((a,b)=>b[1]-a[1])){ if(picked.length>=4) break; if(!picked.includes(k)) picked.push(k); }
+  const hasPicked = k => picked.some(x=>x.toLowerCase()===k.toLowerCase());
+  for(const p of FACET_PREF){ if(matchPref(p) && !hasPicked(p)) picked.push(p); }
+  for(const [k] of Object.entries(freq).sort((a,b)=>b[1]-a[1])){ if(picked.length>=4) break; if(!hasPicked(k)) picked.push(k); }
   return picked.slice(0,4);
 }
-function tagVal(v,k){ const t=v.tags||{}; return t[k]!=null?String(t[k]):''; }
+function tagVal(v,k){
+  const t=v.tags||{};
+  const realKey=Object.keys(t).find(x=>x.toLowerCase()===String(k).toLowerCase());
+  return realKey!=null?String(t[realKey]):'';
+}
+function hasTag(v,k){ return Object.keys(v.tags||{}).some(x=>x.toLowerCase()===String(k).toLowerCase()); }
 function filteredVaults(){
   const q = STATE.q.toLowerCase();
   let list = STATE.vaults.filter(v=>{
     if(STATE.env!=='all' && v.env!==STATE.env) return false;
     for(const [k,val] of Object.entries(STATE.facets)){ if(val && tagVal(v,k)!==val) return false; }
+    if(STATE.tagKey && (!hasTag(v,STATE.tagKey) || (STATE.tagValue && tagVal(v,STATE.tagKey)!==STATE.tagValue))) return false;
     if(q){
       const hay = [v.name, v.resourceGroup, v.service, ...Object.values(v.tags||{})].join(' ').toLowerCase();
       if(!hay.includes(q)) return false;
@@ -427,11 +460,23 @@ function viewVaults(){
     const vals=[...new Set(STATE.vaults.map(v=>tagVal(v,k)).filter(Boolean))].sort();
     if(!vals.length) return '';
     const sel=STATE.facets[k]||'';
-    return `<div class="facet"><label>${esc(k)}</label>
+    const label=k.toLowerCase()==='roles'?'Role':k;
+    return `<div class="facet"><label>${esc(label)}</label>
       <select class="facetsel ${sel?'on':''}" onchange="setFacet('${esc(k)}',this.value)">
         <option value="">any</option>${vals.map(x=>`<option ${x===sel?'selected':''} value="${esc(x)}">${esc(x)}</option>`).join('')}</select></div>`;
   }).join('');
-  const anyFacet = Object.values(STATE.facets).some(Boolean);
+  const tagKeyMap=new Map();
+  STATE.vaults.forEach(v=>Object.keys(v.tags||{}).forEach(k=>{ if(!tagKeyMap.has(k.toLowerCase())) tagKeyMap.set(k.toLowerCase(),k); }));
+  const tagKeys=[...tagKeyMap.values()].sort((a,b)=>a.localeCompare(b));
+  const tagVals=STATE.tagKey?[...new Set(STATE.vaults.map(v=>tagVal(v,STATE.tagKey)).filter(Boolean))].sort((a,b)=>a.localeCompare(b)):[];
+  const tagFilter=tagKeys.length?`<div class="facet"><label>Tag</label>
+      <select class="facetsel ${STATE.tagKey?'on':''}" onchange="setTagKey(this.value)">
+        <option value="">any tag</option>${tagKeys.map(k=>`<option ${k.toLowerCase()===STATE.tagKey.toLowerCase()?'selected':''} value="${esc(k)}">${esc(k)}</option>`).join('')}</select></div>
+      ${STATE.tagKey?`<div class="facet"><label>Value</label>
+        <select class="facetsel ${STATE.tagValue?'on':''}" onchange="setTagValue(this.value)">
+          <option value="">any value</option>${tagVals.map(x=>`<option ${x===STATE.tagValue?'selected':''} value="${esc(x)}">${esc(x)}</option>`).join('')}</select></div>`:''}`:'';
+  const filterBar=facets+tagFilter;
+  const anyFacet = Object.values(STATE.facets).some(Boolean) || !!STATE.tagKey;
   const agg = STATE.vaultsAggregate;
   const warns = STATE.vaultWarnings || [];
   const warnBar = warns.length ? `<div class="fwalert" style="background:linear-gradient(180deg,rgba(242,181,61,.14),rgba(242,181,61,.06));border-color:rgba(242,181,61,.5);color:#f4d089">
@@ -439,7 +484,7 @@ function viewVaults(){
   $('#route').innerHTML = `
     ${warnBar}
     <div class="chips">${chips}</div>
-    ${facets?`<div class="facets">${facets}${anyFacet?`<button class="facetclear" onclick="clearFacets()">clear filters</button>`:''}</div>`:''}
+    ${filterBar?`<div class="facets">${filterBar}${anyFacet?`<button class="facetclear" onclick="clearFacets()">clear filters</button>`:''}</div>`:''}
     <div class="panel"><div class="scroll"><table>
       <thead><tr>
         <th data-sort="pin" style="width:30px"></th>
@@ -454,22 +499,73 @@ function viewVaults(){
 }
 function setEnv(e){ STATE.env=e; viewVaults(); }
 function setFacet(k,val){ if(val) STATE.facets[k]=val; else delete STATE.facets[k]; viewVaults(); }
-function clearFacets(){ STATE.facets={}; viewVaults(); }
+function setTagKey(k){ STATE.tagKey=k; STATE.tagValue=''; viewVaults(); }
+function setTagValue(v){ STATE.tagValue=v; viewVaults(); }
+function clearFacets(){ STATE.facets={}; STATE.tagKey=''; STATE.tagValue=''; viewVaults(); }
+let VMD={name:'',lastFocus:null};
+const metaBool=v=>v==null?'—':v?'Enabled':'Disabled';
+function renderVaultDetails(d,{loading=false,error=''}={}){
+  const rbac=d.rbacEnabled!=null?d.rbacEnabled:d.enableRbac==='true'?true:d.enableRbac==='false'?false:null;
+  const resourceId=d.id||((d.subscriptionId&&d.resourceGroup&&d.name)
+    ?`/subscriptions/${d.subscriptionId}/resourceGroups/${d.resourceGroup}/providers/Microsoft.KeyVault/vaults/${d.name}`:'');
+  const rows=[
+    ['Name',d.name],['Environment',d.env],['Service',d.service],
+    ['Subscription',subName(d.subscriptionId)],['Subscription ID',d.subscriptionId],
+    ['Resource group',d.resourceGroup],['Resource ID',resourceId],['Location',d.location],
+    ['SKU',d.sku],['Authorization',rbac==null?'—':rbac?'Azure RBAC':'Access policies'],
+    ['Vault endpoint',d.uri],['Tenant ID',d.tenantId],['Account',d.account],
+    ['Provisioning state',d.provisioningState],
+    ['Soft delete',d.softDeleteEnabled==null?null:`${metaBool(d.softDeleteEnabled)}${d.softDeleteRetentionDays!=null?` · ${d.softDeleteRetentionDays} days`:''}`],
+    ['Purge protection',d.purgeProtectionEnabled==null?null:metaBool(d.purgeProtectionEnabled)],
+    ['Public network',d.publicNetworkAccess],
+    ['Firewall',d.networkDefaultAction?`Default ${d.networkDefaultAction}${d.networkBypass?` · bypass ${d.networkBypass}`:''}`:null],
+    ['Network rules',d.ipRuleCount!=null?`${d.ipRuleCount} IP · ${d.vnetRuleCount||0} VNet · ${d.privateEndpointCount||0} private endpoint`:null],
+  ].filter(([,v])=>v!==null&&v!==undefined&&v!=='');
+  const tags=Object.entries(d.tags||{}).sort(([a],[b])=>a.localeCompare(b));
+  $('#kvMetaTitle').textContent=d.name||'Key Vault';
+  $('#kvMetaBody').innerHTML=`
+    <div class="kvmeta-actions"><button class="btn sm" onclick="closeVaultDetails();openVault('${esc(d.name)}')">Open vault</button>
+      ${loading?'<span class="faint mono"><span class="spin" style="width:12px;height:12px;border-width:1px"></span> loading extended metadata…</span>':''}</div>
+    ${error?`<div class="fwalert"><div><b>Extended metadata unavailable.</b><div class="hint">${esc(error)}</div></div></div>`:''}
+    <section class="kvmeta-section"><div class="kvmeta-heading">Metadata</div><div class="kvmeta-list">
+      ${rows.map(([k,v])=>`<div class="kvmeta-row"><div class="kvmeta-key">${esc(k)}</div><div class="kvmeta-value mono">${esc(v)}</div></div>`).join('')}
+    </div></section>
+    <section class="kvmeta-section"><div class="kvmeta-heading">Tags · ${tags.length}</div>
+      ${tags.length?`<div class="kvmeta-tags">${tags.map(([k,v])=>`<div class="kvmeta-tag"><b>${esc(k)}</b><span>${esc(v)}</span></div>`).join('')}</div>`:'<div class="empty" style="padding:24px">No tags</div>'}
+    </section>`;
+}
+async function openVaultDetails(name){
+  const v=findVault(name); if(!v)return;
+  VMD={name,lastFocus:document.activeElement};
+  $('#kvMetaOverlay').classList.add('show'); $('#kvMetaOverlay').setAttribute('aria-hidden','false');
+  $('#kvMetaDrawer').classList.add('open'); $('#kvMetaDrawer').setAttribute('aria-hidden','false');
+  renderVaultDetails(v,{loading:true}); setTimeout(()=>$('#kvMetaClose').focus(),0);
+  let r;
+  try{ r=await api(`/api/vaults/${encodeURIComponent(name)}/metadata`); }
+  catch(e){ r={ok:false,error:e.message||'Request failed'}; }
+  if(VMD.name!==name)return;
+  if(r.ok) renderVaultDetails({...v,...r.data,tags:r.data.tags||v.tags});
+  else renderVaultDetails(v,{error:r.error||'Request failed'});
+}
+function closeVaultDetails(){
+  if(!VMD.name)return;
+  $('#kvMetaOverlay').classList.remove('show'); $('#kvMetaOverlay').setAttribute('aria-hidden','true');
+  $('#kvMetaDrawer').classList.remove('open'); $('#kvMetaDrawer').setAttribute('aria-hidden','true');
+  const focus=VMD.lastFocus; VMD={name:'',lastFocus:null}; if(focus&&focus.focus)focus.focus();
+}
 function renderVaultRows(){
   const list = filteredVaults();
   const agg = STATE.vaultsAggregate;
   $('#vaultCount').textContent = `${list.length} vault${list.length!==1?'s':''} shown`;
   if(!list.length){ $('#vaultsBody').innerHTML=`<tr><td colspan="${agg?10:9}" class="empty">No vaults match your filter.</td></tr>`; return; }
   $('#vaultsBody').innerHTML = list.map(v=>{
-    const tags = Object.entries(v.tags||{}).filter(([k])=>!/^env$/i.test(k)).slice(0,2)
-      .map(([k,val])=>`<span class="tagchip"><b>${esc(k)}</b> ${esc(val)}</span>`).join('');
-    const more = Object.keys(v.tags||{}).filter(k=>!/^env$/i.test(k)).length-2;
+    const tagCount=Object.keys(v.tags||{}).length;
     return `<tr>
     <td><button class="star ${isPinned(v.name)?'on':''}" onclick="togglePin('${esc(v.name)}')" title="pin vault">★</button></td>
     <td class="mono"><b>${esc(v.name)}</b></td>
     <td><span class="tag ${envClass(v.env)}">${esc(v.env)}</span></td>
     <td class="muted">${esc(v.service||'')}</td>
-    <td><div class="tagchips">${tags}${more>0?`<span class="tagchip">+${more}</span>`:''}</div></td>
+    <td><button class="iconbtn tagdetails" onclick="openVaultDetails('${esc(v.name)}')">Details <span class="n">${tagCount}</span></button></td>
     <td class="mono muted">${esc(v.resourceGroup)}</td>
     <td class="mono">${esc(v.sku||'—')}</td>
     <td>${v.enableRbac==='true'?'<span class="pill rbac">RBAC</span>':'<span class="pill policy">Policy</span>'}</td>
@@ -1309,6 +1405,7 @@ function renderClusterRows(){
 function openCluster(name){ navigate('cluster/'+encodeURIComponent(name)); }
 
 function viewCluster(name){
+  if(PDD.cluster&&PDD.cluster!==name) closePodDetails();
   CL.name = name;
   if(mountedCluster!==name || !document.getElementById('clBody')){
     mountedCluster=name; CL.ns=''; CL.items=[]; CL.namespaces=[]; CL.logPod=null; CL.cluster=null; CL.kind='pods';
@@ -1343,6 +1440,7 @@ async function enrichClusterMeta(name){
     `<span class="mono">${esc(c.resourceGroup||'')}</span>${c.private?'<span class="sep">·</span><span class="pill policy">private · VPN</span>':''}`;
 }
 function loadClusterContent(force){
+  closePodDetails();
   CL.logPod=null; CL.termPod=null; CL.filter=''; teardownTerm();
   if(force){ delete CL.podsByCluster[CL.name]; delete CL.cmByCluster[CL.name]; delete CL.vaultMapByCluster[CL.name]; delete CL.ingressMapByCluster[CL.name]; }   // explicit refresh re-fetches
   if(CL.kind==='pods') loadPods(); else loadConfigMaps();
@@ -1363,18 +1461,16 @@ function podTier(nm){ nm=(nm||'').toLowerCase(); if(TIER_RE.cache.test(nm))retur
 async function loadPods(){
   const name=CL.name;
   CL.vaultMap = CL.vaultMapByCluster[name] || {};
-  if(CL.podsByCluster[name]){ CL.items=CL.podsByCluster[name]; renderPodsShell(); ensurePodVaultMap(name); return; }   // cached
+  if(CL.podsByCluster[name]){ CL.items=CL.podsByCluster[name]; renderPodsShell(); return; }   // cached
   $('#clBody').innerHTML='<div class="empty"><span class="spin"></span></div>';
   const r = await api(`/api/aks/${name}/pods`);
   if(STATE.route!=='cluster'||CL.name!==name||CL.kind!=='pods'||CL.logPod||CL.termPod) return;
   if(!r.ok){ $('#clBody').innerHTML=clErr(r); return; }
   CL.items=r.data||[]; CL.podsByCluster[name]=CL.items;
   renderPodsShell();
-  ensurePodVaultMap(name);
-  ensurePodIngressMap(name);
 }
-// Resolve each namespace's exposed Services → Ingress hosts once per cluster, then repaint
-// so the Ingress column fills in. Pods are matched to a Service by label⊇selector.
+// Resolve each namespace's exposed Services → Ingress hosts once per cluster for the
+// pod details drawer. Pods are matched to a Service by label⊇selector.
 async function ensurePodIngressMap(name){
   if(CL.ingressMapByCluster[name]){ CL.ingressMap=CL.ingressMapByCluster[name]; return; }
   const pods = CL.podsByCluster[name] || CL.items || [];
@@ -1384,7 +1480,6 @@ async function ensurePodIngressMap(name){
   CL.ingressMapByCluster[name] = (r.ok && r.data && r.data.byNamespace) ? r.data.byNamespace : {};
   if(CL.name!==name) return;
   CL.ingressMap = CL.ingressMapByCluster[name];
-  if(STATE.route==='cluster' && CL.kind==='pods' && !CL.logPod && !CL.termPod) renderPodRows();
 }
 // Match a pod to the Ingress(es) routing to it: Services whose selector ⊆ the pod's
 // labels, then Ingresses whose backend references those Services.
@@ -1399,31 +1494,18 @@ function podIngresses(p){
   const names = new Set(podMatchedSvcNames(p));
   return (nsm.ingresses||[]).filter(i=>(i.backendServices||[]).some(s=>names.has(s)));
 }
-function podIngressHosts(p){ const hs=new Set(); podIngresses(p).forEach(i=>(i.hosts||[]).forEach(h=>hs.add(h))); return [...hs]; }
-function ingCell(p){
-  const hs = podIngressHosts(p);
-  if(!hs.length) return '<span class="faint mono">—</span>';
-  const label = hs[0] + (hs.length>1?` +${hs.length-1}`:'');
-  return `<button class="ingchip" title="${esc(hs.join(', '))} — click for ingress config" onclick="openPodIngress('${esc(p.namespace)}','${esc(p.name)}')">🌐 <span class="ell" style="max-width:220px;vertical-align:bottom">${esc(label)}</span></button>`;
-}
-// Ingress config panel: routing (host/path/backend:port), TLS + cert-manager, class,
-// forced-HTTPS, CORS and body-size — for the ingress(es) fronting this pod.
-function openPodIngress(ns,pod){
-  const p = CL.items.find(x=>x.name===pod&&x.namespace===ns) || {name:pod, namespace:ns, labels:{}};
+// Ingress details shown inside the pod drawer: routing, TLS/cert-manager, class,
+// forced HTTPS, CORS, and body-size for every ingress fronting the pod.
+function podIngressDetails(p){
   const ings = podIngresses(p);
-  CL.logPod=null; CL.termPod=null; teardownTerm();
-  $('#clBody').innerHTML = `<div class="cmctl"><button class="iconbtn" onclick="loadClusterContent()">← Pods</button>
-      <span class="mono"><b>${esc(pod)}</b></span><span class="faint mono">${esc(ns)}</span><span class="faint mono">Ingress</span></div>
-    <div id="pingOut"></div>`;
-  const out=$('#pingOut'); if(!out) return;
-  if(!ings.length){ out.innerHTML=`<div class="empty">No Ingress routes to this pod's service.</div>`; return; }
+  if(!ings.length) return `<div class="empty" style="padding:24px">No Ingress routes to this pod's service.</div>`;
   const line=(k,v)=> v?`<div class="kvline" style="padding:5px 0"><span class="nm mono">${esc(k)}</span><span class="meta mono">${v}</span></div>`:'';
-  out.innerHTML = ings.map(i=>{
+  return ings.map(i=>{
     const routes=(i.routes||[]).map(r=>`<tr><td class="mono">${esc(r.host||'*')}</td><td class="mono">${esc(r.path||'/')}</td><td class="mono muted">${esc(r.pathType||'')}</td><td class="mono">${esc(r.service||'')}${r.port!=null?':'+esc(String(r.port)):''}</td></tr>`).join('');
     const tls=(i.tls||[]).map(t=>`<span class="tagchip">🔒 ${esc(t.secretName||'tls')}${t.hosts&&t.hosts.length?' · '+esc(t.hosts.join(', ')):''}</span>`).join(' ');
     const cm=i.certManager?[i.certManager.issuer,i.certManager.challenge,i.certManager.dnsProvider].filter(Boolean).map(esc).join(' · '):'';
     const cors=i.cors?`origin <b>${esc(i.cors.origin||'*')}</b> · ${esc(i.cors.methods||'')}`:'';
-    return `<div class="panel" style="margin-bottom:16px;padding:16px 18px">
+    return `<div class="panel poddetail-ingress">
       <div class="row" style="justify-content:space-between;margin-bottom:10px;gap:10px">
         <b class="mono">${esc(i.name)}</b>
         <div class="tagchips">${i.hosts.map(h=>`<a class="ingchip" href="https://${esc(h)}" target="_blank" rel="noopener noreferrer" title="Open https://${esc(h)}">🌐 ${esc(h)} ↗</a>`).join('')}</div>
@@ -1439,8 +1521,8 @@ function openPodIngress(ns,pod){
     </div>`;
   }).join('');
 }
-// Resolve each namespace's Key Vault(s) once per cluster, then repaint the rows so the
-// KV column fills in. Best-effort: if the secret-source CRDs aren't readable it stays empty.
+// Resolve each namespace's Key Vault(s) once per cluster for the pod details drawer.
+// Best-effort: if the secret-source CRDs aren't readable the drawer explains the RBAC gap.
 async function ensurePodVaultMap(name){
   if(CL.vaultMapByCluster[name]){ CL.vaultMap=CL.vaultMapByCluster[name]; CL.vaultRestricted=CL.vaultRestrictedByCluster[name]||{}; return; }
   const pods = CL.podsByCluster[name] || CL.items || [];
@@ -1452,20 +1534,19 @@ async function ensurePodVaultMap(name){
   if(CL.name!==name) return;
   CL.vaultMap = CL.vaultMapByCluster[name];
   CL.vaultRestricted = CL.vaultRestrictedByCluster[name];
-  if(STATE.route==='cluster' && CL.kind==='pods' && !CL.logPod && !CL.termPod) renderPodRows();
 }
 function podVaults(p){ return (CL.vaultMap && CL.vaultMap[p.namespace]) || []; }
-// The KV cell: a chip per Key Vault serving the pod's namespace. Clicking a known vault
-// jumps straight to its secrets; otherwise it opens the precise per-pod trace panel.
+// Key Vault controls for the pod drawer. Clicking a known vault jumps straight to its
+// secrets; otherwise it opens the precise per-pod trace panel.
 // When the namespace's External Secrets CRDs aren't readable (RBAC), say so plainly.
 function kvCell(p){
   const vs = podVaults(p);
   if(vs.length) return `<div class="tagchips">${vs.map(name=>{ const known=findVault(name);
-    return `<button class="kvchip${known?'':' unknown'}" title="${known?'Open '+esc(name)+' secrets':esc(name)+' — not in your visible inventory (click to trace)'}" onclick="${known?`openVault('${esc(name)}')`:`openPodVaults('${esc(p.namespace)}','${esc(p.name)}')`}">🔑 ${esc(name)}</button>`;
+    return `<button class="kvchip${known?'':' unknown'}" title="${known?'Open '+esc(name)+' secrets':esc(name)+' — not in your visible inventory (click to trace)'}" onclick="closePodDetails();${known?`openVault('${esc(name)}')`:`openPodVaults('${esc(p.namespace)}','${esc(p.name)}')`}">🔑 ${esc(name)}</button>`;
   }).join('')}</div>`;
   if(CL.vaultRestricted && CL.vaultRestricted[p.namespace])
-    return `<button class="kvchip unknown" title="Your identity can't read SecretStores on this cluster (Kubernetes RBAC). Click to see details." onclick="openPodVaults('${esc(p.namespace)}','${esc(p.name)}')">🔒 restricted</button>`;
-  return `<button class="iconbtn" title="trace this pod's Key Vault via CSI / External Secrets / env" onclick="openPodVaults('${esc(p.namespace)}','${esc(p.name)}')">trace</button>`;
+    return `<button class="kvchip unknown" title="Your identity can't read SecretStores on this cluster (Kubernetes RBAC). Click to see details." onclick="closePodDetails();openPodVaults('${esc(p.namespace)}','${esc(p.name)}')">🔒 restricted</button>`;
+  return `<button class="iconbtn" title="trace this pod's Key Vault via CSI / External Secrets / env" onclick="closePodDetails();openPodVaults('${esc(p.namespace)}','${esc(p.name)}')">Trace Key Vault</button>`;
 }
 function renderPodsShell(){
   if(CL.pendingFilter){ CL.filter=CL.pendingFilter; CL.pendingFilter=null; }   // from a project "Open →"
@@ -1492,21 +1573,16 @@ function renderPodRows(){
   if(!CL.items.length){ $('#clList').innerHTML=`<div class="empty">No pods visible on this cluster.</div>`; return; }
   if(!list.length){ $('#clList').innerHTML=`<div class="empty">No pods match your filter.</div>`; return; }
   $('#clList').innerHTML = `<div class="panel"><div class="scroll"><table>
-    <thead><tr><th>Pod</th><th>Namespace</th><th>Build</th><th>Ready</th><th>Status</th><th class="right">Restarts</th><th>Age</th><th>Ingress</th><th>Key Vault</th><th class="right">Actions</th></tr></thead>
+    <thead><tr><th>Pod</th><th>Namespace</th><th class="pod-build">Build</th><th>Status</th><th>Age</th><th class="right">Actions</th></tr></thead>
     <tbody>${list.map(p=>`<tr>
       <td class="mono"><b><span class="ell" title="${esc(p.name)}">${esc(p.name)}</span></b></td>
       <td class="mono muted"><span class="ell ns" title="${esc(p.namespace||'')}">${esc(p.namespace||'')}</span></td>
-      <td class="mono"><span class="ell" style="max-width:140px" title="${esc(p.build||'')}">${esc(p.build||'—')}</span></td>
-      <td class="mono">${esc(p.ready||'')}</td>
+      <td class="mono pod-build"><span class="ell" title="${esc(p.build||'')}">${esc(p.build||'—')}</span></td>
       <td><span class="phase ${esc(p.phase||'')}">${esc(p.phase||'?')}</span></td>
-      <td class="right mono ${p.restarts>0?'':'muted'}">${p.restarts}</td>
       <td class="mono muted">${age(p.created)}</td>
-      <td>${ingCell(p)}</td>
-      <td>${kvCell(p)}</td>
       <td class="right" style="white-space:nowrap"><button class="iconbtn" onclick="openPodDetail('${esc(p.namespace)}','${esc(p.name)}')">Details</button>
         <button class="iconbtn" onclick="showLogs('${esc(p.namespace)}','${esc(p.name)}')">Logs</button>
-        <button class="iconbtn" onclick="openTerminal('${esc(p.namespace)}','${esc(p.name)}')">Terminal</button>
-        <button class="iconbtn warn" title="rolling-restart the workload that owns this pod" onclick="restartPod('${esc(p.namespace)}','${esc(p.name)}',this)">Restart</button></td>
+        <button class="iconbtn" onclick="openTerminal('${esc(p.namespace)}','${esc(p.name)}')">Terminal</button></td>
     </tr>`).join('')}</tbody></table></div></div>`;
 }
 // Restart is the only write this app makes to a cluster. Two calls on purpose: the
@@ -1528,6 +1604,7 @@ async function restartPod(ns,pod,btn){
   const r = await api(base,{method:'POST'});
   restore();
   if(!r.ok){ restartError(r, ns, pod); return; }
+  if(PDD.pod===pod&&PDD.ns===ns) closePodDetails();
   toast(`${r.data.kind} ${r.data.name} restarting`);
   banner(`Rolling restart requested on ${esc(r.data.kind)} <b>${esc(r.data.name)}</b> in ${esc(ns)} — watch the Ready/Age columns as replicas cycle.`);
   setTimeout(()=>banner(''),8000);
@@ -1538,6 +1615,7 @@ async function restartPod(ns,pod,btn){
 // network path. It is NOT wired to a button: RunCommand executes as cluster-admin
 // regardless of the caller's Kubernetes RBAC, which this app otherwise never does.
 function restartError(r, ns, pod){
+  if(PDD.pod===pod&&PDD.ns===ns) closePodDetails();
   if(r.network){
     const c=CL.cluster||{};
     const cmd=`az aks command invoke -g ${c.resourceGroup||'<rg>'} -n ${CL.name} --command "kubectl rollout restart deploy -n ${ns} --selector=app=<app>"`;
@@ -1552,36 +1630,77 @@ function restartError(r, ns, pod){
   toast(r.error||'restart failed');
   if(r.error && r.error.length>60){ banner(esc(r.error)); setTimeout(()=>banner(''),10000); }
 }
-async function openPodDetail(ns,pod){
-  CL.logPod=null; CL.termPod=null; teardownTerm();
-  $('#clBody').innerHTML = `<div class="cmctl"><button class="iconbtn" onclick="loadClusterContent()">← Pods</button>
-      <span class="mono"><b>${esc(pod)}</b></span><span class="faint mono">${esc(ns)}</span></div>
-    <div id="pdOut"><div class="empty"><span class="spin"></span> loading pod details…</div></div>`;
-  const r=await api(`/api/aks/${CL.name}/${ns}/pods/${pod}/detail`);
-  if(STATE.route!=='cluster') return; const out=$('#pdOut'); if(!out) return;
-  if(!r.ok){ out.innerHTML=clErr(r); return; }
-  const d=r.data; const labels=Object.entries(d.labels||{});
-  const labelChips = labels.length
-    ? `<div class="tagchips">${labels.map(([k,v])=>`<span class="tagchip"><b>${esc(k)}</b>${v?' '+esc(v):''}</span>`).join('')}</div>`
-    : '<span class="faint mono">no labels</span>';
-  const cont=(d.containers||[]).map(c=>{
+let PDD={cluster:'',ns:'',pod:'',base:null,data:null,lastFocus:null};
+function renderPodDetail(p,d={}, {loading=false,ingressLoading=false,vaultLoading=false,error=''}={}){
+  const labels=Object.entries(d.labels||{}).sort(([a],[b])=>a.localeCompare(b));
+  const containers=(d.containers||[]).map(c=>{
     const rows=(c.env||[]).map(e=>{
-      const val = e.value!=null ? esc(e.value)
-        : e.from ? `<span class="faint">← ${esc(e.from.kind)} ${esc(e.from.name||'')}${e.from.key?'.'+esc(e.from.key):''}</span>` : '';
+      const val=e.value!=null?esc(e.value)
+        :e.from?`<span class="faint">← ${esc(e.from.kind)} ${esc(e.from.name||'')}${e.from.key?'.'+esc(e.from.key):''}</span>`:'';
       return `<tr><td class="mono"><b>${esc(e.name)}</b></td><td class="mono" style="word-break:break-all">${val}</td></tr>`;
     }).join('');
     const efRows=(c.envFrom||[]).map(ef=>`<tr><td class="mono faint">∗ all keys</td><td class="mono faint">← ${esc(ef.kind)} ${esc(ef.name||'')}${ef.prefix?` (prefix ${esc(ef.prefix)})`:''}${ef.kind==='secret'?' · values not shown':''}</td></tr>`).join('');
-    const body = rows||efRows
-      ? `<div class="panel" style="margin-top:6px"><div class="scroll" style="max-height:none"><table>
-          <thead><tr><th>Env var</th><th>Value / source</th></tr></thead><tbody>${rows}${efRows}</tbody></table></div></div>`
-      : '<div class="faint mono" style="margin-top:6px">no env vars declared</div>';
-    return `<div style="margin:16px 0">
-      <div class="kvline" style="padding:4px 0"><span class="nm mono"><b>${esc(c.name)}</b>${c.init?' <span class="pill">init</span>':''}</span>
-        <span class="meta">${c.tag?`<span class="tagchip">build ${esc(c.tag)}</span>`:''}</span></div>
-      <div class="cmval">${esc(c.image||'')}</div>${body}</div>`;
+    const env=rows||efRows?`<div class="panel" style="margin-top:8px"><div class="scroll" style="max-height:280px"><table>
+      <thead><tr><th>Env var</th><th>Value / source</th></tr></thead><tbody>${rows}${efRows}</tbody></table></div></div>`
+      :'<div class="faint mono" style="margin-top:7px">no env vars declared</div>';
+    return `<div style="margin:16px 0"><div class="kvline" style="padding:4px 0"><span class="nm mono"><b>${esc(c.name)}</b>${c.init?' <span class="pill">init</span>':''}</span>
+      <span class="meta">${c.tag?`<span class="tagchip">build ${esc(c.tag)}</span>`:''}</span></div>
+      <div class="cmval">${esc(c.image||'')}</div>${env}</div>`;
   }).join('');
-  out.innerHTML = `<div class="secthead">Labels (tags)</div>${labelChips}
-    <div class="secthead" style="margin-top:18px">Containers · image · env vars</div>${cont}`;
+  const overview=[
+    ['Cluster',PDD.cluster],['Namespace',p.namespace],['Status',p.phase||'?'],['Ready',p.ready||'—'],
+    ['Restarts',p.restarts??0],['Age',age(p.created)],['Created',p.created?new Date(p.created).toLocaleString():null],
+    ['Node',d.node],['Build',p.build||'—'],
+  ].filter(([,v])=>v!==null&&v!==undefined&&v!=='');
+  $('#podDetailTitle').textContent=p.name;
+  $('#podDetailBody').innerHTML=`
+    <div class="poddetail-actions">
+      <button class="btn sm ghost" onclick="closePodDetails();showLogs('${esc(p.namespace)}','${esc(p.name)}')">Logs</button>
+      <button class="btn sm ghost" onclick="closePodDetails();openTerminal('${esc(p.namespace)}','${esc(p.name)}')">Terminal</button>
+      <span class="push"></span>
+      <button class="btn sm danger" title="rolling-restart the workload that owns this pod" onclick="restartPod('${esc(p.namespace)}','${esc(p.name)}',this)">Restart workload</button>
+    </div>
+    ${error?`<div class="fwalert"><div><b>Pod details unavailable.</b><div class="hint">${esc(error)}</div></div></div>`:''}
+    <section class="kvmeta-section"><div class="kvmeta-heading">Overview</div><div class="kvmeta-list">
+      ${overview.map(([k,v])=>`<div class="kvmeta-row"><div class="kvmeta-key">${esc(k)}</div><div class="kvmeta-value mono">${esc(v)}</div></div>`).join('')}
+    </div></section>
+    <section class="kvmeta-section"><div class="kvmeta-heading">Key Vault</div>
+      ${vaultLoading?'<div class="empty" style="padding:24px"><span class="spin"></span> tracing Key Vault references…</div>':kvCell(p)}
+    </section>
+    <section class="kvmeta-section"><div class="kvmeta-heading">Ingress</div>
+      ${ingressLoading?'<div class="empty" style="padding:24px"><span class="spin"></span> resolving ingress routes…</div>':podIngressDetails(p)}
+    </section>
+    <section class="kvmeta-section"><div class="kvmeta-heading">Labels · ${labels.length}</div>
+      ${labels.length?`<div class="kvmeta-tags">${labels.map(([k,v])=>`<div class="kvmeta-tag"><b>${esc(k)}</b><span>${esc(v)}</span></div>`).join('')}</div>`:'<div class="faint mono">no labels</div>'}
+    </section>
+    <section class="kvmeta-section"><div class="kvmeta-heading">Containers · image · environment</div>
+      ${loading?'<div class="empty" style="padding:24px"><span class="spin"></span> loading pod details…</div>':containers||'<div class="faint mono">no containers</div>'}
+    </section>`;
+}
+async function openPodDetail(ns,pod){
+  const p=CL.items.find(x=>x.name===pod&&x.namespace===ns)||{name:pod,namespace:ns,labels:{},restarts:0};
+  const cluster=CL.name;
+  PDD={cluster,ns,pod,base:p,data:null,lastFocus:document.activeElement};
+  $('#podDetailOverlay').classList.add('show'); $('#podDetailOverlay').setAttribute('aria-hidden','false');
+  $('#podDetailDrawer').classList.add('open'); $('#podDetailDrawer').setAttribute('aria-hidden','false');
+  const ingressLoading=!CL.ingressMapByCluster[cluster];
+  const vaultLoading=!CL.vaultMapByCluster[cluster];
+  renderPodDetail(p,{}, {loading:true,ingressLoading,vaultLoading}); setTimeout(()=>$('#podDetailClose').focus(),0);
+  let r;
+  try{ [r]=await Promise.all([
+    api(`/api/aks/${encodeURIComponent(cluster)}/${encodeURIComponent(ns)}/pods/${encodeURIComponent(pod)}/detail`),
+    ensurePodIngressMap(cluster),
+    ensurePodVaultMap(cluster),
+  ]); }catch(e){ r={ok:false,error:e.message||'Request failed'}; }
+  if(PDD.cluster!==cluster||PDD.ns!==ns||PDD.pod!==pod)return;
+  PDD.data=r.ok?r.data:null;
+  renderPodDetail(p,r.ok?r.data:{},{error:r.ok?'':r.error||'Request failed'});
+}
+function closePodDetails(){
+  if(!PDD.pod)return;
+  $('#podDetailOverlay').classList.remove('show'); $('#podDetailOverlay').setAttribute('aria-hidden','true');
+  $('#podDetailDrawer').classList.remove('open'); $('#podDetailDrawer').setAttribute('aria-hidden','true');
+  const focus=PDD.lastFocus; PDD={cluster:'',ns:'',pod:'',base:null,data:null,lastFocus:null}; if(focus&&focus.focus)focus.focus();
 }
 function showLogs(ns,pod){
   const p = CL.items.find(x=>x.name===pod&&x.namespace===ns) || {name:pod, containers:[]};
@@ -2026,10 +2145,16 @@ document.querySelectorAll('nav button').forEach(b=>b.onclick=()=>navigate(b.data
 $('#refresh').onclick=doRefresh;
 $('#acctBtn').onclick=()=>navigate('settings');
 $('#cmdkBtn').onclick=openCmdk;
+$('#kvMetaOverlay').onclick=closeVaultDetails;
+$('#kvMetaClose').onclick=closeVaultDetails;
+$('#podDetailOverlay').onclick=closePodDetails;
+$('#podDetailClose').onclick=closePodDetails;
 $('#search').oninput=e=>{ STATE.q=e.target.value; if(STATE.route!=='vaults'){ navigate('vaults'); } else { renderVaultRows(); } };
 $('#cmdkIn').oninput=e=>renderCmdk(e.target.value);
 $('#cmdkOv').onclick=e=>{ if(e.target===$('#cmdkOv')) closeCmdk(); };
 document.addEventListener('keydown',e=>{
+  if(VMD.name){ if(e.key==='Escape')closeVaultDetails(); return; }
+  if(PDD.pod){ if(e.key==='Escape')closePodDetails(); return; }
   if((e.metaKey||e.ctrlKey) && e.key.toLowerCase()==='k'){ e.preventDefault(); CMDK.open?closeCmdk():openCmdk(); return; }
   if(!CMDK.open){ if(e.key==='Escape' && STATE.route==='vault'){ navigate('vaults'); } return; }
   if(e.key==='Escape'){ closeCmdk(); }

package/public/styles.css

@@ -342,6 +342,46 @@
   .tagchip{font-family:var(--mono);font-size:10px;color:var(--muted);background:rgba(255,255,255,.04);
            border:1px solid var(--line);border-radius:5px;padding:1px 7px;white-space:nowrap}
   .tagchip b{color:var(--text);font-weight:500}
+  .tagdetails{display:inline-flex;align-items:center;gap:7px}
+  .tagdetails .n{font-family:var(--mono);font-size:9.5px;color:var(--azure);background:var(--azuredim);
+                 border-radius:4px;padding:0 5px}
+
+  /* ---------- Key Vault metadata drawer ---------- */
+  .kvmeta-overlay{position:fixed;inset:0;z-index:75;background:rgba(5,8,14,.65);backdrop-filter:blur(2px);
+                  opacity:0;pointer-events:none;transition:opacity .2s}
+  .kvmeta-overlay.show{opacity:1;pointer-events:auto}
+  .kvmeta-drawer{position:fixed;z-index:80;top:0;right:0;width:min(600px,94vw);height:100vh;
+                 display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--line);
+                 box-shadow:-30px 0 80px -30px rgba(0,0,0,.9);transform:translateX(100%);
+                 transition:transform .24s cubic-bezier(.2,.7,.2,1)}
+  .kvmeta-drawer.open{transform:translateX(0)}
+  .kvmeta-drawer header{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;
+                        align-items:flex-start;justify-content:space-between;gap:16px}
+  .kvmeta-drawer .dt{font-family:var(--mono);font-size:17px;font-weight:600;margin-top:4px;word-break:break-all}
+  .kvmeta-body{padding:20px 22px 30px;overflow:auto}
+  .kvmeta-section{margin-bottom:24px}
+  .kvmeta-section:last-child{margin-bottom:0}
+  .kvmeta-heading{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
+                  color:var(--faint);margin-bottom:8px}
+  .kvmeta-list{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
+  .kvmeta-row{display:grid;grid-template-columns:160px minmax(0,1fr);gap:14px;padding:9px 11px;
+              border-bottom:1px solid var(--line2);font-size:12px}
+  .kvmeta-row:last-child{border-bottom:0}
+  .kvmeta-key{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
+  .kvmeta-value{color:var(--text);overflow-wrap:anywhere;white-space:normal}
+  .kvmeta-tags{display:grid;gap:7px}
+  .kvmeta-tag{display:grid;grid-template-columns:minmax(130px,220px) minmax(0,1fr);gap:12px;
+              padding:9px 11px;background:var(--panel2);border:1px solid var(--line);border-radius:7px;
+              font-family:var(--mono);font-size:11px}
+  .kvmeta-tag b{font-weight:500;color:var(--text);overflow-wrap:anywhere}
+  .kvmeta-tag span{color:var(--muted);overflow-wrap:anywhere}
+  .kvmeta-actions{display:flex;gap:8px;align-items:center;margin-bottom:20px}
+  .poddetail-drawer{width:min(860px,96vw)}
+  .poddetail-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
+  .poddetail-actions .push{margin-left:auto}
+  .poddetail-ingress{padding:15px 16px;margin-bottom:10px}
+  .poddetail-ingress:last-child{margin-bottom:0}
+  @media (max-width:600px){.kvmeta-row,.kvmeta-tag{grid-template-columns:1fr;gap:4px}}
   .kvchip{font-family:var(--mono);font-size:10.5px;color:var(--azure);background:var(--azuredim);
           border:1px solid rgba(91,157,255,.35);border-radius:5px;padding:2px 8px;white-space:nowrap;cursor:pointer}
   .kvchip:hover{border-color:var(--azure);background:rgba(91,157,255,.2)}
@@ -401,6 +441,8 @@
   .cmkey .nm{font-size:12.5px}
   .ell{display:inline-block;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
   .ell.ns{max-width:200px}
+  th.pod-build,td.pod-build{width:80px;max-width:80px}
+  .pod-build .ell{max-width:80px}
   .termhost{height:calc(100vh - 290px);min-height:340px;background:#070A11;border:1px solid var(--line);
             border-radius:var(--r-sm);padding:8px 4px 8px 10px;overflow:hidden}
   .termhost .xterm{height:100%}

package/server.js

@@ -460,6 +460,36 @@ app.get('/api/vaults', async (req, res) => {
   }
 });
 
+// Full read-only management metadata for the inventory details drawer.
+app.get('/api/vaults/:name/metadata', (req, res) => {
+  const { name } = req.params;
+  if (!isValidName(name)) return res.status(400).json({ ok: false, error: 'Invalid vault name' });
+  send(res, (async () => {
+    const v = await findVaultMeta(name);
+    if (!v) throw Object.assign(new Error('Vault not found in inventory — try Refresh first'), { status: 404, notFound: true });
+    const url = `/subscriptions/${v.subscriptionId}/resourceGroups/${v.resourceGroup}` +
+                `/providers/Microsoft.KeyVault/vaults/${name}?api-version=2023-07-01`;
+    const out = await armFetch(url, { sub: v.subscriptionId });
+    const p = out.properties || {}, acl = p.networkAcls || {};
+    return {
+      id: out.id || null, name: out.name || name, resourceGroup: v.resourceGroup,
+      subscriptionId: v.subscriptionId, location: out.location || v.location,
+      sku: (p.sku && p.sku.name) || v.sku || null, tenantId: p.tenantId || v.tenantId || null,
+      uri: p.vaultUri || v.uri || null, rbacEnabled: p.enableRbacAuthorization === true,
+      provisioningState: p.provisioningState || null,
+      softDeleteEnabled: p.enableSoftDelete !== false,
+      softDeleteRetentionDays: p.softDeleteRetentionInDays ?? null,
+      purgeProtectionEnabled: p.enablePurgeProtection === true,
+      publicNetworkAccess: p.publicNetworkAccess || null,
+      networkDefaultAction: acl.defaultAction || null, networkBypass: acl.bypass || null,
+      ipRuleCount: Array.isArray(acl.ipRules) ? acl.ipRules.length : 0,
+      vnetRuleCount: Array.isArray(acl.virtualNetworkRules) ? acl.virtualNetworkRules.length : 0,
+      privateEndpointCount: Array.isArray(p.privateEndpointConnections) ? p.privateEndpointConnections.length : 0,
+      account: v.account || null, tags: out.tags || v.tags || {},
+    };
+  })());
+});
+
 // Find a vault's management-plane coordinates (sub + rg) from the cached inventory.
 async function findVaultMeta(name) {
   const vaults = await listVaultsRaw();