Add stream categorization: Recommended/Alternative with Main/Sub/Other subgroups

- Split discovered streams into Recommended (FFMPEG, ONVIF) and Alternative groups
- Add Main/Sub/Other classification within Recommended based on resolution:
  - Main: streams with width >= 720px (after clustering analysis)
  - Sub: streams with width < 720px or lower cluster
  - Other: streams without resolution info
- Implement smart auto-collapse based on selection mode:
  - Main selection: shows Recommended/Main, collapses rest
  - Sub selection: shows Recommended/Sub, collapses rest
  - Falls back to showing all if target category is empty
- Add collapsible groups/subgroups with chevron toggles
- User manual expand/collapse preserved until mode change
- Add stream count badges to all group headers

webui/web/css/main.css

@@ -590,10 +590,155 @@ body {
 .streams-list {
     display: flex;
     flex-direction: column;
-    gap: var(--space-3);
+    gap: var(--space-6);
     padding: var(--space-2);
 }
 
+/* ===== STREAM GROUPS ===== */
+.stream-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+}
+
+.stream-group-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding-bottom: var(--space-2);
+    border-bottom: 1px solid var(--border-color);
+    cursor: pointer;
+    user-select: none;
+    transition: color var(--transition-fast);
+}
+
+.stream-group-header:hover {
+    color: var(--purple-primary);
+}
+
+.stream-group-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    color: var(--text-tertiary);
+    transition: all var(--transition-fast);
+}
+
+.stream-group-toggle .chevron {
+    transition: transform var(--transition-fast);
+}
+
+.stream-group.collapsed .stream-group-toggle .chevron {
+    transform: rotate(-90deg);
+}
+
+.stream-group.collapsed .stream-group-content {
+    display: none;
+}
+
+.stream-group-title {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: var(--text-primary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.stream-group-count {
+    font-size: var(--text-sm);
+    font-weight: 400;
+    color: var(--text-tertiary);
+}
+
+.stream-group-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+}
+
+.stream-group-empty {
+    padding: var(--space-4);
+    text-align: center;
+    color: var(--text-tertiary);
+    font-size: var(--text-sm);
+    background: var(--bg-secondary);
+    border: 1px dashed var(--border-color);
+    border-radius: 8px;
+}
+
+/* ===== STREAM SUBGROUPS (Main/Sub/Other within Recommended) ===== */
+.stream-subgroup {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+}
+
+.stream-subgroup:not(:last-child) {
+    margin-bottom: var(--space-4);
+}
+
+.stream-subgroup-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding-left: var(--space-2);
+    cursor: pointer;
+    user-select: none;
+    transition: color var(--transition-fast);
+}
+
+.stream-subgroup-header:hover {
+    color: var(--purple-primary);
+}
+
+.stream-subgroup-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    color: var(--text-tertiary);
+    transition: all var(--transition-fast);
+}
+
+.stream-subgroup-toggle .chevron {
+    transition: transform var(--transition-fast);
+}
+
+.stream-subgroup.collapsed .stream-subgroup-toggle .chevron {
+    transform: rotate(-90deg);
+}
+
+.stream-subgroup.collapsed .stream-subgroup-content {
+    display: none;
+}
+
+.stream-subgroup-title {
+    font-size: var(--text-xs);
+    font-weight: 500;
+    color: var(--text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+
+.stream-subgroup-count {
+    font-size: var(--text-xs);
+    font-weight: 400;
+    color: var(--text-disabled);
+}
+
+.stream-subgroup-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+}
+
 /* Custom scrollbar */
 .streams-list::-webkit-scrollbar {
     width: 8px;

webui/web/js/main.js

@@ -315,6 +315,11 @@ class StrixApp {
         document.getElementById('progress-text').textContent = 'Starting scan...';
         document.getElementById('streams-section').classList.add('hidden');
         this.currentStreams = [];
+        // Reset stream list state for fresh discovery
+        this.streamList.selectionMode = 'main';
+        this.streamList.collapsedGroups.clear();
+        this.streamList.collapsedSubgroups.clear();
+        this.streamList.needsSmartDefaults = true;
     }
 
     handleProgress(data) {
@@ -334,7 +339,7 @@ class StrixApp {
             streamsSection.classList.remove('hidden');
         }
 
-        // Update stream list
+        // Update stream list (smart defaults applied automatically on first render)
         this.streamList.render(this.currentStreams, (stream, index) => {
             this.selectStream(stream, index);
         });
@@ -391,6 +396,12 @@ class StrixApp {
         document.getElementById('frigate-output-section').classList.add('hidden');
         document.getElementById('config-frigate').textContent = '';
 
+        // Set stream list to sub selection mode (will collapse Main, show Sub)
+        this.streamList.setSelectionMode('sub');
+        this.streamList.render(this.currentStreams, (stream, index) => {
+            this.selectStream(stream, index);
+        });
+
         showToast('Select a sub stream from available streams');
         this.showScreen('discovery');
     }

webui/web/js/mock/mock-stream-api.js

@@ -2,6 +2,7 @@
 export class MockStreamAPI {
     constructor() {
         this.mockStreams = [
+            // RTSP Main streams (1920x1080)
             {
                 url: "rtsp://192.168.1.100:554/Streaming/Channels/101",
                 path: "/Streaming/Channels/101",
@@ -12,6 +13,27 @@ export class MockStreamAPI {
                 bitrate: 4096000,
                 has_audio: true
             },
+            {
+                url: "rtsp://192.168.1.100:554/live/main",
+                path: "/live/main",
+                type: "FFMPEG",
+                resolution: "1920x1080",
+                codec: "H.264",
+                fps: 30,
+                bitrate: 4608000,
+                has_audio: true
+            },
+            {
+                url: "rtsp://192.168.1.100:554/stream1",
+                path: "/stream1",
+                type: "FFMPEG",
+                resolution: "1920x1080",
+                codec: "H.265",
+                fps: 25,
+                bitrate: 3584000,
+                has_audio: true
+            },
+            // JPEG snapshots (5 items in different positions)
             {
                 url: "http://192.168.1.100/snap.jpg",
                 path: "/snap.jpg",
@@ -22,16 +44,124 @@ export class MockStreamAPI {
                 bitrate: 0,
                 has_audio: false
             },
+            // RTSP Sub streams (640x480)
+            {
+                url: "rtsp://192.168.1.100:554/Streaming/Channels/102",
+                path: "/Streaming/Channels/102",
+                type: "FFMPEG",
+                resolution: "640x480",
+                codec: "H.264",
+                fps: 5,
+                bitrate: 512000,
+                has_audio: true
+            },
+            {
+                url: "rtsp://192.168.1.100:554/live/sub",
+                path: "/live/sub",
+                type: "FFMPEG",
+                resolution: "640x480",
+                codec: "H.264",
+                fps: 10,
+                bitrate: 768000,
+                has_audio: false
+            },
+            // JPEG #2
+            {
+                url: "http://192.168.1.100/cgi-bin/snapshot.cgi",
+                path: "/cgi-bin/snapshot.cgi",
+                type: "JPEG",
+                resolution: "1920x1080",
+                codec: "JPEG",
+                fps: 1,
+                bitrate: 0,
+                has_audio: false
+            },
+            {
+                url: "rtsp://192.168.1.100:554/stream2",
+                path: "/stream2",
+                type: "FFMPEG",
+                resolution: "640x480",
+                codec: "H.264",
+                fps: 15,
+                bitrate: 640000,
+                has_audio: false
+            },
+            // ONVIF streams
+            {
+                url: "rtsp://192.168.1.100:554/onvif/profile0",
+                path: "/onvif/profile0",
+                type: "ONVIF",
+                resolution: "1920x1080",
+                codec: "H.264",
+                fps: 25,
+                bitrate: 4096000,
+                has_audio: true
+            },
+            {
+                url: "rtsp://192.168.1.100:554/onvif/profile1",
+                path: "/onvif/profile1",
+                type: "ONVIF",
+                resolution: "640x480",
+                codec: "H.264",
+                fps: 15,
+                bitrate: 512000,
+                has_audio: false
+            },
+            // JPEG #3
+            {
+                url: "http://192.168.1.100/image/jpeg.cgi",
+                path: "/image/jpeg.cgi",
+                type: "JPEG",
+                resolution: "1920x1080",
+                codec: "JPEG",
+                fps: 1,
+                bitrate: 0,
+                has_audio: false
+            },
+            // More RTSP variants
+            {
+                url: "rtsp://192.168.1.100:554/cam/realmonitor?channel=1&subtype=0",
+                path: "/cam/realmonitor?channel=1&subtype=0",
+                type: "FFMPEG",
+                resolution: "1920x1080",
+                codec: "H.265",
+                fps: 30,
+                bitrate: 5120000,
+                has_audio: true
+            },
+            {
+                url: "rtsp://192.168.1.100:554/cam/realmonitor?channel=1&subtype=1",
+                path: "/cam/realmonitor?channel=1&subtype=1",
+                type: "FFMPEG",
+                resolution: "640x480",
+                codec: "H.264",
+                fps: 10,
+                bitrate: 512000,
+                has_audio: false
+            },
+            // MJPEG
             {
                 url: "http://192.168.1.100/video.mjpg",
                 path: "/video.mjpg",
                 type: "MJPEG",
-                resolution: "1280x720",
+                resolution: "1920x1080",
                 codec: "MJPEG",
                 fps: 10,
-                bitrate: 2048000,
+                bitrate: 3072000,
                 has_audio: false
             },
+            // JPEG #4
+            {
+                url: "http://192.168.1.100/Streaming/channels/1/picture",
+                path: "/Streaming/channels/1/picture",
+                type: "JPEG",
+                resolution: "1920x1080",
+                codec: "JPEG",
+                fps: 1,
+                bitrate: 0,
+                has_audio: false
+            },
+            // HLS
             {
                 url: "http://192.168.1.100/stream/live.m3u8",
                 path: "/stream/live.m3u8",
@@ -42,16 +172,18 @@ export class MockStreamAPI {
                 bitrate: 3072000,
                 has_audio: true
             },
+            // HTTP Video
             {
                 url: "http://192.168.1.100/videostream.cgi?user=admin&pwd=12345",
                 path: "/videostream.cgi?user=admin&pwd=12345",
                 type: "HTTP_VIDEO",
-                resolution: "1280x960",
+                resolution: "1920x1080",
                 codec: "H.264",
                 fps: 20,
-                bitrate: 2048000,
+                bitrate: 2560000,
                 has_audio: false
             },
+            // BUBBLE
             {
                 url: "bubble://192.168.1.100:34567/bubble/live?ch=0&stream=0",
                 path: "/bubble/live?ch=0&stream=0",
@@ -59,33 +191,75 @@ export class MockStreamAPI {
                 resolution: "1920x1080",
                 codec: "H.264",
                 fps: 25,
-                bitrate: 3072000,
+                bitrate: 3584000,
+                has_audio: true
+            },
+            // JPEG #5
+            {
+                url: "http://192.168.1.100/tmpfs/auto.jpg",
+                path: "/tmpfs/auto.jpg",
+                type: "JPEG",
+                resolution: "1920x1080",
+                codec: "JPEG",
+                fps: 1,
+                bitrate: 0,
+                has_audio: false
+            },
+            // Additional RTSP
+            {
+                url: "rtsp://192.168.1.100:554/h264_stream",
+                path: "/h264_stream",
+                type: "FFMPEG",
+                resolution: "1920x1080",
+                codec: "H.264",
+                fps: 30,
+                bitrate: 4096000,
                 has_audio: true
             },
             {
-                url: "rtsp://192.168.1.100:554/cam/realmonitor?channel=1&subtype=0",
+                url: "rtsp://192.168.1.100:554/av0_0",
-                path: "/cam/realmonitor?channel=1&subtype=0",
+                path: "/av0_0",
-                type: "ONVIF",
+                type: "FFMPEG",
-                resolution: "2560x1440",
+                resolution: "1920x1080",
+                codec: "H.264",
+                fps: 25,
+                bitrate: 3840000,
+                has_audio: true
+            },
+            {
+                url: "rtsp://192.168.1.100:554/av0_1",
+                path: "/av0_1",
+                type: "FFMPEG",
+                resolution: "640x480",
+                codec: "H.264",
+                fps: 10,
+                bitrate: 512000,
+                has_audio: false
+            },
+            {
+                url: "rtsp://192.168.1.100:554/unicast/c1/s0/live",
+                path: "/unicast/c1/s0/live",
+                type: "FFMPEG",
+                resolution: "1920x1080",
                 codec: "H.265",
-                fps: 30,
+                fps: 25,
-                bitrate: 6144000,
+                bitrate: 4608000,
                 has_audio: true
             }
         ];
     }
 
     discover(request, callbacks) {
-        const totalToScan = 150;
+        const totalToScan = 450;
         const streamsToFind = this.mockStreams;
         let tested = 0;
         let found = 0;
 
         const startTime = Date.now();
 
-        // Simulate progressive discovery
+        // Simulate progressive discovery - 1 stream per second
-        const interval = setInterval(() => {
+        const progressInterval = setInterval(() => {
-            const increment = Math.floor(Math.random() * 8) + 3;
+            const increment = Math.floor(Math.random() * 15) + 10;
             tested = Math.min(tested + increment, totalToScan);
             const remaining = totalToScan - tested;
 
@@ -98,33 +272,9 @@ export class MockStreamAPI {
                 });
             }
 
-            // Randomly find streams
-            if (found < streamsToFind.length && Math.random() > 0.6) {
-                const stream = streamsToFind[found];
-                found++;
-
-                if (callbacks.onStreamFound) {
-                    callbacks.onStreamFound({
-                        stream: stream
-                    });
-                }
-            }
-
             // Complete when done
             if (tested >= totalToScan) {
-                clearInterval(interval);
+                clearInterval(progressInterval);
-
-                // Send any remaining streams
-                while (found < streamsToFind.length) {
-                    const stream = streamsToFind[found];
-                    found++;
-
-                    if (callbacks.onStreamFound) {
-                        callbacks.onStreamFound({
-                            stream: stream
-                        });
-                    }
-                }
 
                 const duration = (Date.now() - startTime) / 1000;
 
@@ -136,7 +286,23 @@ export class MockStreamAPI {
                     });
                 }
             }
-        }, 400);
+        }, 300);
+
+        // Find streams at ~1 per second
+        const streamInterval = setInterval(() => {
+            if (found < streamsToFind.length) {
+                const stream = streamsToFind[found];
+                found++;
+
+                if (callbacks.onStreamFound) {
+                    callbacks.onStreamFound({
+                        stream: stream
+                    });
+                }
+            } else {
+                clearInterval(streamInterval);
+            }
+        }, 1000);
     }
 
     close() {

webui/web/js/ui/stream-list.js

@@ -4,19 +4,277 @@ export class StreamList {
         this.streams = [];
         this.onUseCallback = null;
         this.expandedIndex = null;
+        // Track collapsed state for groups and subgroups
+        this.collapsedGroups = new Set();
+        this.collapsedSubgroups = new Set();
+        // Selection mode: 'main' or 'sub'
+        this.selectionMode = 'main';
+        // Flag to apply smart defaults on first render after reset
+        this.needsSmartDefaults = true;
+    }
+
+    /**
+     * Set selection mode and apply smart defaults for collapsed state
+     * Only resets collapsed state when mode actually changes
+     */
+    setSelectionMode(mode) {
+        if (this.selectionMode === mode) return;
+
+        this.selectionMode = mode;
+        this.applySmartDefaults();
+    }
+
+    /**
+     * Apply smart collapsed defaults based on current selection mode and available streams
+     */
+    applySmartDefaults() {
+        // Get current stream classification
+        const recommended = this.streams.filter(s => this.isRecommended(s));
+        const { main, sub, other } = this.classifyRecommendedStreams(
+            recommended.map((stream, i) => ({ stream, index: i }))
+        );
+
+        // Reset all collapsed states
+        this.collapsedGroups.clear();
+        this.collapsedSubgroups.clear();
+
+        if (this.selectionMode === 'main') {
+            // Main mode: show Main, collapse Sub/Other/Alternative
+            if (main.length > 0) {
+                // Has main streams - collapse everything except Main
+                this.collapsedGroups.add('alternative');
+                this.collapsedSubgroups.add('recommended-sub');
+                this.collapsedSubgroups.add('recommended-other');
+            }
+            // If no main streams - leave everything open
+        } else {
+            // Sub mode: show Sub, collapse Main/Other/Alternative
+            if (sub.length > 0) {
+                // Has sub streams - collapse everything except Sub
+                this.collapsedGroups.add('alternative');
+                this.collapsedSubgroups.add('recommended-main');
+                this.collapsedSubgroups.add('recommended-other');
+            }
+            // If no sub streams - leave everything open
+        }
+    }
+
+    // Stream types considered "recommended" (standard video streams)
+    static RECOMMENDED_TYPES = ['FFMPEG', 'ONVIF'];
+
+    // Minimum width threshold for Main streams (HD quality)
+    static MIN_MAIN_WIDTH = 720;
+
+    // Minimum gap between resolutions to split Main/Sub
+    static MIN_GAP_FOR_SPLIT = 400;
+
+    isRecommended(stream) {
+        return StreamList.RECOMMENDED_TYPES.includes(stream.type);
+    }
+
+    /**
+     * Parse resolution string "1920x1080" to width number
+     * Returns null if resolution is missing or invalid
+     */
+    parseResolutionWidth(resolution) {
+        if (!resolution) return null;
+        const match = resolution.match(/^(\d+)x(\d+)$/);
+        if (!match) return null;
+        return parseInt(match[1], 10);
+    }
+
+    /**
+     * Classify recommended streams into Main/Sub/Other using clustering algorithm
+     *
+     * Algorithm:
+     * 1. Streams with width >= 720 are candidates for Main
+     * 2. Streams with width < 720 go to Sub
+     * 3. Streams without resolution go to Other
+     * 4. Among Main candidates, find max gap between sorted resolutions
+     * 5. If gap > 400px, split into Main (higher) and Sub (lower)
+     */
+    classifyRecommendedStreams(items) {
+        const main = [];
+        const sub = [];
+        const other = [];
+
+        // First pass: separate by resolution availability and threshold
+        const mainCandidates = []; // width >= 720
+
+        items.forEach(item => {
+            const width = this.parseResolutionWidth(item.stream.resolution);
+
+            if (width === null) {
+                other.push(item);
+            } else if (width < StreamList.MIN_MAIN_WIDTH) {
+                sub.push(item);
+            } else {
+                mainCandidates.push({ ...item, width });
+            }
+        });
+
+        // If no main candidates or only one, no need to cluster
+        if (mainCandidates.length <= 1) {
+            mainCandidates.forEach(item => main.push({ stream: item.stream, index: item.index }));
+            return { main, sub, other };
+        }
+
+        // Sort candidates by width descending
+        mainCandidates.sort((a, b) => b.width - a.width);
+
+        // Find the largest gap between adjacent resolutions
+        let maxGap = 0;
+        let splitIndex = -1;
+
+        for (let i = 0; i < mainCandidates.length - 1; i++) {
+            const gap = mainCandidates[i].width - mainCandidates[i + 1].width;
+            if (gap > maxGap) {
+                maxGap = gap;
+                splitIndex = i;
+            }
+        }
+
+        // If max gap is significant, split into Main and Sub
+        if (maxGap > StreamList.MIN_GAP_FOR_SPLIT && splitIndex >= 0) {
+            mainCandidates.forEach((item, i) => {
+                const cleanItem = { stream: item.stream, index: item.index };
+                if (i <= splitIndex) {
+                    main.push(cleanItem);
+                } else {
+                    sub.push(cleanItem);
+                }
+            });
+        } else {
+            // All candidates stay in Main
+            mainCandidates.forEach(item => {
+                main.push({ stream: item.stream, index: item.index });
+            });
+        }
+
+        return { main, sub, other };
     }
 
     render(streams, onUseCallback) {
         this.streams = streams;
         this.onUseCallback = onUseCallback;
 
-        // Render stream items
+        // Apply smart defaults on first render after reset
-        this.listContainer.innerHTML = streams.map((stream, index) => this.renderItem(stream, index)).join('');
+        if (this.needsSmartDefaults && streams.length > 0) {
+            this.needsSmartDefaults = false;
+            this.applySmartDefaults();
+        }
+
+        // Split streams into groups while preserving original indices
+        const recommended = [];
+        const alternative = [];
+
+        streams.forEach((stream, index) => {
+            if (this.isRecommended(stream)) {
+                recommended.push({ stream, index });
+            } else {
+                alternative.push({ stream, index });
+            }
+        });
+
+        // Render only non-empty groups
+        let html = '';
+        if (recommended.length > 0) {
+            html += this.renderRecommendedGroup(recommended);
+        }
+        if (alternative.length > 0) {
+            html += this.renderGroup('Alternative', alternative, 'alternative');
+        }
+        this.listContainer.innerHTML = html;
 
         // Attach event listeners
         this.attachEventListeners();
     }
 
+    /**
+     * Render Recommended group with Main/Sub/Other subgroups
+     */
+    renderRecommendedGroup(items) {
+        const { main, sub, other } = this.classifyRecommendedStreams(items);
+        const totalCount = items.length;
+        const isCollapsed = this.collapsedGroups.has('recommended');
+
+        let subgroupsHtml = '';
+
+        if (main.length > 0) {
+            subgroupsHtml += this.renderSubgroup('Main', main, 'recommended');
+        }
+        if (sub.length > 0) {
+            subgroupsHtml += this.renderSubgroup('Sub', sub, 'recommended');
+        }
+        if (other.length > 0) {
+            subgroupsHtml += this.renderSubgroup('Other', other, 'recommended');
+        }
+
+        return `
+            <div class="stream-group stream-group-recommended ${isCollapsed ? 'collapsed' : ''}">
+                <div class="stream-group-header" data-group="recommended">
+                    <button class="stream-group-toggle" aria-label="Toggle group">
+                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="chevron">
+                            <path d="M3 4.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                        </svg>
+                    </button>
+                    <span class="stream-group-title">Recommended</span>
+                    <span class="stream-group-count">(${totalCount})</span>
+                </div>
+                <div class="stream-group-content">
+                    ${subgroupsHtml}
+                </div>
+            </div>
+        `;
+    }
+
+    /**
+     * Render a subgroup (Main/Sub/Other) within Recommended
+     */
+    renderSubgroup(title, items, parentGroup) {
+        const subgroupKey = `${parentGroup}-${title.toLowerCase()}`;
+        const isCollapsed = this.collapsedSubgroups.has(subgroupKey);
+
+        return `
+            <div class="stream-subgroup ${isCollapsed ? 'collapsed' : ''}" data-subgroup="${subgroupKey}">
+                <div class="stream-subgroup-header" data-subgroup="${subgroupKey}">
+                    <button class="stream-subgroup-toggle" aria-label="Toggle subgroup">
+                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none" class="chevron">
+                            <path d="M2.5 3.75l2.5 2.5 2.5-2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                        </svg>
+                    </button>
+                    <span class="stream-subgroup-title">${title}</span>
+                    <span class="stream-subgroup-count">(${items.length})</span>
+                </div>
+                <div class="stream-subgroup-content">
+                    ${items.map(({ stream, index }) => this.renderItem(stream, index)).join('')}
+                </div>
+            </div>
+        `;
+    }
+
+    renderGroup(title, items, groupClass) {
+        const count = items.length;
+        const isCollapsed = this.collapsedGroups.has(groupClass);
+
+        return `
+            <div class="stream-group stream-group-${groupClass} ${isCollapsed ? 'collapsed' : ''}">
+                <div class="stream-group-header" data-group="${groupClass}">
+                    <button class="stream-group-toggle" aria-label="Toggle group">
+                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="chevron">
+                            <path d="M3 4.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                        </svg>
+                    </button>
+                    <span class="stream-group-title">${title}</span>
+                    <span class="stream-group-count">(${count})</span>
+                </div>
+                <div class="stream-group-content">
+                    ${items.map(({ stream, index }) => this.renderItem(stream, index)).join('')}
+                </div>
+            </div>
+        `;
+    }
+
     renderItem(stream, index) {
         const icon = this.getStreamIcon(stream.type);
         const isExpanded = this.expandedIndex === index;
@@ -225,7 +483,28 @@ export class StreamList {
     }
 
     attachEventListeners() {
-        // Click on header to toggle
+        // Group header toggle (Recommended, Alternative)
+        this.listContainer.querySelectorAll('.stream-group-header').forEach(header => {
+            header.addEventListener('click', (e) => {
+                const groupKey = header.dataset.group;
+                if (groupKey) {
+                    this.toggleGroup(groupKey);
+                }
+            });
+        });
+
+        // Subgroup header toggle (Main, Sub, Other)
+        this.listContainer.querySelectorAll('.stream-subgroup-header').forEach(header => {
+            header.addEventListener('click', (e) => {
+                e.stopPropagation(); // Don't bubble to group header
+                const subgroupKey = header.dataset.subgroup;
+                if (subgroupKey) {
+                    this.toggleSubgroup(subgroupKey);
+                }
+            });
+        });
+
+        // Click on stream item header to toggle details
         this.listContainer.querySelectorAll('.stream-item-header').forEach(header => {
             header.addEventListener('click', (e) => {
                 // Don't toggle if clicking "Use Stream" button
@@ -250,6 +529,24 @@ export class StreamList {
         });
     }
 
+    toggleGroup(groupKey) {
+        if (this.collapsedGroups.has(groupKey)) {
+            this.collapsedGroups.delete(groupKey);
+        } else {
+            this.collapsedGroups.add(groupKey);
+        }
+        this.render(this.streams, this.onUseCallback);
+    }
+
+    toggleSubgroup(subgroupKey) {
+        if (this.collapsedSubgroups.has(subgroupKey)) {
+            this.collapsedSubgroups.delete(subgroupKey);
+        } else {
+            this.collapsedSubgroups.add(subgroupKey);
+        }
+        this.render(this.streams, this.onUseCallback);
+    }
+
     toggleExpand(index) {
         if (this.expandedIndex === index) {
             // Collapse if already expanded