feat: add notification sounds (#44)

### Explanation

_No response_

### Issue

_No response_

### Attestations

- [ ] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/)
- [ ] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/).
- [ ] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/).

### Dependencies

- [ ] I have pinned the dependencies to a specific patch version.

### Style

- [ ] I have run the linter and resolved any errors.
- [ ] My pull request uses an appropriate title, matching the conventional commit standards.
- [ ] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request.

### Tests

- [ ] My contribution adds new code, and I have added tests to cover it.
- [ ] My contribution modifies existing code, and I have updated the tests to reflect these changes.
- [ ] All new and existing tests pass locally with my changes.
- [ ] Code coverage remains at or above the configured threshold.

### Documentation

_No response_

### Versioning

_No response_

Reviewed-on: #44
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>

src/lib/components/ConfigSidebar.svelte

@@ -11,6 +11,8 @@
     theme: "dark",
     greeting_enabled: true,
     greeting_custom_prompt: null,
+    notifications_enabled: true,
+    notification_volume: 0.7,
   });
 
   let isOpen = $state(false);
@@ -394,6 +396,51 @@
       </div>
     </section>
 
+    <!-- Notifications Section -->
+    <section class="mb-6">
+      <h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
+        Notifications
+      </h3>
+
+      <!-- Enable/Disable Notifications -->
+      <div class="mb-4">
+        <label class="flex items-center gap-3 cursor-pointer">
+          <input
+            type="checkbox"
+            bind:checked={config.notifications_enabled}
+            class="w-4 h-4 text-[var(--accent-primary)] bg-[var(--bg-primary)] border-[var(--border-color)] rounded focus:ring-[var(--accent-primary)] focus:ring-2"
+          />
+          <span class="text-sm text-gray-300">Enable sound notifications</span>
+        </label>
+      </div>
+
+      <!-- Volume Control -->
+      <div class="mb-4">
+        <label for="notification-volume" class="block text-sm text-gray-400 mb-2">
+          Notification Volume
+        </label>
+        <div class="flex items-center gap-3">
+          <input
+            id="notification-volume"
+            type="range"
+            bind:value={config.notification_volume}
+            min="0"
+            max="1"
+            step="0.1"
+            disabled={!config.notifications_enabled}
+            class="flex-1 h-2 bg-[var(--bg-primary)] rounded-lg appearance-none cursor-pointer disabled:opacity-50"
+          />
+          <span class="text-sm text-gray-300 w-12 text-right">
+            {Math.round(config.notification_volume * 100)}%
+          </span>
+        </div>
+      </div>
+
+      <div class="text-xs text-gray-500">
+        Sound notifications will play when I complete tasks, encounter errors, or need permissions.
+      </div>
+    </section>
+
     <!-- Save Button -->
     <div class="sticky bottom-0 pt-4 pb-2 bg-[var(--bg-secondary)]">
       <button
@@ -406,3 +453,34 @@
     </div>
   </div>
 </aside>
+
+<style>
+  /* Custom range input styling */
+  input[type="range"]::-webkit-slider-thumb {
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    background: var(--accent-primary);
+    border-radius: 50%;
+    cursor: pointer;
+  }
+
+  input[type="range"]::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    background: var(--accent-primary);
+    border-radius: 50%;
+    cursor: pointer;
+    border: none;
+  }
+
+  input[type="range"]:disabled::-webkit-slider-thumb {
+    background: var(--text-tertiary);
+    cursor: not-allowed;
+  }
+
+  input[type="range"]:disabled::-moz-range-thumb {
+    background: var(--text-tertiary);
+    cursor: not-allowed;
+  }
+</style>

src/lib/components/InputBar.svelte

@@ -2,6 +2,7 @@
   import { invoke } from "@tauri-apps/api/core";
   import { claudeStore } from "$lib/stores/claude";
   import { characterState } from "$lib/stores/character";
+  import { handleNewUserMessage } from "$lib/notifications/rules";
 
   let inputValue = $state("");
   let isSubmitting = $state(false);
@@ -20,6 +21,9 @@
     isSubmitting = true;
     inputValue = "";
 
+    // Reset notification state for new user message
+    handleNewUserMessage();
+
     claudeStore.addLine("user", message);
     characterState.setState("thinking");
 

