copyToClipboard(linuxScript)}>
Copy and run the install script on your server
The agent downloads, installs, and registers automatically
- Your server will appear as Pending until the agent connects, then switch to Online
+ Your server will appear as "Pending" until the agent connects, then switch to "Online"
The registration token expires in 24 hours. You can regenerate it from the server settings page.
@@ -1194,12 +1178,6 @@ Install-ServerKitAgent -Server "${window.location.origin}" -Token "${token}"` :
};
// Icons
-const FolderTinyIcon = () => (
-
-
-);
-
const RefreshIcon = () => (
-
- Scanning fleet...
-
-
Loading servers...
;
}
- const visibleIds = filteredServers.map(s => s.id);
- const allVisibleSelected = visibleIds.length > 0 && visibleIds.every(id => selectedIds.has(id));
- const someVisibleSelected = visibleIds.some(id => selectedIds.has(id));
-
return (
-
-
+
+
Servers
-
{servers.length} {servers.length === 1 ? 'machine' : 'machines'} · {fleetStats.online} online · {availability}% availability
+
Manage your connected servers and agents
-
+
setShowGroupModal(true)}>
-
setShowAddModal(true)}>
-
-
-
-
- {statCards.map(stat => (
- setSelectedStatus(stat.key)}
- aria-pressed={selectedStatus === stat.key}
- >
- {stat.icon}
-
- {stat.label}
- {stat.value}
- {stat.detail}
-
-
- ))}
-
-
-
-
-
-
Group
-
setSelectedGroup(e.target.value)}>
- All Groups
- {groups.map(group => (
- {group.name}
- ))}
- Ungrouped
-
+
+
+
+
+
+
{stats.total}
+
Total Servers
-
-
-
{filteredServers.length}
-
{filteredServers.length === 1 ? 'server' : 'servers'}
- {hasActiveFilters && (
-
{
- setSelectedGroup('all');
- setSelectedStatus('all');
- setSearchTerm('');
- }}
- >
- Clear filters
-
- )}
+
+
+
+
+
{stats.online}
+
Online
+
-
-
- {selectedIds.size > 0 && (
-
-
-
{selectedIds.size}
-
selected
+
+
+
-
-
setSelectedIds(new Set())}>
- Clear selection
-
-
setBulkDeleteOpen(true)}>
-
+
+
{stats.offline}
+
Offline
- )}
+
+
+
+
+
{stats.connecting}
+
Connecting
+
+
+
+
+
+
+
+
+ setSelectedGroup(e.target.value)}>
+ All Groups
+ {groups.map(group => (
+ {group.name}
+ ))}
+ Ungrouped
+
+
+
{filteredServers.length === 0 ? (
-
-
-
-
{servers.length === 0 ? 'No servers yet' : 'No servers match these filters'}
+
+
+
No servers found
{servers.length === 0
- ? 'Install a ServerKit agent on a machine to start monitoring health and managing Docker remotely.'
- : 'Try a different status, group, or search term to bring machines back into view.'}
+ ? 'Add your first server to start managing remote infrastructure.'
+ : 'No servers match your current filters.'}
- {servers.length === 0 ? (
+ {servers.length === 0 && (
setShowAddModal(true)}>
-
- ) : (
-
{
- setSelectedGroup('all');
- setSelectedStatus('all');
- setSearchTerm('');
- }}
- >
- Clear filters
+
)}
) : (
-
-
+
+ {filteredServers.map(server => (
+ handlePingServer(server.id)}
+ />
+ ))}
)}
@@ -372,370 +193,119 @@ const Servers = () => {
onUpdated={loadData}
/>
)}
-
-
setDeleteTarget(null)}
- />
-
- setBulkDeleteOpen(false)}
- />
);
};
-const formatLastSeen = (timestamp) => {
- if (!timestamp) return 'Never';
- const date = new Date(timestamp);
- const now = new Date();
- const diff = (now - date) / 1000;
- if (diff < 60) return 'Just now';
- if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
- if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
- return date.toLocaleDateString();
-};
-
-const clamp = (v) => Math.min(100, Math.max(0, Number(v) || 0));
-
-const ServerRow = ({ server, selected, onToggle, onPing, onDelete, onCopyInstall }) => {
- const [menuPos, setMenuPos] = useState(null);
- const triggerRef = useRef(null);
- const menuRef = useRef(null);
-
- const closeMenu = useCallback(() => setMenuPos(null), []);
-
- const openMenu = () => {
- const r = triggerRef.current?.getBoundingClientRect();
- if (!r) return;
- const menuHeight = 240;
- const menuWidth = 220;
- const flipUp = r.bottom + menuHeight + 8 > window.innerHeight;
- setMenuPos({
- top: flipUp ? r.top - menuHeight - 4 : r.bottom + 4,
- left: Math.max(8, r.right - menuWidth),
- });
+const ServerCard = ({ server, onPing }) => {
+ const statusColors = {
+ online: '#10B981',
+ offline: '#EF4444',
+ connecting: '#F59E0B',
+ pending: '#6B7280'
};
- useEffect(() => {
- if (!menuPos) return undefined;
- const onDocDown = (e) => {
- if (
- menuRef.current && !menuRef.current.contains(e.target) &&
- triggerRef.current && !triggerRef.current.contains(e.target)
- ) {
- closeMenu();
- }
- };
- const onScroll = () => closeMenu();
- document.addEventListener('mousedown', onDocDown);
- window.addEventListener('scroll', onScroll, true);
- window.addEventListener('resize', onScroll);
- return () => {
- document.removeEventListener('mousedown', onDocDown);
- window.removeEventListener('scroll', onScroll, true);
- window.removeEventListener('resize', onScroll);
- };
- }, [menuPos, closeMenu]);
-
- const status = server.status || 'pending';
- const displayHost = server.hostname || server.ip_address || 'Unassigned endpoint';
- const initial = (server.name || displayHost || '?').charAt(0).toUpperCase();
- const metrics = {
- cpu: clamp(server.metrics?.cpu_percent),
- memory: clamp(server.metrics?.memory_percent),
- disk: clamp(server.metrics?.disk_percent),
+ const formatLastSeen = (timestamp) => {
+ if (!timestamp) return 'Never';
+ const date = new Date(timestamp);
+ const now = new Date();
+ const diff = (now - date) / 1000;
+
+ if (diff < 60) return 'Just now';
+ if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+ if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+ return date.toLocaleDateString();
};
- const hasMetrics = server.metrics && status === 'online';
return (
-
-
-
-
- {initial}
-
- {server.name}
- {displayHost}
-
-
-
-
-
-
-
-
- {server.group_name ? (
-
-
- ) : (
- —
- )}
-
-
-
-
{server.os_type || 'Unknown'}
-
{server.agent_version ? `agent ${server.agent_version}` : 'agent not installed'}
+
+
+
+
+
{server.name}
+ {server.hostname || server.ip_address}
-
-
- {hasMetrics ? (
-
-
- CPU
- {metrics.cpu.toFixed(0)}%
-
-
- RAM
- {metrics.memory.toFixed(0)}%
-
-
- DSK
- {metrics.disk.toFixed(0)}%
-
-
- ) : (
- {status === 'pending' ? 'Awaiting agent' : status === 'offline' ? 'Offline' : 'No data'}
- )}
-
-
- {formatLastSeen(server.last_seen)}
-
-
-
-
-
-
-
-
-
(menuPos ? closeMenu() : openMenu())}
- aria-haspopup="menu"
- aria-expanded={Boolean(menuPos)}
- title="More actions"
- >
-
- {menuPos && (
-
-
-
View details
-
-
{ closeMenu(); onPing(); }}>
-
- {status === 'pending' && (
-
{ closeMenu(); onCopyInstall(); }}>
-
- )}
-
-
Manage Docker
-
-
-
{ closeMenu(); onDelete(); }}>
-
-
- )}
-
-
- );
-};
-
-const PairAgentForm = ({ groups, onClose, onClaimed }) => {
- const [pairCode, setPairCode] = useState('');
- const [passphrase, setPassphrase] = useState('');
- const [name, setName] = useState('');
- const [groupId, setGroupId] = useState('');
- const [lookupResult, setLookupResult] = useState(null);
- const [lookupError, setLookupError] = useState('');
- const [claimError, setClaimError] = useState('');
- const [loading, setLoading] = useState(false);
- const toast = useToast();
-
- const formattedCode = pairCode
- .toUpperCase()
- .replace(/[^0-9A-Z]/g, '')
- .replace(/[01OIL]/g, '')
- .slice(0, 6);
-
- async function handleLookup() {
- setLookupError('');
- setLookupResult(null);
- if (formattedCode.length !== 6) {
- setLookupError('Pair code must be 6 characters');
- return;
- }
- setLoading(true);
- try {
- const res = await api.lookupPairCode(formattedCode);
- setLookupResult(res);
- if (!name && res.suggested_name) setName(res.suggested_name);
- } catch (err) {
- setLookupError(err.message || 'Pair code not found');
- } finally {
- setLoading(false);
- }
- }
-
- async function handleClaim(e) {
- e.preventDefault();
- setClaimError('');
- if (!passphrase) {
- setClaimError('Passphrase is required');
- return;
- }
- setLoading(true);
- try {
- await api.claimPairedAgent({
- pair_code: formattedCode,
- passphrase,
- name: name || undefined,
- group_id: groupId || undefined,
- trust_fingerprint: true
- });
- toast.success('Agent paired successfully');
- onClaimed();
- } catch (err) {
- setClaimError(err.message || 'Failed to claim agent');
- } finally {
- setLoading(false);
- }
- }
-
- function formatDisplay(code) {
- if (!code) return '------';
- return code.length > 3 ? `${code.slice(0, 3)}-${code.slice(3)}` : code;
- }
+
- return (
-