@agenticmail/enterprise 0.5.302 → 0.5.304

package/src/auth/routes.ts

@@ -303,7 +303,7 @@ export function createAuthRoutes(
       token,
       refreshToken,
       csrf,
-      user: { id: user.id, email: user.email, name: user.name, role: user.role, totpEnabled: !!user.totpEnabled },
+      user: { id: user.id, email: user.email, name: user.name, role: user.role, totpEnabled: !!user.totpEnabled, clientOrgId: user.clientOrgId || null },
       mustResetPassword: !!user.mustResetPassword,
     });
   });
@@ -362,7 +362,7 @@ export function createAuthRoutes(
       token,
       refreshToken,
       csrf,
-      user: { id: user.id, email: user.email, name: user.name, role: user.role, totpEnabled: true },
+      user: { id: user.id, email: user.email, name: user.name, role: user.role, totpEnabled: true, clientOrgId: user.clientOrgId || null },
       mustResetPassword: !!user.mustResetPassword,
       ...(backupUsed ? { warning: 'Backup code used. You have fewer backup codes remaining.' } : {}),
     });
@@ -672,6 +672,40 @@ export function createAuthRoutes(
     }
   });
 
+  // ─── Impersonation (owner-only) ──────────────────────────
+
+  auth.post('/impersonate/:userId', async (c) => {
+    // Only owners can impersonate
+    const token = await extractToken(c);
+    if (!token) return c.json({ error: 'Authentication required' }, 401);
+    try {
+      const { jwtVerify, SignJWT } = await import('jose');
+      const secret = new TextEncoder().encode(jwtSecret);
+      const { payload } = await jwtVerify(token, secret);
+      const caller = await db.getUser(payload.sub as string);
+      if (!caller || caller.role !== 'owner') return c.json({ error: 'Only owners can impersonate users' }, 403);
+
+      const targetId = c.req.param('userId');
+      const target = await db.getUser(targetId);
+      if (!target) return c.json({ error: 'User not found' }, 404);
+
+      // Generate a short-lived token (1 hour) for the target user with impersonation flag
+      const impersonateToken = await new SignJWT({ sub: target.id, role: target.role, impersonatedBy: caller.id })
+        .setProtectedHeader({ alg: 'HS256' })
+        .setIssuedAt()
+        .setExpirationTime('1h')
+        .sign(secret);
+
+      return c.json({
+        token: impersonateToken,
+        user: { id: target.id, email: target.email, name: target.name, role: target.role, totpEnabled: !!target.totpEnabled, clientOrgId: target.clientOrgId || null, permissions: target.permissions },
+        impersonatedBy: { id: caller.id, name: caller.name, email: caller.email },
+      });
+    } catch (e: any) {
+      return c.json({ error: e.message || 'Impersonation failed' }, 500);
+    }
+  });
+
   // ─── Logout ─────────────────────────────────────────────
 
   auth.post('/logout', (c) => {

package/src/dashboard/app.js

@@ -97,6 +97,7 @@ function App() {
   const [permissions, setPermissions] = useState('*'); // '*' = full access, or { pageId: true | ['tab1','tab2'] }
   const [mustResetPassword, setMustResetPassword] = useState(false);
   const [show2faReminder, setShow2faReminder] = useState(false);
+  const [impersonating, setImpersonating] = useState(null); // { user, impersonatedBy }
   const [forceResetPw, setForceResetPw] = useState('');
   const [forceResetPw2, setForceResetPw2] = useState('');
   const [forceResetLoading, setForceResetLoading] = useState(false);
@@ -146,6 +147,12 @@ function App() {
     apiCall('/settings').then(d => { const s = d.settings || d || {}; if (s.primaryColor) applyBrandColor(s.primaryColor); if (s.orgId) setOrgId(s.orgId); }).catch(() => {});
     apiCall('/me/permissions').then(d => {
       if (d && d.permissions) setPermissions(d.permissions);
+      // If user is assigned to a client org, auto-set org context
+      if (d && d.clientOrgId) {
+        localStorage.setItem('em_client_org_id', d.clientOrgId);
+      } else {
+        localStorage.removeItem('em_client_org_id');
+      }
     }).catch(() => {});
   }, [authed]);
 
@@ -281,7 +288,44 @@ function App() {
   const PageComponent = canAccessPage ? (pages[page] || DashboardPage) : null;
   const sidebarClass = 'sidebar' + (sidebarPinned ? ' expanded' : sidebarHovered ? ' hover-expanded' : '') + (mobileMenuOpen ? ' mobile-open' : '');
 
-  return h(AppContext.Provider, { value: { toast, toasts, user, theme, setPage, permissions } },
+  // Impersonation functions
+  const startImpersonation = useCallback(async (userId) => {
+    try {
+      const d = await authCall('/impersonate/' + userId, { method: 'POST' });
+      if (d.token && d.user) {
+        // Store real user info
+        setImpersonating({ user: d.user, impersonatedBy: d.impersonatedBy, originalToken: localStorage.getItem('em_token') });
+        // Set impersonated user's token
+        localStorage.setItem('em_token', d.token);
+        setUser(d.user);
+        if (d.user.permissions) setPermissions(d.user.permissions);
+        if (d.user.clientOrgId) {
+          localStorage.setItem('em_client_org_id', d.user.clientOrgId);
+          // Fetch org name for display
+          apiCall('/organizations/' + d.user.clientOrgId).then(function(o) {
+            if (o && o.name) setImpersonating(function(prev) { return prev ? Object.assign({}, prev, { user: Object.assign({}, prev.user, { clientOrgName: o.name }) }) : prev; });
+          }).catch(function() {});
+        } else localStorage.removeItem('em_client_org_id');
+        toast('Now viewing as ' + d.user.name, 'info');
+        setPage('dashboard');
+      }
+    } catch (e) { toast(e.message || 'Impersonation failed', 'error'); }
+  }, []);
+
+  const stopImpersonation = useCallback(() => {
+    if (impersonating && impersonating.originalToken) {
+      localStorage.setItem('em_token', impersonating.originalToken);
+    }
+    setImpersonating(null);
+    localStorage.removeItem('em_client_org_id');
+    // Reload real user
+    authCall('/me').then(d => { setUser(d.user || d); }).catch(() => {});
+    apiCall('/me/permissions').then(d => { if (d && d.permissions) setPermissions(d.permissions); }).catch(() => {});
+    toast('Stopped impersonation', 'success');
+    setPage('users');
+  }, [impersonating]);
+
+  return h(AppContext.Provider, { value: { toast, toasts, user, theme, setPage, permissions, impersonating, startImpersonation, stopImpersonation } },
     h('div', { className: 'app-layout' },
       // Mobile hamburger
       h('button', { className: 'mobile-hamburger', onClick: () => setMobileMenuOpen(true) },
@@ -337,6 +381,18 @@ function App() {
           )
         ),
         h('div', { className: 'page-content' },
+          // Impersonation banner
+          impersonating && h('div', { style: { display: 'flex', alignItems: 'center', gap: 12, padding: '10px 16px', margin: '0 0 16px', background: 'rgba(99,102,241,0.12)', border: '2px solid var(--primary, #6366f1)', borderRadius: 8, fontSize: 13 } },
+            I.agents(),
+            h('div', { style: { flex: 1 } },
+              h('strong', null, 'Viewing as: '),
+              impersonating.user.name + ' (' + impersonating.user.email + ')',
+              impersonating.user.role && h('span', { className: 'badge badge-neutral', style: { marginLeft: 8, fontSize: 10 } }, impersonating.user.role),
+              impersonating.user.clientOrgName && h('span', { className: 'badge badge-info', style: { marginLeft: 8, fontSize: 10 } }, 'Org: ' + impersonating.user.clientOrgName),
+              impersonating.user.clientOrgId && !impersonating.user.clientOrgName && h('span', { className: 'badge badge-info', style: { marginLeft: 8, fontSize: 10 } }, 'Client Org')
+            ),
+            h('button', { className: 'btn btn-primary btn-sm', onClick: stopImpersonation }, 'Stop Impersonating')
+          ),
           // 2FA recommendation banner
           show2faReminder && h('div', { style: { display: 'flex', alignItems: 'center', gap: 12, padding: '10px 16px', margin: '0 0 16px', background: 'var(--warning-soft, rgba(245,158,11,0.1))', border: '1px solid var(--warning, #f59e0b)', borderRadius: 8, fontSize: 13 } },
             I.shield(),

package/src/dashboard/components/org-switcher.js

@@ -1,17 +1,11 @@
-import { h, useState, useEffect, Fragment, apiCall } from './utils.js';
+import { h, useState, useEffect, Fragment, apiCall, useApp } from './utils.js';
 import { I } from './icons.js';
 
 /**
  * OrgContextSwitcher — Global org context picker for multi-tenant pages.
  *
- * Props:
- *   onOrgChange(orgId, org) — called when org selection changes
- *   selectedOrgId — currently selected org ID ('' = my org)
- *   style — optional container style override
- *   showLabel — show "Viewing:" label (default true)
- *
- * The component loads client_organizations from the API and renders a
- * compact dropdown that switches between "My Organization" and client orgs.
+ * If the current user has a clientOrgId, the switcher is LOCKED to that org
+ * (they can only see their org's data). Owners/admins can switch freely.
  */
 export function OrgContextSwitcher(props) {
   var onOrgChange = props.onOrgChange;
@@ -19,6 +13,11 @@ export function OrgContextSwitcher(props) {
   var showLabel = props.showLabel !== false;
   var style = props.style || {};
 
+  var app = useApp();
+  var user = app.user || {};
+  var userOrgId = user.clientOrgId || null;
+  var isLocked = !!userOrgId && user.role !== 'owner' && user.role !== 'admin';
+
   var _orgs = useState([]);
   var orgs = _orgs[0]; var setOrgs = _orgs[1];
   var _loaded = useState(false);
@@ -26,16 +25,23 @@ export function OrgContextSwitcher(props) {
 
   useEffect(function() {
     apiCall('/organizations').then(function(d) {
-      setOrgs(d.organizations || []);
+      var list = d.organizations || [];
+      setOrgs(list);
       setLoaded(true);
+      // Auto-select user's org on first load if org-bound
+      if (userOrgId && !selectedOrgId) {
+        var org = list.find(function(o) { return o.id === userOrgId; });
+        if (org) onOrgChange(userOrgId, org);
+      }
     }).catch(function() { setLoaded(true); });
-  }, []);
+  }, [userOrgId]);
 
-  // Don't render if no client orgs exist
-  if (loaded && orgs.length === 0) return null;
+  // Don't render if no client orgs and user isn't org-bound
+  if (loaded && orgs.length === 0 && !userOrgId) return null;
   if (!loaded) return null;
 
-  var selectedOrg = orgs.find(function(o) { return o.id === selectedOrgId; });
+  var effectiveId = isLocked ? userOrgId : selectedOrgId;
+  var selectedOrg = orgs.find(function(o) { return o.id === effectiveId; });
 
   return h('div', {
     style: Object.assign({
@@ -45,41 +51,57 @@ export function OrgContextSwitcher(props) {
     }, style)
   },
     showLabel && h('span', { style: { color: 'var(--text-muted)', fontWeight: 600, whiteSpace: 'nowrap' } }, I.building(), ' Viewing:'),
-    h('select', {
-      value: selectedOrgId,
-      onChange: function(e) {
-        var id = e.target.value;
-        var org = orgs.find(function(o) { return o.id === id; });
-        onOrgChange(id, org || null);
-      },
-      style: {
-        padding: '6px 10px', borderRadius: 6, border: '1px solid var(--border)',
-        background: 'var(--bg-card)', color: 'var(--text)', fontSize: 13,
-        cursor: 'pointer', fontWeight: 600, flex: 1, maxWidth: 300
-      }
-    },
-      h('option', { value: '' }, 'My Organization'),
-      orgs.filter(function(o) { return o.is_active !== false; }).map(function(o) {
-        return h('option', { key: o.id, value: o.id }, o.name + (o.billing_rate_per_agent > 0 ? ' (' + (o.currency || 'USD') + ' ' + parseFloat(o.billing_rate_per_agent).toFixed(0) + '/agent)' : ''));
-      })
-    ),
+    isLocked
+      ? h('div', { style: { fontWeight: 600, fontSize: 13, color: 'var(--text)', display: 'flex', alignItems: 'center', gap: 6 } },
+          selectedOrg ? selectedOrg.name : 'Your Organization',
+          h('span', { className: 'badge badge-neutral', style: { fontSize: 10 } }, 'Locked')
+        )
+      : h('select', {
+          value: selectedOrgId,
+          onChange: function(e) {
+            var id = e.target.value;
+            var org = orgs.find(function(o) { return o.id === id; });
+            onOrgChange(id, org || null);
+          },
+          style: {
+            padding: '6px 10px', borderRadius: 6, border: '1px solid var(--border)',
+            background: 'var(--bg-card)', color: 'var(--text)', fontSize: 13,
+            cursor: 'pointer', fontWeight: 600, flex: 1, maxWidth: 300
+          }
+        },
+        h('option', { value: '' }, 'My Organization'),
+        orgs.filter(function(o) { return o.is_active !== false; }).map(function(o) {
+          return h('option', { key: o.id, value: o.id }, o.name + (o.billing_rate_per_agent > 0 ? ' (' + (o.currency || 'USD') + ' ' + parseFloat(o.billing_rate_per_agent).toFixed(0) + '/agent)' : ''));
+        })
+      ),
     selectedOrg && h('span', { style: { fontSize: 11, color: 'var(--text-muted)' } },
       selectedOrg.contact_name ? selectedOrg.contact_name : '',
       selectedOrg.contact_email ? ' \u2022 ' + selectedOrg.contact_email : ''
-    )
+    ),
+    // Impersonation banner
+    app.impersonating && h('span', { className: 'badge badge-warning', style: { fontSize: 10, marginLeft: 'auto' } }, 'Impersonating: ' + (user.name || user.email))
   );
 }
 
 /**
  * useOrgContext — Hook that provides org switching state.
- * Returns [selectedOrgId, selectedOrg, onOrgChange, OrgSwitcher component]
+ * Auto-selects the user's client org if they are org-bound.
  */
 export function useOrgContext() {
-  var _sel = useState('');
+  var app = useApp();
+  var user = app.user || {};
+  var userOrgId = user.clientOrgId || '';
+
+  var _sel = useState(userOrgId);
   var selectedOrgId = _sel[0]; var setSelectedOrgId = _sel[1];
   var _org = useState(null);
   var selectedOrg = _org[0]; var setSelectedOrg = _org[1];
 
+  // If user changes (e.g. impersonation), update default
+  useEffect(function() {
+    if (userOrgId && !selectedOrgId) setSelectedOrgId(userOrgId);
+  }, [userOrgId]);
+
   var onOrgChange = function(id, org) {
     setSelectedOrgId(id);
     setSelectedOrg(org);

package/src/dashboard/pages/organizations.js

@@ -342,9 +342,15 @@ export function OrganizationsPage() {
           )
         ),
         // Billing rate in header
-        detailOrg.billing_rate_per_agent > 0 && h('div', { style: { display: 'flex', alignItems: 'center', gap: 16, padding: '10px 14px', background: 'var(--success-soft, rgba(21,128,61,0.06))', borderRadius: 8, marginBottom: 16, fontSize: 13 } },
-          h('div', null, h('strong', null, 'Rate: '), (detailOrg.currency || 'USD') + ' ' + parseFloat(detailOrg.billing_rate_per_agent).toFixed(2) + '/agent/month'),
-          h('div', null, h('strong', null, 'Monthly Revenue: '), (detailOrg.currency || 'USD') + ' ' + (parseFloat(detailOrg.billing_rate_per_agent) * detailAgents.length).toFixed(2)),
+        (detailOrg.billing_rate_per_agent > 0 || detailAgents.some(function(a) { return a.billing_rate > 0; })) && h('div', { style: { display: 'flex', alignItems: 'center', gap: 16, padding: '10px 14px', background: 'var(--success-soft, rgba(21,128,61,0.06))', borderRadius: 8, marginBottom: 16, fontSize: 13, flexWrap: 'wrap' } },
+          h('div', null, h('strong', null, 'Default Rate: '), (detailOrg.currency || 'USD') + ' ' + parseFloat(detailOrg.billing_rate_per_agent || 0).toFixed(2) + '/agent/month'),
+          h('div', null, h('strong', null, 'Monthly Revenue: '), (function() {
+            var total = detailAgents.reduce(function(sum, a) {
+              var rate = a.billing_rate > 0 ? parseFloat(a.billing_rate) : parseFloat(detailOrg.billing_rate_per_agent || 0);
+              return sum + rate;
+            }, 0);
+            return (detailOrg.currency || 'USD') + ' ' + total.toFixed(2);
+          })()),
           h('div', null, h('strong', null, 'Agents: '), detailAgents.length)
         ),
 
@@ -438,6 +444,36 @@ export function OrganizationsPage() {
             'No billing data yet. Billing records are created as agents process tasks and accumulate token costs.'
           ),
 
+          // Per-agent billing rates
+          detailAgents.length > 0 && h('div', { style: { marginBottom: 20 } },
+            h('div', { style: { fontSize: 14, fontWeight: 700, marginBottom: 8 } }, 'Per-Agent Billing Rates'),
+            h('div', { style: { fontSize: 11, color: 'var(--text-muted)', marginBottom: 10 } }, 'Set custom billing rates per agent. Leave blank to use the default org rate (' + (detailOrg.currency || 'USD') + ' ' + parseFloat(detailOrg.billing_rate_per_agent || 0).toFixed(2) + '/agent/month).'),
+            h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 10 } },
+              detailAgents.map(function(a) {
+                var agentRate = a.billing_rate > 0 ? parseFloat(a.billing_rate) : 0;
+                var effectiveRate = agentRate > 0 ? agentRate : parseFloat(detailOrg.billing_rate_per_agent || 0);
+                return h('div', { key: a.id, style: { padding: 10, background: 'var(--bg-tertiary)', borderRadius: 8 } },
+                  h('div', { style: { fontWeight: 600, fontSize: 13, marginBottom: 6 } }, a.name || a.id),
+                  h('div', { style: { display: 'flex', gap: 6, alignItems: 'center' } },
+                    h('span', { style: { fontSize: 12, color: 'var(--text-muted)' } }, detailOrg.currency || 'USD'),
+                    h('input', { className: 'input', type: 'number', step: '0.01', min: '0', value: agentRate > 0 ? agentRate : '',
+                      placeholder: effectiveRate.toFixed(2),
+                      onChange: function(e) {
+                        var val = parseFloat(e.target.value) || 0;
+                        apiCall('/agents/' + a.id, { method: 'PATCH', body: JSON.stringify({ billingRate: val }) })
+                          .then(function() { toast('Rate updated for ' + (a.name || a.id), 'success'); })
+                          .catch(function(err) { toast(err.message, 'error'); });
+                      },
+                      style: { width: 90, fontSize: 12, padding: '4px 6px' }
+                    }),
+                    h('span', { style: { fontSize: 10, color: 'var(--text-muted)' } }, '/mo')
+                  ),
+                  agentRate > 0 && h('div', { style: { fontSize: 10, color: 'var(--success, #15803d)', marginTop: 4 } }, 'Custom rate')
+                );
+              })
+            )
+          ),
+
           // Stats summary
           (function() {
             var totRev = billingSummary.reduce(function(a, m) { return a + (parseFloat(m.total_revenue) || 0); }, 0);

package/src/dashboard/pages/users.js

@@ -5,7 +5,7 @@ import { HelpButton } from '../components/help-button.js';
 
 // ─── Permission Editor Component ───────────────────
 
-function PermissionEditor({ userId, userName, currentPerms, pageRegistry, onSave, onClose }) {
+function PermissionEditor({ userId, userName, currentPerms, pageRegistry, onSave, onClose, userObj }) {
   // Deep clone perms (skip _allowedAgents from page grants)
   var [grants, setGrants] = useState(function() {
     if (currentPerms === '*') {
@@ -34,8 +34,13 @@ function PermissionEditor({ userId, userName, currentPerms, pageRegistry, onSave
     return (currentPerms || {})._allowedAgents === '*' || !(currentPerms || {})._allowedAgents;
   });
 
+  // Client org assignment
+  var [permOrgs, setPermOrgs] = useState([]);
+  var [userOrgId, setUserOrgId] = useState((userObj && userObj.clientOrgId) || '');
+
   useEffect(function() {
     apiCall('/agents').then(function(d) { setAgents(d.agents || d || []); }).catch(function() {});
+    apiCall('/organizations').then(function(d) { setPermOrgs(d.organizations || []); }).catch(function() {});
   }, []);
   var [saving, setSaving] = useState(false);
   var [expandedPage, setExpandedPage] = useState(null);
@@ -130,6 +135,8 @@ function PermissionEditor({ userId, userName, currentPerms, pageRegistry, onSave
         }
       }
       await onSave(permsToSave);
+      // Save org assignment
+      await apiCall('/users/' + userId, { method: 'PATCH', body: JSON.stringify({ clientOrgId: userOrgId || null }) }).catch(function() {});
     } catch(e) { /* handled by parent */ }
     setSaving(false);
   };
@@ -228,6 +235,30 @@ function PermissionEditor({ userId, userName, currentPerms, pageRegistry, onSave
       })
     ),
 
+    // ─── Organization Assignment ──────────────────────
+    permOrgs.length > 0 && h('div', { style: { marginTop: 16, padding: '12px 14px', background: 'var(--bg-tertiary)', borderRadius: 8 } },
+      h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 } },
+        h('div', null,
+          h('strong', { style: { fontSize: 13 } }, 'Client Organization'),
+          h('div', { style: { fontSize: 11, color: 'var(--text-muted)', marginTop: 1 } }, 'Bind this user to a client org — they will only see that org\'s agents and data')
+        )
+      ),
+      h('select', {
+        className: 'input',
+        value: userOrgId,
+        onChange: function(e) { setUserOrgId(e.target.value); },
+        style: { fontSize: 13 }
+      },
+        h('option', { value: '' }, 'None (Internal User)'),
+        permOrgs.filter(function(o) { return o.is_active !== false; }).map(function(o) {
+          return h('option', { key: o.id, value: o.id }, o.name);
+        })
+      ),
+      userOrgId && h('div', { style: { fontSize: 11, color: 'var(--warning, #f59e0b)', marginTop: 6 } },
+        'This user will only see agents and data belonging to this organization. The org switcher will be locked for them.'
+      )
+    ),
+
     // ─── Agent Access ──────────────────────────
     !fullAccess && h('div', { style: { marginTop: 16 } },
       h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 } },
@@ -415,8 +446,9 @@ export function UsersPage() {
   var toast = app.toast;
   var [users, setUsers] = useState([]);
   var [creating, setCreating] = useState(false);
-  var [form, setForm] = useState({ email: '', password: '', name: '', role: 'viewer', permissions: '*' });
+  var [form, setForm] = useState({ email: '', password: '', name: '', role: 'viewer', permissions: '*', clientOrgId: '' });
   var [resetTarget, setResetTarget] = useState(null);
+  var [clientOrgs, setClientOrgs] = useState([]);
   var [newPassword, setNewPassword] = useState('');
   var [resetting, setResetting] = useState(false);
   var [permTarget, setPermTarget] = useState(null);    // user object for permission editing
@@ -427,6 +459,7 @@ export function UsersPage() {
   useEffect(function() {
     load();
     apiCall('/page-registry').then(function(d) { setPageRegistry(d); }).catch(function() {});
+    apiCall('/organizations').then(function(d) { setClientOrgs(d.organizations || []); }).catch(function() {});
   }, []);
 
   var generateCreatePassword = function() {
@@ -442,9 +475,10 @@ export function UsersPage() {
     try {
       var body = { email: form.email, password: form.password, name: form.name, role: form.role };
       if (form.permissions !== '*') body.permissions = form.permissions;
+      if (form.clientOrgId) body.clientOrgId = form.clientOrgId;
       await apiCall('/users', { method: 'POST', body: JSON.stringify(body) });
       toast('User created. They will be prompted to set a new password on first login.', 'success');
-      setCreating(false); setForm({ email: '', password: '', name: '', role: 'viewer', permissions: '*' }); setShowCreatePerms(false); load();
+      setCreating(false); setForm({ email: '', password: '', name: '', role: 'viewer', permissions: '*', clientOrgId: '' }); setShowCreatePerms(false); load();
     } catch (e) { toast(e.message, 'error'); }
   };
 
@@ -566,6 +600,17 @@ export function UsersPage() {
         )
       ),
       h('div', { className: 'form-group' }, h('label', { className: 'form-label' }, 'Role'), h('select', { className: 'input', value: form.role, onChange: function(e) { setForm(function(f) { return Object.assign({}, f, { role: e.target.value }); }); } }, h('option', { value: 'viewer' }, 'Viewer'), h('option', { value: 'member' }, 'Member'), h('option', { value: 'admin' }, 'Admin'), h('option', { value: 'owner' }, 'Owner'))),
+      // Client organization assignment
+      clientOrgs.length > 0 && h('div', { className: 'form-group' },
+        h('label', { className: 'form-label' }, 'Client Organization'),
+        h('select', { className: 'input', value: form.clientOrgId, onChange: function(e) { setForm(function(f) { return Object.assign({}, f, { clientOrgId: e.target.value }); }); } },
+          h('option', { value: '' }, 'None (internal user)'),
+          clientOrgs.filter(function(o) { return o.is_active !== false; }).map(function(o) {
+            return h('option', { key: o.id, value: o.id }, o.name);
+          })
+        ),
+        h('div', { style: { fontSize: 11, color: 'var(--text-muted)', marginTop: 4 } }, 'Assigning to a client org restricts this user to only see that organization\'s agents and data.')
+      ),
       // Inline permissions for member/viewer
       (form.role === 'member' || form.role === 'viewer') && h('div', { style: { marginTop: 4 } },
         h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
@@ -700,7 +745,7 @@ export function UsersPage() {
       h('div', { className: 'card-body-flush' },
         users.length === 0 ? h('div', { style: { padding: 24, textAlign: 'center', color: 'var(--text-muted)' } }, 'No users')
         : h('table', null,
-            h('thead', null, h('tr', null, h('th', null, 'Name'), h('th', null, 'Email'), h('th', null, 'Role'), h('th', null, 'Status'), h('th', null, 'Access'), h('th', null, '2FA'), h('th', null, 'Created'), h('th', { style: { width: 200 } }, 'Actions'))),
+            h('thead', null, h('tr', null, h('th', null, 'Name'), h('th', null, 'Email'), h('th', null, 'Role'), h('th', null, 'Organization'), h('th', null, 'Status'), h('th', null, 'Access'), h('th', null, '2FA'), h('th', null, 'Created'), h('th', { style: { width: 240 } }, 'Actions'))),
             h('tbody', null, users.map(function(u) {
               var isRestricted = u.role === 'member' || u.role === 'viewer';
               var isDeactivated = u.isActive === false;
@@ -709,6 +754,10 @@ export function UsersPage() {
                 h('td', null, h('strong', null, u.name || '-')),
                 h('td', null, h('span', { style: { fontFamily: 'var(--font-mono)', fontSize: 12 } }, u.email)),
                 h('td', null, h('span', { className: 'badge badge-' + (u.role === 'owner' ? 'warning' : u.role === 'admin' ? 'primary' : 'neutral') }, u.role)),
+                h('td', null, (function() {
+                  var org = u.clientOrgId && clientOrgs.find(function(o) { return o.id === u.clientOrgId; });
+                  return org ? h('span', { className: 'badge badge-info', style: { fontSize: 10 } }, org.name) : h('span', { style: { color: 'var(--text-muted)', fontSize: 11 } }, 'Internal');
+                })()),
                 h('td', null, isDeactivated
                   ? h('span', { className: 'badge badge-danger', style: { fontSize: 10 } }, 'Deactivated')
                   : h('span', { className: 'badge badge-success', style: { fontSize: 10 } }, 'Active')
@@ -725,6 +774,13 @@ export function UsersPage() {
                       style: !isRestricted ? { opacity: 0.4 } : {}
                     }, I.shield()),
                     h('button', { className: 'btn btn-ghost btn-sm', title: 'Reset Password', onClick: function() { setResetTarget(u); setNewPassword(''); } }, I.lock()),
+                    // Impersonate (owner-only, not self)
+                    !isSelf && app.user && app.user.role === 'owner' && !isDeactivated && h('button', {
+                      className: 'btn btn-ghost btn-sm',
+                      title: 'View as ' + (u.name || u.email),
+                      onClick: function() { if (app.startImpersonation) app.startImpersonation(u.id); },
+                      style: { color: 'var(--primary)' }
+                    }, I.agents()),
                     // Deactivate / Reactivate
                     !isSelf && h('button', {
                       className: 'btn btn-ghost btn-sm',

package/src/db/adapter.ts

@@ -68,6 +68,7 @@ export interface User {
   permissions?: any;         // '*' or { pageId: true | string[] }
   mustResetPassword?: boolean;
   isActive?: boolean;
+  clientOrgId?: string | null;
   createdAt: Date;
   updatedAt: Date;
   lastLoginAt?: Date;

package/src/db/postgres.ts

@@ -192,6 +192,8 @@ export class PostgresAdapter extends DatabaseAdapter {
         ALTER TABLE users ADD COLUMN IF NOT EXISTS permissions JSONB DEFAULT '"*"';
         ALTER TABLE users ADD COLUMN IF NOT EXISTS must_reset_password BOOLEAN DEFAULT FALSE;
         ALTER TABLE users ADD COLUMN IF NOT EXISTS is_active BOOLEAN DEFAULT TRUE;
+        ALTER TABLE users ADD COLUMN IF NOT EXISTS client_org_id TEXT;
+        ALTER TABLE agents ADD COLUMN IF NOT EXISTS billing_rate NUMERIC(10,2) DEFAULT 0;
       `).catch(() => {});
       // ─── Client Organizations ────────────────────────────
       await client.query(`
@@ -757,6 +759,7 @@ export class PostgresAdapter extends DatabaseAdapter {
       permissions: r.permissions != null ? (typeof r.permissions === 'string' ? (() => { try { return JSON.parse(r.permissions); } catch { return '*'; } })() : r.permissions) : '*',
       mustResetPassword: !!r.must_reset_password,
       isActive: r.is_active !== false && r.is_active !== 0, // default true
+      clientOrgId: r.client_org_id || null,
       createdAt: new Date(r.created_at), updatedAt: new Date(r.updated_at),
       lastLoginAt: r.last_login_at ? new Date(r.last_login_at) : undefined,
     };

package/src/db/sqlite.ts

@@ -63,6 +63,8 @@ export class SqliteAdapter extends DatabaseAdapter {
       try { this.db.exec(`ALTER TABLE users ADD COLUMN permissions TEXT DEFAULT '"*"'`); } catch { /* exists */ }
       try { this.db.exec(`ALTER TABLE users ADD COLUMN must_reset_password INTEGER DEFAULT 0`); } catch { /* exists */ }
       try { this.db.exec(`ALTER TABLE users ADD COLUMN is_active INTEGER DEFAULT 1`); } catch { /* exists */ }
+      try { this.db.exec(`ALTER TABLE users ADD COLUMN client_org_id TEXT`); } catch { /* exists */ }
+      try { this.db.exec(`ALTER TABLE agents ADD COLUMN billing_rate REAL DEFAULT 0`); } catch { /* exists */ }
       // ─── Client Organizations ────────────────────────────
       this.db.exec(`
         CREATE TABLE IF NOT EXISTS client_organizations (
@@ -433,6 +435,11 @@ export class SqliteAdapter extends DatabaseAdapter {
     return {
       id: r.id, email: r.email, name: r.name, role: r.role,
       passwordHash: r.password_hash, ssoProvider: r.sso_provider, ssoSubject: r.sso_subject,
+      totpSecret: r.totp_secret, totpEnabled: !!r.totp_enabled, totpBackupCodes: r.totp_backup_codes,
+      permissions: r.permissions != null ? (typeof r.permissions === 'string' ? (() => { try { return JSON.parse(r.permissions); } catch { return '*'; } })() : r.permissions) : '*',
+      mustResetPassword: !!r.must_reset_password,
+      isActive: r.is_active !== 0 && r.is_active !== false,
+      clientOrgId: r.client_org_id || null,
       createdAt: new Date(r.created_at), updatedAt: new Date(r.updated_at),
       lastLoginAt: r.last_login_at ? new Date(r.last_login_at) : undefined,
     };