feat: node property inspector

- Right-click node -> Properties shows details dialog
- Shows: ID, name, class, volume, ports, sample rate, channels,
  format, quantum, rate, device, bus, API, priority
- Backend parses extra PipeWire node props (clock.rate, channels, etc.)
- Node type includes all new fields
- stop() already had the SSE cleanup fix

frontend/src/components/GraphCanvas.svelte

@@ -27,6 +27,7 @@
   let selectedEdge = $state<string | null>(null);
   let contextMenu = $state<{ x: number; y: number; linkId: number; outputPortId: number; inputPortId: number; pinned: boolean } | null>(null);
   let nodeContextMenu = $state<{ x: number; y: number; nodeId: number; nodeName: string } | null>(null);
+  let showPropsDialog = $state<number | null>(null); // node ID or null
 
   // Filters
   let showAudio = $state(true);
@@ -658,6 +659,7 @@
   {#if nodeContextMenu}
     <div class="ctx" style="left:{nodeContextMenu.x}px;top:{nodeContextMenu.y}px" role="menu">
       <div class="ctx-title">{nodeContextMenu.nodeName}</div>
+      <button onclick={() => { showPropsDialog = nodeContextMenu!.nodeId; nodeContextMenu = null; }}>Properties</button>
       <button onclick={() => {
         fetch('/api/destroy-node', {
           method: 'POST',
@@ -669,6 +671,41 @@
     </div>
   {/if}
 
+  <!-- Properties dialog -->
+  {#if showPropsDialog !== null}
+    {@const nd = $nodes.find(n => n.id === showPropsDialog)}
+    {#if nd}
+      <div class="dialog">
+        <div class="dialog-header">
+          <span>Properties: {nd.nick || nd.name}</span>
+          <button class="close" onclick={() => { showPropsDialog = null; }}>X</button>
+        </div>
+        <div class="dialog-body">
+          <table class="props-table">
+            <tbody>
+            <tr><td class="pk">ID</td><td>{nd.id}</td></tr>
+            <tr><td class="pk">Name</td><td>{nd.name}</td></tr>
+            {#if nd.nick}<tr><td class="pk">Nick</td><td>{nd.nick}</td></tr>{/if}
+            {#if nd.media_name}<tr><td class="pk">Media Name</td><td>{nd.media_name}</td></tr>{/if}
+            <tr><td class="pk">Class</td><td>{nd.mode} / {nd.node_type}</td></tr>
+            <tr><td class="pk">Volume</td><td>{Math.round(nd.volume * 100)}% {nd.mute ? '(muted)' : ''}</td></tr>
+            <tr><td class="pk">Ports</td><td>{nd.port_ids.length}</td></tr>
+            {#if nd.sample_rate > 0}<tr><td class="pk">Sample Rate</td><td>{nd.sample_rate} Hz</td></tr>{/if}
+            {#if nd.channels > 0}<tr><td class="pk">Channels</td><td>{nd.channels}</td></tr>{/if}
+            {#if nd.format}<tr><td class="pk">Format</td><td>{nd.format}</td></tr>{/if}
+            {#if nd.quantum > 0}<tr><td class="pk">Quantum</td><td>{nd.quantum}</td></tr>{/if}
+            {#if nd.rate > 0}<tr><td class="pk">Rate</td><td>{nd.rate}</td></tr>{/if}
+            {#if nd.device_name}<tr><td class="pk">Device</td><td>{nd.device_name}</td></tr>{/if}
+            {#if nd.device_bus}<tr><td class="pk">Bus</td><td>{nd.device_bus}</td></tr>{/if}
+            {#if nd.api}<tr><td class="pk">API</td><td>{nd.api}</td></tr>{/if}
+            {#if nd.priority > 0}<tr><td class="pk">Priority</td><td>{nd.priority}</td></tr>{/if}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    {/if}
+  {/if}
+
   <!-- Hide Nodes Dialog -->
   {#if showHideDialog}
     <div class="dialog">
@@ -897,6 +934,11 @@
 
   .empty { font-size: 11px; color: #555; padding: 8px 0; text-align: center; }
 
+  .props-table { width: 100%; border-collapse: collapse; font-size: 11px; }
+  .props-table td { padding: 2px 6px; border-bottom: 1px solid #2a2a3e; }
+  .props-table td:first-child { color: #888; white-space: nowrap; width: 100px; }
+  .props-table td:last-child { color: #ccc; word-break: break-all; }
+
   .port-circle { cursor: crosshair; }
   .port-circle:hover { filter: brightness(1.5); }
   .edge-path { cursor: pointer; pointer-events: stroke; }

frontend/src/lib/types.ts

@@ -18,6 +18,15 @@ export interface Node {
   node_type: string;
   volume: number;
   mute: boolean;
+  sample_rate: number;
+  channels: number;
+  quantum: number;
+  rate: number;
+  format: string;
+  device_name: string;
+  device_bus: string;
+  api: string;
+  priority: number;
   port_ids: number[];
 }