feat(cli): support click-to-open on npmx.dev

Author: danielroe

app/composables/useConnector.ts

@@ -68,8 +68,23 @@ export const useConnector = createSharedComposable(function useConnector() {
 
   const baseUrl = computed(() => `http://localhost:${config.value?.port ?? DEFAULT_PORT}`)
 
-  // Load persisted config on client
+  const route = useRoute()
+  const router = useRouter()
+
   onMounted(() => {
+    const urlToken = route.query.token as string | undefined
+    const urlPort = route.query.port as string | undefined
+
+    if (urlToken) {
+      const { token: _, port: __, ...cleanQuery } = route.query
+      router.replace({ query: cleanQuery })
+
+      // Connect with URL params
+      const port = urlPort ? Number.parseInt(urlPort, 10) : DEFAULT_PORT
+      connect(urlToken, port)
+      return
+    }
+
     const stored = localStorage.getItem(STORAGE_KEY)
     if (stored) {
       try {

cli/src/logger.ts

@@ -58,13 +58,15 @@ export function logMessage(message: string): void {
  * Show the connection token in a nice box
  */
 export function showToken(token: string, port: number): void {
+  const connectUrl = `https://npmx.dev/?token=${token}&port=${port}`
+
   p.note(
     [
-      `Token: ${pc.bold(pc.cyan(token))}`,
+      `Open: ${pc.bold(pc.underline(pc.cyan(connectUrl)))}`,
       '',
-      pc.dim(`Server: http://localhost:${port}`),
+      pc.dim(`Or paste token manually: ${token}`),
     ].join('\n'),
-    'Paste this token in npmx.dev to connect',
+    'Click to connect',
   )
 }