feat: render scalable Alta site and group hierarchy

styles.css

@@ -51,7 +51,7 @@ body {
 
 /* Left Sidebar - Available Devices */
 .devices-sidebar {
-    width: 220px;
+    width: 300px;
     background: var(--card-bg);
     border-right: 1px solid var(--border);
     display: flex;
@@ -113,7 +113,175 @@ body {
 .device-list {
     flex: 1;
     overflow-y: auto;
-    padding: 8px;
+    padding: 0;
+}
+
+/* Accessible, bounded virtual hierarchy */
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+.tree-results {
+    min-height: 16px;
+    margin-top: 6px;
+    color: var(--text-secondary);
+    font-size: 11px;
+}
+
+.virtual-tree {
+    position: relative;
+    outline: none;
+}
+
+.virtual-tree:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--accent-primary);
+}
+
+.virtual-tree.has-hidden-selection::after {
+    content: 'Selected camera hidden';
+    position: sticky;
+    bottom: 4px;
+    left: 8px;
+    z-index: 3;
+    display: inline-block;
+    padding: 2px 6px;
+    border-radius: 3px;
+    background: var(--bg-primary);
+    color: var(--warning);
+    font-size: 10px;
+    pointer-events: none;
+}
+
+.virtual-tree-spacer {
+    position: relative;
+    min-height: 100%;
+}
+
+.virtual-tree-window {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    will-change: transform;
+}
+
+.tree-row {
+    position: absolute;
+    right: 0;
+    left: 0;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding-right: 8px;
+    border-left: 2px solid transparent;
+    color: var(--text-primary);
+    cursor: default;
+    user-select: none;
+}
+
+.tree-row:hover,
+.tree-row.active {
+    background: var(--hover-bg);
+}
+
+.tree-row.active {
+    border-left-color: var(--accent-primary);
+    box-shadow: inset 0 0 0 1px rgba(14, 122, 254, 0.35);
+}
+
+.tree-row.selected {
+    background: rgba(14, 122, 254, 0.28);
+}
+
+.tree-site {
+    padding-left: 8px;
+    color: var(--accent-primary);
+    font-weight: 700;
+}
+
+.tree-group {
+    padding-left: 24px;
+    color: #b8cbea;
+    font-weight: 600;
+}
+
+.tree-camera {
+    padding-left: 42px;
+}
+
+.tree-camera::before {
+    content: '';
+    width: 7px;
+    height: 7px;
+    flex: 0 0 7px;
+    border-radius: 50%;
+    background: var(--error);
+}
+
+.tree-camera.online::before {
+    background: var(--success);
+}
+
+.tree-camera.proxy-active {
+    border-right: 3px solid var(--success);
+}
+
+.tree-disclosure {
+    width: 10px;
+    flex: 0 0 10px;
+    color: var(--text-secondary);
+    font-size: 9px;
+    text-align: center;
+}
+
+.tree-label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.tree-address {
+    margin-left: auto;
+    overflow: hidden;
+    color: var(--text-secondary);
+    font-family: Consolas, monospace;
+    font-size: 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.tree-badge {
+    flex: 0 0 auto;
+    padding: 1px 4px;
+    border-radius: 3px;
+    font-size: 9px;
+}
+
+.tree-badge.pending,
+.tree-row.pending-deletion {
+    color: var(--warning);
+}
+
+.tree-warning {
+    width: 14px;
+    height: 14px;
+    flex: 0 0 14px;
+    border: 1px solid var(--warning);
+    border-radius: 50%;
+    color: var(--warning);
+    font-size: 9px;
+    line-height: 12px;
+    text-align: center;
 }
 
 .device-item {