diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 804d4a19fb..cba4d974d1 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
-const isMounted = ref(false)
-const isVisible = ref(false)
-const isScrollable = ref(true)
-const lastScrollY = ref(0)
-const footerRef = ref<HTMLElement>()
+const isMounted = shallowRef(false)
+const isVisible = shallowRef(false)
+const isScrollable = shallowRef(true)
+const lastScrollY = shallowRef(0)
+const footerRef = useTemplateRef('footerRef')
 
 // Check if CSS scroll-state container queries are supported
 // Once this becomes baseline, we can remove the JS scroll handling entirely
-const supportsScrollStateQueries = ref(false)
+const supportsScrollStateQueries = useSupported(() => {
+  return isMounted.value && CSS.supports('container-type', 'scroll-state')
+})
 
 function checkScrollable() {
   return document.documentElement.scrollHeight > window.innerHeight
@@ -52,10 +54,6 @@ useEventListener('scroll', onScroll, { passive: true })
 useEventListener('resize', onResize, { passive: true })
 
 onMounted(() => {
-  // Feature detect CSS scroll-state container queries (Chrome 133+)
-  // @see https://developer.mozilla.org/en-US/docs/Web/CSS/@container#scroll-state_container_descriptors
-  supportsScrollStateQueries.value = CSS.supports('container-type', 'scroll-state')
-
   nextTick(() => {
     lastScrollY.value = window.scrollY
     isScrollable.value = checkScrollable()
diff --git a/app/components/AppTooltip.vue b/app/components/AppTooltip.vue
index f402824edd..575149d50a 100644
--- a/app/components/AppTooltip.vue
+++ b/app/components/AppTooltip.vue
@@ -6,7 +6,7 @@ const props = defineProps<{
   position?: 'top' | 'bottom' | 'left' | 'right'
 }>()
 
-const isVisible = ref(false)
+const isVisible = shallowRef(false)
 const tooltipId = useId()
 
 const positionClasses: Record<string, string> = {
diff --git a/app/components/ClaimPackageModal.vue b/app/components/ClaimPackageModal.vue
index 30ac41de5b..26054783ad 100644
--- a/app/components/ClaimPackageModal.vue
+++ b/app/components/ClaimPackageModal.vue
@@ -19,12 +19,12 @@ const {
 } = useConnector()
 
 // Fetch name availability when modal opens
-const checkResult = ref<CheckNameResult | null>(null)
+const checkResult = shallowRef<CheckNameResult | null>(null)
 
-const isChecking = ref(false)
-const isPublishing = ref(false)
-const publishError = ref<string | null>(null)
-const publishSuccess = ref(false)
+const isChecking = shallowRef(false)
+const isPublishing = shallowRef(false)
+const publishError = shallowRef<string | null>(null)
+const publishSuccess = shallowRef(false)
 
 async function checkAvailability() {
   isChecking.value = true
@@ -125,7 +125,7 @@ const previewPackageJson = computed(() => {
   }
 })
 
-const connectorModalOpen = ref(false)
+const connectorModalOpen = shallowRef(false)
 </script>
 
 <template>
diff --git a/app/components/CodeMobileTreeDrawer.vue b/app/components/CodeMobileTreeDrawer.vue
index 981b1b1b95..d55e86a0ff 100644
--- a/app/components/CodeMobileTreeDrawer.vue
+++ b/app/components/CodeMobileTreeDrawer.vue
@@ -7,7 +7,7 @@ defineProps<{
   baseUrl: string
 }>()
 
-const isOpen = ref(false)
+const isOpen = shallowRef(false)
 
 // Close drawer on navigation
 const route = useRoute()
diff --git a/app/components/CodeViewer.vue b/app/components/CodeViewer.vue
index b3b95d2ee0..f77a0ca2a1 100644
--- a/app/components/CodeViewer.vue
+++ b/app/components/CodeViewer.vue
@@ -9,7 +9,7 @@ const emit = defineEmits<{
   lineClick: [lineNum: number, event: MouseEvent]
 }>()
 
-const codeRef = ref<HTMLElement>()
+const codeRef = useTemplateRef('codeRef')
 
 // Generate line numbers array
 const lineNumbers = computed(() => {
diff --git a/app/components/ConnectorModal.vue b/app/components/ConnectorModal.vue
index de81b419f7..a5ca92802e 100644
--- a/app/components/ConnectorModal.vue
+++ b/app/components/ConnectorModal.vue
@@ -4,9 +4,9 @@ const open = defineModel<boolean>('open', { default: false })
 const { isConnected, isConnecting, npmUser, error, hasOperations, connect, disconnect } =
   useConnector()
 
-const tokenInput = ref('')
-const portInput = ref('31415')
-const copied = ref(false)
+const tokenInput = shallowRef('')
+const portInput = shallowRef('31415')
+const copied = shallowRef(false)
 
 async function handleConnect() {
   const port = Number.parseInt(portInput.value, 10) || 31415
diff --git a/app/components/ConnectorStatus.client.vue b/app/components/ConnectorStatus.client.vue
index c335bfa0f1..baf3bdecde 100644
--- a/app/components/ConnectorStatus.client.vue
+++ b/app/components/ConnectorStatus.client.vue
@@ -2,8 +2,8 @@
 const { isConnected, isConnecting, npmUser, error, activeOperations, hasPendingOperations } =
   useConnector()
 
-const showModal = ref(false)
-const showTooltip = ref(false)
+const showModal = shallowRef(false)
+const showTooltip = shallowRef(false)
 
 const statusText = computed(() => {
   if (isConnecting.value) return 'connecting…'
diff --git a/app/components/OperationsQueue.vue b/app/components/OperationsQueue.vue
index acefe33212..b37daca418 100644
--- a/app/components/OperationsQueue.vue
+++ b/app/components/OperationsQueue.vue
@@ -21,8 +21,8 @@ const {
   refreshState,
 } = useConnector()
 
-const isExecuting = ref(false)
-const otpInput = ref('')
+const isExecuting = shallowRef(false)
+const otpInput = shallowRef('')
 
 /** Check if any active operation needs OTP */
 const hasOtpFailures = computed(() =>
diff --git a/app/components/OrgMembersPanel.vue b/app/components/OrgMembersPanel.vue
index 5e3b02cff9..03f9429ebf 100644
--- a/app/components/OrgMembersPanel.vue
+++ b/app/components/OrgMembersPanel.vue
@@ -21,27 +21,27 @@ const {
 } = useConnector()
 
 // Members data: { username: role }
-const members = ref<Record<string, 'developer' | 'admin' | 'owner'>>({})
-const isLoading = ref(false)
-const error = ref<string | null>(null)
+const members = shallowRef<Record<string, 'developer' | 'admin' | 'owner'>>({})
+const isLoading = shallowRef(false)
+const error = shallowRef<string | null>(null)
 
 // Team membership data: { teamName: [members] }
 const teamMembers = ref<Record<string, string[]>>({})
-const isLoadingTeams = ref(false)
+const isLoadingTeams = shallowRef(false)
 
 // Search/filter
-const searchQuery = ref('')
-const filterRole = ref<'all' | 'developer' | 'admin' | 'owner'>('all')
-const filterTeam = ref<string | null>(null)
-const sortBy = ref<'name' | 'role'>('name')
-const sortOrder = ref<'asc' | 'desc'>('asc')
+const searchQuery = shallowRef('')
+const filterRole = shallowRef<'all' | 'developer' | 'admin' | 'owner'>('all')
+const filterTeam = shallowRef<string | null>(null)
+const sortBy = shallowRef<'name' | 'role'>('name')
+const sortOrder = shallowRef<'asc' | 'desc'>('asc')
 
 // Add member form
-const showAddMember = ref(false)
-const newUsername = ref('')
-const newRole = ref<'developer' | 'admin' | 'owner'>('developer')
-const newTeam = ref<string>('') // Empty string means "developers" (default)
-const isAddingMember = ref(false)
+const showAddMember = shallowRef(false)
+const newUsername = shallowRef('')
+const newRole = shallowRef<'developer' | 'admin' | 'owner'>('developer')
+const newTeam = shallowRef<string>('') // Empty string means "developers" (default)
+const isAddingMember = shallowRef(false)
 
 // Role priority for sorting
 const rolePriority = { owner: 0, admin: 1, developer: 2 }
diff --git a/app/components/OrgTeamsPanel.vue b/app/components/OrgTeamsPanel.vue
index 22606bdc6c..1cbe5d4773 100644
--- a/app/components/OrgTeamsPanel.vue
+++ b/app/components/OrgTeamsPanel.vue
@@ -17,32 +17,32 @@ const {
 } = useConnector()
 
 // Teams data
-const teams = ref<string[]>([])
+const teams = shallowRef<string[]>([])
 const teamUsers = ref<Record<string, string[]>>({})
-const isLoadingTeams = ref(false)
+const isLoadingTeams = shallowRef(false)
 const isLoadingUsers = ref<Record<string, boolean>>({})
-const error = ref<string | null>(null)
+const error = shallowRef<string | null>(null)
 
 // Org members (to check if user needs to be added to org first)
-const orgMembers = ref<Record<string, 'developer' | 'admin' | 'owner'>>({})
+const orgMembers = shallowRef<Record<string, 'developer' | 'admin' | 'owner'>>({})
 
 // Search/filter
-const searchQuery = ref('')
-const sortBy = ref<'name' | 'members'>('name')
-const sortOrder = ref<'asc' | 'desc'>('asc')
+const searchQuery = shallowRef('')
+const sortBy = shallowRef<'name' | 'members'>('name')
+const sortOrder = shallowRef<'asc' | 'desc'>('asc')
 
 // Expanded teams (to show members)
 const expandedTeams = ref<Set<string>>(new Set())
 
 // Create team form
-const showCreateTeam = ref(false)
-const newTeamName = ref('')
-const isCreatingTeam = ref(false)
+const showCreateTeam = shallowRef(false)
+const newTeamName = shallowRef('')
+const isCreatingTeam = shallowRef(false)
 
 // Add user form (per team)
-const showAddUserFor = ref<string | null>(null)
-const newUserUsername = ref('')
-const isAddingUser = ref(false)
+const showAddUserFor = shallowRef<string | null>(null)
+const newUserUsername = shallowRef('')
+const isAddingUser = shallowRef(false)
 
 // Filtered and sorted teams
 const filteredTeams = computed(() => {
diff --git a/app/components/PackageAccessControls.vue b/app/components/PackageAccessControls.vue
index 72dd764ab1..90a33d21b9 100644
--- a/app/components/PackageAccessControls.vue
+++ b/app/components/PackageAccessControls.vue
@@ -23,17 +23,17 @@ const orgName = computed(() => {
 })
 
 // Data
-const collaborators = ref<Record<string, 'read-only' | 'read-write'>>({})
-const teams = ref<string[]>([])
-const isLoadingCollaborators = ref(false)
-const isLoadingTeams = ref(false)
-const error = ref<string | null>(null)
+const collaborators = shallowRef<Record<string, 'read-only' | 'read-write'>>({})
+const teams = shallowRef<string[]>([])
+const isLoadingCollaborators = shallowRef(false)
+const isLoadingTeams = shallowRef(false)
+const error = shallowRef<string | null>(null)
 
 // Grant access form
-const showGrantAccess = ref(false)
-const selectedTeam = ref('')
-const permission = ref<'read-only' | 'read-write'>('read-only')
-const isGranting = ref(false)
+const showGrantAccess = shallowRef(false)
+const selectedTeam = shallowRef('')
+const permission = shallowRef<'read-only' | 'read-write'>('read-only')
+const isGranting = shallowRef(false)
 
 // Computed collaborator list with type detection
 const collaboratorList = computed(() => {
@@ -136,10 +136,10 @@ async function handleRevokeAccess(collaboratorName: string) {
   await addOperation(operation)
 }
 
-// Load on mount when connected
+// Reload when package changes
 watch(
-  isConnected,
-  connected => {
+  () => [isConnected.value, props.packageName, lastExecutionTime.value],
+  ([connected]) => {
     if (connected && orgName.value) {
       loadCollaborators()
       loadTeams()
@@ -147,25 +147,6 @@ watch(
   },
   { immediate: true },
 )
-
-// Reload when package changes
-watch(
-  () => props.packageName,
-  () => {
-    if (isConnected.value && orgName.value) {
-      loadCollaborators()
-      loadTeams()
-    }
-  },
-)
-
-// Refresh data when operations complete
-watch(lastExecutionTime, () => {
-  if (isConnected.value && orgName.value) {
-    loadCollaborators()
-    loadTeams()
-  }
-})
 </script>
 
 <template>
diff --git a/app/components/PackageCard.vue b/app/components/PackageCard.vue
index 91d6e0369b..38b10891ba 100644
--- a/app/components/PackageCard.vue
+++ b/app/components/PackageCard.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { NpmSearchResult } from '#shared/types'
-
 defineProps<{
   /** The search result object containing package data */
   result: NpmSearchResult
diff --git a/app/components/PackageDependencies.vue b/app/components/PackageDependencies.vue
index 5e17ce623e..ccc307892a 100644
--- a/app/components/PackageDependencies.vue
+++ b/app/components/PackageDependencies.vue
@@ -11,9 +11,9 @@ const props = defineProps<{
 const outdatedDeps = useOutdatedDependencies(() => props.dependencies)
 
 // Expanded state for each section
-const depsExpanded = ref(false)
-const peerDepsExpanded = ref(false)
-const optionalDepsExpanded = ref(false)
+const depsExpanded = shallowRef(false)
+const peerDepsExpanded = shallowRef(false)
+const optionalDepsExpanded = shallowRef(false)
 
 // Sort dependencies alphabetically
 const sortedDependencies = computed(() => {
diff --git a/app/components/PackageInstallScripts.vue b/app/components/PackageInstallScripts.vue
index 55ea511ed7..c1c9579025 100644
--- a/app/components/PackageInstallScripts.vue
+++ b/app/components/PackageInstallScripts.vue
@@ -14,7 +14,7 @@ const sortedNpxDeps = computed(() => {
   return Object.entries(props.installScripts.npxDependencies).sort(([a], [b]) => a.localeCompare(b))
 })
 
-const isExpanded = ref(false)
+const isExpanded = shallowRef(false)
 </script>
 
 <template>
diff --git a/app/components/PackageList.vue b/app/components/PackageList.vue
index ea44d408ea..61840109f0 100644
--- a/app/components/PackageList.vue
+++ b/app/components/PackageList.vue
@@ -32,7 +32,7 @@ const emit = defineEmits<{
 }>()
 
 // Reference to WindowVirtualizer for infinite scroll detection
-const listRef = ref<WindowVirtualizerHandle>()
+const listRef = useTemplateRef<WindowVirtualizerHandle>('listRef')
 
 // Set up infinite scroll if hasMore is provided
 const hasMore = computed(() => props.hasMore ?? false)
@@ -52,7 +52,7 @@ const { handleScroll, scrollToPage } = useVirtualInfiniteScroll({
 })
 
 // Scroll to initial page once list is ready and has items
-const hasScrolledToInitial = ref(false)
+const hasScrolledToInitial = shallowRef(false)
 
 watch(
   [() => props.results.length, () => props.initialPage, listRef],
diff --git a/app/components/PackageMaintainers.vue b/app/components/PackageMaintainers.vue
index 52e5bdb093..5566954ff2 100644
--- a/app/components/PackageMaintainers.vue
+++ b/app/components/PackageMaintainers.vue
@@ -15,9 +15,9 @@ const {
   listTeamUsers,
 } = useConnector()
 
-const showAddOwner = ref(false)
-const newOwnerUsername = ref('')
-const isAdding = ref(false)
+const showAddOwner = shallowRef(false)
+const newOwnerUsername = shallowRef('')
+const isAdding = shallowRef(false)
 
 // Show admin controls when connected (let npm CLI handle permission errors)
 const canManageOwners = computed(() => isConnected.value)
@@ -30,9 +30,9 @@ const orgName = computed(() => {
 })
 
 // Access data: who has access and via what
-const collaborators = ref<Record<string, 'read-only' | 'read-write'>>({})
+const collaborators = shallowRef<Record<string, 'read-only' | 'read-write'>>({})
 const teamMembers = ref<Record<string, string[]>>({}) // team -> members
-const isLoadingAccess = ref(false)
+const isLoadingAccess = shallowRef(false)
 
 // Compute access source for each maintainer
 const maintainerAccess = computed(() => {
@@ -142,7 +142,7 @@ async function handleRemoveOwner(username: string) {
 
 // Load access info when connected and for scoped packages
 watch(
-  [isConnected, () => props.packageName],
+  [isConnected, () => props.packageName, lastExecutionTime],
   ([connected]) => {
     if (connected && orgName.value) {
       loadAccessInfo()
@@ -150,13 +150,6 @@ watch(
   },
   { immediate: true },
 )
-
-// Refresh data when operations complete
-watch(lastExecutionTime, () => {
-  if (isConnected.value && orgName.value) {
-    loadAccessInfo()
-  }
-})
 </script>
 
 <template>
diff --git a/app/components/PackagePlaygrounds.vue b/app/components/PackagePlaygrounds.vue
index aa553183ec..b8388bfa39 100644
--- a/app/components/PackagePlaygrounds.vue
+++ b/app/components/PackagePlaygrounds.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core'
 import type { PlaygroundLink } from '#shared/types'
 
 const props = defineProps<{
@@ -41,10 +40,10 @@ function getColor(provider: string): string {
 }
 
 // Dropdown state
-const isOpen = ref(false)
-const dropdownRef = ref<HTMLElement>()
-const menuRef = ref<HTMLElement>()
-const focusedIndex = ref(-1)
+const isOpen = shallowRef(false)
+const dropdownRef = useTemplateRef('dropdownRef')
+const menuRef = useTemplateRef('menuRef')
+const focusedIndex = shallowRef(-1)
 
 onClickOutside(dropdownRef, () => {
   isOpen.value = false
diff --git a/app/components/PackageVersions.vue b/app/components/PackageVersions.vue
index f9ea9112f9..057e1b45b8 100644
--- a/app/components/PackageVersions.vue
+++ b/app/components/PackageVersions.vue
@@ -119,16 +119,16 @@ const expandedTags = ref<Set<string>>(new Set())
 const tagVersions = ref<Map<string, VersionDisplay[]>>(new Map())
 const loadingTags = ref<Set<string>>(new Set())
 
-const otherVersionsExpanded = ref(false)
-const otherMajorGroups = ref<
+const otherVersionsExpanded = shallowRef(false)
+const otherMajorGroups = shallowRef<
   Array<{ major: number; versions: VersionDisplay[]; expanded: boolean }>
 >([])
-const otherVersionsLoading = ref(false)
+const otherVersionsLoading = shallowRef(false)
 
 // Cached full version list (local to component instance)
-const allVersionsCache = ref<PackageVersionInfo[] | null>(null)
-const loadingVersions = ref(false)
-const hasLoadedAll = ref(false)
+const allVersionsCache = shallowRef<PackageVersionInfo[] | null>(null)
+const loadingVersions = shallowRef(false)
+const hasLoadedAll = shallowRef(false)
 
 // Load all versions using shared function
 async function loadAllVersions(): Promise<PackageVersionInfo[]> {
diff --git a/app/components/PackageVulnerabilities.vue b/app/components/PackageVulnerabilities.vue
index 26c4a2728b..d7f6e9025b 100644
--- a/app/components/PackageVulnerabilities.vue
+++ b/app/components/PackageVulnerabilities.vue
@@ -123,7 +123,7 @@ const severityBadgeColors: Record<OsvSeverityLevel, string> = {
 }
 
 // Expand/collapse state
-const isExpanded = ref(false)
+const isExpanded = shallowRef(false)
 
 // Get highest severity for banner color
 const highestSeverity = computed<OsvSeverityLevel>(() => {
diff --git a/app/components/ScrollToTop.vue b/app/components/ScrollToTop.vue
index 1fc82cac9d..96981aba13 100644
--- a/app/components/ScrollToTop.vue
+++ b/app/components/ScrollToTop.vue
@@ -7,9 +7,11 @@ const excludedRoutes = new Set(['index', 'code'])
 const isActive = computed(() => !excludedRoutes.has(route.name as string))
 
 const isMounted = useMounted()
-const isVisible = ref(false)
+const isVisible = shallowRef(false)
 const scrollThreshold = 300
-const supportsScrollStateQueries = ref(false)
+const supportsScrollStateQueries = useSupported(() => {
+  return isMounted.value && CSS.supports('container-type', 'scroll-state')
+})
 
 function onScroll() {
   if (!supportsScrollStateQueries.value) {
@@ -25,9 +27,6 @@ function scrollToTop() {
 useEventListener('scroll', onScroll, { passive: true })
 
 onMounted(() => {
-  // Feature detect CSS scroll-state container queries (Chrome 133+)
-  supportsScrollStateQueries.value = CSS.supports('container-type', 'scroll-state')
-
   onScroll()
 })
 </script>
diff --git a/app/components/UserCombobox.vue b/app/components/UserCombobox.vue
index e7d2b51a10..5257fcd238 100644
--- a/app/components/UserCombobox.vue
+++ b/app/components/UserCombobox.vue
@@ -15,11 +15,10 @@ const emit = defineEmits<{
   select: [username: string, isInSuggestions: boolean]
 }>()
 
-const inputValue = ref('')
-const isOpen = ref(false)
-const highlightedIndex = ref(-1)
-const inputRef = ref<HTMLInputElement | null>(null)
-const listRef = ref<HTMLUListElement | null>(null)
+const inputValue = shallowRef('')
+const isOpen = shallowRef(false)
+const highlightedIndex = shallowRef(-1)
+const listRef = useTemplateRef('listRef')
 
 // Generate unique ID for accessibility
 const inputId = useId()
@@ -134,10 +133,7 @@ watch(highlightedIndex, index => {
 })
 
 // Check for reduced motion preference
-const prefersReducedMotion = ref(false)
-onMounted(() => {
-  prefersReducedMotion.value = window.matchMedia('(prefers-reduced-motion: reduce)').matches
-})
+const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
 </script>
 
 <template>
@@ -145,7 +141,6 @@ onMounted(() => {
     <label v-if="label" :for="inputId" class="sr-only">{{ label }}</label>
     <input
       :id="inputId"
-      ref="inputRef"
       v-model="inputValue"
       type="text"
       :placeholder="placeholder ?? 'username…'"
diff --git a/app/composables/useCharts.ts b/app/composables/useCharts.ts
index 98ccdf127e..31ec7d9e34 100644
--- a/app/composables/useCharts.ts
+++ b/app/composables/useCharts.ts
@@ -1,3 +1 @@
-import { createSharedComposable } from '@vueuse/core'
-
 export const useCharts = createSharedComposable(function useCharts() {})
diff --git a/app/composables/useConnector.ts b/app/composables/useConnector.ts
index 516c84b139..4ef1205a21 100644
--- a/app/composables/useConnector.ts
+++ b/app/composables/useConnector.ts
@@ -1,5 +1,4 @@
 import type { PendingOperation, OperationStatus, OperationType } from '../../cli/src/types'
-import { createSharedComposable } from '@vueuse/core'
 
 export interface NewOperation {
   type: OperationType
diff --git a/app/composables/useNpmRegistry.ts b/app/composables/useNpmRegistry.ts
index aff41fe0a8..74fc8d26be 100644
--- a/app/composables/useNpmRegistry.ts
+++ b/app/composables/useNpmRegistry.ts
@@ -10,8 +10,6 @@ import type {
 } from '#shared/types'
 import type { ReleaseType } from 'semver'
 import { maxSatisfying, prerelease, major, minor, diff, gt } from 'semver'
-import { compareVersions, isExactVersion } from '~/utils/versions'
-import { extractInstallScriptsInfo } from '~/utils/install-scripts'
 
 const NPM_REGISTRY = 'https://registry.npmjs.org'
 const NPM_API = 'https://api.npmjs.org'
@@ -556,7 +554,7 @@ async function checkDependencyOutdated(
 export function useOutdatedDependencies(
   dependencies: MaybeRefOrGetter<Record<string, string> | undefined>,
 ) {
-  const outdated = ref<Record<string, OutdatedDependencyInfo>>({})
+  const outdated = shallowRef<Record<string, OutdatedDependencyInfo>>({})
 
   async function fetchOutdatedInfo(deps: Record<string, string> | undefined) {
     if (!deps || Object.keys(deps).length === 0) {
diff --git a/app/composables/useSelectedPackageManager.ts b/app/composables/useSelectedPackageManager.ts
index f4062b201e..ab60093239 100644
--- a/app/composables/useSelectedPackageManager.ts
+++ b/app/composables/useSelectedPackageManager.ts
@@ -1,5 +1,3 @@
-import { useLocalStorage } from '@vueuse/core'
-
 export function useSelectedPackageManager() {
   return useLocalStorage<PackageManagerId>('npmx-pm', 'npm')
 }
diff --git a/app/composables/useVirtualInfiniteScroll.ts b/app/composables/useVirtualInfiniteScroll.ts
index 5b904069ec..5eba4248d1 100644
--- a/app/composables/useVirtualInfiniteScroll.ts
+++ b/app/composables/useVirtualInfiniteScroll.ts
@@ -13,7 +13,7 @@ export interface WindowVirtualizerHandle {
 
 export interface UseVirtualInfiniteScrollOptions {
   /** Reference to the WindowVirtualizer component */
-  listRef: Ref<WindowVirtualizerHandle | undefined>
+  listRef: Ref<WindowVirtualizerHandle | null>
   /** Current item count */
   itemCount: Ref<number>
   /** Whether there are more items to load */
@@ -48,10 +48,10 @@ export function useVirtualInfiniteScroll(options: UseVirtualInfiniteScrollOption
   } = options
 
   // Track last fetched count to prevent duplicate fetches
-  const fetchedCountRef = ref(-1)
+  const fetchedCountRef = shallowRef(-1)
 
   // Track current page to avoid unnecessary updates
-  const currentPage = ref(1)
+  const currentPage = shallowRef(1)
 
   function handleScroll() {
     const list = listRef.value