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

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, 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 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 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.

Identify the UI Entry Point

Most visible features begin in the desktop application. The root React tree initializes in apps/desktop/src/App.tsx, with the Electron renderer bootstrapped from apps/desktop/src/main.tsx. If searching for a UI element like a dark-mode toggle, start in 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:

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, examine its imports to find state management. State typically lives in Zustand stores under packages/state/, such as 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, 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 explains the main surfaces and directory purposes.
• Desktop Entry: apps/desktop/src/main.tsx bootstraps the Electron renderer.
• UI Components: packages/ui/src/DarkModeToggle.tsx (and adjacent files) contain shared React components.
• State Management: packages/state/src/themeStore.ts demonstrates Zustand store patterns.
• API Client: packages/api/src/theme.ts shows how frontend features communicate with backends.
• Design Specs: 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":

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.
2. Right-click the function name and select "Go to Definition".
3. Follow imports to the Zustand store at packages/state/src/skillStore.ts.

Tracing API Calls

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

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, 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 and prds/, then search for identifiers using ripgrep.
• UI features typically flow from 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, 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 explains the skill-sharing feature's expected behavior and identifies which code paths implement the functionality.

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