--- title: "Explore architecture and dependencies" description: "Understand how your code fits together, what depends on what, where bugs are, and what they touch. Use the architecture map and search to move from a feature to its source." url: https://panolayer.com/docs/architecture type: EXPLANATION updated: 2026-10-21 --- # Explore architecture and dependencies Understand how your code fits together, what depends on what, where bugs are, and what they touch. Use the architecture map and search to move from a feature to its source. Last updated 2026-10-21 ## Start with your codebase Open your repository, then choose **Architecture** in the sidebar. Panolayer maps the codebase so you can explore its groups, files, functions, and connections without knowing every filename first. Follow along with your own code. The screenshots below use the **Twitter Clone** sample, opened as **twitter-starter**. Your project will have different groups, files, and issue counts. Click a node to expand it and reveal the next level of the architecture. Keep clicking through the nodes to move from the whole application to the part you want to understand. In this example, **UI Components → components → Saved Posts** leads to `SavedPosts` and its functions. The **Diagram** and **Column** controls give you different ways to browse the structure. ![The Twitter example’s architecture map expanded through UI Components and Saved Posts to SavedPosts, clearSaved, and clearAll, with red issue badges along the path.](/docs/getting-started/03-architecture-map.png "Start with the whole codebase, then click the nodes to find the feature and functions you need. Red badges show where issues sit within that structure.") ## Read a function in context Open a function’s source from the map to read its description, verification results, and code together. The breadcrumb shows how you reached it, so you can move back through the architecture as you investigate. In the Twitter example, open **SavedPosts → clearAll**. The source view shows `clearAll` at line 19 in `components/SavedPosts.tsx`. You can see that it calls `clearSaved` before resetting the saved-post list. This connects the visible **Clear all** behavior to the helper it relies on. When you’re planning a change, follow the connected code and inspect the functions it uses and the callers that depend on it. For this example, changing when `clearSaved` finishes can affect when `clearAll` updates the interface. Understanding that relationship helps you decide what else to inspect and test. ## Find a symbol, file, or feature Use the search field at the top of the Panolayer window, labeled **Search architecture, symbols, files…**, when you know a name but don’t know where it lives. - Search for **SavedPosts** to find the component in this example. - Search for **clearSaved** to locate the bookmark-removal helper. - Search for a filename such as **SavedPosts.tsx** when you want to open the file directly. Choose a matching result to navigate to it. Check the file path and function name so you know you’ve reached the right part of the codebase. You can also ask a question in plain English, such as “How are saved posts cleared?” Use the linked code to inspect the answer, or continue the conversation with **Panolayer Agent** when you need more context. If indexing is still running, architecture and symbol results may be incomplete; let it finish and search again. ## Trace a bug to the source and choose an agent There are two ways to follow a bug from the architecture map: - **Follow the nodes.** Look for a red issue badge, click the node to expand it, and keep following the nodes with red badges until you reach the affected function and its source line. - **Click the red badge directly.** You can do this at any point in the map to jump straight to the line of code for that bug. In the Twitter example, the path **UI Components → components → Saved Posts → SavedPosts → clearAll** leads to the saved-posts code. The source view opens on the right, with the failure explanation beside the relevant code. Here, `clearAll` can clear the interface before its helper, `clearSaved`, finishes removing bookmarks. Click **Fix** in the code panel on the right, beside the failure explanation. A menu opens where you can select **Panolayer Agent** or another agent you’ve installed in Panolayer, such as **Claude Code**, **Codex CLI**, **Kilo Code CLI**, or **OpenCode**. ![The Architecture source view for SavedPosts.tsx, with clearAll at line 19 and a Fix button in the code panel on the right.](/docs/getting-started/04-architecture-source.png "From Architecture, follow the bug to its source and click Fix in the code panel on the right. Then choose the agent you want to use.") For the complete issue-to-agent workflow, follow [Fix your first bug with Panolayer](/docs/first-bug). For help reading the statuses and failure details, see [Understand a verification result](/docs/verification-results). ## Control which files agents can access While you’re inspecting a file, scroll down in its details panel to the file controls. These let you set boundaries before starting agent work. - **Lock File**, under **Implementation Lock**, prevents AI agents from modifying the file. - **Hide from Agents**, under **Container Agent Access**, prevents new container agents from reading the file. Existing agent sessions are unchanged. ![The SavedPosts.tsx details panel showing Lock File under Implementation Lock and Hide from Agents under Container Agent Access.](/docs/getting-started/05-file-agent-access.png "Lock a file to prevent agent edits, or hide it from new container agent sessions. Hiding a file does not change sessions that are already running.") To start building or fixing code after exploring the architecture, read [Run an agent on your repository](/docs/running-agents). ## Continue learning - [Fix your first bug with Panolayer](/docs/first-bug) - [Understand a verification result](/docs/verification-results) - [Run an agent on your repository](/docs/running-agents)