diff --git a/frontend/src/lib/api/endpoints.ts b/frontend/src/lib/api/endpoints.ts
index ab933f9..39cde84 100644
--- a/frontend/src/lib/api/endpoints.ts
+++ b/frontend/src/lib/api/endpoints.ts
@@ -28,8 +28,9 @@ import type {
   PolicyRecord,
   PolicyRule,
   PolicyScope,
-  PresenceHourly,
   PresenceSample,
+  PresenceSession,
+  PresenceStats,
   ReactionView,
   ReadInfo,
   ResponseStats,
@@ -206,30 +207,38 @@ export function getCurrentPresence(
   });
 }
 
-export function getPresenceHistory(
+export function getPresenceStats(
   peerId: number,
+  days: number,
+  tz: string,
   page: Page = {}
-): Promise<PresenceSample[]> {
-  return request<PresenceSample[]>("/presence", {
+): Promise<PresenceStats> {
+  return request<PresenceStats>("/presence/stats", {
     account: true,
-    query: { peer_id: peerId, ...page },
+    query: { days, peer_id: peerId, tz, ...page },
   });
 }
 
-export function getPresenceHourly(peerId: number): Promise<PresenceHourly[]> {
-  return request<PresenceHourly[]>("/presence/hourly", {
+export function getPresenceSessions(
+  peerId: number,
+  days: number,
+  tz: string,
+  page: Page = {}
+): Promise<PresenceSession[]> {
+  return request<PresenceSession[]>("/presence/sessions", {
     account: true,
-    query: { peer_id: peerId },
+    query: { days, peer_id: peerId, tz, ...page },
   });
 }
 
 export function getMessageVolume(
   chatId: number,
-  days = 90
+  days: number,
+  tz: string
 ): Promise<VolumeBucket[]> {
   return request<VolumeBucket[]>("/analytics/volume", {
     account: true,
-    query: { chat_id: chatId, days },
+    query: { chat_id: chatId, days, tz },
   });
 }
 
diff --git a/frontend/src/lib/api/types.ts b/frontend/src/lib/api/types.ts
index 85948a3..62d56d3 100644
--- a/frontend/src/lib/api/types.ts
+++ b/frontend/src/lib/api/types.ts
@@ -336,12 +336,57 @@ export interface PresenceSample {
   ts: string;
 }
 
-export interface PresenceHourly {
-  bucket: string;
+export interface PresenceSession {
+  ended: string;
+  ongoing: boolean;
+  online_seconds: number;
+  seconds: number;
+  started: string;
+}
+
+export interface PresenceHour {
+  covered_hours: number;
+  hour: number;
+  hours: number;
+  online_minutes: number | null;
+  weekday: number;
+}
+
+export interface PresenceDay {
+  covered_seconds: number;
+  day: string;
+  online_seconds: number;
+}
+
+export interface CoverageGap {
+  ended: string;
+  started: string;
+}
+
+export interface PresenceSummary {
+  covered_seconds: number;
+  daily_seconds: number | null;
+  first_online: number | null;
+  last_offline: number | null;
   last_seen: string | null;
-  online_samples: number;
+  median_session_seconds: number | null;
+  online_seconds: number;
+  session_count: number;
+}
+
+export interface PresenceStats {
+  current: PresenceSample | null;
+  days: PresenceDay[];
+  gaps: CoverageGap[];
+  hidden: boolean;
+  online: boolean;
   peer_id: number;
-  samples: number;
+  sessions: PresenceSession[];
+  since: string;
+  summary: PresenceSummary;
+  tz: string;
+  until: string;
+  week: PresenceHour[];
 }
 
 export interface VolumeBucket {
diff --git a/frontend/src/lib/components/ChatHeader.svelte b/frontend/src/lib/components/ChatHeader.svelte
index cc80f53..512345e 100644
--- a/frontend/src/lib/components/ChatHeader.svelte
+++ b/frontend/src/lib/components/ChatHeader.svelte
@@ -1,10 +1,6 @@
 <script lang="ts">
-  import {
-    enqueueBackfill,
-    getCurrentPresence,
-    getPeer,
-  } from "#lib/api/endpoints.js";
-  import type { PeerView, PresenceSample } from "#lib/api/types.js";
+  import { enqueueBackfill, getPeer } from "#lib/api/endpoints.js";
+  import type { PeerView } from "#lib/api/types.js";
   import Avatar from "#lib/components/ui/Avatar.svelte";
   import Button from "#lib/components/ui/Button.svelte";
   import ContextMenu from "#lib/components/ui/ContextMenu.svelte";
@@ -16,6 +12,7 @@
   import { chats } from "#lib/stores/chats.svelte.js";
   import { discover } from "#lib/stores/discover.svelte.js";
   import { policyUi } from "#lib/stores/policy.svelte.js";
+  import { presence } from "#lib/stores/presence.svelte.js";
   import { toasts } from "#lib/stores/toasts.svelte.js";
   import { ui } from "#lib/stores/ui.svelte.js";
   import { goto } from "$app/navigation";
@@ -26,13 +23,10 @@
 
   let { chatId }: Props = $props();
 
-  const PRESENCE_INTERVAL = 30_000;
-
   const isDm = $derived(chatId > 0);
   const chat = $derived(chats.byId(chatId));
   const discovered = $derived(discover.get(chatId));
   let peer = $state<PeerView | null>(null);
-  let presence = $state<PresenceSample | null>(null);
   let backfilling = $state(false);
 
   async function backfill() {
@@ -81,34 +75,8 @@
   });
 
   $effect(() => {
-    if (accounts.selectedId === null || !isDm) {
-      presence = null;
-      return;
-    }
-    let active = true;
-    presence = null;
-    const refresh = () => {
-      if (document.visibilityState !== "visible") {
-        return;
-      }
-      getCurrentPresence(chatId)
-        .then((result) => {
-          if (active) {
-            presence = result;
-          }
-        })
-        .catch(() => {
-          if (active) {
-            presence = null;
-          }
-        });
-    };
-    refresh();
-    const timer = setInterval(refresh, PRESENCE_INTERVAL);
-    return () => {
-      active = false;
-      clearInterval(timer);
-    };
+    presence.follow(accounts.selectedId, isDm ? chatId : null);
+    return () => presence.follow(null, null);
   });
 
   const fallbackTitle = $derived(
@@ -119,8 +87,8 @@
   const title = $derived(isDm && peer ? peerName(peer) : fallbackTitle);
   const subtitle = $derived.by(() => {
     if (isDm) {
-      if (presence) {
-        return formatPresence(presence);
+      if (presence.sample) {
+        return formatPresence(presence.sample, presence.now);
       }
       if (peer?.username) {
         return `@${peer.username}`;
@@ -176,7 +144,12 @@
         />
         <div class="info">
           <h2 class="title">{title}</h2>
-          <span class="subtitle" class:online={isDm && isOnline(presence)}>
+          <span
+            class={[
+              "subtitle",
+              { online: isDm && isOnline(presence.sample, presence.now) },
+            ]}
+          >
             {subtitle}
           </span>
         </div>
diff --git a/frontend/src/lib/components/presence/AnalyticsPanel.svelte b/frontend/src/lib/components/presence/AnalyticsPanel.svelte
index 0047b5a..03e002e 100644
--- a/frontend/src/lib/components/presence/AnalyticsPanel.svelte
+++ b/frontend/src/lib/components/presence/AnalyticsPanel.svelte
@@ -1,193 +1,295 @@
 <script lang="ts">
   import {
-    getCurrentPresence,
     getMessageVolume,
-    getPresenceHistory,
-    getPresenceHourly,
+    getPresenceStats,
     getResponseStats,
   } from "#lib/api/endpoints.js";
   import type {
-    PresenceHourly,
-    PresenceSample,
+    PresenceStats,
     ResponseStats,
     VolumeBucket,
   } from "#lib/api/types.js";
+  import OnlineDays from "#lib/components/presence/OnlineDays.svelte";
   import PresenceHeatmap from "#lib/components/presence/PresenceHeatmap.svelte";
+  import PresenceSessions from "#lib/components/presence/PresenceSessions.svelte";
   import VolumeChart from "#lib/components/presence/VolumeChart.svelte";
+  import Button from "#lib/components/ui/Button.svelte";
   import EmptyState from "#lib/components/ui/EmptyState.svelte";
-  import { formatFull } from "#lib/format/datetime.js";
-  import { formatPresence } from "#lib/format/presence.js";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { browserTimeZone, timeZoneLabel } from "#lib/format/datetime.js";
+  import {
+    formatClock,
+    formatLongSpan,
+    formatPresence,
+    formatSpan,
+    isOnline,
+  } from "#lib/format/presence.js";
   import { accounts } from "#lib/stores/accounts.svelte.js";
-  import { events } from "#lib/stores/events.svelte.js";
+  import { presence } from "#lib/stores/presence.svelte.js";
   import { page } from "$app/state";
 
-  const HISTORY_LIMIT = 200;
-  const SECONDS_IN_MINUTE = 60;
+  const TEXT = {
+    average: "В среднем за день",
+    byDay: "По дням",
+    byHour: "По часам недели",
+    failed: "Не удалось загрузить аналитику.",
+    firstOnline: "Обычно появляется",
+    hidden:
+      "Скрывает, когда был(а) в сети. Telegram показывает только «был(а) недавно», поэтому время в сети не посчитать.",
+    lastOffline: "Обычно уходит",
+    median: "Обычная сессия",
+    messages: "Сообщения",
+    mine: "Я отвечаю",
+    missing: "Нет данных",
+    noData: "нет данных",
+    noMessages: "За этот период сообщений нет.",
+    noStatus: "Статусов пока нет.",
+    openChat: "Откройте чат",
+    period: (count: number) => `${count} дней`,
+    retry: "Повторить",
+    sessions: "Сессии",
+    theirs: "Мне отвечают",
+    title: "Аналитика",
+    total: (count: number) => `в сети за ${count} дней`,
+  };
+
+  const PERIODS = [7, 30, 90];
+  const DEFAULT_PERIOD = 30;
+  const SESSION_PAGE = 30;
   const SECONDS_IN_HOUR = 3600;
-  const SECONDS_IN_DAY = 86_400;
+  const MS_IN_SECOND = 1000;
+
+  const tz = browserTimeZone();
+  const zone = timeZoneLabel();
 
   const chatId = $derived(
     page.params.chatId ? Number(page.params.chatId) : null
   );
   const isDm = $derived(chatId !== null && chatId > 0);
 
-  let current = $state<PresenceSample | null>(null);
-  let hourly = $state<PresenceHourly[]>([]);
-  let history = $state<PresenceSample[]>([]);
-  let volume = $state<VolumeBucket[]>([]);
+  let days = $state(DEFAULT_PERIOD);
+  let stats = $state<PresenceStats | null>(null);
+  let volume = $state<VolumeBucket[] | null>(null);
   let response = $state<ResponseStats | null>(null);
-  let loading = $state(false);
+  let shownDays = $state(DEFAULT_PERIOD);
+  let failed = $state(false);
+  let shownChat: number | null = null;
+  let token = 0;
 
-  const changes = $derived.by(() => {
-    const result: PresenceSample[] = [];
-    let last: string | null = null;
-    for (const sample of history) {
-      if (sample.status !== last) {
-        result.push(sample);
-        last = sample.status;
-      }
+  const sample = $derived(
+    presence.sample?.peer_id === chatId
+      ? presence.sample
+      : (stats?.current ?? null)
+  );
+  const online = $derived(isOnline(sample, presence.now));
+  const tracked = $derived(
+    stats !== null &&
+      (stats.current !== null || stats.summary.session_count > 0)
+  );
+  const quiet = $derived(
+    volume?.every((bucket) => bucket.total === 0) ?? false
+  );
+  const rows = $derived.by(() => {
+    if (stats === null) {
+      return [];
+    }
+    const { summary } = stats;
+    const result: { label: string; value: string }[] = [];
+    if (summary.daily_seconds !== null) {
+      result.push({
+        label: TEXT.average,
+        value: formatSpan(summary.daily_seconds),
+      });
+    }
+    if (summary.median_session_seconds !== null) {
+      result.push({
+        label: TEXT.median,
+        value: formatSpan(summary.median_session_seconds),
+      });
+    }
+    if (summary.first_online !== null) {
+      result.push({
+        label: TEXT.firstOnline,
+        value: formatClock(summary.first_online),
+      });
+    }
+    if (summary.last_offline !== null) {
+      result.push({
+        label: TEXT.lastOffline,
+        value: formatClock(summary.last_offline),
+      });
+    }
+    const period =
+      (new Date(stats.until).getTime() - new Date(stats.since).getTime()) /
+      MS_IN_SECOND;
+    const missing = period - summary.covered_seconds;
+    if (missing >= SECONDS_IN_HOUR) {
+      result.push({ label: TEXT.missing, value: formatLongSpan(missing) });
     }
     return result;
   });
 
-  function formatDuration(seconds: number | null): string {
-    if (seconds === null) {
-      return "—";
+  function reply(seconds: number | null): string {
+    return seconds === null ? TEXT.noData : formatSpan(seconds);
+  }
+
+  async function load(id: number, period: number) {
+    token += 1;
+    const current = token;
+    failed = false;
+    if (shownChat !== id) {
+      shownChat = id;
+      stats = null;
+      volume = null;
+      response = null;
     }
-    if (seconds < SECONDS_IN_MINUTE) {
-      return `${Math.round(seconds)} с`;
+    try {
+      const [nextStats, nextVolume, nextResponse] = await Promise.all([
+        id > 0
+          ? getPresenceStats(id, period, tz, { limit: SESSION_PAGE })
+          : Promise.resolve(null),
+        getMessageVolume(id, period, tz),
+        getResponseStats(id),
+      ]);
+      if (current === token) {
+        stats = nextStats;
+        volume = nextVolume;
+        response = nextResponse;
+        shownDays = period;
+      }
+    } catch {
+      if (current === token) {
+        failed = true;
+      }
     }
-    if (seconds < SECONDS_IN_HOUR) {
-      return `${Math.round(seconds / SECONDS_IN_MINUTE)} мин`;
-    }
-    if (seconds < SECONDS_IN_DAY) {
-      return `${Math.round(seconds / SECONDS_IN_HOUR)} ч`;
-    }
-    return `${Math.round(seconds / SECONDS_IN_DAY)} д`;
   }
 
   $effect(() => {
-    if (accounts.selectedId === null || chatId === null) {
-      return;
+    if (accounts.selectedId !== null && chatId !== null) {
+      load(chatId, days);
     }
-    const id = chatId;
-    let active = true;
-    loading = true;
-    current = null;
-    hourly = [];
-    history = [];
-    volume = [];
-    response = null;
-    Promise.all([getMessageVolume(id), getResponseStats(id)])
-      .then(([vol, resp]) => {
-        if (active) {
-          volume = vol;
-          response = resp;
-        }
-      })
-      .catch(() => undefined)
-      .finally(() => {
-        if (active) {
-          loading = false;
-        }
-      });
-    if (id > 0) {
-      Promise.all([
-        getCurrentPresence(id),
-        getPresenceHourly(id),
-        getPresenceHistory(id, { limit: HISTORY_LIMIT }),
-      ])
-        .then(([cur, hrs, hist]) => {
-          if (active) {
-            current = cur;
-            hourly = hrs;
-            history = hist;
-          }
-        })
-        .catch(() => undefined);
-    }
-    const unsub = events.subscribe((event) => {
-      if (event.type === "presence" && event.peer_id === id && event.sample) {
-        current = event.sample;
-      }
-    });
-    return () => {
-      active = false;
-      unsub();
-    };
   });
 </script>
 
 {#if chatId === null}
-  <EmptyState description="Откройте чат" title="Аналитика" />
+  <EmptyState description={TEXT.openChat} title={TEXT.title} />
 {:else}
   <div class="analytics">
-    <section>
-      <h3>Объём сообщений (90 дней)</h3>
-      {#if volume.length === 0}
-        <p class="muted">{loading ? "Загрузка…" : "Нет сообщений"}</p>
-      {:else}
-        <VolumeChart {volume} />
-      {/if}
-    </section>
+    <div class="periods">
+      {#each PERIODS as period (period)}
+        <button
+          aria-pressed={days === period}
+          class={["period", { on: days === period }]}
+          onclick={() => {
+            days = period;
+          }}
+          type="button"
+        >
+          {TEXT.period(period)}
+        </button>
+      {/each}
+    </div>
 
-    <section>
-      <h3>Время ответа</h3>
-      {#if response}
-        <div class="stats">
-          <div class="stat">
-            <span class="value"
-              >{formatDuration(response.mine_median_seconds)}</span
-            >
-            <span class="caption">я отвечаю ({response.mine_count})</span>
-          </div>
-          <div class="stat">
-            <span class="value"
-              >{formatDuration(response.their_median_seconds)}</span
-            >
-            <span class="caption">мне отвечают ({response.their_count})</span>
-          </div>
-        </div>
-      {:else}
-        <p class="muted">{loading ? "Загрузка…" : "Нет данных"}</p>
-      {/if}
-    </section>
+    {#if failed}
+      <div class="state">
+        <p>{TEXT.failed}</p>
+        <Button
+          onclick={() => chatId !== null && load(chatId, days)}
+          smaller
+          variant="text"
+        >
+          {TEXT.retry}
+        </Button>
+      </div>
+    {:else if volume === null || (isDm && stats === null)}
+      <div class="state"><Spinner /></div>
+    {:else}
+      {#if isDm && stats}
+        <section class="hero">
+          {#if tracked && !stats.hidden}
+            <div class="total-line">
+              <span class="total"
+                >{formatSpan(stats.summary.online_seconds)}</span
+              >
+              <span class="count">{TEXT.total(shownDays)}</span>
+            </div>
+          {/if}
+          {#if sample}
+            <p class={["status", { online }]}>
+              {formatPresence(sample, presence.now)}
+            </p>
+          {/if}
+          {#if stats.hidden}
+            <p class="note">{TEXT.hidden}</p>
+          {:else if !tracked}
+            <p class="note">{TEXT.noStatus}</p>
+          {/if}
+        </section>
 
-    {#if isDm}
-      <section>
-        <div class="status" class:online={current?.status === "online"}>
-          {current ? formatPresence(current) : "нет данных"}
-        </div>
-      </section>
+        {#if tracked && !stats.hidden}
+          {#if rows.length > 0}
+            <section>
+              <dl class="rows">
+                {#each rows as row (row.label)}
+                  <div class="row">
+                    <dt>{row.label}</dt>
+                    <dd>{row.value}</dd>
+                  </div>
+                {/each}
+              </dl>
+            </section>
+          {/if}
+
+          <section>
+            <div class="section-title">
+              <h3>{TEXT.byHour}</h3>
+              <span>{zone}</span>
+            </div>
+            <PresenceHeatmap week={stats.week} />
+          </section>
+
+          <section>
+            <div class="section-title"><h3>{TEXT.byDay}</h3></div>
+            <OnlineDays days={stats.days} />
+          </section>
+        {/if}
+      {/if}
 
       <section>
-        <h3>Когда в сети</h3>
-        {#if hourly.length === 0}
-          <p class="muted">{loading ? "Загрузка…" : "Пока нет данных"}</p>
+        <div class="section-title"><h3>{TEXT.messages}</h3></div>
+        {#if quiet}
+          <p class="state">{TEXT.noMessages}</p>
         {:else}
-          <PresenceHeatmap {hourly} />
+          <VolumeChart {volume} />
+        {/if}
+        {#if response && response.mine_count + response.their_count > 0}
+          <dl class="rows replies">
+            <div class="row">
+              <dt>{TEXT.mine}</dt>
+              <dd>{reply(response.mine_median_seconds)}</dd>
+            </div>
+            <div class="row">
+              <dt>{TEXT.theirs}</dt>
+              <dd>{reply(response.their_median_seconds)}</dd>
+            </div>
+          </dl>
         {/if}
       </section>
 
-      <section>
-        <h3>История статусов</h3>
-        {#if changes.length === 0}
-          <p class="muted">{loading ? "Загрузка…" : "Нет записей"}</p>
-        {:else}
-          <ul class="changes">
-            {#each changes as sample (sample.ts)}
-              <li>
-                <span
-                  class="dot"
-                  class:online={sample.status === "online"}
-                ></span>
-                <span class="label">{formatPresence(sample)}</span>
-                <span class="time">{formatFull(sample.ts)}</span>
-              </li>
-            {/each}
-          </ul>
-        {/if}
-      </section>
+      {#if isDm && stats && tracked && !stats.hidden}
+        <section>
+          <div class="section-title"><h3>{TEXT.sessions}</h3></div>
+          {#key `${chatId}:${shownDays}:${stats.until}`}
+            <PresenceSessions
+              days={shownDays}
+              first={stats.sessions}
+              pageSize={SESSION_PAGE}
+              peerId={stats.peer_id}
+              {tz}
+            />
+          {/key}
+        </section>
+      {/if}
     {/if}
   </div>
 {/if}
@@ -196,48 +298,89 @@
   .analytics {
     display: flex;
     flex-direction: column;
-    gap: 1.5rem;
-    padding: 1rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .periods {
+    display: flex;
+    gap: 0.25rem;
+
+    margin: 0.75rem 1rem 0.25rem;
+    padding: 0.125rem;
+    border-radius: 0.625rem;
+
+    background-color: var(--color-background-secondary);
+  }
+
+  .period {
+    cursor: pointer;
+
+    flex: 1;
+
+    height: 2rem;
+    border: 0;
+    border-radius: 0.5rem;
+
+    font: inherit;
+    font-size: 0.8125rem;
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+
+    background: none;
+
+    transition:
+      background-color 0.15s ease-out,
+      color 0.15s ease-out;
+
+    &.on {
+      color: var(--color-text);
+      background-color: var(--color-background);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--color-primary);
+      outline-offset: -2px;
+    }
+
+    @media (pointer: coarse) {
+      height: 2.75rem;
+    }
   }
 
   section {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
+    padding: 0.5rem 0;
+
+    & + section {
+      border-top: 1px solid var(--color-borders);
+    }
   }
 
-  h3 {
-    margin: 0;
-    font-size: 0.75rem;
+  .hero {
+    padding: 0.75rem 1rem 0.875rem;
+  }
+
+  .total-line {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0 0.625rem;
+    align-items: baseline;
+  }
+
+  .total {
+    font-size: 1.875rem;
     font-weight: var(--font-weight-medium);
-    color: var(--color-text-secondary);
-    text-transform: uppercase;
-    letter-spacing: 0.03em;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.2;
+    letter-spacing: -0.01em;
   }
 
-  .stats {
-    display: flex;
-    gap: 1.5rem;
-  }
-
-  .stat {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-  }
-
-  .value {
-    font-size: 1.5rem;
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text);
-  }
-
-  .caption {
-    font-size: 0.75rem;
+  .count {
+    font-size: 0.875rem;
     color: var(--color-text-secondary);
   }
 
   .status {
+    margin: 0.25rem 0 0;
     font-size: 0.9375rem;
     color: var(--color-text-secondary);
 
@@ -246,49 +389,80 @@
     }
   }
 
-  .muted {
-    margin: 0;
-    font-size: 0.8125rem;
+  .note {
+    margin: 0.5rem 0 0;
+    font-size: 0.875rem;
+    line-height: 1.4;
     color: var(--color-text-secondary);
   }
 
-  .changes {
+  .section-title {
     display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
+    gap: 0.75rem;
+    align-items: baseline;
+    justify-content: space-between;
+
+    padding: 0.375rem 1rem 0.625rem;
 
-  .changes li {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
     font-size: 0.8125rem;
-  }
+    font-variant-numeric: tabular-nums;
+    color: var(--color-text-secondary);
 
-  .dot {
-    width: 0.5rem;
-    height: 0.5rem;
-    flex-shrink: 0;
-    border-radius: 50%;
-    background-color: var(--color-text-secondary);
-
-    &.online {
-      background-color: var(--color-primary);
+    h3 {
+      margin: 0;
+      font-size: inherit;
+      font-weight: var(--font-weight-medium);
+      color: var(--color-primary);
+      white-space: nowrap;
     }
   }
 
-  .label {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  .rows {
+    margin: 0;
+  }
+
+  .replies {
+    margin-top: 0.5rem;
+  }
+
+  .row {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    justify-content: space-between;
+
+    min-height: 2.5rem;
+    padding: 0 1rem;
+
+    font-size: 0.9375rem;
+  }
+
+  dt {
+    color: var(--color-text);
+  }
+
+  dd {
+    margin: 0;
+    font-variant-numeric: tabular-nums;
+    color: var(--color-text-secondary);
     white-space: nowrap;
   }
 
-  .time {
-    flex-shrink: 0;
+  .state {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    align-items: center;
+
+    margin: 0;
+    padding: 2rem 1rem;
+
+    font-size: 0.9375rem;
     color: var(--color-text-secondary);
+    text-align: center;
+
+    p {
+      margin: 0;
+    }
   }
 </style>
diff --git a/frontend/src/lib/components/presence/OnlineDays.svelte b/frontend/src/lib/components/presence/OnlineDays.svelte
new file mode 100644
index 0000000..47596fd
--- /dev/null
+++ b/frontend/src/lib/components/presence/OnlineDays.svelte
@@ -0,0 +1,144 @@
+<script lang="ts">
+  import type { PresenceDay } from "#lib/api/types.js";
+  import { formatDay, parseDay } from "#lib/format/datetime.js";
+  import { formatSpan } from "#lib/format/presence.js";
+
+  interface Props {
+    days: PresenceDay[];
+  }
+
+  const { days }: Props = $props();
+
+  const SECONDS_IN_HOUR = 3600;
+  const SECONDS_IN_DAY = 86_400;
+
+  const TEXT = {
+    bar: (day: string, online: number, missing: number) => {
+      if (missing >= SECONDS_IN_DAY - SECONDS_IN_HOUR) {
+        return `${day}, нет данных`;
+      }
+      const gap =
+        missing >= SECONDS_IN_HOUR ? `, нет данных ${formatSpan(missing)}` : "";
+      return `${day}, ${formatSpan(online)} в сети${gap}`;
+    },
+    today: "сегодня",
+  };
+
+  const peak = $derived(Math.max(1, ...days.map((day) => day.online_seconds)));
+  const first = $derived(days[0]);
+
+  function label(day: string): string {
+    return formatDay(parseDay(day).toISOString());
+  }
+
+  function absent(day: PresenceDay, index: number): number {
+    if (index === days.length - 1) {
+      return 0;
+    }
+    return Math.max(0, SECONDS_IN_DAY - day.covered_seconds);
+  }
+</script>
+
+<div class="days">
+  <div class="chart">
+    <span class="peak">{formatSpan(peak)}</span>
+    <div class={["bars", { dense: days.length > 45 }]}>
+      {#each days as day, index (day.day)}
+        <div
+          class={["slot", { empty: day.covered_seconds < SECONDS_IN_HOUR }]}
+          title={TEXT.bar(
+            label(day.day),
+            day.online_seconds,
+            absent(day, index)
+          )}
+        >
+          <span
+            class={["bar", { zero: day.online_seconds === 0 }]}
+            style:height="{(day.online_seconds / peak) * 100}%"
+          ></span>
+        </div>
+      {/each}
+    </div>
+  </div>
+  {#if first}
+    <div class="axis">
+      <span>{label(first.day)}</span>
+      <span>{TEXT.today}</span>
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .days {
+    padding: 0 1rem;
+  }
+
+  .chart {
+    position: relative;
+    padding-top: 1.125rem;
+    border-top: 1px dashed var(--color-borders);
+  }
+
+  .peak {
+    position: absolute;
+    top: 0.125rem;
+    left: 0;
+
+    font-size: 0.6875rem;
+    font-variant-numeric: tabular-nums;
+    color: var(--color-text-secondary);
+  }
+
+  .bars {
+    display: flex;
+    gap: 3px;
+    align-items: flex-end;
+    height: 6rem;
+
+    &.dense {
+      gap: 1px;
+    }
+  }
+
+  .slot {
+    display: flex;
+    flex: 1;
+    align-items: flex-end;
+    height: 100%;
+
+    &.empty {
+      border-radius: 2px 2px 0 0;
+      background: repeating-linear-gradient(
+        135deg,
+        rgba(var(--color-text-secondary-rgb), 0.35) 0 1px,
+        transparent 1px 4px
+      );
+    }
+  }
+
+  .bar {
+    width: 100%;
+    min-height: 2px;
+    border-radius: 2px 2px 0 0;
+    background-color: var(--color-primary);
+
+    &.zero {
+      background-color: rgba(var(--color-text-secondary-rgb), 0.3);
+    }
+
+    .empty & {
+      min-height: 0;
+    }
+  }
+
+  .axis {
+    display: flex;
+    justify-content: space-between;
+
+    margin-top: 0.375rem;
+
+    font-size: 0.6875rem;
+    font-variant-numeric: tabular-nums;
+    color: var(--color-text-secondary);
+  }
+</style>
diff --git a/frontend/src/lib/components/presence/PresenceHeatmap.svelte b/frontend/src/lib/components/presence/PresenceHeatmap.svelte
index ea03dff..22b98a4 100644
--- a/frontend/src/lib/components/presence/PresenceHeatmap.svelte
+++ b/frontend/src/lib/components/presence/PresenceHeatmap.svelte
@@ -1,116 +1,217 @@
 <script lang="ts">
-  import type { PresenceHourly } from "#lib/api/types.js";
+  import type { PresenceHour } from "#lib/api/types.js";
+  import { formatSpan } from "#lib/format/presence.js";
 
   interface Props {
-    hourly: PresenceHourly[];
+    week: PresenceHour[];
   }
 
-  const { hourly }: Props = $props();
+  const { week }: Props = $props();
 
-  const DAYS = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"];
-  const HOURS = Array.from({ length: 24 }, (_, hour) => hour);
-  const HOUR_TICKS = new Set([0, 6, 12, 18]);
-
-  interface Cell {
-    online: number;
-    total: number;
-  }
-
-  const grid = $derived.by(() => {
-    const cells: Cell[][] = DAYS.map(() =>
-      HOURS.map(() => ({ online: 0, total: 0 }))
-    );
-    for (const bucket of hourly) {
-      const date = new Date(bucket.bucket);
-      const day = (date.getDay() + 6) % 7;
-      const cell = cells[day]?.[date.getHours()];
-      if (cell) {
-        cell.online += bucket.online_samples;
-        cell.total += bucket.samples;
+  const TEXT = {
+    cell: (day: string, cell: PresenceHour) => {
+      const slot = `${day}, ${cell.hour}:00`;
+      if (cell.hours === 0) {
+        return slot;
       }
-    }
-    return cells;
-  });
+      if (cell.online_minutes === null) {
+        return `${slot}, нет данных`;
+      }
+      return `${slot}, в среднем ${formatSpan(cell.online_minutes * 60)} в сети`;
+    },
+    days: ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"],
+    empty: "нет данных",
+    max: (minutes: number) => `до ${formatSpan(minutes * 60)}`,
+  };
 
-  function intensity(cell: Cell): number {
-    return cell.total > 0 ? cell.online / cell.total : 0;
+  const HOURS_IN_DAY = 24;
+  const HOUR_TICKS = [0, 6, 12, 18];
+  const MIN_SHADE = 0.18;
+
+  const rows = $derived(
+    TEXT.days.map((_, weekday) =>
+      week
+        .filter((cell) => cell.weekday === weekday)
+        .sort((a, b) => a.hour - b.hour)
+    )
+  );
+  const peak = $derived(
+    Math.max(0, ...week.map((cell) => cell.online_minutes ?? 0))
+  );
+  const hasGaps = $derived(week.some(missing));
+
+  function missing(cell: PresenceHour): boolean {
+    return cell.hours > 0 && cell.online_minutes === null;
   }
 
-  function cellTitle(day: number, hour: number, cell: Cell): string {
-    const pct = cell.total > 0 ? Math.round(intensity(cell) * 100) : 0;
-    return `${DAYS[day]} ${hour}:00 — ${pct}% online`;
+  function shade(minutes: number | null): number {
+    if (minutes === null || minutes === 0 || peak === 0) {
+      return 0;
+    }
+    return MIN_SHADE + (1 - MIN_SHADE) * (minutes / peak);
   }
 </script>
 
 <div class="heatmap">
-  {#each grid as row, day (day)}
-    <div class="heat-row">
-      <span class="day-label">{DAYS[day]}</span>
+  {#each rows as cells, weekday (weekday)}
+    <div class="row">
+      <span class="day">{TEXT.days[weekday]}</span>
       <div class="cells">
-        {#each row as cell, hour (hour)}
+        {#each cells as cell (cell.hour)}
           <span
-            class="cell"
-            title={cellTitle(day, hour, cell)}
-            style:--i={intensity(cell)}
-            class:empty={cell.total === 0}
+            class={[
+              "cell",
+              {
+                empty: missing(cell),
+                outside: cell.hours === 0,
+                zero: cell.online_minutes === 0,
+              },
+            ]}
+            title={TEXT.cell(TEXT.days[weekday] ?? "", cell)}
+            style:--shade="{shade(cell.online_minutes) * 100}%"
           ></span>
         {/each}
       </div>
     </div>
   {/each}
-  <div class="heat-row axis">
-    <span class="day-label"></span>
-    <div class="cells">
-      {#each HOURS as hour (hour)}
-        <span class="tick">{HOUR_TICKS.has(hour) ? hour : ""}</span>
+  <div class="row">
+    <span class="day"></span>
+    <div class="ticks">
+      {#each HOUR_TICKS as hour (hour)}
+        <span style:left="{(hour / HOURS_IN_DAY) * 100}%">{hour}</span>
       {/each}
     </div>
   </div>
+  <div class="legend">
+    <span class="key"><span class="swatch zero"></span>0</span>
+    {#if peak > 0}
+      <span class="key">
+        <span class="scale"></span>
+        {TEXT.max(peak)}
+      </span>
+    {/if}
+    {#if hasGaps}
+      <span class="key">
+        <span class="swatch empty"></span>
+        {TEXT.empty}
+      </span>
+    {/if}
+  </div>
 </div>
 
 <style lang="scss">
   .heatmap {
     display: flex;
     flex-direction: column;
-    gap: 3px;
+    gap: 2px;
+    padding: 0 1rem;
   }
 
-  .heat-row {
+  .row {
     display: flex;
-    align-items: center;
     gap: 0.5rem;
+    align-items: center;
   }
 
-  .day-label {
-    width: 1.5rem;
+  .day {
     flex-shrink: 0;
-    font-size: 0.6875rem;
+    width: 1.375rem;
+    font-size: 0.75rem;
     color: var(--color-text-secondary);
-    text-align: right;
   }
 
   .cells {
     display: grid;
     flex: 1;
-    grid-template-columns: repeat(24, 1fr);
-    gap: 3px;
+    grid-template-columns: repeat(24, minmax(0, 1fr));
+    gap: 2px;
   }
 
   .cell {
     aspect-ratio: 1;
     border-radius: 2px;
-    background-color: var(--color-primary);
-    opacity: calc(0.12 + 0.88 * var(--i));
+    background-color: color-mix(
+      in srgb,
+      var(--color-primary) var(--shade),
+      transparent
+    );
+
+    &.zero {
+      background-color: rgba(var(--color-text-secondary-rgb), 0.12);
+    }
+
+    &.outside {
+      background: none;
+    }
 
     &.empty {
-      background-color: var(--color-text-secondary);
-      opacity: 0.08;
+      background: repeating-linear-gradient(
+        135deg,
+        rgba(var(--color-text-secondary-rgb), 0.45) 0 1px,
+        transparent 1px 3px
+      );
     }
   }
 
-  .tick {
-    font-size: 0.625rem;
+  .ticks {
+    position: relative;
+    flex: 1;
+    height: 1rem;
+
+    span {
+      position: absolute;
+      top: 0.125rem;
+      font-size: 0.6875rem;
+      font-variant-numeric: tabular-nums;
+      color: var(--color-text-secondary);
+    }
+  }
+
+  .legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem 0.75rem;
+    align-items: center;
+
+    margin: 0.375rem 0 0 1.875rem;
+
+    font-size: 0.75rem;
+    font-variant-numeric: tabular-nums;
     color: var(--color-text-secondary);
-    text-align: left;
+  }
+
+  .key {
+    display: inline-flex;
+    gap: 0.375rem;
+    align-items: center;
+  }
+
+  .scale {
+    width: 2.5rem;
+    height: 0.625rem;
+    border-radius: 2px;
+    background: linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--color-primary) 18%, transparent),
+      var(--color-primary)
+    );
+  }
+
+  .swatch {
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: 2px;
+
+    &.zero {
+      background-color: rgba(var(--color-text-secondary-rgb), 0.12);
+    }
+
+    &.empty {
+      background: repeating-linear-gradient(
+        135deg,
+        rgba(var(--color-text-secondary-rgb), 0.45) 0 1px,
+        transparent 1px 3px
+      );
+    }
   }
 </style>
diff --git a/frontend/src/lib/components/presence/PresenceSessions.svelte b/frontend/src/lib/components/presence/PresenceSessions.svelte
new file mode 100644
index 0000000..4632efb
--- /dev/null
+++ b/frontend/src/lib/components/presence/PresenceSessions.svelte
@@ -0,0 +1,205 @@
+<script lang="ts">
+  import { getPresenceSessions } from "#lib/api/endpoints.js";
+  import type { PresenceSession } from "#lib/api/types.js";
+  import Button from "#lib/components/ui/Button.svelte";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { formatLongDay, formatTime } from "#lib/format/datetime.js";
+  import { formatSpan } from "#lib/format/presence.js";
+
+  interface Props {
+    days: number;
+    first: PresenceSession[];
+    pageSize: number;
+    peerId: number;
+    tz: string;
+  }
+
+  const { days, first, pageSize, peerId, tz }: Props = $props();
+
+  const TEXT = {
+    failed: "Не удалось загрузить сессии.",
+    more: "Показать ещё",
+    none: "За этот период в сети не был(а).",
+    now: "в сети",
+    retry: "Повторить",
+    since: (time: string) => `с ${time}`,
+    span: (from: string, to: string) => (from === to ? from : `${from}–${to}`),
+    today: "Сегодня",
+    yesterday: "Вчера",
+  };
+
+  const MS_IN_DAY = 86_400_000;
+
+  let extra = $state<PresenceSession[]>([]);
+  let loading = $state(false);
+  let failed = $state(false);
+  let done = $state(false);
+
+  const sessions = $derived([...first, ...extra]);
+  const exhausted = $derived(done || first.length < pageSize);
+  const groups = $derived.by(() => {
+    const result: { label: string; sessions: PresenceSession[] }[] = [];
+    for (const session of sessions) {
+      const label = dayLabel(new Date(session.started));
+      const last = result.at(-1);
+      if (last?.label === label) {
+        last.sessions.push(session);
+      } else {
+        result.push({ label, sessions: [session] });
+      }
+    }
+    return result;
+  });
+
+  function dayLabel(date: Date): string {
+    const today = new Date();
+    if (date.toDateString() === today.toDateString()) {
+      return TEXT.today;
+    }
+    if (
+      date.toDateString() ===
+      new Date(today.getTime() - MS_IN_DAY).toDateString()
+    ) {
+      return TEXT.yesterday;
+    }
+    const text = formatLongDay(date);
+    return text.charAt(0).toUpperCase() + text.slice(1);
+  }
+
+  async function loadMore() {
+    if (loading) {
+      return;
+    }
+    loading = true;
+    failed = false;
+    try {
+      const batch = await getPresenceSessions(peerId, days, tz, {
+        limit: pageSize,
+        offset: sessions.length,
+      });
+      const seen = new Set(sessions.map((session) => session.started));
+      extra = [
+        ...extra,
+        ...batch.filter((session) => !seen.has(session.started)),
+      ];
+      done = batch.length < pageSize;
+    } catch {
+      failed = true;
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+{#if sessions.length === 0}
+  <p class="state">{TEXT.none}</p>
+{:else}
+  {#each groups as group (group.label)}
+    <h4 class="day">{group.label}</h4>
+    <ul>
+      {#each group.sessions as session (session.started)}
+        <li>
+          <span>
+            {session.ongoing
+              ? TEXT.since(formatTime(session.started))
+              : TEXT.span(
+                  formatTime(session.started),
+                  formatTime(session.ended)
+                )}
+          </span>
+          <span class={["length", { online: session.ongoing }]}>
+            {session.ongoing ? TEXT.now : formatSpan(session.seconds)}
+          </span>
+        </li>
+      {/each}
+    </ul>
+  {/each}
+  {#if loading}
+    <div class="state"><Spinner /></div>
+  {:else if failed}
+    <div class="state">
+      <p>{TEXT.failed}</p>
+      <Button onclick={loadMore} smaller variant="text">{TEXT.retry}</Button>
+    </div>
+  {:else if !exhausted}
+    <button class="more" onclick={loadMore} type="button">{TEXT.more}</button>
+  {/if}
+{/if}
+
+<style lang="scss">
+  .day {
+    margin: 0;
+    padding: 0.625rem 1rem 0.25rem;
+
+    font-size: 0.8125rem;
+    font-weight: var(--font-weight-normal);
+    color: var(--color-text-secondary);
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  li {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    justify-content: space-between;
+
+    min-height: 2.5rem;
+    padding: 0 1rem;
+
+    font-size: 0.9375rem;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .length {
+    font-size: 0.875rem;
+    color: var(--color-text-secondary);
+
+    &.online {
+      color: var(--color-primary);
+    }
+  }
+
+  .state {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    align-items: center;
+
+    margin: 0;
+    padding: 1.5rem 1rem;
+
+    font-size: 0.9375rem;
+    color: var(--color-text-secondary);
+    text-align: center;
+
+    p {
+      margin: 0;
+    }
+  }
+
+  .more {
+    cursor: pointer;
+
+    width: calc(100% - 1rem);
+    margin: 0.5rem;
+    padding: 0.5rem;
+    border: 0;
+    border-radius: 0.5rem;
+
+    font: inherit;
+    font-size: 0.875rem;
+    color: var(--color-primary);
+
+    background-color: var(--color-background-secondary);
+
+    &:focus-visible {
+      outline: 2px solid var(--color-primary);
+      outline-offset: 1px;
+    }
+  }
+</style>
diff --git a/frontend/src/lib/components/presence/VolumeChart.svelte b/frontend/src/lib/components/presence/VolumeChart.svelte
index 7110e36..ab7cf13 100644
--- a/frontend/src/lib/components/presence/VolumeChart.svelte
+++ b/frontend/src/lib/components/presence/VolumeChart.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { VolumeBucket } from "#lib/api/types.js";
+  import { formatDay, parseDay } from "#lib/format/datetime.js";
 
   interface Props {
     volume: VolumeBucket[];
@@ -7,47 +8,104 @@
 
   const { volume }: Props = $props();
 
-  const max = $derived(Math.max(1, ...volume.map((bucket) => bucket.total)));
+  const TEXT = {
+    bar: (day: string, bucket: VolumeBucket) =>
+      bucket.total === 0
+        ? `${day}, нет сообщений`
+        : `${day}, всего ${bucket.total}: входящих ${bucket.incoming}, моих ${bucket.outgoing}`,
+    incoming: "входящие",
+    outgoing: "мои",
+    today: "сегодня",
+  };
 
-  function barTitle(bucket: VolumeBucket): string {
-    return `${bucket.bucket.slice(0, 10)} — всего ${bucket.total} (вх ${bucket.incoming} / исх ${bucket.outgoing})`;
+  const peak = $derived(Math.max(1, ...volume.map((bucket) => bucket.total)));
+  const first = $derived(volume[0]);
+
+  function label(day: string): string {
+    return formatDay(parseDay(day).toISOString());
   }
 </script>
 
 <div class="volume">
-  <div class="bars">
-    {#each volume as bucket (bucket.bucket)}
-      <div
-        class="bar"
-        title={barTitle(bucket)}
-        style:height={`${(bucket.total / max) * 100}%`}
-      >
-        <div class="seg out" style:flex-grow={bucket.outgoing}></div>
-        <div class="seg in" style:flex-grow={bucket.incoming}></div>
-      </div>
-    {/each}
+  <div class="chart">
+    <span class="peak">{peak}</span>
+    <div class={["bars", { dense: volume.length > 45 }]}>
+      {#each volume as bucket (bucket.bucket)}
+        <div class="slot" title={TEXT.bar(label(bucket.bucket), bucket)}>
+          <div
+            class={["bar", { zero: bucket.total === 0 }]}
+            style:height="{(bucket.total / peak) * 100}%"
+          >
+            <div class="seg in" style:flex-grow={bucket.incoming}></div>
+            <div class="seg out" style:flex-grow={bucket.outgoing}></div>
+          </div>
+        </div>
+      {/each}
+    </div>
   </div>
+  {#if first}
+    <div class="axis">
+      <span>{label(first.bucket)}</span>
+      <span>{TEXT.today}</span>
+    </div>
+  {/if}
   <div class="legend">
-    <span class="key"><span class="swatch out"></span>исходящие</span>
-    <span class="key"><span class="swatch in"></span>входящие</span>
+    <span class="key"><span class="swatch in"></span>{TEXT.incoming}</span>
+    <span class="key"><span class="swatch out"></span>{TEXT.outgoing}</span>
   </div>
 </div>
 
 <style lang="scss">
+  .volume {
+    padding: 0 1rem;
+  }
+
+  .chart {
+    position: relative;
+    padding-top: 1.125rem;
+    border-top: 1px dashed var(--color-borders);
+  }
+
+  .peak {
+    position: absolute;
+    top: 0.125rem;
+    left: 0;
+
+    font-size: 0.6875rem;
+    font-variant-numeric: tabular-nums;
+    color: var(--color-text-secondary);
+  }
+
   .bars {
     display: flex;
+    gap: 3px;
     align-items: flex-end;
-    gap: 1px;
-    height: 7.5rem;
+    height: 6rem;
+
+    &.dense {
+      gap: 1px;
+    }
+  }
+
+  .slot {
+    display: flex;
+    flex: 1;
+    align-items: flex-end;
+    height: 100%;
   }
 
   .bar {
     display: flex;
-    flex: 1;
     flex-direction: column;
+
+    width: 100%;
     min-height: 2px;
     overflow: hidden;
     border-radius: 2px 2px 0 0;
+
+    &.zero {
+      background-color: rgba(var(--color-text-secondary-rgb), 0.3);
+    }
   }
 
   .seg.out {
@@ -55,8 +113,18 @@
   }
 
   .seg.in {
-    background-color: var(--color-text-secondary);
-    opacity: 0.4;
+    background-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
+  }
+
+  .axis {
+    display: flex;
+    justify-content: space-between;
+
+    margin-top: 0.375rem;
+
+    font-size: 0.6875rem;
+    font-variant-numeric: tabular-nums;
+    color: var(--color-text-secondary);
   }
 
   .legend {
@@ -69,8 +137,8 @@
 
   .key {
     display: flex;
-    align-items: center;
     gap: 0.375rem;
+    align-items: center;
   }
 
   .swatch {
@@ -83,8 +151,11 @@
     }
 
     &.in {
-      background-color: var(--color-text-secondary);
-      opacity: 0.4;
+      background-color: color-mix(
+        in srgb,
+        var(--color-primary) 40%,
+        transparent
+      );
     }
   }
 </style>
diff --git a/frontend/src/lib/format/datetime.ts b/frontend/src/lib/format/datetime.ts
index a5c1551..ba5cb9f 100644
--- a/frontend/src/lib/format/datetime.ts
+++ b/frontend/src/lib/format/datetime.ts
@@ -9,19 +9,25 @@ const OPTIONS = {
     month: "short",
     year: "numeric",
   },
+  longDay: { day: "numeric", month: "long", weekday: "long" },
+  offset: { timeZoneName: "shortOffset" },
   time: { hour: "2-digit", minute: "2-digit" },
 } satisfies Record<string, Intl.DateTimeFormatOptions>;
 
 const formatters = new Map<string, Intl.DateTimeFormat>();
 
-function format(kind: keyof typeof OPTIONS, date: Date): string {
+function formatter(kind: keyof typeof OPTIONS): Intl.DateTimeFormat {
   const key = `${locale.tag}:${kind}`;
-  let formatter = formatters.get(key);
-  if (!formatter) {
-    formatter = new Intl.DateTimeFormat(locale.tag, OPTIONS[kind]);
-    formatters.set(key, formatter);
+  let cached = formatters.get(key);
+  if (!cached) {
+    cached = new Intl.DateTimeFormat(locale.tag, OPTIONS[kind]);
+    formatters.set(key, cached);
   }
-  return formatter.format(date);
+  return cached;
+}
+
+function format(kind: keyof typeof OPTIONS, date: Date): string {
+  return formatter(kind).format(date);
 }
 
 export function formatTime(iso: string): string {
@@ -47,3 +53,24 @@ export function formatListDate(iso: string | null): string {
   }
   return format("day", date);
 }
+
+export function formatLongDay(date: Date): string {
+  return format("longDay", date);
+}
+
+export function parseDay(value: string): Date {
+  const [year, month, date] = value.split("-").map(Number);
+  return new Date(year ?? 0, (month ?? 1) - 1, date ?? 1);
+}
+
+export function browserTimeZone(): string {
+  return Intl.DateTimeFormat().resolvedOptions().timeZone;
+}
+
+export function timeZoneLabel(): string {
+  return (
+    formatter("offset")
+      .formatToParts(new Date())
+      .find((part) => part.type === "timeZoneName")?.value ?? browserTimeZone()
+  );
+}
diff --git a/frontend/src/lib/format/presence.ts b/frontend/src/lib/format/presence.ts
index 8f28586..b36d7b0 100644
--- a/frontend/src/lib/format/presence.ts
+++ b/frontend/src/lib/format/presence.ts
@@ -1,37 +1,117 @@
 import type { PresenceSample } from "#lib/api/types.js";
-import { formatListDate } from "#lib/format/datetime.js";
+import { formatDay, formatTime } from "#lib/format/datetime.js";
+import { plural } from "#lib/format/shares.js";
 
-export function isOnline(sample: PresenceSample | null): boolean {
-  if (sample === null || sample.status !== "online") {
+const SECONDS_IN_MINUTE = 60;
+const MINUTES_IN_HOUR = 60;
+const SECONDS_IN_HOUR = 3600;
+const MS_IN_MINUTE = 60_000;
+const SECONDS_IN_DAY = 86_400;
+const MS_IN_DAY = 86_400_000;
+
+const TEXT = {
+  ago: (minutes: number) =>
+    `был(а) ${minutes} ${plural(minutes, "минуту", "минуты", "минут")} назад`,
+  days: (days: number) => `${days} ${plural(days, "день", "дня", "дней")}`,
+  hours: (hours: number) => `${hours} ч`,
+  hoursMinutes: (hours: number, minutes: number) => `${hours} ч ${minutes} мин`,
+  justNow: "был(а) только что",
+  lastMonth: "был(а) в этом месяце",
+  lastWeek: "был(а) на этой неделе",
+  longAgo: "был(а) давно",
+  minutes: (minutes: number) => `${minutes} мин`,
+  offline: "не в сети",
+  on: (day: string, time: string) => `был(а) ${day} в ${time}`,
+  online: "в сети",
+  recently: "был(а) недавно",
+  seconds: (seconds: number) => `${seconds} с`,
+  today: (time: string) => `был(а) сегодня в ${time}`,
+  yesterday: (time: string) => `был(а) вчера в ${time}`,
+};
+
+const FUZZY: Record<string, string> = {
+  last_month: TEXT.lastMonth,
+  last_week: TEXT.lastWeek,
+  long_time_ago: TEXT.longAgo,
+  recently: TEXT.recently,
+};
+
+export function isOnline(
+  sample: PresenceSample | null,
+  now = Date.now()
+): boolean {
+  if (sample?.status !== "online" || sample.next_offline_date === null) {
     return false;
   }
-  if (sample.next_offline_date === null) {
-    return false;
-  }
-  return new Date(sample.next_offline_date).getTime() > Date.now();
+  return new Date(sample.next_offline_date).getTime() > now;
 }
 
-export function formatPresence(sample: PresenceSample): string {
-  switch (sample.status) {
-    case "online":
-      return isOnline(sample)
-        ? "online"
-        : lastSeen(sample.last_online_date ?? sample.ts);
-    case "recently":
-      return "last seen recently";
-    case "last_week":
-      return "last seen within a week";
-    case "last_month":
-      return "last seen within a month";
-    case "long_time_ago":
-      return "last seen a long time ago";
-    default:
-      return sample.last_online_date
-        ? lastSeen(sample.last_online_date)
-        : "offline";
+function lastSeen(iso: string, now: number): string {
+  const date = new Date(iso);
+  const minutes = Math.floor((now - date.getTime()) / MS_IN_MINUTE);
+  if (minutes < 1) {
+    return TEXT.justNow;
   }
+  if (minutes < MINUTES_IN_HOUR) {
+    return TEXT.ago(minutes);
+  }
+  const time = formatTime(iso);
+  const today = new Date(now);
+  if (date.toDateString() === today.toDateString()) {
+    return TEXT.today(time);
+  }
+  if (date.toDateString() === new Date(now - MS_IN_DAY).toDateString()) {
+    return TEXT.yesterday(time);
+  }
+  return TEXT.on(formatDay(iso), time);
 }
 
-function lastSeen(date: string): string {
-  return `last seen ${formatListDate(date)}`;
+export function formatPresence(
+  sample: PresenceSample,
+  now = Date.now()
+): string {
+  if (sample.status === "online") {
+    return isOnline(sample, now)
+      ? TEXT.online
+      : lastSeen(sample.next_offline_date ?? sample.ts, now);
+  }
+  const fuzzy = FUZZY[sample.status];
+  if (fuzzy) {
+    return fuzzy;
+  }
+  return sample.last_online_date
+    ? lastSeen(sample.last_online_date, now)
+    : TEXT.offline;
+}
+
+export function formatSpan(seconds: number): string {
+  if (seconds < SECONDS_IN_MINUTE) {
+    return TEXT.seconds(Math.round(seconds));
+  }
+  const minutes = Math.round(seconds / SECONDS_IN_MINUTE);
+  if (minutes < MINUTES_IN_HOUR) {
+    return TEXT.minutes(minutes);
+  }
+  const hours = Math.floor(minutes / MINUTES_IN_HOUR);
+  const rest = minutes % MINUTES_IN_HOUR;
+  return rest === 0 ? TEXT.hours(hours) : TEXT.hoursMinutes(hours, rest);
+}
+
+export function formatClock(secondsOfDay: number): string {
+  const hours = Math.floor(secondsOfDay / SECONDS_IN_HOUR);
+  const minutes = Math.floor(
+    (secondsOfDay % SECONDS_IN_HOUR) / SECONDS_IN_MINUTE
+  );
+  return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+}
+
+export function formatLongSpan(seconds: number): string {
+  if (seconds < 2 * SECONDS_IN_DAY) {
+    return formatSpan(seconds);
+  }
+  const days = Math.floor(seconds / SECONDS_IN_DAY);
+  const hours = Math.round((seconds % SECONDS_IN_DAY) / SECONDS_IN_HOUR);
+  return hours === 0
+    ? TEXT.days(days)
+    : `${TEXT.days(days)} ${TEXT.hours(hours)}`;
 }
diff --git a/frontend/src/lib/stores/presence.svelte.ts b/frontend/src/lib/stores/presence.svelte.ts
new file mode 100644
index 0000000..b8fb888
--- /dev/null
+++ b/frontend/src/lib/stores/presence.svelte.ts
@@ -0,0 +1,73 @@
+import { getCurrentPresence } from "#lib/api/endpoints.js";
+import type { PresenceSample } from "#lib/api/types.js";
+import { events } from "#lib/stores/events.svelte.js";
+
+const CLOCK_INTERVAL = 30_000;
+
+function createPresence() {
+  let peerId: number | null = null;
+  let key: string | null = null;
+  let sample = $state<PresenceSample | null>(null);
+  let now = $state(Date.now());
+  let clock: ReturnType<typeof setInterval> | undefined;
+  let token = 0;
+
+  async function refresh() {
+    const id = peerId;
+    token += 1;
+    const current = token;
+    if (id === null) {
+      return;
+    }
+    try {
+      const next = await getCurrentPresence(id);
+      if (current === token) {
+        sample = next;
+        now = Date.now();
+      }
+    } catch {
+      if (current === token) {
+        sample = null;
+      }
+    }
+  }
+
+  events.subscribe((event) => {
+    if (event.type === "presence" && event.peer_id === peerId) {
+      token += 1;
+      ({ sample } = event);
+      now = Date.now();
+    }
+  });
+  events.onReconnect(() => {
+    refresh();
+  });
+
+  return {
+    follow(accountId: number | null, id: number | null) {
+      const next =
+        accountId === null || id === null ? null : `${accountId}:${id}`;
+      if (next === key) {
+        return;
+      }
+      key = next;
+      peerId = next === null ? null : id;
+      sample = null;
+      clearInterval(clock);
+      if (peerId !== null) {
+        clock = setInterval(() => {
+          now = Date.now();
+        }, CLOCK_INTERVAL);
+        refresh();
+      }
+    },
+    get now(): number {
+      return now;
+    },
+    get sample(): PresenceSample | null {
+      return sample;
+    },
+  };
+}
+
+export const presence = createPresence();