SSE File Watcher

Rule

The UI stays in sync with agent changes through Server-Sent Events. When the agent writes a file, the UI updates automatically — no polling, no manual refresh.

Why

The agent modifies files on disk, but the UI runs in the browser. SSE bridges this gap: a file watcher on the server detects changes, streams them to the browser, and React Query invalidates the relevant caches. This is what makes the "files as database" pattern feel real-time.

How It Works

1. Server watches the data directory with chokidar. The watcher is set up in a shared module (server/lib/watcher.ts) and the SSE endpoint is a file-based route:

   // server/lib/watcher.ts
   import { createFileWatcher } from "@agent-native/core";
   export const watcher = createFileWatcher("./data");