Make staged hunks visibly framed

Author: bohutang

packages/ui/src/components/panels/diff/ZedDiffViewer.test.tsx

@@ -139,4 +139,18 @@ describe('ZedDiffViewer', () => {
     expect(headers[0]).toBe('a.txt');
     expect(headers[1]).toBe('b.txt');
   });
+
+  it('renders a persistent frame style for staged hunks', () => {
+    const { container } = render(
+      <ZedDiffViewer
+        diff={SAMPLE_DIFF_TWO_HUNKS}
+        sessionId="s1"
+        currentScope="staged"
+        stagedDiff={SAMPLE_DIFF_TWO_HUNKS}
+      />
+    );
+    const css = container.querySelector('style')?.textContent || '';
+    expect(css).toContain('st-hunk-status--staged');
+    expect(css).toContain('Zed-like: staged hunks have a persistent frame');
+  });
 });

packages/ui/src/components/panels/diff/ZedDiffViewer.tsx

@@ -416,6 +416,10 @@ export const ZedDiffViewer: React.FC<{
               0 0 0 3px color-mix(in srgb, var(--st-hunk-frame-color) 18%, transparent);
             transition: opacity 110ms ease;
           }
+          /* Zed-like: staged hunks have a persistent frame to distinguish them from unstaged hunks. */
+          .st-diff-table .diff-hunk:has(.st-hunk-status--staged):has(.diff-code-insert, .diff-code-delete)::after {
+            opacity: 0.55;
+          }
           .st-diff-table .diff-hunk:has(.diff-code-insert, .diff-code-delete):hover::after,
           .st-diff-table .diff-hunk:has(.diff-code-insert, .diff-code-delete):focus-within::after {
             opacity: 1;