feat(ui): devices tcp status, tabs send, preset websocket hooks

Made-with: Cursor

src/static/style.css

@@ -53,6 +53,12 @@ input.hex-addr-box {
     margin-bottom: 0.25rem;
 }
 
+.device-row-mac {
+    font-size: 0.82em;
+    color: #b0b0b0;
+    letter-spacing: 0.02em;
+}
+
 .device-form-actions {
     display: flex;
     align-items: flex-end;
@@ -601,6 +607,29 @@ body.preset-ui-run .edit-mode-only {
     color: #f44336;
 }
 
+/* Devices modal: live TCP presence (Wi-Fi only) */
+.device-status-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    align-self: center;
+}
+
+.device-status-dot--online {
+    background: #4caf50;
+    box-shadow: 0 0 6px rgba(76, 175, 80, 0.45);
+}
+
+.device-status-dot--offline {
+    background: #616161;
+}
+
+.device-status-dot--unknown {
+    background: #424242;
+    border: 1px solid #757575;
+}
+
 .btn-group {
     display: flex;
     gap: 0.5rem;
@@ -1034,6 +1063,65 @@ body.preset-ui-run .edit-mode-only {
     background-color: #3a3a3a;
     border-radius: 4px;
 }
+
+.tab-modal-create-row {
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.tab-modal-create-row input[type="text"] {
+    flex: 1;
+    min-width: 8rem;
+}
+
+.tab-devices-label {
+    display: block;
+    margin-top: 0.75rem;
+    margin-bottom: 0.35rem;
+    font-weight: 600;
+}
+
+.tab-devices-editor {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+    max-height: 14rem;
+    overflow-y: auto;
+}
+
+.tab-device-row-label {
+    flex: 1;
+    min-width: 0;
+}
+
+.tab-device-add-select {
+    flex: 1;
+    min-width: 10rem;
+    padding: 0.5rem;
+    background-color: #3a3a3a;
+    border: 1px solid #4a4a4a;
+    border-radius: 4px;
+    color: white;
+}
+
+.tab-devices-add {
+    margin-top: 0;
+    flex-wrap: wrap;
+}
+
+.tab-presets-section-label {
+    display: block;
+    margin-top: 1rem;
+    margin-bottom: 0.35rem;
+    font-weight: 600;
+}
+
+.edit-tab-presets-scroll {
+    max-height: 200px;
+    overflow-y: auto;
+    margin-bottom: 1rem;
+}
 /* Hide any text content in palette rows - only show color swatches */
 #palette-container .profiles-row {
     font-size: 0; /* Hide any text nodes */