+ (`/status${qs ? '?' + qs : ''}`);
- } catch (err: any) {
- error = err.message || t('common.error');
+ } catch (err: unknown) {
+ error = err instanceof Error ? err.message : t('common.error');
} finally {
eventsLoading = false;
}
@@ -176,35 +180,104 @@
animateCount(0, status.command_trackers, (v) => displayCommandTrackers = v);
}
}, 200);
- } catch (err: any) {
- error = err.message || t('common.error');
+ } catch (err: unknown) {
+ error = err instanceof Error ? err.message : t('common.error');
} finally {
loaded = true;
}
}
- let displayCommandTrackers = $state(0);
-
const filteredProviderCount = $derived(globalProviderFilter.providerType
? providers.filter(p => p.type === globalProviderFilter.providerType).length
: displayProviders);
- const providerCard = $derived.by(() => {
- const gp = globalProviderFilter.provider;
- if (gp) {
- const desc = getDescriptor(gp.type);
- return { icon: providerDefaultIcon(gp), label: '', literalLabel: desc?.defaultName ?? gp.type, value: 0, literalValue: gp.name, color: '#0d9488' };
+ // === Provider deck — derive activity counts from recent events ===
+ const providerEventCounts = $derived.by(() => {
+ const counts = new Map();
+ if (!status) return counts;
+ for (const ev of status.recent_events) {
+ const k = ev.provider_name || '';
+ if (!k) continue;
+ counts.set(k, (counts.get(k) || 0) + (ev.assets_count || 1));
}
- return { icon: 'mdiServer', label: 'dashboard.providers', value: filteredProviderCount, color: '#0d9488' };
+ return counts;
+ });
+ const providerDeck = $derived.by(() => {
+ const max = Math.max(1, ...Array.from(providerEventCounts.values()));
+ return providers.map(p => {
+ const trackers = notificationTrackersCache.items.filter(t => t.provider_id === p.id);
+ const events = providerEventCounts.get(p.name) || 0;
+ return {
+ id: p.id,
+ name: p.name,
+ type: p.type,
+ icon: providerDefaultIcon(p),
+ trackerCount: trackers.length,
+ armedCount: trackers.filter(t => (t as { enabled?: boolean }).enabled !== false).length,
+ events,
+ share: events / max,
+ descriptor: getDescriptor(p.type),
+ };
+ }).sort((a, b) => b.events - a.events);
});
- interface StatCard { icon: string; label: string; literalLabel?: string; value: number; literalValue?: string; suffix?: string; color: string }
- const statCards = $derived(status ? [
- providerCard,
- { icon: 'mdiRadar', label: 'dashboard.activeTrackers', value: displayActive, suffix: ` / ${displayTotal}`, color: '#6366f1' },
- { icon: 'mdiTarget', label: 'dashboard.targets', value: displayTargets, color: '#f59e0b' },
- ...(status.command_trackers !== undefined ? [{ icon: 'mdiConsoleLine', label: 'nav.commandTrackers', value: displayCommandTrackers, color: '#8b5cf6' }] : []),
- ] : []);
+ // === Active wires — derive top tracker → target routes ===
+ const activeWires = $derived.by(() => {
+ const wires: Array<{
+ trackerName: string;
+ providerName: string;
+ providerType: string;
+ providerIcon: string;
+ targetName: string;
+ targetType: string;
+ targetIcon: string;
+ events: number;
+ }> = [];
+ const targetsById = new Map(targetsCache.items.map(tg => [tg.id, tg]));
+ const trackerEventCount = new Map();
+ if (status) {
+ for (const ev of status.recent_events) {
+ const k = ev.tracker_name || '';
+ if (!k) continue;
+ trackerEventCount.set(k, (trackerEventCount.get(k) || 0) + (ev.assets_count || 1));
+ }
+ }
+ for (const tracker of notificationTrackersCache.items) {
+ const provider = providers.find(p => p.id === tracker.provider_id);
+ if (!provider) continue;
+ const links = (tracker as { tracker_targets?: { target_id: number }[] }).tracker_targets || [];
+ for (const link of links) {
+ const target = targetsById.get(link.target_id);
+ if (!target) continue;
+ wires.push({
+ trackerName: tracker.name,
+ providerName: provider.name,
+ providerType: provider.type,
+ providerIcon: providerDefaultIcon(provider),
+ targetName: target.name,
+ targetType: target.type,
+ targetIcon: target.icon || `mdi${target.type[0].toUpperCase() + target.type.slice(1)}`,
+ events: trackerEventCount.get(tracker.name) || 0,
+ });
+ }
+ }
+ return wires.sort((a, b) => b.events - a.events).slice(0, 6);
+ });
+
+ // === Hero summary sentence === */
+ const heroSummary = $derived.by(() => {
+ if (!status) return null;
+ const failing = status.recent_events.filter(e => /fail|error/.test(e.event_type)).length;
+ return {
+ armed: status.trackers.active,
+ total: status.trackers.total,
+ providers: status.providers,
+ targets: status.targets,
+ throughput: status.total_events,
+ failing,
+ allOk: failing === 0,
+ };
+ });
function timeAgo(dateStr: string): string {
const diff = Date.now() - parseDate(dateStr).getTime();
@@ -216,6 +289,11 @@
return t('dashboard.daysAgo').replace('{n}', String(Math.floor(hours / 24)));
}
+ function timeShort(dateStr: string): string {
+ const d = parseDate(dateStr);
+ return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+ }
+
const eventLabels: Record = {
assets_added: 'dashboard.assetsAdded',
assets_removed: 'dashboard.assetsRemoved',
@@ -234,181 +312,523 @@
scheduled_message: 'mdiCalendarClock',
action_success: 'mdiPlayCircle', action_partial: 'mdiAlertCircle', action_failed: 'mdiCloseCircle',
};
- const eventColors: Record = {
- assets_added: '#059669', assets_removed: '#ef4444',
- collection_renamed: '#6366f1', collection_deleted: '#dc2626', sharing_changed: '#f59e0b',
- scheduled_message: '#8b5cf6',
- action_success: '#0d9488', action_partial: '#f59e0b', action_failed: '#dc2626',
+
+ // Aurora gradient palette per event type — used for the avatar tile
+ const eventGradients: Record = {
+ assets_added: ['var(--color-mint)', 'var(--color-sky)'],
+ assets_removed: ['var(--color-coral)', 'var(--color-orchid)'],
+ collection_renamed: ['var(--color-primary)', 'var(--color-orchid)'],
+ collection_deleted: ['var(--color-coral)', 'var(--color-citrus)'],
+ sharing_changed: ['var(--color-citrus)', 'var(--color-coral)'],
+ scheduled_message: ['var(--color-sky)', 'var(--color-mint)'],
+ action_success: ['var(--color-mint)', 'var(--color-primary)'],
+ action_partial: ['var(--color-citrus)', 'var(--color-orchid)'],
+ action_failed: ['var(--color-coral)', 'var(--color-orchid)'],
};
+ const STAT_ACCENTS = [
+ 'var(--color-primary)',
+ 'var(--color-sky)',
+ 'var(--color-citrus)',
+ 'var(--color-orchid)',
+ ];
-
+
{@render children()}
{/key}
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 389cd8e..f3e5ede 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -3,11 +3,14 @@
import { slide } from 'svelte/transition';
import { api, parseDate } from '$lib/api';
import { t } from '$lib/i18n';
- import { providersCache } from '$lib/stores/caches.svelte';
- import PageHeader from '$lib/components/PageHeader.svelte';
- import Card from '$lib/components/Card.svelte';
+ import {
+ providersCache,
+ notificationTrackersCache,
+ targetsCache,
+ } from '$lib/stores/caches.svelte';
import Loading from '$lib/components/Loading.svelte';
import MdiIcon from '$lib/components/MdiIcon.svelte';
+ import NavIcon from '$lib/components/NavIcon.svelte';
import EventChart from '$lib/components/EventChart.svelte';
import IconGridSelect from '$lib/components/IconGridSelect.svelte';
import ConfirmModal from '$lib/components/ConfirmModal.svelte';
@@ -39,6 +42,7 @@
let displayActive = $state(0);
let displayTotal = $state(0);
let displayTargets = $state(0);
+ let displayCommandTrackers = $state(0);
// Event filters
let filterEventType = $state('');
@@ -66,8 +70,8 @@
eventsOffset = 0;
await loadEvents();
await loadChart();
- } catch (err: any) {
- snackError(err.message || t('common.error'));
+ } catch (err: unknown) {
+ snackError(err instanceof Error ? err.message : t('common.error'));
} finally {
confirmClearEvents = false;
}
@@ -107,8 +111,8 @@
params.set('offset', String(eventsOffset));
const qs = params.toString();
status = await api{error}
- {#each statCards as card, i}
-
-
-
+
+
+
+ {#snippet statCardSnippet(card: {icon: string; label: string; literalLabel?: string; value: number; literalValue?: string; suffix?: string; accent: string}, idx: number)}
+
-
- {:else}
-
-
-
+{:else if status && heroSummary}
+
+
+
-
+ {card.literalLabel || t(card.label)}
-- {#if card.literalValue}{card.literalValue}{:else}{card.value}{/if}{#if card.suffix}{card.suffix}{/if} -
-
+
+
+
+ {t('dashboard.heroPrefix')} {t('dashboard.heroEmphasis')}
+
+
+ {t('dashboard.title')}
+ ·
+
+
+ {heroSummary.allOk ? t('dashboard.live') : t('dashboard.attention')}
+
+
+
+ {t('dashboard.heroPrefix')} {t('dashboard.heroEmphasis')}
+ {t('dashboard.heroSuffix')}
+
+ + {t('dashboard.heroSummary') + .replace('{providers}', String(heroSummary.providers)) + .replace('{armed}', String(heroSummary.armed)) + .replace('{total}', String(heroSummary.total)) + .replace('{throughput}', String(heroSummary.throughput)) + .replace('{targets}', String(heroSummary.targets))} +
+
+
+ {t('dashboard.throughput24h')}
+ {heroSummary.throughput.toLocaleString()}{t('dashboard.eventsShort')}
+
+ {heroSummary.armed}/{heroSummary.total} {t('dashboard.armedShort')}
+ {heroSummary.providers} {t('dashboard.providersShort')}
+ {heroSummary.targets} {t('dashboard.targetsShort')}
+
+
+
-
-
-
+
- {/each}
-
+
+
+
{card.literalLabel || t(card.label)}
++ {#if card.literalValue}{card.literalValue}{:else}{card.value}{/if}{#if card.suffix}{card.suffix}{/if} +
-
-
- {#if status.total_events > 0}
-
- {/if}
-
-
-
-
-
- {#if status.total_events > 0}
-
- {/if}
-
-
-
-
-
- {#if chartVisible}
-
-
-
-
-
- {/if}
-
- {#snippet paginator()}
-
- {#if totalPages > 1}
-
- {#each Array.from({ length: totalPages }, (_, i) => i + 1) as page}
- {#if page === 1 || page === totalPages || (page >= currentPage - 1 && page <= currentPage + 1)}
-
- {:else if page === currentPage - 2 || page === currentPage + 2}
- ...
- {/if}
- {/each}
-
- {/if}
-
{/snippet}
- {#if eventsLoading}
- {t('dashboard.loadingEvents')}
-
- {t('dashboard.noEvents')}
-
- {#each status.recent_events as event, i}
-
+
+
+ {#if chartVisible}
+
+
+
+ {#if activeWires.length > 0}
+
+
+
+
{/if}
+
+
+
+
{/if}
confirmClearEvents = false} />
-
- {#if i < status.recent_events.length - 1}{/if}
-
- {/each}
+ {#snippet statCards()}
+
-
-
-
- {#if event.provider_name || event.tracker_name}
-
-
-
- {timeAgo(event.created_at)}
-
- {#if event.provider_name}
-
- {/if}
-
+ {#if globalProviderFilter.provider}
+ {@render statCardSnippet({
+ icon: providerDefaultIcon(globalProviderFilter.provider),
+ label: '',
+ literalLabel: getDescriptor(globalProviderFilter.provider.type)?.defaultName ?? globalProviderFilter.provider.type,
+ value: 0,
+ literalValue: globalProviderFilter.provider.name,
+ accent: STAT_ACCENTS[0],
+ }, 0)}
+ {:else}
+ {@render statCardSnippet({
+ icon: 'mdiServer',
+ label: 'dashboard.providers',
+ value: filteredProviderCount,
+ accent: STAT_ACCENTS[0],
+ }, 0)}
+ {/if}
+ {@render statCardSnippet({
+ icon: 'mdiRadar',
+ label: 'dashboard.activeTrackers',
+ value: displayActive,
+ suffix: ` / ${displayTotal}`,
+ accent: STAT_ACCENTS[1],
+ }, 1)}
+ {@render statCardSnippet({
+ icon: 'mdiTarget',
+ label: 'dashboard.targets',
+ value: displayTargets,
+ accent: STAT_ACCENTS[2],
+ }, 2)}
+ {#if status?.command_trackers !== undefined}
+ {@render statCardSnippet({
+ icon: 'mdiConsoleLine',
+ label: 'nav.commandTrackers',
+ value: displayCommandTrackers,
+ accent: STAT_ACCENTS[3],
+ }, 3)}
+ {:else}
+ {@render statCardSnippet({
+ icon: 'mdiPulse',
+ label: 'dashboard.eventsTotal',
+ value: heroSummary?.throughput ?? 0,
+ accent: STAT_ACCENTS[3],
+ }, 3)}
+ {/if}
+ {/snippet}
+ {@render statCards()}
-
-
- {@render paginator()}
-
+
+
+
+
+
+
+
+
+ {:else if status.recent_events.length === 0}
+
+
+
+
+
+
+
+ {#if providerDeck.length === 0}
+
+ {:else}
+
+ {/if}
+
+
+
+
+
+
+ {#if status.total_events > 0}
+
+ {/if}
+ {t('dashboard.streamTitle')} {t('dashboard.streamEmphasis')}
+ +
+
+
+ {#snippet paginator()}
+
+
+
+
+ {#if totalPages > 1}
+
+ {#each Array.from({ length: totalPages }, (_, i) => i + 1) as p}
+ {#if p === 1 || p === totalPages || (p >= currentPage - 1 && p <= currentPage + 1)}
+
+ {:else if p === currentPage - 2 || p === currentPage + 2}
+ …
+ {/if}
+ {/each}
+
+ {/if}
+
+
+ {/snippet}
+
+ {#if eventsLoading}
+ {t('dashboard.loadingEvents')}
+
+ {:else}
+ {t('dashboard.noEvents')}
+
+ {#each status.recent_events as event, i}
+
+
+
+
+ {/each}
+
+
+
+
+
+ {event.collection_name}
+ {t(eventLabels[event.event_type] || event.event_type)}
+ {#if event.assets_count > 0}
+ {event.assets_count} {event.assets_count === 1 ? t('dashboard.asset') : t('dashboard.assets')}
+ {/if}
+
+ {#if event.provider_name || event.tracker_name}
+
+ {#if event.tracker_name}
+
+ {/if}
+
+ {timeShort(event.created_at)}
+ {timeAgo(event.created_at)}
+
+
+ {@render paginator()}
+
+ {/if}
+
+
+ {t('dashboard.onWatchTitle')} {t('dashboard.onWatchEmphasis')}
+ +
+
+
+ {t('dashboard.pulseTitle')} {t('dashboard.pulseEmphasis')}
+ +
+
+ {/if}
+
+
+ {t('dashboard.wiresTitle')} {t('dashboard.wiresEmphasis')}
+ +
+ {#each activeWires as wire}
+
+
+
+ {/each}
+
+
+
+
+ {wire.trackerName}
+ {wire.providerName}
+
+ {wire.events > 0 ? wire.events : '—'}
+
+
+
+
+
+ {wire.targetName}
+ {wire.targetType}
+
+
+
+ + {t('dashboard.composeTitle')} {t('dashboard.composeEmphasis')} +
+{t('dashboard.composeSub')}
+