internal/server,shared: support request metadata (#850)

- add support for http handlers in the request chain to append metadata
to the request
- metrics middleware will include metadata in the activity log 
- update Activity UI to support metadata, drag sort columns
- update Activity UI capture dialog to use more screen space

Updates #834

ui-svelte/src/components/CaptureDialog.svelte

@@ -193,7 +193,7 @@
 <dialog
   bind:this={dialogEl}
   onclose={handleDialogClose}
-  class="bg-surface text-txtmain rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] p-0 backdrop:bg-black/50 m-auto"
+  class="bg-surface text-txtmain rounded-lg shadow-xl max-w-[80%] w-full max-h-[90vh] p-0 backdrop:bg-black/50 m-auto"
 >
   {#if capture}
     <div class="flex flex-col max-h-[90vh]">

ui-svelte/src/components/MetadataTooltip.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    metadata: Record<string, string> | undefined;
+    children: Snippet;
+  }
+
+  let { metadata, children }: Props = $props();
+
+  let entries = $derived(Object.entries(metadata || {}));
+  let triggerEl: HTMLElement | undefined = $state();
+  let tooltipEl: HTMLDivElement | undefined = $state();
+  let show = $state(false);
+  let tooltipStyle = $state("");
+
+  function positionTooltip() {
+    if (!triggerEl || !tooltipEl) return;
+    const triggerRect = triggerEl.getBoundingClientRect();
+    const tooltipRect = tooltipEl.getBoundingClientRect();
+    const margin = 8;
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    let left = triggerRect.left;
+    let top = triggerRect.bottom + margin;
+
+    // Keep tooltip within horizontal viewport bounds
+    if (left + tooltipRect.width > viewportWidth - margin) {
+      left = triggerRect.right - tooltipRect.width;
+    }
+    if (left < margin) {
+      left = margin;
+    }
+
+    // Flip above trigger if it would overflow the bottom
+    if (top + tooltipRect.height > viewportHeight - margin) {
+      top = triggerRect.top - tooltipRect.height - margin;
+    }
+
+    tooltipStyle = `left: ${left}px; top: ${top}px; max-width: calc(100vw - ${margin * 2}px);`;
+  }
+
+  function onEnter() {
+    show = true;
+    requestAnimationFrame(positionTooltip);
+  }
+
+  function onLeave() {
+    show = false;
+  }
+</script>
+
+<span
+  bind:this={triggerEl}
+  onmouseenter={onEnter}
+  onmouseleave={onLeave}
+  onfocus={onEnter}
+  onblur={onLeave}
+  class="inline-flex"
+  role="button"
+  tabindex="0"
+  aria-label="Show metadata"
+>
+  {@render children()}
+</span>
+
+{#if show && entries.length > 0}
+  <div
+    bind:this={tooltipEl}
+    style={tooltipStyle}
+    class="fixed px-3 py-2 bg-gray-900 text-white text-sm rounded-md z-50 normal-case min-w-[12rem] max-w-[24rem] shadow-lg whitespace-normal"
+  >
+    <table class="w-full text-left">
+      <tbody>
+        {#each entries as [key, value]}
+          <tr class="border-b border-white/10 last:border-0">
+            <td class="py-1 pr-3 font-medium whitespace-nowrap text-primary">{key}</td>
+            <td class="py-1 break-all">{value}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+{/if}