# What Is the Purpose of the `src` Directory in Munder-Difflin?

> Understand the purpose of the src directory in Munder-Difflin. Explore its Electron backend, React frontend, and shared utilities for efficient development.

- Repository: [Chaitanya Giri/munder-difflin](https://github.com/chaitanyagiri/munder-difflin)
- Tags: internals
- Published: 2026-08-20

---

**The `src` directory contains all TypeScript source code for Munder-Difflin, organized into three logical layers: `src/main` (Electron backend), `src/renderer` (React frontend), and `src/shared` (common utilities used by both processes).**

This directory structure reflects Munder-Difflin's architecture as an Electron-based multi-agent workspace. According to the [chaitanyagiri/munder-difflin](https://github.com/chaitanyagiri/munder-difflin) source code, the `src` folder isolates backend orchestration from UI presentation while maintaining type safety through shared modules.

## The Three Layers of the `src` Directory

### `src/main`: Electron Main Process

The `src/main` folder implements the **backend layer** that boots the application and manages system-level resources.

**Entry point:** [[`src/main/index.ts`](https://github.com/chaitanyagiri/munder-difflin/blob/main/src/main/index.ts)](https://github.com/chaitanyagiri/munder-difflin/blob/main/src/main/index.ts)

This file wires together core services:

- **Electron lifecycle** – Creates the primary `BrowserWindow`, configures power-save blockers, and handles uncaught exceptions
- **PTY management** – Spawns agent shells, tracks PTY-to-agent mappings, and cleans up worktrees (lines 101-120)
- **Hive & integrations** – Runs the `HiveManager`, `IntegrationBroker`, and registers remote-control daemons for Codex
- **Scheduling & missions** – Loads missions from configuration, arms timers via `syncMissions`, and drives periodic heartbeats

Keeping these in `src/main` ensures Electron-specific logic remains isolated from the UI code.

### `src/renderer`: React Frontend Process

The `src/renderer` folder contains the **frontend layer** that renders the virtual office and handles user interaction.

**Entry point:** [[`src/renderer/src/App.tsx`](https://github.com/chaitanyagiri/munder-difflin/blob/main/src/renderer/src/App.tsx)](https://github.com/chaitanyagiri/munder-difflin/blob/main/src/renderer/src/App.tsx)

Key subsystems include:

- **Scene graph** – [[`OfficeFloor.tsx`](https://github.com/chaitanyagiri/munder-difflin/blob/main/OfficeFloor.tsx)](https://github.com/chaitanyagiri/munder-difflin/blob/main/src/renderer/src/scene/office/OfficeFloor.tsx) and [[`Camera.tsx`](https://github.com/chaitanyagiri/munder-difflin/blob/main/Camera.tsx)](https://github.com/chaitanyagiri/munder-difflin/blob/main/src/renderer/src/scene/office/Camera.tsx) render the animated office environment
- **IDE integration** – [[`MonacoEditor.tsx`](https://github.com/chaitanyagiri/munder-difflin/blob/main/MonacoEditor.tsx)](https://github.com/chaitanyagiri/munder-difflin/blob/main/src/renderer/src/ide/MonacoEditor.tsx) embeds the Monaco code editor for in-place file editing
- **Real-time UI** – Modules like [[`CostHud.tsx`](https://github.com/chaitanyagiri/munder-difflin/blob/main/CostHud.tsx)](https://github.com/chaitanyagiri/munder-difflin/blob/main/src/renderer/src/realtime/CostHud.tsx) display token usage, completion toasts, and device pickers

The renderer imports shared types (e.g., `ToolStatus`, `AgentProvider`) from `src/shared`, ensuring both processes use identical data structures.

### `src/shared`: Cross-Process Utilities

The `src/shared` folder provides **common code** that both main and renderer processes import.

Critical files include:

| File | Purpose |
|------|---------|
| [[`triggers.ts`](https://github.com/chaitanyagiri/munder-difflin/blob/main/triggers.ts)](https://github.com/chaitanyagiri/munder-difflin/blob/main/src/shared/triggers.ts) | Defines trigger schema, default rules, and context-driven action helpers |
| [[`toolCatalog.ts`](https://github.com/chaitanyagiri/munder-difflin/blob/main/toolCatalog.ts)](https://github.com/chaitanyagiri/munder-difflin/blob/main/src/shared/toolCatalog.ts) | Provides runtime status for external tools (Codex, Claude) |
| [[`agentProvider.ts`](https://github.com/chaitanyagiri/munder-difflin/blob/main/agentProvider.ts)](https://github.com/chaitanyagiri/munder-difflin/blob/main/src/shared/agentProvider.ts) | Detects which LLM provider to use for a given agent |

These modules prevent duplication and keep both processes synchronized on capabilities, configuration, and runtime state.

## Code Examples: Working with the `src` Directory

### Spawning an Agent from `src/main`

```typescript
// src/main/index.ts (excerpt)
import { spawnAgentCore } from './agent';
...
// Create a new PTY and register the agent
void spawnAgentCore({
  command: 'claude',
  args: [],
  cwd: '/path/to/project',
  isolate: true,
}, null);

```

The `spawnAgentCore` function lives in the main process and uses the shared `toolCatalog` to resolve the LLM binary before launching a PTY.

### Using Shared Triggers in `src/renderer`

```tsx
// src/renderer/src/components/triggers/TriggersTab.tsx
import { contextRule } from '../../../../../shared/triggers';

// React hook that enables the "compact" context trigger
useEffect(() => {
  const rule = contextRule('compact');
  if (rule.enabled) {
    // Send an IPC message to the main process to schedule the trigger
    window.electron.ipcRenderer.send('trigger:context', { action: 'compact', rule });
  }
}, []);

```

The renderer reads the same trigger definitions that the main process uses, guaranteeing consistent behavior across the application boundary.

### Adding a Component to the Office Scene

```tsx
// src/renderer/src/scene/office/NewFeature.tsx
import React from 'react';
import { useAgent } from '../../hooks';

export const NewFeature = () => {
  const agent = useAgent('agent-id');
  return <div className="new-feature">Hello, {agent?.name}!</div>;
};

```

After creating the component, import it in [[`OfficeFloor.tsx`](https://github.com/chaitanyagiri/munder-difflin/blob/main/OfficeFloor.tsx)](https://github.com/chaitanyagiri/munder-difflin/blob/main/src/renderer/src/scene/office/OfficeFloor.tsx) to render it in the virtual office.

## Key Files in the `src` Directory Structure

| File | Location | Description |
|------|----------|-------------|
| [`index.ts`](https://github.com/chaitanyagiri/munder-difflin/blob/main/index.ts) | `src/main/` | Entry point for Electron main process – PTYs, Hive, scheduling, IPC |
| [`App.tsx`](https://github.com/chaitanyagiri/munder-difflin/blob/main/App.tsx) | `src/renderer/src/` | Root React component; bootstraps UI and connects to main process |
| [`triggers.ts`](https://github.com/chaitanyagiri/munder-difflin/blob/main/triggers.ts) | `src/shared/` | Central definition of context triggers and default rules |
| [`toolCatalog.ts`](https://github.com/chaitanyagiri/munder-difflin/blob/main/toolCatalog.ts) | `src/shared/` | Runtime status and discovery for external AI tools |
| [`OfficeFloor.tsx`](https://github.com/chaitanyagiri/munder-difflin/blob/main/OfficeFloor.tsx) | `src/renderer/src/scene/office/` | Renders main office scene with agents, desks, and UI layers |
| [`MonacoEditor.tsx`](https://github.com/chaitanyagiri/munder-difflin/blob/main/MonacoEditor.tsx) | `src/renderer/src/ide/` | Embeds Monaco editor for agent file editing |

These files demonstrate how the `src` directory enables **clean separation of concerns** while supporting tight integration across Munder-Difflin's entire system.

## Summary

- The `src` directory is the **single source of all application code** in Munder-Difflin
- **`src/main`** handles Electron backend concerns: window management, PTY spawning, scheduling, and integrations
- **`src/renderer`** implements the React frontend: scene graph, IDE embedding, and real-time UI components
- **`src/shared`** provides type-safe utilities that both processes import, preventing duplication and drift
- This three-layer structure supports Munder-Difflin's multi-agent, AI-driven workspace architecture

## Frequently Asked Questions

### Why does Munder-Difflin separate `src/main` and `src/renderer`?

Electron applications run two distinct processes with different privileges and capabilities. The **main process** has full OS access but no DOM, while the **renderer process** renders HTML but is sandboxed. Separating them in `src/main` and `src/renderer` enforces this architectural boundary and prevents accidental imports of Node.js APIs into browser code.

### What belongs in `src/shared` versus process-specific folders?

Place code in `src/shared` only when **both processes need identical definitions**—typically TypeScript interfaces, utility functions, and pure logic. Process-specific code like `BrowserWindow` configuration belongs in `src/main`; React hooks and JSX components belong in `src/renderer`. The [`src/shared/triggers.ts`](https://github.com/chaitanyagiri/munder-difflin/blob/main/src/shared/triggers.ts) module is a good example: it defines trigger schemas used for IPC validation in the main process and UI rendering in the renderer.

### How do files in `src` communicate across process boundaries?

They use **Electron's IPC (Inter-Process Communication) channels**. The renderer calls `window.electron.ipcRenderer.send()` to emit events, and the main process registers handlers via `ipcMain.on()`. Both sides import shared type definitions from `src/shared` to ensure message payloads remain compatible as the codebase evolves.

### Can I add new directories under `src` without breaking the build?

Yes, provided you respect the process boundaries. New folders under `src/main` or `src/renderer/src` integrate automatically with the existing build pipeline. For cross-cutting concerns, create modules under `src/shared` and import them explicitly in both processes. Avoid importing `src/main` code into `src/renderer` or vice versa—TypeScript and Electron's context isolation will flag or runtime-error these violations.