How do you create runtime-only composable plugins in Nuxt 4 using app/extensions?

app/
  extensions/
    ws-client.ts     # Client-only composable
      

// app/extensions/ws-client.ts
export default defineNuxtExtension((nuxtApp) => {
  const ws = ref<WebSocket | null>(null)
  const messages = ref<Message[]>([])
  const status = ref<'disconnected' | 'connecting' | 'connected'>('disconnected')
  
  const connect = () => {
    ws.value = new WebSocket('wss://api.example.com/notifications')
    ws.value.onopen = () => status.value = 'connected'
    ws.value.onmessage = (event) => {
      messages.value.push(JSON.parse(event.data))
    }
    ws.value.onclose = () => status.value = 'disconnected'
  }
  const send = (data: any) => ws.value?.send(JSON.stringify(data))
  
  // Global access
  nuxtApp.provide('notifications', { 
    ws, messages, status, connect, send 
  })
})
      

<template>
  <div>
    <div v-if="$notifications.status === 'connected'" class="status connected">
      Connected ({{ $notifications.messages.length }} messages)
    </div>
    <button @click="$notifications.connect()" v-else>
      Connect Notifications
    </button>
    <div v-for="msg in $notifications.messages" :key="msg.id">
      {{ msg.content }}
    </div>
  </div>
</template>

<script setup>
// Auto-available globally
const { $notifications } = useNuxtApp()
</script>
      

// Only runs client-side - no SSR
if (process.client) {
  console.log('Extension loaded:', $notifications.status.value)
}