progress.txt

# PROJECT CONTEXT
Project: syncfu (notification-shell)
Repo: /Users/sujith/work/2026/reminders/notification-shell
Branch: main
Stack: Tauri v2 + Rust + React + TypeScript + Vite
Purpose: Universal overlay notification system for AI agents, skills, autonomous loops, and background processes.
Brand: syncfu.dev (open source)
User context: ADHD — needs push-based notifications, doesn't go back to read terminal output.

# COMPLETED WORK

## Phase 0: Planning & Documentation
- [x] PLAN.md — full architecture, project structure, all 6 phases, verification plan
- [x] README.md — open source readme with 15+ use case categories, API docs, CLI examples, integrations
- [x] ARCHITECTURE-COMPARISON.md — analysis of 4 reference apps (Handy, Cap, Meetily, tauri-plugin-liquid-glass)
- [x] Confirmed decisions: HTTP REST :9868, WebSocket :9869, NSPanel on macOS, WebviewWindow on Windows

## Phase 1: Scaffold + TDD Foundation (COMPLETE)
- [x] Tauri v2 project scaffolded (Cargo.toml, tauri.conf.json, build.rs)
- [x] React + Vite frontend with TypeScript
- [x] Vitest test setup with Tauri API mocks
- [x] .gitignore, placeholder icons

### Rust backend
- [x] notification/types.rs — NotificationPayload, Action, ProgressInfo, Priority, Timeout, HistoryEntry (10 tests)
- [x] notification/manager.rs — NotificationManager with add/dismiss/update/dismissAll/list (11 tests)
- [x] lib.rs — Tauri commands, overlay panel creation in setup(), panic hook, main thread dispatch
- [x] tray/menu.rs — System tray with Open, Clear All, Pause, Quit (6 tests)
- [x] server/http.rs — axum HTTP server on port 9868 (13 tests, includes action endpoint)
- [x] server/webhook.rs — webhook callback client, 5s timeout, camelCase payloads (4 tests)
- [x] overlay/panel.rs — NSPanel (macOS) / WebviewWindow (Windows) with position calc (7 tests)
- [x] tauri-nspanel integration — non-activating, joins all Spaces, proper z-order
- [x] Main thread dispatch for all panel show/hide ops (prevents AppKit crashes from tokio threads)
- [x] Dynamic panel sizing — starts 10px, frontend resizes to fit content
- [x] cargo check passes, cargo test passes (51 tests)

### Frontend
- [x] types/notification.ts — mirrors Rust types + icon, font fields
- [x] stores/notificationStore.ts — Zustand store (13 tests)
- [x] stores/historyStore.ts — Zustand store (13 tests)
- [x] App.tsx — multi-window router (2 tests)
- [x] components/overlay/NotificationOverlay.tsx — transparent container, Tauri events, dynamic resize, action callbacks (16 tests)
- [x] components/overlay/NotificationCard.tsx — glass card with icons, fonts, countdown, dismiss animation (9 tests)
- [x] components/overlay/NotificationIcon.tsx — dynamic Lucide icon by name (kebab/pascal/lowercase)
- [x] components/overlay/RelativeTime.tsx — "just now" / "5m ago" / "1h ago" with smart tick intervals
- [x] hooks/useNotifications.ts — Tauri event subscriptions (11 tests)
- [x] hooks/useGoogleFont.ts — dynamically loads Google Fonts via <link> injection, deduplicates
- [x] components/app/MainApp.tsx, HistoryView.tsx (4 tests)
- [x] __mocks__/ — Tauri API, autostart, dialog mocks
- [x] pnpm test passes (68 tests)

### Overlay Design: Liquid Glass (Meetily-inspired)
- [x] 9-layer reflex shadow stack (4 light + 3 dark + 2 drop shadows)
- [x] backdrop-filter: blur(40px) saturate(1.8) with 96% opacity dark bg
- [x] 18px border-radius, 12px button radius
- [x] Light/dark theme: auto via prefers-color-scheme + per-card override (.light/.dark class)
- [x] Priority accent: 0.5px top border (green/blue/orange/red)
- [x] Critical pulsing glow: Siri-style ::before/::after with animated opacity, blurred outer halo
- [x] Slide-in animation: translateX(40px) scale(0.96) with spring easing
- [x] Slide-out dismiss: translateX(60px) scale(0.95), 280ms, pointer-events disabled
- [x] Auto-dismiss countdown bar: priority-colored, shrinks over timeout, pauses on hover
  - Low: 6s, Normal: 8s, High: 12s, Critical: never
