From 706f81cda8316e4ca14f558d48fd5652d53bcd24 Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Sun, 25 Jan 2026 22:42:12 -0500
Subject: [PATCH 1/9] feat: add about, user, orgs, and packages to nav
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. Add an "about" nav item (and a new about page, content tbd)
2. Always show "github" item instead of hiding it when logged in
3. Add logged in username next to 🟢, clicking brings up `/~user`
4. when logged in, shows new 'packages' + 'orgs' nav items
    - clicking packages goes to user's packages
    - clicking orgs goes to user's orgs (new page, lists user's orgs, with org card showing # of
      pkgs + user's teams)
    - hovering on packages pops down user's 10 first packages alphabetically (this is a placeholder,
      eventually user prefs screen will allow pinning packages and such)
    - hovering on orgs pops down user's 10 first orgs alphabetically (this is a placeholder,
      eventually user prefs screen will allow pinning orgs and such)

Closes #95
---
 app/components/AppHeader.vue                  |  75 +++---
 app/components/ConnectorStatus.client.vue     |  16 +-
 app/components/HeaderOrgsDropdown.vue         | 110 +++++++++
 app/components/HeaderPackagesDropdown.vue     | 110 +++++++++
 app/composables/useConnector.ts               |  15 ++
 .../index.vue}                                |   0
 app/pages/~[username]/orgs.vue                | 225 ++++++++++++++++++
 cli/src/npm-client.ts                         |  10 +
 cli/src/server.ts                             | 113 ++++++++-
 server/api/registry/org/[org]/packages.get.ts |  54 +++++
 test/unit/cli-server.spec.ts                  |  44 ++++
 test/unit/org-packages-api.spec.ts            |  56 +++++
 12 files changed, 791 insertions(+), 37 deletions(-)
 create mode 100644 app/components/HeaderOrgsDropdown.vue
 create mode 100644 app/components/HeaderPackagesDropdown.vue
 rename app/pages/{~[username].vue => ~[username]/index.vue} (100%)
 create mode 100644 app/pages/~[username]/orgs.vue
 create mode 100644 server/api/registry/org/[org]/packages.get.ts
 create mode 100644 test/unit/org-packages-api.spec.ts

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 869b2d7cbb..836c56e31c 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -9,23 +9,28 @@ withDefaults(
     showConnector: true,
   },
 )
+
+const { isConnected, npmUser } = useConnector()
 </script>
 
 <template>
   <header class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border">
-    <nav aria-label="Main navigation" class="container h-14 flex items-center justify-between">
-      <NuxtLink
-        v-if="showLogo"
-        to="/"
-        aria-label="npmx home"
-        class="header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
-      >
-        <span class="text-fg-subtle"><span style="letter-spacing: -0.2em">.</span>/</span>npmx
-      </NuxtLink>
-      <!-- Spacer when logo is hidden -->
-      <span v-else class="w-1" />
+    <nav aria-label="Main navigation" class="container h-14 flex items-center">
+      <!-- Left: Logo -->
+      <div class="flex-shrink-0">
+        <NuxtLink
+          v-if="showLogo"
+          to="/"
+          aria-label="npmx home"
+          class="header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
+        >
+          <span class="text-fg-subtle"><span style="letter-spacing: -0.2em">.</span>/</span>npmx
+        </NuxtLink>
+        <span v-else class="w-1" />
+      </div>
 
-      <ul class="flex items-center gap-4 sm:gap-6 list-none m-0 p-0">
+      <!-- Center: Main nav items -->
+      <ul class="flex-1 flex items-center justify-center gap-4 sm:gap-6 list-none m-0 p-0">
         <li class="flex items-center">
           <NuxtLink
             to="/search"