src/lib/components/NotificationDebugger.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+  import { invoke } from "@tauri-apps/api/core";
+  import { notificationManager } from "$lib/notifications/notificationManager";
+
+  let results: { method: string; success: boolean; error?: string }[] = [];
+  let testing = false;
+
+  async function testNotificationMethod(method: string, invokeCommand: string) {
+    try {
+      await invoke(invokeCommand, {
+        title: "Hikari Test",
+        body: `Testing ${method} notification method`,
+      });
+      return { method, success: true };
+    } catch (error) {
+      return { method, success: false, error: String(error) };
+    }
+  }
+
+  async function testAllMethods() {
+    testing = true;
+    results = [];
+
+    const methods = [
+      { name: "WSL Toast (System Tray)", command: "send_wsl_notification" },
+      { name: "VBScript (Popup Dialog)", command: "send_vbs_notification" },
+      { name: "Notify-send (Linux)", command: "send_notify_send" },
+      { name: "Windows PowerShell", command: "send_windows_notification" },
+      { name: "Simple Message (Dialog)", command: "send_simple_notification" },
+    ];
+
+    for (const method of methods) {
+      const result = await testNotificationMethod(method.name, method.command);
+      results = [...results, result];
+      // Wait a bit between tests
+      await new Promise((resolve) => setTimeout(resolve, 500));
+    }
+
+    testing = false;
+  }
+
+  async function testIntegratedNotification() {
+    await notificationManager.notifySuccess("Integrated notification test!");
+  }
+</script>
+
+<div class="notification-debugger">
+  <h3>Notification Method Debugger</h3>
+
+  <div class="test-buttons">
+    <button on:click={testAllMethods} disabled={testing}>
+      {testing ? "Testing..." : "Test All Methods"}
+    </button>
+
+    <button on:click={testIntegratedNotification}> Test Integrated Notification </button>
+  </div>
+
+  {#if results.length > 0}
+    <div class="results">
+      <h4>Test Results:</h4>
+      {#each results as result (result.method)}
+        <div class="result" class:success={result.success} class:failed={!result.success}>
+          <span class="method">{result.method}:</span>
+          <span class="status">{result.success ? "✓ Success" : "✗ Failed"}</span>
+          {#if result.error}
+            <div class="error">{result.error}</div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .notification-debugger {
+    padding: 1rem;
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+    margin: 1rem;
+    background: var(--bg-secondary);
+  }
+
+  h3,
+  h4 {
+    margin-top: 0;
+    color: var(--text-primary);
+  }
+
+  .test-buttons {
+    display: flex;
+    gap: 1rem;
+    margin: 1rem 0;
+  }
+
+  button {
+    padding: 0.5rem 1rem;
+    background: var(--accent-color);
+    color: white;
+    border: none;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    transition: opacity 0.2s;
+  }
+
+  button:hover:not(:disabled) {
+    opacity: 0.8;
+  }
+
+  button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .results {
+    margin-top: 1rem;
+  }
+
+  .result {
+    padding: 0.5rem;
+    margin: 0.25rem 0;
+    border-radius: 0.25rem;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .result.success {
+    background: rgba(0, 255, 0, 0.1);
+    border: 1px solid rgba(0, 255, 0, 0.3);
+  }
+
+  .result.failed {
+    background: rgba(255, 0, 0, 0.1);
+    border: 1px solid rgba(255, 0, 0, 0.3);
+  }
+
+  .method {
+    font-weight: bold;
+    min-width: 150px;
+  }
+
+  .status {
+    flex: 1;
+  }
+
+  .error {
+    width: 100%;
+    margin-top: 0.25rem;
+    font-size: 0.875rem;
+    color: var(--error-color);
+    word-break: break-word;
+  }
+</style>

src/lib/components/StatusBar.svelte

@@ -25,6 +25,8 @@
     theme: "dark",
     greeting_enabled: true,
     greeting_custom_prompt: null,
+    notifications_enabled: true,
+    notification_volume: 0.5,
   });
 
   onMount(async () => {

src/lib/notifications/index.ts

@@ -0,0 +1,4 @@
+export * from "./types";
+export { soundPlayer } from "./soundPlayer";
+export { notificationManager } from "./notificationManager";
+export { initializeNotificationRules } from "./rules";

src/lib/notifications/notificationManager.ts

@@ -0,0 +1,121 @@
+import { soundPlayer } from "./soundPlayer";
+import { NotificationType, NOTIFICATION_SOUNDS } from "./types";
+import { invoke } from "@tauri-apps/api/core";
+import { sendTerminalNotification } from "./terminalNotifier";
+
+class NotificationManager {
+  async notify(type: NotificationType, message?: string): Promise<void> {
+    // Always play sound (if enabled)
+    await soundPlayer.play(type);
+
+    const sound = NOTIFICATION_SOUNDS[type];
+    const title = sound.phrase;
+    const body = message || this.getDefaultMessage(type);
+
+    // Try multiple notification methods in order
+    const notificationMethods = [
+      // Method 1: Try Windows PowerShell (best for system tray notifications)
+      async () => {
+        console.log("Trying Windows PowerShell notifications...");
+        await invoke("send_windows_notification", { title, body });
+      },
+
+      // Method 2: Try native Windows toast (for Windows builds)
+      async () => {
+        console.log("Trying native Windows toast...");
+        await invoke("send_windows_toast", { title, body });
+      },
+
+      // Method 3: Try WSL-specific notification (Windows toast via PowerShell - for WSL)
+      async () => {
+        console.log("Trying WSL notification...");
+        await invoke("send_wsl_notification", { title, body });
+      },
+
+      // Method 4: Try native Tauri notifications
+      async () => {
+        console.log("Trying Tauri native notifications...");
+        const { sendNotification, isPermissionGranted, requestPermission } =
+          await import("@tauri-apps/plugin-notification");
+
+        let hasPermission = await isPermissionGranted();
+        if (!hasPermission) {
+          const permission = await requestPermission();
+          hasPermission = permission === "granted";
+        }
+
+        if (hasPermission) {
+          await sendNotification({ title, body });
+        } else {
+          throw new Error("Notification permission denied");
+        }
+      },
+
+      // Method 5: Try notify-send (for native Linux)
+      async () => {
+        console.log("Trying notify-send...");
+        await invoke("send_notify_send", { title, body });
+      },
+
+      // Skip VBScript and simple message as they create popup dialogs
+      // Only use them in the debugger for testing
+    ];
+
+    // Try each method until one succeeds
+    for (const method of notificationMethods) {
+      try {
+        await method();
+        console.log("Notification sent successfully");
+        return; // Success, stop trying other methods
+      } catch (error) {
+        console.warn("Notification method failed:", error);
+        // Continue to next method
+      }
+    }
+
+    console.error("All notification methods failed, using terminal notification");
+    // Final fallback: Show in terminal
+    sendTerminalNotification(type, body);
+  }
+
+  private getDefaultMessage(type: NotificationType): string {
+    switch (type) {
+      case NotificationType.SUCCESS:
+        return "Task completed successfully!";
+      case NotificationType.ERROR:
+        return "Something went wrong...";
+      case NotificationType.PERMISSION:
+        return "Permission needed to continue";
+      case NotificationType.CONNECTION:
+        return "Successfully connected to Claude Code";
+      case NotificationType.TASK_START:
+        return "Starting task...";
+      default:
+        return "Notification";
+    }
+  }
+
+  // Helper methods for common notifications
+  async notifySuccess(message?: string): Promise<void> {
+    await this.notify(NotificationType.SUCCESS, message);
+  }
+
+  async notifyError(message?: string): Promise<void> {
+    await this.notify(NotificationType.ERROR, message);
+  }
+
+  async notifyPermission(message?: string): Promise<void> {
+    await this.notify(NotificationType.PERMISSION, message);
+  }
+
+  async notifyConnection(message?: string): Promise<void> {
+    await this.notify(NotificationType.CONNECTION, message);
+  }
+
+  async notifyTaskStart(message?: string): Promise<void> {
+    await this.notify(NotificationType.TASK_START, message);
+  }
+}
+
+// Export singleton instance
+export const notificationManager = new NotificationManager();

src/lib/notifications/rules.ts

@@ -0,0 +1,103 @@
+import { characterState } from "$lib/stores/character";
+import { notificationManager } from "./notificationManager";
+import type { CharacterState } from "$lib/types/states";
+import type { ConnectionStatus } from "$lib/types/messages";
+
+// Track previous states to detect transitions
+let previousCharacterState: CharacterState | null = null;
+let previousConnectionStatus: ConnectionStatus | null = null;
+let taskStartTime: number | null = null;
+let hasNotifiedTaskStart = false;
+
+export function handleCharacterStateChange(newState: CharacterState): void {
+  // Detect state transitions
+  if (previousCharacterState === newState) return;
+
+  // Task completion: any state -> success
+  if (newState === "success" && previousCharacterState !== null) {
+    const taskDuration = taskStartTime ? Date.now() - taskStartTime : 0;
+    // Only notify for tasks that took more than 2 seconds
+    if (taskDuration > 2000) {
+      notificationManager.notifySuccess();
+    }
+    taskStartTime = null;
+  }
+
+  // Error occurred
+  if (newState === "error" && previousCharacterState !== "error") {
+    notificationManager.notifyError();
+  }
+
+  // Permission needed
+  if (newState === "permission") {
+    notificationManager.notifyPermission();
+  }
+
+  // Starting long tasks - only notify once per response
+  if (
+    (newState === "coding" || newState === "searching") &&
+    previousCharacterState !== "coding" &&
+    previousCharacterState !== "searching" &&
+    !hasNotifiedTaskStart
+  ) {
+    taskStartTime = Date.now();
+    hasNotifiedTaskStart = true;
+    notificationManager.notifyTaskStart();
+  }
+
+  previousCharacterState = newState;
+}
+
+export function handleConnectionStatusChange(newStatus: ConnectionStatus): void {
+  // Only notify on successful connection after being disconnected
+  if (
+    newStatus === "connected" &&
+    previousConnectionStatus &&
+    previousConnectionStatus !== "connected"
+  ) {
+    notificationManager.notifyConnection();
+  }
+
+  previousConnectionStatus = newStatus;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function handleToolExecution(_toolName: string): void {
+  // For now, we don't notify on every tool execution
+  // But we could add specific rules here if needed
+}
+
+// Reset notification state for a new response
+export function handleNewUserMessage(): void {
+  hasNotifiedTaskStart = false;
+}
+
+// Store unsubscribe functions
+let unsubscribeCharacterState: (() => void) | null = null;
+
+// Initialize listeners
+export function initializeNotificationRules(): void {
+  // Clean up any existing subscriptions first
+  cleanupNotificationRules();
+
+  // Subscribe to character state changes
+  unsubscribeCharacterState = characterState.subscribe((state) => {
+    handleCharacterStateChange(state);
+  });
+
+  // We'll connect to connection status in the next step
+}
+
+// Cleanup function to prevent duplicate listeners
+export function cleanupNotificationRules(): void {
+  if (unsubscribeCharacterState) {
+    unsubscribeCharacterState();
+    unsubscribeCharacterState = null;
+  }
+
+  // Reset state tracking
+  previousCharacterState = null;
+  previousConnectionStatus = null;
+  taskStartTime = null;
+  hasNotifiedTaskStart = false;
+}

src/lib/notifications/soundPlayer.ts

@@ -0,0 +1,61 @@
+import { NOTIFICATION_SOUNDS, type NotificationType } from "./types";
+
+class SoundPlayer {
+  private audioCache: Map<NotificationType, HTMLAudioElement> = new Map();
+  private enabled: boolean = true;
+  private globalVolume: number = 1.0;
+
+  constructor() {
+    // Preload all essential sounds
+    this.preloadSounds();
+  }
+
+  private preloadSounds(): void {
+    Object.entries(NOTIFICATION_SOUNDS).forEach(([type, sound]) => {
+      const audio = new Audio(`/sounds/${sound.filename}`);
+      audio.preload = "auto";
+      audio.volume = (sound.volume || 0.7) * this.globalVolume;
+      this.audioCache.set(type as NotificationType, audio);
+    });
+  }
+
+  async play(type: NotificationType): Promise<void> {
+    if (!this.enabled) return;
+
+    try {
+      const audio = this.audioCache.get(type);
+      if (!audio) {
+        console.warn(`No audio found for notification type: ${type}`);
+        return;
+      }
+
+      // Clone the audio to allow overlapping sounds
+      const audioClone = audio.cloneNode() as HTMLAudioElement;
+      audioClone.volume = audio.volume;
+
+      await audioClone.play();
+    } catch (error) {
+      console.error("Failed to play notification sound:", error);
+    }
+  }
+
+  setEnabled(enabled: boolean): void {
+    this.enabled = enabled;
+  }
+
+  setGlobalVolume(volume: number): void {
+    this.globalVolume = Math.max(0, Math.min(1, volume));
+    // Update all cached audio volumes
+    this.audioCache.forEach((audio, type) => {
+      const sound = NOTIFICATION_SOUNDS[type];
+      audio.volume = (sound.volume || 0.7) * this.globalVolume;
+    });
+  }
+
+  isEnabled(): boolean {
+    return this.enabled;
+  }
+}
+
+// Export singleton instance
+export const soundPlayer = new SoundPlayer();

src/lib/notifications/terminalNotifier.ts

@@ -0,0 +1,50 @@
+import { claudeStore } from "$lib/stores/claude";
+import { NOTIFICATION_SOUNDS, type NotificationType } from "./types";
+
+export function sendTerminalNotification(type: NotificationType, message?: string): void {
+  const sound = NOTIFICATION_SOUNDS[type];
+  const title = sound.phrase;
+
+  // Create a formatted notification message
+  const separator = "═".repeat(50);
+  const timestamp = new Date().toLocaleTimeString();
+
+  let emoji = "";
+  let color = "";
+
+  switch (type) {
+    case "success":
+      emoji = "✨";
+      color = "\x1b[32m"; // Green
+      break;
+    case "error":
+      emoji = "❌";
+      color = "\x1b[31m"; // Red
+      break;
+    case "permission":
+      emoji = "🔐";
+      color = "\x1b[33m"; // Yellow
+      break;
+    case "connection":
+      emoji = "🔗";
+      color = "\x1b[36m"; // Cyan
+      break;
+    case "task_start":
+      emoji = "🚀";
+      color = "\x1b[34m"; // Blue
+      break;
+  }
+
+  const reset = "\x1b[0m";
+
+  // Format the notification
+  const notification = `
+${color}${separator}${reset}
+${emoji} ${color}NOTIFICATION${reset} - ${timestamp}
+${color}${title}${reset}
+${message || ""}
+${color}${separator}${reset}`;
+
+  // Add to terminal as a special system message
+  claudeStore.addLine("system", notification);
+}

src/lib/notifications/testNotifications.ts

@@ -0,0 +1,42 @@
+import { notificationManager } from "./notificationManager";
+
+// Test function to trigger each notification type
+export async function testAllNotifications() {
+  console.log("Testing all notification types...");
+
+  // Test success notification
+  setTimeout(async () => {
+    console.log("Testing SUCCESS notification");
+    await notificationManager.notifySuccess("Test task completed!");
+  }, 1000);
+
+  // Test error notification
+  setTimeout(async () => {
+    console.log("Testing ERROR notification");
+    await notificationManager.notifyError("Test error occurred!");
+  }, 3000);
+
+  // Test permission notification
+  setTimeout(async () => {
+    console.log("Testing PERMISSION notification");
+    await notificationManager.notifyPermission("Test permission request!");
+  }, 5000);
+
+  // Test connection notification
+  setTimeout(async () => {
+    console.log("Testing CONNECTION notification");
+    await notificationManager.notifyConnection("Test connection established!");
+  }, 7000);
+
+  // Test task start notification
+  setTimeout(async () => {
+    console.log("Testing TASK_START notification");
+    await notificationManager.notifyTaskStart("Test task starting!");
+  }, 9000);
+}
+
+// Make it available on window for easy testing
+if (typeof window !== "undefined") {
+  (window as unknown as { testNotifications: typeof testAllNotifications }).testNotifications =
+    testAllNotifications;
+}

src/lib/notifications/types.ts

@@ -0,0 +1,48 @@
+export enum NotificationType {
+  SUCCESS = "success",
+  ERROR = "error",
+  PERMISSION = "permission",
+  CONNECTION = "connection",
+  TASK_START = "task_start",
+}
+
+export interface NotificationSound {
+  type: NotificationType;
+  filename: string;
+  phrase: string;
+  volume?: number;
+}
+
+// Essential notification sounds mapping
+export const NOTIFICATION_SOUNDS: Record<NotificationType, NotificationSound> = {
+  [NotificationType.SUCCESS]: {
+    type: NotificationType.SUCCESS,
+    filename: "im-done.mp3",
+    phrase: "I'm done!",
+    volume: 0.7,
+  },
+  [NotificationType.ERROR]: {
+    type: NotificationType.ERROR,
+    filename: "oh-no.mp3",
+    phrase: "Oh no...",
+    volume: 0.8,
+  },
+  [NotificationType.PERMISSION]: {
+    type: NotificationType.PERMISSION,
+    filename: "access-please.mp3",
+    phrase: "Access please!",
+    volume: 0.9,
+  },
+  [NotificationType.CONNECTION]: {
+    type: NotificationType.CONNECTION,
+    filename: "connected.mp3",
+    phrase: "Connected!",
+    volume: 0.7,
+  },
+  [NotificationType.TASK_START]: {
+    type: NotificationType.TASK_START,
+    filename: "working-on-it.mp3",
+    phrase: "Working on it!",
+    volume: 0.6,
+  },
+};

src/lib/notifications/wslNotificationHelper.ts

@@ -0,0 +1,16 @@
+import { invoke } from "@tauri-apps/api/core";
+import { platform } from "@tauri-apps/plugin-os";
+
+export async function sendWSLNotification(title: string, body: string): Promise<void> {
+  const currentPlatform = await platform();
+
+  // Check if we're on Windows (WSL shows as 'windows')
+  if (currentPlatform === "windows") {
+    try {
+      // Use PowerShell to send Windows native notifications
+      await invoke("send_windows_notification", { title, body });
+    } catch (error) {
+      console.error("Failed to send Windows notification:", error);
+    }
+  }
+}

src/lib/stores/config.ts

@@ -12,6 +12,8 @@ export interface HikariConfig {
   theme: Theme;
   greeting_enabled: boolean;
   greeting_custom_prompt: string | null;
+  notifications_enabled: boolean;
+  notification_volume: number;
 }
 
 const defaultConfig: HikariConfig = {
@@ -23,6 +25,8 @@ const defaultConfig: HikariConfig = {
   theme: "dark",
   greeting_enabled: true,
   greeting_custom_prompt: null,
+  notifications_enabled: true,
+  notification_volume: 0.7,
 };
 
 function createConfigStore() {

src/lib/stores/notifications.ts

@@ -0,0 +1,22 @@
+import { derived } from "svelte/store";
+import { configStore } from "./config";
+import { soundPlayer } from "$lib/notifications";
+
+// Sync notification settings with config
+export const notificationSettings = derived(configStore.config, ($config) => {
+  soundPlayer.setEnabled($config.notifications_enabled);
+  soundPlayer.setGlobalVolume($config.notification_volume);
+
+  return {
+    enabled: $config.notifications_enabled,
+    volume: $config.notification_volume,
+  };
+});
+
+// Helper to update notification settings
+export async function updateNotificationSettings(enabled: boolean, volume: number) {
+  await configStore.updateConfig({
+    notifications_enabled: enabled,
+    notification_volume: volume,
+  });
+}

src/lib/tauri.ts

@@ -5,6 +5,12 @@ import { characterState } from "$lib/stores/character";
 import { configStore } from "$lib/stores/config";
 import type { ConnectionStatus, PermissionPromptEvent } from "$lib/types/messages";
 import type { CharacterState } from "$lib/types/states";
+import {
+  initializeNotificationRules,
+  cleanupNotificationRules,
+  handleConnectionStatusChange,
+  handleNewUserMessage,
+} from "$lib/notifications/rules";
 
 interface StateChangePayload {
   state: CharacterState;
@@ -12,6 +18,7 @@ interface StateChangePayload {
 }
 
 let hasConnectedThisSession = false;
+let unlisteners: Array<() => void> = [];
 
 function getTimeOfDay(): string {
   const hour = new Date().getHours();
@@ -44,6 +51,9 @@ async function sendGreeting() {
   // Don't show the system prompt in the UI - just trigger Claude to respond
   characterState.setState("thinking");
 
+  // Reset notification state for greeting
+  handleNewUserMessage();
+
   try {
     await invoke("send_prompt", { message: greetingPrompt });
   } catch (error) {
@@ -60,10 +70,19 @@ interface OutputPayload {
 }
 
 export async function initializeTauriListeners() {
-  await listen<string>("claude:connection", async (event) => {
+  // Cleanup any existing listeners first
+  cleanupTauriListeners();
+
+  // Initialize notification rules
+  initializeNotificationRules();
+
+  const connectionUnlisten = await listen<string>("claude:connection", async (event) => {
     const status = event.payload as ConnectionStatus;
     claudeStore.setConnectionStatus(status);
 
+    // Handle notification for connection status
+    handleConnectionStatusChange(status);
+
     if (status === "connected") {
       claudeStore.addLine("system", "Connected to Claude Code");
       characterState.setState("idle");
@@ -81,8 +100,9 @@ export async function initializeTauriListeners() {
       characterState.setTemporaryState("error", 3000);
     }
   });
+  unlisteners.push(connectionUnlisten);
 
-  await listen<StateChangePayload>("claude:state", (event) => {
+  const stateUnlisten = await listen<StateChangePayload>("claude:state", (event) => {
     const { state } = event.payload;
 
     const stateMap: Record<string, CharacterState> = {
@@ -105,8 +125,9 @@ export async function initializeTauriListeners() {
       characterState.setState(mappedState);
     }
   });
+  unlisteners.push(stateUnlisten);
 
-  await listen<OutputPayload>("claude:output", (event) => {
+  const outputUnlisten = await listen<OutputPayload>("claude:output", (event) => {
     const { line_type, content, tool_name } = event.payload;
     claudeStore.addLine(
       line_type as "user" | "assistant" | "system" | "tool" | "error",
@@ -114,21 +135,25 @@ export async function initializeTauriListeners() {
       tool_name || undefined
     );
   });
+  unlisteners.push(outputUnlisten);
 
-  await listen<string>("claude:stream", () => {
+  const streamUnlisten = await listen<string>("claude:stream", () => {
     // no-op
   });
+  unlisteners.push(streamUnlisten);
 
-  await listen<string>("claude:session", (event) => {
+  const sessionUnlisten = await listen<string>("claude:session", (event) => {
     claudeStore.setSessionId(event.payload);
     claudeStore.addLine("system", `Session: ${event.payload.substring(0, 8)}...`);
   });
+  unlisteners.push(sessionUnlisten);
 
-  await listen<string>("claude:cwd", (event) => {
+  const cwdUnlisten = await listen<string>("claude:cwd", (event) => {
     claudeStore.setWorkingDirectory(event.payload);
   });
+  unlisteners.push(cwdUnlisten);
 
-  await listen<PermissionPromptEvent>("claude:permission", (event) => {
+  const permissionUnlisten = await listen<PermissionPromptEvent>("claude:permission", (event) => {
     const { id, tool_name, tool_input, description } = event.payload;
     claudeStore.requestPermission({
       id,
@@ -138,6 +163,18 @@ export async function initializeTauriListeners() {
     });
     claudeStore.addLine("system", `Permission requested for: ${tool_name}`);
   });
+  unlisteners.push(permissionUnlisten);
 
   console.log("Tauri event listeners initialized");
 }
+
+export function cleanupTauriListeners() {
+  // Cleanup all event listeners
+  unlisteners.forEach((unlisten) => unlisten());
+  unlisteners = [];
+
+  // Cleanup notification rules
+  cleanupNotificationRules();
+
+  console.log("Tauri event listeners cleaned up");
+}

src/routes/+page.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-  import { initializeTauriListeners } from "$lib/tauri";
+  import { onMount, onDestroy } from "svelte";
+  import { initializeTauriListeners, cleanupTauriListeners } from "$lib/tauri";
   import { configStore, applyTheme } from "$lib/stores/config";
+  import "$lib/notifications/testNotifications";
   import Terminal from "$lib/components/Terminal.svelte";
   import InputBar from "$lib/components/InputBar.svelte";
   import StatusBar from "$lib/components/StatusBar.svelte";
@@ -9,13 +10,25 @@
   import PermissionModal from "$lib/components/PermissionModal.svelte";
   import ConfigSidebar from "$lib/components/ConfigSidebar.svelte";
 
-  onMount(async () => {
-    await initializeTauriListeners();
-    await configStore.loadConfig();
+  let initialized = false;
 
-    // Apply saved theme on startup
-    const config = configStore.getConfig();
-    applyTheme(config.theme);
+  onMount(async () => {
+    if (!initialized) {
+      initialized = true;
+      await initializeTauriListeners();
+      await configStore.loadConfig();
+
+      // Apply saved theme on startup
+      const config = configStore.getConfig();
+      applyTheme(config.theme);
+    }
+  });
+
+  onDestroy(() => {
+    if (initialized) {
+      cleanupTauriListeners();
+      initialized = false;
+    }
   });
 </script>