Diff View

Understanding the Diff

A diff (short for "difference") is a structured representation of changes between two versions of a file. In Glassbrain, diffs are generated by the AI suggestion engine and show the minimal set of changes needed to fix an error.

The diff view in the Glassbrain dashboard renders these changes with syntax highlighting, line numbers, and color coding. You can view the diff in unified mode (single column with additions and removals inline) or split mode (two columns showing the before and after side by side).

Each diff is scoped to a single file. If a suggestion involves changes to multiple files, each file gets its own diff section with a file path header.

How Diffs Are Generated

When the AI suggestion engine analyzes a trace, it identifies the file and line range where the error originates. The engine then generates a corrected version of the affected code and produces a unified diff between the original and corrected versions.

The diff generation process:

1. The engine extracts the relevant code section from the stack trace and source map data
2. It generates a corrected version of the code that addresses the root cause of the error
3. A unified diff is computed between the original and corrected code, including 3 lines of context above and below each change
4. The diff is stored as part of the suggestion object and rendered in the dashboard

The engine includes enough context lines around each change so you can understand where in the file the change is located without needing to open the file separately.

Reading the Diff

The diff uses three visual indicators to distinguish between different types of lines:

Additions (Green)

Lines highlighted in green with a + prefix are new code that should be added. These lines exist in the corrected version but not in the original. In the split view, additions appear on the right side.

Removals (Red)

Lines highlighted in red with a - prefix are original code that should be removed. These lines exist in the current version but are removed in the fix. In the split view, removals appear on the left side.

Context Lines

Lines without a prefix or color highlighting are context lines. They appear in both the original and corrected versions and are included to help you understand where in the file the change is located. Context lines are not modified by the suggestion.

In the example above, the two context lines before and after the change show the JSX structure surrounding the modified line, making it clear that the change is inside a component's return statement.

Diff Format Details

Glassbrain stores diffs in the standard unified diff format. This is the same format used by git diff and is compatible with tools like git apply and patch.

--- a/components/UserList.tsx
+++ b/components/UserList.tsx
@@ -12,7 +12,7 @@
 export function UserList({ users }: UserListProps) {
   return (
     <ul>
-      {users.map((user) => (
+      {(users ?? []).map((user) => (
         <li key={user.id}>{user.name}</li>
       ))}
     </ul>

The diff header lines show the file paths. The @@ line indicates the line range - in this example, starting at line 12 with 7 lines of context. Lines prefixed with - are removed, lines prefixed with + are added, and lines with a space prefix are unchanged context.

To apply a diff from the API response to your codebase, save the code_diff field to a file and run git apply fix.patch. Alternatively, use the "Copy Diff" button in the dashboard.

Plan Limits

Diff view generation is tied to AI fix suggestions. The number of diffs you can generate per month depends on your plan:

Previously generated diffs can always be viewed regardless of your current month's usage. The limit applies only to generating new diffs. Your limit resets on the first day of each calendar month.