Add device traffic history chart and total breakdown

src/web/styles.css

@@ -902,13 +902,17 @@ p {
 .client-device {
   display: grid;
   grid-template-columns: 34px minmax(0, 1fr) 112px 34px;
-  align-items: center;
-  gap: 8px;
+  grid-template-rows: 34px 28px;
+  align-items: start;
+  column-gap: 8px;
+  row-gap: 6px;
   padding: 10px 8px;
   border-top: 1px solid color-mix(in oklch, var(--client-border) 72%, transparent);
 }
 
 .client-device-main {
+  grid-column: 2;
+  grid-row: 1;
   height: 34px;
   min-width: 0;
   display: flex;
@@ -1035,6 +1039,8 @@ p {
 }
 
 .client-device-pin-wrap {
+  grid-column: 1;
+  grid-row: 1;
   width: 34px;
   height: 34px;
 }
@@ -1178,33 +1184,64 @@ p {
 }
 
 .client-device-traffic {
+  grid-column: 3;
+  grid-row: 1;
   width: 112px;
-  display: grid;
-  align-items: center;
+  height: 34px;
+  position: relative;
+  z-index: 3;
   color: var(--client-text);
   font-variant-numeric: tabular-nums;
 }
 
-.client-device-traffic-sources {
-  display: grid;
-  gap: 2px;
-}
-
-.client-device-traffic-sources > span {
+.client-device-traffic-total,
+.client-device-traffic-breakdown > span {
   display: grid;
   grid-template-columns: 46px minmax(0, 1fr);
-  align-items: baseline;
+  align-items: center;
   gap: 4px;
 }
 
-.client-device-traffic-sources b {
+.client-device-traffic-total {
+  height: 34px;
+}
+
+.client-device-traffic-breakdown {
+  position: absolute;
+  top: 30px;
+  right: 0;
+  width: 112px;
+  display: grid;
+  gap: 2px;
+  padding: 7px 0 6px;
+  background: color-mix(in oklch, var(--client-bg) 98%, var(--client-panel));
+  box-shadow: 0 10px 22px oklch(0.08 0.015 145 / 0.12);
+  opacity: 0;
+  visibility: hidden;
+  filter: blur(5px);
+  pointer-events: none;
+  transform: translateY(-7px);
+  transform-origin: top center;
+  transition: opacity 220ms ease, filter 300ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 360ms;
+}
+
+.client-device-traffic:hover .client-device-traffic-breakdown,
+.client-device-traffic:focus .client-device-traffic-breakdown {
+  opacity: 1;
+  visibility: visible;
+  filter: blur(0);
+  transform: translateY(0);
+  transition-delay: 0s;
+}
+
+.client-device-traffic b {
   color: var(--client-muted);
   font-size: 8px;
   letter-spacing: 0.03em;
   text-transform: uppercase;
 }
 
-.client-device-traffic-sources strong {
+.client-device-traffic strong {
   overflow: hidden;
   font-size: 10px;
   font-weight: 600;
@@ -1248,24 +1285,79 @@ p {
   color: var(--client-accent);
 }
 
-.client-device-traffic-sources .is-proxy {
+.client-device-traffic-breakdown .is-proxy {
   color: var(--client-accent);
 }
 
-.client-device-traffic-sources .is-proxy b {
+.client-device-traffic-breakdown .is-proxy b {
   color: color-mix(in oklch, var(--client-accent) 72%, var(--client-muted));
 }
 
-.client-device-traffic-sources > .is-total {
-  margin-top: 2px;
-  color: var(--client-text);
+.client-device-traffic:focus-visible {
+  border-radius: 3px;
+  outline: 2px solid var(--client-accent);
+  outline-offset: 2px;
 }
 
-.client-device-traffic-sources > .is-total b {
-  color: var(--client-muted);
+.client-device-traffic-chart {
+  grid-column: 2 / 4;
+  grid-row: 2;
+  height: 28px;
+  position: relative;
+  overflow: hidden;
+}
+
+.client-device-traffic-chart::after {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 1px;
+  background: color-mix(in oklch, var(--client-border) 58%, transparent);
+  content: '';
+}
+
+.client-device-traffic-track {
+  position: absolute;
+  inset: 0 0 1px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  gap: 3px;
+  animation: client-device-traffic-shift 420ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.client-device-traffic-bar {
+  width: 5px;
+  min-height: 2px;
+  flex: 0 0 5px;
+  display: flex;
+  overflow: hidden;
+  border-radius: 2px 2px 0 0;
+  flex-direction: column-reverse;
+}
+
+.client-device-traffic-bar > span {
+  width: 100%;
+  display: block;
+}
+
+.client-device-traffic-bar > .is-gateway {
+  background: color-mix(in oklch, var(--client-text) 58%, var(--client-muted));
+}
+
+.client-device-traffic-bar > .is-proxy {
+  background: var(--client-accent);
+}
+
+@keyframes client-device-traffic-shift {
+  from { opacity: 0.52; transform: translateX(8px); }
+  to { opacity: 1; transform: translateX(0); }
 }
 
 .client-device-policy-wrap {
+  grid-column: 4;
+  grid-row: 1;
   width: 34px;
   position: relative;
 }
@@ -4324,6 +4416,8 @@ p {
   .client-device-policy svg,
   .client-device-name > span,
   .client-device-traffic-value > span,
+  .client-device-traffic-breakdown,
+  .client-device-traffic-track,
   .client-device-edit,
   .client-device-edit svg,
   .client-device-edit-wrap,