feat: implement granular access revocation and global unsharing in the account permissions dialog

frontend/electron/main.ts

@@ -488,6 +488,18 @@ ipcMain.handle('share-account-with-user', async (event, steamId: string, targetS
   throw new Error('Backend not configured');
 });
 
+ipcMain.handle('revoke-account-access', async (event, steamId: string, targetSteamId: string) => {
+  initBackend();
+  if (backend) return await backend.revokeAccess(steamId, targetSteamId);
+  throw new Error('Backend not configured');
+});
+
+ipcMain.handle('revoke-all-account-access', async (event, steamId: string) => {
+  initBackend();
+  if (backend) return await backend.revokeAllAccess(steamId);
+  throw new Error('Backend not configured');
+});
+
 ipcMain.handle('get-community-accounts', async () => { initBackend(); return backend ? await backend.getCommunityAccounts() : []; });
 ipcMain.handle('get-server-users', async () => { initBackend(); return backend ? await backend.getServerUsers() : []; });
 ipcMain.handle('switch-account', async (event, loginName: string) => await handleSwitchAccount(loginName));

frontend/electron/preload.ts

@@ -7,6 +7,8 @@ contextBridge.exposeInMainWorld('electronAPI', {
   deleteAccount: (id: string) => ipcRenderer.invoke('delete-account', id),
   switchAccount: (loginName: string) => ipcRenderer.invoke('switch-account', loginName),
   shareAccountWithUser: (steamId: string, targetSteamId: string) => ipcRenderer.invoke('share-account-with-user', steamId, targetSteamId),
+  revokeAccountAccess: (steamId: string, targetSteamId: string) => ipcRenderer.invoke('revoke-account-access', steamId, targetSteamId),
+  revokeAllAccountAccess: (steamId: string) => ipcRenderer.invoke('revoke-all-account-access', steamId),
   openExternal: (url: string) => ipcRenderer.invoke('open-external', url),
   openSteamLogin: (steamId: string) => ipcRenderer.invoke('open-steam-login', steamId),
   

frontend/electron/services/backend.ts

@@ -61,7 +61,8 @@ export class BackendService {
         gameBans: account.gameBans,
         loginName: account.loginName,
         steamLoginSecure: account.steamLoginSecure,
-        loginConfig: account.loginConfig
+        loginConfig: account.loginConfig,
+        sessionUpdatedAt: account.sessionUpdatedAt
       }, { headers: this.headers });
     } catch (e) {
       console.error('[Backend] Failed to share account');
@@ -91,4 +92,31 @@ export class BackendService {
       throw new Error(e.response?.data?.message || 'Failed to share account');
     }
   }
+
+  public async revokeAccess(steamId: string, targetSteamId: string) {
+    if (!this.token) return;
+    try {
+      const response = await axios.delete(`${this.url}/api/sync/${steamId}/share`, {
+        headers: this.headers,
+        data: { targetSteamId }
+      });
+      return response.data;
+    } catch (e: any) {
+      console.error(`[Backend] Failed to revoke access for ${steamId} from ${targetSteamId}`);
+      throw new Error(e.response?.data?.message || 'Failed to revoke access');
+    }
+  }
+
+  public async revokeAllAccess(steamId: string) {
+    if (!this.token) return;
+    try {
+      const response = await axios.delete(`${this.url}/api/sync/${steamId}/share/all`, {
+        headers: this.headers
+      });
+      return response.data;
+    } catch (e: any) {
+      console.error(`[Backend] Failed to revoke all access for ${steamId}`);
+      throw new Error(e.response?.data?.message || 'Failed to revoke all access');
+    }
+  }
 }

frontend/src/hooks/useAccounts.tsx

