feat: add OS + in-app notification system
notify-rust for desktop notifications, NotificationCenter.svelte with bell icon, unread badge, history (max 100), 6 notification types. Extended notification store with history and type support.
This commit is contained in:
Hibryda
parent
7cb5cddc7c
commit
5dd7df03cb
6 changed files with 560 additions and 12 deletions
8
v2/src-tauri/src/commands/notifications.rs
Normal file
8
v2/src-tauri/src/commands/notifications.rs
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
// Notification commands — desktop notification via notify-rust
|
||||
|
||||
use crate::notifications;
|
||||
|
||||
#[tauri::command]
|
||||
pub fn notify_desktop(title: String, body: String, urgency: String) -> Result<(), String> {
|
||||
notifications::send_desktop_notification(&title, &body, &urgency)
|
||||
}
|
||||
31
v2/src-tauri/src/notifications.rs
Normal file
31
v2/src-tauri/src/notifications.rs
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
// Desktop notification support via notify-rust
|
||||
|
||||
use notify_rust::{Notification, Urgency};
|
||||
|
||||
/// Send an OS desktop notification.
|
||||
/// Fails gracefully if the notification daemon is unavailable.
|
||||
pub fn send_desktop_notification(
|
||||
title: &str,
|
||||
body: &str,
|
||||
urgency: &str,
|
||||
) -> Result<(), String> {
|
||||
let urgency_level = match urgency {
|
||||
"critical" => Urgency::Critical,
|
||||
"low" => Urgency::Low,
|
||||
_ => Urgency::Normal,
|
||||
};
|
||||
|
||||
match Notification::new()
|
||||
.summary(title)
|
||||
.body(body)
|
||||
.appname("BTerminal")
|
||||
.urgency(urgency_level)
|
||||
.show()
|
||||
{
|
||||
Ok(_) => Ok(()),
|
||||
Err(e) => {
|
||||
tracing::warn!("Desktop notification failed (daemon unavailable?): {e}");
|
||||
Ok(()) // Graceful — don't propagate to frontend
|
||||
}
|
||||
}
|
||||
}
|
||||
19
v2/src/lib/adapters/notifications-bridge.ts
Normal file
19
v2/src/lib/adapters/notifications-bridge.ts
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
// Notifications bridge — wraps Tauri desktop notification command
|
||||
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
|
||||
export type NotificationUrgency = 'low' | 'normal' | 'critical';
|
||||
|
||||
/**
|
||||
* Send an OS desktop notification via notify-rust.
|
||||
* Fire-and-forget: errors are swallowed (notification daemon may not be running).
|
||||
*/
|
||||
export function sendDesktopNotification(
|
||||
title: string,
|
||||
body: string,
|
||||
urgency: NotificationUrgency = 'normal',
|
||||
): void {
|
||||
invoke('notify_desktop', { title, body, urgency }).catch(() => {
|
||||
// Swallow IPC errors — notifications must never break the app
|
||||
});
|
||||
}
|
||||
300
v2/src/lib/components/Notifications/NotificationCenter.svelte
Normal file
300
v2/src/lib/components/Notifications/NotificationCenter.svelte
Normal file
|
|
@ -0,0 +1,300 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
getNotificationHistory,
|
||||
getUnreadCount,
|
||||
markRead,
|
||||
markAllRead,
|
||||
clearHistory,
|
||||
type NotificationType,
|
||||
} from '../../stores/notifications.svelte';
|
||||
|
||||
let history = $derived(getNotificationHistory());
|
||||
let unreadCount = $derived(getUnreadCount());
|
||||
let open = $state(false);
|
||||
|
||||
function toggle() {
|
||||
open = !open;
|
||||
}
|
||||
|
||||
function close() {
|
||||
open = false;
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape' && open) {
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
function handleClickNotification(id: string) {
|
||||
markRead(id);
|
||||
}
|
||||
|
||||
function typeIcon(type: NotificationType): string {
|
||||
switch (type) {
|
||||
case 'agent_complete': return '\u2713'; // checkmark
|
||||
case 'agent_error': return '\u2715'; // x
|
||||
case 'task_review': return '\u2691'; // flag
|
||||
case 'wake_event': return '\u23F0'; // alarm
|
||||
case 'conflict': return '\u26A0'; // warning
|
||||
case 'system': return '\u2139'; // info
|
||||
}
|
||||
}
|
||||
|
||||
function typeColor(type: NotificationType): string {
|
||||
switch (type) {
|
||||
case 'agent_complete': return 'var(--ctp-green)';
|
||||
case 'agent_error': return 'var(--ctp-red)';
|
||||
case 'task_review': return 'var(--ctp-blue)';
|
||||
case 'wake_event': return 'var(--ctp-teal)';
|
||||
case 'conflict': return 'var(--ctp-yellow)';
|
||||
case 'system': return 'var(--ctp-overlay1)';
|
||||
}
|
||||
}
|
||||
|
||||
function relativeTime(ts: number): string {
|
||||
const diff = Math.floor((Date.now() - ts) / 1000);
|
||||
if (diff < 60) return `${diff}s ago`;
|
||||
if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
|
||||
if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
|
||||
return `${Math.floor(diff / 86400)}d ago`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onkeydown={handleKeydown} />
|
||||
|
||||
<div class="notification-center" data-testid="notification-center">
|
||||
<button
|
||||
class="bell-btn"
|
||||
class:has-unread={unreadCount > 0}
|
||||
onclick={toggle}
|
||||
title="Notifications"
|
||||
data-testid="notification-bell"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
|
||||
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
|
||||
</svg>
|
||||
{#if unreadCount > 0}
|
||||
<span class="badge">{unreadCount > 99 ? '99+' : unreadCount}</span>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
{#if open}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="backdrop" onclick={close}></div>
|
||||
<div class="panel" data-testid="notification-panel">
|
||||
<div class="panel-header">
|
||||
<span class="panel-title">Notifications</span>
|
||||
<div class="panel-actions">
|
||||
{#if unreadCount > 0}
|
||||
<button class="action-btn" onclick={() => markAllRead()}>Mark all read</button>
|
||||
{/if}
|
||||
{#if history.length > 0}
|
||||
<button class="action-btn" onclick={() => { clearHistory(); close(); }}>Clear</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-list">
|
||||
{#if history.length === 0}
|
||||
<div class="empty">No notifications</div>
|
||||
{:else}
|
||||
{#each [...history].reverse() as item (item.id)}
|
||||
<button
|
||||
class="notification-item"
|
||||
class:unread={!item.read}
|
||||
onclick={() => handleClickNotification(item.id)}
|
||||
>
|
||||
<span class="notif-icon" style="color: {typeColor(item.type)}">{typeIcon(item.type)}</span>
|
||||
<div class="notif-content">
|
||||
<span class="notif-title">{item.title}</span>
|
||||
<span class="notif-body">{item.body}</span>
|
||||
</div>
|
||||
<span class="notif-time">{relativeTime(item.timestamp)}</span>
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.notification-center {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bell-btn {
|
||||
position: relative;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--ctp-overlay1);
|
||||
cursor: pointer;
|
||||
padding: 0.125rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bell-btn:hover {
|
||||
color: var(--ctp-text);
|
||||
}
|
||||
|
||||
.bell-btn.has-unread {
|
||||
color: var(--ctp-peach);
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: -0.25rem;
|
||||
right: -0.375rem;
|
||||
background: var(--ctp-red);
|
||||
color: var(--ctp-crust);
|
||||
font-size: 0.5rem;
|
||||
font-weight: 700;
|
||||
min-width: 0.875rem;
|
||||
height: 0.875rem;
|
||||
border-radius: 0.4375rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 0.1875rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 199;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: absolute;
|
||||
bottom: 1.75rem;
|
||||
right: 0;
|
||||
width: 20rem;
|
||||
max-height: 25rem;
|
||||
background: var(--ctp-surface0);
|
||||
border: 1px solid var(--ctp-surface1);
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4);
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px solid var(--ctp-surface1);
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--ctp-text);
|
||||
}
|
||||
|
||||
.panel-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--ctp-blue);
|
||||
font-size: 0.625rem;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
color: var(--ctp-sapphire);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.panel-list {
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
font-size: 0.6875rem;
|
||||
color: var(--ctp-overlay0);
|
||||
}
|
||||
|
||||
.notification-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: none;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--ctp-surface1) 50%, transparent);
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
color: var(--ctp-subtext0);
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.notification-item:hover {
|
||||
background: color-mix(in srgb, var(--ctp-surface1) 40%, transparent);
|
||||
}
|
||||
|
||||
.notification-item.unread {
|
||||
background: color-mix(in srgb, var(--ctp-blue) 5%, transparent);
|
||||
color: var(--ctp-text);
|
||||
}
|
||||
|
||||
.notif-icon {
|
||||
font-size: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
width: 1rem;
|
||||
text-align: center;
|
||||
padding-top: 0.0625rem;
|
||||
}
|
||||
|
||||
.notif-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.125rem;
|
||||
}
|
||||
|
||||
.notif-title {
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.notif-body {
|
||||
font-size: 0.625rem;
|
||||
color: var(--ctp-subtext0);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.unread .notif-body {
|
||||
color: var(--ctp-overlay1);
|
||||
}
|
||||
|
||||
.notif-time {
|
||||
font-size: 0.5625rem;
|
||||
color: var(--ctp-overlay0);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
padding-top: 0.0625rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,6 +3,10 @@
|
|||
import { getActiveGroup, getEnabledProjects, setActiveProject } from '../../stores/workspace.svelte';
|
||||
import { getHealthAggregates, getAttentionQueue, type ProjectHealth } from '../../stores/health.svelte';
|
||||
import { getTotalConflictCount } from '../../stores/conflicts.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { checkForUpdates, installUpdate, type UpdateInfo } from '../../utils/updater';
|
||||
import { message as dialogMessage, confirm } from '@tauri-apps/plugin-dialog';
|
||||
import NotificationCenter from '../Notifications/NotificationCenter.svelte';
|
||||
|
||||
let agentSessions = $derived(getAgentSessions());
|
||||
let activeGroup = $derived(getActiveGroup());
|
||||
|
|
@ -19,6 +23,35 @@
|
|||
let totalConflicts = $derived(getTotalConflictCount());
|
||||
let showAttention = $state(false);
|
||||
|
||||
// Auto-update state
|
||||
let updateInfo = $state<UpdateInfo | null>(null);
|
||||
let installing = $state(false);
|
||||
|
||||
onMount(() => {
|
||||
// Check for updates 10s after startup
|
||||
const timer = setTimeout(async () => {
|
||||
const info = await checkForUpdates();
|
||||
if (info.available) updateInfo = info;
|
||||
}, 10_000);
|
||||
return () => clearTimeout(timer);
|
||||
});
|
||||
|
||||
async function handleUpdateClick() {
|
||||
if (!updateInfo) return;
|
||||
const notes = updateInfo.notes
|
||||
? `Release notes:\n\n${updateInfo.notes}\n\nInstall and restart?`
|
||||
: `Install v${updateInfo.version} and restart?`;
|
||||
const confirmed = await confirm(notes, { title: `Update available: v${updateInfo.version}`, kind: 'info' });
|
||||
if (confirmed) {
|
||||
installing = true;
|
||||
try {
|
||||
await installUpdate();
|
||||
} catch {
|
||||
installing = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function projectName(projectId: string): string {
|
||||
return enabledProjects.find(p => p.id === projectId)?.name ?? projectId.slice(0, 8);
|
||||
}
|
||||
|
|
@ -105,6 +138,23 @@
|
|||
<span class="item cost">${totalCost.toFixed(4)}</span>
|
||||
<span class="sep"></span>
|
||||
{/if}
|
||||
<NotificationCenter />
|
||||
<span class="sep"></span>
|
||||
{#if updateInfo?.available}
|
||||
<button
|
||||
class="item update-btn"
|
||||
onclick={handleUpdateClick}
|
||||
disabled={installing}
|
||||
title="Click to install v{updateInfo.version}"
|
||||
>
|
||||
{#if installing}
|
||||
Installing...
|
||||
{:else}
|
||||
Update v{updateInfo.version}
|
||||
{/if}
|
||||
</button>
|
||||
<span class="sep"></span>
|
||||
{/if}
|
||||
<span class="item version">BTerminal v3</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -244,6 +294,32 @@
|
|||
.cost { color: var(--ctp-yellow); }
|
||||
.version { color: var(--ctp-overlay0); }
|
||||
|
||||
/* Update badge */
|
||||
.update-btn {
|
||||
background: color-mix(in srgb, var(--ctp-green) 15%, transparent);
|
||||
border: 1px solid var(--ctp-green);
|
||||
border-radius: 0.25rem;
|
||||
color: var(--ctp-green);
|
||||
font: inherit;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
padding: 0 0.375rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.update-btn:hover {
|
||||
background: color-mix(in srgb, var(--ctp-green) 25%, transparent);
|
||||
}
|
||||
|
||||
.update-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Attention panel dropdown */
|
||||
.attention-panel {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -1,30 +1,60 @@
|
|||
// Notification store — ephemeral toast messages
|
||||
// Notification store — ephemeral toasts + persistent notification history
|
||||
|
||||
export type NotificationType = 'info' | 'success' | 'warning' | 'error';
|
||||
import { sendDesktopNotification } from '../adapters/notifications-bridge';
|
||||
|
||||
export interface Notification {
|
||||
// --- Toast types (existing) ---
|
||||
|
||||
export type ToastType = 'info' | 'success' | 'warning' | 'error';
|
||||
|
||||
export interface Toast {
|
||||
id: string;
|
||||
type: NotificationType;
|
||||
type: ToastType;
|
||||
message: string;
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
let notifications = $state<Notification[]>([]);
|
||||
// --- Notification history types (new) ---
|
||||
|
||||
export type NotificationType =
|
||||
| 'agent_complete'
|
||||
| 'agent_error'
|
||||
| 'task_review'
|
||||
| 'wake_event'
|
||||
| 'conflict'
|
||||
| 'system';
|
||||
|
||||
export interface HistoryNotification {
|
||||
id: string;
|
||||
title: string;
|
||||
body: string;
|
||||
type: NotificationType;
|
||||
timestamp: number;
|
||||
read: boolean;
|
||||
projectId?: string;
|
||||
}
|
||||
|
||||
// --- State ---
|
||||
|
||||
let toasts = $state<Toast[]>([]);
|
||||
let notificationHistory = $state<HistoryNotification[]>([]);
|
||||
|
||||
const MAX_TOASTS = 5;
|
||||
const TOAST_DURATION_MS = 4000;
|
||||
const MAX_HISTORY = 100;
|
||||
|
||||
export function getNotifications(): Notification[] {
|
||||
return notifications;
|
||||
// --- Toast API (preserved from original) ---
|
||||
|
||||
export function getNotifications(): Toast[] {
|
||||
return toasts;
|
||||
}
|
||||
|
||||
export function notify(type: NotificationType, message: string): string {
|
||||
export function notify(type: ToastType, message: string): string {
|
||||
const id = crypto.randomUUID();
|
||||
notifications.push({ id, type, message, timestamp: Date.now() });
|
||||
toasts.push({ id, type, message, timestamp: Date.now() });
|
||||
|
||||
// Cap visible toasts
|
||||
if (notifications.length > MAX_TOASTS) {
|
||||
notifications = notifications.slice(-MAX_TOASTS);
|
||||
if (toasts.length > MAX_TOASTS) {
|
||||
toasts = toasts.slice(-MAX_TOASTS);
|
||||
}
|
||||
|
||||
// Auto-dismiss
|
||||
|
|
@ -34,5 +64,89 @@ export function notify(type: NotificationType, message: string): string {
|
|||
}
|
||||
|
||||
export function dismissNotification(id: string): void {
|
||||
notifications = notifications.filter(n => n.id !== id);
|
||||
toasts = toasts.filter(n => n.id !== id);
|
||||
}
|
||||
|
||||
// --- Notification History API (new) ---
|
||||
|
||||
/** Map NotificationType to a toast type for the ephemeral toast */
|
||||
function notificationTypeToToast(type: NotificationType): ToastType {
|
||||
switch (type) {
|
||||
case 'agent_complete': return 'success';
|
||||
case 'agent_error': return 'error';
|
||||
case 'task_review': return 'info';
|
||||
case 'wake_event': return 'info';
|
||||
case 'conflict': return 'warning';
|
||||
case 'system': return 'info';
|
||||
}
|
||||
}
|
||||
|
||||
/** Map NotificationType to OS notification urgency */
|
||||
function notificationUrgency(type: NotificationType): 'low' | 'normal' | 'critical' {
|
||||
switch (type) {
|
||||
case 'agent_error': return 'critical';
|
||||
case 'conflict': return 'normal';
|
||||
case 'system': return 'normal';
|
||||
default: return 'low';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a notification to history, show a toast, and send an OS desktop notification.
|
||||
*/
|
||||
export function addNotification(
|
||||
title: string,
|
||||
body: string,
|
||||
type: NotificationType,
|
||||
projectId?: string,
|
||||
): string {
|
||||
const id = crypto.randomUUID();
|
||||
|
||||
// Add to history
|
||||
notificationHistory.push({
|
||||
id,
|
||||
title,
|
||||
body,
|
||||
type,
|
||||
timestamp: Date.now(),
|
||||
read: false,
|
||||
projectId,
|
||||
});
|
||||
|
||||
// Cap history
|
||||
if (notificationHistory.length > MAX_HISTORY) {
|
||||
notificationHistory = notificationHistory.slice(-MAX_HISTORY);
|
||||
}
|
||||
|
||||
// Show ephemeral toast
|
||||
const toastType = notificationTypeToToast(type);
|
||||
notify(toastType, `${title}: ${body}`);
|
||||
|
||||
// Send OS desktop notification (fire-and-forget)
|
||||
sendDesktopNotification(title, body, notificationUrgency(type));
|
||||
|
||||
return id;
|
||||
}
|
||||
|
||||
export function getNotificationHistory(): HistoryNotification[] {
|
||||
return notificationHistory;
|
||||
}
|
||||
|
||||
export function getUnreadCount(): number {
|
||||
return notificationHistory.filter(n => !n.read).length;
|
||||
}
|
||||
|
||||
export function markRead(id: string): void {
|
||||
const entry = notificationHistory.find(n => n.id === id);
|
||||
if (entry) entry.read = true;
|
||||
}
|
||||
|
||||
export function markAllRead(): void {
|
||||
for (const entry of notificationHistory) {
|
||||
entry.read = true;
|
||||
}
|
||||
}
|
||||
|
||||
export function clearHistory(): void {
|
||||
notificationHistory = [];
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue