add title to agent connection type in all systems table

agent/gpu_intel.go

@@ -74,7 +74,7 @@ func (gm *GPUManager) collectIntelStats() error {
 	var engineNames []string
 	var friendlyNames []string
 	var preEngineCols int
-	var powerIndex int = -1
+	var powerIndex int
 
 	for scanner.Scan() {
 		line := strings.TrimSpace(scanner.Text())

internal/site/src/components/routes/system.tsx

@@ -24,7 +24,7 @@ import MemChart from "@/components/charts/mem-chart"
 import SwapChart from "@/components/charts/swap-chart"
 import TemperatureChart from "@/components/charts/temperature-chart"
 import { getPbTimestamp, pb } from "@/lib/api"
-import { ChartType, ConnectionType, Os, SystemStatus, Unit } from "@/lib/enums"
+import { ChartType, ConnectionType, connectionTypeLabels, Os, SystemStatus, Unit } from "@/lib/enums"
 import { batteryStateTranslations } from "@/lib/i18n"
 import {
 	$allSystemsByName,
@@ -442,15 +442,14 @@ export default memo(function SystemDetail({ name }: { name: string }) {
 										</TooltipTrigger>
 										{system.info.ct && (
 											<TooltipContent>
-												{system.info.ct === ConnectionType.WebSocket ? (
+												<div className="flex gap-1 items-center">
-													<div className="flex gap-1 items-center">
+													{system.info.ct === ConnectionType.WebSocket ? (
-														<WebSocketIcon className="size-4" /> WebSocket
+														<WebSocketIcon className="size-4" />
-													</div>
+													) : (
-												) : (
+														<ChevronRightSquareIcon className="size-4" strokeWidth={2} />
-													<div className="flex gap-1 items-center">
+													)}
-														<ChevronRightSquareIcon className="size-4" strokeWidth={2} /> SSH
+													{connectionTypeLabels[system.info.ct as ConnectionType]}
-													</div>
+												</div>
-												)}
 											</TooltipContent>
 										)}
 									</Tooltip>

internal/site/src/components/routes/system/network-sheet.tsx

@@ -7,6 +7,7 @@ import ChartTimeSelect from "@/components/charts/chart-time-select"
 import { useNetworkInterfaces } from "@/components/charts/hooks"
 import { Button } from "@/components/ui/button"
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
+import { DialogTitle } from "@/components/ui/dialog"
 import { $userSettings } from "@/lib/stores"
 import { decimalString, formatBytes, toFixedFloat } from "@/lib/utils"
 import type { ChartData } from "@/types"
@@ -39,9 +40,10 @@ export default memo(function NetworkSheet({
 
 	return (
 		<Sheet open={netInterfacesOpen} onOpenChange={setNetInterfacesOpen}>
+			<DialogTitle className="sr-only">{t`Network`}</DialogTitle>
 			<SheetTrigger asChild>
 				<Button
-					aria-label={t`View more`}
+					title={t`View more`}
 					variant="outline"
 					size="icon"
 					className="shrink-0 max-sm:absolute max-sm:top-3 max-sm:end-3"
@@ -50,7 +52,7 @@ export default memo(function NetworkSheet({
 				</Button>
 			</SheetTrigger>
 			{hasOpened.current && (
-				<SheetContent className="overflow-auto w-200 !max-w-full p-4 sm:p-6">
+				<SheetContent aria-describedby={undefined} className="overflow-auto w-200 !max-w-full p-4 sm:p-6">
 					<ChartTimeSelect className="w-[calc(100%-2em)]" />
 					<ChartCard
 						empty={dataEmpty}

internal/site/src/components/systems-table/systems-table-columns.tsx

@@ -21,7 +21,7 @@ import {
 } from "lucide-react"
 import { memo, useMemo, useRef, useState } from "react"
 import { isReadOnlyUser, pb } from "@/lib/api"
-import { ConnectionType, MeterState, SystemStatus } from "@/lib/enums"
+import { ConnectionType, connectionTypeLabels, MeterState, SystemStatus } from "@/lib/enums"
 import { $longestSystemNameLen, $userSettings } from "@/lib/stores"
 import {
 	cn,
@@ -278,12 +278,25 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD
 					"text-red-500": system.status !== SystemStatus.Up,
 				}
 				return (
-					<div className={cn("flex gap-1.5 items-center md:pe-5 tabular-nums", viewMode === "table" && "ps-0.5")}>
+					<Link
-						{system.info.ct === ConnectionType.WebSocket && <WebSocketIcon className={cn("size-3", color)} />}
+						href={getPagePath($router, "system", { name: system.name })}
-						{system.info.ct === ConnectionType.SSH && <ChevronRightSquareIcon className={cn("size-3", color)} />}
+						className={cn(
+							"flex gap-1.5 items-center md:pe-5 tabular-nums relative z-30",
+							viewMode === "table" && "ps-0.5"
+						)}
+						tabIndex={-1}
+						title={connectionTypeLabels[system.info.ct as ConnectionType]}
+						role="none"
+					>
+						{system.info.ct === ConnectionType.WebSocket && (
+							<WebSocketIcon className={cn("size-3 pointer-events-none", color)} />
+						)}
+						{system.info.ct === ConnectionType.SSH && (
+							<ChevronRightSquareIcon className={cn("size-3 pointer-events-none", color)} />
+						)}
 						{!system.info.ct && <IndicatorDot system={system} className={cn(color, "bg-current mx-0.5")} />}
 						<span className="truncate max-w-14">{info.getValue() as string}</span>
-					</div>
+					</Link>
 				)
 			},
 		},

internal/site/src/lib/enums.ts

@@ -59,3 +59,5 @@ export enum ConnectionType {
 	SSH = 1,
 	WebSocket,
 }
+
+export const connectionTypeLabels = ["", "SSH", "WebSocket"] as const