Merge remote-tracking branch 'origin/main' into feat/contributor-list-sort-by-role

Author: danielroe

.gitignore

@@ -45,3 +45,4 @@ file-tree-sprite.svg
 
 # output
 .vercel
+.nvmrc

.node-version

@@ -0,0 +1 @@
+24

CONTRIBUTING.md

@@ -33,6 +33,7 @@ This focus helps guide our project decisions as a community and what we choose t
   - [Available commands](#available-commands)
   - [Project structure](#project-structure)
   - [Local connector CLI](#local-connector-cli)
+  - [Mock connector (for local development)](#mock-connector-for-local-development)
 - [Code style](#code-style)
   - [TypeScript](#typescript)
   - [Server API patterns](#server-api-patterns)
@@ -104,6 +105,10 @@ pnpm dev              # Start development server
 pnpm build            # Production build
 pnpm preview          # Preview production build
 
+# Connector
+pnpm npmx-connector   # Start the real connector (requires npm login)
+pnpm mock-connector   # Start the mock connector (no npm login needed)
+
 # Code Quality
 pnpm lint             # Run linter (oxlint + oxfmt)
 pnpm lint:fix         # Auto-fix lint issues
@@ -157,6 +162,36 @@ pnpm npmx-connector
 
 The connector will check your npm authentication, generate a connection token, and listen for requests from npmx.dev.
 
+### Mock connector (for local development)
+
+If you're working on admin features (org management, package access controls, operations queue) and don't want to use your real npm account, you can run the mock connector instead:
+
+```bash
+pnpm mock-connector
+```
+
+This starts a mock connector server pre-populated with sample data (orgs, teams, members, packages). No npm login is required — operations succeed immediately without making real npm CLI calls.
+
+The mock connector prints a connection URL to the terminal, just like the real connector. Click it (or paste the token manually) to connect the UI.
+
+**Options:**
+
+```bash
+pnpm mock-connector                # default: port 31415, user "mock-user", sample data
+pnpm mock-connector --port 9999    # custom port
+pnpm mock-connector --user alice   # custom username
+pnpm mock-connector --empty        # start with no pre-populated data
+```
+
+**Default sample data:**
+
+- **@nuxt**: 4 members (mock-user, danielroe, pi0, antfu), 3 teams (core, docs, triage)
+- **@unjs**: 2 members (mock-user, pi0), 1 team (maintainers)
+- **Packages**: @nuxt/kit, @nuxt/schema, @unjs/nitro with team-based access controls
+
+> [!TIP]
+> Run `pnpm dev` in a separate terminal to start the Nuxt dev server, then click the connection URL from the mock connector to connect.
+
 ## Code style
 
 When committing changes, try to keep an eye out for unintended formatting updates. These can make a pull request look noisier than it really is and slow down the review process. Sometimes IDEs automatically reformat files on save, which can unintentionally introduce extra changes.
@@ -381,7 +416,7 @@ npmx.dev uses [@nuxtjs/i18n](https://i18n.nuxtjs.org/) for internationalization.
 - All user-facing strings should use translation keys via `$t()` in templates and script
 - Translation files live in [`i18n/locales/`](i18n/locales) (e.g., `en-US.json`)
 - We use the `no_prefix` strategy (no `/en-US/` or `/fr-FR/` in URLs)
-- Locale preference is stored in cookies and respected on subsequent visits
+- Locale preference is stored in `localStorage` and respected on subsequent visits
 
 ### i18n commands
 
@@ -752,6 +787,74 @@ You need to either:
 1. Add a fixture file for that package/endpoint
 2. Update the mock handlers in `test/fixtures/mock-routes.cjs` (client) or `modules/runtime/server/cache.ts` (server)
 
+### Testing connector features
+
+Features that require authentication through the local connector (org management, package collaborators, operations queue) are tested using a mock connector server.
+
+#### Architecture
+
+The mock connector infrastructure is shared between the CLI, E2E tests, and Vitest component tests:
+
+```
+cli/src/
+├── types.ts           # ConnectorEndpoints contract (shared by real + mock)
+├── mock-state.ts      # MockConnectorStateManager (canonical source)
+├── mock-app.ts        # H3 mock app + MockConnectorServer class
+└── mock-server.ts     # CLI entry point (pnpm mock-connector)
+
+test/test-utils/       # Re-exports from cli/src/ for test convenience
+test/e2e/helpers/      # E2E-specific wrappers (fixtures, global setup)
+```
+
+Both the real server (`cli/src/server.ts`) and the mock server (`cli/src/mock-app.ts`) conform to the `ConnectorEndpoints` interface defined in `cli/src/types.ts`. This ensures the API contract is enforced by TypeScript. When adding a new endpoint, update `ConnectorEndpoints` first, then implement it in both servers.
+
+#### Vitest component tests (`test/nuxt/`)
+
+- Mock the `useConnector` composable with reactive state
+- Use `document.body` queries for components using Teleport
+- See `test/nuxt/components/HeaderConnectorModal.spec.ts` for an example
+
+```typescript
+// Create mock state
+const mockState = ref({ connected: false, npmUser: null, ... })
+
+// Mock the composable
+vi.mock('~/composables/useConnector', () => ({
+  useConnector: () => ({
+    isConnected: computed(() => mockState.value.connected),
+    // ... other properties
+  }),
+}))
+```
+
+#### Playwright E2E tests (`test/e2e/`)
+
+- A mock HTTP server starts automatically via Playwright's global setup
+- Use the `mockConnector` fixture to set up test data and the `gotoConnected` helper to navigate with authentication
+
+```typescript
+test('shows org members', async ({ page, gotoConnected, mockConnector }) => {
+  // Set up test data
+  await mockConnector.setOrgData('@testorg', {
+    users: { testuser: 'owner', member1: 'admin' },
+  })
+
+  // Navigate with connector authentication
+  await gotoConnected('/@testorg')
+
+  // Test assertions
+  await expect(page.getByRole('link', { name: '@testuser' })).toBeVisible()
+})
+```
+
+The mock connector supports test endpoints for state manipulation:
+
+- `/__test__/reset` - Reset all mock state
+- `/__test__/org` - Set org users, teams, and team members
+- `/__test__/user-orgs` - Set user's organizations
+- `/__test__/user-packages` - Set user's packages
+- `/__test__/package` - Set package collaborators
+
 ## Submitting changes
 
 ### Before submitting

README.md

@@ -155,7 +155,8 @@ We welcome contributions – please do feel free to explore the project and
 - [npm-userscript](https://github.com/bluwy/npm-userscript) – Browser userscript with various improvements and fixes for npmjs.com
 - [npm-alt](https://npm.willow.sh/) – An alternative npm package browser
 - [npkg.lorypelli.dev](https://npkg.lorypelli.dev/) – An alternative frontend to npm made with as little client-side JavaScript as possible
-- [vscode-npmx](https://github.com/npmx-dev/vscode-npmx) – VSCode extension for npmx
+- [vscode-npmx](https://github.com/npmx-dev/vscode-npmx) – Official VSCode extension for npmx
+- [vscode-open-in-npmx](https://github.com/sybers/vscode-open-in-npmx) – VSCode shortcut to open packages on npmx
 - [nxjt](https://nxjt.netlify.app) – npmx Jump To: Quickly navigate to npmx common webpages.
 - [npmx-weekly](https://npmx-weekly.trueberryless.org/) – A weekly newsletter for the npmx ecosystem. Add your own content via suggestions in the weekly PR on [GitHub](https://github.com/trueberryless-org/npmx-weekly/pulls?q=is%3Aopen+is%3Apr+label%3A%22%F0%9F%95%94+weekly+post%22).
 - [npmx-digest](https://npmx-digest.trueberryless.org/) – An automated news aggregation website that summarizes npmx activity from GitHub and Bluesky every 8 hours.

app/app.vue

@@ -121,13 +121,16 @@ if (import.meta.client) {
 <template>
   <div class="min-h-screen flex flex-col bg-bg text-fg">
     <NuxtPwaAssets />
-    <LinkBase to="#main-content" variant="button-primary" class="skip-link">{{
-      $t('common.skip_link')
-    }}</LinkBase>
+    <LinkBase
+      :to="{ hash: '#main-content', query: route.query, params: route.params }"
+      variant="button-primary"
+      class="skip-link"
+      >{{ $t('common.skip_link') }}</LinkBase
+    >
 
     <AppHeader :show-logo="!isHomepage" />
 
-    <div id="main-content" class="flex-1 flex flex-col">
+    <div id="main-content" class="flex-1 flex flex-col" tabindex="-1">
       <NuxtPage />
     </div>
 

app/components/AppHeader.vue

@@ -124,6 +124,7 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
 
 const showFullSearch = shallowRef(false)
 const showMobileMenu = shallowRef(false)
+const { env } = useAppConfig().buildInfo
 
 // On mobile, clicking logo+search button expands search
 const route = useRoute()
@@ -180,7 +181,7 @@ onKeyStroke(
     for (const link of desktopLinks.value) {
       if (link.to && link.keyshortcut && isKeyWithoutModifiers(e, link.keyshortcut)) {
         e.preventDefault()
-        navigateTo(link.to.name)
+        navigateTo(link.to)
         break
       }
     }
@@ -194,31 +195,34 @@ onKeyStroke(
     <div class="absolute inset-0 bg-bg/80 backdrop-blur-md" />
     <nav
       :aria-label="$t('nav.main_navigation')"
-      class="relative container min-h-14 flex items-center gap-2 z-1"
-      :class="isOnHomePage ? 'justify-end' : 'justify-between'"
+      class="relative container min-h-14 flex items-center gap-2 z-1 justify-end"
     >
-      <!-- Mobile: Logo + search button (expands search, doesn't navigate) -->
-      <button
+      <!-- Mobile: Logo (navigates home) -->
+      <NuxtLink
         v-if="!isSearchExpanded && !isOnHomePage"
-        type="button"
-        class="sm:hidden flex-shrink-0 inline-flex items-center gap-2 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 rounded"
-        :aria-label="$t('nav.tap_to_search')"
-        @click="expandMobileSearch"
+        to="/"
+        :aria-label="$t('header.home')"
+        class="sm:hidden flex-shrink-0 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring"
       >
         <AppLogo class="w-8 h-8 rounded-lg" />
-        <span class="i-carbon:search w-4 h-4 text-fg-subtle" aria-hidden="true" />
-      </button>
+      </NuxtLink>
 
       <!-- Desktop: Logo (navigates home) -->
       <div v-if="showLogo" class="hidden sm:flex flex-shrink-0 items-center">
         <NuxtLink
           :to="{ name: 'index' }"
           :aria-label="$t('header.home')"
           dir="ltr"
-          class="inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded"
+          class="relative inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded"
         >
-          <AppLogo class="w-8 h-8 rounded-lg" />
-          <span>npmx</span>
+          <AppLogo class="w-7 h-7 rounded-lg" />
+          <span class="pb-0.5">npmx</span>
+          <span
+            aria-hidden="true"
+            class="scale-35 transform-origin-br font-mono tracking-wide text-accent absolute bottom-0.5 -inset-ie-1"
+          >
+            {{ env === 'release' ? 'alpha' : env }}
+          </span>
         </NuxtLink>
       </div>
       <!-- Spacer when logo is hidden on desktop -->
@@ -275,6 +279,17 @@ onKeyStroke(
         <HeaderAccountMenu />
       </div>
 
+      <!-- Mobile: Search button (expands search) -->
+      <ButtonBase
+        type="button"
+        class="sm:hidden ms-auto"
+        :aria-label="$t('nav.tap_to_search')"
+        :aria-expanded="showMobileMenu"
+        @click="expandMobileSearch"
+        v-if="!isSearchExpanded && !isOnHomePage"
+        classicon="i-carbon:search"
+      />
+
       <!-- Mobile: Menu button (always visible, click to open menu) -->
       <ButtonBase
         type="button"

app/components/BlueskyPostEmbed.client.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { BLUESKY_API, BSKY_POST_AT_URI_REGEX } from '#shared/utils/constants'
+
+const props = defineProps<{
+  /** AT URI of the post, e.g. at://did:plc:.../app.bsky.feed.post/... */
+  uri: string
+}>()
+
+interface PostAuthor {
+  did: string
+  handle: string
+  displayName?: string
+  avatar?: string
+}
+
+interface EmbedImage {
+  thumb: string
+  fullsize: string
+  alt: string
+  aspectRatio?: { width: number; height: number }
+}
+
+interface BlueskyPost {
+  uri: string
+  author: PostAuthor
+  record: { text: string; createdAt: string }
+  embed?: { $type: string; images?: EmbedImage[] }
+  likeCount?: number
+  replyCount?: number
+  repostCount?: number
+}
+
+const postUrl = computed(() => {
+  const match = props.uri.match(BSKY_POST_AT_URI_REGEX)
+  if (!match) return null
+  const [, did, rkey] = match
+  return `https://bsky.app/profile/${did}/post/${rkey}`
+})
+
+const { data: post, status } = useAsyncData(
+  `bsky-post-${props.uri}`,
+  async (): Promise<BlueskyPost | null> => {
+    const response = await $fetch<{ posts: BlueskyPost[] }>(
+      `${BLUESKY_API}/xrpc/app.bsky.feed.getPosts`,
+      { query: { uris: props.uri } },
+    )
+    return response.posts[0] ?? null
+  },
+  { lazy: true, server: false },
+)
+</script>
+
+<template>
+  <div
+    v-if="status === 'pending'"
+    class="rounded-lg border border-border bg-bg-subtle p-6 text-center text-fg-subtle text-sm"
+  >
+    <span class="i-svg-spinners:90-ring-with-bg h-5 w-5 inline-block" />
+  </div>
+
+  <a
+    v-else-if="post"
+    :href="postUrl ?? '#'"
+    target="_blank"
+    rel="noopener noreferrer"
+    class="block rounded-lg border border-border bg-bg-subtle p-4 sm:p-5 no-underline hover:border-border-hover transition-colors duration-200"
+  >
+    <!-- Author row -->
+    <div class="flex items-center gap-3 mb-3">
+      <img
+        v-if="post.author.avatar"
+        :src="`${post.author.avatar}?size=48`"
+        :alt="post.author.displayName || post.author.handle"
+        width="40"
+        height="40"
+        class="w-10 h-10 rounded-full"
+        loading="lazy"
+      />
+      <div class="min-w-0">
+        <div class="font-medium text-fg truncate">
+          {{ post.author.displayName || post.author.handle }}
+        </div>
+        <div class="text-sm text-fg-subtle truncate">@{{ post.author.handle }}</div>
+      </div>
+      <span
+        class="i-carbon:logo-bluesky w-5 h-5 text-fg-subtle ms-auto shrink-0"
+        aria-hidden="true"
+      />
+    </div>
+
+    <!-- Post text -->
+    <p class="text-fg-muted whitespace-pre-wrap leading-relaxed mb-3">{{ post.record.text }}</p>
+
+    <!-- Embedded images -->
+    <template v-if="post.embed?.images?.length">
+      <img
+        v-for="(img, i) in post.embed.images"
+        :key="i"
+        :src="img.fullsize"
+        :alt="img.alt"
+        class="w-full mb-3 rounded-lg object-cover"
+        :style="
+          img.aspectRatio
+            ? { aspectRatio: `${img.aspectRatio.width}/${img.aspectRatio.height}` }
+            : undefined
+        "
+        loading="lazy"
+      />
+    </template>
+
+    <!-- Timestamp + engagement -->
+    <div class="flex items-center gap-4 text-sm text-fg-subtle">
+      <DateTime :datetime="post.record.createdAt" date-style="medium" />
+      <span v-if="post.likeCount" class="flex items-center gap-1">
+        <span class="i-carbon:favorite w-3.5 h-3.5" aria-hidden="true" />
+        {{ post.likeCount }}
+      </span>
+      <span v-if="post.repostCount" class="flex items-center gap-1">
+        <span class="i-carbon:repeat w-3.5 h-3.5" aria-hidden="true" />
+        {{ post.repostCount }}
+      </span>
+      <span v-if="post.replyCount" class="flex items-center gap-1">
+        <span class="i-carbon:chat w-3.5 h-3.5" aria-hidden="true" />
+        {{ post.replyCount }}
+      </span>
+    </div>
+  </a>
+</template>