--- title: "Fix your first bug with Panolayer" description: "Fix a bug in Panolayer's Twitter example with the built-in agent. Review verification results, approve the merge, and save the change in Git." url: https://panolayer.com/docs/first-bug type: HOW-TO updated: 2026-10-21 --- # Fix your first bug with Panolayer Fix a bug in Panolayer's Twitter example with the built-in agent. Review verification results, approve the merge, and save the change in Git. Last updated 2026-10-21 ## Before you begin Install Panolayer and sign in. See [Install and set up Panolayer](/docs/getting-started) 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](/docs/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**. ![The Issues page after verification, with detected issues listed under Needs attention.](/docs/first-bug/02-verification-issues.png) ## 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. ![Full expanded Details view for the Twitter example’s clearSaved and clearAll issues in components/SavedPosts.tsx, including the failure explanations and source locations.](/docs/first-bug/03-issue-details.png "Details explains both saved-posts issues and links to their source lines. We’ll fix clearSaved, the first issue in this view.") 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. ![Fix menu open on an issue in the Twitter example, showing Panolayer Agent and installed Marketplace agents including Claude Code, Codex CLI, Kilo Code CLI, and OpenCode.](/docs/first-bug/04-fix-agent-menu.png "Choose Panolayer Agent from the Fix menu. The menu also lists other agents you have installed.") ## 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. ![Panolayer Agent working on the Twitter example in My Agents, with a Subagents running card showing progress and an Open button on the right.](/docs/first-bug/05-agent-running.png "My Agents shows the task’s progress in the conversation. Choose Open on the run card for more detail.") 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. ![The Twitter example’s agent run open in Stream, showing the activity timeline, commands, and a selected command’s details in the right-hand panel.](/docs/first-bug/06-run-details.png "Open lets you follow the run in detail. Select a Stream entry to inspect the command and its output in the right-hand panel.") 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. ![The saved-posts fix ready-to-merge dialog showing 2 failures repaired, 4 of 5 rules passed, 1 verification run, 2 files changed, and 1 pre-existing failure.](/docs/first-bug/08-saved-posts-review-merge.png "Review the verification summary for the saved-posts fix, then choose Merge into main when you’re ready.") 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. ## Continue learning - [Install and set up Panolayer](/docs/getting-started) - [Understand a verification result](/docs/verification-results) - [Run an agent on your repository](/docs/running-agents) - [Review changes and commit](/docs/changes)