feat: display resolved catalog spec in editor (#72)

* feat: display resolved catalog spec in editor

* fix: update on active editor changes

* docs: update

Author: 9romise

README.md

@@ -35,6 +35,7 @@
   - Dist tag warnings when a dependency uses a mutable version tag instead of a pinned version
   - Engine mismatch warnings when dependency engine requirements conflict with the current package
   - Upgrade hints when a newer version is available
+- **Catalog Resolution** – Inline decoration showing the resolved version spec for catalog dependencies in `package.json`.
 - **Code Actions**
   - Quick fix actions for diagnostics with ignore list support (workspace or user settings)
 - **Commands**

src/index.ts

@@ -5,6 +5,7 @@ import { openInBrowser } from './commands/open-in-browser'
 import { commands, displayName, version } from './generated-meta'
 import { useCodeActions } from './providers/code-actions'
 import { useCompletionItem } from './providers/completion-item'
+import { useDecorators } from './providers/decorators'
 import { useDiagnostics } from './providers/diagnostics'
 import { useDocumentLink } from './providers/document-link'
 import { useHover } from './providers/hover'
@@ -18,6 +19,7 @@ export const { activate, deactivate } = defineExtension(() => {
   useHover()
   useCompletionItem()
   useDiagnostics()
+  useDecorators()
   useCodeActions()
   useDocumentLink()
 

src/providers/decorators.ts

@@ -0,0 +1,51 @@
+import type { DecorationOptions } from 'vscode'
+import { getResolvedDependencies } from '#core/workspace'
+import { logger } from '#state'
+import { offsetRangeToRange } from '#utils/ast'
+import { isPackageManifestPath } from '#utils/file'
+import { useActiveTextEditor, useEditorDecorations, watch } from 'reactive-vscode'
+import { Range } from 'vscode'
+
+export function useDecorators() {
+  const activeEditor = useActiveTextEditor()
+
+  const { update } = useEditorDecorations(
+    activeEditor,
+    {
+      after: { color: 'rgba(136, 136, 136, 0.63)' },
+    },
+    async (editor) => {
+      const document = editor.document
+      if (!isPackageManifestPath(document.uri.path))
+        return []
+      logger.info(`[decorators] updating ${document.uri.path}`)
+
+      const dependencies = await getResolvedDependencies(document.uri)
+      if (!dependencies)
+        return []
+
+      const result: DecorationOptions[] = []
+
+      for (const dep of dependencies) {
+        if (dep.protocol !== 'catalog')
+          continue
+
+        const range = offsetRangeToRange(document, dep.specRange)
+        const line = range.end.line
+        const len = document.lineAt(line).text.length
+        result.push({
+          range: new Range(line, 0, line, len),
+          renderOptions: {
+            after: {
+              contentText: `\t\t# ${dep.resolvedSpec}`,
+            },
+          },
+        })
+      }
+
+      return result
+    },
+  )
+
+  watch(activeEditor, update)
+}