Add Gateway device inventory panel

src/web/styles.css

@@ -715,6 +715,187 @@ p {
   transition: opacity 350ms ease, filter 350ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+.client-devices {
+  width: min(560px, 100vw);
+}
+
+.client-devices-header {
+  margin-bottom: 28px;
+}
+
+.client-devices-source,
+.client-devices-error,
+.client-devices-empty {
+  margin: 0 8px 20px;
+  color: var(--client-muted);
+  font-size: 10px;
+  line-height: 1.6;
+}
+
+.client-devices-source {
+  color: oklch(0.62 0.1 72);
+}
+
+.client-devices-error {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: oklch(0.62 0.13 28);
+}
+
+.client-devices-error button,
+.client-device-pin,
+.client-device-rename,
+.client-device-alias button {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--client-accent);
+  cursor: pointer;
+}
+
+.client-devices-list {
+  display: grid;
+}
+
+.client-device {
+  display: grid;
+  gap: 14px;
+  padding: 20px 8px;
+  border-top: 1px solid color-mix(in oklch, var(--client-border) 72%, transparent);
+}
+
+.client-device-heading {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 32px;
+  gap: 12px;
+  align-items: start;
+}
+
+.client-device-heading > div {
+  min-width: 0;
+}
+
+.client-device-heading h3 {
+  overflow: hidden;
+  margin: 4px 0 0;
+  font-size: 15px;
+  letter-spacing: -0.03em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.client-device-heading p,
+.client-device-status {
+  color: var(--client-muted);
+  font-size: 9px;
+}
+
+.client-device-status::before {
+  width: 6px;
+  height: 6px;
+  display: inline-block;
+  margin-right: 7px;
+  border-radius: 50%;
+  background: currentColor;
+  content: '';
+}
+
+.client-device.is-online .client-device-status {
+  color: var(--client-accent);
+}
+
+.client-device.is-offline .client-device-status {
+  opacity: 0.56;
+}
+
+.client-device-pin {
+  width: 32px;
+  height: 32px;
+  color: var(--client-muted);
+  font-size: 16px;
+}
+
+.client-device-pin[aria-pressed="true"] {
+  color: var(--client-accent);
+}
+
+.client-device-meta {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 9px 18px;
+  margin: 0;
+}
+
+.client-device-meta div {
+  min-width: 0;
+}
+
+.client-device-meta dt {
+  color: var(--client-muted);
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+}
+
+.client-device-meta dd {
+  overflow: hidden;
+  margin: 3px 0 0;
+  font-size: 9px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.client-device-rename,
+.client-device-alias button,
+.client-devices-error button {
+  justify-self: start;
+  font-size: 9px;
+  font-weight: 700;
+}
+
+.client-device-alias {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: end;
+  gap: 10px;
+}
+
+.client-device-alias label {
+  display: grid;
+  gap: 5px;
+  color: var(--client-muted);
+  font-size: 8px;
+  text-transform: uppercase;
+}
+
+.client-device-alias input {
+  min-width: 0;
+  padding: 8px 0;
+  border: 0;
+  border-bottom: 1px solid var(--client-border);
+  outline: 0;
+  background: transparent;
+  color: var(--client-text);
+  font-size: 10px;
+}
+
+.client-device-alias input:focus {
+  border-color: var(--client-accent);
+}
+
+.client-devices button:focus-visible {
+  outline: 2px solid var(--client-accent);
+  outline-offset: 2px;
+}
+
+.client-devices button:disabled {
+  cursor: default;
+  opacity: 0.35;
+}
+
 .client-instructions-toggle:hover,
 .client-instructions-toggle:focus-visible,
 .client-local-rules-toggle:hover,
@@ -3556,6 +3737,10 @@ p {
     padding: 40px 58px 60px 18px;
   }
 
+  .client-device-meta {
+    grid-template-columns: 1fr;
+  }
+
   .client-local-rules-sheet {
     padding: 40px 58px 60px 18px;
   }
@@ -3654,6 +3839,9 @@ p {
   .client-instruction-reveal,
   .client-instruction-summary > i::before,
   .client-instruction-summary > i::after,
+  .client-device,
+  .client-device-pin,
+  .client-device-rename,
   .client-subscription-edit,
   .client-subscription-edit::after,
   .client-subscription-submit,