Add runtime version reporting and display

src/web/styles.css

@@ -192,6 +192,118 @@ p {
   --client-accent: var(--harbor-gateway);
 }
 
+.harbor-versions {
+  position: fixed;
+  right: max(14px, env(safe-area-inset-right));
+  bottom: max(12px, env(safe-area-inset-bottom));
+  z-index: 40;
+  display: grid;
+  justify-items: end;
+  gap: 2px;
+  color: var(--client-muted);
+  font: 600 9px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font-variant-numeric: tabular-nums;
+}
+
+.harbor-version {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  opacity: 0.56;
+  transition: color 240ms ease, opacity 240ms ease;
+}
+
+.harbor-version:focus-within,
+.harbor-version:hover {
+  color: var(--client-text);
+  opacity: 1;
+}
+
+.harbor-version.is-incompatible {
+  color: oklch(0.68 0.15 28);
+  opacity: 0.9;
+}
+
+.harbor-version-code {
+  width: 1.3ch;
+  color: var(--client-accent);
+  font-size: 8px;
+  text-align: center;
+}
+
+.harbor-version-number {
+  display: flex;
+  align-items: center;
+}
+
+.harbor-version-part {
+  position: relative;
+  min-width: 1ch;
+  padding: 3px 1px;
+  border-radius: 4px;
+  cursor: help;
+  text-align: center;
+}
+
+.harbor-version-part:hover,
+.harbor-version-part:focus-visible {
+  outline: none;
+  color: var(--client-accent);
+  text-shadow: 0 0 8px color-mix(in oklch, var(--client-accent) 48%, transparent);
+}
+
+.harbor-version-part:focus-visible {
+  box-shadow: 0 0 0 1px var(--client-accent);
+}
+
+.harbor-version-tooltip {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 7px);
+  width: min(250px, calc(100vw - 28px));
+  display: grid;
+  gap: 5px;
+  padding: 9px 10px;
+  border-radius: 10px;
+  background: color-mix(in oklch, var(--client-panel) 84%, transparent);
+  box-shadow: 0 9px 30px oklch(0.08 0.015 145 / 0.16);
+  backdrop-filter: blur(12px) saturate(0.9);
+  color: var(--client-muted);
+  font-size: 9px;
+  font-weight: 500;
+  line-height: 1.5;
+  text-align: left;
+  opacity: 0;
+  visibility: hidden;
+  filter: blur(2px);
+  pointer-events: none;
+  transform: translateY(3px);
+  transition: opacity 90ms ease, filter 120ms ease, transform 140ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 140ms;
+}
+
+.harbor-version-tooltip strong {
+  color: var(--client-text);
+  font-size: 9px;
+}
+
+.harbor-version-tooltip small {
+  color: var(--client-accent);
+  font-size: 8px;
+}
+
+.harbor-version-tooltip .is-warning {
+  color: oklch(0.68 0.15 28);
+}
+
+.harbor-version-part:hover .harbor-version-tooltip,
+.harbor-version-part:focus-visible .harbor-version-tooltip {
+  opacity: 1;
+  visibility: visible;
+  filter: blur(0);
+  transform: translateY(0);
+  transition-delay: 20ms, 20ms, 20ms, 0s;
+}
+
 .harbor-brand {
   position: fixed;
   top: 50%;
@@ -2178,6 +2290,11 @@ p {
     transition: none;
   }
 
+  .harbor-version,
+  .harbor-version-tooltip {
+    transition: none;
+  }
+
   .client-state-copy h2,
   .client-connection-title > span,
   .client-state-detail > * {