@@ -41,26 +46,38 @@ withDefaults(
             </kbd>
           </NuxtLink>
         </li>
-        <li class="flex items-center">
-          <ClientOnly>
-            <SettingsMenu />
-          </ClientOnly>
-        </li>
-        <li v-if="showConnector" class="flex items-center">
-          <ConnectorStatus />
+
+        <!-- Packages dropdown (when connected) -->
+        <li v-if="isConnected && npmUser" class="flex items-center">
+          <HeaderPackagesDropdown :username="npmUser" />
         </li>
-        <li v-else class="flex items-center">
-          <a
-            href="https://github.com/npmx-dev/npmx.dev"
-            rel="noopener noreferrer"
-            class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-            aria-label="GitHub"
-          >
-            <span class="i-carbon-logo-github w-4 h-4" aria-hidden="true" />
-            <span class="hidden sm:inline" aria-hidden="true">github</span>
-          </a>
+
+        <!-- Orgs dropdown (when connected) -->
+        <li v-if="isConnected && npmUser" class="flex items-center">
+          <HeaderOrgsDropdown :username="npmUser" />
         </li>
       </ul>
+
+      <!-- Right: User status + GitHub -->
+      <div class="flex-shrink-0 flex items-center gap-6">
+        <ClientOnly>
+          <SettingsMenu />
+        </ClientOnly>
+
+        <div v-if="showConnector">
+          <ConnectorStatus />
+        </div>
+
+        <a
+          href="https://github.com/npmx-dev/npmx.dev"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="link-subtle"
+          aria-label="GitHub repository"
+        >
+          <span class="i-carbon-logo-github w-5 h-5" aria-hidden="true" />
+        </a>
+      </div>
     </nav>
   </header>
 </template>
diff --git a/app/components/ConnectorStatus.client.vue b/app/components/ConnectorStatus.client.vue
index 4eb4f212cf..a4b3db66fe 100644
--- a/app/components/ConnectorStatus.client.vue
+++ b/app/components/ConnectorStatus.client.vue
@@ -12,9 +12,8 @@ const {
 const showModal = shallowRef(false)
 const showTooltip = shallowRef(false)
 
-const statusText = computed(() => {
+const tooltipText = computed(() => {
   if (isConnecting.value) return 'connecting…'
-  if (isConnected.value && npmUser.value) return `connected as @${npmUser.value}`
   if (isConnected.value) return 'connected'
   return 'connect local CLI'
 })
@@ -37,7 +36,16 @@ const ariaLabel = computed(() => {
 </script>
 
 <template>
-  <div class="relative">
+  <div class="relative flex items-center gap-2">
+    <!-- Username link (when connected) -->
+    <NuxtLink
+      v-if="isConnected && npmUser"
+      :to="`/~${npmUser}`"
+      class="link-subtle font-mono text-sm hidden sm:inline"
+    >
+      @{{ npmUser }}
+    </NuxtLink>
+
     <button
       type="button"
       class="relative flex items-center justify-center w-8 h-8 rounded-md transition-colors duration-200 hover:bg-bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
@@ -85,7 +93,7 @@ const ariaLabel = computed(() => {
         role="tooltip"
         class="absolute right-0 top-full mt-2 px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-nowrap z-50"
       >
-        {{ statusText }}
+        {{ tooltipText }}
       </div>
     </Transition>
 
diff --git a/app/components/HeaderOrgsDropdown.vue b/app/components/HeaderOrgsDropdown.vue
new file mode 100644
index 0000000000..7b3df710d8
--- /dev/null
+++ b/app/components/HeaderOrgsDropdown.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+const props = defineProps<{
+  username: string
+}>()
+
+const { listUserOrgs } = useConnector()
+
+const isOpen = ref(false)
+const isLoading = ref(false)
+const orgs = ref<string[]>([])
+const hasLoaded = ref(false)
+
+async function loadOrgs() {
+  if (hasLoaded.value || isLoading.value) return
+
+  isLoading.value = true
+  try {
+    const orgList = await listUserOrgs()
+    if (orgList) {
+      // Already sorted alphabetically by server, take top 10
+      orgs.value = orgList.slice(0, 10)
+    }
+    hasLoaded.value = true
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function handleMouseEnter() {
+  isOpen.value = true
+  if (!hasLoaded.value) {
+    loadOrgs()
+  }
+}
+
+function handleMouseLeave() {
+  isOpen.value = false
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && isOpen.value) {
+    isOpen.value = false
+  }
+}
+</script>
+
+<template>
+  <div
+    class="relative"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @keydown="handleKeydown"
+  >
+    <NuxtLink
+      :to="`/~${username}/orgs`"
+      class="link-subtle font-mono text-sm inline-flex items-center gap-1"
+    >
+      orgs
+      <span
+        class="i-carbon-chevron-down w-3 h-3 transition-transform duration-200"
+        :class="{ 'rotate-180': isOpen }"
+      />
+    </NuxtLink>
+
+    <Transition
+      enter-active-class="transition-all duration-150"
+      leave-active-class="transition-all duration-100"
+      enter-from-class="opacity-0 translate-y-1"
+      leave-to-class="opacity-0 translate-y-1"
+    >
+      <div
+        v-if="isOpen"
+        class="absolute right-0 top-full mt-2 w-56 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 overflow-hidden"
+      >
+        <div class="px-3 py-2 border-b border-border">
+          <span class="font-mono text-xs text-fg-subtle">Your Organizations</span>
+        </div>
+
+        <div v-if="isLoading" class="px-3 py-4 text-center">
+          <span class="text-fg-muted text-sm">Loading...</span>
+        </div>
+
+        <ul v-else-if="orgs.length > 0" class="py-1 max-h-80 overflow-y-auto">
+          <li v-for="org in orgs" :key="org">
+            <NuxtLink
+              :to="`/@${org}`"
+              class="block px-3 py-2 font-mono text-sm text-fg hover:bg-bg-subtle transition-colors"
+            >
+              @{{ org }}
+            </NuxtLink>
+          </li>
+        </ul>
+
+        <div v-else class="px-3 py-4 text-center">
+          <span class="text-fg-muted text-sm">No organizations found</span>
+        </div>
+
+        <div class="px-3 py-2 border-t border-border">
+          <NuxtLink
+            :to="`/~${username}/orgs`"
+            class="link-subtle font-mono text-xs inline-flex items-center gap-1"
+          >
+            View all
+            <span class="i-carbon-arrow-right w-3 h-3" />
+          </NuxtLink>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
diff --git a/app/components/HeaderPackagesDropdown.vue b/app/components/HeaderPackagesDropdown.vue
new file mode 100644
index 0000000000..25da22eca6
--- /dev/null
+++ b/app/components/HeaderPackagesDropdown.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+const props = defineProps<{
+  username: string
+}>()
+
+const { listUserPackages } = useConnector()
+
+const isOpen = ref(false)
+const isLoading = ref(false)
+const packages = ref<string[]>([])
+const hasLoaded = ref(false)
+
+async function loadPackages() {
+  if (hasLoaded.value || isLoading.value) return
+
+  isLoading.value = true
+  try {
+    const pkgMap = await listUserPackages()
+    if (pkgMap) {
+      // Sort alphabetically and take top 10
+      packages.value = Object.keys(pkgMap).sort().slice(0, 10)
+    }
+    hasLoaded.value = true
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function handleMouseEnter() {
+  isOpen.value = true
+  if (!hasLoaded.value) {
+    loadPackages()
+  }
+}
+
+function handleMouseLeave() {
+  isOpen.value = false
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && isOpen.value) {
+    isOpen.value = false
+  }
+}
+</script>
+
+<template>
+  <div
+    class="relative"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @keydown="handleKeydown"
+  >
+    <NuxtLink
+      :to="`/~${username}`"
+      class="link-subtle font-mono text-sm inline-flex items-center gap-1"
+    >
+      packages
+      <span
+        class="i-carbon-chevron-down w-3 h-3 transition-transform duration-200"
+        :class="{ 'rotate-180': isOpen }"
+      />
+    </NuxtLink>
+
+    <Transition
+      enter-active-class="transition-all duration-150"
+      leave-active-class="transition-all duration-100"
+      enter-from-class="opacity-0 translate-y-1"
+      leave-to-class="opacity-0 translate-y-1"
+    >
+      <div
+        v-if="isOpen"
+        class="absolute right-0 top-full mt-2 w-64 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 overflow-hidden"
+      >
+        <div class="px-3 py-2 border-b border-border">
+          <span class="font-mono text-xs text-fg-subtle">Your Packages</span>
+        </div>
+
+        <div v-if="isLoading" class="px-3 py-4 text-center">
+          <span class="text-fg-muted text-sm">Loading...</span>
+        </div>
+
+        <ul v-else-if="packages.length > 0" class="py-1 max-h-80 overflow-y-auto">
+          <li v-for="pkg in packages" :key="pkg">
+            <NuxtLink
+              :to="`/${pkg}`"
+              class="block px-3 py-2 font-mono text-sm text-fg hover:bg-bg-subtle transition-colors truncate"
+            >
+              {{ pkg }}
+            </NuxtLink>
+          </li>
+        </ul>
+
+        <div v-else class="px-3 py-4 text-center">
+          <span class="text-fg-muted text-sm">No packages found</span>
+        </div>
+
+        <div class="px-3 py-2 border-t border-border">
+          <NuxtLink
+            :to="`/~${username}`"
+            class="link-subtle font-mono text-xs inline-flex items-center gap-1"
+          >
+            View all
+            <span class="i-carbon-arrow-right w-3 h-3" />
+          </NuxtLink>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
diff --git a/app/composables/useConnector.ts b/app/composables/useConnector.ts
index 1e5dcfc593..f23ba9bebf 100644
--- a/app/composables/useConnector.ts
+++ b/app/composables/useConnector.ts
@@ -350,6 +350,19 @@ export const useConnector = createSharedComposable(function useConnector() {
     return response?.success ? (response.data ?? null) : null
   }
 
+  async function listUserPackages(): Promise<Record<string, 'read-write' | 'read-only'> | null> {
+    const response =
+      await connectorFetch<ApiResponse<Record<string, 'read-write' | 'read-only'>>>(
+        '/user/packages',
+      )
+    return response?.success ? (response.data ?? null) : null
+  }
+
+  async function listUserOrgs(): Promise<string[] | null> {
+    const response = await connectorFetch<ApiResponse<string[]>>('/user/orgs')
+    return response?.success ? (response.data ?? null) : null
+  }
+
   // Computed helpers for operations
   const pendingOperations = computed(() =>
     state.value.operations.filter(op => op.status === 'pending'),
@@ -427,6 +440,8 @@ export const useConnector = createSharedComposable(function useConnector() {
     listOrgTeams,
     listTeamUsers,
     listPackageCollaborators,
+    listUserPackages,
+    listUserOrgs,
   }
 })
 
diff --git a/app/pages/~[username].vue b/app/pages/~[username]/index.vue
similarity index 100%
rename from app/pages/~[username].vue
rename to app/pages/~[username]/index.vue
diff --git a/app/pages/~[username]/orgs.vue b/app/pages/~[username]/orgs.vue
new file mode 100644
index 0000000000..fa9616eae8
--- /dev/null
+++ b/app/pages/~[username]/orgs.vue
@@ -0,0 +1,225 @@
+<script setup lang="ts">
+const route = useRoute('~username-orgs')
+
+const username = computed(() => route.params.username)
+
+const { isConnected, npmUser, listUserOrgs, listOrgUsers } = useConnector()
+
+// Only allow viewing your own orgs page
+const isOwnProfile = computed(() => {
+  return isConnected.value && npmUser.value?.toLowerCase() === username.value.toLowerCase()
+})
+
+interface OrgInfo {
+  name: string
+  role: 'developer' | 'admin' | 'owner' | null
+  packageCount: number | null
+  isLoadingDetails: boolean
+}
+
+const isLoading = ref(true)
+const orgs = ref<OrgInfo[]>([])
+const error = ref<string | null>(null)
+
+async function loadOrgDetails(org: OrgInfo) {
+  org.isLoadingDetails = true
+
+  // Fetch package count using our server API (proxies to npm registry)
+  try {
+    const response = await $fetch<{ count: number }>(
+      `/api/registry/org/${encodeURIComponent(org.name)}/packages`,
+      { timeout: 5000 },
+    )
+    org.packageCount = response.count
+  } catch {
+    org.packageCount = null
+  }
+
+  // Fetch user's role in this org
+  try {
+    const users = await listOrgUsers(org.name)
+    if (users && npmUser.value) {
+      org.role = users[npmUser.value] ?? null
+    }
+  } catch {
+    org.role = null
+  }
+
+  org.isLoadingDetails = false
+}
+
+async function loadOrgs() {
+  if (!isOwnProfile.value) {
+    isLoading.value = false
+    return
+  }
+
+  isLoading.value = true
+  error.value = null
+
+  try {
+    const orgList = await listUserOrgs()
+    if (orgList) {
+      orgs.value = orgList.map(name => ({
+        name,
+        role: null,
+        packageCount: null,
+        isLoadingDetails: true,
+      }))
+
+      // Load details for each org in parallel
+      await Promise.all(orgs.value.map(org => loadOrgDetails(org)))
+    } else {
+      error.value = 'Failed to load organizations'
+    }
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Failed to load organizations'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Load on mount and when connection status changes
+watch(isOwnProfile, loadOrgs, { immediate: true })
+
+function getRoleBadgeClass(role: string | null): string {
+  switch (role) {
+    case 'owner':
+      return 'bg-purple-500/20 text-purple-300'
+    case 'admin':
+      return 'bg-blue-500/20 text-blue-300'
+    case 'developer':
+      return 'bg-green-500/20 text-green-300'
+    default:
+      return 'bg-fg-subtle/20 text-fg-muted'
+  }
+}
+
+useSeoMeta({
+  title: () => `@${username.value} Organizations - npmx`,
+  description: () => `npm organizations for ${username.value}`,
+})
+</script>
+
+<template>
+  <main class="container py-8 sm:py-12">
+    <!-- Header -->
+    <header class="mb-8 pb-8 border-b border-border">
+      <div class="flex items-center gap-4 mb-4">
+        <!-- Avatar placeholder -->
+        <div
+          class="w-16 h-16 rounded-full bg-bg-muted border border-border flex items-center justify-center"
+          aria-hidden="true"
+        >
+          <span class="text-2xl text-fg-subtle font-mono">{{
+            username.charAt(0).toUpperCase()
+          }}</span>
+        </div>
+        <div>
+          <h1 class="font-mono text-2xl sm:text-3xl font-medium">@{{ username }}</h1>
+          <p class="text-fg-muted text-sm mt-1">Organizations</p>
+        </div>
+      </div>
+
+      <!-- Back link -->
+      <nav aria-label="Navigation">
+        <NuxtLink
+          :to="`/~${username}`"
+          class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
+        >
+          <span class="i-carbon-arrow-left w-4 h-4" />
+          Back to profile
+        </NuxtLink>
+      </nav>
+    </header>
+
+    <!-- Not connected state -->
+    <ClientOnly>
+      <div v-if="!isConnected" class="py-12 text-center">
+        <p class="text-fg-muted mb-4">Connect the local CLI to view your organizations.</p>
+        <p class="text-fg-subtle text-sm">
+          Run <code class="font-mono bg-bg-subtle px-1.5 py-0.5 rounded">npx @npmx.dev/cli</code> to
+          get started.
+        </p>
+      </div>
+
+      <!-- Not own profile state -->
+      <div v-else-if="!isOwnProfile" class="py-12 text-center">
+        <p class="text-fg-muted">You can only view your own organizations.</p>
+        <NuxtLink :to="`/~${npmUser}/orgs`" class="btn mt-4">View your organizations</NuxtLink>
+      </div>
+
+      <!-- Loading state -->
+      <LoadingSpinner v-else-if="isLoading" text="Loading organizations..." />
+
+      <!-- Error state -->
+      <div v-else-if="error" role="alert" class="py-12 text-center">
+        <p class="text-fg-muted mb-4">{{ error }}</p>
+        <button type="button" class="btn" @click="loadOrgs">Try again</button>
+      </div>
+
+      <!-- Empty state -->
+      <div v-else-if="orgs.length === 0" class="py-12 text-center">
+        <p class="text-fg-muted">No organizations found.</p>
+        <p class="text-fg-subtle text-sm mt-2">
+          Organizations are detected from your scoped packages.
+        </p>
+      </div>
+
+      <!-- Orgs list -->
+      <section v-else aria-label="Organizations">
+        <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
+          {{ orgs.length }} Organization{{ orgs.length === 1 ? '' : 's' }}
+        </h2>
+
+        <ul class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          <li v-for="org in orgs" :key="org.name">
+            <NuxtLink
+              :to="`/@${org.name}`"
+              class="block p-5 bg-bg-subtle border border-border rounded-lg hover:border-fg-subtle transition-colors h-full"
+            >
+              <div class="flex items-start gap-4 mb-4">
+                <!-- Org avatar -->
+                <div
+                  class="w-14 h-14 rounded-lg bg-bg-muted border border-border flex items-center justify-center flex-shrink-0"
+                  aria-hidden="true"
+                >
+                  <span class="text-2xl text-fg-subtle font-mono">{{
+                    org.name.charAt(0).toUpperCase()
+                  }}</span>
+                </div>
+                <div class="min-w-0 flex-1">
+                  <h3 class="font-mono text-lg text-fg truncate">@{{ org.name }}</h3>
+                  <!-- Role badge -->
+                  <span
+                    v-if="org.role"
+                    class="inline-block mt-1 px-2 py-0.5 text-xs font-mono rounded"
+                    :class="getRoleBadgeClass(org.role)"
+                  >
+                    {{ org.role }}
+                  </span>
+                  <span
+                    v-else-if="org.isLoadingDetails"
+                    class="skeleton inline-block mt-1 h-5 w-16 rounded"
+                  />
+                </div>
+              </div>
+
+              <!-- Stats -->
+              <div class="flex items-center gap-4 text-sm text-fg-muted">
+                <div class="flex items-center gap-1.5">
+                  <span class="i-carbon-cube w-4 h-4" />
+                  <span v-if="org.packageCount !== null">
+                    {{ org.packageCount }} package{{ org.packageCount === 1 ? '' : 's' }}
+                  </span>
+                  <span v-else-if="org.isLoadingDetails" class="skeleton inline-block h-4 w-20" />
+                  <span v-else class="text-fg-subtle">—</span>
+                </div>
+              </div>
+            </NuxtLink>
+          </li>
+        </ul>
+      </section>
+    </ClientOnly>
+  </main>
+</template>
diff --git a/cli/src/npm-client.ts b/cli/src/npm-client.ts
index f0a22c4aba..85f7ee2164 100644
--- a/cli/src/npm-client.ts
+++ b/cli/src/npm-client.ts
@@ -313,6 +313,16 @@ export async function accessListCollaborators(pkg: string): Promise<NpmExecResul
   return execNpm(['access', 'list', 'collaborators', pkg, '--json'], { silent: true })
 }
 
+/**
+ * Lists all packages that a user has access to publish.
+ * Uses `npm access list packages @{user} --json`
+ * Returns a map of package name to permission level
+ */
+export async function listUserPackages(user: string): Promise<NpmExecResult> {
+  validateUsername(user)
+  return execNpm(['access', 'list', 'packages', `@${user}`, '--json'], { silent: true })
+}
+
 /**
  * Initialize and publish a new package to claim the name.
  * Creates a minimal package.json in a temp directory and publishes it.
diff --git a/cli/src/server.ts b/cli/src/server.ts
index 2ff477ec7c..c4dc1d42f4 100644
--- a/cli/src/server.ts
+++ b/cli/src/server.ts
@@ -23,6 +23,7 @@ import {
   ownerAdd,
   ownerRemove,
   packageInit,
+  listUserPackages,
   type NpmExecResult,
 } from './npm-client.ts'
 import {
@@ -234,7 +235,10 @@ export function createConnectorApp(expectedToken: string) {
     }
 
     if (operation.status !== 'pending') {
-      throw new HTTPError({ statusCode: 400, message: 'Operation is not pending' })
+      throw new HTTPError({
+        statusCode: 400,
+        message: 'Operation is not pending',
+      })
     }
 
     operation.status = 'approved'
@@ -282,7 +286,10 @@ export function createConnectorApp(expectedToken: string) {
     }
 
     if (operation.status !== 'failed') {
-      throw new HTTPError({ statusCode: 400, message: 'Only failed operations can be retried' })
+      throw new HTTPError({
+        statusCode: 400,
+        message: 'Only failed operations can be retried',
+      })
     }
 
     // Reset the operation for retry
@@ -337,7 +344,11 @@ export function createConnectorApp(expectedToken: string) {
         // Dependency failed - skip this one too
         if (failedIds.has(op.dependsOn)) {
           op.status = 'failed'
-          op.result = { stdout: '', stderr: 'Skipped: dependency failed', exitCode: 1 }
+          op.result = {
+            stdout: '',
+            stderr: 'Skipped: dependency failed',
+            exitCode: 1,
+          }
           failedIds.add(op.id)
           results.push({ id: op.id, result: op.result })
           return false
@@ -410,7 +421,10 @@ export function createConnectorApp(expectedToken: string) {
 
     const operation = state.operations[index]
     if (!operation || operation.status === 'running') {
-      throw new HTTPError({ statusCode: 400, message: 'Cannot cancel running operation' })
+      throw new HTTPError({
+        statusCode: 400,
+        message: 'Cannot cancel running operation',
+      })
     }
 
     state.operations.splice(index, 1)
@@ -590,6 +604,97 @@ export function createConnectorApp(expectedToken: string) {
     }
   })
 
+  // User-specific endpoints
+
+  app.get('/user/packages', async event => {
+    const auth = event.req.headers.get('authorization')
+    if (!validateToken(auth)) {
+      throw new HTTPError({ statusCode: 401, message: 'Unauthorized' })
+    }
+
+    const npmUser = state.session.npmUser
+    if (!npmUser) {
+      return {
+        success: false,
+        error: 'Not logged in to npm',
+      } as ApiResponse
+    }
+
+    const result = await listUserPackages(npmUser)
+    if (result.exitCode !== 0) {
+      return {
+        success: false,
+        error: result.stderr || 'Failed to list user packages',
+      } as ApiResponse
+    }
+
+    try {
+      // npm access list packages returns { "packageName": "read-write" | "read-only" }
+      const packages = JSON.parse(result.stdout) as Record<string, 'read-write' | 'read-only'>
+      return {
+        success: true,
+        data: packages,
+      } as ApiResponse
+    } catch {
+      return {
+        success: false,
+        error: 'Failed to parse user packages',
+      } as ApiResponse
+    }
+  })
+
+  app.get('/user/orgs', async event => {
+    const auth = event.req.headers.get('authorization')
+    if (!validateToken(auth)) {
+      throw new HTTPError({ statusCode: 401, message: 'Unauthorized' })
+    }
+
+    const npmUser = state.session.npmUser
+    if (!npmUser) {
+      return {
+        success: false,
+        error: 'Not logged in to npm',
+      } as ApiResponse
+    }
+
+    // Get user's packages and extract org names from scoped packages
+    const result = await listUserPackages(npmUser)
+    if (result.exitCode !== 0) {
+      return {
+        success: false,
+        error: result.stderr || 'Failed to list user packages',
+      } as ApiResponse
+    }
+
+    try {
+      const packages = JSON.parse(result.stdout) as Record<string, string>
+      const orgs = new Set<string>()
+
+      // Extract org names from scoped packages (e.g., @myorg/mypackage -> myorg)
+      for (const pkgName of Object.keys(packages)) {
+        if (pkgName.startsWith('@')) {
+          const match = pkgName.match(/^@([^/]+)\//)
+          if (match && match[1]) {
+            // Exclude the user's own scope (personal packages)
+            if (match[1].toLowerCase() !== npmUser.toLowerCase()) {
+              orgs.add(match[1])
+            }
+          }
+        }
+      }
+
+      return {
+        success: true,
+        data: Array.from(orgs).sort(),
+      } as ApiResponse
+    } catch {
+      return {
+        success: false,
+        error: 'Failed to parse user orgs',
+      } as ApiResponse
+    }
+  })
+
   return app
 }
 
diff --git a/server/api/registry/org/[org]/packages.get.ts b/server/api/registry/org/[org]/packages.get.ts
new file mode 100644
index 0000000000..0a3774f824
--- /dev/null
+++ b/server/api/registry/org/[org]/packages.get.ts
@@ -0,0 +1,54 @@
+import { CACHE_MAX_AGE_ONE_HOUR } from '#shared/utils/constants'
+
+const NPM_REGISTRY = 'https://registry.npmjs.org'
+
+// Validation pattern for npm org names (alphanumeric with hyphens)
+const NPM_ORG_NAME_RE = /^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/i
+
+function validateOrgName(name: string): void {
+  if (!name || name.length > 50 || !NPM_ORG_NAME_RE.test(name)) {
+    throw createError({
+      statusCode: 400,
+      message: `Invalid org name: ${name}`,
+    })
+  }
+}
+
+export default defineCachedEventHandler(
+  async event => {
+    const org = getRouterParam(event, 'org')
+
+    if (!org) {
+      throw createError({
+        statusCode: 400,
+        message: 'Org name is required',
+      })
+    }
+
+    validateOrgName(org)
+
+    try {
+      const data = await $fetch<Record<string, string>>(
+        `${NPM_REGISTRY}/-/org/${encodeURIComponent(org)}/package`,
+      )
+      return {
+        packages: Object.keys(data),
+        count: Object.keys(data).length,
+      }
+    } catch {
+      // Org doesn't exist or has no packages
+      return {
+        packages: [],
+        count: 0,
+      }
+    }
+  },
+  {
+    maxAge: CACHE_MAX_AGE_ONE_HOUR,
+    swr: true,
+    getKey: event => {
+      const org = getRouterParam(event, 'org') ?? ''
+      return `org-packages:v1:${org}`
+    },
+  },
+)
diff --git a/test/unit/cli-server.spec.ts b/test/unit/cli-server.spec.ts
index cd9cebbfdf..d492b11793 100644
--- a/test/unit/cli-server.spec.ts
+++ b/test/unit/cli-server.spec.ts
@@ -29,4 +29,48 @@ describe('connector server', () => {
       expect(response.status).toBe(401)
     })
   })
+
+  describe('GET /user/packages', () => {
+    it('returns 401 without auth token', async () => {
+      const app = createConnectorApp(TEST_TOKEN)
+
+      const response = await app.fetch(new Request('http://localhost/user/packages'))
+
+      expect(response.status).toBe(401)
+    })
+
+    it('returns 401 with invalid auth token', async () => {
+      const app = createConnectorApp(TEST_TOKEN)
+
+      const response = await app.fetch(
+        new Request('http://localhost/user/packages', {
+          headers: { Authorization: 'Bearer wrong-token' },
+        }),
+      )
+
+      expect(response.status).toBe(401)
+    })
+  })
+
+  describe('GET /user/orgs', () => {
+    it('returns 401 without auth token', async () => {
+      const app = createConnectorApp(TEST_TOKEN)
+
+      const response = await app.fetch(new Request('http://localhost/user/orgs'))
+
+      expect(response.status).toBe(401)
+    })
+
+    it('returns 401 with invalid auth token', async () => {
+      const app = createConnectorApp(TEST_TOKEN)
+
+      const response = await app.fetch(
+        new Request('http://localhost/user/orgs', {
+          headers: { Authorization: 'Bearer wrong-token' },
+        }),
+      )
+
+      expect(response.status).toBe(401)
+    })
+  })
 })
diff --git a/test/unit/org-packages-api.spec.ts b/test/unit/org-packages-api.spec.ts
new file mode 100644
index 0000000000..671ed3752f
--- /dev/null
+++ b/test/unit/org-packages-api.spec.ts
@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest'
+
+// Test the org name validation regex used in the API route
+const NPM_ORG_NAME_RE = /^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/i
+
+function isValidOrgName(name: string): boolean {
+  return !!name && name.length <= 50 && NPM_ORG_NAME_RE.test(name)
+}
+
+describe('org packages API validation', () => {
+  describe('org name validation', () => {
+    it('accepts valid org names', () => {
+      expect(isValidOrgName('nuxt')).toBe(true)
+      expect(isValidOrgName('my-org')).toBe(true)
+      expect(isValidOrgName('org123')).toBe(true)
+      expect(isValidOrgName('a')).toBe(true)
+      expect(isValidOrgName('a1')).toBe(true)
+      expect(isValidOrgName('vue')).toBe(true)
+      expect(isValidOrgName('types')).toBe(true)
+    })
+
+    it('rejects empty org names', () => {
+      expect(isValidOrgName('')).toBe(false)
+    })
+
+    it('rejects org names that are too long', () => {
+      const longName = 'a'.repeat(51)
+      expect(isValidOrgName(longName)).toBe(false)
+    })
+
+    it('rejects org names starting with hyphen', () => {
+      expect(isValidOrgName('-org')).toBe(false)
+    })
+
+    it('rejects org names ending with hyphen', () => {
+      expect(isValidOrgName('org-')).toBe(false)
+    })
+
+    it('rejects org names with invalid characters', () => {
+      expect(isValidOrgName('org;rm')).toBe(false)
+      expect(isValidOrgName('org&&evil')).toBe(false)
+      expect(isValidOrgName('$(whoami)')).toBe(false)
+      expect(isValidOrgName('org space')).toBe(false)
+      expect(isValidOrgName('org.name')).toBe(false)
+      expect(isValidOrgName('org_name')).toBe(false)
+      expect(isValidOrgName('org@name')).toBe(false)
+      expect(isValidOrgName('org/name')).toBe(false)
+    })
+
+    it('handles single character org names', () => {
+      expect(isValidOrgName('a')).toBe(true)
+      expect(isValidOrgName('1')).toBe(true)
+      expect(isValidOrgName('-')).toBe(false)
+    })
+  })
+})

From 795156f8ee448aa0c34a3e7ff537d17410b4d53b Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Mon, 26 Jan 2026 21:11:45 -0500
Subject: [PATCH 2/9] test: update assertion after 5c606dc

---
 tests/url-compatibility.spec.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/tests/url-compatibility.spec.ts b/tests/url-compatibility.spec.ts
index cc7ebe2888..79c9ed4aba 100644
--- a/tests/url-compatibility.spec.ts
+++ b/tests/url-compatibility.spec.ts
@@ -101,13 +101,11 @@ test.describe('npmjs.com URL Compatibility', () => {
       await expect(page.getByRole('heading', { name: 'Packages' })).toBeVisible()
     })
 
-    test('/org/nonexistent-org-12345 → empty org handling', async ({ page, goto }) => {
+    test('/org/nonexistent-org-12345 → 404 handling', async ({ page, goto }) => {
       await goto('/org/nonexistent-org-12345', { waitUntil: 'domcontentloaded' })
 
-      // Should show org name in header
-      await expect(page.locator('h1')).toContainText('@nonexistent-org-12345')
-      // Should show empty state message
-      await expect(page.getByText('No public packages found for')).toBeVisible()
+      // Should show 404 error page
+      await expect(page.locator('h1')).toContainText('Organization not found')
     })
   })
 

From f1fab3f08b48d43a767d9fa9106b684115a72ab4 Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Mon, 26 Jan 2026 21:26:53 -0500
Subject: [PATCH 3/9] fix: restore delete comment

---
 app/components/AppHeader.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 836c56e31c..4762bb3210 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -26,6 +26,7 @@ const { isConnected, npmUser } = useConnector()
         >
           <span class="text-fg-subtle"><span style="letter-spacing: -0.2em">.</span>/</span>npmx
         </NuxtLink>
+        <!-- Spacer when logo is hidden -->
         <span v-else class="w-1" />
       </div>
 

From 91598783532b45b63c8aa4e08568df0bcaa5b284 Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Mon, 26 Jan 2026 21:37:03 -0500
Subject: [PATCH 4/9] test: delete nonsense test

Claude, what?
---
 test/unit/org-packages-api.spec.ts | 56 ------------------------------
 1 file changed, 56 deletions(-)
 delete mode 100644 test/unit/org-packages-api.spec.ts

diff --git a/test/unit/org-packages-api.spec.ts b/test/unit/org-packages-api.spec.ts
deleted file mode 100644
index 671ed3752f..0000000000
--- a/test/unit/org-packages-api.spec.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-// Test the org name validation regex used in the API route
-const NPM_ORG_NAME_RE = /^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/i
-
-function isValidOrgName(name: string): boolean {
-  return !!name && name.length <= 50 && NPM_ORG_NAME_RE.test(name)
-}
-
-describe('org packages API validation', () => {
-  describe('org name validation', () => {
-    it('accepts valid org names', () => {
-      expect(isValidOrgName('nuxt')).toBe(true)
-      expect(isValidOrgName('my-org')).toBe(true)
-      expect(isValidOrgName('org123')).toBe(true)
-      expect(isValidOrgName('a')).toBe(true)
-      expect(isValidOrgName('a1')).toBe(true)
-      expect(isValidOrgName('vue')).toBe(true)
-      expect(isValidOrgName('types')).toBe(true)
-    })
-
-    it('rejects empty org names', () => {
-      expect(isValidOrgName('')).toBe(false)
-    })
-
-    it('rejects org names that are too long', () => {
-      const longName = 'a'.repeat(51)
-      expect(isValidOrgName(longName)).toBe(false)
-    })
-
-    it('rejects org names starting with hyphen', () => {
-      expect(isValidOrgName('-org')).toBe(false)
-    })
-
-    it('rejects org names ending with hyphen', () => {
-      expect(isValidOrgName('org-')).toBe(false)
-    })
-
-    it('rejects org names with invalid characters', () => {
-      expect(isValidOrgName('org;rm')).toBe(false)
-      expect(isValidOrgName('org&&evil')).toBe(false)
-      expect(isValidOrgName('$(whoami)')).toBe(false)
-      expect(isValidOrgName('org space')).toBe(false)
-      expect(isValidOrgName('org.name')).toBe(false)
-      expect(isValidOrgName('org_name')).toBe(false)
-      expect(isValidOrgName('org@name')).toBe(false)
-      expect(isValidOrgName('org/name')).toBe(false)
-    })
-
-    it('handles single character org names', () => {
-      expect(isValidOrgName('a')).toBe(true)
-      expect(isValidOrgName('1')).toBe(true)
-      expect(isValidOrgName('-')).toBe(false)
-    })
-  })
-})

From ebf7de23fd24351ca7c8f36cf2b27bc2232c63ce Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Mon, 26 Jan 2026 21:53:09 -0500
Subject: [PATCH 5/9] fix: use consistent layout on new orgs page

---
 app/pages/~[username]/orgs.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/~[username]/orgs.vue b/app/pages/~[username]/orgs.vue
index fa9616eae8..24a2626208 100644
--- a/app/pages/~[username]/orgs.vue
+++ b/app/pages/~[username]/orgs.vue
@@ -102,7 +102,7 @@ useSeoMeta({
 </script>
 
 <template>
-  <main class="container py-8 sm:py-12">
+  <main class="container py-8 sm:py-12 w-full">
     <!-- Header -->
     <header class="mb-8 pb-8 border-b border-border">
       <div class="flex items-center gap-4 mb-4">

From b6e7686e1e3289940a9811c0cd108ce2613ad7d1 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 27 Jan 2026 10:41:11 +0000
Subject: [PATCH 6/9] fix: case-insensitive user role lookup

---
 app/pages/~[username]/orgs.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/pages/~[username]/orgs.vue b/app/pages/~[username]/orgs.vue
index 24a2626208..5d58983d96 100644
--- a/app/pages/~[username]/orgs.vue
+++ b/app/pages/~[username]/orgs.vue
@@ -39,7 +39,9 @@ async function loadOrgDetails(org: OrgInfo) {
   try {
     const users = await listOrgUsers(org.name)
     if (users && npmUser.value) {
-      org.role = users[npmUser.value] ?? null
+      const lowerUser = npmUser.value.toLowerCase()
+      const entry = Object.entries(users).find(([k]) => k.toLowerCase() === lowerUser)
+      org.role = entry?.[1] ?? null
     }
   } catch {
     org.role = null

From c190b0e38facba82e1148abdc97ef5e5d0b73165 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 27 Jan 2026 10:41:31 +0000
Subject: [PATCH 7/9] fix: add error handling to dropdowns

---
 app/components/HeaderOrgsDropdown.vue     | 10 ++++++++++
 app/components/HeaderPackagesDropdown.vue | 10 ++++++++++
 2 files changed, 20 insertions(+)

diff --git a/app/components/HeaderOrgsDropdown.vue b/app/components/HeaderOrgsDropdown.vue
index 7b3df710d8..137ecf1615 100644
--- a/app/components/HeaderOrgsDropdown.vue
+++ b/app/components/HeaderOrgsDropdown.vue
@@ -9,18 +9,24 @@ const isOpen = ref(false)
 const isLoading = ref(false)
 const orgs = ref<string[]>([])
 const hasLoaded = ref(false)
+const error = ref<string | null>(null)
 
 async function loadOrgs() {
   if (hasLoaded.value || isLoading.value) return
 
   isLoading.value = true
+  error.value = null
   try {
     const orgList = await listUserOrgs()
     if (orgList) {
       // Already sorted alphabetically by server, take top 10
       orgs.value = orgList.slice(0, 10)
+    } else {
+      error.value = 'Failed to load organizations'
     }
     hasLoaded.value = true
+  } catch {
+    error.value = 'Failed to load organizations'
   } finally {
     isLoading.value = false
   }
@@ -80,6 +86,10 @@ function handleKeydown(event: KeyboardEvent) {
           <span class="text-fg-muted text-sm">Loading...</span>
         </div>
 
+        <div v-else-if="error" class="px-3 py-4 text-center">
+          <span class="text-fg-muted text-sm">{{ error }}</span>
+        </div>
+
         <ul v-else-if="orgs.length > 0" class="py-1 max-h-80 overflow-y-auto">
           <li v-for="org in orgs" :key="org">
             <NuxtLink
diff --git a/app/components/HeaderPackagesDropdown.vue b/app/components/HeaderPackagesDropdown.vue
index 25da22eca6..39c3ef4d30 100644
--- a/app/components/HeaderPackagesDropdown.vue
+++ b/app/components/HeaderPackagesDropdown.vue
@@ -9,18 +9,24 @@ const isOpen = ref(false)
 const isLoading = ref(false)
 const packages = ref<string[]>([])
 const hasLoaded = ref(false)
+const error = ref<string | null>(null)
 
 async function loadPackages() {
   if (hasLoaded.value || isLoading.value) return
 
   isLoading.value = true
+  error.value = null
   try {
     const pkgMap = await listUserPackages()
     if (pkgMap) {
       // Sort alphabetically and take top 10
       packages.value = Object.keys(pkgMap).sort().slice(0, 10)
+    } else {
+      error.value = 'Failed to load packages'
     }
     hasLoaded.value = true
+  } catch {
+    error.value = 'Failed to load packages'
   } finally {
     isLoading.value = false
   }
@@ -80,6 +86,10 @@ function handleKeydown(event: KeyboardEvent) {
           <span class="text-fg-muted text-sm">Loading...</span>
         </div>
 
+        <div v-else-if="error" class="px-3 py-4 text-center">
+          <span class="text-fg-muted text-sm">{{ error }}</span>
+        </div>
+
         <ul v-else-if="packages.length > 0" class="py-1 max-h-80 overflow-y-auto">
           <li v-for="pkg in packages" :key="pkg">
             <NuxtLink

From 314175bf4e7b91f3b75280b1ecf6713a5aaed6e0 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 27 Jan 2026 10:43:54 +0000
Subject: [PATCH 8/9] fix: some a11y issues

---
 app/components/ConnectorStatus.client.vue | 2 ++
 app/components/HeaderOrgsDropdown.vue     | 5 +++--
 app/components/HeaderPackagesDropdown.vue | 5 +++--
 app/pages/~[username]/orgs.vue            | 4 ++--
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/components/ConnectorStatus.client.vue b/app/components/ConnectorStatus.client.vue
index a4b3db66fe..df2141be04 100644
--- a/app/components/ConnectorStatus.client.vue
+++ b/app/components/ConnectorStatus.client.vue
@@ -61,6 +61,8 @@ const ariaLabel = computed(() => {
         v-if="isConnected && avatar"
         :src="avatar"
         :alt="`${npmUser}'s avatar`"
+        width="24"
+        height="24"
         class="w-6 h-6 rounded-full"
       />
       <!-- Status dot (when not connected or no avatar) -->
diff --git a/app/components/HeaderOrgsDropdown.vue b/app/components/HeaderOrgsDropdown.vue
index 137ecf1615..170053ebb1 100644
--- a/app/components/HeaderOrgsDropdown.vue
+++ b/app/components/HeaderOrgsDropdown.vue
@@ -65,6 +65,7 @@ function handleKeydown(event: KeyboardEvent) {
       <span
         class="i-carbon-chevron-down w-3 h-3 transition-transform duration-200"
         :class="{ 'rotate-180': isOpen }"
+        aria-hidden="true"
       />
     </NuxtLink>
 
@@ -83,7 +84,7 @@ function handleKeydown(event: KeyboardEvent) {
         </div>
 
         <div v-if="isLoading" class="px-3 py-4 text-center">
-          <span class="text-fg-muted text-sm">Loading...</span>
+          <span class="text-fg-muted text-sm">Loading…</span>
         </div>
 
         <div v-else-if="error" class="px-3 py-4 text-center">
@@ -111,7 +112,7 @@ function handleKeydown(event: KeyboardEvent) {
             class="link-subtle font-mono text-xs inline-flex items-center gap-1"
           >
             View all
-            <span class="i-carbon-arrow-right w-3 h-3" />
+            <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
           </NuxtLink>
         </div>
       </div>
diff --git a/app/components/HeaderPackagesDropdown.vue b/app/components/HeaderPackagesDropdown.vue
index 39c3ef4d30..68f01d22a2 100644
--- a/app/components/HeaderPackagesDropdown.vue
+++ b/app/components/HeaderPackagesDropdown.vue
@@ -65,6 +65,7 @@ function handleKeydown(event: KeyboardEvent) {
       <span
         class="i-carbon-chevron-down w-3 h-3 transition-transform duration-200"
         :class="{ 'rotate-180': isOpen }"
+        aria-hidden="true"
       />
     </NuxtLink>
 
@@ -83,7 +84,7 @@ function handleKeydown(event: KeyboardEvent) {
         </div>
 
         <div v-if="isLoading" class="px-3 py-4 text-center">
-          <span class="text-fg-muted text-sm">Loading...</span>
+          <span class="text-fg-muted text-sm">Loading…</span>
         </div>
 
         <div v-else-if="error" class="px-3 py-4 text-center">
@@ -111,7 +112,7 @@ function handleKeydown(event: KeyboardEvent) {
             class="link-subtle font-mono text-xs inline-flex items-center gap-1"
           >
             View all
-            <span class="i-carbon-arrow-right w-3 h-3" />
+            <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
           </NuxtLink>
         </div>
       </div>
diff --git a/app/pages/~[username]/orgs.vue b/app/pages/~[username]/orgs.vue
index 5d58983d96..9fc35b0ceb 100644
--- a/app/pages/~[username]/orgs.vue
+++ b/app/pages/~[username]/orgs.vue
@@ -129,7 +129,7 @@ useSeoMeta({
           :to="`/~${username}`"
           class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
         >
-          <span class="i-carbon-arrow-left w-4 h-4" />
+          <span class="i-carbon-arrow-left w-4 h-4" aria-hidden="true" />
           Back to profile
         </NuxtLink>
       </nav>
@@ -210,7 +210,7 @@ useSeoMeta({
               <!-- Stats -->
               <div class="flex items-center gap-4 text-sm text-fg-muted">
                 <div class="flex items-center gap-1.5">
-                  <span class="i-carbon-cube w-4 h-4" />
+                  <span class="i-carbon-cube w-4 h-4" aria-hidden="true" />
                   <span v-if="org.packageCount !== null">
                     {{ org.packageCount }} package{{ org.packageCount === 1 ? '' : 's' }}
                   </span>

From ebcbfb01cd4dffe4ad9946a02d2dd86f38a6b2b8 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 27 Jan 2026 10:45:38 +0000
Subject: [PATCH 9/9] fix: prevent dropdown from disappearing as mouse goes
 down

---
 app/components/HeaderOrgsDropdown.vue     | 65 +++++++++++------------
 app/components/HeaderPackagesDropdown.vue | 65 +++++++++++------------
 2 files changed, 64 insertions(+), 66 deletions(-)

diff --git a/app/components/HeaderOrgsDropdown.vue b/app/components/HeaderOrgsDropdown.vue
index 170053ebb1..4e17eb2a97 100644
--- a/app/components/HeaderOrgsDropdown.vue
+++ b/app/components/HeaderOrgsDropdown.vue
@@ -75,45 +75,44 @@ function handleKeydown(event: KeyboardEvent) {
       enter-from-class="opacity-0 translate-y-1"
       leave-to-class="opacity-0 translate-y-1"
     >
-      <div
-        v-if="isOpen"
-        class="absolute right-0 top-full mt-2 w-56 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 overflow-hidden"
-      >
-        <div class="px-3 py-2 border-b border-border">
-          <span class="font-mono text-xs text-fg-subtle">Your Organizations</span>
-        </div>
+      <div v-if="isOpen" class="absolute right-0 top-full pt-2 w-56 z-50">
+        <div class="bg-bg-elevated border border-border rounded-lg shadow-lg overflow-hidden">
+          <div class="px-3 py-2 border-b border-border">
+            <span class="font-mono text-xs text-fg-subtle">Your Organizations</span>
+          </div>
 
-        <div v-if="isLoading" class="px-3 py-4 text-center">
-          <span class="text-fg-muted text-sm">Loading…</span>
-        </div>
+          <div v-if="isLoading" class="px-3 py-4 text-center">
+            <span class="text-fg-muted text-sm">Loading…</span>
+          </div>
 
-        <div v-else-if="error" class="px-3 py-4 text-center">
-          <span class="text-fg-muted text-sm">{{ error }}</span>
-        </div>
+          <div v-else-if="error" class="px-3 py-4 text-center">
+            <span class="text-fg-muted text-sm">{{ error }}</span>
+          </div>
+
+          <ul v-else-if="orgs.length > 0" class="py-1 max-h-80 overflow-y-auto">
+            <li v-for="org in orgs" :key="org">
+              <NuxtLink
+                :to="`/@${org}`"
+                class="block px-3 py-2 font-mono text-sm text-fg hover:bg-bg-subtle transition-colors"
+              >
+                @{{ org }}
+              </NuxtLink>
+            </li>
+          </ul>
 
-        <ul v-else-if="orgs.length > 0" class="py-1 max-h-80 overflow-y-auto">
-          <li v-for="org in orgs" :key="org">
+          <div v-else class="px-3 py-4 text-center">
+            <span class="text-fg-muted text-sm">No organizations found</span>
+          </div>
+
+          <div class="px-3 py-2 border-t border-border">
             <NuxtLink
-              :to="`/@${org}`"
-              class="block px-3 py-2 font-mono text-sm text-fg hover:bg-bg-subtle transition-colors"
+              :to="`/~${username}/orgs`"
+              class="link-subtle font-mono text-xs inline-flex items-center gap-1"
             >
-              @{{ org }}
+              View all
+              <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
             </NuxtLink>
-          </li>
-        </ul>
-
-        <div v-else class="px-3 py-4 text-center">
-          <span class="text-fg-muted text-sm">No organizations found</span>
-        </div>
-
-        <div class="px-3 py-2 border-t border-border">
-          <NuxtLink
-            :to="`/~${username}/orgs`"
-            class="link-subtle font-mono text-xs inline-flex items-center gap-1"
-          >
-            View all
-            <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
-          </NuxtLink>
+          </div>
         </div>
       </div>
     </Transition>
diff --git a/app/components/HeaderPackagesDropdown.vue b/app/components/HeaderPackagesDropdown.vue
index 68f01d22a2..d568614f24 100644
--- a/app/components/HeaderPackagesDropdown.vue
+++ b/app/components/HeaderPackagesDropdown.vue
@@ -75,45 +75,44 @@ function handleKeydown(event: KeyboardEvent) {
       enter-from-class="opacity-0 translate-y-1"
       leave-to-class="opacity-0 translate-y-1"
     >
-      <div
-        v-if="isOpen"
-        class="absolute right-0 top-full mt-2 w-64 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 overflow-hidden"
-      >
-        <div class="px-3 py-2 border-b border-border">
-          <span class="font-mono text-xs text-fg-subtle">Your Packages</span>
-        </div>
+      <div v-if="isOpen" class="absolute right-0 top-full pt-2 w-64 z-50">
+        <div class="bg-bg-elevated border border-border rounded-lg shadow-lg overflow-hidden">
+          <div class="px-3 py-2 border-b border-border">
+            <span class="font-mono text-xs text-fg-subtle">Your Packages</span>
+          </div>
 
-        <div v-if="isLoading" class="px-3 py-4 text-center">
-          <span class="text-fg-muted text-sm">Loading…</span>
-        </div>
+          <div v-if="isLoading" class="px-3 py-4 text-center">
+            <span class="text-fg-muted text-sm">Loading…</span>
+          </div>
 
-        <div v-else-if="error" class="px-3 py-4 text-center">
-          <span class="text-fg-muted text-sm">{{ error }}</span>
-        </div>
+          <div v-else-if="error" class="px-3 py-4 text-center">
+            <span class="text-fg-muted text-sm">{{ error }}</span>
+          </div>
+
+          <ul v-else-if="packages.length > 0" class="py-1 max-h-80 overflow-y-auto">
+            <li v-for="pkg in packages" :key="pkg">
+              <NuxtLink
+                :to="`/${pkg}`"
+                class="block px-3 py-2 font-mono text-sm text-fg hover:bg-bg-subtle transition-colors truncate"
+              >
+                {{ pkg }}
+              </NuxtLink>
+            </li>
+          </ul>
 
-        <ul v-else-if="packages.length > 0" class="py-1 max-h-80 overflow-y-auto">
-          <li v-for="pkg in packages" :key="pkg">
+          <div v-else class="px-3 py-4 text-center">
+            <span class="text-fg-muted text-sm">No packages found</span>
+          </div>
+
+          <div class="px-3 py-2 border-t border-border">
             <NuxtLink
-              :to="`/${pkg}`"
-              class="block px-3 py-2 font-mono text-sm text-fg hover:bg-bg-subtle transition-colors truncate"
+              :to="`/~${username}`"
+              class="link-subtle font-mono text-xs inline-flex items-center gap-1"
             >
-              {{ pkg }}
+              View all
+              <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
             </NuxtLink>
-          </li>
-        </ul>
-
-        <div v-else class="px-3 py-4 text-center">
-          <span class="text-fg-muted text-sm">No packages found</span>
-        </div>
-
-        <div class="px-3 py-2 border-t border-border">
-          <NuxtLink
-            :to="`/~${username}`"
-            class="link-subtle font-mono text-xs inline-flex items-center gap-1"
-          >
-            View all
-            <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
-          </NuxtLink>
+          </div>
         </div>
       </div>
     </Transition>