[GH-ISSUE #587] feat: Show parent function/class context in diff hunk headers #159

New issue

Open

opened 2026-03-02 23:44:58 +03:00 by kerem · 2 comments

kerem commented

2026-03-02 23:44:58 +03:00

Owner

Originally created by @remorses on GitHub (Jan 25, 2026).
Original GitHub issue: https://github.com/anomalyco/opentui/issues/587

Similar to GitHub's diff view, it would be helpful to see which function/method/class a diff hunk belongs to. This provides immediate context about where changes are happening.

Example

Current:

  6    return a + b;
  7  }
  8
  9 -  subtract(a, b) {
    +  subtract(a, b, c = 0) {
 10 -    return a - b;
    +    return a - b - c;
 11    }

With parent context:

 @@  class Calculator
  6    return a + b;
  7  }
  8
  9 -  subtract(a, b) {
    +  subtract(a, b, c = 0) {
 10 -    return a - b;
    +    return a - b - c;
 11    }

 @@  multiply(a, b)
 18    return a * b;
 19  }
 20 +
    +  divide(a, b) {
    +    return a / b;
    +  }

The @@ lines would be styled like dimmed context lines, showing the enclosing scope for each hunk.

Implementation idea

Use tree-sitter to query for scope-defining nodes (functions, methods, classes) and find the enclosing scope for each hunk's starting line.

Originally created by @remorses on GitHub (Jan 25, 2026). Original GitHub issue: https://github.com/anomalyco/opentui/issues/587 Similar to GitHub's diff view, it would be helpful to see which function/method/class a diff hunk belongs to. This provides immediate context about where changes are happening. **Example** Current: ```patch 6 return a + b; 7 } 8 9 - subtract(a, b) { + subtract(a, b, c = 0) { 10 - return a - b; + return a - b - c; 11 } ``` With parent context: ```patch @@ class Calculator 6 return a + b; 7 } 8 9 - subtract(a, b) { + subtract(a, b, c = 0) { 10 - return a - b; + return a - b - c; 11 } @@ multiply(a, b) 18 return a * b; 19 } 20 + + divide(a, b) { + return a / b; + } ``` The `@@` lines would be styled like dimmed context lines, showing the enclosing scope for each hunk. **Implementation idea** Use tree-sitter to query for scope-defining nodes (functions, methods, classes) and find the enclosing scope for each hunk's starting line.

kerem added the

feature

core

labels

2026-03-02 23:44:58 +03:00

kerem commented

2026-03-02 23:44:59 +03:00

Author

Owner

@kommander commented on GitHub (Jan 26, 2026):

Treesitter currently has metadata for the highlights, maybe it could be returned with that? I would try to avoid parsing twice. But styling happens lazily in the CodeRenderable. Tricky.

One approach could be to optionally use a persistent treesitter parser (already kind of exists in the treesitter worker) and fetch info from that through the CodeRenderable, then it doesn't have to create another parser and parse again. Overhead is memory then though as it will keep the code + the tree in memory all the time. And it gets complex.

@kommander commented on GitHub (Jan 26, 2026): Treesitter currently has `metadata` for the highlights, maybe it could be returned with that? I would try to avoid parsing twice. But styling happens lazily in the CodeRenderable. Tricky. One approach could be to optionally use a persistent treesitter parser (already kind of exists in the treesitter worker) and fetch info from that through the CodeRenderable, then it doesn't have to create another parser and parse again. Overhead is memory then though as it will keep the code + the tree in memory all the time. And it gets complex.

kerem commented

2026-03-02 23:44:59 +03:00

Author

Owner

@remorses commented on GitHub (Jan 26, 2026):

What if we reuse the existing @@ section from the parsed git patch format?

Here is an example of what git diff returns for me:

diff --git a/src/image.ts b/src/image.ts
index 7dcca3d..272711f 100644
--- a/src/image.ts
+++ b/src/image.ts
@@ -393,8 +393,8 @@ export async function renderFrameToOgImage(
     themeName = "tokyonight",
     width = 1200,
     height = 630,
-    fontSize = 16,  // Balanced font size for OG images
-    lineHeight = 1.5,  // Tighter line height to fit more lines
+    fontSize: baseFontSize = 16,  // Base font size, may be scaled up
+    lineHeight = 1.5,  // Line height multiplier
     format = "png",
     quality = 90,
   } = options
@@ -411,18 +411,39 @@ export async function renderFrameToOgImage(
   const backgroundColor = rgbaToHex(theme.background)
   const textColor = rgbaToHex(theme.text)

@remorses commented on GitHub (Jan 26, 2026): What if we reuse the existing @@ section from the parsed git patch format? Here is an example of what git diff returns for me: ```patch diff --git a/src/image.ts b/src/image.ts index 7dcca3d..272711f 100644 --- a/src/image.ts +++ b/src/image.ts @@ -393,8 +393,8 @@ export async function renderFrameToOgImage( themeName = "tokyonight", width = 1200, height = 630, - fontSize = 16, // Balanced font size for OG images - lineHeight = 1.5, // Tighter line height to fit more lines + fontSize: baseFontSize = 16, // Base font size, may be scaled up + lineHeight = 1.5, // Line height multiplier format = "png", quality = 90, } = options @@ -411,18 +411,39 @@ export async function renderFrameToOgImage( const backgroundColor = rgbaToHex(theme.background) const textColor = rgbaToHex(theme.text) ```

kerem referenced this issue

2026-03-02 23:46:00 +03:00

[PR #159] [MERGED] fix/unicode-chars #331

kerem referenced this issue

2026-03-14 09:19:09 +03:00

[PR #159] [MERGED] fix/unicode-chars #1116