Track per-device traffic totals and recover inventory state

src/web/styles.css

@@ -666,7 +666,7 @@ p {
   position: fixed;
   top: 50%;
   right: max(14px, env(safe-area-inset-right));
-  z-index: 30;
+  z-index: 60;
   display: grid;
   gap: 6px;
   transform: translateY(-50%);
@@ -715,7 +715,7 @@ p {
   transition: opacity 350ms ease, filter 350ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.client-devices {
+.client-instructions.client-devices {
   width: min(560px, 100vw);
 }
 
@@ -737,6 +737,30 @@ p {
   place-items: center;
 }
 
+.client-devices-sort-wrap {
+  position: relative;
+}
+
+.client-devices-sort {
+  min-height: 24px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 4px;
+  border: 0;
+  background: transparent;
+  color: var(--client-muted);
+  font: 700 9px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  cursor: pointer;
+  transition: color 220ms ease, filter 300ms ease;
+}
+
+.client-devices-sort:hover,
+.client-devices-sort:focus-visible {
+  color: var(--client-accent);
+  filter: drop-shadow(0 0 5px color-mix(in oklch, var(--client-accent) 44%, transparent));
+}
+
 .client-devices-refresh {
   position: relative;
   width: 24px;
@@ -807,7 +831,8 @@ p {
   animation: client-spin 900ms linear infinite;
 }
 
-.client-instructions-header .client-devices-refresh-wrap > .client-tooltip {
+.client-instructions-header .client-devices-refresh-wrap > .client-tooltip,
+.client-instructions-header .client-devices-sort-wrap > .client-tooltip {
   text-transform: none;
 }
 
@@ -1075,15 +1100,32 @@ p {
   outline-offset: 3px;
 }
 
-.client-device-manufacturer {
-  overflow: hidden;
-  margin: 0 0 0 76px;
-  color: var(--client-muted);
+.client-device-details {
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 4px 12px;
+  margin-left: 76px;
   font-size: 9px;
+}
+
+.client-device-manufacturer {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--client-muted);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.client-device-traffic {
+  margin-left: auto;
+  color: var(--client-text);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
 .client-device-alias {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 28px 28px;
@@ -1202,34 +1244,38 @@ p {
   visibility: hidden;
 }
 
-.client-local-rules {
+.client-drawer {
   position: fixed;
   inset: 0 0 0 auto;
-  z-index: 20;
-  width: min(480px, 100vw);
+  z-index: 50;
   overflow-y: auto;
   background: color-mix(in oklch, var(--client-bg) 99%, var(--client-panel));
   color: var(--client-text);
+  box-shadow: -26px 0 72px oklch(0.09 0.015 145 / 0.12);
   opacity: 0;
   visibility: hidden;
   transform: translateX(104%);
   transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1), opacity 500ms ease, visibility 0s 760ms;
 }
 
-.client-local-rules.is-open {
+.client-drawer.is-open {
   opacity: 1;
   visibility: visible;
   transform: translateX(0);
   transition-delay: 0s;
 }
 
-.client-local-rules-sheet {
+.client-drawer-sheet {
   position: relative;
   min-height: 100%;
   padding: 54px 72px 72px 34px;
   font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
 }
 
+.client-local-rules {
+  width: min(480px, 100vw);
+}
+
 .client-local-rules-header {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
@@ -1731,32 +1777,7 @@ p {
 }
 
 .client-instructions {
-  position: fixed;
-  inset: 0 0 0 auto;
-  z-index: 20;
   width: min(470px, 100vw);
-  overflow-y: auto;
-  background: color-mix(in oklch, var(--client-bg) 99%, var(--client-panel));
-  color: var(--client-text);
-  box-shadow: -26px 0 72px oklch(0.09 0.015 145 / 0.12);
-  opacity: 0;
-  visibility: hidden;
-  transform: translateX(104%);
-  transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1), opacity 500ms ease, visibility 0s 760ms;
-}
-
-.client-instructions.is-open {
-  opacity: 1;
-  visibility: visible;
-  transform: translateX(0);
-  transition-delay: 0s;
-}
-
-.client-instructions-sheet {
-  position: relative;
-  min-height: 100%;
-  padding: 54px 72px 72px 34px;
-  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
 }
 
 .client-instructions-header {
@@ -4080,6 +4101,7 @@ p {
   .client-device-edit svg,
   .client-device-edit-wrap,
   .client-devices-refresh,
+  .client-devices-sort,
   .client-devices-refresh-ring circle,
   .client-devices-refresh-icon,
   .client-text-morph-value,