Before you begin
Install Panolayer and sign in. See Install and set up Panolayer if you haven't done that yet.
This tutorial uses Panolayer Agent, which is built in and ready to use. You can also use any other supported agent after installing it from the Marketplace. See Supported agents for setup guidance.
Open the Twitter example
On Panolayer's opening screen, find Try a sample app and choose Twitter
Clone. Panolayer prepares the example and opens it as twitter-starter.
Let the verification engine run
When you open a codebase, the Panolayer verification engine starts running. It parses the codebase down to its functions, symbols, and dependencies, builds the visual architecture, and checks the code to identify bugs.
Verification works at the function level. An issue can show which function failed a rule, what went wrong, and which callers may be affected. This gives you a place to start even when you didn't write the code.
Wait for Verification complete. The issues it finds appear in the same window, on the Issues page under Needs attention.
Look at the first issue
You can click Details on any issue to learn more about the bug and the code involved. Follow the explanation back to its source location to understand why the function was flagged. Severity labels help you decide what needs attention first.
For this walkthrough, we’ll fix the saved-posts issue in components/SavedPosts.tsx, in the clearSaved() function. The issue says the async callback passed to forEach is never awaited, so the function returns before the bookmark removals finish. Open Details to read the explanation and see the source locations.
Your issue order and counts may differ. Look for the clearSaved() issue in components/SavedPosts.tsx, or use the issue search to find clearSaved.
Click Fix and choose Panolayer Agent
Click Fix on that issue. A menu opens with Panolayer Agent and any other agents you have installed.
Choose Panolayer Agent. Panolayer passes the issue and its context to the agent and starts the work. The function, failed rule, and affected callers give the agent a starting point, so you don't need to explain the codebase from scratch or write a prompt yourself.
Follow the agent's work
Panolayer opens My Agents, where you can see the task running. The agent works in its own Git worktree: a separate checkout of the repository where it can edit and test the code. Its changes stay separate from your branch until you approve the merge.
Click Open to see exactly what the agent is doing. The Stream view shows its activity, including the files it reads, changes it makes, and checks it runs. You can also explore the run's Tasks and Changes tabs.
As files change, Panolayer checks the affected functions and connected code to help catch regressions beyond the edited lines. It separates newly introduced failures from issues that were already there when the task started.
Review the result and merge
When the agent finishes, Panolayer presents a verification summary and asks whether you want to merge the change. You decide what moves from the agent's worktree into your branch.
Review Failures repaired, Rules passed, Verification runs, and Files changed. The summary also identifies pre-existing failures separately from new problems. Click Details if you want to inspect the result further. The numbers will depend on your run.
Once you're satisfied, confirm the target branch and click Merge into main. Panolayer brings the agent's work into the sample's main workspace and records it in local Git history. The Merged into main confirmation shows the commit ID, so you don't need a separate commit action for this workflow.
Choose Done, then open Changes in the sidebar. Check History for the merge and confirm that there are no uncommitted file changes.
You've fixed a bug found by the verification engine, reviewed the agent's result, and saved the change locally.