@@ -40,6 +40,8 @@ interface AccountsContextType {
   switchAccount: (loginName: string) => Promise<void>;
   openSteamLogin: (steamId: string) => Promise<void>;
   shareAccountWithUser: (steamId: string, targetSteamId: string) => Promise<any>;
+  revokeAccountAccess: (steamId: string, targetSteamId: string) => Promise<any>;
+  revokeAllAccountAccess: (steamId: string) => Promise<any>;
   
   // Server Methods
   updateServerConfig: (config: Partial<ServerConfig>) => Promise<void>;
@@ -136,6 +138,18 @@ export const AccountsProvider: React.FC<{ children: React.ReactNode }> = ({ chil
     return res;
   };
 
+  const revokeAccountAccess = async (steamId: string, targetSteamId: string) => {
+    const res = await (window as any).electronAPI.revokeAccountAccess(steamId, targetSteamId);
+    await syncNow();
+    return res;
+  };
+
+  const revokeAllAccountAccess = async (steamId: string) => {
+    const res = await (window as any).electronAPI.revokeAllAccountAccess(steamId);
+    await syncNow();
+    return res;
+  };
+
   const updateServerConfig = async (config: Partial<ServerConfig>) => {
     const updated = await (window as any).electronAPI.updateServerConfig(config);
     setServerConfig(updated);
@@ -159,7 +173,7 @@ export const AccountsProvider: React.FC<{ children: React.ReactNode }> = ({ chil
     <AccountsContext.Provider value={{ 
       accounts, serverConfig, isLoading, isSyncing, addAccount, updateAccount, deleteAccount, 
       switchAccount, openSteamLogin, updateServerConfig, loginToServer, 
-      getCommunityAccounts, getServerUsers, shareAccountWithUser, syncNow, refreshAccounts 
+      getCommunityAccounts, getServerUsers, shareAccountWithUser, revokeAccountAccess, revokeAllAccountAccess, syncNow, refreshAccounts 
     }}>
       {children}
     </AccountsContext.Provider>

frontend/src/pages/Dashboard.tsx

@@ -49,9 +49,7 @@ const Dashboard: React.FC = () => {
   const [serverUrl, setServerUrl] = useState('');
 
   useEffect(() => {
-    if (serverConfig?.url) {
+    if (serverConfig?.url) setServerUrl(serverConfig.url);
-      setServerUrl(serverConfig.url);
-    }
   }, [serverConfig?.url]);
 
   const loadCommunity = async () => {
@@ -59,16 +57,11 @@ const Dashboard: React.FC = () => {
     try {
       const data = await getCommunityAccounts();
       setCommunityAccounts(Array.isArray(data) ? data : []);
-    } catch (e) { 
+    } catch (e) { } finally { setIsCommunityLoading(false); }
-    } finally {
-      setIsCommunityLoading(false);
-    }
   };
 
   useEffect(() => {
-    if (isAddDialogOpen && addTab === 1) {
+    if (isAddDialogOpen && addTab === 1) loadCommunity();
-      loadCommunity();
-    }
   }, [isAddDialogOpen, addTab]);
 
   const handleAddAccount = async () => {
@@ -77,9 +70,7 @@ const Dashboard: React.FC = () => {
       await addAccount({ identifier });
       setIsAddDialogOpen(false);
       setIdentifier('');
-    } catch (e) {
+    } catch (e) { console.error("[Dashboard] Add failed:", e); }
-      console.error("[Dashboard] Add failed:", e);
-    }
   };
 
   const handleAddFromCommunity = async (commAcc: any) => {
@@ -235,14 +226,7 @@ const Dashboard: React.FC = () => {
             InputProps={{
               endAdornment: (
                 <InputAdornment position="end">
-                  <Button 
+                  <Button variant="contained" size="small" onClick={saveSettings} sx={{ height: 30 }}>Apply</Button>
-                    variant="contained" 
-                    size="small" 
-                    onClick={saveSettings}
-                    sx={{ height: 30 }}
-                  >
-                    Apply
-                  </Button>
                 </InputAdornment>
               ),
             }}
@@ -365,7 +349,7 @@ const AccountRow: React.FC<{
   onSwitch: (login: string) => void,
   onAuth: () => void 
 }> = ({ account, onDelete, onSwitch, onAuth }) => {
-  const { shareAccountWithUser, getServerUsers, serverConfig } = useAccounts();
+  const { shareAccountWithUser, revokeAccountAccess, revokeAllAccountAccess, getServerUsers, serverConfig } = useAccounts();
   const [timeLeft, setTimeLeft] = useState<string | null>(null);
   const [isShareOpen, setIsShareOpen] = useState(false);
   const [targetUserId, setTargetUserId] = useState('');
@@ -376,10 +360,7 @@ const AccountRow: React.FC<{
   const isCooldownActive = cooldownDate && !isNaN(cooldownDate.getTime()) && cooldownDate.getTime() > Date.now();
 
   useEffect(() => {
-    if (!isCooldownActive || !cooldownDate) {
+    if (!isCooldownActive || !cooldownDate) { setTimeLeft(null); return; }
-      setTimeLeft(null);
-      return;
-    }
     const targetTime = cooldownDate.getTime();
     const timer = setInterval(() => {
       const diff = targetTime - Date.now();
@@ -392,14 +373,9 @@ const AccountRow: React.FC<{
     return () => clearInterval(timer);
   }, [account?.cooldownExpiresAt, isCooldownActive]);
 
-  const avatarSrc = account?.localAvatar 
+  const avatarSrc = account?.localAvatar ? `steam-resource://${account.localAvatar}` : (account?.avatar || '');
-    ? `steam-resource://${account.localAvatar}` 
-    : (account?.avatar || '');
   const [imgSrc, setImgSrc] = useState(avatarSrc);
-
+  useEffect(() => { setImgSrc(avatarSrc); }, [avatarSrc]);
-  useEffect(() => {
-    setImgSrc(avatarSrc);
-  }, [avatarSrc]);
 
   const handleOpenShare = async () => {
     setIsShareOpen(true);
@@ -409,8 +385,7 @@ const AccountRow: React.FC<{
         (window as any).electronAPI.getServerUserInfo()
       ]);
       const filtered = (Array.isArray(users) ? users : []).filter(u => 
-        u.steamId !== selfInfo.steamId && 
+        u.steamId !== selfInfo.steamId && u.steamId !== account.steamId
-        u.steamId !== account.steamId
       );
       setServerUsers(filtered);
     } catch (e) {}
@@ -421,14 +396,21 @@ const AccountRow: React.FC<{
     setIsSharing(true);
     try {
       await shareAccountWithUser(account.steamId, targetUserId);
-      alert(`Account shared successfully!`);
-      setIsShareOpen(false);
       setTargetUserId('');
-    } catch (e: any) {
+    } catch (e: any) { alert(e.message || "Failed to share account");
-      alert(e.message || "Failed to share account");
+    } finally { setIsSharing(false); }
-    } finally {
+  };
-      setIsSharing(false);
+
-    }
+  const handleRevoke = async (targetSteamId: string) => {
+    if (!window.confirm("Revoke access for this user?")) return;
+    try { await revokeAccountAccess(account.steamId, targetSteamId);
+    } catch (e: any) { alert(e.message); }
+  };
+
+  const handleRevokeAll = async () => {
+    if (!window.confirm("Completely stop sharing this account?")) return;
+    try { await revokeAllAccountAccess(account.steamId); setIsShareOpen(false);
+    } catch (e: any) { alert(e.message); }
   };
 
   const isBanned = account?.vacBanned || (account?.gameBans && account.gameBans > 0);
@@ -447,44 +429,34 @@ const AccountRow: React.FC<{
         </Box>
       </TableCell>
       <TableCell>
-        <Typography variant="body2" sx={{ fontWeight: 'bold', color: isBanned ? 'error.main' : 'text.primary' }}>
+        <Typography variant="body2" sx={{ fontWeight: 'bold', color: isBanned ? 'error.main' : 'text.primary' }}>{account?.personaName || 'Unknown'}</Typography>
-          {account?.personaName || 'Unknown'}
-        </Typography>
         <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block' }}>{account?.steamId}</Typography>
       </TableCell>
       <TableCell>
         {isBanned ? (
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: 'error.main' }}>
-              <GppBadIcon sx={{ fontSize: 16 }} />
+              <GppBadIcon sx={{ fontSize: 16 }} /><Typography variant="caption" sx={{ fontWeight: 'bold' }}>BANNED</Typography>
-              <Typography variant="caption" sx={{ fontWeight: 'bold', letterSpacing: '0.5px' }}>ACCOUNT BANNED</Typography>
             </Box>
             <Box sx={{ display: 'flex', gap: 0.5 }}>
-              {account?.vacBanned && (
+              {account?.vacBanned && <Chip label="VAC" size="small" sx={{ height: 16, fontSize: '0.6rem', bgcolor: 'error.main', color: 'white', fontWeight: 'bold' }} />}
-                <Chip label="VAC" size="small" sx={{ height: 16, fontSize: '0.6rem', bgcolor: 'error.main', color: 'white', fontWeight: 'bold', borderRadius: 0.5 }} />
+              {account?.gameBans ? account.gameBans > 0 && <Chip label={`${account.gameBans} GAME`} size="small" sx={{ height: 16, fontSize: '0.6rem', bgcolor: 'error.main', color: 'white', fontWeight: 'bold' }} /> : null}
-              )}
-              {account?.gameBans ? account.gameBans > 0 && (
-                <Chip label={`${account.gameBans} GAME`} size="small" sx={{ height: 16, fontSize: '0.6rem', bgcolor: 'error.main', color: 'white', fontWeight: 'bold', borderRadius: 0.5 }} />
-              ) : null}
             </Box>
           </Box>
         ) : (
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: 'success.main' }}>
-            <ShieldIcon sx={{ fontSize: 16 }} />
+            <ShieldIcon sx={{ fontSize: 16 }} /><Typography variant="caption" sx={{ fontWeight: 'bold' }}>SECURE</Typography>
-            <Typography variant="caption" sx={{ fontWeight: 'bold', letterSpacing: '0.5px' }}>SECURE</Typography>
           </Box>
         )}
       </TableCell>
       <TableCell>
         {account?.authError ? (
           <Box sx={{ display: 'flex', alignItems: 'center', color: 'warning.main', gap: 0.5 }}>
-            <LockResetIcon sx={{ fontSize: 16 }} />
+            <LockResetIcon sx={{ fontSize: 16 }} /><Typography variant="body2" sx={{ fontWeight: 'bold' }}>Needs Re-auth</Typography>
-            <Typography variant="body2" sx={{ fontWeight: 'bold' }}>Needs Re-auth</Typography>
           </Box>
         ) : isCooldownActive ? (
           <Box sx={{ display: 'flex', alignItems: 'center', color: 'primary.main', gap: 0.5 }}>
-            <TimerIcon sx={{ fontSize: 16 }} />
+            <TimerIcon sx={{ fontSize: 16 }} /><Typography variant="body2" sx={{ fontWeight: 'bold' }}>{timeLeft}</Typography>
-            <Typography variant="body2" sx={{ fontWeight: 'bold' }}>{timeLeft}</Typography>
           </Box>
         ) : (
           <Typography variant="caption" sx={{ color: 'text.secondary' }}>Available</Typography>
@@ -492,95 +464,79 @@ const AccountRow: React.FC<{
       </TableCell>
       <TableCell align="right">
         <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 0.5, alignItems: 'center' }}>
-          {/* Fast Switcher Button - Always available if we have a login name */}
           {account.loginName && (
             <Button 
-              variant="contained" 
+              variant="contained" size="small" onClick={() => onSwitch(account.loginName || '')}
-              size="small" 
+              sx={{ height: 28, fontSize: '0.7rem', bgcolor: 'secondary.main', '&:hover': { opacity: 0.9 }, minWidth: 60 }}
-              onClick={() => onSwitch(account.loginName || '')}
+            >LOGIN</Button>
-              sx={{ 
-                height: 28, 
-                fontSize: '0.7rem', 
-                bgcolor: 'secondary.main', 
-                '&:hover': { opacity: 0.9 },
-                minWidth: 60
-              }}
-            >
-              LOGIN
-            </Button>
           )}
-
+          <Tooltip title={account.steamLoginSecure && !account.authError ? "Tracking active" : "Authenticate for cooldowns"}>
-          {/* Scraper Auth Button - Controls the optional cooldown tracking */}
-          <Tooltip title={account.steamLoginSecure && !account.authError ? "Session valid - Tracking active" : (account.steamLoginSecure ? "Refresh scraper session" : "Authenticate for cooldown tracking")}>
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
               <IconButton 
-                size="small" 
+                size="small" onClick={onAuth} disabled={!!(account.steamLoginSecure && !account.authError)}
-                onClick={onAuth} 
-                disabled={!!(account.steamLoginSecure && !account.authError)}
                 sx={{ 
                   color: account.steamLoginSecure && !account.authError ? 'success.main' : (account.authError ? 'error.main' : 'warning.main'),
-                  border: '1px solid',
+                  border: '1px solid', borderColor: account.steamLoginSecure && !account.authError ? 'success.main' : 'divider',
-                  borderColor: account.steamLoginSecure && !account.authError ? 'success.main' : 'divider',
+                  borderRadius: 1, background: account.steamLoginSecure && !account.authError ? 'rgba(163, 207, 6, 0.1)' : 'transparent'
-                  borderRadius: 1,
-                  opacity: account.steamLoginSecure && !account.authError ? 1 : 1,
-                  background: account.steamLoginSecure && !account.authError ? 'rgba(163, 207, 6, 0.1)' : 'transparent'
                 }}
               >
                 {account.steamLoginSecure && !account.authError ? <VerifiedUserIcon fontSize="inherit" /> : (account.authError ? <LockResetIcon fontSize="inherit" /> : <BoltIcon fontSize="inherit" />)}
               </IconButton>
               {account.steamLoginSecure && !account.authError && (
-                <Typography variant="caption" sx={{ color: 'success.main', fontWeight: 'bold', fontSize: '0.6rem', letterSpacing: '0.5px' }}>
+                <Typography variant="caption" sx={{ color: 'success.main', fontWeight: 'bold', fontSize: '0.6rem' }}>TRACKING</Typography>
-                  TRACKING
-                </Typography>
               )}
             </Box>
           </Tooltip>
-
           <Divider orientation="vertical" flexItem sx={{ mx: 0.5, my: 0.5 }} />
-
           <IconButton size="small" onClick={handleOpenShare} disabled={!serverConfig?.token}><ShareIcon fontSize="inherit" sx={{ color: 'primary.main' }}/></IconButton>
           <IconButton size="small" sx={{ color: 'text.secondary' }} onClick={() => (window as any).electronAPI.openExternal(account?.profileUrl || '')}><OpenInNewIcon fontSize="inherit"/></IconButton>
           <IconButton size="small" sx={{ color: 'error.main' }} onClick={() => onDelete(account?._id || '')}><DeleteIcon fontSize="inherit"/></IconButton>
         </Box>
 
-        {/* Share Dialog */}
         <Dialog open={isShareOpen} onClose={() => setIsShareOpen(false)} maxWidth="xs" fullWidth>
-          <DialogTitle sx={{ backgroundColor: 'background.paper', color: 'text.primary' }}>Share Account</DialogTitle>
+          <DialogTitle sx={{ backgroundColor: 'background.paper', color: 'text.primary' }}>Permissions</DialogTitle>
           <DialogContent sx={{ backgroundColor: 'background.paper', pt: 2 }}>
-            <Typography variant="body2" sx={{ mb: 2 }}>
+            <Typography variant="subtitle2" sx={{ mb: 1, color: 'primary.main' }}>GRANT ACCESS</Typography>
-              Select a community member to share this account with.
+            <Box sx={{ display: 'flex', gap: 1, mb: 3 }}>
-            </Typography>
+              <FormControl fullWidth size="small">
-            <FormControl fullWidth size="small" sx={{ mt: 1 }}>
                 <InputLabel sx={{ color: 'text.secondary' }}>Select User</InputLabel>
                 <Select
-                value={targetUserId}
+                  value={targetUserId} label="Select User" onChange={(e) => setTargetUserId(e.target.value as string)}
-                label="Select User"
-                onChange={(e) => setTargetUserId(e.target.value as string)}
                   sx={{ bgcolor: 'rgba(0,0,0,0.1)', color: 'text.primary' }}
                 >
-                {serverUsers.map(user => (
+                  {serverUsers
+                    .filter(u => !(account as any).sharedWith?.find((sw: any) => sw.steamId === u.steamId))
+                    .map(user => (
                       <MenuItem key={user.steamId} value={user.steamId}>
-                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}><Avatar src={user.avatar} sx={{ width: 24, height: 24 }} />{user.personaName}</Box>
-                      <Avatar src={user.avatar} sx={{ width: 24, height: 24 }} />
-                      {user.personaName}
-                    </Box>
                       </MenuItem>
                     ))}
-                {serverUsers.length === 0 && <MenuItem disabled>No users found on server</MenuItem>}
+                  {serverUsers.length === 0 && <MenuItem disabled>No eligible users found</MenuItem>}
                 </Select>
               </FormControl>
+              <Button onClick={handleShare} variant="contained" disabled={!targetUserId || isSharing} sx={{ minWidth: 80 }}>{isSharing ? <CircularProgress size={16} color="inherit" /> : "Add"}</Button>
+            </Box>
+            <Divider sx={{ my: 2, borderColor: 'divider' }} />
+            <Typography variant="subtitle2" sx={{ mb: 1, color: 'primary.main' }}>CURRENT ACCESS</Typography>
+            <List size="small" sx={{ bgcolor: 'rgba(0,0,0,0.05)', borderRadius: 1, mb: 2 }}>
+              {(account as any).sharedWith?.map((sw: any) => (
+                <ListItem key={sw.steamId} dense divider sx={{ borderColor: 'divider' }}>
+                  <Avatar src={sw.avatar} sx={{ width: 24, height: 24, mr: 1 }} />
+                  <ListItemText primary={sw.personaName} primaryTypographyProps={{ variant: 'body2', sx: { fontWeight: 'bold' } }} />
+                  <ListItemSecondaryAction>
+                    <IconButton size="small" color="error" onClick={() => handleRevoke(sw.steamId)}><DeleteIcon fontSize="inherit" /></IconButton>
+                  </ListItemSecondaryAction>
+                </ListItem>
+              ))}
+              {(!(account as any).sharedWith || (account as any).sharedWith.length === 0) && (
+                <Typography variant="caption" align="center" sx={{ display: 'block', p: 2, opacity: 0.6 }}>Not shared with anyone yet.</Typography>
+              )}
+            </List>
+            {(account as any).sharedWith?.length > 0 && (
+              <Button fullWidth variant="outlined" color="error" size="small" onClick={handleRevokeAll} startIcon={<GppBadIcon />}>Revoke All Shared Access</Button>
+            )}
           </DialogContent>
-          <DialogActions sx={{ backgroundColor: 'background.paper', p: 2 }}>
+          <DialogActions sx={{ backgroundColor: 'background.paper', p: 2 }}><Button onClick={() => setIsShareOpen(false)} color="inherit" variant="contained">Done</Button></DialogActions>
-            <Button onClick={() => setIsShareOpen(false)} color="inherit" disabled={isSharing}>Cancel</Button>
-            <Button 
-              onClick={handleShare}
-              variant="contained" 
-              startIcon={isSharing ? <CircularProgress size={16} color="inherit" /> : <GroupAddIcon />}
-              disabled={!targetUserId || isSharing}
-            >
-              {isSharing ? "Sharing..." : "Grant Access"}
-            </Button>
-          </DialogActions>
         </Dialog>
       </TableCell>
     </TableRow>

frontend/src/pages/DashboardRow.tsx

@@ -0,0 +1,234 @@
+const AccountRow: React.FC<{ 
+  account: Account, 
+  onDelete: (id: string) => void, 
+  onSwitch: (login: string) => void,
+  onAuth: () => void 
+}> = ({ account, onDelete, onSwitch, onAuth }) => {
+  const { shareAccountWithUser, revokeAccountAccess, revokeAllAccountAccess, getServerUsers, serverConfig } = useAccounts();
+  const [timeLeft, setTimeLeft] = useState<string | null>(null);
+  const [isShareOpen, setIsShareOpen] = useState(false);
+  const [targetUserId, setTargetUserId] = useState('');
+  const [isSharing, setIsSharing] = useState(false);
+  const [serverUsers, setServerUsers] = useState<any[]>([]);
+
+  const cooldownDate = account?.cooldownExpiresAt ? new Date(account.cooldownExpiresAt) : null;
+  const isCooldownActive = cooldownDate && !isNaN(cooldownDate.getTime()) && cooldownDate.getTime() > Date.now();
+
+  useEffect(() => {
+    if (!isCooldownActive || !cooldownDate) {
+      setTimeLeft(null);
+      return;
+    }
+    const targetTime = cooldownDate.getTime();
+    const timer = setInterval(() => {
+      const diff = targetTime - Date.now();
+      if (diff <= 0) { setTimeLeft(null); clearInterval(timer); return; }
+      const hours = Math.floor(diff / 3600000);
+      const mins = Math.floor((diff % 3600000) / 60000);
+      const secs = Math.floor((diff % 60000) / 1000);
+      setTimeLeft(`${hours}h ${mins}m ${secs}s`);
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [account?.cooldownExpiresAt, isCooldownActive]);
+
+  const avatarSrc = account?.localAvatar 
+    ? `steam-resource://${account.localAvatar}` 
+    : (account?.avatar || '');
+  const [imgSrc, setImgSrc] = useState(avatarSrc);
+
+  useEffect(() => {
+    setImgSrc(avatarSrc);
+  }, [avatarSrc]);
+
+  const handleOpenShare = async () => {
+    setIsShareOpen(true);
+    try {
+      const [users, selfInfo] = await Promise.all([
+        getServerUsers(),
+        (window as any).electronAPI.getServerUserInfo()
+      ]);
+      const filtered = (Array.isArray(users) ? users : []).filter(u => 
+        u.steamId !== selfInfo.steamId && 
+        u.steamId !== account.steamId
+      );
+      setServerUsers(filtered);
+    } catch (e) {}
+  };
+
+  const handleShare = async () => {
+    if (!targetUserId) return;
+    setIsSharing(true);
+    try {
+      await shareAccountWithUser(account.steamId, targetUserId);
+      setTargetUserId('');
+    } catch (e: any) {
+      alert(e.message || "Failed to share account");
+    } finally {
+      setIsSharing(false);
+    }
+  };
+
+  const handleRevoke = async (targetSteamId: string) => {
+    if (!window.confirm("Revoke access for this user?")) return;
+    try {
+      await revokeAccountAccess(account.steamId, targetSteamId);
+    } catch (e: any) { alert(e.message); }
+  };
+
+  const handleRevokeAll = async () => {
+    if (!window.confirm("Completely stop sharing this account with the community?")) return;
+    try {
+      await revokeAllAccountAccess(account.steamId);
+      setIsShareOpen(false);
+    } catch (e: any) { alert(e.message); }
+  };
+
+  const isBanned = account?.vacBanned || (account?.gameBans && account.gameBans > 0);
+  const isShared = account?._id.startsWith('shared_');
+
+  return (
+    <TableRow sx={{ '&:hover': { background: 'action.hover' }, borderBottom: '1px solid', borderColor: 'divider' }}>
+      <TableCell>
+        <Box sx={{ position: 'relative' }}>
+          <Avatar src={imgSrc} variant="square" sx={{ width: 32, height: 32, border: '1px solid', borderColor: 'divider' }} />
+          {isShared && (
+            <Tooltip title="Community Shared Account">
+              <PeopleIcon sx={{ position: 'absolute', bottom: -4, right: -4, fontSize: 14, color: 'primary.main', bgcolor: 'background.default', borderRadius: '50%', border: '1px solid', borderColor: 'divider', p: 0.2 }} />
+            </Tooltip>
+          )}
+        </Box>
+      </TableCell>
+      <TableCell>
+        <Typography variant="body2" sx={{ fontWeight: 'bold', color: isBanned ? 'error.main' : 'text.primary' }}>
+          {account?.personaName || 'Unknown'}
+        </Typography>
+        <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block' }}>{account?.steamId}</Typography>
+      </TableCell>
+      <TableCell>
+        {isBanned ? (
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: 'error.main' }}>
+              <GppBadIcon sx={{ fontSize: 16 }} />
+              <Typography variant="caption" sx={{ fontWeight: 'bold', letterSpacing: '0.5px' }}>ACCOUNT BANNED</Typography>
+            </Box>
+            <Box sx={{ display: 'flex', gap: 0.5 }}>
+              {account?.vacBanned && (
+                <Chip label="VAC" size="small" sx={{ height: 16, fontSize: '0.6rem', bgcolor: 'error.main', color: 'white', fontWeight: 'bold', borderRadius: 0.5 }} />
+              )}
+              {account?.gameBans ? account.gameBans > 0 && (
+                <Chip label={`${account.gameBans} GAME`} size="small" sx={{ height: 16, fontSize: '0.6rem', bgcolor: 'error.main', color: 'white', fontWeight: 'bold', borderRadius: 0.5 }} />
+              ) : null}
+            </Box>
+          </Box>
+        ) : (
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: 'success.main' }}>
+            <ShieldIcon sx={{ fontSize: 16 }} />
+            <Typography variant="caption" sx={{ fontWeight: 'bold', letterSpacing: '0.5px' }}>SECURE</Typography>
+          </Box>
+        )}
+      </TableCell>
+      <TableCell>
+        {account?.authError ? (
+          <Box sx={{ display: 'flex', alignItems: 'center', color: 'warning.main', gap: 0.5 }}>
+            <LockResetIcon sx={{ fontSize: 16 }} />
+            <Typography variant="body2" sx={{ fontWeight: 'bold' }}>Needs Re-auth</Typography>
+          </Box>
+        ) : isCooldownActive ? (
+          <Box sx={{ display: 'flex', alignItems: 'center', color: 'primary.main', gap: 0.5 }}>
+            <TimerIcon sx={{ fontSize: 16 }} />
+            <Typography variant="body2" sx={{ fontWeight: 'bold' }}>{timeLeft}</Typography>
+          </Box>
+        ) : (
+          <Typography variant="caption" sx={{ color: 'text.secondary' }}>Available</Typography>
+        )}
+      </TableCell>
+      <TableCell align="right">
+        <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 0.5, alignItems: 'center' }}>
+          {account.loginName && (
+            <Button 
+              variant="contained" size="small" onClick={() => onSwitch(account.loginName || '')}
+              sx={{ height: 28, fontSize: '0.7rem', bgcolor: 'secondary.main', '&:hover': { opacity: 0.9 }, minWidth: 60 }}
+            >
+              LOGIN
+            </Button>
+          )}
+
+          <Tooltip title={account.steamLoginSecure && !account.authError ? "Session valid - Tracking active" : (account.steamLoginSecure ? "Refresh scraper session" : "Authenticate for cooldown tracking")}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+              <IconButton 
+                size="small" onClick={onAuth} 
+                disabled={!!(account.steamLoginSecure && !account.authError)}
+                sx={{ 
+                  color: account.steamLoginSecure && !account.authError ? 'success.main' : (account.authError ? 'error.main' : 'warning.main'),
+                  border: '1px solid', borderColor: account.steamLoginSecure && !account.authError ? 'success.main' : 'divider',
+                  borderRadius: 1, background: account.steamLoginSecure && !account.authError ? 'rgba(163, 207, 6, 0.1)' : 'transparent'
+                }}
+              >
+                {account.steamLoginSecure && !account.authError ? <VerifiedUserIcon fontSize="inherit" /> : (account.authError ? <LockResetIcon fontSize="inherit" /> : <BoltIcon fontSize="inherit" />)}
+              </IconButton>
+              {account.steamLoginSecure && !account.authError && (
+                <Typography variant="caption" sx={{ color: 'success.main', fontWeight: 'bold', fontSize: '0.6rem', letterSpacing: '0.5px' }}>
+                  TRACKING
+                </Typography>
+              )}
+            </Box>
+          </Tooltip>
+
+          <Divider orientation="vertical" flexItem sx={{ mx: 0.5, my: 0.5 }} />
+
+          <IconButton size="small" onClick={handleOpenShare} disabled={!serverConfig?.token}><ShareIcon fontSize="inherit" sx={{ color: 'primary.main' }}/></IconButton>
+          <IconButton size="small" sx={{ color: 'text.secondary' }} onClick={() => (window as any).electronAPI.openExternal(account?.profileUrl || '')}><OpenInNewIcon fontSize="inherit"/></IconButton>
+          <IconButton size="small" sx={{ color: 'error.main' }} onClick={() => onDelete(account?._id || '')}><DeleteIcon fontSize="inherit"/></IconButton>
+        </Box>
+
+        <Dialog open={isShareOpen} onClose={() => setIsShareOpen(false)} maxWidth="xs" fullWidth>
+          <DialogTitle sx={{ backgroundColor: 'background.paper', color: 'text.primary' }}>Account Permissions</DialogTitle>
+          <DialogContent sx={{ backgroundColor: 'background.paper', pt: 2 }}>
+            <Typography variant="subtitle2" sx={{ mb: 1, color: 'primary.main' }}>GRANT ACCESS</Typography>
+            <Box sx={{ display: 'flex', gap: 1, mb: 3 }}>
+              <FormControl fullWidth size="small">
+                <InputLabel sx={{ color: 'text.secondary' }}>Select User</InputLabel>
+                <Select
+                  value={targetUserId} label="Select User" onChange={(e) => setTargetUserId(e.target.value as string)}
+                  sx={{ bgcolor: 'rgba(0,0,0,0.1)', color: 'text.primary' }}
+                >
+                  {serverUsers
+                    .filter(u => !(account as any).sharedWith?.find((sw: any) => sw.steamId === u.steamId))
+                    .map(user => (
+                      <MenuItem key={user.steamId} value={user.steamId}>
+                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}><Avatar src={user.avatar} sx={{ width: 24, height: 24 }} />{user.personaName}</Box>
+                      </MenuItem>
+                    ))}
+                  {serverUsers.length === 0 && <MenuItem disabled>No eligible users found</MenuItem>}
+                </Select>
+              </FormControl>
+              <Button onClick={handleShare} variant="contained" disabled={!targetUserId || isSharing} sx={{ minWidth: 80 }}>
+                {isSharing ? <CircularProgress size={16} color="inherit" /> : "Add"}
+              </Button>
+            </Box>
+            <Divider sx={{ my: 2, borderColor: 'divider' }} />
+            <Typography variant="subtitle2" sx={{ mb: 1, color: 'primary.main' }}>CURRENT ACCESS</Typography>
+            <List size="small" sx={{ bgcolor: 'rgba(0,0,0,0.05)', borderRadius: 1, mb: 2 }}>
+              {(account as any).sharedWith?.map((sw: any) => (
+                <ListItem key={sw.steamId} dense divider sx={{ borderColor: 'divider' }}>
+                  <Avatar src={sw.avatar} sx={{ width: 24, height: 24, mr: 1 }} />
+                  <ListItemText primary={sw.personaName} primaryTypographyProps={{ variant: 'body2', sx: { fontWeight: 'bold' } }} />
+                  <ListItemSecondaryAction>
+                    <IconButton size="small" color="error" onClick={() => handleRevoke(sw.steamId)}><DeleteIcon fontSize="inherit" /></IconButton>
+                  </ListItemSecondaryAction>
+                </ListItem>
+              ))}
+              {(!(account as any).sharedWith || (account as any).sharedWith.length === 0) && (
+                <Typography variant="caption" align="center" sx={{ display: 'block', p: 2, opacity: 0.6 }}>Not shared with anyone yet.</Typography>
+              )}
+            </List>
+            {(account as any).sharedWith?.length > 0 && (
+              <Button fullWidth variant="outlined" color="error" size="small" onClick={handleRevokeAll} startIcon={<GppBadIcon />}>Revoke All Shared Access</Button>
+            )}
+          </DialogContent>
+          <DialogActions sx={{ backgroundColor: 'background.paper', p: 2 }}><Button onClick={() => setIsShareOpen(false)} color="inherit" variant="contained">Done</Button></DialogActions>
+        </Dialog>
+      </TableCell>
+    </TableRow>
+  );
+};