release(v1.7.10-alpha): apply namespace fix + FIPS cascade + profile polish

THE apply fix
  archipelago.service uses ProtectSystem=strict, so /opt and /usr are
  read-only inside the service's mount namespace. sudo inherits that
  namespace — every sudo mkdir/mv/chown from apply_update was hitting
  EROFS even as root. Every prior "Failed to apply update" was a
  symptom of this. New `host_sudo()` helper wraps every filesystem
  call in `sudo systemd-run --wait --collect --pipe -- <cmd>`, which
  spawns a transient unit with systemd's default (no ProtectSystem)
  protections — the command runs in the host namespace and can touch
  /opt/archipelago + /usr/local/bin normally.

FIPS cascade (#2)
  Home.vue and Server.vue both carry a FIPS row that previously only
  looked at {installed, service_active, key_present}. Now they also
  read anchor_connected + authenticated_peer_count and mirror the
  full FIPS card: green "Active · N peers" when healthy, orange "No
  anchor" when the DHT bootstrap has failed.

Profile paste URL fallback (#4)
  Web5Identities.vue list + editor previously had `@error="display:none"`
  on the <img>, which hid the tag without re-rendering the fallback —
  a broken pasted URL showed up blank. Replaced with reactive
  pictureLoadFailed / listPictureFailed flags plus a watcher that
  resets on URL change. Broken URL now falls back to the initial (or
  identicon for seed-derived identities).

Small-upload data URL (#3)
  Uploaded profile pictures ≤ 64 KB are now inlined as
  `data:image/png;base64,...` into profile.picture on the client
  before calling update-profile. That kind-0 event is fetchable by
  any Nostr client — no Tor needed. Larger uploads fall back to the
  onion-rooted public_url with a hint telling the user to paste a
  public https:// URL for broader visibility.

Deferred: #1 FIPS Reconnect "actually fixes" — the current Reconnect
calls fips.restart which clears the daemon state, but when the
anchor is truly unreachable (UDP 8668 blocked by network/ISP), no
amount of restart can help. A richer diagnostic is out of scope for
this bundle.

Artefacts:
  archipelago                                      4a77c704…82aa6f8  40379696
  archipelago-frontend-1.7.10-alpha.tar.gz         0644a436…54f58    76983846

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

neode-ui/src/views/Home.vue

@@ -317,26 +317,35 @@ const torConnected = computed(() => {
 })
 const vpnStatus = ref({ connected: false, provider: '' })
 const vpnConnected = computed(() => vpnStatus.value.connected || (!!packages.value['tailscale'] && packages.value['tailscale'].state === PackageState.Running))
-const fipsStatus = ref<{ installed: boolean; service_active: boolean; key_present: boolean } | null>(null)
+const fipsStatus = ref<{ installed: boolean; service_active: boolean; key_present: boolean; anchor_connected?: boolean; authenticated_peer_count?: number } | null>(null)
 const fipsDotClass = computed(() => {
   const s = fipsStatus.value
   if (!s || !s.installed) return 'bg-white/40'
-  if (s.service_active) return 'bg-green-400'
-  return 'bg-white/40'
+  if (!s.service_active) return 'bg-white/40'
+  // Active but no anchor = degraded, not fully green
+  if (s.anchor_connected === false) return 'bg-orange-400'
+  return 'bg-green-400'
 })
 const fipsTextClass = computed(() => {
   const s = fipsStatus.value
   if (!s || !s.installed) return 'text-white/40'
-  if (s.service_active) return 'text-green-400'
-  return 'text-white/40'
+  if (!s.service_active) return 'text-white/40'
+  if (s.anchor_connected === false) return 'text-orange-400'
+  return 'text-green-400'
 })
 const fipsStatusLabel = computed(() => {
   const s = fipsStatus.value
   if (!s) return '…'
   if (!s.installed) return 'Not installed'
-  if (s.service_active) return 'Active'
-  if (!s.key_present) return 'Awaiting seed'
-  return 'Inactive'
+  if (!s.service_active) {
+    if (!s.key_present) return 'Awaiting seed'
+    return 'Inactive'
+  }
+  // Service is active — reflect anchor reachability in the label so the
+  // Home and Server rows flip in sync with the FIPS card.
+  if (s.anchor_connected === false) return 'No anchor'
+  const peers = s.authenticated_peer_count ?? 0
+  return peers === 1 ? 'Active · 1 peer' : `Active · ${peers} peers`
 })
 const bitcoinSyncDisplay = computed(() => {
   if (!systemStats.bitcoinAvailable) return 'Not running'

neode-ui/src/views/Server.vue

@@ -420,25 +420,31 @@ const networkData = ref({
 })
 
 // FIPS status row for the Local Network card. Full FIPS card lives below.
-const fipsSummary = ref<{ installed: boolean; service_active: boolean; key_present: boolean } | null>(null)
+const fipsSummary = ref<{ installed: boolean; service_active: boolean; key_present: boolean; anchor_connected?: boolean; authenticated_peer_count?: number } | null>(null)
 const fipsRowLabel = computed(() => {
   const s = fipsSummary.value
   if (!s) return '…'
   if (!s.installed) return 'Not installed'
-  // Service-active wins even on legacy nodes with no seed-derived key.
-  if (s.service_active) return 'Active'
-  if (!s.key_present) return 'Awaiting seed'
-  return 'Inactive'
+  if (!s.service_active) {
+    if (!s.key_present) return 'Awaiting seed'
+    return 'Inactive'
+  }
+  // Service is active — reflect anchor reachability so the row flips in
+  // sync with the full FIPS card below.
+  if (s.anchor_connected === false) return 'No anchor'
+  const peers = s.authenticated_peer_count ?? 0
+  return peers === 1 ? 'Active · 1 peer' : `Active · ${peers} peers`
 })
 const fipsRowTextClass = computed(() => {
   const s = fipsSummary.value
   if (!s || !s.installed) return 'text-white/40'
-  if (s.service_active) return 'text-green-400'
-  return 'text-white/60'
+  if (!s.service_active) return 'text-white/60'
+  if (s.anchor_connected === false) return 'text-orange-400'
+  return 'text-green-400'
 })
 async function loadFipsSummary() {
   try {
-    fipsSummary.value = await rpcClient.call<{ installed: boolean; service_active: boolean; key_present: boolean }>({ method: 'fips.status' })
+    fipsSummary.value = await rpcClient.call<{ installed: boolean; service_active: boolean; key_present: boolean; anchor_connected?: boolean; authenticated_peer_count?: number }>({ method: 'fips.status' })
   } catch { /* backend too old */ }
 }
 

neode-ui/src/views/web5/Web5Identities.vue

@@ -68,8 +68,13 @@
       >
         <!-- Avatar -->
         <button @click="openProfileEditor(identity)" class="relative flex-shrink-0 w-10 h-10 rounded-full overflow-hidden group" title="Edit profile">
-          <img v-if="identity.profile?.picture" :src="displayableUrl(identity.profile.picture)" class="w-full h-full object-cover" @error="($event.target as HTMLImageElement).style.display = 'none'" />
-          <div v-if="!identity.profile?.picture" class="w-full h-full flex items-center justify-center" :class="{
+          <img
+            v-if="identity.profile?.picture && !listPictureFailed[identity.id]"
+            :src="displayableUrl(identity.profile.picture)"
+            class="w-full h-full object-cover"
+            @error="() => { listPictureFailed[identity.id] = true }"
+          />
+          <div v-if="!identity.profile?.picture || listPictureFailed[identity.id]" class="w-full h-full flex items-center justify-center" :class="{
             'bg-blue-500/20': identity.purpose === 'personal',
             'bg-orange-500/20': identity.purpose === 'business',
             'bg-purple-500/20': identity.purpose === 'anonymous',
@@ -302,8 +307,14 @@
     <div class="glass-card p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto" role="dialog" aria-modal="true" aria-labelledby="profile-editor-title">
       <div class="flex items-center gap-3 mb-5">
         <div class="relative w-16 h-16 rounded-full overflow-hidden bg-white/10 shrink-0">
-          <img v-if="profileForm.picture" :src="displayableUrl(profileForm.picture)" class="w-full h-full object-cover" @error="($event.target as HTMLImageElement).style.display = 'none'" />
-          <div v-else class="w-full h-full flex items-center justify-center">
+          <img
+            v-if="profileForm.picture && !editorPictureFailed"
+            :src="displayableUrl(profileForm.picture)"
+            class="w-full h-full object-cover"
+            @error="editorPictureFailed = true"
+            @load="editorPictureFailed = false"
+          />
+          <div v-if="!profileForm.picture || editorPictureFailed" class="w-full h-full flex items-center justify-center">
             <span class="text-2xl font-bold text-white/40">{{ profileEditorIdentity.name.charAt(0).toUpperCase() }}</span>
           </div>
         </div>
@@ -368,7 +379,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { rpcClient } from '@/api/rpc-client'
 import { safeClipboardWrite } from './utils'
@@ -409,6 +420,18 @@ const profilePublishing = ref(false)
 const avatarUploading = ref(false)
 const bannerUploading = ref(false)
 
+// Track image load failures so the UI can fall back to the initial/
+// identicon placeholder instead of showing a blank square. Pasted URLs
+// that 404 (or point at an onion the local browser can't reach) were
+// previously silently hidden by a display:none handler that left the
+// fallback unrendered.
+const editorPictureFailed = ref(false)
+const listPictureFailed = reactive<Record<string, boolean>>({})
+
+// Reset the failure flag when the URL changes so a freshly pasted URL
+// gets re-tried (the watcher fires once the form reacts).
+watch(() => profileForm.value.picture, () => { editorPictureFailed.value = false })
+
 // The backend returns onion-based public URLs for uploaded profile
 // pictures (so they're fetchable by external Nostr clients), but the
 // local browser session isn't Tor-routed and can't resolve .onion hosts.
@@ -423,10 +446,12 @@ function displayableUrl(url: string | null | undefined): string {
   return url
 }
 
-// Upload to the node's blob store and drop the returned public URL into
-// the profile field. The /api/blob endpoint marks these blobs public, so
-// the URL served back (`public_url`, onion-rooted when Tor is up) is
-// reachable by external Nostr clients fetching kind:0 metadata.
+// Upload to the node's blob store and drop a URL into the profile field.
+// For small images (≤64KB) we inline the bytes as a data URL so external
+// Nostr clients can render the picture without needing to reach a tor
+// onion. Larger uploads fall back to the onion-rooted public_url.
+const INLINE_MAX = 64 * 1024
+
 async function uploadAsset(ev: Event, field: 'picture' | 'banner') {
   const input = ev.target as HTMLInputElement
   const file = input?.files?.[0]
@@ -436,6 +461,14 @@ async function uploadAsset(ev: Event, field: 'picture' | 'banner') {
   profileError.value = ''
   try {
     const buf = await file.arrayBuffer()
+    // Inline small images as a data URL — universally fetchable by any
+    // Nostr client and bypasses the "only reachable over Tor" limitation.
+    if (buf.byteLength <= INLINE_MAX) {
+      const mime = file.type || 'image/png'
+      const b64 = btoa(Array.from(new Uint8Array(buf), (b) => String.fromCharCode(b)).join(''))
+      profileForm.value[field] = `data:${mime};base64,${b64}`
+      return
+    }
     const resp = await fetch('/api/blob', {
       method: 'POST',
       credentials: 'include',
@@ -451,6 +484,11 @@ async function uploadAsset(ev: Event, field: 'picture' | 'banner') {
     const url = public_url || self_test_url
     if (!url) throw new Error('blob API returned no URL')
     profileForm.value[field] = url
+    // Heads-up for large uploads: onion URLs only render on Tor-routed
+    // clients. Not an error, but worth telling the user.
+    if (url.includes('.onion/')) {
+      profileError.value = 'Large image stored on this node. Pasting a public https://… URL is recommended for Nostr visibility.'
+    }
   } catch (e: unknown) {
     profileError.value = e instanceof Error ? e.message : `${field} upload failed`
   } finally {