Add audio nodes to the patch bay

Also make the patch bay responsive.

www/index.html

@@ -6,62 +6,132 @@
   <title>Synth Visualiser</title>
   <style>
     :root {
-      --bg:     #0d0d0d;
-      --panel:  #1a1a1a;
-      --accent: #00e5ff;
-      --text:   #e0e0e0;
+      --bg:          #0d0d0d;
+      --panel:       #1a1a1a;
+      --accent:      #00e5ff;
+      --text:        #e0e0e0;
+      --border:      #2a2a2a;
+      --handle:      #222;
+      --handle-hover:#2e2e2e;
+      --patchbay-h:  340px;
     }
+
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    html, body {
+      height: 100%;
+      overflow: hidden;
+    }
+
     body {
       background: var(--bg);
       color: var(--text);
       font-family: "JetBrains Mono", "Fira Code", monospace;
-      display: grid;
-      grid-template-rows: auto 1fr auto;
-      min-height: 100dvh;
+      display: flex;
+      flex-direction: column;
     }
+
     header {
-      padding: 0.75rem 1.5rem;
-      border-bottom: 1px solid #333;
-      font-size: 0.9rem;
+      padding: 0.6rem 1.5rem;
+      border-bottom: 1px solid var(--border);
+      font-size: 0.85rem;
       letter-spacing: 0.15em;
       text-transform: uppercase;
       color: var(--accent);
+      flex-shrink: 0;
     }
+
     main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      min-height: 0;
+    }
+
+    /* Top two panels side-by-side */
+    .panels-top {
+      flex: 1;
       display: grid;
       grid-template-columns: 1fr 1fr;
-      grid-template-rows: 1fr 180px;
       gap: 1px;
-      background: #333;
+      background: var(--border);
+      min-height: 60px;
       overflow: hidden;
     }
+
+    /* Draggable divider between top panels and patch bay */
+    .resize-handle {
+      flex-shrink: 0;
+      height: 6px;
+      background: var(--handle);
+      cursor: ns-resize;
+      border-top: 1px solid #333;
+      border-bottom: 1px solid #111;
+      user-select: none;
+      touch-action: none;
+    }
+    .resize-handle:hover,
+    .resize-handle.active {
+      background: var(--handle-hover);
+    }
+    /* Widen the grab area without making the visual gap bigger */
+    .resize-handle::before {
+      content: "";
+      display: block;
+      height: 12px;
+      margin-top: -3px;
+    }
+
+    /* Patch bay panel — height controlled by JS drag */
+    .panel--patchbay {
+      flex-shrink: 0;
+      height: var(--patchbay-h);
+      min-height: 80px;
+      max-height: calc(100vh - 120px);
+      border-top: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      background: var(--panel);
+    }
+
     .panel {
       background: var(--panel);
       display: flex;
       flex-direction: column;
       overflow: hidden;
     }
+
     .panel__label {
-      padding: 0.4rem 0.75rem;
-      font-size: 0.7rem;
+      padding: 0.35rem 0.75rem;
+      font-size: 0.65rem;
       letter-spacing: 0.1em;
       text-transform: uppercase;
-      color: #666;
-      border-bottom: 1px solid #2a2a2a;
+      color: #555;
+      border-bottom: 1px solid var(--border);
       flex-shrink: 0;
     }
-    .panel canvas { flex: 1; width: 100%; height: 100%; display: block; }
-    .panel--patchbay { grid-column: 1 / -1; }
+
+    /* Canvas fills remaining space; buffer sizing is done in JS */
+    .panel canvas {
+      flex: 1;
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
     footer {
-      padding: 0.5rem 1.5rem;
-      font-size: 0.7rem;
+      flex-shrink: 0;
+      padding: 0.4rem 1.5rem;
+      font-size: 0.65rem;
       color: #444;
-      border-top: 1px solid #222;
+      border-top: 1px solid #1e1e1e;
       display: flex;
       gap: 1.5rem;
     }
     #status { color: var(--accent); }
+
     #loader {
       position: fixed; inset: 0;
       background: var(--bg);
@@ -78,15 +148,20 @@
   <header>Analogue Synth Visualiser</header>
 
   <main>
-    <section class="panel">
-      <div class="panel__label">Oscilloscope</div>
-      <canvas id="oscilloscope-canvas"></canvas>
-    </section>
-    <section class="panel">
-      <div class="panel__label">Spectrum</div>
-      <canvas id="spectrum-canvas"></canvas>
-    </section>
-    <section class="panel panel--patchbay">
+    <div class="panels-top">
+      <section class="panel">
+        <div class="panel__label">Oscilloscope</div>
+        <canvas id="oscilloscope-canvas"></canvas>
+      </section>
+      <section class="panel">
+        <div class="panel__label">Spectrum</div>
+        <canvas id="spectrum-canvas"></canvas>
+      </section>
+    </div>
+
+    <div class="resize-handle" id="resize-handle" title="Drag to resize patch bay"></div>
+
+    <section class="panel panel--patchbay" id="patchbay-panel">
       <div class="panel__label">Patch Bay</div>
       <canvas id="patchbay-canvas"></canvas>
     </section>
@@ -98,12 +173,6 @@
     <span id="frame-time"></span>
   </footer>
 
-  <!--
-    Run first:
-      wasm-pack build crates/synth-visualiser --target web --out-dir ../../www/pkg
-    Then serve:
-      python3 -m http.server --directory www 8080
-  -->
   <script type="module" src="./bootstrap.js"></script>
 </body>
 </html>