Skip to content

Fix: restore Tauri event listeners broken by web mode refactor #452

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
serboox wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix: restore Tauri event listeners broken by web mode refactor #452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Fix: restore Tauri event listeners broken by web mode refactor 
   After the web server mode was added (v0.2.1), conditional imports for
   Tauri APIs used `window.__TAURI__` to detect the desktop environment.
   In Tauri 2 this global is not set (only `window.__TAURI_INTERNALS__`
   exists), so the check silently fell through to a DOM CustomEvent
   fallback. The Rust backend emits proper Tauri events via `app.emit()`,
   which DOM listeners never receive — causing an infinite loading spinner
   after every Claude response.

   Changes:
   - ClaudeCodeSession.tsx: replace module-level env detection with a
     runtime try/catch wrapper around `tauriListenApi`; falls back to DOM
     events only if Tauri throws (web mode)
   - useClaudeMessages.ts: same fix, import listen directly
   - FloatingPromptInput.tsx: add `onDragDropEvent` stub to the web-mode
     fallback object to prevent TypeError on mount
   - apiAdapter.ts: dispatch scoped `claude-complete:${sessionId}` and
     `claude-output:${sessionId}` events in addition to generic ones, so
     ClaudeCodeSession receives completion after switching from generic to
     session-specific listeners
  • Loading branch information
@serboox
serboox committed Mar 22, 2026
commit 770da93c6a7eef143a7dc1780e094dc81298d923
37 changes: 10 additions & 27 deletions src/components/ClaudeCodeSession.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,37 +16,20 @@ import { Popover } from "@/components/ui/popover";
import { api, type Session } from "@/lib/api";
import { cn } from "@/lib/utils";

// Conditional imports for Tauri APIs
let tauriListen: any;
import { listen as tauriListenApi } from "@tauri-apps/api/event";
type UnlistenFn = () => void;

