fix: redesign session log player controls, fix tooltip overlap and drop dot separators

plugins/host-metrics/src/frontend/MetricsChartWidget.tsx

@@ -178,8 +178,9 @@ function MetricsChartWidget({
             <span className="text-[10px] font-semibold text-foreground truncate">
               {hostName ?? `Host #${hostId}`}
             </span>
-            <span className="text-[9px] text-muted-foreground">
-              {label} · {range}
+            <span className="flex gap-2 text-[9px] text-muted-foreground">
+              <span className="truncate">{label}</span>
+              <span className="shrink-0">{range}</span>
             </span>
           </div>
           {showCurrentValue && current != null && (

plugins/host-metrics/src/frontend/cards/FilesystemPicker.tsx

@@ -66,11 +66,13 @@ export function FilesystemPicker({
                 {fs.mount}
               </span>
             )}
-            <span className="ml-auto shrink-0 whitespace-nowrap text-[10px] tabular-nums text-muted-foreground">
-              {fs.usedHuman && fs.totalHuman
-                ? `${fs.usedHuman}/${fs.totalHuman}`
-                : "N/A"}
-              {fs.percent != null ? ` · ${fs.percent}%` : ""}
+            <span className="ml-auto flex shrink-0 gap-2 whitespace-nowrap text-[10px] tabular-nums text-muted-foreground">
+              <span>
+                {fs.usedHuman && fs.totalHuman
+                  ? `${fs.usedHuman}/${fs.totalHuman}`
+                  : "N/A"}
+              </span>
+              {fs.percent != null && <span>{fs.percent}%</span>}
             </span>
           </DropdownMenuItem>
         ))}

plugins/host-metrics/src/frontend/cards/GpuCard.tsx

@@ -39,7 +39,7 @@ function processVram(process: GpuProcess): string {
     process.memoryUsedMiB === null
       ? NA
       : `${formatGiB(process.memoryUsedMiB)}G`;
-  return process.gpuIndex === null ? vram : `${vram} · GPU ${process.gpuIndex}`;
+  return process.gpuIndex === null ? vram : `${vram} (GPU ${process.gpuIndex})`;
 }
 
 function executableName(path: string): string {

plugins/host-metrics/src/frontend/cards/ProcessesCard.tsx

@@ -42,7 +42,7 @@ export function ProcessesCard({ metrics }: { metrics: ServerMetrics | null }) {
             <StatRow
               key={p.pid}
               label={p.command}
-              value={`${p.cpu}% cpu · ${p.mem}% mem`}
+              value={`${p.cpu}% cpu, ${p.mem}% mem`}
               mono
             />
           ))}

plugins/host-metrics/src/frontend/cards/managers/HealthCheckCard.tsx

@@ -288,9 +288,13 @@ export function HealthCheckCard({ hostId }: { hostId: number | null }) {
                         : check.target}
                     </span>
                   </div>
-                  <span className="font-mono text-[10px] text-muted-foreground">
-                    {result?.latencyMs != null ? `${result.latencyMs}ms` : "—"}
-                    {upPct != null ? ` · ${upPct}%` : ""}
+                  <span className="flex gap-2 font-mono text-[10px] text-muted-foreground">
+                    <span>
+                      {result?.latencyMs != null
+                        ? `${result.latencyMs}ms`
+                        : "-"}
+                    </span>
+                    {upPct != null && <span>{upPct}%</span>}
                   </span>
                 </div>
                 {hist.length > 1 && (

plugins/host-metrics/src/frontend/cards/managers/ProcessInspectorCard.tsx

@@ -160,7 +160,7 @@ export function ProcessInspectorCard({ hostId }: { hostId: number | null }) {
             <span>{p.mem.toFixed(0)}%</span>
             <span
               className="truncate"
-              title={`${p.user} · ${p.args}`}
+              title={`${p.user}\n${p.args}`}
               style={
                 depth ? { paddingLeft: `${(depth * 12) / 14}rem` } : undefined
               }

plugins/host-metrics/src/frontend/cards/managers/WireGuardManagerCard.tsx

@@ -133,10 +133,12 @@ export function WireGuardManagerCard({ hostId }: { hostId: number | null }) {
                   <span className="text-xs font-semibold font-mono">
                     {iface.name}
                   </span>
-                  <span className="text-[10px] text-muted-foreground">
-                    {iface.up ? "up" : "down"}
-                    {iface.listenPort ? ` · :${iface.listenPort}` : ""}
-                    {iface.peers.length > 0 ? ` · ${iface.peers.length}p` : ""}
+                  <span className="flex gap-2 text-[10px] text-muted-foreground">
+                    <span>{iface.up ? "up" : "down"}</span>
+                    {iface.listenPort ? <span>:{iface.listenPort}</span> : null}
+                    {iface.peers.length > 0 && (
+                      <span>{iface.peers.length}p</span>
+                    )}
                   </span>
                 </div>
               </button>

plugins/host-metrics/tests/frontend/cards/GpuCard.test.tsx

@@ -108,8 +108,8 @@ describe("GpuCard", () => {
 
     const python = screen.getByText("python3");
     expect(python).toHaveAttribute("title", "/usr/bin/python3");
-    expect(screen.getByText("7.7G · GPU 0")).toBeInTheDocument();
-    expect(screen.getByText("N/A · GPU 1")).toBeInTheDocument();
+    expect(screen.getByText("7.7G (GPU 0)")).toBeInTheDocument();
+    expect(screen.getByText("N/A (GPU 1)")).toBeInTheDocument();
   });
 
   it("says so when no process is using a GPU", () => {