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.
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.
For the complete issue-to-agent workflow, follow Fix your first bug with Panolayer. For help reading the statuses and failure details, see Understand a verification result.
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.
To start building or fixing code after exploring the architecture, read Run an agent on your repository.