added sharing and subscriptions

frontend/src/lib/PriceChart.svelte

@@ -80,6 +80,29 @@
     coords.length ? coords.reduce((hi, c, i) => (c.price > coords[hi].price ? i : hi), 0) : -1
   );
 
+  // Out-of-stock spans — shade the time the item couldn't be bought.
+  // Each maximal run of in_stock===false becomes a band, extended halfway
+  // to its in-stock neighbours so single checks still read as a region.
+  const oosBands = $derived.by(() => {
+    if (!coords.length) return [];
+    const bands: { x: number; w: number }[] = [];
+    let start: number | null = null;
+    for (let i = 0; i <= coords.length; i++) {
+      const oos = i < coords.length && coords[i].in_stock === false;
+      if (oos && start === null) start = i;
+      if (!oos && start !== null) {
+        const end = i - 1;
+        const left = start > 0 ? (coords[start - 1].cx + coords[start].cx) / 2 : coords[start].cx;
+        const right =
+          end < coords.length - 1 ? (coords[end].cx + coords[end + 1].cx) / 2 : coords[end].cx;
+        bands.push({ x: left, w: Math.max(right - left, 3) });
+        start = null;
+      }
+    }
+    return bands;
+  });
+  const anyOos = $derived(coords.some((c) => c.in_stock === false));
+
   const targetY = $derived(target != null && stats ? y(target) : null);
   const latest = $derived(coords.length ? coords[coords.length - 1] : null);
   const onSale = $derived(latest != null && target != null && latest.price <= target);
@@ -168,6 +191,18 @@
         </filter>
       </defs>
 
+      <!-- Out-of-stock spans — rose shade behind everything -->
+      {#each oosBands as b}
+        <rect
+          x={b.x}
+          y={PAD.t}
+          width={b.w}
+          height={innerH}
+          fill="var(--color-rose)"
+          opacity="0.1"
+        />
+      {/each}
+
       <!-- Gridlines + price ticks -->
       {#each gridLines as g}
         <line
@@ -270,6 +305,9 @@
       <span class="flex items-center gap-3 text-mute">
         <span class="flex items-center gap-1"><span class="inline-block size-2 rounded-full" style="background:var(--color-gold)"></span>low {fmtMoney(coords[lowIdx].price)}</span>
         <span class="flex items-center gap-1"><span class="inline-block size-2 rounded-full" style="background:var(--color-rose)"></span>high {fmtMoney(coords[highIdx].price)}</span>
+        {#if anyOos}
+          <span class="flex items-center gap-1"><span class="inline-block h-2 w-3 rounded-sm" style="background:var(--color-rose);opacity:0.35"></span>out of stock</span>
+        {/if}
       </span>
       {#if latest}
         <span class:text-mint={onSale} class:text-ink={!onSale}>