From cf7e39d88db8dcbc81aae76122d8b2bbd8bb75c4 Mon Sep 17 00:00:00 2001
From: yongsk0066 <yongsk0066@naver.com>
Date: Mon, 16 Mar 2026 13:36:46 +0900
Subject: [PATCH 1/2] Add CodeLens annotations for Server/Client Component
 identification

- Add ComponentCodeLensProvider with component kind labels above code lines
- Respect global enabled setting to properly disable all features
- Add codelens.enabled, codelens.clientComponent, codelens.serverComponent settings
- Move signature helpers to resolver.ts for contextual locality
- Add tests for CodeLens scope behavior
---
 package.json          |  15 ++++
 src/codelens.ts       | 136 +++++++++++++++++++++++++++++++++
 src/extension.ts      |  47 +++++++++---
 src/resolver.ts       |   8 ++
 test/analyzer.test.ts | 171 ++++++++++++++++++++++++++++++++++++++++--
 5 files changed, 362 insertions(+), 15 deletions(-)
 create mode 100644 src/codelens.ts

diff --git a/package.json b/package.json
index 79c3ac9..937f57c 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,21 @@
           "default": true,
           "description": "Highlight TypeScript interface and type alias declaration names."
         },
+        "reactComponentLens.codelens.enabled": {
+          "type": "boolean",
+          "default": false,
+          "description": "Show CodeLens annotations indicating Server/Client Component kind."
+        },
+        "reactComponentLens.codelens.clientComponent": {
+          "type": "boolean",
+          "default": true,
+          "description": "Show CodeLens for Client Components."
+        },
+        "reactComponentLens.codelens.serverComponent": {
+          "type": "boolean",
+          "default": true,
+          "description": "Show CodeLens for Server Components."
+        },
         "reactComponentLens.highlightColors": {
           "type": "object",
           "default": {
diff --git a/src/codelens.ts b/src/codelens.ts
new file mode 100644
index 0000000..3dfc50f
--- /dev/null
+++ b/src/codelens.ts
@@ -0,0 +1,136 @@
+import * as vscode from 'vscode'
+
+import type {
+  ComponentLensAnalyzer,
+  ComponentUsage,
+  ScopeConfig,
+} from './analyzer'
+import { createOpenSignature } from './resolver'
+
+export interface CodeLensConfig {
+  clientComponent: boolean
+  enabled: boolean
+  globalEnabled: boolean
+  serverComponent: boolean
+}
+
+const CODELENS_SCOPE: ScopeConfig = {
+  declaration: true,
+  element: true,
+  export: true,
+  import: true,
+  type: true,
+}
+
+export class ComponentCodeLensProvider
+  implements vscode.CodeLensProvider, vscode.Disposable
+{
+  private readonly changeEmitter = new vscode.EventEmitter<void>()
+  public readonly onDidChangeCodeLenses = this.changeEmitter.event
+
+  private config: CodeLensConfig
+
+  public constructor(
+    private readonly analyzer: ComponentLensAnalyzer,
+    config: CodeLensConfig,
+  ) {
+    this.config = config
+  }
+
+  public updateConfig(config: CodeLensConfig): void {
+    this.config = config
+    this.changeEmitter.fire()
+  }
+
+  public refresh(): void {
+    this.changeEmitter.fire()
+  }
+
+  public dispose(): void {
+    this.changeEmitter.dispose()
+  }
+
+  public async provideCodeLenses(
+    document: vscode.TextDocument,
+  ): Promise<vscode.CodeLens[]> {
+    if (!this.config.globalEnabled || !this.config.enabled) {
+      return []
+    }
+
+    if (!this.config.clientComponent && !this.config.serverComponent) {
+      return []
+    }
+
+    const signature = createOpenSignature(document.version)
+    const usages = await this.analyzer.analyzeDocument(
+      document.fileName,
+      document.getText(),
+      signature,
+      CODELENS_SCOPE,
+    )
+
+    return this.buildCodeLenses(document, usages)
+  }
+
+  private buildCodeLenses(
+    document: vscode.TextDocument,
+    usages: ComponentUsage[],
+  ): vscode.CodeLens[] {
+    const lineMap = new Map<
+      number,
+      { clients: Set<string>; servers: Set<string> }
+    >()
+
+    for (let i = 0; i < usages.length; i++) {
+      const usage = usages[i]!
+      if (usage.kind === 'client' && !this.config.clientComponent) {
+        continue
+      }
+      if (usage.kind === 'server' && !this.config.serverComponent) {
+        continue
+      }
+
+      if (usage.ranges.length === 0) {
+        continue
+      }
+
+      const line = document.positionAt(usage.ranges[0]!.start).line
+      let entry = lineMap.get(line)
+      if (!entry) {
+        entry = { clients: new Set(), servers: new Set() }
+        lineMap.set(line, entry)
+      }
+
+      if (usage.kind === 'client') {
+        entry.clients.add(usage.tagName)
+      } else {
+        entry.servers.add(usage.tagName)
+      }
+    }
+
+    const codeLenses: vscode.CodeLens[] = []
+
+    for (const [line, { clients, servers }] of lineMap) {
+      const parts: string[] = []
+      if (clients.size > 0) {
+        parts.push('Client Component')
+      }
+      if (servers.size > 0) {
+        parts.push('Server Component')
+      }
+
+      if (parts.length === 0) {
+        continue
+      }
+
+      codeLenses.push(
+        new vscode.CodeLens(new vscode.Range(line, 0, line, 0), {
+          command: '',
+          title: parts.join(' · '),
+        }),
+      )
+    }
+
+    return codeLenses
+  }
+}
diff --git a/src/extension.ts b/src/extension.ts
index 838e259..8a7e2ab 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -4,8 +4,14 @@ import * as path from 'node:path'
 import * as vscode from 'vscode'
 
 import { ComponentLensAnalyzer, type ScopeConfig } from './analyzer'
+import { type CodeLensConfig, ComponentCodeLensProvider } from './codelens'
 import { type HighlightColors, LensDecorations } from './decorations'
-import { ImportResolver, type SourceHost } from './resolver'
+import {
+  createDiskSignature,
+  createOpenSignature,
+  ImportResolver,
+  type SourceHost,
+} from './resolver'
 
 const LANG_JSX = 'javascriptreact'
 const LANG_TSX = 'typescriptreact'
@@ -22,8 +28,19 @@ export function activate(context: vscode.ExtensionContext): void {
   const resolver = new ImportResolver(sourceHost)
   const analyzer = new ComponentLensAnalyzer(sourceHost, resolver)
   const decorations = new LensDecorations(config.highlightColors)
+  const codeLensProvider = new ComponentCodeLensProvider(
+    analyzer,
+    config.codeLens,
+  )
+
+  context.subscriptions.push(decorations, codeLensProvider)
 
-  context.subscriptions.push(decorations)
+  context.subscriptions.push(
+    vscode.languages.registerCodeLensProvider(
+      [{ language: LANG_TSX }, { language: LANG_JSX }],
+      codeLensProvider,
+    ),
+  )
 
   let refreshTimer: NodeJS.Timeout | undefined
   let watcherDisposables: vscode.Disposable[] = []
@@ -47,6 +64,7 @@ export function activate(context: vscode.ExtensionContext): void {
 
     refreshTimer = setTimeout(() => {
       refreshTimer = undefined
+      codeLensProvider.refresh()
       void refreshVisibleEditors()
     }, delay)
   }
@@ -153,6 +171,10 @@ export function activate(context: vscode.ExtensionContext): void {
         decorations.updateColors(config.highlightColors)
       }
 
+      if (event.affectsConfiguration('reactComponentLens.codelens')) {
+        codeLensProvider.updateConfig(config.codeLens)
+      }
+
       scheduleRefresh(0)
     }),
     new vscode.Disposable(() => {
@@ -171,6 +193,7 @@ export function deactivate(): void {
 }
 
 function getConfiguration(): {
+  codeLens: CodeLensConfig
   debounceMs: number
   enabled: boolean
   highlightColors: HighlightColors
@@ -184,6 +207,18 @@ function getConfiguration(): {
   )
 
   return {
+    codeLens: {
+      clientComponent: configuration.get<boolean>(
+        'codelens.clientComponent',
+        true,
+      ),
+      enabled: configuration.get<boolean>('codelens.enabled', false),
+      globalEnabled: configuration.get<boolean>('enabled', true),
+      serverComponent: configuration.get<boolean>(
+        'codelens.serverComponent',
+        true,
+      ),
+    },
     debounceMs: Math.max(0, Math.min(2000, debounceMs)),
     enabled: configuration.get<boolean>('enabled', true),
     highlightColors: {
@@ -300,14 +335,6 @@ class WorkspaceSourceHost implements SourceHost {
   }
 }
 
-function createOpenSignature(version: number): string {
-  return 'open:' + version
-}
-
-function createDiskSignature(mtimeMs: number, size: number): string {
-  return 'disk:' + mtimeMs + ':' + size
-}
-
 function normalizeColor(
   color: string | undefined,
   fallbackColor: string,
diff --git a/src/resolver.ts b/src/resolver.ts
index ce88e41..8d3b028 100644
--- a/src/resolver.ts
+++ b/src/resolver.ts
@@ -172,6 +172,14 @@ function findNearestConfigFile(startDirectory: string): string | undefined {
   }
 }
 
+export function createOpenSignature(version: number): string {
+  return 'open:' + version
+}
+
+export function createDiskSignature(mtimeMs: number, size: number): string {
+  return 'disk:' + mtimeMs + ':' + size
+}
+
 function isSupportedSourceFile(filePath: string): boolean {
   if (filePath.endsWith('.d.ts')) {
     return false
diff --git a/test/analyzer.test.ts b/test/analyzer.test.ts
index 157d6fb..926454c 100644
--- a/test/analyzer.test.ts
+++ b/test/analyzer.test.ts
@@ -5,7 +5,11 @@ import * as path from 'node:path'
 import { expect, test } from 'bun:test'
 
 import { ComponentLensAnalyzer, type ScopeConfig } from '../src/analyzer'
-import { ImportResolver, type SourceHost } from '../src/resolver'
+import {
+  createDiskSignature,
+  ImportResolver,
+  type SourceHost,
+} from '../src/resolver'
 
 test('detects client and server component usages from relative imports', async () => {
   const project = createProject({
@@ -1523,6 +1527,167 @@ test('highlights default import when source file exports a component', async ()
   }
 })
 
+test('codelens scope returns import and declaration usages together', async () => {
+  const project = createProject({
+    'Page.tsx': [
+      "import Button from './Button';",
+      "import { Layout } from './Layout';",
+      '',
+      'export default function Page() {',
+      '  return (',
+      '    <>',
+      '      <Button />',
+      '      <Layout />',
+      '    </>',
+      '  );',
+      '}',
+    ].join('\n'),
+    'Button.tsx': [
+      "'use client';",
+      '',
+      'export default function Button() {',
+      '  return <button />;',
+      '}',
+    ].join('\n'),
+    'Layout.tsx': [
+      'export function Layout() {',
+      '  return <section />;',
+      '}',
+    ].join('\n'),
+  })
+
+  try {
+    const analyzer = createAnalyzer(project.host)
+    const pagePath = project.filePath('Page.tsx')
+    const pageSource = project.readFile('Page.tsx')
+    const codelensScope: ScopeConfig = {
+      declaration: true,
+      element: true,
+      export: true,
+      import: true,
+      type: true,
+    }
+    const usages = await analyzer.analyzeDocument(
+      pagePath,
+      pageSource,
+      project.signature('Page.tsx'),
+      codelensScope,
+    )
+
+    const mapped = usages.map((usage) => ({
+      kind: usage.kind,
+      tagName: usage.tagName,
+    }))
+
+    expect(mapped).toContainEqual({ kind: 'client', tagName: 'Button' })
+    expect(mapped).toContainEqual({ kind: 'server', tagName: 'Layout' })
+    expect(mapped).toContainEqual({ kind: 'server', tagName: 'Page' })
+  } finally {
+    project[Symbol.dispose]()
+  }
+})
+
+test('codelens scope correctly identifies client vs server from use-client directive', async () => {
+  const project = createProject({
+    'App.tsx': [
+      "import ClientComp from './ClientComp';",
+      "import ServerComp from './ServerComp';",
+      '',
+      'export default function App() {',
+      '  return (',
+      '    <>',
+      '      <ClientComp />',
+      '      <ServerComp />',
+      '    </>',
+      '  );',
+      '}',
+    ].join('\n'),
+    'ClientComp.tsx': [
+      "'use client';",
+      '',
+      'export default function ClientComp() {',
+      '  return <div />;',
+      '}',
+    ].join('\n'),
+    'ServerComp.tsx': [
+      'export default function ServerComp() {',
+      '  return <div />;',
+      '}',
+    ].join('\n'),
+  })
+
+  try {
+    const analyzer = createAnalyzer(project.host)
+    const appPath = project.filePath('App.tsx')
+    const appSource = project.readFile('App.tsx')
+    const scope: ScopeConfig = {
+      declaration: false,
+      element: false,
+      export: false,
+      import: true,
+      type: false,
+    }
+    const usages = await analyzer.analyzeDocument(
+      appPath,
+      appSource,
+      project.signature('App.tsx'),
+      scope,
+    )
+
+    expect(usages.length).toBe(2)
+    expect(usages.map((u) => ({ kind: u.kind, tagName: u.tagName }))).toEqual([
+      { kind: 'client', tagName: 'ClientComp' },
+      { kind: 'server', tagName: 'ServerComp' },
+    ])
+  } finally {
+    project[Symbol.dispose]()
+  }
+})
+
+test('codelens scope tracks source file paths for imports', async () => {
+  const project = createProject({
+    'Page.tsx': [
+      "import Button from './Button';",
+      '',
+      'export default function Page() {',
+      '  return <Button />;',
+      '}',
+    ].join('\n'),
+    'Button.tsx': [
+      "'use client';",
+      '',
+      'export default function Button() {',
+      '  return <button />;',
+      '}',
+    ].join('\n'),
+  })
+
+  try {
+    const analyzer = createAnalyzer(project.host)
+    const pagePath = project.filePath('Page.tsx')
+    const pageSource = project.readFile('Page.tsx')
+    const scope: ScopeConfig = {
+      declaration: false,
+      element: true,
+      export: false,
+      import: true,
+      type: false,
+    }
+    const usages = await analyzer.analyzeDocument(
+      pagePath,
+      pageSource,
+      project.signature('Page.tsx'),
+      scope,
+    )
+
+    const buttonUsages = usages.filter((u) => u.tagName === 'Button')
+    expect(buttonUsages.length).toBeGreaterThan(0)
+    expect(buttonUsages[0]?.sourceFilePath).toBe(project.filePath('Button.tsx'))
+  } finally {
+    project[Symbol.dispose]()
+  }
+})
+
 function createAnalyzer(host: SourceHost): ComponentLensAnalyzer {
   const resolver = new ImportResolver(host)
   return new ComponentLensAnalyzer(host, resolver)
@@ -1580,7 +1745,3 @@ function createProject(files: Record<string, string>): {
     },
   }
 }
-
-function createDiskSignature(mtimeMs: number, size: number): string {
-  return `disk:${String(mtimeMs)}:${String(size)}`
-}

From 8a26592ec5f23346692e9c81c72da295614ece87 Mon Sep 17 00:00:00 2001
From: yongsk0066 <yongsk0066@naver.com>
Date: Mon, 16 Mar 2026 13:37:42 +0900
Subject: [PATCH 2/2] Add peek-to-declaration on CodeLens click

Use analyzer.findComponentDeclaration() to resolve the declaration
offset in source files, enabling peek preview at the actual component
definition instead of the file start.
---
 src/analyzer.ts |  43 ++++++++++++++++++
 src/codelens.ts | 114 ++++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 143 insertions(+), 14 deletions(-)

diff --git a/src/analyzer.ts b/src/analyzer.ts
index df994e7..bacc2cf 100644
--- a/src/analyzer.ts
+++ b/src/analyzer.ts
@@ -96,6 +96,49 @@ export class ComponentLensAnalyzer {
     this.directiveCache.delete(filePath)
   }
 
+  public async findComponentDeclaration(
+    filePath: string,
+    componentName: string,
+  ): Promise<{ character: number; line: number } | undefined> {
+    const sourceText = this.host.readFileAsync
+      ? await this.host.readFileAsync(filePath)
+      : this.host.readFile(filePath)
+
+    if (sourceText === undefined) {
+      return undefined
+    }
+
+    const signature = this.host.getSignatureAsync
+      ? await this.host.getSignatureAsync(filePath)
+      : this.host.getSignature(filePath)
+
+    if (signature === undefined) {
+      return undefined
+    }
+
+    const analysis = this.getAnalysis(filePath, sourceText, signature)
+    if (!analysis) {
+      return undefined
+    }
+
+    const component = analysis.localComponents.get(componentName)
+    if (!component || component.ranges.length === 0) {
+      return undefined
+    }
+
+    const offset = component.ranges[0]!.start
+    let line = 0
+    let lastNewline = -1
+    for (let i = 0; i < offset; i++) {
+      if (sourceText.charCodeAt(i) === 10) {
+        line++
+        lastNewline = i
+      }
+    }
+
+    return { character: offset - lastNewline - 1, line }
+  }
+
   public async analyzeDocument(
     filePath: string,
     sourceText: string,
diff --git a/src/codelens.ts b/src/codelens.ts
index 3dfc50f..6b35d43 100644
--- a/src/codelens.ts
+++ b/src/codelens.ts
@@ -22,6 +22,12 @@ const CODELENS_SCOPE: ScopeConfig = {
   type: true,
 }
 
+interface LineGroup {
+  clients: Set<string>
+  components: Map<string, string>
+  servers: Set<string>
+}
+
 export class ComponentCodeLensProvider
   implements vscode.CodeLensProvider, vscode.Disposable
 {
@@ -72,14 +78,11 @@ export class ComponentCodeLensProvider
     return this.buildCodeLenses(document, usages)
   }
 
-  private buildCodeLenses(
+  private async buildCodeLenses(
     document: vscode.TextDocument,
     usages: ComponentUsage[],
-  ): vscode.CodeLens[] {
-    const lineMap = new Map<
-      number,
-      { clients: Set<string>; servers: Set<string> }
-    >()
+  ): Promise<vscode.CodeLens[]> {
+    const lineMap = new Map<number, LineGroup>()
 
     for (let i = 0; i < usages.length; i++) {
       const usage = usages[i]!
@@ -97,7 +100,11 @@ export class ComponentCodeLensProvider
       const line = document.positionAt(usage.ranges[0]!.start).line
       let entry = lineMap.get(line)
       if (!entry) {
-        entry = { clients: new Set(), servers: new Set() }
+        entry = {
+          clients: new Set(),
+          components: new Map(),
+          servers: new Set(),
+        }
         lineMap.set(line, entry)
       }
 
@@ -106,11 +113,16 @@ export class ComponentCodeLensProvider
       } else {
         entry.servers.add(usage.tagName)
       }
+
+      if (!entry.components.has(usage.tagName)) {
+        entry.components.set(usage.tagName, usage.sourceFilePath)
+      }
     }
 
+    const positions = await this.resolveDeclarationPositions(lineMap)
     const codeLenses: vscode.CodeLens[] = []
 
-    for (const [line, { clients, servers }] of lineMap) {
+    for (const [line, { clients, servers, components }] of lineMap) {
       const parts: string[] = []
       if (clients.size > 0) {
         parts.push('Client Component')
@@ -123,14 +135,88 @@ export class ComponentCodeLensProvider
         continue
       }
 
-      codeLenses.push(
-        new vscode.CodeLens(new vscode.Range(line, 0, line, 0), {
-          command: '',
-          title: parts.join(' · '),
-        }),
-      )
+      const locations = this.buildLocations(components, positions)
+      const position = new vscode.Position(line, 0)
+
+      if (locations.length > 0) {
+        codeLenses.push(
+          new vscode.CodeLens(new vscode.Range(position, position), {
+            arguments: [document.uri, position, locations, 'peek'],
+            command: 'editor.action.peekLocations',
+            title: parts.join(' · '),
+          }),
+        )
+      } else {
+        codeLenses.push(
+          new vscode.CodeLens(new vscode.Range(position, position), {
+            command: '',
+            title: parts.join(' · '),
+          }),
+        )
+      }
     }
 
     return codeLenses
   }
+
+  private async resolveDeclarationPositions(
+    lineMap: Map<number, LineGroup>,
+  ): Promise<Map<string, vscode.Position>> {
+    const filesToResolve = new Map<string, Set<string>>()
+
+    for (const [, { components }] of lineMap) {
+      for (const [tagName, sourceFilePath] of components) {
+        let names = filesToResolve.get(sourceFilePath)
+        if (!names) {
+          names = new Set()
+          filesToResolve.set(sourceFilePath, names)
+        }
+        names.add(tagName)
+      }
+    }
+
+    const positions = new Map<string, vscode.Position>()
+
+    await Promise.all(
+      Array.from(filesToResolve, async ([filePath, names]) => {
+        for (const name of names) {
+          const pos = await this.analyzer.findComponentDeclaration(
+            filePath,
+            name,
+          )
+          if (pos) {
+            positions.set(
+              filePath + ':' + name,
+              new vscode.Position(pos.line, pos.character),
+            )
+          }
+        }
+      }),
+    )
+
+    return positions
+  }
+
+  private buildLocations(
+    components: Map<string, string>,
+    positions: Map<string, vscode.Position>,
+  ): vscode.Location[] {
+    const seen = new Set<string>()
+    const locations: vscode.Location[] = []
+
+    for (const [tagName, sourceFilePath] of components) {
+      if (seen.has(sourceFilePath)) {
+        continue
+      }
+      seen.add(sourceFilePath)
+
+      const uri = vscode.Uri.file(sourceFilePath)
+      const pos =
+        positions.get(sourceFilePath + ':' + tagName) ??
+        new vscode.Position(0, 0)
+      locations.push(new vscode.Location(uri, pos))
+    }
+
+    return locations
+  }
 }