feat(demo): move Active Resources into sidebar below Capture

- Relocate .resources-pane from .content into .aside sidebar
- .resources-pane now uses flex: 1 to fill remaining sidebar height
- Video area loses border-bottom and occupies the full content column
- Tighten empty-state padding and icon size to suit the narrower panel

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: LucasMaupin

packages/demo/src/index.html

@@ -331,7 +331,6 @@
         background: #000;
         flex: 1;
         min-height: 0;
-        border-bottom: 1px solid var(--border);
         overflow: hidden;
       }
 
@@ -368,10 +367,10 @@
       /* ── Resources pane ──────────────────────────────── */
 
       .resources-pane {
-        flex-shrink: 0;
-        height: 160px;
+        flex: 1;
         overflow-y: auto;
-        padding: 10px 16px;
+        min-height: 0;
+        padding: 4px 0;
       }
 
       .section-header {
@@ -405,7 +404,7 @@
         flex-direction: column;
         align-items: center;
         gap: 8px;
-        padding: 40px 20px;
+        padding: 20px 10px;
         color: var(--muted);
       }
 
@@ -631,28 +630,13 @@
           <textarea id="param-b64json"></textarea>
         </div>
 
-      </aside>
-
-      <div class="content">
-
-        <div class="video-area">
-          <video id="ingest" autoplay playsinline muted controls></video>
-          <div id="video-placeholder" class="video-placeholder">
-            <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M23 7l-7 5 7 5V7z"/>
-              <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
-            </svg>
-            <p>No stream — click Camera or Screen to begin</p>
-          </div>
-        </div>
-
         <div class="resources-pane">
           <div class="section-header">
             <span class="section-title">Active Resources</span>
             <span id="resource-count" class="count-badge">0</span>
           </div>
           <div id="empty-state" class="empty-state">
-            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
               <circle cx="12" cy="12" r="10"/>
               <line x1="12" y1="8" x2="12" y2="12"/>
               <line x1="12" y1="16" x2="12.01" y2="16"/>
@@ -662,6 +646,21 @@
           <div id="resource-list" class="resource-list"></div>
         </div>
 
+      </aside>
+
+      <div class="content">
+
+        <div class="video-area">
+          <video id="ingest" autoplay playsinline muted controls></video>
+          <div id="video-placeholder" class="video-placeholder">
+            <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M23 7l-7 5 7 5V7z"/>
+              <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
+            </svg>
+            <p>No stream — click Camera or Screen to begin</p>
+          </div>
+        </div>
+
       </div>
     </div>