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

plugins/ai/src/frontend/AiProviderSettings.tsx

@@ -357,11 +357,17 @@ export function AiProviderSettings({
               <div className="truncate text-sm font-medium">
                 {provider.label}
               </div>
-              <div className="truncate text-xs text-muted-foreground">
-                {provider.providerType}
-                {provider.defaultModel ? ` · ${provider.defaultModel}` : ""}
-                {provider.baseUrl ? ` · ${provider.baseUrl}` : ""}
-                {provider.apiKeyPrefix ? ` · ${provider.apiKeyPrefix}…` : ""}
+              <div className="flex gap-3 overflow-hidden whitespace-nowrap text-xs text-muted-foreground">
+                <span className="shrink-0">{provider.providerType}</span>
+                {provider.defaultModel && (
+                  <span className="truncate">{provider.defaultModel}</span>
+                )}
+                {provider.baseUrl && (
+                  <span className="truncate">{provider.baseUrl}</span>
+                )}
+                {provider.apiKeyPrefix && (
+                  <span className="shrink-0">{provider.apiKeyPrefix}…</span>
+                )}
               </div>
             </div>
             <div className="flex shrink-0 items-center">

plugins/automations/src/frontend/AutomationsPanel.tsx

@@ -428,15 +428,19 @@ export function AutomationsPanel({
                   </div>
 
                   <div className="flex items-center gap-1 mt-1">
-                    <span className="text-[11px] text-muted-foreground flex-1 truncate">
-                      {row.definition
-                        ? t(
+                    <span className="text-[11px] text-muted-foreground flex-1 flex gap-2.5 min-w-0 overflow-hidden whitespace-nowrap">
+                      {row.definition && (
+                        <span className="truncate">
+                          {t(
                             `${base}.triggerKinds.${row.definition.trigger.kind}`,
-                          )
-                        : ""}
-                      {row.last_run_status
-                        ? ` · ${timeAgo(row.last_run_at, t)}`
-                        : ""}
+                          )}
+                        </span>
+                      )}
+                      {row.last_run_status && (
+                        <span className="shrink-0">
+                          {timeAgo(row.last_run_at, t)}
+                        </span>
+                      )}
                     </span>
                     <Button
                       variant="ghost"
@@ -499,11 +503,11 @@ export function AutomationsPanel({
                       {t(`${base}.statuses.${entry.status}`)}
                     </span>
                   </div>
-                  <div className="text-[11px] text-muted-foreground">
-                    {timeAgo(entry.started_at, t)}
-                    {entry.duration_ms !== null
-                      ? ` · ${Math.round(entry.duration_ms / 100) / 10}s`
-                      : ""}
+                  <div className="flex gap-2.5 text-[11px] text-muted-foreground">
+                    <span>{timeAgo(entry.started_at, t)}</span>
+                    {entry.duration_ms !== null && (
+                      <span>{Math.round(entry.duration_ms / 100) / 10}s</span>
+                    )}
                   </div>
                   {entry.error && (
                     <div className="text-[11px] text-destructive truncate">

plugins/automations/src/frontend/HostMaintenance.tsx

@@ -41,7 +41,7 @@ function VisibleBadge({
   return (
     <Badge
       variant="outline"
-      title={`${active.reasons.join("; ")} · ${active.estimatedEnd}`}
+      title={`${active.reasons.join("; ")}\n${active.estimatedEnd}`}
     >
       {title}
     </Badge>
@@ -121,9 +121,8 @@ function MaintenanceEditor({
   return (
     <div className="mx-auto w-full max-w-3xl space-y-6 overflow-auto p-6">
       <div>
-        <h2 className="text-lg font-semibold">
-          {t("maintenance.title")} · {host.name || host.ip}
-        </h2>
+        <h2 className="text-lg font-semibold">{t("maintenance.title")}</h2>
+        <p className="text-sm font-medium">{host.name || host.ip}</p>
         <p className="text-sm text-muted-foreground">
           {t("maintenance.description")}
         </p>
@@ -308,12 +307,16 @@ function MaintenanceEditor({
           >
             <div className="min-w-0 space-y-1">
               <p className="break-words">{plan.reason}</p>
-              <p className="text-sm text-muted-foreground">
-                {t(`maintenance.${plan.recurrence}`)} ·{" "}
-                {plan.nextStart
-                  ? `${plan.nextStart.replace("T", " ").slice(0, 16)} UTC`
-                  : t("maintenance.completed")}{" "}
-                · {t("maintenance.minutes", { count: plan.durationMinutes })}
+              <p className="flex flex-wrap gap-x-3 text-sm text-muted-foreground">
+                <span>{t(`maintenance.${plan.recurrence}`)}</span>
+                <span>
+                  {plan.nextStart
+                    ? `${plan.nextStart.replace("T", " ").slice(0, 16)} UTC`
+                    : t("maintenance.completed")}
+                </span>
+                <span>
+                  {t("maintenance.minutes", { count: plan.durationMinutes })}
+                </span>
               </p>
             </div>
             {canEdit && (

plugins/file-manager/src/frontend/FileManagerSidebar.tsx

@@ -144,11 +144,13 @@ function StorageMeter({
                   <span className="min-w-0 flex-1 truncate font-medium">
                     {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/file-manager/src/frontend/components/AudioPreview.tsx

@@ -77,8 +77,9 @@ export function AudioPreview({
             <h3 className="font-semibold text-foreground text-lg mb-1">
               {file.name.replace(/\.[^/.]+$/, "")}
             </h3>
-            <p className="text-sm text-muted-foreground">
-              {ext.toUpperCase()} • {formatFileSize(file.size, t)}
+            <p className="flex justify-center gap-3 text-sm text-muted-foreground">
+              <span>{ext.toUpperCase()}</span>
+              <span>{formatFileSize(file.size, t)}</span>
             </p>
           </div>
 

plugins/file-manager/src/frontend/components/CompressDialog.tsx

@@ -132,7 +132,7 @@ export function CompressDialog({
                   key={index}
                   className="truncate text-foreground font-medium"
                 >
-                  • {name}
+                  {name}
                 </li>
               ))}
               {fileNames.length > 5 && (

plugins/file-manager/src/frontend/components/LocalTransferProgressToast.tsx

@@ -58,11 +58,10 @@ export function LocalTransferProgressToast({
               title={status.currentFileName}
             >
               {(status.activeFiles ?? 0) > 1 && (
-                <span className="mr-1 text-foreground/70">
+                <span className="mr-2.5 text-foreground/70">
                   {t("fileManager.localTransferInFlight", {
                     count: status.activeFiles,
                   })}
-                  {" · "}
                 </span>
               )}
               {status.currentFileName}

plugins/file-manager/src/frontend/transferMetricsFormat.ts

@@ -87,6 +87,6 @@ export function createFormatTransferMetrics(t: TFunction) {
         }),
       );
     }
-    return parts.join(" · ");
+    return parts.join(", ");
   };
 }

plugins/fleets/src/frontend/FleetInventoryTab.tsx

@@ -256,15 +256,18 @@ export function FleetInventoryTab({
         </select>
 
         {selectedFleet && (
-          <span className="text-[11px] text-muted-foreground">
-            {t("newUi.sidebar.fleets.memberCount", {
-              count: entries.length,
-            })}{" "}
-            &middot;{" "}
-            {t("newUi.sidebar.fleets.inventoryCollectedCount", {
-              count: collectedCount,
-              total: entries.length,
-            })}
+          <span className="flex gap-3 text-[11px] text-muted-foreground">
+            <span>
+              {t("newUi.sidebar.fleets.memberCount", {
+                count: entries.length,
+              })}
+            </span>
+            <span>
+              {t("newUi.sidebar.fleets.inventoryCollectedCount", {
+                count: collectedCount,
+                total: entries.length,
+              })}
+            </span>
           </span>
         )}
 

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", () => {

plugins/proxmox/src/frontend/HostProxmoxTab.tsx

@@ -65,7 +65,7 @@ export function HostProxmoxTab({
       })
     : t("hosts.proxmoxLastSyncNoResult");
   const lastSyncDescription = cfg.lastSyncAt
-    ? `${new Date(cfg.lastSyncAt).toLocaleString()} · ${lastSyncSummary}`
+    ? `${new Date(cfg.lastSyncAt).toLocaleString()}, ${lastSyncSummary}`
     : t("hosts.proxmoxLastSyncNever");
 
   return (

plugins/proxmox/src/frontend/ProxmoxDiscoverDialog.tsx

@@ -331,7 +331,7 @@ export function ProxmoxDiscoverDialog({
                     selected: selected.size,
                   })}
                 </span>
-                <div className="flex gap-2">
+                <div className="flex gap-3">
                   <button
                     className="hover:text-foreground transition-colors"
                     onClick={() =>
@@ -340,7 +340,6 @@ export function ProxmoxDiscoverDialog({
                   >
                     {t("hosts.proxmoxSelectAll")}
                   </button>
-                  <span>·</span>
                   <button
                     className="hover:text-foreground transition-colors"
                     onClick={() => setSelected(new Set())}

plugins/proxmox/src/frontend/stats/NodeSummaryStrip.tsx

@@ -136,10 +136,10 @@ export function NodeSummaryStrip({
         </span>
         <div className="flex items-center gap-1.5 truncate text-[11px] text-muted-foreground">
           <Server className="size-3 shrink-0" />
-          <span className="truncate">
-            {node?.system.hostname ?? "-"}
-            {node?.system.pveVersion ? ` · ${node.system.pveVersion}` : ""}
-          </span>
+          <span className="truncate">{node?.system.hostname ?? "-"}</span>
+          {node?.system.pveVersion && (
+            <span className="ml-1 shrink-0">{node.system.pveVersion}</span>
+          )}
         </div>
       </div>
     </div>

plugins/session-recording/locales/en.json

@@ -44,10 +44,17 @@
     "copied": "Copied!",
     "loadError": "Failed to load session logs",
     "deleteError": "Failed to delete session log",
-    "filterByHost": "Filter by host..."
+    "filterByHost": "Filter by host...",
+    "back": "Back",
+    "empty": "(empty)",
+    "noResults": "No results for \"{{query}}\"",
+    "hostFallback": "Host {{id}}",
+    "sessionFallback": "Session {{id}}"
   },
   "player": {
     "timeline": "Recording timeline",
-    "speed": "Playback speed"
+    "speed": "Playback speed",
+    "play": "Play recording",
+    "pause": "Pause recording"
   }
 }

plugins/session-recording/src/frontend/SessionLogsPanel.tsx

@@ -1,4 +1,11 @@
-import { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import {
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+  useRef,
+  type ReactNode,
+} from "react";
 import {
   useTranslation,
   useToast,
@@ -146,6 +153,63 @@ function SectionHeader({ label, count }: { label: string; count: number }) {
   );
 }
 
+function LogMeta({
+  items,
+  className,
+}: {
+  items: (string | null | undefined)[];
+  className?: string;
+}) {
+  return (
+    <span
+      className={`flex min-w-0 items-center gap-x-2.5 overflow-hidden whitespace-nowrap text-[10px] ${className ?? ""}`}
+    >
+      {items.filter(Boolean).map((item, i) => (
+        <span key={i} className="truncate last:shrink-0">
+          {item}
+        </span>
+      ))}
+    </span>
+  );
+}
+
+const ACTION_BUTTON =
+  "size-6 flex items-center justify-center text-muted-foreground/50 hover:text-foreground hover:bg-muted/60 transition-colors";
+
+function ActionButton({
+  label,
+  onClick,
+  destructive,
+  children,
+}: {
+  label: string;
+  onClick: () => void;
+  destructive?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={onClick}
+          aria-label={label}
+          className={
+            destructive
+              ? "size-6 flex items-center justify-center text-muted-foreground/50 hover:text-destructive hover:bg-destructive/10 transition-colors"
+              : ACTION_BUTTON
+          }
+        >
+          {children}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="top" sideOffset={6}>
+        {label}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
 function LogRow({
   log,
   onView,
@@ -160,7 +224,10 @@ function LogRow({
   onDelete: () => void;
 }) {
   const { t } = useTranslation();
-  const hostLabel = log.hostName ?? log.hostIp ?? `Host ${log.hostId}`;
+  const hostLabel =
+    log.hostName ??
+    log.hostIp ??
+    t("sessionLogs.hostFallback", { id: log.hostId });
 
   return (
     <div className="group flex items-center gap-2.5 px-3 py-2.5 border-b border-border/40 last:border-b-0 hover:bg-muted/40 transition-colors">
@@ -172,68 +239,44 @@ function LogRow({
         <span className="text-xs font-semibold truncate text-foreground">
           {hostLabel}
         </span>
-        <span className="text-[10px] text-muted-foreground/60 truncate">
-          {formatDate(log.startedAt)}
-          {" · "}
-          {(log.protocol ?? "ssh").toUpperCase()}
-          {log.username ? ` · ${log.username}` : ""}
-          {" · "}
-          {formatDuration(log.duration)}
-          {" · "}
-          {formatBytes(log.sizeBytes)}
-        </span>
+        <LogMeta
+          className="text-muted-foreground/60"
+          items={[
+            formatDate(log.startedAt),
+            (log.protocol ?? "ssh").toUpperCase(),
+            log.username,
+            formatDuration(log.duration),
+            formatBytes(log.sizeBytes),
+          ]}
+        />
       </div>
 
-      <TooltipProvider>
+      <TooltipProvider disableHoverableContent>
         <div className="shrink-0 flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={onView}
-                className="size-6 flex items-center justify-center text-muted-foreground/50 hover:text-foreground hover:bg-muted/60 transition-colors"
-              >
-                <Eye className="size-3" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="left">View log</TooltipContent>
-          </Tooltip>
+          <ActionButton label={t("sessionLogs.viewLog")} onClick={onView}>
+            <Eye className="size-3" />
+          </ActionButton>
           {log.format === "asciicast" && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  onClick={onDownloadText}
-                  className="size-6 flex items-center justify-center text-muted-foreground/50 hover:text-foreground hover:bg-muted/60 transition-colors"
-                >
-                  <FileText className="size-3" />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="left">
-                {t("sessionLogs.downloadAsText")}
-              </TooltipContent>
-            </Tooltip>
+            <ActionButton
+              label={t("sessionLogs.downloadAsText")}
+              onClick={onDownloadText}
+            >
+              <FileText className="size-3" />
+            </ActionButton>
           )}
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={onDownload}
-                className="size-6 flex items-center justify-center text-muted-foreground/50 hover:text-foreground hover:bg-muted/60 transition-colors"
-              >
-                <Download className="size-3" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="left">Download</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={onDelete}
-                className="size-6 flex items-center justify-center text-muted-foreground/50 hover:text-destructive hover:bg-destructive/10 transition-colors"
-              >
-                <X className="size-3" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="left">Delete</TooltipContent>
-          </Tooltip>
+          <ActionButton
+            label={t("sessionLogs.downloadLog")}
+            onClick={onDownload}
+          >
+            <Download className="size-3" />
+          </ActionButton>
+          <ActionButton
+            label={t("sessionLogs.deleteLog")}
+            onClick={onDelete}
+            destructive
+          >
+            <X className="size-3" />
+          </ActionButton>
         </div>
       </TooltipProvider>
     </div>
@@ -406,14 +449,18 @@ export function SessionLogsPanel() {
   // Inline log viewer
   if (viewLog) {
     const hostLabel =
-      viewLog.hostName ?? viewLog.hostIp ?? `Host ${viewLog.hostId}`;
+      viewLog.hostName ??
+      viewLog.hostIp ??
+      t("sessionLogs.hostFallback", { id: viewLog.hostId });
     return (
       <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
         {/* Viewer header */}
         <div className="flex items-center gap-2 px-2 py-2 border-b border-border/60 bg-muted/20 shrink-0">
           <button
+            type="button"
             onClick={() => setViewLog(null)}
-            className="size-6 flex items-center justify-center text-muted-foreground/50 hover:text-foreground hover:bg-muted/60 transition-colors"
+            aria-label={t("sessionLogs.back")}
+            className={ACTION_BUTTON}
           >
             <ArrowLeft className="size-3.5" />
           </button>
@@ -421,67 +468,50 @@ export function SessionLogsPanel() {
             <span className="text-xs font-semibold truncate text-foreground">
               {hostLabel}
             </span>
-            <span className="text-[10px] text-muted-foreground/50">
-              {formatDate(viewLog.startedAt)}
-              {` · ${viewLog.protocol.toUpperCase()}`}
-              {viewLog.duration != null
-                ? ` · ${formatDuration(viewLog.duration)}`
-                : ""}
-              {" · "}
-              {formatBytes(viewLog.sizeBytes)}
-            </span>
+            <LogMeta
+              className="text-muted-foreground/50"
+              items={[
+                formatDate(viewLog.startedAt),
+                viewLog.protocol.toUpperCase(),
+                viewLog.duration != null
+                  ? formatDuration(viewLog.duration)
+                  : null,
+                formatBytes(viewLog.sizeBytes),
+              ]}
+            />
           </div>
-          <TooltipProvider>
+          <TooltipProvider disableHoverableContent>
             <div className="flex items-center gap-0.5 shrink-0">
               {viewText != null && (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <button
-                      onClick={handleCopy}
-                      className="size-6 flex items-center justify-center text-muted-foreground/50 hover:text-foreground hover:bg-muted/60 transition-colors"
-                    >
-                      {copied ? (
-                        <Check className="size-3 text-green-500" />
-                      ) : (
-                        <Copy className="size-3" />
-                      )}
-                    </button>
-                  </TooltipTrigger>
-                  <TooltipContent side="left">
-                    {copied
+                <ActionButton
+                  label={
+                    copied
                       ? t("sessionLogs.copied")
-                      : t("sessionLogs.copyContent")}
-                  </TooltipContent>
-                </Tooltip>
+                      : t("sessionLogs.copyContent")
+                  }
+                  onClick={handleCopy}
+                >
+                  {copied ? (
+                    <Check className="size-3 text-green-500" />
+                  ) : (
+                    <Copy className="size-3" />
+                  )}
+                </ActionButton>
               )}
               {viewLog.format === "asciicast" && (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <button
-                      onClick={() => handleDownloadText(viewLog)}
-                      className="size-6 flex items-center justify-center text-muted-foreground/50 hover:text-foreground hover:bg-muted/60 transition-colors"
-                    >
-                      <FileText className="size-3" />
-                    </button>
-                  </TooltipTrigger>
-                  <TooltipContent side="left">
-                    {t("sessionLogs.downloadAsText")}
-                  </TooltipContent>
-                </Tooltip>
+                <ActionButton
+                  label={t("sessionLogs.downloadAsText")}
+                  onClick={() => handleDownloadText(viewLog)}
+                >
+                  <FileText className="size-3" />
+                </ActionButton>
               )}
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <button
-                    onClick={() => handleDownload(viewLog)}
-                    className="size-6 flex items-center justify-center text-muted-foreground/50 hover:text-foreground hover:bg-muted/60 transition-colors"
-                  >
-                    <Download className="size-3" />
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent side="left">
-                  {t("sessionLogs.downloadLog")}
-                </TooltipContent>
-              </Tooltip>
+              <ActionButton
+                label={t("sessionLogs.downloadLog")}
+                onClick={() => handleDownload(viewLog)}
+              >
+                <Download className="size-3" />
+              </ActionButton>
             </div>
           </TooltipProvider>
         </div>
@@ -496,7 +526,7 @@ export function SessionLogsPanel() {
             <SessionRecordingPlayer log={viewLog} blob={viewBlob} />
           ) : (
             <pre className="p-3 text-[11px] font-mono whitespace-pre-wrap break-all text-foreground/80 leading-relaxed">
-              {viewContent || "(empty)"}
+              {viewContent || t("sessionLogs.empty")}
             </pre>
           )}
         </div>
@@ -536,7 +566,7 @@ export function SessionLogsPanel() {
             {filtered.length === 0 ? (
               <div className="flex flex-col items-center justify-center gap-2 py-10 text-center">
                 <span className="text-xs text-muted-foreground/50">
-                  No results for &quot;{filter}&quot;
+                  {t("sessionLogs.noResults", { query: filter })}
                 </span>
               </div>
             ) : (
@@ -568,13 +598,14 @@ export function SessionLogsPanel() {
             <p className="text-sm text-foreground">
               {t("sessionLogs.confirmDelete")}
             </p>
-            <p className="text-xs text-muted-foreground">
-              {deleteTarget.hostName ??
-                deleteTarget.hostIp ??
-                `Session ${deleteTarget.id}`}
-              {" · "}
-              {formatDate(deleteTarget.startedAt)}
-            </p>
+            <div className="flex flex-col text-xs text-muted-foreground">
+              <span className="font-medium text-foreground/80">
+                {deleteTarget.hostName ??
+                  deleteTarget.hostIp ??
+                  t("sessionLogs.sessionFallback", { id: deleteTarget.id })}
+              </span>
+              <span>{formatDate(deleteTarget.startedAt)}</span>
+            </div>
             <div className="flex justify-end gap-2">
               <button
                 onClick={() => setDeleteTarget(null)}

plugins/session-recording/src/frontend/SessionRecordingPlayer.tsx

@@ -4,7 +4,6 @@ import { Pause, Play } from "lucide-react";
 import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import Guacamole from "guacamole-common-js";
-import { Select2 } from "@termix/plugin-sdk/ui";
 import "@xterm/xterm/css/xterm.css";
 import { parseAsciicast, type Asciicast } from "./asciicast";
 import type { SessionLogRecord } from "./session-recording-api";
@@ -20,6 +19,65 @@ function getErrorMessage(error: unknown, fallback: string): string {
   return error instanceof Error ? error.message : fallback;
 }
 
+function SeekBar({
+  position,
+  duration,
+  onSeek,
+}: {
+  position: number;
+  duration: number;
+  onSeek: (position: number) => void;
+}) {
+  const { t } = useTranslation();
+  const barRef = useRef<HTMLDivElement>(null);
+  const [dragging, setDragging] = useState(false);
+  const progress = duration > 0 ? Math.min(position / duration, 1) : 0;
+
+  const seekFromPointer = (clientX: number) => {
+    const rect = barRef.current?.getBoundingClientRect();
+    if (!rect || rect.width === 0 || duration <= 0) return;
+    const ratio = Math.min(Math.max((clientX - rect.left) / rect.width, 0), 1);
+    onSeek(ratio * duration);
+  };
+
+  return (
+    <div
+      ref={barRef}
+      role="slider"
+      tabIndex={0}
+      aria-label={t("player.timeline")}
+      aria-valuemin={0}
+      aria-valuemax={duration}
+      aria-valuenow={position}
+      className="group/seek relative h-3 w-full cursor-pointer touch-none outline-none"
+      onPointerDown={(event) => {
+        event.currentTarget.setPointerCapture(event.pointerId);
+        setDragging(true);
+        seekFromPointer(event.clientX);
+      }}
+      onPointerMove={(event) => {
+        if (dragging) seekFromPointer(event.clientX);
+      }}
+      onPointerUp={(event) => {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+        setDragging(false);
+      }}
+      onKeyDown={(event) => {
+        if (event.key === "ArrowLeft") onSeek(Math.max(position - 5, 0));
+        if (event.key === "ArrowRight")
+          onSeek(Math.min(position + 5, duration));
+      }}
+    >
+      <div className="absolute inset-x-0 top-1/2 h-0.5 -translate-y-1/2 bg-border transition-[height] group-hover/seek:h-1 group-focus-visible/seek:h-1">
+        <div
+          className="h-full bg-primary"
+          style={{ width: `${progress * 100}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
 function PlaybackControls({
   playing,
   position,
@@ -39,47 +97,47 @@ function PlaybackControls({
 }) {
   const { t } = useTranslation();
   return (
-    <div className="flex items-center gap-2 border-t border-border/60 bg-muted/20 px-3 py-2">
-      <button
-        type="button"
-        onClick={onToggle}
-        className="flex size-7 items-center justify-center hover:bg-muted"
-        aria-label={playing ? "Pause recording" : "Play recording"}
-      >
-        {playing ? (
-          <Pause className="size-3.5" />
-        ) : (
-          <Play className="size-3.5" />
-        )}
-      </button>
-      <span className="w-10 text-[10px] tabular-nums text-muted-foreground">
-        {formatPosition(position)}
-      </span>
-      <input
-        type="range"
-        min={0}
-        max={Math.max(duration, 0.01)}
-        step={0.01}
-        value={Math.min(position, duration)}
-        onChange={(event) => onSeek(Number(event.target.value))}
-        className="min-w-0 flex-1 accent-primary"
-        aria-label={t("player.timeline")}
-      />
-      <span className="w-10 text-right text-[10px] tabular-nums text-muted-foreground">
-        {formatPosition(duration)}
-      </span>
-      <Select2
-        value={speed}
-        onChange={(event) => onSpeed(Number(event.target.value))}
-        className="h-7 border border-border bg-background px-1 text-[10px]"
-        aria-label={t("player.speed")}
-      >
-        {SPEEDS.map((value) => (
-          <option key={value} value={value}>
-            {value}×
-          </option>
-        ))}
-      </Select2>
+    <div className="shrink-0 border-t border-border/60 bg-muted/20">
+      <SeekBar position={position} duration={duration} onSeek={onSeek} />
+      <div className="flex items-center gap-2 px-1 pb-1">
+        <button
+          type="button"
+          onClick={onToggle}
+          className="flex size-6 items-center justify-center text-muted-foreground hover:bg-muted hover:text-foreground"
+          aria-label={playing ? t("player.pause") : t("player.play")}
+        >
+          {playing ? (
+            <Pause className="size-3.5" />
+          ) : (
+            <Play className="size-3.5" />
+          )}
+        </button>
+        <span className="flex-1 text-[10px] tabular-nums text-muted-foreground">
+          {formatPosition(Math.min(position, duration))} /{" "}
+          {formatPosition(duration)}
+        </span>
+        <div
+          className="flex items-center"
+          role="group"
+          aria-label={t("player.speed")}
+        >
+          {SPEEDS.map((value) => (
+            <button
+              key={value}
+              type="button"
+              onClick={() => onSpeed(value)}
+              aria-pressed={speed === value}
+              className={
+                speed === value
+                  ? "h-5 px-1.5 text-[10px] tabular-nums bg-muted text-foreground"
+                  : "h-5 px-1.5 text-[10px] tabular-nums text-muted-foreground/60 hover:text-foreground"
+              }
+            >
+              {value}x
+            </button>
+          ))}
+        </div>
+      </div>
     </div>
   );
 }

plugins/session-sharing/src/frontend/ShareSessionModal.tsx

@@ -416,14 +416,17 @@ export function ShareSessionModal({
                                   "?",
                               })}
                         </span>
-                        <span className="text-[10px] text-muted-foreground/60">
-                          {share.permissionLevel === "read-write"
-                            ? t("sessionSharing.permissionLevel.readWrite")
-                            : t("sessionSharing.permissionLevel.readOnly")}
-                          {" · "}
-                          {t("sessionSharing.expiresAt", {
-                            date: new Date(share.expiresAt).toLocaleString(),
-                          })}
+                        <span className="flex flex-wrap gap-x-2.5 text-[10px] text-muted-foreground/60">
+                          <span>
+                            {share.permissionLevel === "read-write"
+                              ? t("sessionSharing.permissionLevel.readWrite")
+                              : t("sessionSharing.permissionLevel.readOnly")}
+                          </span>
+                          <span>
+                            {t("sessionSharing.expiresAt", {
+                              date: new Date(share.expiresAt).toLocaleString(),
+                            })}
+                          </span>
                         </span>
                       </div>
                     </div>

plugins/ssh-terminal/locales/en.json

@@ -86,7 +86,10 @@
     "imageUploaded": "Image uploaded: {{path}}",
     "imageClipboardUnavailable": "This browser cannot read images from the clipboard",
     "imageClipboardEmpty": "No image found in the clipboard",
-    "localShell": "Local terminal shell"
+    "localShell": "Local terminal shell",
+    "autocompleteHintComplete": "Tab or Enter to complete",
+    "autocompleteHintNavigate": "↑↓ to navigate",
+    "autocompleteHintClose": "Esc to close"
   },
   "terminalToolbar": {
     "detachTmux": "Detach tmux",
@@ -163,7 +166,7 @@
       },
       "sessionTimeoutMinutes": {
         "label": "Terminal Session Persistence",
-        "description": "How long a disconnected terminal is kept alive on the server before it is closed. Min 1 · Max 1440 minutes. For sessions that must outlive this, enable Auto-Tmux on the host."
+        "description": "How long a disconnected terminal is kept alive on the server before it is closed. Min 1, max 1440 minutes. For sessions that must outlive this, enable Auto-Tmux on the host."
       },
       "commandHistoryEnabled": {
         "label": "Command History",

plugins/ssh-terminal/src/frontend/terminal/command-history/CommandAutocomplete.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from "react";
 import { cn } from "@termix/plugin-sdk/ui";
+import { useTranslation } from "@termix/plugin-sdk/frontend";
 
 interface CommandAutocompleteProps {
   suggestions: string[];
@@ -53,6 +54,7 @@ export function CommandAutocomplete({
   position,
   visible,
 }: CommandAutocompleteProps) {
+  const { t } = useTranslation();
   const containerRef = useRef<HTMLDivElement>(null);
   const selectedRef = useRef<HTMLDivElement>(null);
 
@@ -103,7 +105,11 @@ export function CommandAutocomplete({
         ))}
       </div>
       <div className="px-3 py-1 text-xs text-muted-foreground border-t border-border bg-muted/50 shrink-0">
-        Tab/Enter to complete • ↑↓ to navigate • Esc to close
+        <span className="flex flex-wrap gap-x-3">
+          <span>{t("terminal.autocompleteHintComplete")}</span>
+          <span>{t("terminal.autocompleteHintNavigate")}</span>
+          <span>{t("terminal.autocompleteHintClose")}</span>
+        </span>
       </div>
     </div>
   );

plugins/tmux-monitor/src/frontend/PanePreview.tsx

@@ -79,8 +79,9 @@ export function PanePreview({
   return (
     <>
       <div className="flex items-center gap-3 border-b border-border px-3 py-1.5 text-xs text-muted-foreground">
-        <span className="font-medium text-foreground">
-          {pane.sessionName} · {pane.paneId}
+        <span className="flex gap-2 font-medium text-foreground">
+          <span>{pane.sessionName}</span>
+          <span className="text-muted-foreground">{pane.paneId}</span>
         </span>
         {metrics && (
           <>

plugins/tmux-monitor/src/frontend/SearchResults.tsx

@@ -72,8 +72,9 @@ export function SearchResults({
           className="flex cursor-pointer items-baseline gap-2 px-3 py-1 text-xs hover:bg-muted/40"
           onClick={() => onSelect(match)}
         >
-          <span className="shrink-0 font-medium text-primary">
-            {match.sessionName} · {match.paneId}
+          <span className="flex shrink-0 gap-1.5 font-medium text-primary">
+            <span>{match.sessionName}</span>
+            <span className="text-primary/60">{match.paneId}</span>
           </span>
           <span className="truncate font-mono text-muted-foreground">
             {highlightMatch(match.text, query)}

plugins/tmux-monitor/src/frontend/SessionTree.tsx

@@ -1,6 +1,6 @@
 // Session/window/pane tree styled after the VSCode "tmux manager" view.
 // Each session is a single row: status dot, name, inline tag badges, and a
-// right-aligned meta label (relative time · cpu · mem) that is overlaid by
+// right-aligned meta label (relative time, cpu, mem) that is overlaid by
 // the hover actions (attach, new window, …-menu). The overlay uses a grid
 // stack with opacity so rows never shift and the actions stay reachable via
 // keyboard focus.
@@ -119,11 +119,17 @@ export function SessionTree({
     });
   }
 
-  function metaLabel(session: TmuxSessionOverview): string {
+  function metaLabel(session: TmuxSessionOverview) {
     const time = formatRelativeTime(session.lastActivity, now, t);
     const agg = metricsBySession.get(session.name);
     if (!agg) return time;
-    return `${time} · ${agg.cpu.toFixed(0)}% · ${formatMem(agg.memKb)}`;
+    return (
+      <span className="flex gap-2">
+        <span>{time}</span>
+        <span>{agg.cpu.toFixed(0)}%</span>
+        <span>{formatMem(agg.memKb)}</span>
+      </span>
+    );
   }
 
   return (

src/ui/locales/en.json

@@ -1184,7 +1184,7 @@
     "add": "Add:",
     "commandPalette": "Command Palette",
     "done": "Done",
-    "editModeInstructions": "Drag cards to reorder · Drag the column divider to resize columns · Drag the bottom edge of a card to resize its height · Trash to remove",
+    "editModeInstructions": "Drag cards to reorder. Drag the column divider to resize columns. Drag the bottom edge of a card to change its height. Use the trash button to remove a card.",
     "empty": "Empty",
     "clear": "Clear",
     "viewServerDetails": "View server details",
@@ -1264,7 +1264,7 @@
     "auditForwardingSaveError": "Failed to save audit forwarding settings",
     "sessionTimeout": "Session Timeout",
     "hours": "hours",
-    "sessionTimeoutRange": "Min 1h · Max 720h",
+    "sessionTimeoutRange": "Min 1h, max 720h",
     "monitoringDefaults": "Monitoring Defaults",
     "statusCheck": "Status Check",
     "sec": "sec",

src/ui/sidebar/AdminApiKeysSection.tsx

@@ -230,11 +230,13 @@ export function AdminApiKeysSection({
               <span className="text-[10px] font-mono text-muted-foreground truncate">
                 {key.tokenPrefix}…
               </span>
-              <span className="text-[10px] text-muted-foreground">
-                {key.createdAt.split("T")[0]} ·{" "}
-                {key.expiresAt
-                  ? key.expiresAt.split("T")[0]
-                  : t("admin.apiKeyNoExpiry")}
+              <span className="flex gap-2.5 text-[10px] text-muted-foreground">
+                <span>{key.createdAt.split("T")[0]}</span>
+                <span>
+                  {key.expiresAt
+                    ? key.expiresAt.split("T")[0]
+                    : t("admin.apiKeyNoExpiry")}
+                </span>
               </span>
             </div>
             <Button

src/ui/sidebar/AdminUserManagePanel.tsx

@@ -815,8 +815,9 @@ export function AdminUserManagePanel({
                       <span className="text-xs font-semibold truncate max-w-[180px]">
                         {cred.name}
                       </span>
-                      <span className="text-[10px] text-muted-foreground truncate">
-                        {cred.username || "-"} · {cred.type}
+                      <span className="flex gap-2.5 text-[10px] text-muted-foreground min-w-0">
+                        <span className="truncate">{cred.username || "-"}</span>
+                        <span className="shrink-0">{cred.type}</span>
                       </span>
                     </div>
                   </div>

src/ui/sidebar/ConnectionsPanel.tsx

@@ -189,9 +189,7 @@ function ConnectionRow({
         </div>
         <span className="text-[10px] text-muted-foreground/60 truncate pl-3">
           {hostName && hostName !== name ? (
-            <span className="text-muted-foreground/50">
-              {hostName} &middot;{" "}
-            </span>
+            <span className="text-muted-foreground/50 mr-2.5">{hostName}</span>
           ) : null}
           {subLabel}
         </span>

src/ui/sidebar/HostExportDialog.tsx

@@ -320,16 +320,23 @@ export function HostExportDialog({
         </div>
 
         <div className="shrink-0 text-xs text-muted-foreground">
-          {count === 0
-            ? t("hosts.export.noneSelected")
-            : `${t("hosts.export.summary", {
-                selected: count,
-                total: exportableHosts.length,
-              })} · ${
-                withCredentials
+          {count === 0 ? (
+            t("hosts.export.noneSelected")
+          ) : (
+            <span className="flex flex-wrap gap-x-3">
+              <span>
+                {t("hosts.export.summary", {
+                  selected: count,
+                  total: exportableHosts.length,
+                })}
+              </span>
+              <span>
+                {withCredentials
                   ? t("hosts.export.credentialsIncluded")
-                  : t("hosts.export.credentialsExcluded")
-              }`}
+                  : t("hosts.export.credentialsExcluded")}
+              </span>
+            </span>
+          )}
         </div>
 
         <DialogFooter className="shrink-0">

src/ui/sidebar/credential-tree/CredentialItem/CredentialItem.tsx

@@ -335,8 +335,9 @@ export function CredentialItem({
           <span className="text-[11px] text-muted-foreground/60 truncate leading-none font-mono">
             {cred.username}
             {usedByCount > 0 && (
-              <span className="text-muted-foreground/40">
-                {cred.username ? " · " : ""}
+              <span
+                className={`text-muted-foreground/40${cred.username ? " ml-2" : ""}`}
+              >
                 {usedByCount}h
               </span>
             )}