Foldr

A Macintosh System 1 (1984) desktop UI for visualizing and managing AI agent hierarchies. Each company is a folder. Each folder contains agents. Each agent has sub-agents, skills, MCP connections, memory, and config — all accessible through an authentic 1-bit monochrome interface.

What it does

• Desktop metaphor — companies are folders on a classic Mac desktop; double-click to open
• Agent hierarchy — parent agents (departments) with draggable sub-agent canvases; circular dependency prevention built in
• Agent detail — per-agent view shows model config (claude-opus-4-6 / claude-sonnet-4-6), context window usage, skills (SOPs), MCP connections, memory log, and PRD/documentation
• Project settings — shared MCP connections, environment variables, and agent registry per project
• Context menu — right-click on desktop for quick actions
• Interactive tutorial — welcome dialog walks through the interface on first load
• Authentic Mac System 1 aesthetic — 1-bit monochrome, pixelated Chicago font, hard rectangular windows, title bar stripe patterns

Tech stack

• React 19 + TypeScript
• Vite
• Zustand (desktop, window, agent, navigation stores)
• CSS Modules + custom mac-system.css design system

Project structure

src/
├── components/
│   ├── core/
│   │   ├── Desktop/          # Main canvas, icon grid
│   │   ├── MenuBar/          # Top menu bar with dropdowns
│   │   ├── Icon/             # Folder icons (SVG)
│   │   ├── Window/           # Draggable, focusable windows
│   │   ├── Dialog/           # Welcome dialog, interactive tutorial
│   │   ├── ContextMenu/      # Right-click menu
│   │   └── ProjectInfoPanel/ # Sidebar project metadata
│   └── views/
│       ├── ProjectView/       # Agent list inside a project window
│       ├── SubAgentCanvas/    # Drag-to-connect sub-agent graph
│       ├── AgentConfigWindow/ # Model settings, context window, MCP, memory
│       └── ProjectSettingsWindow/ # Shared MCPs, env vars, registry
├── store/
│   ├── desktopStore.ts       # Icon positions and selection
│   ├── windowStore.ts        # Open windows, z-index, focus
│   ├── agentStore.ts         # Agent state and connections
│   └── navigationStore.ts    # View routing within windows
├── hooks/
│   ├── useDraggable.ts       # Window and icon drag
│   ├── useDoubleClick.ts     # Single vs double click detection
│   └── useAgentConnect.ts    # Sub-agent drag-to-connect with cycle detection
├── types/
│   ├── desktop.ts            # DesktopIcon, ProjectData, Agent, Skill, MCPConnection, Memory
│   └── window.ts             # WindowState, WindowContent
├── data/
│   └── mockProjects.ts       # Three example companies (Acme Corp, TechStart Inc, Creative Agency Co)
├── utils/
│   ├── harnessParser.ts      # HARNESS.md parsing utilities
│   └── markdown.ts           # Markdown rendering helpers
└── styles/
    ├── mac-system.css        # Design tokens, 1-bit palette, Chicago font stack
    ├── fonts.css             # Font face declarations
    └── reset.css             # Base reset

Getting started

npm install
npm run dev

Open http://localhost:5173. Double-click a folder to open a project.

npm run build    # production build
npm run preview  # preview build locally
npm run lint     # ESLint

Data model

Each project contains:

• agents[] — department-level agents with full config
• config.sharedMCPConnections — MCP servers available to all agents
• config.environmentVariables — project-scoped env vars
• config.agentRegistry — hierarchy map (parent → children)

Each agent contains:

• config — model, maxTokens, temperature, contextWindow usage
• skills[] — reusable SOPs with file paths
• mcpConnections[] — Gmail, Notion, Slack, Salesforce, etc.
• memory[] — dated entries (preference / correction / pattern / contact)
• documentation — CLAUDE.md content
• prd — product requirements doc
• parentAgentId (optional) — makes it a sub-agent

Embedding as a component library

Foldr's core Mac UI components are self-contained and can be embedded into any React app:

import { Desktop } from './src/components/core/Desktop'
import { Window } from './src/components/core/Window'
import { MenuBar } from './src/components/core/MenuBar'

The design system lives in src/styles/mac-system.css — import it once at the root level.

License

MIT — see LICENSE for details.