refactor: move file-watcher to trpc, add event emitter patern (#277)

Add a typed event emitter, use it in the new file watcher service

Author: jonathanlab

ARCHITECTURE.md

@@ -308,6 +308,83 @@ This pattern provides:
 5. **Add router** to `src/main/trpc/router.ts`
 6. **Use in renderer** via `trpcReact` hooks
 
+## Events (tRPC Subscriptions)
+
+For pushing real-time updates from main to renderer, use tRPC subscriptions with typed event emitters.
+
+### 1. Define Events in schemas.ts
+
+Use a const object for event names and an interface for payloads:
+
+```typescript
+// src/main/services/my-service/schemas.ts
+export const MyServiceEvent = {
+  ItemCreated: "item-created",
+  ItemDeleted: "item-deleted",
+} as const;
+
+export interface MyServiceEvents {
+  [MyServiceEvent.ItemCreated]: { id: string; name: string };
+  [MyServiceEvent.ItemDeleted]: { id: string };
+}
+```
+
+### 2. Extend TypedEventEmitter in Service
+
+```typescript
+// src/main/services/my-service/service.ts
+import { TypedEventEmitter } from "../../lib/typed-event-emitter";
+import { MyServiceEvent, type MyServiceEvents } from "./schemas";
+
+@injectable()
+export class MyService extends TypedEventEmitter<MyServiceEvents> {
+  async createItem(name: string) {
+    const item = { id: "123", name };
+    // TypeScript enforces correct event name and payload shape
+    this.emit(MyServiceEvent.ItemCreated, item);
+    return item;
+  }
+}
+```
+
+### 3. Create Subscriptions in Router
+
+Use a helper to reduce boilerplate:
+
+```typescript
+// src/main/trpc/routers/my-router.ts
+import { on } from "node:events";
+import { MyServiceEvent, type MyServiceEvents } from "../../services/my-service/schemas";
+
+function subscribe<K extends keyof MyServiceEvents>(event: K) {
+  return publicProcedure.subscription(async function* (opts) {
+    const service = getService();
+    for await (const [payload] of on(service, event, { signal: opts.signal })) {
+      yield payload as MyServiceEvents[K];
+    }
+  });
+}
+
+export const myRouter = router({
+  // ... queries and mutations
+  onItemCreated: subscribe(MyServiceEvent.ItemCreated),
+  onItemDeleted: subscribe(MyServiceEvent.ItemDeleted),
+});
+```
+
+### 4. Subscribe in Renderer
+
+```typescript
+// React component
+trpcReact.my.onItemCreated.useSubscription(undefined, {
+  enabled: true,
+  onData: (item) => {
+    // item is typed as { id: string; name: string }
+    console.log("Created:", item);
+  },
+});
+```
+
 ## Code Style
 
 See [CLAUDE.md](./CLAUDE.md) for linting, formatting, and import conventions.

apps/array/src/main/di/container.ts

@@ -3,6 +3,7 @@ import { Container } from "inversify";
 import { ContextMenuService } from "../services/context-menu/service.js";
 import { DockBadgeService } from "../services/dock-badge/service.js";
 import { ExternalAppsService } from "../services/external-apps/service.js";
+import { FileWatcherService } from "../services/file-watcher/service.js";
 import { FsService } from "../services/fs/service.js";
 import { GitService } from "../services/git/service.js";
 import { MAIN_TOKENS } from "./tokens.js";
@@ -14,5 +15,6 @@ export const container = new Container({
 container.bind(MAIN_TOKENS.ContextMenuService).to(ContextMenuService);
 container.bind(MAIN_TOKENS.DockBadgeService).to(DockBadgeService);
 container.bind(MAIN_TOKENS.ExternalAppsService).to(ExternalAppsService);
+container.bind(MAIN_TOKENS.FileWatcherService).to(FileWatcherService);
 container.bind(MAIN_TOKENS.FsService).to(FsService);
 container.bind(MAIN_TOKENS.GitService).to(GitService);

apps/array/src/main/di/tokens.ts

@@ -9,6 +9,7 @@ export const MAIN_TOKENS = Object.freeze({
   ContextMenuService: Symbol.for("Main.ContextMenuService"),
   DockBadgeService: Symbol.for("Main.DockBadgeService"),
   ExternalAppsService: Symbol.for("Main.ExternalAppsService"),
+  FileWatcherService: Symbol.for("Main.FileWatcherService"),
   FsService: Symbol.for("Main.FsService"),
   GitService: Symbol.for("Main.GitService"),
 });

apps/array/src/main/index.ts

@@ -33,7 +33,6 @@ import { trpcRouter } from "./trpc/index.js";
 // Legacy type kept for backwards compatibility with taskControllers map
 type TaskController = unknown;
 
-import { registerFileWatcherIpc } from "./services/fileWatcher.js";
 import { registerFoldersIpc } from "./services/folders.js";
 import { registerGitIpc } from "./services/git.js";
 import "./services/index.js";
@@ -298,7 +297,6 @@ ipcMain.handle("app:get-version", () => app.getVersion());
 registerOAuthHandlers();
 registerGitIpc();
 registerAgentIpc(taskControllers, () => mainWindow);
-registerFileWatcherIpc(() => mainWindow);
 registerFoldersIpc(() => mainWindow);
 registerWorktreeIpc();
 registerShellIpc();

apps/array/src/main/lib/typed-event-emitter.ts

@@ -0,0 +1,24 @@
+import { EventEmitter } from "node:events";
+
+export class TypedEventEmitter<TEvents> extends EventEmitter {
+  emit<K extends keyof TEvents & string>(
+    event: K,
+    payload: TEvents[K],
+  ): boolean {
+    return super.emit(event, payload);
+  }
+
+  on<K extends keyof TEvents & string>(
+    event: K,
+    listener: (payload: TEvents[K]) => void,
+  ): this {
+    return super.on(event, listener);
+  }
+
+  off<K extends keyof TEvents & string>(
+    event: K,
+    listener: (payload: TEvents[K]) => void,
+  ): this {
+    return super.off(event, listener);
+  }
+}

apps/array/src/main/preload.ts

@@ -173,27 +173,6 @@ contextBridge.exposeInMainWorld("electronAPI", {
     defaultBranch: string;
     compareUrl: string | null;
   } | null> => ipcRenderer.invoke("get-git-repo-info", repoPath),
-  listDirectory: (
-    dirPath: string,
-  ): Promise<
-    Array<{ name: string; path: string; type: "file" | "directory" }>
-  > => ipcRenderer.invoke("fs:list-directory", dirPath),
-  watcherStart: (repoPath: string): Promise<void> =>
-    ipcRenderer.invoke("watcher:start", repoPath),
-  watcherStop: (repoPath: string): Promise<void> =>
-    ipcRenderer.invoke("watcher:stop", repoPath),
-  onDirectoryChanged: (
-    listener: IpcEventListener<{ repoPath: string; dirPath: string }>,
-  ): (() => void) => createIpcListener("fs:directory-changed", listener),
-  onFileChanged: (
-    listener: IpcEventListener<{ repoPath: string; filePath: string }>,
-  ): (() => void) => createIpcListener("fs:file-changed", listener),
-  onFileDeleted: (
-    listener: IpcEventListener<{ repoPath: string; filePath: string }>,
-  ): (() => void) => createIpcListener("fs:file-deleted", listener),
-  onGitStateChanged: (
-    listener: IpcEventListener<{ repoPath: string }>,
-  ): (() => void) => createIpcListener("git:state-changed", listener),
   onOpenSettings: (listener: () => void): (() => void) =>
     createVoidIpcListener("open-settings", listener),
   onNewTask: (listener: () => void): (() => void) =>

apps/array/src/main/services/file-watcher/schemas.ts

@@ -0,0 +1,35 @@
+import { z } from "zod";
+
+export const listDirectoryInput = z.object({
+  dirPath: z.string(),
+});
+
+export const watcherInput = z.object({
+  repoPath: z.string(),
+});
+
+const directoryEntry = z.object({
+  name: z.string(),
+  path: z.string(),
+  type: z.enum(["file", "directory"]),
+});
+
+export const listDirectoryOutput = z.array(directoryEntry);
+
+export type ListDirectoryInput = z.infer<typeof listDirectoryInput>;
+export type WatcherInput = z.infer<typeof watcherInput>;
+export type DirectoryEntry = z.infer<typeof directoryEntry>;
+
+export const FileWatcherEvent = {
+  DirectoryChanged: "directory-changed",
+  FileChanged: "file-changed",
+  FileDeleted: "file-deleted",
+  GitStateChanged: "git-state-changed",
+} as const;
+
+export interface FileWatcherEvents {
+  [FileWatcherEvent.DirectoryChanged]: { repoPath: string; dirPath: string };
+  [FileWatcherEvent.FileChanged]: { repoPath: string; filePath: string };
+  [FileWatcherEvent.FileDeleted]: { repoPath: string; filePath: string };
+  [FileWatcherEvent.GitStateChanged]: { repoPath: string };
+}