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

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 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)

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)

Key subsystems include:

• Scene graph – [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/src/renderer/src/scene/office/Camera.tsx) render the animated office environment
• IDE integration – [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/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/src/shared/triggers.ts)	Defines trigger schema, default rules, and context-driven action helpers
[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/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

// 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

// 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

// 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/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	src/main/	Entry point for Electron main process – PTYs, Hive, scheduling, IPC
App.tsx	src/renderer/src/	Root React component; bootstraps UI and connects to main process
triggers.ts	src/shared/	Central definition of context triggers and default rules
toolCatalog.ts	src/shared/	Runtime status and discovery for external AI tools
OfficeFloor.tsx	src/renderer/src/scene/office/	Renders main office scene with agents, desks, and UI layers
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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}