- [x] Lucide icons: `icon` field in payload → dynamic icon render (any of 1400+ icons)
- [x] Priority-tinted icon containers: colored bg/border matching priority accent
- [x] Google Fonts: `font` field in payload → dynamically loaded from CDN, applied per-card
- [x] Relative timestamps: "just now" → "5m ago" → "1h ago" → "3d ago" (smart tick intervals)
- [x] Typography: SF Mono for sender/timestamp, SF Pro Display for content
- [x] Subtle SVG noise grain at 3% opacity for perceived depth
- [x] Close button: 18px circular, SVG cross, appears on hover
- [x] Action buttons: glass-style, 0.5px border, 28px height, font-weight 500
- [x] Body text: 62% opacity (bumped from 50% for readability)

### Test script
- [x] scripts/fire.py — comprehensive test notification sender
  - --all (each priority with icons), --burst N, --progress, --actions, --critical
  - --icons (5 different icon types), --fonts (4 different Google Fonts)
  - --webhook (starts listener on :9870, sends notification with callback_url)

### Git history (this phase)
297c06c fix: start panel at 10px height, frontend resizes to fit content
136fe13 fix: use direct window import for setSize, add window subpath mock
c25295b fix: dynamically resize panel window to fit notification content
af51efe fix: proper webview transparency using background_color + data attribute
fb2b9eb fix: add transparent(true) to webview builder inside NSPanel
a7171e7 fix: dismiss/dismissAll call backend to sync manager state
c6be638 fix: set transparent background on overlay webview
d1ded03 fix: dispatch NSPanel show/hide to main thread, add panic hook
cb2e0c0 feat: add tauri-nspanel for macOS NSPanel notification overlay
d9d56a8 docs: add architecture comparison of notification overlay strategies
d783e99 refactor: replace fullscreen overlay with positioned panel window

# TODO LIST

## Phase 3: Click-Through — NOT STARTED
- [ ] CSS pointer-events: none on overlay body, auto on cards
- [ ] Rust-side mouse position polling (macOS: CGEvent, Windows: GetCursorPos)
- [ ] setIgnoreCursorEvents toggle logic

## Phase 4 Remaining: WebSocket + CLI
- [x] axum HTTP server on port 9868 — all REST endpoints (13 tests)
- [x] Webhook callbacks: POST /notify/{id}/action fires to callback_url, dismisses notification
- [x] action_callback Tauri command: frontend action buttons → webhook + dismiss
- [x] fire.py --webhook test mode: starts listener on :9870, verified end-to-end
- [ ] tokio-tungstenite WebSocket server on port 9869
- [ ] CLI binary (cli/Cargo.toml, clap + reqwest)

## Phase 4.5: Test UI
- [ ] Sidebar navigation (History / Tester tabs)
- [ ] NotificationTester component with form fields
- [ ] Live preview, Send button, Copy curl, Quick templates

## Phase 5: Rich Features
- [x] Action buttons + callback dispatch (POST to callback_url) — DONE
- [ ] Markdown body rendering (react-markdown)
- [ ] Notification grouping (collapse/expand)
- [ ] Sound playback (rodio)

## Phase 6: History + Settings + Polish
- [ ] SQLite history (sqlx)
- [ ] History UI in main app window
- [ ] Settings view
- [ ] Multi-monitor support
- [ ] Cross-platform testing

# KNOWN ISSUES
- Placeholder icons are solid blue squares (need proper bell icons)
- pnpm build scripts (esbuild) not approved — `pnpm approve-builds` needed interactively
- Tray icon states (has-notifications, paused) not implemented
- Transparency + dynamic resize need visual verification after Rust rebuild

# CURRENT STATUS
119 tests passing (68 frontend + 51 Rust). Overlay is fully functional with Liquid Glass design,
Lucide icons, Google Fonts, auto-dismiss, critical glow, dismiss animations, relative timestamps,
and webhook callbacks. Action buttons fire HTTP POST to callback_url and dismiss the notification.
Next: WebSocket server, CLI, or Test UI.

# OBSERVATIONS & DECISIONS
- NSPanel is the correct primitive for macOS floating utility panels (non-activating, joins all Spaces)
- Windows uses WebviewWindow with always_on_top + focused(false) (Meetily pattern), Linux deferred
- Fullscreen transparent overlay abandoned — every production Tauri app uses small positioned windows
- panel.show() from tokio thread crashes AppKit — all panel ops dispatched to main thread
- height: 100% on overlay-root caused window to never shrink — fixed with auto height + stack measurement
- color-mix() for glass works but 12% opacity too transparent on busy backgrounds — bumped to 96%
- CSS @property for --pulse-opacity enables smooth Siri-style glow animation
- Google Fonts loaded via dynamic <link> injection with display=swap — deduplicates across cards