-
-
- who's here?
-
-
- {viewers.map((name, i) => (
-
- {name}
+
+ {hasViewers && (
+
+
+ who's here?
- ))}
-
+
+ {viewers.map((v, i) => (
+
+ {v.name}
+
+ ))}
+
+
+
+ connected
+
+
+ {services.map((s, i) => (
+
+ ))}
+
+
diff --git a/frontend/src/context/AuthContext.jsx b/frontend/src/context/AuthContext.jsx
index 612985b..d37a115 100644
--- a/frontend/src/context/AuthContext.jsx
+++ b/frontend/src/context/AuthContext.jsx
@@ -15,6 +15,7 @@ export const useAuth = () => {
export const AuthProvider = ({ children }) => {
const [token, setToken] = useState(localStorage.getItem('adminToken'));
const [adminName, setAdminName] = useState(localStorage.getItem('adminName'));
+ const [adminRole, setAdminRole] = useState(localStorage.getItem('adminRole'));
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [loading, setLoading] = useState(true);
@@ -27,9 +28,12 @@ export const AuthProvider = ({ children }) => {
});
setIsAuthenticated(true);
const name = response.data.user?.name;
+ const role = response.data.user?.role || 'admin';
if (name) {
setAdminName(name);
+ setAdminRole(role);
localStorage.setItem('adminName', name);
+ localStorage.setItem('adminRole', role);
} else {
logout();
}
@@ -47,11 +51,13 @@ export const AuthProvider = ({ children }) => {
const login = async (key) => {
try {
const response = await axios.post('/api/auth/login', { key });
- const { token: newToken, name } = response.data;
+ const { token: newToken, name, role } = response.data;
localStorage.setItem('adminToken', newToken);
localStorage.setItem('adminName', name);
+ localStorage.setItem('adminRole', role || 'admin');
setToken(newToken);
setAdminName(name);
+ setAdminRole(role || 'admin');
setIsAuthenticated(true);
migratePreferences(name);
return { success: true };
@@ -66,14 +72,17 @@ export const AuthProvider = ({ children }) => {
const logout = () => {
localStorage.removeItem('adminToken');
localStorage.removeItem('adminName');
+ localStorage.removeItem('adminRole');
setToken(null);
setAdminName(null);
+ setAdminRole(null);
setIsAuthenticated(false);
};
const value = {
token,
adminName,
+ adminRole,
isAuthenticated,
loading,
login,
diff --git a/frontend/src/hooks/usePresence.js b/frontend/src/hooks/usePresence.js
index f1c22d5..1121208 100644
--- a/frontend/src/hooks/usePresence.js
+++ b/frontend/src/hooks/usePresence.js
@@ -9,9 +9,15 @@ export function usePresence() {
const { token, adminName, isAuthenticated } = useAuth();
const location = useLocation();
const [viewers, setViewers] = useState([]);
+ const [services, setServices] = useState([]);
const wsRef = useRef(null);
const pingRef = useRef(null);
const reconnectRef = useRef(null);
+ const locationRef = useRef(location.pathname);
+ const adminNameRef = useRef(adminName);
+
+ locationRef.current = location.pathname;
+ adminNameRef.current = adminName;
const getWsUrl = useCallback(() => {
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
@@ -32,7 +38,7 @@ export function usePresence() {
const msg = JSON.parse(event.data);
if (msg.type === 'auth_success') {
- ws.send(JSON.stringify({ type: 'page_focus', page: location.pathname }));
+ ws.send(JSON.stringify({ type: 'page_focus', page: locationRef.current }));
pingRef.current = setInterval(() => {
if (ws.readyState === WebSocket.OPEN) {
@@ -42,11 +48,16 @@ export function usePresence() {
}
if (msg.type === 'presence_update') {
- const currentPage = location.pathname;
- const onSamePage = msg.admins
- .filter(a => a.page === currentPage)
- .map(a => a.name === adminName ? 'me' : a.name);
- setViewers(onSamePage);
+ const currentPage = locationRef.current;
+ const currentName = adminNameRef.current;
+ const pageViewers = msg.admins
+ .filter(a => a.role !== 'bot' && a.role !== 'utility' && a.page === currentPage)
+ .map(a => ({ name: a.name === currentName ? 'me' : a.name, role: a.role || 'admin' }));
+ const connectedServices = msg.admins
+ .filter(a => a.role === 'bot' || a.role === 'utility')
+ .map(a => ({ name: a.name, role: a.role }));
+ setViewers(pageViewers);
+ setServices(connectedServices);
}
};
@@ -58,7 +69,7 @@ export function usePresence() {
ws.onerror = () => {
ws.close();
};
- }, [isAuthenticated, token, adminName, location.pathname, getWsUrl]);
+ }, [isAuthenticated, token, getWsUrl]);
useEffect(() => {
connect();
@@ -79,5 +90,5 @@ export function usePresence() {
}
}, [location.pathname]);
- return { viewers };
+ return { viewers, services };
}
diff --git a/tests/api/named-admins.test.js b/tests/api/named-admins.test.js
index a0e6ab9..a8e5026 100644
--- a/tests/api/named-admins.test.js
+++ b/tests/api/named-admins.test.js
@@ -26,23 +26,33 @@ describe('load-admins', () => {
test('loads admins from ADMIN_CONFIG_PATH', () => {
const configPath = writeConfig([
- { name: 'Alice', key: 'key-a' },
- { name: 'Bob', key: 'key-b' }
+ { name: 'Alice', role: 'admin', key: 'key-a' },
+ { name: 'Bob', role: 'bot', key: 'key-b' }
]);
process.env.ADMIN_CONFIG_PATH = configPath;
const { findAdminByKey } = require('../../backend/config/load-admins');
- expect(findAdminByKey('key-a')).toEqual({ name: 'Alice' });
- expect(findAdminByKey('key-b')).toEqual({ name: 'Bob' });
+ expect(findAdminByKey('key-a')).toEqual({ name: 'Alice', role: 'admin' });
+ expect(findAdminByKey('key-b')).toEqual({ name: 'Bob', role: 'bot' });
expect(findAdminByKey('wrong')).toBeNull();
});
+ test('defaults role to admin when not specified', () => {
+ const configPath = writeConfig([
+ { name: 'Alice', key: 'key-a' }
+ ]);
+ process.env.ADMIN_CONFIG_PATH = configPath;
+
+ const { findAdminByKey } = require('../../backend/config/load-admins');
+ expect(findAdminByKey('key-a')).toEqual({ name: 'Alice', role: 'admin' });
+ });
+
test('falls back to ADMIN_KEY when no config file', () => {
process.env.ADMIN_CONFIG_PATH = path.join(tmpDir, 'nonexistent.json');
process.env.ADMIN_KEY = 'legacy-key';
const { findAdminByKey } = require('../../backend/config/load-admins');
- expect(findAdminByKey('legacy-key')).toEqual({ name: 'Admin' });
+ expect(findAdminByKey('legacy-key')).toEqual({ name: 'Admin', role: 'admin' });
expect(findAdminByKey('wrong')).toBeNull();
});
@@ -91,7 +101,7 @@ describe('POST /api/auth/login — named admins', () => {
({ app } = require('../../backend/server'));
});
- test('login returns admin name in response', async () => {
+ test('login returns admin name and role in response', async () => {
const res = await request(app)
.post('/api/auth/login')
.set('Content-Type', 'application/json')
@@ -99,10 +109,11 @@ describe('POST /api/auth/login — named admins', () => {
expect(res.status).toBe(200);
expect(res.body.name).toBeDefined();
+ expect(res.body.role).toBe('admin');
expect(res.body.token).toBeDefined();
});
- test('verify returns admin name in user object', async () => {
+ test('verify returns admin name and role in user object', async () => {
const loginRes = await request(app)
.post('/api/auth/login')
.set('Content-Type', 'application/json')
@@ -114,6 +125,7 @@ describe('POST /api/auth/login — named admins', () => {
expect(res.status).toBe(200);
expect(res.body.user.name).toBeDefined();
+ expect(res.body.user.role).toBe('admin');
});
test('invalid key still returns 401', async () => {
@@ -155,15 +167,15 @@ describe('WebSocket presence', () => {
server.close(done);
});
- function makeToken(name) {
- return jwt.sign({ role: 'admin', name }, process.env.JWT_SECRET, { expiresIn: '1h' });
+ function makeToken(name, role = 'admin') {
+ return jwt.sign({ role, name }, process.env.JWT_SECRET, { expiresIn: '1h' });
}
- function connectAndAuth(name) {
+ function connectAndAuth(name, role = 'admin') {
return new Promise((resolve) => {
const ws = new WebSocket(wsUrl);
ws.on('open', () => {
- ws.send(JSON.stringify({ type: 'auth', token: makeToken(name) }));
+ ws.send(JSON.stringify({ type: 'auth', token: makeToken(name, role) }));
});
ws.on('message', (data) => {
const msg = JSON.parse(data.toString());
@@ -187,7 +199,7 @@ describe('WebSocket presence', () => {
});
}
- test('page_focus triggers presence_update with admin name and page', async () => {
+ test('page_focus triggers presence_update with admin name, role, and page', async () => {
const ws1 = await connectAndAuth('Alice');
const ws2 = await connectAndAuth('Bob');
@@ -198,7 +210,7 @@ describe('WebSocket presence', () => {
const msg = await presencePromise;
expect(msg.admins).toEqual(
expect.arrayContaining([
- expect.objectContaining({ name: 'Alice', page: '/history' })
+ expect.objectContaining({ name: 'Alice', role: 'admin', page: '/history' })
])
);
@@ -224,4 +236,61 @@ describe('WebSocket presence', () => {
ws2.close();
});
+
+ test('bot role appears in presence without page_focus', async () => {
+ const wsAdmin = await connectAndAuth('Alice');
+ const wsBot = await connectAndAuth('ChatBot', 'bot');
+
+ wsAdmin.send(JSON.stringify({ type: 'page_focus', page: '/history' }));
+
+ await new Promise(r => setTimeout(r, 100));
+
+ const presencePromise = waitForMessage(wsAdmin, 'presence_update');
+ wsAdmin.send(JSON.stringify({ type: 'page_focus', page: '/picker' }));
+
+ const msg = await presencePromise;
+ const botEntry = msg.admins.find(a => a.name === 'ChatBot');
+ expect(botEntry).toBeDefined();
+ expect(botEntry.role).toBe('bot');
+ expect(botEntry.page).toBeNull();
+
+ wsAdmin.close();
+ wsBot.close();
+ });
+
+ test('utility role appears in presence without page_focus', async () => {
+ const wsAdmin = await connectAndAuth('Alice');
+ const wsUtil = await connectAndAuth('OBS', 'utility');
+
+ wsAdmin.send(JSON.stringify({ type: 'page_focus', page: '/history' }));
+
+ await new Promise(r => setTimeout(r, 100));
+
+ const presencePromise = waitForMessage(wsAdmin, 'presence_update');
+ wsAdmin.send(JSON.stringify({ type: 'page_focus', page: '/picker' }));
+
+ const msg = await presencePromise;
+ const utilEntry = msg.admins.find(a => a.name === 'OBS');
+ expect(utilEntry).toBeDefined();
+ expect(utilEntry.role).toBe('utility');
+ expect(utilEntry.page).toBeNull();
+
+ wsAdmin.close();
+ wsUtil.close();
+ });
+
+ test('admin without page_focus is NOT in presence', async () => {
+ const ws1 = await connectAndAuth('Alice');
+ const ws2 = await connectAndAuth('Bob');
+
+ const presencePromise = waitForMessage(ws1, 'presence_update');
+ ws1.send(JSON.stringify({ type: 'page_focus', page: '/history' }));
+
+ const msg = await presencePromise;
+ const bobEntry = msg.admins.find(a => a.name === 'Bob');
+ expect(bobEntry).toBeUndefined();
+
+ ws1.close();
+ ws2.close();
+ });
});