Polish device traffic charts and bump Harbor client versions

src/web/styles.css

@@ -922,9 +922,10 @@ p {
 }
 
 .client-device {
+  --client-device-chart-height: 34px;
   display: grid;
   grid-template-columns: 34px minmax(0, 1fr) 112px 34px;
-  grid-template-rows: 34px 42px;
+  grid-template-rows: 34px var(--client-device-chart-height);
   align-items: start;
   column-gap: 8px;
   row-gap: 6px;
@@ -932,6 +933,10 @@ p {
   border-top: 1px solid color-mix(in oklch, var(--client-border) 72%, transparent);
 }
 
+.client-device.is-pinned {
+  --client-device-chart-height: 72px;
+}
+
 .client-device-main {
   grid-column: 2;
   grid-row: 1;
@@ -1256,11 +1261,13 @@ p {
 }
 
 .client-device-traffic-breakdown > span {
+  color: var(--client-accent);
   opacity: 0;
   filter: blur(5px);
   transform: translateY(-12px);
   transform-origin: top right;
   transition: opacity 180ms ease, filter 300ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
+  text-shadow: 0 0 3px var(--client-bg), 0 0 8px var(--client-bg);
 }
 
 .client-device-traffic-breakdown > span:nth-child(2) {
@@ -1332,11 +1339,16 @@ p {
 }
 
 .client-device-traffic-breakdown .is-proxy {
+  color: color-mix(in oklch, var(--client-accent) 76%, var(--client-text));
+}
+
+.client-device-traffic-breakdown b {
   color: var(--client-accent);
+  text-shadow: 0 0 3px var(--client-bg), 0 0 8px var(--client-bg);
 }
 
 .client-device-traffic-breakdown .is-proxy b {
-  color: color-mix(in oklch, var(--client-accent) 72%, var(--client-muted));
+  color: color-mix(in oklch, var(--client-accent) 76%, var(--client-text));
 }
 
 .client-device-traffic:focus-visible {
@@ -1348,7 +1360,7 @@ p {
 .client-device-traffic-chart {
   grid-column: 2 / 4;
   grid-row: 2;
-  height: 42px;
+  height: var(--client-device-chart-height);
   position: relative;
   z-index: 4;
   overflow: visible;
@@ -1358,6 +1370,11 @@ p {
   z-index: 7;
 }
 
+.client-device.is-pinned .client-device-traffic-chart {
+  transform-origin: bottom center;
+  animation: client-device-chart-expand 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
 .client-device-traffic-chart::after {
   position: absolute;
   right: 0;
@@ -1375,7 +1392,7 @@ p {
   grid-template-columns: repeat(var(--sample-count), minmax(1px, 1fr));
   align-items: flex-end;
   gap: 0;
-  animation: client-device-traffic-shift 420ms cubic-bezier(0.16, 1, 0.3, 1);
+  animation: client-device-traffic-shift 560ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .client-device-traffic-bar {
@@ -1411,6 +1428,52 @@ p {
   flex-direction: column-reverse;
 }
 
+.client-device-traffic-bar.is-new .client-device-traffic-bar-fill {
+  transform-origin: bottom center;
+  animation: client-device-traffic-grow 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.client-device-traffic-axis {
+  position: absolute;
+  inset: 0 auto 14px 2px;
+  z-index: 3;
+  width: 1px;
+  color: color-mix(in oklch, var(--client-text) 62%, var(--client-muted));
+  font: 700 7.5px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  pointer-events: none;
+  text-shadow: 0 0 3px var(--client-bg), 0 0 7px var(--client-bg);
+}
+
+.client-device-traffic-axis > span {
+  position: absolute;
+  left: 0;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  white-space: nowrap;
+}
+
+.client-device-traffic-axis > span::before {
+  width: 5px;
+  height: 1px;
+  flex: 0 0 5px;
+  background: currentColor;
+  content: '';
+}
+
+.client-device-traffic-axis > .is-max {
+  top: 0;
+}
+
+.client-device-traffic-axis > .is-mid {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.client-device-traffic-axis > .is-zero {
+  bottom: 0;
+}
+
 .client-device-traffic-bar-fill > span {
   width: 100%;
   display: block;
@@ -1489,10 +1552,28 @@ p {
 }
 
 @keyframes client-device-traffic-shift {
-  from { opacity: 0.52; transform: translateX(8px); }
+  from { opacity: 0.72; transform: translateX(calc(100% / var(--sample-count))); }
   to { opacity: 1; transform: translateX(0); }
 }
 
+@keyframes client-device-traffic-grow {
+  from { opacity: 0; transform: scaleY(0); }
+  to { opacity: 1; transform: scaleY(1); }
+}
+
+@keyframes client-device-chart-expand {
+  from {
+    opacity: 0.72;
+    clip-path: inset(calc(100% - 34px) 0 0);
+    transform: scaleY(0.48);
+  }
+  to {
+    opacity: 1;
+    clip-path: inset(0);
+    transform: scaleY(1);
+  }
+}
+
 .client-device-policy-wrap {
   grid-column: 4;
   grid-row: 1;
@@ -4557,6 +4638,8 @@ p {
   .client-device-traffic-breakdown,
   .client-device-traffic-breakdown > span,
   .client-device-traffic-bar-tooltip,
+  .client-device-traffic-bar-fill,
+  .client-device-traffic-chart,
   .client-device-traffic-track,
   .client-device-edit,
   .client-device-edit svg,