fix: resolve TypeScript errors in frontend components

- UnifiedBackups: remove unused cols variable in colspan calculation
- GuestDrawer: remove unused IOMetric import, fix osInfo -> osName/osVersion
- Settings: add 'agents' to SettingsTab type, remove unused Boxes import,
  fix ToggleChangeEvent target -> currentTarget
- UnifiedAgents: remove unused onCleanup import, prefix unused hostname param
- NodeSummaryTable: remove unused index parameter in For callback
- Toggle: add locked and lockedMessage props to LabeledToggleProps

frontend-modern/src/components/Backups/UnifiedBackups.tsx

@@ -2123,19 +2123,7 @@ const UnifiedBackups: Component = () => {
                         <>
                           <tr class="bg-gray-50 dark:bg-gray-900/40">
                             <td
-                              colspan={(() => {
-                                let cols = 4; // Base: VMID, Type, Name, Time
-                                if (backupTypeFilter() === 'all' || backupTypeFilter() === 'remote') {
-                                  // Owner - hidden on 2xl
-                                  // We can't easily adjust colspan based on media query in JS without a hook.
-                                  // For now, let's just set a high colspan or use a simpler approach.
-                                  // A safer bet for responsive tables with colspans is to just set it to a large number like 100
-                                  // provided the table layout handles it, or try to be accurate.
-                                  // Given the complexity of responsive hiding, colspan=100 is often the easiest hack for full-width rows.
-                                  return 20;
-                                }
-                                return 20;
-                              })()}
+                              colspan={20 /* Full-width row across all responsive columns */}
                               class="py-1 pr-2 pl-3 text-[12px] sm:text-sm font-semibold text-slate-700 dark:text-slate-100"
                             >
                               <div class="flex items-center justify-between gap-3">

frontend-modern/src/components/Dashboard/GuestDrawer.tsx

@@ -2,7 +2,6 @@ import { Component, Show, For } from 'solid-js';
 import { VM, Container } from '@/types/api';
 import { formatBytes } from '@/utils/format';
 import { DiskList } from './DiskList';
-import { IOMetric } from './IOMetric';
 
 type Guest = VM | Container;
 
@@ -19,17 +18,17 @@ export const GuestDrawer: Component<GuestDrawerProps> = (props) => {
 
     const hasOsInfo = () => {
         if (!isVM(props.guest)) return false;
-        return (props.guest.osInfo?.name?.length ?? 0) > 0 || (props.guest.osInfo?.version?.length ?? 0) > 0;
+        return (props.guest.osName?.length ?? 0) > 0 || (props.guest.osVersion?.length ?? 0) > 0;
     };
 
     const osName = () => {
         if (!isVM(props.guest)) return '';
-        return props.guest.osInfo?.name || '';
+        return props.guest.osName || '';
     };
 
     const osVersion = () => {
         if (!isVM(props.guest)) return '';
-        return props.guest.osInfo?.version || '';
+        return props.guest.osVersion || '';
     };
 
     const hasAgentInfo = () => {

frontend-modern/src/components/Settings/Settings.tsx

@@ -58,7 +58,6 @@ import Sliders from 'lucide-solid/icons/sliders-horizontal';
 import RefreshCw from 'lucide-solid/icons/refresh-cw';
 import Clock from 'lucide-solid/icons/clock';
 import { ProxmoxIcon } from '@/components/icons/ProxmoxIcon';
-import Boxes from 'lucide-solid/icons/boxes';
 import BadgeCheck from 'lucide-solid/icons/badge-check';
 import type { NodeConfig } from '@/types/nodes';
 import type { UpdateInfo, VersionInfo } from '@/api/updates';
@@ -320,6 +319,7 @@ type SettingsTab =
   | 'proxmox'
   | 'docker'
   | 'hosts'
+  | 'agents'
   | 'system-general'
   | 'system-network'
   | 'system-updates'
@@ -348,6 +348,10 @@ const SETTINGS_HEADER_META: Record<SettingsTab, { title: string; description: st
     title: 'Hosts',
     description: 'Monitor Linux, macOS, and Windows machines—servers, desktops, and laptops.',
   },
+  agents: {
+    title: 'Agents',
+    description: 'Install and manage the unified Pulse agent for host and Docker monitoring.',
+  },
   'system-general': {
     title: 'General Settings',
     description: 'Configure appearance preferences and UI behavior.',
@@ -5151,7 +5155,7 @@ const Settings: Component<SettingsProps> = (props) => {
                             label="Hide local login form"
                             description="Hide the username/password form on the login page. Users will only see SSO options unless ?show_local=true is used."
                             checked={hideLocalLogin()}
-                            onChange={(e: ToggleChangeEvent) => handleHideLocalLoginChange(e.target.checked)}
+                            onChange={(e: ToggleChangeEvent) => handleHideLocalLoginChange(e.currentTarget.checked)}
                             disabled={hideLocalLoginLocked() || savingHideLocalLogin()}
                             locked={hideLocalLoginLocked()}
                             lockedMessage="This setting is managed by the PULSE_AUTH_HIDE_LOCAL_LOGIN environment variable"

frontend-modern/src/components/Settings/UnifiedAgents.tsx

@@ -1,4 +1,4 @@
-import { Component, createSignal, Show, For, onMount, createEffect, createMemo, onCleanup } from 'solid-js';
+import { Component, createSignal, Show, For, onMount, createEffect, createMemo } from 'solid-js';
 import { useWebSocket } from '@/App';
 import { Card } from '@/components/shared/Card';
 import { formatRelativeTime, formatAbsoluteTime } from '@/utils/format';
@@ -302,7 +302,7 @@ export const UnifiedAgents: Component = () => {
     const legacyAgents = createMemo(() => allHosts().filter(h => h.isLegacy));
     const hasLegacyAgents = createMemo(() => legacyAgents().length > 0);
 
-    const getUpgradeCommand = (hostname: string) => {
+    const getUpgradeCommand = (_hostname: string) => {
         const token = resolvedToken();
         return `curl -fsSL ${pulseUrl()}/install.sh | sudo bash -s -- --url ${pulseUrl()} --token ${token}`;
     };

frontend-modern/src/components/shared/NodeSummaryTable.tsx

@@ -506,7 +506,7 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
           style={{ 'grid-template-columns': gridTemplate() }}
         >
           <For each={visibleColumns()}>
-            {(column, index) => (
+            {(column) => (
               <HeaderCell column={column} />
             )}
           </For>

frontend-modern/src/components/shared/Toggle.tsx

@@ -87,6 +87,8 @@ interface LabeledToggleProps extends BaseToggleProps {
   label?: JSX.Element;
   description?: JSX.Element;
   containerClass?: string;
+  locked?: boolean;
+  lockedMessage?: string;
 }
 
 export function Toggle(props: LabeledToggleProps) {