feat: web UI chat render, panels, presence + analytics

frontend/src/lib/components/presence/VolumeChart.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import type { VolumeBucket } from "$lib/api/types";
+
+  interface Props {
+    volume: VolumeBucket[];
+  }
+
+  const { volume }: Props = $props();
+
+  const max = $derived(Math.max(1, ...volume.map((bucket) => bucket.total)));
+
+  function barTitle(bucket: VolumeBucket): string {
+    return `${bucket.bucket.slice(0, 10)} — всего ${bucket.total} (вх ${bucket.incoming} / исх ${bucket.outgoing})`;
+  }
+</script>
+
+<div class="volume">
+  <div class="bars">
+    {#each volume as bucket (bucket.bucket)}
+      <div
+        class="bar"
+        style:height={`${(bucket.total / max) * 100}%`}
+        title={barTitle(bucket)}
+      >
+        <div class="seg out" style:flex-grow={bucket.outgoing}></div>
+        <div class="seg in" style:flex-grow={bucket.incoming}></div>
+      </div>
+    {/each}
+  </div>
+  <div class="legend">
+    <span class="key"><span class="swatch out"></span>исходящие</span>
+    <span class="key"><span class="swatch in"></span>входящие</span>
+  </div>
+</div>
+
+<style lang="scss">
+  .bars {
+    display: flex;
+    align-items: flex-end;
+    gap: 1px;
+    height: 7.5rem;
+  }
+
+  .bar {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 2px;
+    overflow: hidden;
+    border-radius: 2px 2px 0 0;
+  }
+
+  .seg.out {
+    background-color: var(--color-primary);
+  }
+
+  .seg.in {
+    background-color: var(--color-text-secondary);
+    opacity: 0.4;
+  }
+
+  .legend {
+    display: flex;
+    gap: 1rem;
+    margin-top: 0.5rem;
+    font-size: 0.75rem;
+    color: var(--color-text-secondary);
+  }
+
+  .key {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  .swatch {
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: 2px;
+
+    &.out {
+      background-color: var(--color-primary);
+    }
+
+    &.in {
+      background-color: var(--color-text-secondary);
+      opacity: 0.4;
+    }
+  }
+</style>