akv-manager 0.1.1 → 0.2.0

package/public/index.html

@@ -72,6 +72,9 @@
       <button data-view="clusters">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path d="M12 2l8 4.5v9L12 20l-8-4.5v-9L12 2z"/><path d="M12 7l4 2.2v4.6L12 16l-4-2.2V9.2L12 7z"/></svg>
         Clusters</button>
+      <button data-view="projects">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/></svg>
+        Projects</button>
     </nav>
 
     <div class="navlabel" id="pinLabel">Pinned</div>
@@ -126,7 +129,13 @@
 const $ = s => document.querySelector(s);
 const esc = s => String(s==null?'':s).replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
 const api = async (p, opts) => { const r = await fetch(p, opts); return r.json(); };
-let STATE = { vaults: [], subs: [], account: null, env: 'all', q: '', sort: 'name', dir: 1,
+const extractFirewallIp = (txt) => {
+  const m = /Client address:\s*([0-9]{1,3}(?:\.[0-9]{1,3}){3})/i.exec(String(txt||''));
+  return m ? m[1] : '';
+};
+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: {} };
 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; }
@@ -198,6 +207,7 @@ function serviceOf(rg){ return (rg||'').replace(/^rg[-_]?/i,'').replace(/[-_]?\d
 
 // ---------- bootstrap ----------
 async function boot(){
+  loadProjects();
   const cfg = await api('/api/config'); if(cfg.ok){ CFG = {...CFG, ...cfg.data};
     if(CFG.title){ document.title = CFG.title; const wm=document.querySelector('.brand .wm'); if(wm) wm.firstChild.textContent = CFG.title; } }
   $('#ver').textContent = 'akv-manager v' + (CFG.version || '?');
@@ -211,16 +221,36 @@ async function boot(){
     return;
   }
   STATE.account = acc.data;
-  $('#acctDot').style.background='var(--ok)';
-  $('#acctUser').textContent = acc.data.user.name;
-  $('#acctSub').textContent = acc.data.name;
-  banner('');
+  updateAcctButton();
+  await loadAccounts();
+  // Identity resolves even when the token is expired — so the app shell loads and the
+  // account switcher (Settings) stays reachable instead of dead-ending on a login wall.
+  if(acc.data.needLogin){
+    banner(`Session for <b>${esc(acc.data.user.name)}</b> has expired. <a href="#/settings">Switch account</a> or run <code>az login</code>, then press Refresh.`);
+  } else banner('');
   await loadSubs();
   await loadVaults();
   renderSidebar();
   router();
-  kickExpiryScan();   // warm the dashboard's lifecycle numbers in the background
-  registerSessionClusters().then(loadClustersCache); // register pasted clusters, then warm ⌘K
+  if(!acc.data.needLogin){
+    kickExpiryScan();   // warm the dashboard's lifecycle numbers in the background
+    registerSessionClusters().then(loadClustersCache); // register pasted clusters, then warm ⌘K
+  }
+}
+
+// Sidebar identity chip: name, active subscription, and a dot that goes amber when the
+// current account's session has expired (so the user knows to switch or re-login).
+function updateAcctButton(){
+  const a = STATE.account; if(!a) return;
+  $('#acctUser').textContent = a.user.name;
+  $('#acctSub').textContent = a.name || '';
+  $('#acctDot').style.background = a.needLogin ? 'var(--warn)' : 'var(--ok)';
+  $('#acctBtn').title = a.needLogin ? 'Session expired — click to switch account or re-login' : ('Signed in as ' + a.user.name);
+}
+
+async function loadAccounts(){
+  const r = await api('/api/accounts');
+  STATE.accounts = r.ok ? r.data : { users: [], activeSubscription: null };
 }
 
 async function loadSubs(){
@@ -233,6 +263,8 @@ async function loadVaults(refresh){
   const r = await api('/api/vaults'+(refresh?'?refresh=1':''));
   if(!r.ok){ STATE.vaults=[]; return r; }
   STATE.vaults = r.data.map(v => ({...v, env: vaultEnv(v), service: vaultService(v)}));
+  STATE.vaultWarnings = r.warnings || [];
+  STATE.vaultsAggregate = !!r.aggregate;
   return r;
 }
 
@@ -246,15 +278,16 @@ const META = {
   vaults:['Inventory','Key Vaults','Every readable vault across your subscriptions. Filter by environment and tags; open one to manage it.'],
   expiry:['Lifecycle','Expiring soon','Secrets and certificates that are expired or approaching expiry across every vault you can read.'],
   clusters:['Kubernetes','Clusters','Read-only monitoring of your AKS clusters — browse pods, read logs and configmaps. Configured locally; runs as your az identity.'],
+  projects:['Workspace','Projects','Group workloads and key vaults into your own projects and environments. Stored in your browser; import/export as JSON to share.'],
   settings:['Account','Account & subscriptions','Your Azure identity and the subscription the console is pointed at.'],
 };
 let mountedVault = null;
 function setHead(view){
-  const detail = view==='vault' || view==='cluster';   // detail pages carry their own breadcrumb
+  const detail = view==='vault' || view==='cluster' || view==='project';   // detail pages carry their own breadcrumb
   $('#headblock').style.display = detail ? 'none' : '';
   $('#search').classList.toggle('hide', view!=='vaults' && view!=='dashboard' && view!=='expiry' && view!=='settings');
   if(!detail && META[view]){ $('#eyebrow').textContent=META[view][0]; $('#title').textContent=META[view][1]; $('#subtitle').textContent=META[view][2]; }
-  const navActive = view==='vault'?'vaults' : view==='cluster'?'clusters' : view;
+  const navActive = view==='vault'?'vaults' : view==='cluster'?'clusters' : view==='project'?'projects' : view;
   document.querySelectorAll('nav button').forEach(b=>b.classList.toggle('active', b.dataset.view===navActive));
 }
 function router(){
@@ -269,6 +302,8 @@ function router(){
   else if(route==='expiry'){ setHead('expiry'); viewExpiry(); }
   else if(route==='clusters'){ setHead('clusters'); viewClusters(); }
   else if(route==='cluster'){ setHead('cluster'); viewCluster(parts[1], parts[2], parts[3]||'pods'); }
+  else if(route==='projects'){ setHead('projects'); viewProjects(); }
+  else if(route==='project'){ setHead('project'); viewProject(parts[1]); }
   else if(route==='settings'){ setHead('settings'); viewSettings(); }
   else { setHead('dashboard'); viewDashboard(); }
   renderSidebar();
@@ -397,7 +432,12 @@ function viewVaults(){
         <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 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">
+      <div><b>Partial results.</b> Couldn't load ${warns.map(w=>esc(w.user)).join(', ')}${warns.some(w=>w.needLogin)?' — session expired. Run <code>az login</code> and press Refresh.':'.'}</div></div>` : '';
   $('#route').innerHTML = `
+    ${warnBar}
     <div class="chips">${chips}</div>
     ${facets?`<div class="facets">${facets}${anyFacet?`<button class="facetclear" onclick="clearFacets()">clear filters</button>`:''}</div>`:''}
     <div class="panel"><div class="scroll"><table>
@@ -405,7 +445,7 @@ function viewVaults(){
         <th data-sort="pin" style="width:30px"></th>
         <th data-sort="name">Vault</th><th data-sort="env">Env</th>
         <th data-sort="service">Service</th><th>Tags</th><th data-sort="resourceGroup">Resource Group</th>
-        <th data-sort="sku">SKU</th><th>Auth</th><th class="right">Actions</th>
+        <th data-sort="sku">SKU</th><th>Auth</th>${agg?'<th>Account</th>':''}<th class="right">Actions</th>
       </tr></thead><tbody id="vaultsBody"></tbody>
     </table></div></div>
     <div class="tablenote" id="vaultCount"></div>`;
@@ -417,8 +457,9 @@ function setFacet(k,val){ if(val) STATE.facets[k]=val; else delete STATE.facets[
 function clearFacets(){ STATE.facets={}; viewVaults(); }
 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="9" class="empty">No vaults match your filter.</td></tr>'; return; }
+  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('');
@@ -432,6 +473,7 @@ function renderVaultRows(){
     <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>
+    ${agg?`<td class="mono muted" title="tenant ${esc(v.tenantId||'')}">${esc(v.account||'—')}</td>`:''}
     <td class="right">
       <button class="iconbtn" onclick="openVault('${esc(v.name)}')">Open</button>
       <button class="iconbtn" onclick="copy('az keyvault secret list --vault-name ${esc(v.name)} -o table')">⧉</button>
@@ -442,13 +484,21 @@ function renderVaultRows(){
 let DRW = { vault:'', kind:'secrets', items:[], filter:'', sel:new Set() };
 function openVault(name){ pushRecent(name); navigate('vault/'+encodeURIComponent(name)); }
 const KIND_TABS = [['secrets','Secrets'],['keys','Keys'],['certificates','Certificates'],['tags','Tags']];
+const fwIpKey = (vault) => `akv.fwAllowedIp.${String(vault||'').toLowerCase()}`;
+function fwIpGet(vault){ try{ return sessionStorage.getItem(fwIpKey(vault)) || ''; } catch { return ''; } }
+function fwIpSet(vault, ip){
+  try {
+    if(ip) sessionStorage.setItem(fwIpKey(vault), ip);
+    else sessionStorage.removeItem(fwIpKey(vault));
+  } catch { /* ignore */ }
+}
 function viewVault(name, kind){
   const v = findVault(name) || (name?{name, subscriptionId:'', resourceGroup:'', uri:'', enableRbac:'', tags:{}}:null);
   if(!v){ $('#route').innerHTML=`<div class="panel"><div class="empty">No vault specified. <a href="#/vaults">Back to Key Vaults</a></div></div>`; return; }
   STATE.drawerVault=v; STATE.kind=kind;
   if(mountedVault!==name || !document.getElementById('vbody')){
     mountedVault=name;
-    DRW={vault:name, kind, items:[], filter:'', sel:new Set()};
+    DRW={vault:name, kind, items:[], filter:'', sel:new Set(), firewallIp:'', tempAllowedIp:fwIpGet(name)};
     const tabs = KIND_TABS.map(([k,l])=>`<button data-kind="${k}" class="${k===kind?'active':''}" onclick="goKind('${esc(name)}','${k}')">${l}</button>`).join('');
     $('#route').innerHTML = `
       <div class="vhead">
@@ -483,6 +533,7 @@ function renderItemsShell(){
       </div>
       <div class="vtools-row" id="selRow"><label class="selall"><input type="checkbox" id="dSelAll"> select all</label></div>
     </div>
+    <div id="fwCtl"></div>
     <div class="createp hide" id="dCreate"></div>
     <div class="batchbar hide stick" id="dBatch"></div>
     <div class="itemwrap" id="dContent"><div class="empty"><span class="spin"></span></div></div>
@@ -491,6 +542,7 @@ function renderItemsShell(){
   $('#dFilter').oninput=e=>{ DRW.filter=e.target.value; renderDrawerList(); };
   $('#dSelAll').onchange=e=>selectAll(e.target.checked);
   if(isSecrets){ $('#dNew').onclick=()=>openCreate('single'); $('#dNewBatch').onclick=()=>openCreate('batch'); }
+  renderFirewallControl();
   renderCmds(STATE.drawerVault);
   loadKind();
 }
@@ -512,12 +564,17 @@ async function loadKind(){
   if(!r.ok){
     DRW.items=[]; $('#dBatch').classList.add('hide'); if($('#dCount'))$('#dCount').textContent='';
     let why;
-    if(r.firewall) why = `🚫 This vault's firewall is blocking your network — your current IP isn't allowed. Connect to the corporate VPN and retry.<div class="hint" style="margin-top:8px">${esc(r.error||'')}</div>`;
+    if(r.firewall){
+      DRW.firewallIp = extractFirewallIp(r.error||'');
+      const ipText = DRW.firewallIp ? `<div class="hint" style="margin-top:8px">Detected IP: <span class="mono">${esc(DRW.firewallIp)}</span></div>` : '';
+      why = `🚫 This vault's firewall is blocking your network — your current IP isn't allowed.${ipText}<div class="row" style="margin-top:10px;justify-content:center"><button class="btn sm" onclick="allowVaultFirewallIp()">Allow this IP in Key Vault firewall</button></div><div class="hint" style="margin-top:8px">${esc(r.error||'')}</div>`;
+    }
     else if(r.forbidden) why = `🔒 You can see this vault but have no data-plane permission on its ${DRW.kind}.`;
     else why = esc(r.error||'failed');
     $('#dContent').innerHTML = `<div class="empty">${why}</div>`;
     return;
   }
+  DRW.firewallIp = '';
   DRW.items = (r.data||[]).map(item=>({
     name: item.name || (item.id||'').split('/').pop(),
     enabled: item.attributes ? item.attributes.enabled!==false : true,
@@ -526,6 +583,58 @@ async function loadKind(){
   }));
   renderDrawerList();
 }
+
+async function allowVaultFirewallIp(){
+  if(!DRW.vault) return;
+  const body = DRW.firewallIp ? { ip: DRW.firewallIp } : {};
+  const r = await api(`/api/vaults/${DRW.vault}/firewall/allow-ip`, {
+    method: 'POST',
+    headers: {'Content-Type':'application/json'},
+    body: JSON.stringify(body),
+  });
+  if(!r.ok){
+    toast(r.forbidden ? 'No permission to change Key Vault firewall' : (r.error||'failed to allow IP'));
+    return;
+  }
+  DRW.tempAllowedIp = (r.data && r.data.ip) || DRW.firewallIp || '';
+  fwIpSet(DRW.vault, DRW.tempAllowedIp);
+  renderFirewallControl();
+  toast(r.data && r.data.alreadyAllowed ? 'IP is already allowed in firewall' : `IP ${r.data.ip} added to Key Vault firewall`);
+  await loadKind();
+}
+
+function renderFirewallControl(){
+  const box = $('#fwCtl');
+  if(!box) return;
+  const ip = DRW.tempAllowedIp || '';
+  if(!ip){ box.innerHTML = ''; return; }
+  box.innerHTML = `<div class="fwalert"><div><b>Firewall temporariamente liberado:</b> IP <span class="mono">${esc(ip)}</span> foi adicionado neste vault. Remova após concluir o uso.</div><button class="btn sm danger" onclick="removeVaultFirewallIp()">Remover IP do Key Vault</button></div>`;
+}
+
+async function removeVaultFirewallIp(){
+  if(!DRW.vault || !DRW.tempAllowedIp) return;
+  const r = await api(`/api/vaults/${DRW.vault}/firewall/remove-ip`, {
+    method: 'POST',
+    headers: {'Content-Type':'application/json'},
+    body: JSON.stringify({ ip: DRW.tempAllowedIp }),
+  });
+  if(!r.ok){
+    toast(r.forbidden ? 'No permission to remove IP from Key Vault firewall' : (r.error||'failed to remove IP'));
+    return;
+  }
+  const removed = !!(r.data && r.data.removed);
+  if(removed){
+    toast(`IP ${DRW.tempAllowedIp} removed from Key Vault firewall`);
+    DRW.tempAllowedIp = '';
+    fwIpSet(DRW.vault, '');
+    renderFirewallControl();
+    return;
+  }
+  toast('IP was not present in firewall rules');
+  DRW.tempAllowedIp = '';
+  fwIpSet(DRW.vault, '');
+  renderFirewallControl();
+}
 function drawerFiltered(){ const q=DRW.filter.toLowerCase(); return DRW.items.filter(i=>!q||i.name.toLowerCase().includes(q)); }
 function renderDrawerList(){
   const list = drawerFiltered(); const editable = isEditable();
@@ -938,29 +1047,100 @@ function renderHorizon(items){
 // ---------- SETTINGS (account + subscriptions) ----------
 function viewSettings(){
   const counts={}; STATE.vaults.forEach(v=>counts[v.subscriptionId]=(counts[v.subscriptionId]||0)+1);
+  const acct = STATE.account || {};
+  const users = (STATE.accounts && STATE.accounts.users) || [];
+  const totalSubs = users.reduce((n,u)=>n+u.subscriptions.length,0);
+  const expired = !!acct.needLogin;
+
+  // One panel per logged-in identity (az login), listing its subscriptions. Switching
+  // to a subscription re-points the console at that user + tenant — see setSub().
+  const userPanel = u => {
+    const isCurrent = u.subscriptions.some(s=>s.active);
+    const tenant = (u.subscriptions[0]||{}).tenantId || '';
+    return `
+    <div class="panel" style="margin-bottom:16px">
+      <div class="row" style="justify-content:space-between;padding:0 2px 12px">
+        <div class="row" style="gap:9px">
+          <span class="dot" style="background:${isCurrent?'var(--ok)':'var(--faint)'}"></span>
+          <b>${esc(u.user)}</b>
+          ${isCurrent?'<span class="pill rbac">current</span>':''}
+        </div>
+        <span class="mono faint" style="font-size:11px">${u.subscriptions.length} subscription${u.subscriptions.length===1?'':'s'} · tenant ${esc(tenant.slice(0,8))}…</span>
+      </div>
+      <div class="scroll"><table>
+        <thead><tr><th>Subscription</th><th>Env</th><th>State</th><th>Active</th><th class="right">Vaults</th><th>Subscription ID</th><th></th></tr></thead>
+        <tbody>${u.subscriptions.map(s=>{
+          const env = envLabel(s.name);
+          return `<tr>
+            <td><b>${esc(s.name)}</b></td>
+            <td><span class="tag ${envClass(env)}">${esc(env)}</span></td>
+            <td>${esc(s.state)}</td>
+            <td>${s.active?'<span class="pill rbac">active</span>':(s.cliDefault?'<span class="pill policy">cli default</span>':'')}</td>
+            <td class="right mono">${counts[s.id]||''}</td>
+            <td class="mono muted">${esc(s.id)}</td>
+            <td class="right">${s.active?'':`<button class="btn sm ghost" onclick="setSub('${esc(s.id)}')">Switch</button>`}</td>
+          </tr>`;
+        }).join('')}</tbody>
+      </table></div>
+    </div>`;
+  };
+
+  const aggregate = !!acct.aggregate;
+  // "All accounts": merge every logged-in user & tenant into one view. Sits above the
+  // per-user panels; enabling it clears any single-account selection (see setAllAccounts).
+  const allPanel = `
+    <div class="panel" style="margin-bottom:16px;border-color:${aggregate?'var(--azure)':'var(--line)'}">
+      <div class="row" style="justify-content:space-between;padding:2px">
+        <div class="row" style="gap:9px">
+          <span class="dot" style="background:${aggregate?'var(--ok)':'var(--faint)'}"></span>
+          <b>All accounts</b>
+          ${aggregate?'<span class="pill rbac">active</span>':''}
+          <span class="mono faint" style="font-size:11px">merge every user &amp; tenant · ${users.length} user${users.length===1?'':'s'} · ${totalSubs} sub${totalSubs===1?'':'s'}</span>
+        </div>
+        ${aggregate?'':`<button class="btn sm" onclick="setAllAccounts()">Use all accounts</button>`}
+      </div>
+    </div>`;
   $('#route').innerHTML = `
     <div class="cards" style="margin-bottom:24px">
-      ${card('Signed in as', '', STATE.account?STATE.account.user.name:'—','')}
-      ${card('Tenant', (STATE.account&&STATE.account.tenantId||'').slice(0,8)+'…','active directory','')}
-      ${card('Subscriptions', STATE.subs.length, STATE.subs.filter(s=>s.state==='Enabled').length+' enabled','azure')}
+      ${card('Signed in as', '', (acct.user&&acct.user.name)||'—','')}
+      ${card('Tenant', aggregate?'all':((acct.tenantId||'').slice(0,8)+'…'), aggregate?'every tenant':(expired?'session expired':'active directory'),'')}
+      ${card('Accounts', users.length, totalSubs+' subscription'+(totalSubs===1?'':'s'),'azure')}
     </div>
-    <div class="panel"><div class="scroll"><table>
-      <thead><tr><th>Name</th><th>Env</th><th>State</th><th>Active</th><th class="right">Vaults</th><th>Subscription ID</th><th></th></tr></thead>
-      <tbody>${STATE.subs.map(s=>`<tr>
-        <td><b>${esc(s.name)}</b></td>
-        <td><span class="tag ${envClass(SUBMETA[s.id].env)}">${esc(SUBMETA[s.id].env)}</span></td>
-        <td>${esc(s.state)}</td>
-        <td>${s.isDefault?'<span class="pill rbac">active</span>':''}</td>
-        <td class="right mono">${counts[s.id]||0}</td>
-        <td class="mono muted">${esc(s.id)}</td>
-        <td class="right">${s.isDefault?'':`<button class="btn sm ghost" onclick="setSub('${esc(s.id)}')">Switch</button>`}</td>
-      </tr>`).join('')}</tbody>
-    </table></div></div>`;
+    ${expired?`<div style="margin-bottom:18px;padding:11px 14px;border-radius:8px;background:rgba(242,181,61,.12);border:1px solid rgba(242,181,61,.4);color:#f4d089">
+      This account's session has expired. Switch to another account below, or run <code>az login</code> and press Refresh.</div>`:''}
+    <div class="hint" style="margin:0 2px 12px">Multiple <code>az login</code> identities? Switch the active user/subscription — or use <b>All accounts</b> to see every tenant at once. Everything (vaults, clusters) re-loads as the chosen scope.</div>
+    ${allPanel}
+    ${users.length?users.map(userPanel).join(''):'<div class="panel"><div class="empty">No Azure accounts found. Run <code>az login</code>, then Refresh.</div></div>'}`;
+}
+// Reload the app under a new identity scope, preserving the toast/banner/refresh flow.
+async function applyScope(r, okMsg){
+  STATE.account = r.data;
+  updateAcctButton();
+  await loadAccounts();
+  await loadSubs();
+  await loadVaults(true);   // scope changed → force a fresh inventory
+  renderSidebar();
+  if(r.data.needLogin){
+    banner(`Switched to <b>${esc(r.data.user.name)}</b>, but its session needs re-login. Run <code>${esc(r.data.loginHint||'az login')}</code>, then press Refresh.`);
+    toast('Switched — this account needs re-login');
+  } else {
+    banner('');
+    toast(okMsg);
+    kickExpiryScan();
+  }
+  router();   // re-render the current page with the new scope
+}
+async function setAllAccounts(){
+  toast('Loading all accounts…');
+  const r = await api('/api/subscription/set',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({all:true})});
+  if(!r.ok){ toast(r.error||'failed'); return; }
+  await applyScope(r, 'Now showing all accounts');
 }
 async function setSub(id){
-  toast('Switching subscription…');
+  toast('Switching account…');
   const r = await api('/api/subscription/set',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({subscription:id})});
-  if(r.ok){ STATE.account=r.data; $('#acctSub').textContent=r.data.name; await loadSubs(); refreshCurrent(); toast('Active subscription set'); } else toast(r.error||'failed');
+  if(!r.ok){ toast(r.error||'failed to switch'); return; }
+  await applyScope(r, 'Signed in as '+r.data.user.name);
 }
 
 function card(k,v,sub,mod){
@@ -968,7 +1148,7 @@ function card(k,v,sub,mod){
 }
 
 // ---------- CLUSTERS (AKS — read-only: pods, logs, configmaps) ----------
-let CL = { all:null, name:'', cluster:null, ns:'', kind:'pods', items:[], namespaces:[], logPod:null, filter:'', tier:'all', cm:{} };
+let CL = { all:null, configuredCount:0, name:'', cluster:null, ns:'', kind:'pods', items:[], namespaces:[], logPod:null, filter:'', tier:'all', cm:{}, podsByCluster:{}, cmByCluster:{}, vaultMap:{}, vaultMapByCluster:{}, vaultRestricted:{}, vaultRestrictedByCluster:{}, ingressMap:{}, ingressMapByCluster:{} };
 let mountedCluster = null;
 function age(iso){ if(!iso) return ''; const s=(Date.now()-Date.parse(iso))/1000;
   if(s<3600) return Math.max(1,Math.floor(s/60))+'m'; if(s<86400) return Math.floor(s/3600)+'h'; return Math.floor(s/86400)+'d'; }
@@ -978,7 +1158,7 @@ function clErr(r){
   if(r.forbidden) return `<div class="empty">🔒 Your identity has no Kubernetes-RBAC permission for this on this cluster.<div class="hint" style="margin-top:8px">${esc(r.error||'')}</div></div>`;
   return `<div class="empty">${esc(r.error||'failed')}</div>`;
 }
-async function loadClustersCache(){ const r=await api('/api/aks/clusters'); if(r.ok) CL.all=r.data.clusters||[]; return CL.all; }
+async function loadClustersCache(force){ const r=await api('/api/aks/clusters'+(force?'?refresh=1':'')); if(r.ok){ CL.all=r.data.clusters||[]; CL.configuredCount=r.data.configured; } return CL.all; }
 
 // Clusters the user pasted, kept in this browser. Registered with the local server each
 // load so the data-plane endpoints (which validate the cluster) accept them.
@@ -991,15 +1171,18 @@ async function registerSessionClusters(){
   try{ await api('/api/aks/clusters',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({clusters:arr})}); }catch{}
 }
 
-async function viewClusters(){
+async function viewClusters(force){
+  if(!force && CL.all){ renderClustersPage(); return; }   // reuse cache; refetch only on explicit refresh
   $('#route').innerHTML = `<div class="panel"><div class="empty"><span class="spin"></span> loading clusters…</div></div>`;
-  await registerSessionClusters();
-  const r = await api('/api/aks/clusters');
+  const r = await api('/api/aks/clusters'+(force?'?refresh=1':''));
   if(STATE.route!=='clusters') return;
   if(!r.ok){ $('#route').innerHTML = `<div class="panel">${clErr(r)}</div>`; return; }
   CL.all = r.data.clusters||[];
   CL.configuredCount = r.data.configured;
-  const envs=[...new Set(CL.all.map(c=>c.env).filter(Boolean))].sort();
+  renderClustersPage();
+}
+function renderClustersPage(){
+  const envs=[...new Set((CL.all||[]).map(c=>c.env).filter(Boolean))].sort();
   const envSeg = envs.length>1 ? `<div class="seg" id="clEnvSeg">
     <button data-e="all" class="${CL.clEnv==='all'||!CL.clEnv?'active':''}">All</button>
     ${envs.map(e=>`<button data-e="${esc(e)}" class="${CL.clEnv===e?'active':''}">${esc(e)}</button>`).join('')}</div>` : '';
@@ -1039,14 +1222,14 @@ async function saveClusterList(){
   msg.textContent='saving…';
   const r=await api('/api/aks/clusters',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({clusters:arr})});
   if(!r.ok){ msg.textContent=r.error||'failed'; return; }
-  setLsAks(raw); CL.all=null; toast(`Saved ${r.data.count} cluster${r.data.count!==1?'s':''}`);
-  loadClustersCache(); viewClusters();
+  setLsAks(raw); CL.all=null; CL.podsByCluster={}; CL.cmByCluster={}; CL.vaultMapByCluster={}; CL.ingressMapByCluster={}; toast(`Saved ${r.data.count} cluster${r.data.count!==1?'s':''}`);
+  viewClusters();
 }
 function clearClusterList(){
   if(!confirm('Remove the clusters stored in this browser? (file / env clusters stay.)')) return;
   setLsAks('');
   api('/api/aks/clusters',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({clusters:[]})})
-    .then(()=>{ toast('Cleared stored clusters'); CL.all=null; loadClustersCache(); viewClusters(); });
+    .then(()=>{ toast('Cleared stored clusters'); CL.all=null; viewClusters(); });
 }
 function renderClusterRows(){
   if(!CL.all.length){
@@ -1094,7 +1277,7 @@ function viewCluster(name){
       <div id="clBody"><div class="empty"><span class="spin"></span> loading…</div></div>`;
     $('#clKind').querySelectorAll('button').forEach(b=>b.onclick=()=>{ CL.kind=b.dataset.k;
       $('#clKind').querySelectorAll('button').forEach(x=>x.classList.toggle('active',x===b)); loadClusterContent(); });
-    $('#clRefresh').onclick=()=>{ if(CL.logPod) fetchLogs(); else loadClusterContent(); };
+    $('#clRefresh').onclick=()=>{ if(CL.logPod) fetchLogs(); else loadClusterContent(true); };
     enrichClusterMeta(name);
     loadClusterContent();
   } else {
@@ -1111,9 +1294,9 @@ async function enrichClusterMeta(name){
   if($('#clMeta')) $('#clMeta').innerHTML = `<span class="mono">${esc(c.name)}</span><span class="sep">·</span>`+
     `<span class="mono">${esc(c.resourceGroup||'')}</span>${c.private?'<span class="sep">·</span><span class="pill policy">private · VPN</span>':''}`;
 }
-function loadClusterContent(){
+function loadClusterContent(force){
   CL.logPod=null; CL.termPod=null; CL.filter=''; teardownTerm();
-  $('#clBody').innerHTML='<div class="empty"><span class="spin"></span></div>';
+  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();
 }
 function clFilterBar(placeholder, extra){
@@ -1131,10 +1314,113 @@ const TIER_RE = {
 function podTier(nm){ nm=(nm||'').toLowerCase(); if(TIER_RE.cache.test(nm))return'cache'; if(TIER_RE.fe.test(nm))return'fe'; if(TIER_RE.be.test(nm))return'be'; return'other'; }
 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
+  $('#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.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.
+async function ensurePodIngressMap(name){
+  if(CL.ingressMapByCluster[name]){ CL.ingressMap=CL.ingressMapByCluster[name]; return; }
+  const pods = CL.podsByCluster[name] || CL.items || [];
+  const nss = [...new Set(pods.map(p=>p.namespace).filter(Boolean))];
+  if(!nss.length){ CL.ingressMapByCluster[name]={}; CL.ingressMap={}; return; }
+  const r=await api(`/api/aks/${name}/ingress-map?namespaces=${encodeURIComponent(nss.join(','))}`);
+  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.
+function podMatchedSvcNames(p){
+  const nsm = CL.ingressMap && CL.ingressMap[p.namespace]; if(!nsm) return [];
+  const labels = p.labels || {};
+  return (nsm.services||[]).filter(s=>{ const sel=s.selector||{}; const keys=Object.keys(sel);
+    return keys.length && keys.every(k=>labels[k]===sel[k]); }).map(s=>s.name);
+}
+function podIngresses(p){
+  const nsm = CL.ingressMap && CL.ingressMap[p.namespace]; if(!nsm) return [];
+  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:{}};
+  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; }
+  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=>{
+    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">
+      <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>
+      </div>
+      ${line('class', i.className?`<span class="tagchip">${esc(i.className)}</span>`:'')}
+      ${line('TLS', tls)}
+      ${line('cert-manager', cm)}
+      ${line('HTTPS', i.sslRedirect?`forced redirect${i.allowHttp!=null?` · allow-http ${esc(i.allowHttp)}`:''}`:'')}
+      ${line('CORS', cors)}
+      ${line('max body', i.proxyBodySize?esc(i.proxyBodySize):'')}
+      <div class="secthead" style="margin-top:12px">Routes</div>
+      <div class="scroll"><table><thead><tr><th>Host</th><th>Path</th><th>Type</th><th>Backend service:port</th></tr></thead><tbody>${routes}</tbody></table></div>
+    </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.
+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 || [];
+  const nss = [...new Set(pods.map(p=>p.namespace).filter(Boolean))];
+  if(!nss.length){ CL.vaultMapByCluster[name]={}; CL.vaultMap={}; return; }
+  const r=await api(`/api/aks/${name}/secret-vaults?namespaces=${encodeURIComponent(nss.join(','))}`);
+  CL.vaultMapByCluster[name] = (r.ok && r.data && r.data.byNamespace) ? r.data.byNamespace : {};
+  CL.vaultRestrictedByCluster[name] = (r.ok && r.data && r.data.restricted) ? r.data.restricted : {};
+  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.
+// 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>`;
+  }).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>`;
+}
+function renderPodsShell(){
+  if(CL.pendingFilter){ CL.filter=CL.pendingFilter; CL.pendingFilter=null; }   // from a project "Open →"
   const tier = `<div class="seg" id="clTier">
     <button data-t="all" class="${CL.tier==='all'?'active':''}">All</button>
     <button data-t="be" class="${CL.tier==='be'?'active':''}">Backend</button>
@@ -1158,7 +1444,7 @@ 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 class="right">Actions</th></tr></thead>
+    <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>
     <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>
@@ -1167,10 +1453,11 @@ function renderPodRows(){
       <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" onclick="openPodVaults('${esc(p.namespace)}','${esc(p.name)}')">Vaults</button></td>
+        <button class="iconbtn" onclick="openTerminal('${esc(p.namespace)}','${esc(p.name)}')">Terminal</button></td>
     </tr>`).join('')}</tbody></table></div></div>`;
 }
 async function openPodDetail(ns,pod){
@@ -1253,10 +1540,15 @@ function downloadLog(){
 }
 async function loadConfigMaps(){
   const name=CL.name;
+  if(CL.cmByCluster[name]){ CL.items=CL.cmByCluster[name]; renderCmShell(); return; }   // cached
+  $('#clBody').innerHTML='<div class="empty"><span class="spin"></span></div>';
   const r=await api(`/api/aks/${name}/configmaps`);
   if(STATE.route!=='cluster'||CL.name!==name||CL.kind!=='configmaps'||CL.logPod||CL.termPod) return;
   if(!r.ok){ $('#clBody').innerHTML=clErr(r); return; }
-  CL.items=r.data||[];
+  CL.items=r.data||[]; CL.cmByCluster[name]=CL.items;
+  renderCmShell();
+}
+function renderCmShell(){
   $('#clBody').innerHTML = clFilterBar('filter configmaps by name or namespace…');
   $('#clFilter').oninput=e=>{ CL.filter=e.target.value; renderCmRows(); };
   renderCmRows();
@@ -1293,6 +1585,190 @@ async function viewCm(ns,name){
 }
 function copyCm(ckey,k){ const d=CL.cm[ckey]||{}; copy(d[k]!=null?String(d[k]):''); }
 
+// ---------- PROJECTS (user-defined grouping: project → envs → workloads + key vaults) ----------
+// Stored entirely in the browser (localStorage). Import/export as JSON to share.
+// Shape: { version:1, projects:[ { id, name, envs:[ { name, workloads:[{cluster,namespace,name,base,label}], vaults:[{name,label}] } ] } ] }
+let PROJ = { data:{ version:1, projects:[] } };
+function loadProjects(){ try{ const t=localStorage.getItem('akv.projects'); const d=t?JSON.parse(t):null; PROJ.data=(d&&Array.isArray(d.projects))?d:{version:1,projects:[]}; }catch{ PROJ.data={version:1,projects:[]}; } }
+function saveProjects(){ try{ localStorage.setItem('akv.projects', JSON.stringify(PROJ.data)); }catch{} }
+function genId(){ return 'p'+Math.random().toString(36).slice(2,9); }
+const projById = id => PROJ.data.projects.find(p=>p.id===id);
+function podBase(n){ return (n||'').replace(/-[a-z0-9]{8,10}-[a-z0-9]{4,5}$/,'').replace(/-[0-9]+$/,''); }
+function downloadJson(fn,obj){ const blob=new Blob([JSON.stringify(obj,null,2)],{type:'application/json'}); const url=URL.createObjectURL(blob); const a=document.createElement('a'); a.href=url; a.download=fn; a.click(); URL.revokeObjectURL(url); }
+
+function viewProjects(){
+  const ps=PROJ.data.projects;
+  $('#route').innerHTML = `
+    <div class="cmctl" style="margin-bottom:14px">
+      <button class="btn sm" onclick="newProject()">＋ New project</button>
+      <button class="btn ghost sm" onclick="openImport()">⬇ Import</button>
+      <button class="btn ghost sm" onclick="exportAll()">⬆ Export all</button>
+      <span class="faint mono" style="margin-left:auto">${ps.length} project${ps.length!==1?'s':''}</span></div>
+    <div class="createp hide" id="projIo"></div>
+    ${ps.length ? `<div class="vtiles">${ps.map(p=>{
+        const w=p.envs.reduce((a,e)=>a+(e.workloads||[]).length,0), v=p.envs.reduce((a,e)=>a+(e.vaults||[]).length,0);
+        return `<div class="vtile" onclick="navigate('project/${esc(p.id)}')">
+          <span class="nm">${esc(p.name)}</span>
+          <span class="rg mono">${p.envs.length} env${p.envs.length!==1?'s':''} · ${w} workload${w!==1?'s':''} · ${v} vault${v!==1?'s':''}</span></div>`;
+      }).join('')}</div>`
+    : `<div class="panel"><div class="empty" style="padding:42px;line-height:1.7">No projects yet.<br>
+        <span class="faint mono" style="font-size:12px">Create one to group workloads and key vaults by environment — or Import a shared config.</span></div></div>`}`;
+}
+function newProject(){ const name=prompt('Project name (e.g. Marketplace)'); if(!name||!name.trim()) return;
+  const p={ id:genId(), name:name.trim(), envs:[] }; PROJ.data.projects.push(p); saveProjects(); navigate('project/'+p.id); }
+function exportAll(){ downloadJson('akv-projects.json', PROJ.data); }
+function exportProject(id){ const p=projById(id); if(!p)return; downloadJson('akv-project-'+p.name.replace(/\W+/g,'-').toLowerCase()+'.json',{version:1,projects:[p]}); }
+function openImport(){
+  const el=$('#projIo');
+  el.innerHTML=`<h4>Import projects</h4>
+    <div class="sub" style="margin-bottom:8px">Paste a projects JSON exported from here. Imported projects are added; a project with the same id is replaced.</div>
+    <div class="fld" style="align-items:flex-start"><textarea id="impJson" spellcheck="false" placeholder='{ "version":1, "projects":[ … ] }' style="min-height:180px"></textarea></div>
+    <div class="actions"><button class="btn sm" onclick="doImport()">Import</button>
+      <button class="btn sm ghost" onclick="document.getElementById('projIo').classList.add('hide')">Cancel</button>
+      <span class="hint" id="impMsg"></span></div>`;
+  el.classList.remove('hide');
+}
+function normEnv(e){ return { name:String((e&&e.name)||'env'),
+  workloads:Array.isArray(e&&e.workloads)?e.workloads.filter(w=>w&&w.cluster&&w.namespace&&w.name).map(w=>({cluster:String(w.cluster),namespace:String(w.namespace),name:String(w.name),base:String(w.base||podBase(w.name)),label:String(w.label||'')})):[],
+  vaults:Array.isArray(e&&e.vaults)?e.vaults.filter(v=>v&&v.name).map(v=>({name:String(v.name),label:String(v.label||'')})):[] }; }
+function doImport(){
+  const msg=$('#impMsg'); let d;
+  try{ d=JSON.parse($('#impJson').value); }catch(e){ msg.textContent='Invalid JSON: '+e.message; return; }
+  const incoming = Array.isArray(d)?d:(d&&Array.isArray(d.projects)?d.projects:null);
+  if(!incoming){ msg.textContent='Expected { projects:[…] } or an array of projects'; return; }
+  let n=0;
+  for(const p of incoming){ if(!p||!p.name) continue;
+    const np={ id:p.id||genId(), name:String(p.name), envs:Array.isArray(p.envs)?p.envs.map(normEnv):[] };
+    const i=PROJ.data.projects.findIndex(x=>x.id===np.id);
+    if(i>=0) PROJ.data.projects[i]=np; else PROJ.data.projects.push(np); n++; }
+  saveProjects(); toast(`Imported ${n} project${n!==1?'s':''}`); viewProjects();
+}
+
+function viewProject(id){
+  const p=projById(id);
+  if(!p){ $('#route').innerHTML=`<div class="panel"><div class="empty">Project not found. <a href="#/projects">Back to Projects</a></div></div>`; return; }
+  $('#route').innerHTML = `
+    <div class="vhead">
+      <div class="crumb"><a href="#/projects">Projects</a><span class="sep">/</span><span class="here">${esc(p.name)}</span></div>
+      <div class="vmeta">
+        <button class="iconbtn" onclick="renameProject('${esc(id)}')">Rename</button>
+        <button class="iconbtn" onclick="exportProject('${esc(id)}')">Export</button>
+        <button class="iconbtn" onclick="deleteProject('${esc(id)}')">Delete</button></div>
+    </div>
+    <div class="row" style="margin-bottom:14px"><button class="btn sm" onclick="addEnv('${esc(id)}')">＋ Add environment</button></div>
+    <div id="projBody"></div>`;
+  renderProjectBody(id);
+}
+function renderProjectBody(id){
+  const p=projById(id); if(!p) return;
+  if(!p.envs.length){ $('#projBody').innerHTML=`<div class="panel"><div class="empty" style="padding:34px">No environments yet — add one (e.g. dev, test, qa, prod).</div></div>`; return; }
+  $('#projBody').innerHTML = p.envs.map((e,ei)=>`
+    <div class="panel" style="margin-bottom:16px;padding:16px 18px">
+      <div class="secthead2" style="margin-bottom:12px">
+        <span class="tag ${envClass(e.name)}" style="font-size:11px">${esc(e.name)}</span>
+        <span class="row"><button class="iconbtn" onclick="renameEnv('${esc(id)}',${ei})">Rename</button>
+          <button class="iconbtn" onclick="deleteEnv('${esc(id)}',${ei})">Delete</button></span>
+      </div>
+      <div class="eyebrow" style="margin-bottom:8px">Workloads</div>
+      ${renderEnvWorkloads(id,ei,e)}
+      <button class="btn ghost sm" style="margin-top:8px" onclick="addWorkload('${esc(id)}',${ei})">＋ Link workload</button>
+      <div class="eyebrow" style="margin:18px 0 8px">Key Vaults</div>
+      ${renderEnvVaults(id,ei,e)}
+      <button class="btn ghost sm" style="margin-top:8px" onclick="addVault('${esc(id)}',${ei})">＋ Link Key Vault</button>
+      <div class="createp hide" id="picker-${esc(id)}-${ei}"></div>
+    </div>`).join('');
+}
+function renderEnvWorkloads(id,ei,e){
+  const w=e.workloads||[];
+  if(!w.length) return '<div class="faint mono" style="font-size:12px">none linked</div>';
+  return `<div class="vtiles">${w.map((x,xi)=>`
+    <div class="vtile" style="cursor:default">
+      <span class="nm">${esc(x.label||x.base||x.name)}</span>
+      <span class="rg mono">${esc(x.cluster)} · ${esc(x.namespace)}</span>
+      <button class="iconbtn" onclick="openWorkload('${esc(id)}',${ei},${xi})">Open →</button>
+      <button class="iconbtn" onclick="rmItem('${esc(id)}',${ei},'workloads',${xi})">✕</button>
+    </div>`).join('')}</div>`;
+}
+function renderEnvVaults(id,ei,e){
+  const v=e.vaults||[];
+  if(!v.length) return '<div class="faint mono" style="font-size:12px">none linked</div>';
+  return `<div class="vtiles">${v.map((x,xi)=>{ const known=findVault(x.name);
+    return `<div class="vtile" style="cursor:default">
+      <span class="nm mono">${esc(x.name)}</span>
+      <span class="rg mono">${esc(x.label||'')}</span>
+      ${known?`<button class="iconbtn" onclick="openVault('${esc(known.name)}')">Open →</button>`:'<span class="faint mono" style="font-size:11px">not visible</span>'}
+      <button class="iconbtn" onclick="rmItem('${esc(id)}',${ei},'vaults',${xi})">✕</button>
+    </div>`; }).join('')}</div>`;
+}
+function openWorkload(id,ei,xi){ const x=projById(id).envs[ei].workloads[xi]; CL.pendingFilter=x.base||x.name; openCluster(x.cluster); }
+function rmItem(id,ei,key,xi){ projById(id).envs[ei][key].splice(xi,1); saveProjects(); renderProjectBody(id); }
+function addEnv(id){ const name=prompt('Environment name (e.g. dev)'); if(!name||!name.trim())return;
+  projById(id).envs.push({name:name.trim(), workloads:[], vaults:[]}); saveProjects(); renderProjectBody(id); }
+function renameEnv(id,ei){ const e=projById(id).envs[ei]; const name=prompt('Rename environment', e.name); if(name==null)return; e.name=name.trim()||e.name; saveProjects(); renderProjectBody(id); }
+function deleteEnv(id,ei){ const p=projById(id); if(!confirm('Delete environment "'+p.envs[ei].name+'"?'))return; p.envs.splice(ei,1); saveProjects(); renderProjectBody(id); }
+function renameProject(id){ const p=projById(id); const name=prompt('Rename project', p.name); if(name==null)return; p.name=name.trim()||p.name; saveProjects(); viewProject(id); }
+function deleteProject(id){ const p=projById(id); if(!confirm('Delete project "'+p.name+'"? This cannot be undone.'))return; PROJ.data.projects=PROJ.data.projects.filter(x=>x.id!==id); saveProjects(); navigate('projects'); }
+function closePicker(id,ei){ const el=document.getElementById('picker-'+id+'-'+ei); if(el){ el.classList.add('hide'); el.innerHTML=''; } }
+
+function addWorkload(id,ei){
+  const el=document.getElementById('picker-'+id+'-'+ei);
+  const clusters=CL.all||[];
+  if(!clusters.length){ el.innerHTML=`<div class="hint">No clusters available — add them under <a href="#/clusters">Clusters</a> first.</div>`; el.classList.remove('hide'); return; }
+  el.innerHTML = `<h4>Link a workload (pod)</h4>
+    <div class="fld"><label>Cluster</label>
+      <select class="facetsel" id="pkC" style="max-width:240px">${clusters.map(c=>`<option value="${esc(c.name)}">${esc(c.label||c.name)}</option>`).join('')}</select>
+      <input class="search" id="pkQ" placeholder="search pods by name or namespace…" style="flex:1;min-width:0"></div>
+    <div id="pkResults" class="itemwrap" style="max-height:300px;overflow:auto"></div>
+    <div class="actions"><button class="btn sm ghost" onclick="closePicker('${esc(id)}',${ei})">Close</button><span class="hint" id="pkMsg"></span></div>`;
+  el.classList.remove('hide');
+  const run=()=>pkSearchPods(id,ei); $('#pkC').onchange=run; $('#pkQ').oninput=run; run();
+}
+async function pkSearchPods(id,ei){
+  const cluster=$('#pkC').value, q=$('#pkQ').value.toLowerCase(), box=$('#pkResults');
+  let pods=CL.podsByCluster[cluster];
+  if(!pods){ box.innerHTML='<div class="empty"><span class="spin"></span> loading pods…</div>';
+    const r=await api(`/api/aks/${cluster}/pods`); if(!r.ok){ box.innerHTML=clErr(r); return; } pods=r.data||[]; CL.podsByCluster[cluster]=pods; }
+  const list=pods.filter(p=>!q||p.name.toLowerCase().includes(q)||(p.namespace||'').toLowerCase().includes(q)).slice(0,50);
+  if(!list.length){ box.innerHTML='<div class="faint mono" style="font-size:12px;padding:8px">No pods match.</div>'; return; }
+  box.innerHTML = list.map(p=>`<div class="kvitem"><div class="kvline">
+    <span class="nm" title="${esc(p.name)}">${esc(p.name)}</span>
+    <span class="meta"><span class="faint mono" style="font-size:11px">${esc(p.namespace)}</span>
+      <button class="iconbtn" onclick="pickWorkload('${esc(id)}',${ei},'${esc(cluster)}','${esc(p.namespace)}','${esc(p.name)}')">Link</button></span>
+  </div></div>`).join('');
+}
+function pickWorkload(id,ei,cluster,ns,name){
+  const e=projById(id).envs[ei]; e.workloads=e.workloads||[];
+  const base=podBase(name);
+  if(!e.workloads.some(x=>x.cluster===cluster&&x.namespace===ns&&x.base===base)){ e.workloads.push({cluster,namespace:ns,name,base,label:''}); saveProjects(); toast('Workload linked'); }
+  else toast('Already linked');
+  renderProjectBody(id);
+}
+function addVault(id,ei){
+  const el=document.getElementById('picker-'+id+'-'+ei);
+  el.innerHTML = `<h4>Link a Key Vault</h4>
+    <div class="fld"><label>Search</label><input class="search" id="pkVQ" placeholder="search vaults by name…" style="flex:1;min-width:0"></div>
+    <div id="pkVResults" class="itemwrap" style="max-height:300px;overflow:auto"></div>
+    <div class="actions"><button class="btn sm ghost" onclick="closePicker('${esc(id)}',${ei})">Close</button></div>`;
+  el.classList.remove('hide');
+  $('#pkVQ').oninput=()=>pkSearchVaults(id,ei); pkSearchVaults(id,ei);
+}
+function pkSearchVaults(id,ei){
+  const q=$('#pkVQ').value.toLowerCase(), box=$('#pkVResults');
+  const list=(STATE.vaults||[]).filter(v=>!q||v.name.toLowerCase().includes(q)||(v.service||'').toLowerCase().includes(q)).slice(0,50);
+  if(!list.length){ box.innerHTML='<div class="faint mono" style="font-size:12px;padding:8px">No vaults match.</div>'; return; }
+  box.innerHTML = list.map(v=>`<div class="kvitem"><div class="kvline">
+    <span class="nm mono" title="${esc(v.name)}">${esc(v.name)}</span>
+    <span class="meta"><span class="tag ${envClass(v.env)}">${esc(v.env)}</span>
+      <button class="iconbtn" onclick="pickVault('${esc(id)}',${ei},'${esc(v.name)}')">Link</button></span>
+  </div></div>`).join('');
+}
+function pickVault(id,ei,name){
+  const e=projById(id).envs[ei]; e.vaults=e.vaults||[];
+  if(!e.vaults.some(x=>x.name===name)){ e.vaults.push({name,label:''}); saveProjects(); toast('Key Vault linked'); }
+  else toast('Already linked');
+  renderProjectBody(id);
+}
+
 // ---------- which Key Vaults does a pod use ----------
 async function openPodVaults(ns,pod){
   CL.logPod=null; CL.termPod=null; teardownTerm();
@@ -1316,8 +1792,13 @@ async function openPodVaults(ns,pod){
        <div class="hint" style="margin-top:6px">🔒 the source vault is defined in the ExternalSecret's SecretStore — ${esc(esoUnresolved[0].reason||'not readable')}.</div></div>`
     : '';
   if(!vaults.length){
-    out.innerHTML=`<div class="empty">No Key Vault could be resolved for this pod.
-      <div class="hint" style="margin-top:8px">Checked CSI SecretProviderClasses, External Secrets, container env, and ${r.data.configmapsScanned.length} configmap(s).</div>
+    const restricted = r.data.restricted;
+    out.innerHTML=`<div class="empty">${restricted
+      ? `🔒 Your identity can't read <b>SecretStores</b> on this cluster.`
+      : `No Key Vault could be resolved for this pod.`}
+      <div class="hint" style="margin-top:8px">${restricted
+        ? `The Key Vault is declared in the namespace's SecretStore, but your Kubernetes RBAC doesn't allow reading <code>secretstores</code>/<code>externalsecrets</code> here. It resolves on clusters/identities where you can <code>get</code> them.`
+        : `Checked the namespace's SecretStores &amp; ExternalSecrets, CSI SecretProviderClasses, container env, and ${r.data.configmapsScanned.length} configmap(s). This namespace may not read from a Key Vault.`}</div>
       ${spcNote}${esoNote}</div>`;
     return;
   }
@@ -1394,6 +1875,7 @@ function cmdkActions(){
     {type:'view', label:'Key Vaults', hint:'go', act:()=>navigate('vaults')},
     {type:'view', label:'Expiry', hint:'go', act:()=>navigate('expiry')},
     {type:'view', label:'Clusters', hint:'go', act:()=>navigate('clusters')},
+    {type:'view', label:'Projects', hint:'go', act:()=>navigate('projects')},
     {type:'view', label:'Account & subscriptions', hint:'go', act:()=>navigate('settings')},
     {type:'action', label:'Refresh inventory', hint:'run', act:()=>{ doRefresh(); }},
   ];
@@ -1437,7 +1919,15 @@ function moveCur(d){ if(!CMDK.items.length)return; CMDK.cur=(CMDK.cur+d+CMDK.ite
   const el=$('#cmdkList').querySelector('.cmdk-it.cur'); if(el) el.scrollIntoView({block:'nearest'}); }
 function runCmdk(i){ const it=CMDK.items[i]; if(!it)return; closeCmdk(); it.act(); }
 
-function doRefresh(){ toast('Refreshing…'); loadSubs().then(()=>loadVaults(true)).then(()=>{ EXP.scanned=false; EXP.polling=false; refreshCurrent(); kickExpiryScan(); }); }
+function doRefresh(){
+  toast('Refreshing…');
+  CL.podsByCluster={}; CL.cmByCluster={}; CL.vaultMapByCluster={}; CL.ingressMapByCluster={};   // drop cached cluster data
+  loadSubs().then(()=>loadVaults(true)).then(()=>{
+    EXP.scanned=false; EXP.polling=false; kickExpiryScan();
+    if(STATE.route==='cluster'){ loadClustersCache(true); loadClusterContent(true); }
+    else { loadClustersCache(true).then(()=>refreshCurrent()); }   // viewClusters() then renders fresh CL.all
+  });
+}
 
 // ---------- events ----------
 document.querySelectorAll('nav button').forEach(b=>b.onclick=()=>navigate(b.dataset.view));