try {
if (typeof window !== 'undefined' && window.__TAURI__) {
tauriListen = require("@tauri-apps/api/event").listen;
// Try Tauri listen first; fall back to DOM CustomEvents (web mode).
async function listen(eventName: string, callback: (event: any) => void): Promise<UnlistenFn> {
try {
return await tauriListenApi(eventName, callback);
} catch {
// Web mode: backend dispatches CustomEvents on window
const handler = (e: any) => callback({ payload: e.detail });
window.addEventListener(eventName, handler);
return () => window.removeEventListener(eventName, handler);
}
} catch (e) {
console.log('[ClaudeCodeSession] Tauri APIs not available, using web mode');
}

// Web-compatible replacements
const listen = tauriListen || ((eventName: string, callback: (event: any) => void) => {
console.log('[ClaudeCodeSession] Setting up DOM event listener for:', eventName);

// In web mode, listen for DOM events
const domEventHandler = (event: any) => {
console.log('[ClaudeCodeSession] DOM event received:', eventName, event.detail);
// Simulate Tauri event structure
callback({ payload: event.detail });
};

window.addEventListener(eventName, domEventHandler);

// Return unlisten function
return Promise.resolve(() => {
console.log('[ClaudeCodeSession] Removing DOM event listener for:', eventName);
window.removeEventListener(eventName, domEventHandler);
});
});
import { StreamMessage } from "./StreamMessage";
import { FloatingPromptInput, type FloatingPromptInputRef } from "./FloatingPromptInput";
import { ErrorBoundary } from "./ErrorBoundary";
Expand Down
13 changes: 11 additions & 2 deletions src/components/FloatingPromptInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,24 @@ import { type FileEntry, type SlashCommand } from "@/lib/api";
// Conditional import for Tauri webview window
let tauriGetCurrentWebviewWindow: any;
try {
if (typeof window !== 'undefined' && window.__TAURI__) {
const isTauri = typeof window !== 'undefined' && !!(
window.__TAURI__ ||
window.__TAURI_METADATA__ ||
window.__TAURI_INTERNALS__ ||
(typeof navigator !== 'undefined' && navigator.userAgent.includes('Tauri'))
);
if (isTauri) {
tauriGetCurrentWebviewWindow = require("@tauri-apps/api/webviewWindow").getCurrentWebviewWindow;
}
} catch (e) {
console.log('[FloatingPromptInput] Tauri webview API not available, using web mode');
}

// Web-compatible replacement
const getCurrentWebviewWindow = tauriGetCurrentWebviewWindow || (() => ({ listen: () => Promise.resolve(() => {}) }));
const getCurrentWebviewWindow = tauriGetCurrentWebviewWindow || (() => ({
listen: () => Promise.resolve(() => {}),
onDragDropEvent: () => Promise.resolve(() => {}),
}));

interface FloatingPromptInputProps {
/**
Expand Down
11 changes: 2 additions & 9 deletions src/components/claude-code-session/useClaudeMessages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,8 @@ import { api } from '@/lib/api';
import { getEnvironmentInfo } from '@/lib/apiAdapter';
import type { ClaudeStreamMessage } from '../AgentExecution';

// Conditional import for Tauri
let tauriListen: any;
try {
if (typeof window !== 'undefined' && window.__TAURI__) {
tauriListen = require('@tauri-apps/api/event').listen;
}
} catch (e) {
console.log('[useClaudeMessages] Tauri event API not available, using web mode');
}
import { listen as tauriListenApi } from '@tauri-apps/api/event';
const tauriListen = tauriListenApi;

interface UseClaudeMessagesOptions {
onSessionInfo?: (info: { sessionId: string; projectId: string }) => void;
Expand Down
37 changes: 33 additions & 4 deletions src/lib/apiAdapter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,9 +291,14 @@ async function handleStreamingCommand<T>(command: string, params?: any): Promise
console.log(`[TRACE] command: ${command}`);
console.log(`[TRACE] params:`, params);
console.log(`[TRACE] WebSocket URL: ${wsUrl}`);


// Track session_id extracted from Claude's init message so we can dispatch
// scoped events (e.g. claude-complete:${sessionId}) that ClaudeCodeSession
// switches to after it receives the first init message.
let trackedSessionId: string | null = null;

const ws = new WebSocket(wsUrl);

ws.onopen = () => {
console.log(`[TRACE] WebSocket opened successfully`);

Expand Down Expand Up @@ -333,13 +338,24 @@ async function handleStreamingCommand<T>(command: string, params?: any): Promise
: message.content;
console.log(`[TRACE] Parsed Claude message:`, claudeMessage);

// Extract session_id from init message so we can send scoped events later
if (claudeMessage?.type === 'system' && claudeMessage?.subtype === 'init' && claudeMessage?.session_id) {
trackedSessionId = claudeMessage.session_id;
console.log(`[TRACE] Tracked session_id from init message: ${trackedSessionId}`);
}

// Simulate Tauri event for compatibility with existing UI
const customEvent = new CustomEvent('claude-output', {
detail: claudeMessage
});
console.log(`[TRACE] Dispatching claude-output event:`, customEvent.detail);
console.log(`[TRACE] Event type:`, customEvent.type);
window.dispatchEvent(customEvent);

// Also dispatch scoped event if we already know the session_id
if (trackedSessionId) {
window.dispatchEvent(new CustomEvent(`claude-output:${trackedSessionId}`, { detail: claudeMessage }));
}
} catch (e) {
console.error(`[TRACE] Failed to parse Claude output content:`, e);
console.error(`[TRACE] Content that failed to parse:`, message.content);
Expand All @@ -348,11 +364,19 @@ async function handleStreamingCommand<T>(command: string, params?: any): Promise
console.log(`[TRACE] Completion message:`, message);

// Dispatch claude-complete event for UI state management
const completeDetail = message.status === 'success';
const completeEvent = new CustomEvent('claude-complete', {
detail: message.status === 'success'
detail: completeDetail
});
console.log(`[TRACE] Dispatching claude-complete event:`, completeEvent.detail);
window.dispatchEvent(completeEvent);

// Also dispatch scoped event so ClaudeCodeSession receives it after
// switching from generic to session-specific listeners
if (trackedSessionId) {
console.log(`[TRACE] Dispatching scoped claude-complete:${trackedSessionId}`);
window.dispatchEvent(new CustomEvent(`claude-complete:${trackedSessionId}`, { detail: completeDetail }));
}

ws.close();
if (message.status === 'success') {
Expand All @@ -366,11 +390,16 @@ async function handleStreamingCommand<T>(command: string, params?: any): Promise
console.log(`[TRACE] Error message:`, message);

// Dispatch claude-error event for UI error handling
const errorDetail = message.message || 'Unknown error';
const errorEvent = new CustomEvent('claude-error', {
detail: message.message || 'Unknown error'
detail: errorDetail
});
console.log(`[TRACE] Dispatching claude-error event:`, errorEvent.detail);
window.dispatchEvent(errorEvent);

if (trackedSessionId) {
window.dispatchEvent(new CustomEvent(`claude-error:${trackedSessionId}`, { detail: errorDetail }));
}

reject(new Error(message.message || 'Unknown error'));
} else {
Expand Down