# How to Find Specific Code for a Feature in OpenWork: A Repository Navigation Guide

> Discover how to find specific code for any feature in OpenWork. Navigate the TypeScript monorepo efficiently by following entry points, components, state, and API calls.

- Repository: [Different AI/openwork](https://github.com/different-ai/openwork)
- Tags: how-to-guide
- Published: 2026-08-14

---

**To find specific code for a feature in OpenWork, search the TypeScript monorepo by identifying the feature's entry point in [`apps/desktop/src/App.tsx`](https://github.com/different-ai/openwork/blob/main/apps/desktop/src/App.tsx), tracing React components through `packages/ui/`, state through `packages/state/`, and API calls through `packages/api/` or `ee/apps/den-api/`, using `ripgrep` to locate identifiers across the codebase.**

OpenWork organizes its codebase as a monorepo that separates desktop UI, shared libraries, and enterprise server components. Understanding how to find specific code for a feature in OpenWork requires navigating these distinct architectural layers and leveraging the repository's documentation and search capabilities.

## Understanding OpenWork's Monorepo Architecture

The codebase partitions functionality into five primary layers. Knowing these boundaries helps you narrow down where a feature's implementation lives.

- **Desktop UI**: Located in `apps/` and `packages/`, containing the Electron-based client, React components, Zustand state management, and Tailwind/shadcn/ui styling.
- **MCP Gateway**: Found in `ee/apps/den-api/`, this is the remote MCP endpoint at `api.openworklabs.com/mcp/agent` that proxies skills, plugins, and third-party connections.
- **Control Plane (Den)**: Enterprise services in `ee/apps/den-*` handling team management, model provisioning, and policy enforcement.
- **Core Library**: Reusable TypeScript primitives in `packages/` for auth, queries, storage, and model adapters used by both desktop and server.
- **Documentation**: Design docs and PRDs in `docs/`, `prds/`, and [`AGENTS.md`](https://github.com/different-ai/openwork/blob/main/AGENTS.md) providing high-level architecture overviews.

## Step-by-Step Guide to Locate Feature Code

### Start with High-Level Documentation

Before diving into source files, consult [`AGENTS.md`](https://github.com/different-ai/openwork/blob/main/AGENTS.md) at the repository root to understand the three main surfaces of OpenWork. For feature-specific requirements, check the PRDs in `prds/`—for example, the skill-sharing specification lives at [`prds/skill-sharing/grant-native-skill-sharing.md`](https://github.com/different-ai/openwork/blob/main/prds/skill-sharing/grant-native-skill-sharing.md).

### Identify the UI Entry Point

Most visible features begin in the desktop application. The root React tree initializes in [`apps/desktop/src/App.tsx`](https://github.com/different-ai/openwork/blob/main/apps/desktop/src/App.tsx), with the Electron renderer bootstrapped from [`apps/desktop/src/main.tsx`](https://github.com/different-ai/openwork/blob/main/apps/desktop/src/main.tsx). If searching for a UI element like a dark-mode toggle, start in [`packages/ui/src/DarkModeToggle.tsx`](https://github.com/different-ai/openwork/blob/main/packages/ui/src/DarkModeToggle.tsx).

### Search for Feature Identifiers

Use text search tools to locate specific strings across the repository. For example, to find all code related to theme switching:

```bash
rg "darkMode"

```

This surfaces the component definition, store slice, and API endpoints simultaneously.

### Trace Component Hierarchy and State

Once you locate a component file like [`packages/ui/src/DarkModeToggle.tsx`](https://github.com/different-ai/openwork/blob/main/packages/ui/src/DarkModeToggle.tsx), examine its imports to find state management. State typically lives in Zustand stores under `packages/state/`, such as [`packages/state/src/themeStore.ts`](https://github.com/different-ai/openwork/blob/main/packages/state/src/themeStore.ts).

### Follow the Backend Call Chain

If the feature syncs with servers, trace calls from the UI to the API client in `packages/api/`. For instance, a `toggleTheme()` call originates in the component, passes through [`packages/api/src/theme.ts`](https://github.com/different-ai/openwork/blob/main/packages/api/src/theme.ts), and may reach the MCP Gateway in `ee/apps/den-api/`.

## Essential File Paths for Feature Discovery

Bookmark these critical files when learning how to find specific code for a feature in OpenWork:

- **Repository Overview**: [`AGENTS.md`](https://github.com/different-ai/openwork/blob/main/AGENTS.md) explains the main surfaces and directory purposes.
- **Desktop Entry**: [`apps/desktop/src/main.tsx`](https://github.com/different-ai/openwork/blob/main/apps/desktop/src/main.tsx) bootstraps the Electron renderer.
- **UI Components**: [`packages/ui/src/DarkModeToggle.tsx`](https://github.com/different-ai/openwork/blob/main/packages/ui/src/DarkModeToggle.tsx) (and adjacent files) contain shared React components.
- **State Management**: [`packages/state/src/themeStore.ts`](https://github.com/different-ai/openwork/blob/main/packages/state/src/themeStore.ts) demonstrates Zustand store patterns.
- **API Client**: [`packages/api/src/theme.ts`](https://github.com/different-ai/openwork/blob/main/packages/api/src/theme.ts) shows how frontend features communicate with backends.
- **Design Specs**: [`prds/skill-sharing/grant-native-skill-sharing.md`](https://github.com/different-ai/openwork/blob/main/prds/skill-sharing/grant-native-skill-sharing.md) provides feature requirements and expected code paths.

## Code Examples for Tracing Features

Here are practical commands and patterns for locating implementation details.

**Searching with ripgrep**

To find every occurrence of a feature identifier like "skillSearch":

```bash
rg "skillSearch"

```

This respects `.gitignore` and searches across TypeScript, TSX, and configuration files.

**Navigating in VS Code**

1. Open the component file, such as [`SkillSearch.tsx`](https://github.com/different-ai/openwork/blob/main/SkillSearch.tsx).
2. Right-click the function name and select "Go to Definition".
3. Follow imports to the Zustand store at [`packages/state/src/skillStore.ts`](https://github.com/different-ai/openwork/blob/main/packages/state/src/skillStore.ts).

**Tracing API Calls**

When investigating how a UI action reaches the server, examine the import chain:

```typescript
import { toggleTheme } from '@/api/theme';

export async function onToggleDarkMode(enabled: boolean) {
  await toggleTheme({ darkMode: enabled });
  // Local store updates after API confirmation
}

```

The `toggleTheme` implementation resides in [`packages/api/src/theme.ts`](https://github.com/different-ai/openwork/blob/main/packages/api/src/theme.ts), which handles the HTTP request to the OpenWork backend.

## Summary

- OpenWork uses a monorepo structure separating desktop (`apps/`), shared libraries (`packages/`), and enterprise services (`ee/apps/den-*`).
- To find specific code for a feature in OpenWork, begin with documentation in [`AGENTS.md`](https://github.com/different-ai/openwork/blob/main/AGENTS.md) and `prds/`, then search for identifiers using `ripgrep`.
- UI features typically flow from [`apps/desktop/src/App.tsx`](https://github.com/different-ai/openwork/blob/main/apps/desktop/src/App.tsx) → `packages/ui/` components → `packages/state/` stores → `packages/api/` clients.
- Backend-specific logic for enterprise features lives in `ee/apps/den-api/` and related control plane services.

## Frequently Asked Questions

### How is the OpenWork codebase organized?

OpenWork follows a monorepo pattern with three main regions: the desktop application in `apps/`, shared TypeScript libraries in `packages/`, and enterprise server components in `ee/apps/den-*` for the MCP Gateway and control plane services.

### Where do I find React components in OpenWork?

React components live primarily in `packages/ui/src/` for shared elements and `apps/desktop/src/` for application-specific views. The component library uses Tailwind CSS and shadcn/ui patterns, with state managed by Zustand stores in `packages/state/`.

### How do I trace a feature from the UI to the backend?

Start at the UI entry point in [`apps/desktop/src/App.tsx`](https://github.com/different-ai/openwork/blob/main/apps/desktop/src/App.tsx), locate the specific component in `packages/ui/`, follow its imports to the state store in `packages/state/`, then trace API calls to `packages/api/`. Enterprise features may continue into `ee/apps/den-api/` for server-side processing.

### What are PRDs in the OpenWork repository?

PRDs (Product Requirements Documents) reside in the `prds/` directory and contain high-level feature specifications. For example, [`prds/skill-sharing/grant-native-skill-sharing.md`](https://github.com/different-ai/openwork/blob/main/prds/skill-sharing/grant-native-skill-sharing.md) explains the skill-sharing feature's expected behavior and identifies which code paths implement the functionality.