npm - sdlc-agent-4-enterprise-server - Versions diffs - 1.0.0 - Mend

sdlc-agent-4-enterprise-server 1.0.0

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

Files changed (1434) hide show

package/src/viewer/admin/index.html ADDED Viewed

@@ -0,0 +1,338 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>Admin Portal - Code Intelligence</title>
+  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/d3@7/dist/d3.min.js"></script>
+  <script src="https://unpkg.com/three@0.128.0/build/three.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/marked@9.1.6/marked.min.js"></script>
+  <script src="/admin/gesture-fsm.js?v=1"></script>
+  <script src="/admin/camera-physics.js?v=1"></script>
+  <script src="/admin/zoom-animator.js?v=1"></script>
+  <script src="/admin/map-controls.js?v=1"></script>
+  <script src="/admin/kb-graph-renderer.js?v=3"></script>
+  <script src="/admin/lod-clustering.js?v=4"></script>
+  <script src="/admin/lod-animation.js?v=4"></script>
+  <script src="/admin/lod-manager.js?v=4"></script>
+  <style>
+*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f8fafc;color:#1e293b}.app{display:flex;min-height:100vh}.sidebar{width:240px;background:#1e293b;color:#e2e8f0;padding:16px 0;position:fixed;height:100vh;overflow-y:auto}.sidebar h1{font-size:14px;padding:0 16px 16px;color:#94a3b8;border-bottom:1px solid #334155;margin-bottom:8px}.sidebar h1 span{display:block;font-size:18px;color:#fff;margin-top:4px}.nav-item{padding:10px 16px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:14px;transition:background .15s}.nav-item:hover{background:#334155}.nav-item.active{background:#3b82f6;color:#fff}.nav-item .icon{width:18px;text-align:center}.main{margin-left:240px;flex:1;padding:24px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.header h2{font-size:24px;font-weight:600}.card{background:#fff;border-radius:8px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.1);margin-bottom:16px}.card h3{font-size:14px;color:#64748b;margin-bottom:8px}.card .value{font-size:28px;font-weight:700;color:#1e293b}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}table{width:100%;border-collapse:collapse}th,td{padding:10px 12px;text-align:left;border-bottom:1px solid #e2e8f0;font-size:14px}th{background:#f1f5f9;font-weight:600;color:#475569}tr:hover td{background:#f8fafc}tr.expanded-row td{background:#eff6ff}.badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:12px;font-weight:500}.badge-green{background:#dcfce7;color:#166534}.badge-red{background:#fee2e2;color:#991b1b}.badge-yellow{background:#fef3c7;color:#92400e}.badge-blue{background:#dbeafe;color:#1e40af}.badge-purple{background:#f3e8ff;color:#6b21a8}.btn{padding:8px 16px;border-radius:6px;border:none;cursor:pointer;font-size:13px;font-weight:500;transition:opacity .15s}.btn:hover{opacity:.85}.btn-primary{background:#3b82f6;color:#fff}.btn-danger{background:#ef4444;color:#fff}.btn-success{background:#22c55e;color:#fff}.btn-outline{background:transparent;border:1px solid #cbd5e1;color:#475569}.btn-sm{padding:4px 10px;font-size:12px}.login-container{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#1e293b}.login-box{background:#fff;padding:40px;border-radius:12px;width:360px;box-shadow:0 4px 24px rgba(0,0,0,.2)}.login-box h2{margin-bottom:24px;text-align:center}.input{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:6px;font-size:14px;margin-bottom:12px}.input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.filter-input{padding:6px 10px;border:1px solid #cbd5e1;border-radius:4px;font-size:13px;margin-bottom:8px;width:260px}.expand-btn{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:13px;width:24px;display:inline-block;text-align:center}.sub-table{margin:4px 12px 12px 40px;background:#fff;border-radius:6px;border:1px solid #e2e8f0}.sub-table th{background:#f8fafc;font-size:13px}.sub-table td{font-size:13px}.perm-check{display:flex;flex-wrap:wrap;gap:8px}.perm-check label{display:flex;align-items:center;gap:4px;font-size:13px;padding:2px 6px;background:#f1f5f9;border-radius:4px;cursor:pointer}.locked{opacity:.5;pointer-events:none}.rule-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #f1f5f9}.rule-row:last-child{border-bottom:none}.rule-label{min-width:200px;font-size:13px;color:#475569}.mcp-detail{margin:8px 0 8px 24px;padding:12px;border:1px solid #e2e8f0;border-radius:6px;background:#fafbfc}.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px}.toggle-switch{position:relative;display:inline-block;width:36px;height:20px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#cbd5e1;border-radius:20px;transition:.2s}.toggle-slider:before{content:'';position:absolute;height:14px;width:14px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s}.toggle-switch input:checked+.toggle-slider{background:#22c55e}.toggle-switch input:checked+.toggle-slider:before{transform:translateX(16px)}.log-line{font-family:monospace;font-size:12px;padding:2px 8px;border-bottom:1px solid #334155}.log-line .ts{color:#94a3b8;margin-right:8px}.log-line .lvl-INFO{color:#60a5fa}.log-line .lvl-DEBUG{color:#9ca3af}.log-line .lvl-ERROR{color:#f87171}.log-line .lvl-WARN{color:#fbbf24}.tab-bar{display:flex;gap:0;border-bottom:2px solid #e2e8f0;margin-bottom:16px}.tab{padding:8px 16px;cursor:pointer;font-size:13px;font-weight:500;color:#64748b;border-bottom:2px solid transparent;margin-bottom:-2px}.tab.active{color:#3b82f6;border-bottom-color:#3b82f6}.score-bar{height:6px;border-radius:3px;background:#e2e8f0;margin-top:2px}.score-fill{height:100%;border-radius:3px}.md-content h1,.md-content h2,.md-content h3{font-size:13px;font-weight:600;margin:6px 0 4px;color:#e2e8f0}.md-content p{margin:4px 0}.md-content table{border-collapse:collapse;width:100%;font-size:11px;margin:6px 0}.md-content th,.md-content td{border:1px solid #475569;padding:3px 6px;text-align:left}.md-content th{background:#334155}.md-content code{background:#334155;padding:1px 4px;border-radius:3px;font-size:11px}.md-content pre{background:#1e293b;padding:8px;border-radius:4px;overflow-x:auto;font-size:11px}.md-content ul,.md-content ol{padding-left:16px;margin:4px 0}.md-content li{margin:2px 0}
+  </style>
+</head>
+<body>
+<div id="root"></div>
+<script src="https://unpkg.com/@babel/standalone@7.17.12/babel.min.js"></script>
+<script type="text/babel">const{useState,useEffect,useCallback,useRef}=React;
+const API='/api/admin';
+let __impersonateUserId=null;
+function api(path,options={}){const token=localStorage.getItem('admin_token')||'';const impHeaders=__impersonateUserId?{'X-Impersonate':__impersonateUserId}:{};return fetch(API+path,{...options,headers:{'Authorization':'Bearer '+token,'Content-Type':'application/json',...impHeaders,...options.headers}}).then(r=>{if(r.status===401){localStorage.removeItem('admin_token');localStorage.removeItem('admin_user');return null;}if(r.status===403){return r.json().then(d=>{showForbidden(d.error||'Access denied');return{__error:true,...d};}).catch(()=>({__error:true,error:'Forbidden'}));}if(!r.ok)return r.json().then(d=>({__error:true,...d})).catch(()=>null);return r.json();}).catch(()=>null);}
+let __lastForbiddenMsg='';function showForbidden(msg){__lastForbiddenMsg=msg;setTimeout(()=>{__lastForbiddenMsg='';},3000);}
+function exportCSV(data,filename){if(!data||data.length===0)return;const keys=Object.keys(data[0]);const csv=[keys.join(','),...data.map(row=>keys.map(k=>{const v=row[k];const s=v==null?'':String(v);return s.includes(',')||s.includes('"')||s.includes('\n')?'"'+s.replace(/"/g,'""')+'"':s;}).join(','))].join('\n');const blob=new Blob([csv],{type:'text/csv'});const url=URL.createObjectURL(blob);const a=document.createElement('a');a.href=url;a.download=filename;a.click();URL.revokeObjectURL(url);}
+const RULES={DASHBOARD_VIEW:[{name:'exportAllowed',type:'boolean',allowed:[true,false],default:false,desc:'Allow exporting'}],KB_READ:[{name:'allowedTiers',type:'enum[]',allowed:['USER','PROJECT','SHARED'],default:['USER','PROJECT','SHARED'],desc:'Tiers'}],KB_WRITE:[{name:'allowedTiers',type:'enum[]',allowed:['USER','PROJECT','SHARED'],default:['USER'],desc:'Write tiers'},{name:'maxEntries',type:'number',min:1,max:100000,default:1000,desc:'Max'},{name:'allowedOperations',type:'enum[]',allowed:['CREATE','UPDATE','DELETE'],default:['CREATE','UPDATE'],desc:'Ops'}],KB_PROMOTE:[{name:'targetTiers',type:'enum[]',allowed:['PROJECT','SHARED'],default:['PROJECT'],desc:'Targets'}],KB_IMPORT_EXPORT:[{name:'allowedFormats',type:'enum[]',allowed:['JSON','CSV'],default:['JSON','CSV'],desc:'Formats'},{name:'allowImport',type:'boolean',allowed:[true,false],default:true,desc:'Import'},{name:'allowExport',type:'boolean',allowed:[true,false],default:true,desc:'Export'}],MCP_ACCESS:[{name:'toolAccess',type:'mcp-tool-access-table',default:{},desc:'Per-server tool access (which tools user can call)'}],MCP_MANAGE:[{name:'allowAdd',type:'boolean',allowed:[true,false],default:true,desc:'Add new servers'},{name:'serverPermissions',type:'mcp-server-table',default:{},desc:'Per-server permissions (Remove/Edit/Restart)'}],USER_MANAGE:[{name:'canDelete',type:'boolean',allowed:[true,false],default:false,desc:'Delete'},{name:'canForceLogout',type:'boolean',allowed:[true,false],default:false,desc:'Logout'},{name:'canDisable',type:'boolean',allowed:[true,false],default:true,desc:'Disable'}],RBAC_MANAGE:[{name:'canDeleteSystemGroups',type:'boolean',allowed:[true,false],default:false,locked:true,desc:'LOCKED'},{name:'canEditSystemPermissions',type:'boolean',allowed:[true,false],default:false,desc:'Edit'}],CONFIG_EDIT:[{name:'allowedSections',type:'enum[]',allowed:['server','embedding','llm','mcp-servers','kb','auth'],default:['server','embedding','llm'],desc:'Sections'},{name:'readOnly',type:'boolean',allowed:[true,false],default:true,desc:'ReadOnly'}],SEARCH_EXPLORE:[{name:'maxResults',type:'number',min:10,max:1000,default:100,desc:'Max'},{name:'allowDebugMode',type:'boolean',allowed:[true,false],default:false,desc:'Debug'}],AUDIT_VIEW:[{name:'exportAllowed',type:'boolean',allowed:[true,false],default:false,desc:'Export'},{name:'maxDaysVisible',type:'number',min:1,max:365,default:90,desc:'Days'}],GRAPH_VIEW:[{name:'exportAllowed',type:'boolean',allowed:[true,false],default:false,desc:'Export'},{name:'maxNodes',type:'number',min:50,max:5000,default:500,desc:'Nodes'}],ANALYTICS_VIEW:[{name:'exportAllowed',type:'boolean',allowed:[true,false],default:false,desc:'Export'},{name:'allowedMetrics',type:'enum[]',allowed:['quality-scores','embedding-space','usage-stats','health-monitor'],default:['quality-scores','usage-stats'],desc:'Metrics'}]};
+function LoginPage({onLogin}){const[username,setUsername]=useState('');const[password,setPassword]=useState('');const[error,setError]=useState('');const[loading,setLoading]=useState(false);const handleLogin=async()=>{setError('');setLoading(true);const res=await fetch(API+'/auth/login',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({username,password})});const data=await res.json().catch(()=>null);setLoading(false);if(!res.ok||!data?.token){setError(data?.error||'Login failed');return;}localStorage.setItem('admin_token',data.token);localStorage.setItem('admin_user',JSON.stringify(data.user));onLogin();};return(<div className="login-container"><div className="login-box"><h2>Admin Portal</h2>{error&&<div style={{background:'#fee2e2',color:'#991b1b',padding:'8px 12px',borderRadius:6,marginBottom:12,fontSize:13}}>{error}</div>}<input className="input" placeholder="Username" value={username} onChange={e=>setUsername(e.target.value)} onKeyDown={e=>e.key==='Enter'&&handleLogin()}/><input className="input" type="password" placeholder="Password" value={password} onChange={e=>setPassword(e.target.value)} onKeyDown={e=>e.key==='Enter'&&handleLogin()}/><button className="btn btn-primary" style={{width:'100%'}} onClick={handleLogin} disabled={loading}>{loading?'Logging in...':'Login'}</button><p style={{fontSize:12,color:'#94a3b8',marginTop:12,textAlign:'center'}}>Default: admin / admin</p></div></div>);}
+function DashboardPage(){const[stats,setStats]=useState({});const load=()=>{api('/stats').then(d=>{setStats(d||{});});};useEffect(()=>{load();const i=setInterval(load,30000);return()=>clearInterval(i);},[]);const activity=stats.recentActivity||[];return(<div><div className="header"><h2>Dashboard</h2></div><div className="grid"><div className="card"><h3>KB Entries</h3><div className="value">{(stats.kbEntries||0).toLocaleString()}</div></div><div className="card"><h3>Code Symbols</h3><div className="value">{(stats.codeSymbols||0).toLocaleString()}</div></div><div className="card"><h3>Graph Nodes</h3><div className="value">{(stats.graphTotalNodes||0).toLocaleString()}</div><div style={{fontSize:11,color:'#64748b',marginTop:4}}>{(stats.graphKbNodes||0).toLocaleString()} KB + {(stats.graphCodeNodes||0).toLocaleString()} Code</div></div>{stats.users!==undefined&&<div className="card"><h3>Users</h3><div className="value">{stats.users}</div></div>}<div className="card"><h3>MCP Servers</h3><div className="value">{stats.mcpServers||0}</div></div><div className="card"><h3>Uptime</h3><div className="value" style={{fontSize:20}}>{stats.uptime?.formatted||'--'}</div></div><div className="card"><h3>Memory</h3><div className="value" style={{fontSize:16}}>{stats.memory?.formatted||'--'}</div></div></div><div className="card" style={{marginTop:16}}><h3 style={{marginBottom:12}}>Recent Activity</h3>{activity.length===0?<p style={{color:'#94a3b8',fontSize:13}}>No recent activity</p>:<table><thead><tr><th>Time</th><th>User</th><th>Action</th><th>Resource</th></tr></thead><tbody>{activity.map((a,i)=>(<tr key={i}><td style={{fontSize:12}}>{a.timestamp?new Date(a.timestamp).toLocaleString():'-'}</td><td>{a.username}</td><td><span className="badge badge-blue">{a.action}</span></td><td>{a.resource}{a.resourceId?' / '+a.resourceId:''}</td></tr>))}</tbody></table>}</div></div>);}
+function KBManagementPage(){const[entries,setEntries]=useState([]);const[total,setTotal]=useState(0);const[page,setPage]=useState(1);const pageSize=20;const[sortBy,setSortBy]=useState('created_at');const[sortDir,setSortDir]=useState('desc');const[filter,setFilter]=useState('');const[tab,setTab]=useState('entries');const[promotions,setPromotions]=useState([]);const[importText,setImportText]=useState('');const[msg,setMsg]=useState('');const[tagEntry,setTagEntry]=useState(null);const[tagInput,setTagInput]=useState('');const[linkEntry,setLinkEntry]=useState(null);const[linkTarget,setLinkTarget]=useState('');
+  const load=(p,sb,sd)=>{api('/kb/entries?page='+p+'&pageSize='+pageSize+'&sortBy='+sb+'&sortDir='+sd).then(d=>{if(d&&!d.__error){setEntries(d.entries||[]);setTotal(d.total||0);}});};
+  const loadPromos=()=>{api('/kb/promotions').then(d=>{if(d&&!d.__error)setPromotions(d.promotions||[]);});};
+  useEffect(()=>{load(page,sortBy,sortDir);loadPromos();},[page,sortBy,sortDir]);
+  const totalPages=Math.ceil(total/pageSize);const toggleSort=(col)=>{if(sortBy===col)setSortDir(d=>d==='asc'?'desc':'asc');else{setSortBy(col);setSortDir('desc');}setPage(1);};const sortIcon=(col)=>sortBy===col?(sortDir==='asc'?' ▲':' ▼'):'';
+  const filtered=entries.filter(e=>!filter||JSON.stringify(e).toLowerCase().includes(filter.toLowerCase()));
+  const doExport=()=>{api('/kb/export').then(d=>{if(d&&d.entries){const blob=new Blob([JSON.stringify(d,null,2)],{type:'application/json'});const url=URL.createObjectURL(blob);const a=document.createElement('a');a.href=url;a.download='kb-export.json';a.click();URL.revokeObjectURL(url);setMsg('Exported '+d.count+' entries');}});};
+  const doImport=()=>{try{const data=JSON.parse(importText);api('/kb/import',{method:'POST',body:JSON.stringify({entries:Array.isArray(data)?data:data.entries||[]})}).then(d=>{if(d&&!d.__error){setMsg(d.message);setImportText('');}else setMsg(d?.error||'Failed');});}catch{setMsg('Invalid JSON');}};
+  const doExportCSV=()=>{exportCSV(entries.map(e=>({id:e.id||e.entry_id,source:e.source||e.title,tier:e.tier||e.scope,type:e.type||e.content_type,created:e.created_at})),'kb-entries.csv');};
+  const saveTags=()=>{if(!tagEntry)return;api('/kb/entries/'+tagEntry+'/tags',{method:'POST',body:JSON.stringify({tags:tagInput.split(',').map(t=>t.trim()).filter(Boolean)})}).then(d=>{if(d&&!d.__error){setMsg('Tags saved');setTagEntry(null);}});};
+  const saveLink=()=>{if(!linkEntry||!linkTarget)return;api('/kb/entries/'+linkEntry+'/link',{method:'POST',body:JSON.stringify({targetId:linkTarget,linkType:'related'})}).then(d=>{if(d&&!d.__error){setMsg('Link created');setLinkEntry(null);setLinkTarget('');}});};
+  const reviewPromo=(id,action)=>{api('/kb/promotions/'+id+'/review',{method:'POST',body:JSON.stringify({action})}).then(()=>loadPromos());};
+  return(<div><div className="header"><h2>KB Management</h2><div style={{display:'flex',gap:8}}><button className="btn btn-sm btn-outline" onClick={doExportCSV}>Export CSV</button><button className="btn btn-sm btn-outline" onClick={doExport}>Export JSON</button><span className="badge badge-blue" style={{fontSize:14,padding:'4px 12px'}}>{total} entries</span></div></div>
+    {msg&&<div className="card" style={{background:'#f0fdf4',border:'1px solid #86efac'}}><span style={{fontSize:13}}>{msg}</span><button className="btn btn-sm btn-outline" style={{marginLeft:12}} onClick={()=>setMsg('')}>x</button></div>}
+    <div className="tab-bar"><div className={'tab'+(tab==='entries'?' active':'')} onClick={()=>setTab('entries')}>Entries</div><div className={'tab'+(tab==='promotions'?' active':'')} onClick={()=>setTab('promotions')}>Promotions ({promotions.filter(p=>p.status==='pending').length})</div><div className={'tab'+(tab==='import'?' active':'')} onClick={()=>setTab('import')}>Import</div></div>
+    {tab==='entries'&&<div className="card"><input className="filter-input" placeholder="Filter entries..." value={filter} onChange={e=>setFilter(e.target.value)}/>
+      {tagEntry&&<div style={{padding:8,background:'#eff6ff',borderRadius:6,marginBottom:8}}>Tags for {tagEntry}: <input className="input" style={{width:300,display:'inline-block',marginBottom:0,marginLeft:8}} value={tagInput} onChange={e=>setTagInput(e.target.value)} placeholder="tag1, tag2"/><button className="btn btn-sm btn-primary" style={{marginLeft:8}} onClick={saveTags}>Save</button><button className="btn btn-sm btn-outline" style={{marginLeft:4}} onClick={()=>setTagEntry(null)}>Cancel</button></div>}
+      {linkEntry&&<div style={{padding:8,background:'#fef3c7',borderRadius:6,marginBottom:8}}>Link {linkEntry} to: <input className="input" style={{width:300,display:'inline-block',marginBottom:0,marginLeft:8}} value={linkTarget} onChange={e=>setLinkTarget(e.target.value)} placeholder="Target entry ID"/><button className="btn btn-sm btn-primary" style={{marginLeft:8}} onClick={saveLink}>Link</button><button className="btn btn-sm btn-outline" style={{marginLeft:4}} onClick={()=>setLinkEntry(null)}>Cancel</button></div>}
+      <table><thead><tr><th>#</th><th style={{cursor:'pointer'}} onClick={()=>toggleSort('source')}>Source{sortIcon('source')}</th><th style={{cursor:'pointer'}} onClick={()=>toggleSort('tier')}>Tier{sortIcon('tier')}</th><th style={{cursor:'pointer'}} onClick={()=>toggleSort('type')}>Type{sortIcon('type')}</th><th style={{cursor:'pointer'}} onClick={()=>toggleSort('created_at')}>Created{sortIcon('created_at')}</th><th>Actions</th></tr></thead><tbody>
+      {filtered.map((e,i)=>{const eid=e.id||e.entry_id||'e'+i;return(<tr key={eid}><td>{(page-1)*pageSize+i+1}</td><td>{e.source||e.title||'-'}</td><td><span className="badge badge-blue">{e.tier||e.scope||'-'}</span></td><td>{e.type||e.content_type||'-'}</td><td style={{fontSize:12}}>{e.created_at?new Date(e.created_at).toLocaleString():'-'}</td><td><button className="btn btn-sm btn-outline" onClick={()=>{setTagEntry(eid);setTagInput('');}}>Tags</button>{' '}<button className="btn btn-sm btn-outline" onClick={()=>setLinkEntry(eid)}>Link</button></td></tr>);})}
+      {filtered.length===0&&<tr><td colSpan={6} style={{textAlign:'center',color:'#94a3b8'}}>No entries</td></tr>}</tbody></table>
+      {totalPages>1&&<div style={{marginTop:12,display:'flex',gap:8,alignItems:'center'}}><button className="btn btn-sm btn-outline" disabled={page<=1} onClick={()=>setPage(p=>p-1)}>Prev</button><span style={{fontSize:12,color:'#64748b'}}>Page {page}/{totalPages}</span><button className="btn btn-sm btn-outline" disabled={page>=totalPages} onClick={()=>setPage(p=>p+1)}>Next</button></div>}</div>}
+    {tab==='promotions'&&<div className="card"><h4 style={{marginBottom:12}}>Promotion Queue</h4>{promotions.length===0?<p style={{color:'#94a3b8'}}>No promotions</p>:<table><thead><tr><th>Entry</th><th>From</th><th>To</th><th>Reason</th><th>Requested</th><th>Status</th><th>Actions</th></tr></thead><tbody>{promotions.map(p=>(<tr key={p.id}><td>{p.entryId}</td><td><span className="badge badge-blue">{p.fromTier}</span></td><td><span className="badge badge-purple">{p.toTier}</span></td><td>{p.reason||'-'}</td><td style={{fontSize:12}}>{p.requestedBy}</td><td><span className={'badge '+(p.status==='pending'?'badge-yellow':p.status==='approved'?'badge-green':'badge-red')}>{p.status}</span></td><td>{p.status==='pending'&&<><button className="btn btn-sm btn-success" onClick={()=>reviewPromo(p.id,'approve')}>Approve</button>{' '}<button className="btn btn-sm btn-danger" onClick={()=>reviewPromo(p.id,'reject')}>Reject</button></>}</td></tr>))}</tbody></table>}</div>}
+    {tab==='import'&&<div className="card"><h4 style={{marginBottom:12}}>Import KB Entries (JSON)</h4><textarea className="input" style={{height:200,fontFamily:'monospace',fontSize:12}} value={importText} onChange={e=>setImportText(e.target.value)} placeholder='[{"source":"...", "content":"...", "tier":"USER"}]'/><button className="btn btn-primary" onClick={doImport} disabled={!importText}>Import</button></div>}
+  </div>);}
+function KBGraphPage({activeTab}={}){
+  const mainRef=useRef(null);const miniRef=useRef(null);const rendererRef=useRef(null);
+  const[loading,setLoading]=useState(true);const[selectedNode,setSelectedNode]=useState(null);
+  const[nodeDetail,setNodeDetail]=useState(null);const[searchTerm,setSearchTerm]=useState('');
+  const[graphStats,setGraphStats]=useState(null);
+  const[typeFilters,setTypeFilters]=useState({REQUIREMENT:true,ARCHITECTURE:true,PROCEDURE:true,CONTEXT:true,CODE_ENTITY:true,DECISION:true,LESSON_LEARNED:true,ERROR_PATTERN:true,DOCUMENT:true,FUNCTION:true,METHOD:true,CLASS:true,INTERFACE:true,TYPE:true,CONSTRUCTOR:true,ENUM:true,CONSTANT:true,VARIABLE:true});
+  const[showFilterDrop,setShowFilterDrop]=useState(false);
+  const allNodesRef=useRef([]);
+  const colors={REQUIREMENT:'#3b82f6',ARCHITECTURE:'#10b981',PROCEDURE:'#f59e0b',CONTEXT:'#ec4899',CODE_ENTITY:'#ef4444',DECISION:'#06b6d4',LESSON_LEARNED:'#f97316',ERROR_PATTERN:'#dc2626',DOCUMENT:'#a855f7',FUNCTION:'#818cf8',METHOD:'#6366f1',CLASS:'#e879f9',INTERFACE:'#c084fc',TYPE:'#fb7185',CONSTRUCTOR:'#f472b6',ENUM:'#34d399',CONSTANT:'#fbbf24',VARIABLE:'#94a3b8'};
+  const basePath=window.__MCP_BASE||'';
+  useEffect(()=>{
+    if(!mainRef.current)return;
+    let destroyed=false;
+    setLoading(true);
+    // Load all positions
+    api('/kb/graph/positions').then(d=>{
+      if(destroyed||!d||d.__error)return;
+      allNodesRef.current=d.nodes||[];
+      setGraphStats({totalNodes:d.total||d.nodes.length,kbNodes:d.kbCount||0,codeNodes:d.codeCount||0,totalEdges:0});
+      // Create renderer
+      KBGraphRenderer.create(mainRef.current,{minimapCanvas:miniRef.current}).then(r=>{
+        if(destroyed){r.destroy();return;}
+        rendererRef.current=r;
+        r.loadPositions(allNodesRef.current);
+        r.zoomToFit();
+        // Edges loaded on-demand when zoom close (not on init — too many creates wireframe)
+        setLoading(false);
+        // Listen for node clicks
+        mainRef.current.addEventListener('graph-node-click',function(ev){
+          var node=ev.detail;
+          setSelectedNode(node);setNodeDetail(null);
+          api('/kb/entries/'+node.id).then(function(det){
+            if(det&&!det.__error)setNodeDetail(det);
+            else setNodeDetail({id:node.id,title:node.label,type:node.type,tier:node.tier,content:'No detail available'});
+          });
+        });
+      });
+    }).catch(function(){setLoading(false);});
+    return()=>{destroyed=true;if(rendererRef.current){rendererRef.current.destroy();rendererRef.current=null;}};
+  },[activeTab]);
+  // Auto-reload graph when RBAC changes
+  useEffect(()=>{
+    const onRbacChanged=()=>{
+      api('/kb/graph/positions').then(d=>{
+        if(!d||d.__error)return;
+        allNodesRef.current=d.nodes||[];
+        setGraphStats({totalNodes:d.total||d.nodes.length,kbNodes:d.kbCount||0,codeNodes:d.codeCount||0,totalEdges:0});
+        if(rendererRef.current)rendererRef.current.loadPositions(allNodesRef.current);
+      });
+    };
+    window.addEventListener('rbac-changed',onRbacChanged);
+    return()=>window.removeEventListener('rbac-changed',onRbacChanged);
+  },[]);
+  const doSearch=(term)=>{
+    setSearchTerm(term);
+    if(!term||!rendererRef.current)return;
+    var found=allNodesRef.current.find(n=>n.label&&n.label.toLowerCase().includes(term.toLowerCase()));
+    if(found){rendererRef.current.focusNode(found.id);setSelectedNode(found);setNodeDetail(null);api('/kb/entries/'+found.id).then(d=>{if(d&&!d.__error)setNodeDetail(d);else setNodeDetail({id:found.id,title:found.label,type:found.type,tier:found.tier,content:'No detail'});});}
+  };
+  return(<div style={{position:'relative',width:'100%',height:'calc(100vh - 52px)',borderRadius:8,overflow:'hidden',background:'#0f172a'}}>{loading&&<p style={{color:'#94a3b8',padding:24,position:'absolute',zIndex:10}}>Loading {graphStats?graphStats.totalNodes+' nodes':''}...</p>}<div ref={mainRef} style={{width:'100%',height:'100%'}}/><div style={{position:'absolute',top:12,left:12,zIndex:9999,display:'flex',gap:8,alignItems:'center'}}><input className="filter-input" style={{width:180,marginBottom:0,background:'rgba(30,41,59,0.9)',border:'1px solid #475569',color:'#e2e8f0'}} placeholder="Search node..." value={searchTerm} onChange={e=>doSearch(e.target.value)}/><button className="btn btn-sm btn-outline" style={{background:'rgba(30,41,59,0.9)',color:'#e2e8f0',border:'1px solid #475569'}} onClick={()=>{if(rendererRef.current)rendererRef.current.zoomToFit();}}>Fit</button><div style={{position:'relative'}}><button className="btn btn-sm btn-outline" style={{background:'rgba(30,41,59,0.9)',color:'#e2e8f0',border:'1px solid #475569'}} onClick={()=>setShowFilterDrop(!showFilterDrop)}>Filter {showFilterDrop?'\u25B4':'\u25BE'}</button>{showFilterDrop&&<div style={{position:'absolute',top:32,left:0,zIndex:9999,background:'rgba(30,41,59,0.95)',border:'1px solid #475569',borderRadius:6,padding:8,boxShadow:'0 4px 12px rgba(0,0,0,0.3)',minWidth:150}}>{Object.entries(typeFilters).map(([type,on])=>(<label key={type} style={{display:'flex',alignItems:'center',gap:6,padding:'3px 0',fontSize:12,cursor:'pointer',color:'#e2e8f0'}}><input type="checkbox" checked={on} onChange={e=>{const nf={...typeFilters,[type]:e.target.checked};setTypeFilters(nf);if(rendererRef.current){var filtered=allNodesRef.current.filter(n=>nf[n.type]!==false);rendererRef.current.loadPositions(filtered);}}}/><span style={{width:8,height:8,borderRadius:'50%',background:colors[type]||'#64748b',display:'inline-block'}}/><span style={{textTransform:'capitalize'}}>{type}</span></label>))}</div>}</div>{graphStats&&<span style={{fontSize:11,color:'#94a3b8',background:'rgba(30,41,59,0.9)',padding:'4px 8px',borderRadius:4}}>{(graphStats.totalNodes||0).toLocaleString()} nodes ({(graphStats.kbNodes||0).toLocaleString()} KB + {(graphStats.codeNodes||0).toLocaleString()} Code)</span>}</div><canvas ref={miniRef} width={180} height={140} style={{position:'absolute',bottom:12,right:12,zIndex:9999,borderRadius:6,border:'1px solid #334155',cursor:'grab',background:'#1e293b'}}/>{selectedNode&&<div style={{position:'absolute',top:12,right:12,zIndex:9999,width:300,maxHeight:'70%',overflow:'auto',background:'rgba(30,41,59,0.95)',border:'1px solid #334155',borderRadius:8,padding:14,boxShadow:'0 4px 20px rgba(0,0,0,0.5)'}}><div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:8}}><strong style={{color:'#e2e8f0',fontSize:13}}>{selectedNode.label||selectedNode.id}</strong><span style={{cursor:'pointer',color:'#94a3b8',fontSize:16}} onClick={()=>setSelectedNode(null)}>&times;</span></div><div style={{fontSize:11,color:'#94a3b8',marginBottom:6}}><span className='badge badge-blue' style={{marginRight:6}}>{selectedNode.type}</span><span className='badge badge-purple'>{selectedNode.tier||'SHARED'}</span></div>{nodeDetail?<div style={{fontSize:12,color:'#cbd5e1'}}>{nodeDetail.content&&<div className="md-content" style={{marginBottom:8,lineHeight:1.6,maxHeight:200,overflow:'auto',fontSize:12}} dangerouslySetInnerHTML={{__html:typeof marked!=='undefined'?marked.parse(nodeDetail.content.substring(0,800)):nodeDetail.content.substring(0,300)}}/>}{nodeDetail.tags&&nodeDetail.tags.length>0&&<div style={{marginBottom:6}}><span style={{color:'#94a3b8'}}>Tags:</span> {nodeDetail.tags.join(', ')}</div>}{nodeDetail.links&&nodeDetail.links.length>0&&<div style={{marginBottom:6}}><span style={{color:'#94a3b8'}}>Links:</span> {nodeDetail.links.length} connections</div>}{nodeDetail.qualityScore!=null&&<div><span style={{color:'#94a3b8'}}>Quality:</span> {(nodeDetail.qualityScore*100).toFixed(0)}%</div>}{nodeDetail.createdAt&&<div style={{marginTop:6,fontSize:10,color:'#64748b'}}>Created: {new Date(nodeDetail.createdAt).toLocaleString()}</div>}</div>:<p style={{fontSize:11,color:'#64748b'}}>Loading...</p>}</div>}<div style={{position:'absolute',bottom:12,left:12,zIndex:9999,background:'rgba(30,41,59,0.92)',border:'1px solid #334155',borderRadius:8,padding:'8px 12px'}}><div style={{fontSize:10,fontWeight:600,color:'#e2e8f0',marginBottom:4}}>Node Types</div>{Object.entries(colors).map(([type,color])=>(<div key={type} style={{display:'flex',alignItems:'center',gap:6,marginBottom:2}}><span style={{width:8,height:8,borderRadius:'50%',background:color,display:'inline-block'}}/><span style={{fontSize:10,color:'#cbd5e1',textTransform:'capitalize'}}>{type}</span></div>))}</div></div>);}
+function AnalyticsPage(){const[data,setData]=useState(null);const[loading,setLoading]=useState(true);
+  useEffect(()=>{api('/analytics').then(d=>{if(d&&!d.__error)setData(d);setLoading(false);});},[]);
+  if(loading)return<div><div className="header"><h2>Analytics</h2></div><p style={{color:'#64748b'}}>Loading...</p></div>;
+  if(!data)return<div><div className="header"><h2>Analytics</h2></div><p>No data</p></div>;
+  const{summary,qualityScores,usageOverTime,embeddingSpace}=data;
+  const maxQ=Math.max(...(qualityScores||[]).map(d=>d.count),1);const maxU=Math.max(...(usageOverTime||[]).map(d=>Math.max(d.queries,d.ingestions)),1);
+  return(<div><div className="header"><h2>Analytics</h2></div>
+    <div className="grid"><div className="card"><h3>Total Entries</h3><div className="value">{summary?.totalEntries||0}</div></div><div className="card"><h3>Avg Quality</h3><div className="value">{((summary?.avgQuality||0)*100).toFixed(0)}%</div></div><div className="card"><h3>Avg Query Time</h3><div className="value">{summary?.avgQueryTime||0}ms</div></div><div className="card"><h3>Cache Hit Rate</h3><div className="value">{((summary?.cacheHitRate||0)*100).toFixed(0)}%</div></div></div>
+    <div className="card" style={{marginTop:16}}><h3 style={{marginBottom:12}}>Quality Score Distribution</h3><svg width="100%" viewBox="0 0 600 180" style={{display:'block'}}>{(qualityScores||[]).map((d,i)=>{const barH=(d.count/maxQ)*130;return(<g key={i}><rect x={50+i*52} y={150-barH} width={44} height={barH} fill="#8b5cf6" rx={3} opacity={0.8}/><text x={50+i*52+22} y={168} textAnchor="middle" fontSize="9" fill="#64748b">{d.range}</text><text x={50+i*52+22} y={145-barH} textAnchor="middle" fontSize="9" fill="#475569">{d.count}</text></g>);})}</svg></div>
+    <div className="card"><h3 style={{marginBottom:12}}>Usage Over Time (14 days)</h3><svg width="100%" viewBox="0 0 700 200" style={{display:'block'}}>{(()=>{const pts=usageOverTime||[];if(pts.length<2)return null;const xStep=600/(pts.length-1);const qLine=pts.map((d,i)=>(50+i*xStep)+','+(170-d.queries/maxU*140)).join(' ');const iLine=pts.map((d,i)=>(50+i*xStep)+','+(170-d.ingestions/maxU*140)).join(' ');return(<><polyline points={qLine} fill="none" stroke="#3b82f6" strokeWidth="2"/><polyline points={iLine} fill="none" stroke="#22c55e" strokeWidth="2"/>{pts.map((d,i)=>i%2===0&&<text key={i} x={50+i*xStep} y={186} textAnchor="middle" fontSize="9" fill="#94a3b8">{d.date?.slice(5)}</text>)}</>);})()}</svg><div style={{fontSize:11,color:'#64748b',marginTop:4}}>— <span style={{color:'#3b82f6'}}>queries</span> — <span style={{color:'#22c55e'}}>ingestions</span></div></div>
+    <div className="card"><h3 style={{marginBottom:12}}>Embedding Space (2D Scatter)</h3><svg width="100%" viewBox="0 0 600 300" style={{display:'block',background:'#fafbfc',borderRadius:8}}>{(embeddingSpace||[]).map((d,i)=>{const colors=['#3b82f6','#22c55e','#f59e0b','#8b5cf6','#ec4899'];return(<circle key={i} cx={40+d.x*520} cy={10+d.y*260} r={5} fill={colors[d.cluster%5]} opacity={0.7}><title>{d.label} ({d.type})</title></circle>);})}<text x="300" y="295" textAnchor="middle" fontSize="10" fill="#94a3b8">2D Embedding Projection</text></svg><div style={{marginTop:8,display:'flex',gap:12,fontSize:11,color:'#64748b'}}><span style={{color:'#3b82f6'}}>● document</span><span style={{color:'#22c55e'}}>● code</span><span style={{color:'#f59e0b'}}>● config</span><span style={{color:'#8b5cf6'}}>● api</span><span style={{color:'#ec4899'}}>● module</span></div></div>
+  </div>);}
+function KBQualityPage(){const[data,setData]=useState(null);const[loading,setLoading]=useState(true);const[page,setPage]=useState(1);const[tierFilter,setTierFilter]=useState('');const[sortBy,setSortBy]=useState('quality_score');const[sortDir,setSortDir]=useState('desc');
+  const load=(p,tier,sb,sd)=>{const params='?page='+p+'&pageSize=20&sortBy='+sb+'&sortDir='+sd+(tier?'&tier='+tier:'');api('/kb/quality'+params).then(d=>{if(d&&!d.__error)setData(d);setLoading(false);});};
+  useEffect(()=>{load(page,tierFilter,sortBy,sortDir);},[page,tierFilter,sortBy,sortDir]);
+  const toggleSort=(col)=>{if(sortBy===col)setSortDir(d=>d==='asc'?'desc':'asc');else{setSortBy(col);setSortDir('desc');}setPage(1);};
+  const sortIcon=(col)=>sortBy===col?(sortDir==='asc'?' \u25B2':' \u25BC'):'';
+  if(loading)return<div><div className="header"><h2>KB Quality</h2></div><p style={{color:'#64748b'}}>Loading...</p></div>;
+  if(!data)return<div><div className="header"><h2>KB Quality</h2></div><p>No data</p></div>;
+  const{entries,total,totalPages,distribution,summary}=data;
+  const maxD=Math.max(...(distribution||[]).map(d=>d.count),1);
+  const statusColor=(s)=>s==='good'?'badge-green':s==='fair'?'badge-yellow':'badge-red';
+  return(<div><div className="header"><h2>KB Quality</h2><span className="badge badge-blue" style={{fontSize:14,padding:'4px 12px'}}>{total} entries</span></div>
+    <div className="grid"><div className="card"><h3>Average Score</h3><div className="value">{((summary?.avgScore||0)*100).toFixed(0)}%</div></div><div className="card"><h3>Good (&ge;70%)</h3><div className="value" style={{color:'#166534'}}>{summary?.good||0}</div></div><div className="card"><h3>Fair (40-70%)</h3><div className="value" style={{color:'#92400e'}}>{summary?.fair||0}</div></div><div className="card"><h3>Poor (&lt;40%)</h3><div className="value" style={{color:'#991b1b'}}>{summary?.poor||0}</div></div></div>
+    <div className="card" style={{marginTop:16}}><h3 style={{marginBottom:12}}>Quality Distribution</h3><svg width="100%" viewBox="0 0 600 160" style={{display:'block'}}>{(distribution||[]).map((d,i)=>{const barH=(d.count/maxD)*110;return(<g key={i}><rect x={50+i*52} y={130-barH} width={44} height={barH} fill={i<4?'#ef4444':i<7?'#f59e0b':'#22c55e'} rx={3} opacity={0.8}/><text x={50+i*52+22} y={148} textAnchor="middle" fontSize="9" fill="#64748b">{d.range}</text><text x={50+i*52+22} y={125-barH} textAnchor="middle" fontSize="9" fill="#475569">{d.count}</text></g>);})}</svg></div>
+    <div className="card" style={{marginTop:16}}><div className="toolbar"><select className="filter-input" style={{width:140}} value={tierFilter} onChange={e=>{setTierFilter(e.target.value);setPage(1);}}><option value="">All Tiers</option><option value="USER">USER</option><option value="PROJECT">PROJECT</option><option value="SHARED">SHARED</option></select></div>
+    <table><thead><tr><th>#</th><th style={{cursor:'pointer'}} onClick={()=>toggleSort('source')}>Entry{sortIcon('source')}</th><th>Type</th><th style={{cursor:'pointer'}} onClick={()=>toggleSort('tier')}>Tier{sortIcon('tier')}</th><th style={{cursor:'pointer'}} onClick={()=>toggleSort('quality_score')}>Quality Score{sortIcon('quality_score')}</th><th>Status</th></tr></thead><tbody>
+    {(entries||[]).map((e,i)=>(<tr key={e.id||i}><td>{(page-1)*20+i+1}</td><td>{e.source||'-'}</td><td style={{fontSize:12,color:'#64748b'}}>{e.type||'-'}</td><td><span className="badge badge-blue">{e.tier}</span></td><td><div style={{display:'flex',alignItems:'center',gap:8}}><div className="score-bar" style={{width:80}}><div className="score-fill" style={{width:(e.qualityScore*100)+'%',background:e.qualityScore>=0.7?'#22c55e':e.qualityScore>=0.4?'#f59e0b':'#ef4444'}}/></div><span style={{fontSize:12}}>{(e.qualityScore*100).toFixed(0)}%</span></div></td><td><span className={'badge '+statusColor(e.status)}>{e.status}</span></td></tr>))}
+    {(!entries||entries.length===0)&&<tr><td colSpan={6} style={{textAlign:'center',color:'#94a3b8'}}>No entries</td></tr>}</tbody></table>
+    {totalPages>1&&<div style={{marginTop:12,display:'flex',gap:8,alignItems:'center'}}><button className="btn btn-sm btn-outline" disabled={page<=1} onClick={()=>setPage(p=>p-1)}>Prev</button><span style={{fontSize:12,color:'#64748b'}}>Page {page}/{totalPages}</span><button className="btn btn-sm btn-outline" disabled={page>=totalPages} onClick={()=>setPage(p=>p+1)}>Next</button></div>}</div></div>);}
+function KBTagsPage(){const[tags,setTags]=useState([]);const[loading,setLoading]=useState(true);const[newTag,setNewTag]=useState('');const[msg,setMsg]=useState('');const[renameTag,setRenameTag]=useState(null);const[renameTo,setRenameTo]=useState('');const[mergeSource,setMergeSource]=useState('');const[mergeTarget,setMergeTarget]=useState('');const[showMerge,setShowMerge]=useState(false);const[selectedTag,setSelectedTag]=useState(null);const[tagEntries,setTagEntries]=useState([]);
+  const load=()=>{api('/kb/tags').then(d=>{if(d&&!d.__error)setTags(d.tags||[]);setLoading(false);});};
+  useEffect(()=>{load();},[]);
+  const createTag=()=>{if(!newTag.trim())return;api('/kb/tags',{method:'POST',body:JSON.stringify({name:newTag.trim()})}).then(d=>{if(d&&!d.__error){setMsg('Tag created');setNewTag('');load();}else setMsg(d?.error||'Failed');});};
+  const deleteTag=(name)=>{if(!confirm('Delete tag "'+name+'"?'))return;api('/kb/tags/'+encodeURIComponent(name),{method:'DELETE'}).then(d=>{if(d&&!d.__error){setMsg('Tag deleted');load();}});};
+  const doRename=()=>{if(!renameTag||!renameTo.trim())return;api('/kb/tags/'+encodeURIComponent(renameTag),{method:'PUT',body:JSON.stringify({name:renameTo.trim()})}).then(d=>{if(d&&!d.__error){setMsg('Renamed ('+d.entriesAffected+' entries)');setRenameTag(null);setRenameTo('');load();}});};
+  const doMerge=()=>{if(!mergeSource||!mergeTarget)return;api('/kb/tags/merge',{method:'POST',body:JSON.stringify({sourceTag:mergeSource,targetTag:mergeTarget})}).then(d=>{if(d&&!d.__error){setMsg('Merged ('+d.entriesAffected+' entries)');setShowMerge(false);setMergeSource('');setMergeTarget('');load();}else setMsg(d?.error||'Failed');});};
+  const viewEntries=(name)=>{setSelectedTag(name);api('/kb/tags/'+encodeURIComponent(name)+'/entries').then(d=>{if(d&&!d.__error)setTagEntries(d.entries||[]);});};
+  if(loading)return<div><div className="header"><h2>KB Tags</h2></div><p style={{color:'#64748b'}}>Loading...</p></div>;
+  return(<div><div className="header"><h2>KB Tags</h2><span className="badge badge-blue" style={{fontSize:14,padding:'4px 12px'}}>{tags.length} tags</span></div>
+    {msg&&<div className="card" style={{background:'#f0fdf4',border:'1px solid #86efac'}}><span style={{fontSize:13}}>{msg}</span><button className="btn btn-sm btn-outline" style={{marginLeft:12}} onClick={()=>setMsg('')}>x</button></div>}
+    <div className="card"><div className="toolbar"><input className="filter-input" style={{width:200}} placeholder="New tag name..." value={newTag} onChange={e=>setNewTag(e.target.value)} onKeyDown={e=>e.key==='Enter'&&createTag()}/><button className="btn btn-sm btn-primary" onClick={createTag}>Create Tag</button><button className="btn btn-sm btn-outline" onClick={()=>setShowMerge(!showMerge)}>{showMerge?'Cancel Merge':'Merge Tags'}</button></div>
+    {showMerge&&<div style={{padding:8,background:'#fef3c7',borderRadius:6,marginBottom:8,display:'flex',gap:8,alignItems:'center'}}><select className="filter-input" style={{width:160,marginBottom:0}} value={mergeSource} onChange={e=>setMergeSource(e.target.value)}><option value="">Source tag...</option>{tags.map(t=>(<option key={t.name} value={t.name}>{t.name} ({t.entryCount})</option>))}</select><span>&rarr;</span><select className="filter-input" style={{width:160,marginBottom:0}} value={mergeTarget} onChange={e=>setMergeTarget(e.target.value)}><option value="">Target tag...</option>{tags.filter(t=>t.name!==mergeSource).map(t=>(<option key={t.name} value={t.name}>{t.name} ({t.entryCount})</option>))}</select><button className="btn btn-sm btn-primary" onClick={doMerge} disabled={!mergeSource||!mergeTarget}>Merge</button></div>}
+    {renameTag&&<div style={{padding:8,background:'#eff6ff',borderRadius:6,marginBottom:8,display:'flex',gap:8,alignItems:'center'}}>Rename "{renameTag}" to: <input className="filter-input" style={{width:200,marginBottom:0}} value={renameTo} onChange={e=>setRenameTo(e.target.value)} onKeyDown={e=>e.key==='Enter'&&doRename()}/><button className="btn btn-sm btn-primary" onClick={doRename}>Save</button><button className="btn btn-sm btn-outline" onClick={()=>setRenameTag(null)}>Cancel</button></div>}
+    <table><thead><tr><th>#</th><th>Tag Name</th><th>Entry Count</th><th>Last Used</th><th>Actions</th></tr></thead><tbody>
+    {tags.map((t,i)=>(<tr key={t.name}><td>{i+1}</td><td><span style={{cursor:'pointer',color:'#3b82f6',fontWeight:500}} onClick={()=>viewEntries(t.name)}>{t.name}</span></td><td><span className="badge badge-blue">{t.entryCount}</span></td><td style={{fontSize:12}}>{t.lastUsed?new Date(t.lastUsed).toLocaleDateString():'-'}</td><td><button className="btn btn-sm btn-outline" onClick={()=>{setRenameTag(t.name);setRenameTo(t.name);}}>Rename</button>{' '}<button className="btn btn-sm btn-danger" onClick={()=>deleteTag(t.name)}>Delete</button></td></tr>))}
+    {tags.length===0&&<tr><td colSpan={5} style={{textAlign:'center',color:'#94a3b8'}}>No tags yet</td></tr>}</tbody></table></div>
+    {selectedTag&&<div className="card" style={{marginTop:16}}><div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:12}}><h3>Entries tagged "{selectedTag}"</h3><button className="btn btn-sm btn-outline" onClick={()=>setSelectedTag(null)}>Close</button></div>
+    {tagEntries.length===0?<p style={{color:'#94a3b8',fontSize:13}}>No entries with this tag</p>:<table><thead><tr><th>#</th><th>Source</th><th>Tier</th><th>Type</th><th>Created</th></tr></thead><tbody>{tagEntries.map((e,i)=>(<tr key={e.id||i}><td>{i+1}</td><td>{e.source||'-'}</td><td><span className="badge badge-blue">{e.tier}</span></td><td>{e.type||'-'}</td><td style={{fontSize:12}}>{e.createdAt?new Date(e.createdAt).toLocaleDateString():'-'}</td></tr>))}</tbody></table>}</div>}
+  </div>);}
+function MCPServersPage(){const[servers,setServers]=useState([]);const[expanded,setExpanded]=useState({});const[filter,setFilter]=useState('');const[toolFilters,setToolFilters]=useState({});const[logs,setLogs]=useState({});const[showLogs,setShowLogs]=useState(null);const[showAdd,setShowAdd]=useState(false);const[addForm,setAddForm]=useState({name:'',url:'',type:'stdio',command:'',args:[],env:{},disabled:false});const[addError,setAddError]=useState('');const[editServer,setEditServer]=useState(null);const[editForm,setEditForm]=useState({});const[editError,setEditError]=useState('');
+  const load=()=>{api('/mcp/servers').then(d=>{if(d)setServers(d.servers||[]);});};useEffect(()=>{load();},[]);
+  const toggle=(id)=>setExpanded(p=>({...p,[id]:!p[id]}));
+  const restart=(id)=>api('/mcp/servers/'+id+'/restart',{method:'POST'}).then(()=>{load();loadLogs(id);});
+  const toggleTool=(serverId,toolName,enabled)=>{api('/mcp/servers/'+serverId+'/tools/'+encodeURIComponent(toolName)+'/toggle',{method:'POST',body:JSON.stringify({enabled})}).then(load);};
+  const loadLogs=(id)=>{api('/mcp/servers/'+id+'/logs').then(d=>{if(d&&!d.__error)setLogs(p=>({...p,[id]:d.logs||[]}));});};
+  const viewLogs=(id)=>{setShowLogs(showLogs===id?null:id);if(showLogs!==id)loadLogs(id);};
+  const removeServer=(name)=>{if(!confirm('Remove server "'+name+'"?'))return;api('/mcp/servers/'+encodeURIComponent(name),{method:'DELETE'}).then(d=>{if(d&&!d.__error)load();});};
+  const startEdit=(s)=>{setEditServer(s.name);setEditForm({url:s.url||'',type:s.type||s.transportType||'stdio',command:s.command||'',args:s.args||[],env:s.env||{},disabled:s.disabled||false});setEditError('');};
+  const saveEdit=async()=>{setEditError('');const body={...editForm};delete body._mode;delete body._json;if(body.type!=='stdio'){delete body.command;delete body.args;}else{delete body.url;}if(!body.args||body.args.length===0)delete body.args;if(!body.env||Object.keys(body.env).length===0)delete body.env;const res=await api('/mcp/servers/'+encodeURIComponent(editServer),{method:'PUT',body:JSON.stringify(body)});if(res&&res.__error){setEditError(res.error||'Update failed');}else{setEditServer(null);load();}};
+  const addServer=async()=>{setAddError('');if(!addForm.name){setAddError('Name is required');return;}if(!addForm.url&&!addForm.command){setAddError('URL or command is required');return;}const body={...addForm};if(body.type!=='stdio'){delete body.command;delete body.args;}else{delete body.url;}if(!body.args||body.args.length===0)delete body.args;if(!body.env||Object.keys(body.env).length===0)delete body.env;const res=await api('/mcp/servers',{method:'POST',body:JSON.stringify(body)});if(res&&res.__error){setAddError(res.error||'Failed to add server');}else{setShowAdd(false);setAddForm({name:'',url:'',type:'httpStream',command:'',args:[],env:{},disabled:false});load();}};
+  const filtered=servers.filter(s=>!filter||s.name?.toLowerCase().includes(filter.toLowerCase()));
+  return(<div><div className="header"><h2>MCP Servers</h2><button className="btn btn-primary btn-sm" onClick={()=>setShowAdd(!showAdd)}>{showAdd?'Cancel':'+ Add Server'}</button></div>
+    {showAdd&&<div className="card" style={{marginBottom:12,padding:16}}><h3 style={{marginBottom:8}}>Add MCP Server</h3><div style={{display:'flex',gap:8,marginBottom:8}}><button className={'btn btn-sm '+(addForm._mode!=='json'?'btn-primary':'btn-outline')} onClick={()=>setAddForm(p=>({...p,_mode:'form'}))}>Form</button><button className={'btn btn-sm '+(addForm._mode==='json'?'btn-primary':'btn-outline')} onClick={()=>setAddForm(p=>({...p,_mode:'json',_json:JSON.stringify({name:p.name||'server-name',url:p.url||'',type:p.type||'httpStream',command:p.command||'',args:p.args||[],env:p.env||{}},null,2)}))}>JSON</button></div>{addError&&<div style={{background:'#fee2e2',color:'#991b1b',padding:'6px 10px',borderRadius:4,marginBottom:8,fontSize:12}}>{addError}</div>}{addForm._mode==='json'?<div><textarea className="input" style={{height:200,fontFamily:'monospace',fontSize:11,width:'100%'}} value={addForm._json||''} onChange={e=>setAddForm(p=>({...p,_json:e.target.value}))} placeholder='{"name":"stitch","command":"npx.cmd","args":["-y","@pkg/server"],"type":"stdio","env":{"KEY":"val"}}'/><div style={{marginTop:8}}><button className="btn btn-primary btn-sm" onClick={()=>{try{let raw=(addForm._json||'{}').trim();if(raw.startsWith('"'))raw='{'+raw+'}';const parsed=JSON.parse(raw);let body;if(parsed.name){body=parsed;}else{const keys=Object.keys(parsed);if(keys.length===1&&typeof parsed[keys[0]]==='object'){body={name:keys[0],...parsed[keys[0]]};}else{body=parsed;}}if(!body.name){setAddError('JSON must have "name" or be {"serverName":{...}}');return;}setAddError('');api('/mcp/servers',{method:'POST',body:JSON.stringify(body)}).then(r=>{if(r&&r.__error){setAddError(r.error||'Failed');}else{setShowAdd(false);setAddForm({name:'',url:'',type:'httpStream',command:'',args:[],env:{},disabled:false});load();}});}catch(e){setAddError('Invalid JSON: '+e.message);}}}>Save JSON</button></div></div>:<><div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}><div><label style={{fontSize:11,color:'#64748b'}}>Name *</label><input className="input" value={addForm.name} onChange={e=>setAddForm(p=>({...p,name:e.target.value}))} placeholder="e.g. atlassian"/></div><div><label style={{fontSize:11,color:'#64748b'}}>Transport Type *</label><select className="input" value={addForm.type} onChange={e=>setAddForm(p=>({...p,type:e.target.value}))}><option value="httpStream">HTTP Stream</option><option value="sse">SSE</option><option value="stdio">stdio</option></select></div><div><label style={{fontSize:11,color:'#64748b'}}>{addForm.type==='stdio'?'Command *':'URL *'}</label><input className="input" value={addForm.type==='stdio'?addForm.command:addForm.url} onChange={e=>setAddForm(p=>addForm.type==='stdio'?{...p,command:e.target.value}:{...p,url:e.target.value})} placeholder={addForm.type==='stdio'?'npx.cmd':'http://localhost:3062/mcp'}/></div>{addForm.type==='stdio'&&<div><label style={{fontSize:11,color:'#64748b'}}>Args (comma-separated)</label><input className="input" value={(addForm.args||[]).join(', ')} onChange={e=>setAddForm(p=>({...p,args:e.target.value?e.target.value.split(',').map(a=>a.trim()):[]}))} placeholder="-y, @package/server, proxy"/></div>}<div style={{gridColumn:'1/3'}}><label style={{fontSize:11,color:'#64748b'}}>Env Variables (KEY=VALUE per line)</label><textarea className="input" style={{height:60,fontFamily:'monospace',fontSize:11}} value={Object.entries(addForm.env||{}).map(([k,v])=>k+'='+v).join('\n')} onChange={e=>{const env={};e.target.value.split('\n').forEach(line=>{const idx=line.indexOf('=');if(idx>0)env[line.slice(0,idx).trim()]=line.slice(idx+1);});setAddForm(p=>({...p,env}));}} placeholder="API_KEY=your-key-here&#10;PROJECT_ID=my-project"/></div></div><div style={{marginTop:8,display:'flex',gap:8,alignItems:'center'}}><label style={{fontSize:12}}><input type="checkbox" checked={addForm.disabled} onChange={e=>setAddForm(p=>({...p,disabled:e.target.checked}))}/> Disabled</label><button className="btn btn-primary btn-sm" onClick={addServer}>Save</button></div></>}</div>}
+    <div className="card"><input className="filter-input" placeholder="Filter servers..." value={filter} onChange={e=>setFilter(e.target.value)}/>
+    <table><thead><tr><th style={{width:30}}></th><th>Server</th><th>Status</th><th>Tools</th><th>Actions</th></tr></thead><tbody>
+    {filtered.map(s=>(<React.Fragment key={s.id||s.name}>
+      <tr className={expanded[s.name]?'expanded-row':''}><td><span className="expand-btn" onClick={()=>toggle(s.name)}>{expanded[s.name]?'▼':'▶'}</span></td><td><strong>{s.name}</strong></td><td><span className={'badge '+(s.status==='running'||s.status==='connected'?'badge-green':'badge-red')}>{s.status}</span></td><td>{(s.tools||[]).length}</td><td><button className="btn btn-sm btn-outline" onClick={()=>restart(s.name)}>Restart</button>{' '}<button className="btn btn-sm btn-outline" onClick={()=>startEdit(s)}>Edit</button>{' '}<button className="btn btn-sm btn-outline" onClick={()=>viewLogs(s.name)}>{showLogs===s.name?'Hide Logs':'Logs'}</button>{' '}<button className="btn btn-sm btn-outline" style={{color:'#ef4444'}} onClick={()=>removeServer(s.name)}>Remove</button></td></tr>
+      {editServer===s.name&&<tr><td colSpan={5}><div style={{padding:12,background:'#f1f5f9',borderRadius:6}}><div style={{display:'flex',gap:8,marginBottom:8}}><button className={'btn btn-sm '+(editForm._mode!=='json'?'btn-primary':'btn-outline')} onClick={()=>setEditForm(p=>({...p,_mode:'form'}))}>Form</button><button className={'btn btn-sm '+(editForm._mode==='json'?'btn-primary':'btn-outline')} onClick={()=>setEditForm(p=>({...p,_mode:'json',_json:JSON.stringify({url:p.url||undefined,type:p.type||'stdio',command:p.command||undefined,args:p.args&&p.args.length?p.args:undefined,env:p.env&&Object.keys(p.env).length?p.env:undefined,disabled:p.disabled||false},null,2)}))}>JSON</button></div>{editError&&<div style={{background:'#fee2e2',color:'#991b1b',padding:'4px 8px',borderRadius:4,marginBottom:8,fontSize:12}}>{editError}</div>}{editForm._mode==='json'?<div><textarea className="input" style={{height:160,fontFamily:'monospace',fontSize:11,width:'100%'}} value={editForm._json||''} onChange={e=>setEditForm(p=>({...p,_json:e.target.value}))}/><div style={{marginTop:8,display:'flex',gap:6}}><button className="btn btn-primary btn-sm" onClick={()=>{try{const parsed=JSON.parse(editForm._json||'{}');setEditError('');api('/mcp/servers/'+encodeURIComponent(editServer),{method:'PUT',body:JSON.stringify(parsed)}).then(r=>{if(r&&r.__error){setEditError(r.error||'Failed');}else{setEditServer(null);load();}});}catch(e){setEditError('Invalid JSON: '+e.message);}}}>Save JSON</button><button className="btn btn-sm btn-outline" onClick={()=>setEditServer(null)}>Cancel</button></div></div>:<div><div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}><div><label style={{fontSize:11}}>Type</label><select className="input" value={editForm.type} onChange={e=>setEditForm(p=>({...p,type:e.target.value}))}><option value="httpStream">HTTP Stream</option><option value="sse">SSE</option><option value="stdio">stdio</option></select></div><div><label style={{fontSize:11}}>{editForm.type==='stdio'?'Command':'URL'}</label><input className="input" value={editForm.type==='stdio'?(editForm.command||''):(editForm.url||'')} onChange={e=>setEditForm(p=>editForm.type==='stdio'?{...p,command:e.target.value}:{...p,url:e.target.value})}/></div>{editForm.type==='stdio'&&<div><label style={{fontSize:11}}>Args (comma-separated)</label><input className="input" value={(editForm.args||[]).join(', ')} onChange={e=>setEditForm(p=>({...p,args:e.target.value?e.target.value.split(',').map(a=>a.trim()):[]}))} /></div>}<div style={{gridColumn:'1/3'}}><label style={{fontSize:11}}>Env Variables (KEY=VALUE per line)</label><textarea className="input" style={{height:50,fontFamily:'monospace',fontSize:11}} value={Object.entries(editForm.env||{}).map(([k,v])=>k+'='+v).join('\n')} onChange={e=>{const env={};e.target.value.split('\n').forEach(line=>{const idx=line.indexOf('=');if(idx>0)env[line.slice(0,idx).trim()]=line.slice(idx+1);});setEditForm(p=>({...p,env}));}}/></div></div><div style={{marginTop:8,display:'flex',gap:6,alignItems:'center'}}><label style={{fontSize:11}}><input type="checkbox" checked={editForm.disabled||false} onChange={e=>setEditForm(p=>({...p,disabled:e.target.checked}))}/> Disabled</label><button className="btn btn-primary btn-sm" onClick={saveEdit}>Save</button><button className="btn btn-sm btn-outline" onClick={()=>setEditServer(null)}>Cancel</button></div></div>}</div></td></tr>}
+      {expanded[s.name]&&<tr><td colSpan={5} style={{padding:0}}><div className="sub-table"><div style={{padding:'8px 12px'}}><input className="filter-input" placeholder="Filter tools..." value={toolFilters[s.name]||''} onChange={e=>setToolFilters(p=>({...p,[s.name]:e.target.value}))}/></div><table><thead><tr><th style={{width:40}}>#</th><th>Tool Name</th><th style={{width:80}}>Enabled</th></tr></thead><tbody>
+      {(s.tools||[]).filter(t=>{const n=typeof t==='string'?t:t.name;return!(toolFilters[s.name])||n.toLowerCase().includes((toolFilters[s.name]||'').toLowerCase());}).map((t,i)=>{const name=typeof t==='string'?t:t.name;const enabled=typeof t==='object'?t.enabled!==false:true;return(<tr key={name}><td>{i+1}</td><td>{name}</td><td><label className="toggle-switch"><input type="checkbox" checked={enabled} onChange={e=>toggleTool(s.name,name,e.target.checked)}/><span className="toggle-slider"></span></label></td></tr>);})}</tbody></table></div></td></tr>}
+      {showLogs===s.name&&<tr><td colSpan={5} style={{padding:0}}><div style={{maxHeight:250,overflow:'auto',background:'#1e293b',borderRadius:6,margin:8,padding:8}}>{(logs[s.name]||[]).length===0?<p style={{color:'#94a3b8',fontSize:12}}>No logs yet</p>:(logs[s.name]||[]).map((l,i)=>(<div key={i} className="log-line"><span className="ts">{new Date(l.timestamp).toLocaleTimeString()}</span><span className={'lvl-'+l.level}>[{l.level}]</span> <span style={{color:'#e2e8f0'}}>{l.message}</span></div>))}</div></td></tr>}
+    </React.Fragment>))}
+    {filtered.length===0&&<tr><td colSpan={5} style={{textAlign:'center',color:'#94a3b8'}}>No servers</td></tr>}
+    </tbody></table></div></div>);}
+function UsersPage(){const[users,setUsers]=useState([]);const[filter,setFilter]=useState('');const[showCreate,setShowCreate]=useState(false);const[groups,setGroups]=useState([]);const[msg,setMsg]=useState('');const[page,setPage]=useState(1);const[total,setTotal]=useState(0);const pageSize=50;
+  const load=(p)=>{api('/users?page='+p+'&pageSize='+pageSize).then(d=>{if(d&&!d.__error){setUsers(d.users||[]);setTotal(d.total||0);}});};
+  useEffect(()=>{load(page);api('/rbac/groups').then(d=>{if(d&&!d.__error)setGroups(d.groups||[]);});},[page]);
+  const filtered=users.filter(u=>!filter||(u.username||'').toLowerCase().includes(filter.toLowerCase())||(u.email||'').toLowerCase().includes(filter.toLowerCase()));
+  const toggleStatus=(u)=>{const ns=u.status==='ACTIVE'?'DISABLED':'ACTIVE';if(!confirm((ns==='DISABLED'?'Disable':'Enable')+' "'+u.username+'"?'))return;api('/users/'+u.userId+'/status',{method:'PUT',body:JSON.stringify({status:ns})}).then(d=>{if(d&&!d.__error){setMsg(u.username+' '+ns.toLowerCase());load(page);}});};
+  const forceLogout=(u)=>{if(!confirm('Force logout?'))return;api('/users/'+u.userId+'/force-logout',{method:'POST'}).then(d=>{if(d&&!d.__error)setMsg('Terminated '+d.terminated+' sessions');});};
+  const resetPwd=(u)=>{if(!confirm('Reset password?'))return;api('/users/'+u.userId+'/reset-password',{method:'POST'}).then(d=>{if(d&&!d.__error)setMsg('Temp: '+d.temporaryPassword);});};
+  const del=(u)=>{if(!confirm('DELETE "'+u.username+'"?'))return;api('/users/'+u.userId,{method:'DELETE'}).then(d=>{if(d&&!d.__error){setMsg('Deleted');load(page);}else setMsg(d?.error||'Failed');});};
+  const doExportCSV=()=>{exportCSV(users.map(u=>({username:u.username,email:u.email,status:u.status,group:u.accessGroupName||u.accessGroupId,lastLogin:u.lastLogin||''})),'users.csv');};
+  const totalPages=Math.ceil(total/pageSize);
+  return(<div><div className="header"><h2>Users</h2><div style={{display:'flex',gap:8}}><button className="btn btn-sm btn-outline" onClick={doExportCSV}>Export CSV</button><button className="btn btn-primary" onClick={()=>setShowCreate(true)}>+ New User</button></div></div>
+    {msg&&<div className="card" style={{background:'#f0fdf4',border:'1px solid #86efac'}}><span style={{fontSize:13}}>{msg}</span><button className="btn btn-sm btn-outline" style={{marginLeft:12}} onClick={()=>setMsg('')}>x</button></div>}
+    {showCreate&&<CreateUserForm groups={groups} onDone={()=>{setShowCreate(false);load(page);}} onCancel={()=>setShowCreate(false)}/>}
+    <div className="card"><input className="filter-input" placeholder="Filter users..." value={filter} onChange={e=>setFilter(e.target.value)}/><table><thead><tr><th>Username</th><th>Email</th><th>Group</th><th>Status</th><th>Last Login</th><th>Actions</th></tr></thead><tbody>
+    {filtered.map(u=>(<tr key={u.userId}><td><strong>{u.username}</strong>{u.forcePasswordChange&&<span className="badge badge-yellow" style={{marginLeft:6}}>pwd</span>}</td><td>{u.email||'-'}</td><td><span className="badge badge-blue">{u.accessGroupName||u.accessGroupId}</span></td><td><span className={'badge '+(u.status==='ACTIVE'?'badge-green':'badge-red')}>{u.status}</span></td><td style={{fontSize:12}}>{u.lastLogin?new Date(u.lastLogin).toLocaleString():'-'}</td><td><button className="btn btn-sm btn-outline" onClick={()=>toggleStatus(u)}>{u.status==='ACTIVE'?'Disable':'Enable'}</button>{' '}<button className="btn btn-sm btn-outline" onClick={()=>forceLogout(u)}>Logout</button>{' '}<button className="btn btn-sm btn-outline" onClick={()=>resetPwd(u)}>Reset</button>{' '}{u.username!=='admin'&&<button className="btn btn-sm btn-danger" onClick={()=>del(u)}>Del</button>}</td></tr>))}
+    {filtered.length===0&&<tr><td colSpan={6} style={{textAlign:'center',color:'#94a3b8'}}>No users</td></tr>}</tbody></table>
+    {totalPages>1&&<div style={{marginTop:12,display:'flex',gap:8,alignItems:'center'}}><button className="btn btn-sm btn-outline" disabled={page<=1} onClick={()=>setPage(p=>p-1)}>Prev</button><span style={{fontSize:12,color:'#64748b'}}>Page {page}/{totalPages}</span><button className="btn btn-sm btn-outline" disabled={page>=totalPages} onClick={()=>setPage(p=>p+1)}>Next</button></div>}
+    </div></div>);}
+function CreateUserForm({groups,onDone,onCancel}){const[username,setUsername]=useState('');const[email,setEmail]=useState('');const[password,setPassword]=useState('');const[groupId,setGroupId]=useState(groups[0]?.id||groups[0]?.accessGroupId||'');const[error,setError]=useState('');const submit=async()=>{setError('');if(!username||!password){setError('Required');return;}const res=await api('/users',{method:'POST',body:JSON.stringify({username,email,password,accessGroupId:groupId})});if(res&&!res.__error)onDone();else setError(res?.error||'Failed');};return(<div className="card" style={{border:'2px solid #3b82f6'}}><h4 style={{marginBottom:12}}>Create User</h4>{error&&<div style={{color:'#dc2626',fontSize:13,marginBottom:8}}>{error}</div>}<div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,marginBottom:12}}><input className="input" placeholder="Username" value={username} onChange={e=>setUsername(e.target.value)}/><input className="input" placeholder="Email" value={email} onChange={e=>setEmail(e.target.value)}/><input className="input" type="password" placeholder="Password" value={password} onChange={e=>setPassword(e.target.value)}/><select className="input" value={groupId} onChange={e=>setGroupId(e.target.value)}>{groups.map(g=>(<option key={g.id||g.accessGroupId} value={g.id||g.accessGroupId}>{g.name||g.accessGroupName}</option>))}</select></div><button className="btn btn-primary" onClick={submit}>Create</button>{' '}<button className="btn btn-outline" onClick={onCancel}>Cancel</button></div>);}
+function RBACPage(){const[groups,setGroups]=useState([]);const[filter,setFilter]=useState('');const[editing,setEditing]=useState(null);const[mcpTools,setMcpTools]=useState({});
+  useEffect(()=>{api('/rbac/groups').then(d=>{if(d)setGroups(d.groups||[]);});api('/mcp/servers').then(d=>{if(!d)return;const map={};(d.servers||[]).forEach(s=>{map[s.name]=(s.tools||[]).map(t=>typeof t==='string'?t:t.name);});setMcpTools(map);});},[]);
+  const filtered=groups.filter(g=>!filter||(g.name||'').toLowerCase().includes(filter.toLowerCase()));
+  const startEdit=(g)=>setEditing(JSON.parse(JSON.stringify(g)));
+  const saveGroup=()=>{const method=editing.id?'PUT':'POST';const path=editing.id?'/rbac/groups/'+editing.id:'/rbac/groups';api(path,{method,body:JSON.stringify(editing)}).then(()=>{setEditing(null);api('/rbac/groups').then(d=>{if(d)setGroups(d.groups||[]);});window.dispatchEvent(new CustomEvent('rbac-changed'));});};
+  const deleteGroup=(g)=>{if(!confirm('Delete "'+g.name+'"?'))return;api('/rbac/groups/'+g.id,{method:'DELETE'}).then(()=>{api('/rbac/groups').then(d=>{if(d)setGroups(d.groups||[]);});window.dispatchEvent(new CustomEvent('rbac-changed'));});};
+  if(editing)return<RBACEditForm group={editing} setGroup={setEditing} onSave={saveGroup} onCancel={()=>setEditing(null)} mcpTools={mcpTools}/>;
+  return(<div><div className="header"><h2>RBAC</h2><button className="btn btn-primary" onClick={()=>startEdit({name:'',permissions:[],isSystem:false})}>+ New Group</button></div><div className="card"><input className="filter-input" placeholder="Filter..." value={filter} onChange={e=>setFilter(e.target.value)}/><table><thead><tr><th>Group</th><th>Users</th><th>Permissions</th><th>System</th><th>Actions</th></tr></thead><tbody>{filtered.map(g=>(<tr key={g.id||g.name}><td><strong>{g.name}</strong></td><td>{g.userCount||0}</td><td>{(g.permissions||[]).length}</td><td>{g.isSystem?'✓':''}</td><td><button className="btn btn-sm btn-outline" onClick={()=>startEdit(g)}>Edit</button>{' '}{!g.isSystem&&<button className="btn btn-sm btn-danger" onClick={()=>deleteGroup(g)}>Delete</button>}</td></tr>))}{filtered.length===0&&<tr><td colSpan={5} style={{textAlign:'center',color:'#94a3b8'}}>No groups</td></tr>}</tbody></table></div></div>);}
+function RBACEditForm({group,setGroup,onSave,onCancel,mcpTools}){const allPerms=Object.keys(RULES);const[permFilter,setPermFilter]=useState('');const[expandedPerms,setExpandedPerms]=useState({});
+  const filteredPerms=allPerms.filter(p=>!permFilter||p.toLowerCase().includes(permFilter.toLowerCase()));
+  const isOn=(perm)=>(group.permissions||[]).some(p=>(typeof p==='string'?p:p.name)===perm);
+  const togglePerm=(perm)=>{const perms=group.permissions||[];if(isOn(perm))setGroup({...group,permissions:perms.filter(p=>(typeof p==='string'?p:p.name)!==perm)});else setGroup({...group,permissions:[...perms,{name:perm,roleData:{}}]});};
+  const getObj=(perm)=>{const f=(group.permissions||[]).find(p=>(typeof p==='string'?p:p.name)===perm);if(!f)return null;return typeof f==='string'?{name:f,roleData:{}}:f;};
+  const updateRD=(perm,k,v)=>{const perms=[...(group.permissions||[])];const idx=perms.findIndex(p=>(typeof p==='string'?p:p.name)===perm);if(idx===-1)return;const obj=typeof perms[idx]==='string'?{name:perms[idx],roleData:{}}:{...perms[idx]};obj.roleData={...obj.roleData,[k]:v};perms[idx]=obj;setGroup({...group,permissions:perms});};
+  return(<div><div className="header"><h2>{group.id?'Edit':'New'} Group</h2></div><div className="card"><div style={{marginBottom:16}}><label style={{fontSize:13}}>Name</label><input className="input" style={{maxWidth:400}} value={group.name} onChange={e=>setGroup({...group,name:e.target.value})}/></div><h4 style={{marginBottom:8}}>Permissions</h4><input className="filter-input" placeholder="Filter..." value={permFilter} onChange={e=>setPermFilter(e.target.value)}/><table><thead><tr><th style={{width:40}}>✓</th><th style={{width:30}}></th><th>Permission</th><th>Rules</th></tr></thead><tbody>{filteredPerms.map(perm=>{const en=isOn(perm);const rules=RULES[perm]||[];const isExp=expandedPerms[perm];return(<React.Fragment key={perm}><tr className={isExp?'expanded-row':''}><td><input type="checkbox" checked={en} onChange={()=>togglePerm(perm)}/></td><td>{en&&rules.length>0&&<span className="expand-btn" onClick={()=>setExpandedPerms(p=>({...p,[perm]:!p[perm]}))}>{isExp?'▼':'▶'}</span>}</td><td><strong>{perm}</strong></td><td><span className="badge badge-blue">{rules.length}</span></td></tr>{en&&isExp&&<tr><td colSpan={4} style={{padding:0}}><div style={{padding:'12px 16px 12px 48px',background:'#f8fafc'}}>{rules.map(rule=>(<div className="rule-row" key={rule.name}><span className="rule-label">{rule.name}</span>{rule.locked?<span className="locked"><input type="checkbox" disabled checked={rule.default}/> LOCKED</span>:rule.type==='boolean'?<input type="checkbox" checked={(getObj(perm)?.roleData||{})[rule.name]!==undefined?(getObj(perm)?.roleData||{})[rule.name]:rule.default} onChange={e=>updateRD(perm,rule.name,e.target.checked)}/>:rule.type==='number'?<input type="number" min={rule.min} max={rule.max} value={(getObj(perm)?.roleData||{})[rule.name]||rule.default} onChange={e=>updateRD(perm,rule.name,Number(e.target.value))} style={{width:80,padding:'4px',border:'1px solid #cbd5e1',borderRadius:4}}/>:rule.type==='enum[]'?<div className="perm-check">{rule.allowed.map(opt=>{const sel=(getObj(perm)?.roleData||{})[rule.name]||rule.default;const isAll=(sel||[]).includes('*');const checked=opt==='*'?isAll:(isAll||(sel||[]).includes(opt));return<label key={opt}><input type="checkbox" checked={checked} onChange={e=>{let next;if(opt==='*'){next=e.target.checked?['*']:[];}else{next=(sel||[]).filter(x=>x!=='*'&&x!==opt);if(e.target.checked)next.push(opt);if(next.length===rule.allowed.length-1)next=['*'];}updateRD(perm,rule.name,next);}}/>{opt}</label>;})}</div>:rule.type==='mcp-server-table'?(()=>{const sp=(getObj(perm)?.roleData||{})[rule.name]||{};const servers=Object.keys(mcpTools||{});return<div><table style={{fontSize:11,borderCollapse:'collapse',width:'100%'}}><thead><tr><th style={{textAlign:'left',padding:'4px 8px'}}>Server</th><th style={{padding:'4px 8px'}}>Remove</th><th style={{padding:'4px 8px'}}>Edit</th><th style={{padding:'4px 8px'}}>Restart</th></tr></thead><tbody>{servers.map(s=>{const perms=sp[s]||{allowRemove:true,allowEdit:true,allowRestart:true};return<tr key={s}><td style={{padding:'4px 8px'}}>{s}</td><td style={{textAlign:'center'}}><input type="checkbox" checked={perms.allowRemove!==false} onChange={e=>{const next={...sp,[s]:{...perms,allowRemove:e.target.checked}};updateRD(perm,rule.name,next);}}/></td><td style={{textAlign:'center'}}><input type="checkbox" checked={perms.allowEdit!==false} onChange={e=>{const next={...sp,[s]:{...perms,allowEdit:e.target.checked}};updateRD(perm,rule.name,next);}}/></td><td style={{textAlign:'center'}}><input type="checkbox" checked={perms.allowRestart!==false} onChange={e=>{const next={...sp,[s]:{...perms,allowRestart:e.target.checked}};updateRD(perm,rule.name,next);}}/></td></tr>;})}{servers.length===0&&<tr><td colSpan={4} style={{color:'#94a3b8',fontSize:11}}>No servers</td></tr>}</tbody></table></div>;})():rule.type==='mcp-tool-access-table'?(()=>{const ta=(getObj(perm)?.roleData||{})[rule.name]||{};const serverTools=mcpTools||{};return<div>{Object.entries(serverTools).map(([srv,tools])=>{const srvAccess=ta[srv]||{enabled:true,tools:{}};const isExp=expandedPerms['_tool_'+srv];return<div key={srv} style={{marginBottom:4,border:'1px solid #e2e8f0',borderRadius:4}}><div style={{display:'flex',alignItems:'center',padding:'4px 8px',background:'#f8fafc',cursor:'pointer'}} onClick={()=>setExpandedPerms(p=>({...p,['_tool_'+srv]:!p['_tool_'+srv]}))}><input type="checkbox" checked={srvAccess.enabled!==false} onClick={e=>e.stopPropagation()} onChange={e=>{const next={...ta,[srv]:{...srvAccess,enabled:e.target.checked}};updateRD(perm,rule.name,next);}}/><strong style={{marginLeft:6,fontSize:11}}>{srv}</strong><span style={{marginLeft:'auto',fontSize:10,color:'#64748b'}}>{isExp?'▼':'▶'} {(tools||[]).length} tools</span></div>{isExp&&srvAccess.enabled!==false&&<div style={{padding:'4px 8px 8px',maxHeight:200,overflow:'auto'}}>{(tools||[]).map(t=>{const allowed=(srvAccess.tools||{})[t]!==false;return<label key={t} style={{display:'block',fontSize:11,padding:'2px 0'}}><input type="checkbox" checked={allowed} onChange={e=>{const next={...ta,[srv]:{...srvAccess,tools:{...(srvAccess.tools||{}),[t]:e.target.checked}}};updateRD(perm,rule.name,next);}}/> {t}</label>;})}</div>}</div>;})}{Object.keys(serverTools).length===0&&<span style={{fontSize:11,color:'#94a3b8'}}>No MCP servers connected</span>}</div>;})():<span style={{fontSize:12,color:'#94a3b8'}}>complex</span>}</div>))}</div></td></tr>}</React.Fragment>);})}</tbody></table><div style={{marginTop:20,display:'flex',gap:8}}><button className="btn btn-primary" onClick={onSave}>Save</button><button className="btn btn-outline" onClick={onCancel}>Cancel</button></div></div></div>);}
+function ConfigurationPage(){const[config,setConfig]=useState({});const[history,setHistory]=useState([]);const[restartKeys,setRestartKeys]=useState({});const[filter,setFilter]=useState('');const[editing,setEditing]=useState(null);const[editValue,setEditValue]=useState('');const[saving,setSaving]=useState(false);const[msg,setMsg]=useState('');const[activeTab,setActiveTab]=useState('all');
+  const[llmTesting,setLlmTesting]=useState(false);const[llmTestResult,setLlmTestResult]=useState(null);const[showApiKey,setShowApiKey]=useState(false);const[apiKeyInput,setApiKeyInput]=useState('');const[useDefaultUrl,setUseDefaultUrl]=useState(true);const[liveModels,setLiveModels]=useState(null);
+  const fetchModels=async(prov,baseUrl)=>{try{const d=await api('/llm/models?provider='+encodeURIComponent(prov||'')+'&baseUrl='+encodeURIComponent(baseUrl||''));if(d&&!d.__error&&d.models&&d.models.length>0)setLiveModels(d.models);else setLiveModels(null);}catch{setLiveModels(null);}};
+  const load=()=>{api('/config').then(d=>{if(d&&!d.__error){setConfig(d.config||{});setHistory(d.history||[]);setRestartKeys(d.restartRequired||{});const llm=d.config?.llm||{};const prov=llm.provider||'ollama';const defs={'ollama':'http://localhost:11434','lmstudio':'http://localhost:1234/v1','openrouter':'https://openrouter.ai/api/v1','anthropic':'https://api.anthropic.com','openai':'https://api.openai.com/v1','onnx':''};setUseDefaultUrl(!llm.baseUrl||llm.baseUrl===(defs[prov]||''));fetchModels(prov,llm.baseUrl||defs[prov]||'');}});};useEffect(()=>{load();},[]);
+  const sections=Object.keys(config).filter(s=>activeTab==='all'||s===activeTab).filter(s=>!filter||s.toLowerCase().includes(filter.toLowerCase())||Object.keys(config[s]||{}).some(k=>k.toLowerCase().includes(filter.toLowerCase())));
+  const needsRestart=(s,k)=>(restartKeys[s]||[]).includes(k);
+  const startEdit=(s,k,v)=>{setEditing({section:s,key:k});setEditValue(typeof v==='string'?v:JSON.stringify(v));};
+  const saveEdit=async()=>{if(!editing)return;setSaving(true);let pv;try{pv=JSON.parse(editValue);}catch{pv=editValue;}const res=await api('/config/'+editing.section+'/'+editing.key,{method:'PATCH',body:JSON.stringify({value:pv})});setSaving(false);if(res&&!res.__error){setMsg((res.requiresRestart?'⚠️ Restart needed — ':'✓ ')+'Updated');setEditing(null);load();}else setMsg('Failed');};
+  const saveLlmField=async(key,value)=>{setSaving(true);const res=await api('/config/llm/'+key,{method:'PATCH',body:JSON.stringify({value})});setSaving(false);if(res&&!res.__error){setMsg('✓ '+key+' updated'+(res.requiresRestart?' (restart needed)':''));load();}else setMsg('Failed to update '+key);};
+  const testLlm=async()=>{setLlmTesting(true);setLlmTestResult(null);try{const d=await api('/llm/test',{method:'POST'});if(d&&!d.__error){setLlmTestResult({success:d.success,message:(d.success?'✓ ':'✗ ')+d.message});}else{setLlmTestResult({success:false,message:d?.error||'Request failed'});}}catch(e){setLlmTestResult({success:false,message:e.message});}setLlmTesting(false);};
+  const PROVIDERS=[{id:'ollama',name:'Ollama — Local models (no API key needed)'},{id:'anthropic',name:'Anthropic — Claude models'},{id:'openai',name:'OpenAI — GPT models'},{id:'openrouter',name:'OpenRouter — Multi-model gateway'},{id:'lmstudio',name:'LM Studio — Local models'},{id:'onnx',name:'ONNX — CPU-only local (Phi-3, SmolLM2)'}];
+  const PROVIDER_DEFAULTS={'ollama':'http://localhost:11434','lmstudio':'http://localhost:1234/v1','openrouter':'https://openrouter.ai/api/v1','anthropic':'https://api.anthropic.com','openai':'https://api.openai.com/v1','onnx':''};
+  const PROVIDER_MODELS={'ollama':[{id:'llama3.1',name:'Llama 3.1'},{id:'llama3.2',name:'Llama 3.2'},{id:'codellama',name:'Code Llama'},{id:'mistral',name:'Mistral'},{id:'mixtral',name:'Mixtral'},{id:'deepseek-coder-v2',name:'DeepSeek Coder v2'},{id:'qwen2.5-coder',name:'Qwen 2.5 Coder'},{id:'qwen2.5:7b-instruct-q4_K_M',name:'Qwen 2.5 7B Q4'}],'anthropic':[{id:'claude-sonnet-4-20250514',name:'Claude Sonnet 4'},{id:'claude-opus-4-8',name:'Claude Opus 4.8'},{id:'claude-haiku-4-5-20251001',name:'Claude Haiku 4.5'}],'openai':[{id:'gpt-4o',name:'GPT-4o'},{id:'gpt-4o-mini',name:'GPT-4o Mini'},{id:'o3',name:'o3'},{id:'o4-mini',name:'o4 Mini'}],'openrouter':[{id:'anthropic/claude-sonnet-4',name:'Claude Sonnet 4'},{id:'openai/gpt-4o',name:'GPT-4o'},{id:'google/gemini-2.5-pro',name:'Gemini 2.5 Pro'},{id:'deepseek/deepseek-r1',name:'DeepSeek R1'}],'lmstudio':[{id:'local-model',name:'Local Model (auto-detect)'},{id:'qwen2.5-coder-32b',name:'Qwen 2.5 Coder 32B'}],'onnx':[{id:'phi-3-mini',name:'Phi-3 Mini (3.8B)'},{id:'smollm2-360m',name:'SmolLM2 (360M)'}]};
+  const renderLlmSection=()=>{const llm=config.llm||{};const prov=llm.provider||'ollama';const isLocal=['ollama','lmstudio','onnx'].includes(prov);const models=liveModels||PROVIDER_MODELS[prov]||[];const defUrl=PROVIDER_DEFAULTS[prov]||'';const currentModel=llm.model||'';const modelInList=models.some(m=>m.id===currentModel);return(<div style={{marginBottom:20}}><h4 style={{fontSize:14,color:'#334155',marginBottom:12}}>🤖 LLM Configuration</h4><div className="card" style={{border:'2px solid #dbeafe'}}><div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16}}><div style={{marginBottom:12}}><label style={{fontSize:13,fontWeight:600,color:'#334155',marginBottom:4,display:'block'}}>Provider</label><select className="input" style={{marginBottom:0}} value={prov} onChange={e=>{const np=e.target.value;saveLlmField('provider',np);setUseDefaultUrl(true);const nd=PROVIDER_DEFAULTS[np]||'';saveLlmField('baseUrl',nd);setLiveModels(null);fetchModels(np,nd);const dm=(PROVIDER_MODELS[np]||[])[0];if(dm)saveLlmField('model',dm.id);}}>{PROVIDERS.map(p=>(<option key={p.id} value={p.id}>{p.name}</option>))}</select></div><div style={{marginBottom:12}}><label style={{fontSize:13,fontWeight:600,color:'#334155',marginBottom:4,display:'block'}}>Model {liveModels&&<span style={{fontSize:10,color:'#16a34a'}}>● live ({models.length})</span>}{!liveModels&&<span style={{fontSize:10,color:'#94a3b8'}}>○ static</span>}</label><select className="input" style={{marginBottom:0}} value={modelInList?currentModel:'__custom__'} onChange={e=>{if(e.target.value!=='__custom__')saveLlmField('model',e.target.value);}}>{models.map(m=>(<option key={m.id} value={m.id}>{m.name}</option>))}{!modelInList&&currentModel&&<option value="__custom__">⚡ {currentModel} (custom)</option>}</select>{!modelInList&&currentModel&&<div style={{fontSize:11,color:'#f59e0b',marginTop:2}}>Custom model not in list</div>}<button className="btn btn-sm btn-outline" style={{marginTop:4,fontSize:11}} onClick={()=>fetchModels(prov,llm.baseUrl||defUrl)}>↻ Refresh models</button></div><div style={{marginBottom:12}}><label style={{fontSize:13,fontWeight:600,color:'#334155',marginBottom:4,display:'block'}}>Base URL {needsRestart('llm','baseUrl')&&<span className="badge badge-yellow" style={{marginLeft:6}}>Restart</span>}</label><label style={{fontSize:12,color:'#64748b',display:'flex',alignItems:'center',gap:4,marginBottom:4,cursor:'pointer'}}><input type="checkbox" checked={useDefaultUrl} onChange={e=>{setUseDefaultUrl(e.target.checked);if(e.target.checked)saveLlmField('baseUrl',defUrl);}}/> Use default URL {defUrl&&<code style={{fontSize:10,background:'#f1f5f9',padding:'1px 4px',borderRadius:3}}>{defUrl}</code>}</label><input className="input" style={{marginBottom:0,opacity:useDefaultUrl?0.5:1}} value={useDefaultUrl?defUrl:(llm.baseUrl||'')} disabled={useDefaultUrl} onChange={e=>setConfig(c=>({...c,llm:{...c.llm,baseUrl:e.target.value}}))} onBlur={e=>{if(!useDefaultUrl)saveLlmField('baseUrl',e.target.value);}}/></div><div style={{marginBottom:12}}><label style={{fontSize:13,fontWeight:600,color:'#334155',marginBottom:4,display:'block'}}>API Key {isLocal&&<span style={{fontSize:11,color:'#94a3b8'}}>(not needed)</span>}</label><div style={{display:'flex',gap:4}}><input className="input" style={{marginBottom:0,flex:1}} type={showApiKey?'text':'password'} value={apiKeyInput||(llm.apiKey==='***'?'':llm.apiKey)||''} onChange={e=>setApiKeyInput(e.target.value)} onBlur={e=>{if(e.target.value&&e.target.value!=='***')saveLlmField('apiKey',e.target.value);}} placeholder={llm.apiKey==='***'?'••• (saved)':'Enter API key...'} disabled={isLocal}/><button className="btn btn-sm btn-outline" onClick={()=>setShowApiKey(!showApiKey)} disabled={isLocal}>{showApiKey?'🙈':'👁'}</button>{llm.apiKey==='***'&&!isLocal&&<button className="btn btn-sm btn-danger" onClick={()=>saveLlmField('apiKey','')}>✕</button>}</div>{llm.apiKey==='***'&&!isLocal&&<div style={{fontSize:11,color:'#16a34a',marginTop:2}}>✓ Key saved</div>}</div></div><div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr 1fr',gap:12,marginTop:8}}><div><label style={{fontSize:12,color:'#64748b'}}>Temperature</label><input className="input" style={{marginBottom:0}} type="number" step="0.1" min="0" max="2" value={llm.temperature??0.3} onChange={e=>setConfig(c=>({...c,llm:{...c.llm,temperature:parseFloat(e.target.value)}}))} onBlur={e=>saveLlmField('temperature',parseFloat(e.target.value))}/></div><div><label style={{fontSize:12,color:'#64748b'}}>Max Tokens</label><input className="input" style={{marginBottom:0}} type="number" min="1" max="8000" value={llm.maxTokens??300} onChange={e=>setConfig(c=>({...c,llm:{...c.llm,maxTokens:parseInt(e.target.value)}}))} onBlur={e=>saveLlmField('maxTokens',parseInt(e.target.value))}/></div><div><label style={{fontSize:12,color:'#64748b'}}>Tag Analysis</label><select className="input" style={{marginBottom:0}} value={String(llm.tagAnalysisEnabled??true)} onChange={e=>saveLlmField('tagAnalysisEnabled',e.target.value==='true')}><option value="true">Enabled</option><option value="false">Disabled</option></select></div><div><label style={{fontSize:12,color:'#64748b'}}>Tag Confidence</label><input className="input" style={{marginBottom:0}} type="number" step="0.1" min="0" max="1" value={llm.tagConfidenceThreshold??0.7} onChange={e=>setConfig(c=>({...c,llm:{...c.llm,tagConfidenceThreshold:parseFloat(e.target.value)}}))} onBlur={e=>saveLlmField('tagConfidenceThreshold',parseFloat(e.target.value))}/></div></div><div style={{marginTop:16,display:'flex',gap:8,alignItems:'center'}}><button className="btn btn-primary" onClick={testLlm} disabled={llmTesting}>{llmTesting?'Testing...':'🧪 Test LLM Connection'}</button>{llmTestResult&&<span style={{fontSize:13,color:llmTestResult.success?'#16a34a':'#dc2626'}}>{llmTestResult.message}</span>}</div></div></div>);};
+  return(<div><div className="header"><h2>Configuration</h2></div>{msg&&<div className="card" style={{background:'#f0fdf4',border:'1px solid #86efac'}}><span style={{fontSize:13}}>{msg}</span><button className="btn btn-sm btn-outline" style={{marginLeft:12}} onClick={()=>setMsg('')}>x</button></div>}<div style={{display:'flex',gap:4,marginBottom:12,flexWrap:'wrap'}}>{['all',...Object.keys(config)].map(tab=>(<button key={tab} className={'btn btn-sm '+(activeTab===tab?'btn-primary':'btn-outline')} onClick={()=>setActiveTab(tab)}>{tab==='all'?'All':tab}</button>))}</div><div className="card"><input className="filter-input" placeholder="Filter..." value={filter} onChange={e=>setFilter(e.target.value)}/>{sections.map(section=>{if(section==='llm'&&(activeTab==='all'||activeTab==='llm'))return<React.Fragment key={section}>{renderLlmSection()}</React.Fragment>;return(<div key={section} style={{marginBottom:20}}><h4 style={{fontSize:14,color:'#334155',marginBottom:8}}>{section}</h4><table><thead><tr><th>Key</th><th>Value</th><th style={{width:70}}>Restart</th><th style={{width:100}}>Actions</th></tr></thead><tbody>{Object.entries(config[section]||{}).map(([k,v])=>{const isE=editing&&editing.section===section&&editing.key===k;return(<tr key={k}><td><strong>{k}</strong></td><td>{isE?<input className="input" style={{marginBottom:0}} value={editValue} onChange={e=>setEditValue(e.target.value)}/>:<code style={{fontSize:12}}>{JSON.stringify(v)}</code>}</td><td>{needsRestart(section,k)&&<span className="badge badge-yellow">Yes</span>}</td><td>{isE?<><button className="btn btn-sm btn-primary" onClick={saveEdit} disabled={saving}>Save</button>{' '}<button className="btn btn-sm btn-outline" onClick={()=>setEditing(null)}>x</button></>:<button className="btn btn-sm btn-outline" onClick={()=>startEdit(section,k,v)}>Edit</button>}</td></tr>);})}</tbody></table></div>);})}</div>{history.length>0&&<div className="card"><h4 style={{marginBottom:8,fontSize:14}}>Recent Changes</h4><table><thead><tr><th>Time</th><th>Key</th><th>Old</th><th>New</th><th>By</th></tr></thead><tbody>{history.map((h,i)=>(<tr key={i}><td style={{fontSize:11}}>{h.changedAt?new Date(h.changedAt).toLocaleString():'-'}</td><td><code style={{fontSize:11}}>{h.section}.{h.key}</code></td><td style={{fontSize:11}}>{h.oldValue||'-'}</td><td style={{fontSize:11}}>{h.newValue}</td><td>{h.changedBy}</td></tr>))}</tbody></table></div>}</div>);}
+function SearchExplorerPage(){const[query,setQuery]=useState('');const[results,setResults]=useState([]);const[debug,setDebug]=useState(true);const[debugInfo,setDebugInfo]=useState(null);
+  const doSearch=()=>{if(!query)return;api('/search',{method:'POST',body:JSON.stringify({query,debug})}).then(d=>{if(d){setResults(d.results||[]);setDebugInfo(d.debug||null);}});};
+  return(<div><div className="header"><h2>Search Explorer</h2></div><div className="card">
+    <div className="toolbar"><input className="input" style={{flex:1,marginBottom:0}} placeholder="Enter search query..." value={query} onChange={e=>setQuery(e.target.value)} onKeyDown={e=>e.key==='Enter'&&doSearch()}/><label style={{fontSize:13,display:'flex',alignItems:'center',gap:4}}><input type="checkbox" checked={debug} onChange={e=>setDebug(e.target.checked)}/>Debug</label><button className="btn btn-primary" onClick={doSearch}>Search</button></div>
+    {debugInfo&&<div style={{background:'#f8fafc',padding:8,borderRadius:6,marginBottom:12,fontSize:12}}><strong>Debug:</strong> Tokens: [{(debugInfo.queryTokens||[]).join(', ')}] | Candidates: {debugInfo.totalCandidates} | Time: {debugInfo.searchTimeMs}ms</div>}
+    {results.length>0&&<table><thead><tr><th>#</th><th>Source</th><th>Score</th>{debug&&<th>Breakdown</th>}<th>Snippet</th></tr></thead><tbody>
+    {results.map((r,i)=>(<tr key={i}><td>{i+1}</td><td><strong>{r.source}</strong><br/><span className="badge badge-blue" style={{fontSize:10}}>{r.tier}</span></td><td><strong>{r.score?.toFixed(3)}</strong></td>{debug&&<td style={{fontSize:11}}>{r.scores&&<div style={{display:'flex',flexDirection:'column',gap:2}}>{Object.entries(r.scores).map(([k,v])=>(<div key={k} style={{display:'flex',alignItems:'center',gap:4}}><span style={{width:60}}>{k}:</span><div className="score-bar" style={{width:80}}><div className="score-fill" style={{width:(v*100)+'%',background:v>0.8?'#22c55e':v>0.6?'#f59e0b':'#ef4444'}}/></div><span>{v.toFixed(2)}</span></div>))}</div>}</td>}<td style={{maxWidth:300,fontSize:12,overflow:'hidden',textOverflow:'ellipsis'}}>{r.content?.substring(0,100)}</td></tr>))}</tbody></table>}
+  </div></div>);}
+function AuditTrailPage(){const[logs,setLogs]=useState([]);const[filter,setFilter]=useState('');const[total,setTotal]=useState(0);const[page,setPage]=useState(1);
+  const load=(p)=>{api('/audit?page='+p+'&pageSize=30').then(d=>{if(d&&!d.__error){setLogs(d.entries||[]);setTotal(d.total||0);}});};useEffect(()=>{load(page);},[page]);
+  const filtered=logs.filter(l=>!filter||JSON.stringify(l).toLowerCase().includes(filter.toLowerCase()));const totalPages=Math.ceil(total/30);
+  const doExportCSV=()=>{exportCSV(logs.map(l=>({time:l.timestamp,user:l.username,action:l.action,resource:l.resource,resourceId:l.resourceId,details:l.changes})),'audit-log.csv');};
+  return(<div><div className="header"><h2>Audit Trail</h2><div style={{display:'flex',gap:8}}><button className="btn btn-sm btn-outline" onClick={doExportCSV}>Export CSV</button><span className="badge badge-blue">{total} entries</span></div></div><div className="card"><input className="filter-input" placeholder="Filter..." value={filter} onChange={e=>setFilter(e.target.value)}/><table><thead><tr><th>Time</th><th>User</th><th>Action</th><th>Resource</th><th>Details</th></tr></thead><tbody>{filtered.map((l,i)=>(<tr key={l.auditId||i}><td style={{fontSize:12,whiteSpace:'nowrap'}}>{l.timestamp?new Date(l.timestamp).toLocaleString():'-'}</td><td>{l.username}</td><td><span className="badge badge-blue">{l.action}</span></td><td>{l.resource}{l.resourceId?' / '+l.resourceId:''}</td><td style={{fontSize:12,maxWidth:200,overflow:'hidden',textOverflow:'ellipsis'}}>{l.changes||'-'}</td></tr>))}{filtered.length===0&&<tr><td colSpan={5} style={{textAlign:'center',color:'#94a3b8'}}>No logs</td></tr>}</tbody></table>{totalPages>1&&<div style={{marginTop:12,display:'flex',gap:8,alignItems:'center'}}><button className="btn btn-sm btn-outline" disabled={page<=1} onClick={()=>setPage(p=>p-1)}>Prev</button><span style={{fontSize:13}}>Page {page}/{totalPages}</span><button className="btn btn-sm btn-outline" disabled={page>=totalPages} onClick={()=>setPage(p=>p+1)}>Next</button></div>}</div></div>);}
+function ProfilePage(){const[profile,setProfile]=useState({});const[email,setEmail]=useState('');const[editing,setEditing]=useState(false);const[msg,setMsg]=useState('');
+  useEffect(()=>{api('/profile').then(d=>{if(d){setProfile(d);setEmail(d.email||'');}});},[]);
+  const save=()=>{api('/profile',{method:'POST',body:JSON.stringify({email})}).then(d=>{if(d&&!d.__error){setMsg('Profile updated');setEditing(false);setProfile(p=>({...p,email}));}});};
+  return(<div><div className="header"><h2>Profile</h2></div>{msg&&<div className="card" style={{background:'#f0fdf4',border:'1px solid #86efac'}}><span style={{fontSize:13}}>{msg}</span><button className="btn btn-sm btn-outline" style={{marginLeft:12}} onClick={()=>setMsg('')}>x</button></div>}<div className="card"><table><tbody>
+    <tr><td style={{width:150}}><strong>Username</strong></td><td>{profile.username||'admin'}</td></tr>
+    <tr><td><strong>Email</strong></td><td>{editing?<><input className="input" style={{width:300,display:'inline-block',marginBottom:0}} value={email} onChange={e=>setEmail(e.target.value)}/><button className="btn btn-sm btn-primary" style={{marginLeft:8}} onClick={save}>Save</button><button className="btn btn-sm btn-outline" style={{marginLeft:4}} onClick={()=>setEditing(false)}>Cancel</button></>:<>{profile.email||'-'} <button className="btn btn-sm btn-outline" style={{marginLeft:8}} onClick={()=>setEditing(true)}>Edit</button></>}</td></tr>
+    <tr><td><strong>Group</strong></td><td><span className="badge badge-blue">{profile.group||'Administrators'}</span></td></tr>
+    <tr><td><strong>Permissions</strong></td><td style={{fontSize:12}}>{(profile.permissions||[]).join(', ')||'All'}</td></tr>
+    <tr><td><strong>Last Login</strong></td><td>{profile.lastLogin?new Date(profile.lastLogin).toLocaleString():'Now'}</td></tr>
+  </tbody></table></div></div>);}
+const PAGES=[{id:'dashboard',label:'Dashboard',perm:'DASHBOARD_VIEW',icon:'📊'},{id:'kb',label:'KB Management',perm:'KB_READ',icon:'📚'},{id:'graph',label:'KB Graph',perm:'GRAPH_VIEW',icon:'🕸️'},{id:'quality',label:'KB Quality',perm:'KB_READ',icon:'⭐'},{id:'tags',label:'KB Tags',perm:'KB_READ',icon:'🏷️'},{id:'analytics',label:'Analytics',perm:'ANALYTICS_VIEW',icon:'📈'},{id:'mcp',label:'MCP Servers',perm:'MCP_ACCESS',icon:'🖥️'},{id:'users',label:'Users',perm:'USER_MANAGE',icon:'👥'},{id:'rbac',label:'RBAC',perm:'RBAC_MANAGE',icon:'🔒'},{id:'config',label:'Configuration',perm:'CONFIG_EDIT',icon:'⚙️'},{id:'search',label:'Search Explorer',perm:'SEARCH_EXPLORE',icon:'🔍'},{id:'audit',label:'Audit Trail',perm:'AUDIT_VIEW',icon:'📋'},{id:'profile',label:'Profile',perm:null,icon:'👤'}];
+function PortalInstance({permissions,username,isActive,impersonateUserId}){
+  const[page,setPage]=useState('dashboard');
+  const hasPerm=(p)=>!p||permissions.includes(p);
+  const visiblePages=PAGES.filter(p=>hasPerm(p.perm));
+  useEffect(()=>{__impersonateUserId=impersonateUserId||null;},[isActive]);
+  const renderPage=()=>{switch(page){case'dashboard':return<DashboardPage/>;case'kb':return<KBManagementPage/>;case'graph':return<KBGraphPage activeTab={impersonateUserId||'admin'}/>;case'quality':return<KBQualityPage/>;case'tags':return<KBTagsPage/>;case'analytics':return<AnalyticsPage/>;case'mcp':return<MCPServersPage/>;case'users':return<UsersPage/>;case'rbac':return<RBACPage/>;case'config':return<ConfigurationPage/>;case'search':return<SearchExplorerPage/>;case'audit':return<AuditTrailPage/>;case'profile':return<ProfilePage/>;default:return<DashboardPage/>;}};
+  return(<div style={{display:isActive?'flex':'none',flex:1,height:'100%'}}><div className="sidebar" style={{width:200,background:'#f8fafc',borderRight:'1px solid #e2e8f0',overflow:'auto',flexShrink:0,padding:'12px 0',position:'relative',height:'auto',color:'#1e293b'}}><div style={{padding:'6px 12px 10px',borderBottom:'1px solid #e2e8f0',marginBottom:4}}><div style={{fontSize:12,color:'#1e293b',fontWeight:600}}>{username}</div><div style={{fontSize:10,color:'#64748b'}}>{permissions.length} perms</div></div>{visiblePages.map(p=>(<div key={p.id} style={{padding:'7px 12px',fontSize:12,cursor:'pointer',background:page===p.id?'#dbeafe':'transparent',color:page===p.id?'#1e40af':'#475569',borderLeft:page===p.id?'3px solid #3b82f6':'3px solid transparent'}} className="nav-item" onClick={()=>{if(impersonateUserId)__impersonateUserId=impersonateUserId;else __impersonateUserId=null;setPage(p.id);}}><span style={{marginRight:6}}>{p.icon}</span>{p.label}</div>))}</div><div className="main" style={{flex:1,padding:20,overflow:'auto',marginLeft:0}}>{renderPage()}</div></div>);
+}
+function App(){const[loggedIn,setLoggedIn]=useState(!!localStorage.getItem('admin_token'));const[forceChange,setForceChange]=useState(false);const[cpwd,setCpwd]=useState({c:'',n1:'',n2:'',err:''});
+  const[tabs,setTabs]=useState([]);const[activeTab,setActiveTab]=useState('admin');const[usersList,setUsersList]=useState([]);const[showAddTab,setShowAddTab]=useState(false);
+  const userInfo=JSON.parse(localStorage.getItem('admin_user')||'{}');
+  const realPerms=userInfo.permissions||[];
+  const canCompare=realPerms.includes('RBAC_MANAGE');
+  useEffect(()=>{if(!loggedIn)return;if(userInfo.forcePasswordChange)setForceChange(true);if(canCompare)api('/users?pageSize=100').then(d=>{if(d&&!d.__error)setUsersList(d.users||[]);});},[loggedIn]);
+  if(!loggedIn)return<LoginPage onLogin={()=>setLoggedIn(true)}/>;
+  const logout=()=>{api('/auth/logout',{method:'POST'}).finally(()=>{localStorage.removeItem('admin_token');localStorage.removeItem('admin_user');setLoggedIn(false);});};
+  const doChangePwd=async()=>{if(cpwd.n1!==cpwd.n2){setCpwd(p=>({...p,err:'Mismatch'}));return;}const r=await api('/auth/change-password',{method:'POST',body:JSON.stringify({currentPassword:cpwd.c,newPassword:cpwd.n1})});if(r&&!r.__error){setForceChange(false);localStorage.setItem('admin_user',JSON.stringify({...userInfo,forcePasswordChange:false}));}else setCpwd(p=>({...p,err:r?.error||'Failed'}));};
+  if(forceChange)return(<div className="login-container"><div className="login-box"><h2>Change Password</h2>{cpwd.err&&<div style={{background:'#fee2e2',color:'#991b1b',padding:8,borderRadius:6,marginBottom:8,fontSize:13}}>{cpwd.err}</div>}<input className="input" type="password" placeholder="Current" value={cpwd.c} onChange={e=>setCpwd(p=>({...p,c:e.target.value}))}/><input className="input" type="password" placeholder="New" value={cpwd.n1} onChange={e=>setCpwd(p=>({...p,n1:e.target.value}))}/><input className="input" type="password" placeholder="Confirm" value={cpwd.n2} onChange={e=>setCpwd(p=>({...p,n2:e.target.value}))}/><button className="btn btn-primary" style={{width:'100%'}} onClick={doChangePwd}>Change</button></div></div>);
+  const addTab=(u)=>{api('/impersonate/'+u.userId).then(d=>{if(d&&!d.__error){setTabs(t=>[...t,{id:'tab-'+Date.now(),userId:d.userId,username:d.username,permissions:d.permissions}]);setShowAddTab(false);}});};
+  const removeTab=(tabId)=>{setTabs(t=>t.filter(x=>x.id!==tabId));if(activeTab===tabId)setActiveTab('admin');};
+  const switchTab=(id)=>{setActiveTab(id);const tab=tabs.find(t=>t.id===id);__impersonateUserId=tab?tab.userId:null;};
+  return(<div style={{display:'flex',flexDirection:'column',height:'100vh'}}>
+    <div style={{display:'flex',background:'#1e293b',alignItems:'center',padding:'0 12px',flexShrink:0,minHeight:38}}>
+      <div onClick={()=>switchTab('admin')} style={{padding:'8px 16px',fontSize:13,cursor:'pointer',color:activeTab==='admin'?'#fff':'#94a3b8',background:activeTab==='admin'?'#334155':'transparent',borderRadius:'6px 6px 0 0',fontWeight:activeTab==='admin'?600:400}}>Admin ({realPerms.length})</div>
+      {tabs.map(t=>(<div key={t.id} style={{display:'flex',alignItems:'center',gap:4,padding:'8px 12px',fontSize:13,cursor:'pointer',color:activeTab===t.id?'#fff':'#94a3b8',background:activeTab===t.id?'#334155':'transparent',borderRadius:'6px 6px 0 0'}} onClick={()=>switchTab(t.id)}><span style={{fontWeight:activeTab===t.id?600:400}}>{t.username}</span><span style={{fontSize:10,color:'#64748b'}}>({t.permissions.length})</span><span style={{marginLeft:4,fontSize:14,color:'#64748b'}} onClick={e=>{e.stopPropagation();removeTab(t.id);}}>&times;</span></div>))}
+      <div style={{position:'relative',marginLeft:8}}><button style={{background:'#475569',color:'#e2e8f0',border:'none',borderRadius:4,padding:'4px 10px',fontSize:12,cursor:'pointer'}} onClick={()=>setShowAddTab(!showAddTab)}>+</button>{showAddTab&&<div style={{position:'fixed',top:36,zIndex:99999,background:'#fff',border:'1px solid #e2e8f0',borderRadius:8,padding:6,maxHeight:300,overflow:'auto',width:220,boxShadow:'0 8px 24px rgba(0,0,0,0.15)'}}>{usersList.filter(u=>!tabs.some(t=>t.userId===u.userId)&&u.userId!==userInfo.userId).map(u=>(<div key={u.userId} style={{padding:'6px 10px',fontSize:13,color:'#1e293b',cursor:'pointer',borderRadius:4}} onMouseEnter={e=>e.currentTarget.style.background='#f0f9ff'} onMouseLeave={e=>e.currentTarget.style.background='transparent'} onClick={()=>addTab(u)}>{u.username} <span style={{color:'#64748b',fontSize:11}}>({u.accessGroupName||''})</span></div>))}{usersList.filter(u=>!tabs.some(t=>t.userId===u.userId)&&u.userId!==userInfo.userId).length===0&&<div style={{fontSize:12,color:'#64748b',padding:8}}>No users</div>}</div>}</div>
+      <div style={{marginLeft:'auto',padding:'0 12px'}}><span style={{fontSize:11,color:'#64748b'}} onClick={logout} style={{cursor:'pointer',fontSize:11,color:'#94a3b8'}}>Logout</span></div>
+    </div>
+    <div style={{flex:1,display:'flex',overflow:'hidden',position:'relative'}}>
+      <PortalInstance permissions={realPerms} username={userInfo.username||'admin'} isActive={activeTab==='admin'} impersonateUserId={null}/>
+      {tabs.map(t=>(<PortalInstance key={t.id} permissions={t.permissions} username={t.username} isActive={activeTab===t.id} impersonateUserId={t.userId}/>))}
+    </div>
+  </div>);
+}
+ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
+</script>
+<script>
+// Disconnect Babel's MutationObserver to prevent it from transforming extension-injected scripts
+try{var obs=window.__babelObserver||null;if(!obs){var allObservers=performance.getEntriesByType&&[];document.querySelectorAll('script').forEach(function(){});}}catch(e){}
+// Disable Babel script tag processing for any future scripts
+if(window.Babel&&window.Babel.transformScriptTags){window.Babel.transformScriptTags=function(){};}
+if(window.Babel&&window.Babel.transform){var origTransform=window.Babel.transform;window.Babel.transform=function(code,opts){if(code&&code.indexOf&&code.indexOf('import ')===0)return{code:''};return origTransform.call(this,code,opts);};}
+</script>
+</body>
+</html>