Merge #a9165a5e: 3D hardware models, NIP-99 discovery, and private phon…

3D hardware models, NIP-99 discovery, and private phone goal

nostr:nevent1qqs2j9j6tc3kpsdp3jhwty3wt8yy3un7r93e4d4smjpza4nvt033ctgpz3mhxue69uhhyetvv9ujumn8d96zuer9wcq28amm

PR-Author: Personal
nostr:npub1w3sqdkrhn0gyuvsex32effzgnfpyde6qrrc4u467flg5e9txh4wsfn5vjg

PR description:

Adds refined 3D hardware illustrations, OpenWrt and private-phone marketplace discovery, and the Setup goal for a non-surveillance phone. Production queries enabled Archipelago relays for NIP-99 kind-30402 listings; development mock cards are used only when DEV is enabled. Tested with production build plus Chromium, Firefox, and WebKit desktop/mobile browser checks. File-browser goal completion now opens the native Cloud files view.

neode-ui/src/components/DeviceModel.vue

@@ -0,0 +1,202 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import type { createDeviceScene } from '@/graphics/deviceScene'
+import { deviceSpecs } from '@/graphics/deviceModels'
+
+const props = withDefaults(defineProps<{
+  model: string
+  label: string
+  fallback?: string
+  fillViewport?: boolean
+  glassContainer?: boolean
+  controls?: boolean
+  /** Development-only gallery controls. Never rendered in production builds. */
+  devBrowse?: boolean
+}>(), { fallback: '', fillViewport: false, glassContainer: false, controls: true, devBrowse: false })
+const host = ref<HTMLElement>()
+const frame = ref<HTMLElement>()
+const ready = ref(false)
+const failed = ref(false)
+const paused = ref(false)
+const reducedMotion = ref(false)
+const currentModel = ref(props.model)
+const devModelIds = Object.keys(deviceSpecs)
+const devBrowseEnabled = import.meta.env.DEV && props.devBrowse
+const dragging = ref(false)
+const remainingHeight = ref('360px')
+let view: ReturnType<typeof createDeviceScene> | undefined
+let observer: IntersectionObserver | undefined
+let resizeObserver: ResizeObserver | undefined
+let motion: MediaQueryList | undefined
+let visible = false
+let mounted = false
+let generation = 0
+let raf = 0
+let previous = 0
+let lastDraw = 0
+let pointer: number | undefined
+let lastX = 0
+let lastY = 0
+
+function devModelLabel(id: string) { return deviceSpecs[id]?.name ?? id }
+function browseModel(offset: number) {
+  if (!devBrowseEnabled || !view) return
+  const index = devModelIds.indexOf(currentModel.value)
+  const next = devModelIds[(index + offset + devModelIds.length) % devModelIds.length]!
+  currentModel.value = next
+  view.setModel(next)
+  view.render()
+}
+
+function stop() { cancelAnimationFrame(raf); raf = 0; previous = 0; lastDraw = 0 }
+function canSpin() { return view && visible && !document.hidden && !paused.value && !motion?.matches && !dragging.value }
+function animate(now: number) {
+  raf = 0
+  if (!canSpin()) { previous = 0; return }
+  // Cap to 30fps; complete a turn in about a minute, independent of refresh rate.
+  if (now - lastDraw >= 32) {
+    view!.rotation.y += previous ? Math.min((now - previous) / 1000, .1) * .105 : 0
+    previous = now; lastDraw = now; view!.render()
+  }
+  raf = requestAnimationFrame(animate)
+}
+function sync() { reducedMotion.value = !!motion?.matches; stop(); if (canSpin()) raf = requestAnimationFrame(animate) }
+function layout() {
+  if (props.fillViewport && frame.value) {
+    // Use the layout position, not its changing scrolled screen position.
+    let scroll = 0
+    for (let el = frame.value.parentElement; el; el = el.parentElement) scroll += el.scrollTop
+    const top = frame.value.getBoundingClientRect().top + scroll
+    // Keep a visible page gutter below the showcase; the frame sits inside a
+    // glass card whose bottom margin must remain visible in the viewport.
+    remainingHeight.value = `${Math.max(260, window.innerHeight - top - 88)}px`
+  }
+  view?.resize()
+}
+function disposeScene() {
+  stop(); ready.value = false
+  view?.canvas.removeEventListener('webglcontextlost', contextLost)
+  view?.dispose(); view = undefined
+}
+function contextLost(event: Event) {
+  event.preventDefault(); failed.value = true; disposeScene()
+}
+async function init() {
+  if (!mounted || !visible || view || failed.value) return
+  const token = ++generation
+  try {
+    const { createDeviceScene } = await import('@/graphics/deviceScene')
+    if (!mounted || token !== generation || !host.value) return
+    view = createDeviceScene(host.value, props.model)
+    view.canvas.addEventListener('webglcontextlost', contextLost)
+    ready.value = true; layout(); sync()
+  } catch {
+    if (token === generation) { failed.value = true; disposeScene() }
+  }
+}
+function down(event: PointerEvent) {
+  if (!view || (event.pointerType === 'mouse' && event.button !== 0) || pointer !== undefined) return
+  pointer = event.pointerId; lastX = event.clientX; lastY = event.clientY
+  dragging.value = true; stop(); host.value?.setPointerCapture(pointer)
+}
+function move(event: PointerEvent) {
+  if (pointer !== event.pointerId || !view) return
+  view.rotation.y += (event.clientX - lastX) * .012
+  // Touch preserves vertical page scrolling; mouse can also tilt the model.
+  if (event.pointerType === 'mouse') view.rotation.x = Math.max(-.65, Math.min(.65, view.rotation.x + (event.clientY - lastY) * .008))
+  lastX = event.clientX; lastY = event.clientY; view.render()
+}
+function up() { pointer = undefined; dragging.value = false; sync() }
+function key(event: KeyboardEvent) {
+  if (!view || !['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) return
+  event.preventDefault(); paused.value = true; stop()
+  if (event.key === 'Home') view.rotation.set(props.model === 'beryl-ax' ? .27 : -.08, -.4, 0)
+  else if (event.key === 'End') view.rotation.set(props.model === 'beryl-ax' ? .27 : -.08, Math.PI - .4, 0)
+  else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') view.rotation.y += event.key === 'ArrowLeft' ? -.2 : .2
+  else view.rotation.x = Math.max(-.65, Math.min(.65, view.rotation.x + (event.key === 'ArrowUp' ? -.12 : .12)))
+  view.render()
+}
+watch(paused, sync)
+watch(() => props.model, () => {
+  generation++; up()
+  currentModel.value = props.model
+  if (view) {
+    try { view.setModel(props.model) } catch { failed.value = true; disposeScene() }
+  } else { failed.value = false; void init() }
+})
+onMounted(() => {
+  mounted = true
+  if (!window.matchMedia || !window.IntersectionObserver || !window.ResizeObserver) {
+    failed.value = true
+    return
+  }
+  motion = window.matchMedia('(prefers-reduced-motion: reduce)')
+  motion.addEventListener('change', sync)
+  document.addEventListener('visibilitychange', sync)
+  window.addEventListener('resize', layout)
+  resizeObserver = new ResizeObserver(layout)
+  if (host.value) resizeObserver.observe(host.value)
+  if (frame.value?.parentElement) resizeObserver.observe(frame.value.parentElement)
+  observer = new IntersectionObserver(entries => {
+    visible = entries.some(entry => entry.isIntersecting)
+    if (visible) void init()
+    sync()
+  })
+  if (frame.value) observer.observe(frame.value)
+  layout()
+})
+onBeforeUnmount(() => {
+  mounted = false; generation++; observer?.disconnect(); resizeObserver?.disconnect()
+  motion?.removeEventListener('change', sync)
+  document.removeEventListener('visibilitychange', sync); window.removeEventListener('resize', layout)
+  disposeScene()
+})
+</script>
+
+<template>
+  <figure ref="frame" class="device-model" :class="{ 'device-model--viewport': fillViewport, 'device-model--glass': glassContainer }"
+    :style="{ '--device-height': remainingHeight }" :data-model="model" :data-ready="ready">
+    <div ref="host" class="device-model__stage" :class="{ 'is-dragging': dragging }"
+      :tabindex="ready ? 0 : -1" role="group" :aria-label="`${label}. Drag or use arrow keys to rotate. Home shows the front; End shows the back.`"
+      @pointerdown="down" @pointermove="move" @pointerup="up" @pointercancel="up" @lostpointercapture="up" @keydown="key">
+      <img v-if="!ready && fallback" :src="fallback" :alt="label" class="device-model__fallback" />
+      <div v-else-if="!ready" class="device-model__placeholder" role="status" aria-label="Loading 3D illustration">
+        <span class="device-model__loader" aria-hidden="true"><i></i><i></i><i></i></span>
+      </div>
+    </div>
+    <figcaption v-if="controls || devBrowseEnabled" class="device-model__caption">
+      <span>{{ failed ? label : (devBrowseEnabled ? devModelLabel(currentModel) : 'Drag to explore') }}</span>
+      <template v-if="devBrowseEnabled">
+        <button type="button" aria-label="Previous 3D model" @click="browseModel(-1)">Back</button>
+        <span class="device-model__counter">{{ devModelIds.indexOf(currentModel) + 1 }} / {{ devModelIds.length }}</span>
+        <button type="button" aria-label="Next 3D model" @click="browseModel(1)">Next</button>
+      </template>
+      <button v-if="ready && !reducedMotion" type="button" :aria-label="paused ? 'Resume automatic rotation' : 'Pause automatic rotation'"
+        :aria-pressed="paused" @click="paused = !paused">{{ paused ? 'Rotate' : 'Pause' }}</button>
+    </figcaption>
+  </figure>
+</template>
+
+<style scoped>
+.device-model { position: relative; width: 100%; height: 240px; margin: 0; isolation: isolate; }
+.device-model--glass { padding: 16px 18px 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 18px 55px rgba(0,0,0,.14); }
+.device-model--glass::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.1), transparent 34%, transparent 72%, rgba(255,255,255,.035)); opacity: .45; }
+.device-model::before { content: ''; position: absolute; inset: 14% 9%; background: radial-gradient(ellipse, rgba(110,167,180,.09), transparent 68%); pointer-events: none; z-index: -1; }
+.device-model__stage { position: absolute; inset: 0 0 28px; cursor: grab; touch-action: pan-y; border-radius: 16px; }
+.device-model__stage.is-dragging { cursor: grabbing; }
+.device-model__stage:focus-visible { outline: 1px solid rgba(255,255,255,.5); outline-offset: 2px; }
+.device-model__stage :deep(canvas) { display: block; width: 100%; height: 100%; }
+.device-model__fallback { width: 100%; height: 100%; object-fit: contain; padding: 22px; }
+.device-model__placeholder { height: 100%; display: grid; place-items: center; }
+.device-model__loader { display: flex; align-items: center; gap: 8px; opacity: .7; }
+.device-model__loader i { display: block; width: 7px; height: 7px; border-radius: 999px; background: rgba(140,228,213,.75); animation: device-model-pulse 1.1s ease-in-out infinite; }
+.device-model__loader i:nth-child(2) { animation-delay: .14s; }
+.device-model__loader i:nth-child(3) { animation-delay: .28s; }
+@keyframes device-model-pulse { 0%, 60%, 100% { transform: scale(.65); opacity: .35; } 30% { transform: scale(1); opacity: 1; } }
+@media (prefers-reduced-motion: reduce) { .device-model__loader i { animation: none; opacity: .65; } }
+.device-model__caption { position: absolute; inset: auto 0 0; display: flex; justify-content: center; align-items: center; gap: 14px; color: rgba(255,255,255,.4); font-size: 11px; }
+.device-model__caption button { padding: 4px 9px; color: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; background: transparent; cursor: pointer; }
+.device-model__counter { color: rgba(255,255,255,.3); font-variant-numeric: tabular-nums; }
+.device-model--viewport { height: 290px; }
+@media (min-width: 1024px) { .device-model--viewport { height: var(--device-height); min-height: 260px; } }
+</style>

neode-ui/src/components/EasyHome.vue

@@ -94,6 +94,7 @@ function goalIcon(icon: string): string {
     lightning: '⚡',
     identity: '🔑',
     backup: '💾',
+    phone: '📱',
   }
   return icons[icon] || '📦'
 }

neode-ui/src/components/HardwareMarketplace.vue

@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref } from 'vue'
+import { rpcClient } from '@/api/rpc-client'
+
+const props = withDefaults(defineProps<{ expanded?: boolean; kind?: 'router' | 'phone' }>(), { expanded: false, kind: 'router' })
+const emit = defineEmits<{ open: []; close: [] }>()
+
+interface HardwareListing {
+  id: string
+  pubkey: string
+  title: string
+  summary: string
+  content: string
+  location: string
+  status: string
+  image: string
+  price?: { amount: string; currency: string; frequency?: string }
+  relay: string
+}
+
+const relayUrls = ref<string[]>([])
+const DEV_ROUTER_LISTINGS: HardwareListing[] = [
+  { id: 'dev-beryl-ax', pubkey: 'archipelago-demo-seller', title: 'GL.iNet Beryl AX (GL-MT3000)', summary: 'Wi‑Fi 6 travel router with OpenWrt, WireGuard and mesh-ready firmware.', content: '', location: 'London, UK', status: 'active', image: '/assets/img/router-mockups/beryl-ax.webp', price: { amount: '89', currency: 'EUR' }, relay: 'development mock' },
+  { id: 'dev-flint-2', pubkey: 'openwrt-demo-seller', title: 'GL.iNet Flint 2', summary: 'Dual 2.5G Ethernet OpenWrt router for a home gateway or node controller.', content: '', location: 'Berlin, DE', status: 'active', image: '/assets/img/router-mockups/flint-2.webp', price: { amount: '159', currency: 'EUR' }, relay: 'development mock' },
+  { id: 'dev-nano-pi', pubkey: 'community-demo-seller', title: 'NanoPi R5S OpenWrt gateway', summary: 'Compact RK3568 gateway with three Ethernet ports and community support.', content: '', location: 'Amsterdam, NL', status: 'active', image: '/assets/img/router-mockups/nanopi-r5s.webp', price: { amount: '74', currency: 'EUR' }, relay: 'development mock' },
+]
+const DEV_PHONE_LISTINGS: HardwareListing[] = [
+  { id: 'dev-pixel-9', pubkey: 'privacy-demo-seller', title: 'Pixel 9 · GrapheneOS ready', summary: 'Unlocked Pixel with a long update runway and a fresh install path.', content: '', location: 'London, UK', status: 'active', image: '/assets/img/phone-mockups/pixel-9.webp', price: { amount: '499', currency: 'EUR' }, relay: 'development mock' },
+  { id: 'dev-pixel-9a', pubkey: 'mobile-demo-seller', title: 'Pixel 9a · unlocked', summary: 'Compact everyday Pixel. Check the bootloader can be unlocked before buying.', content: '', location: 'Berlin, DE', status: 'active', image: '/assets/img/phone-mockups/pixel-9a.webp', price: { amount: '339', currency: 'EUR' }, relay: 'development mock' },
+  { id: 'dev-pixel-10', pubkey: 'phone-demo-seller', title: 'Pixel 10 · GrapheneOS ready', summary: 'A newer Pixel for private, independent mobile computing.', content: '', location: 'Amsterdam, NL', status: 'active', image: '/assets/img/phone-mockups/pixel-10.webp', price: { amount: '699', currency: 'EUR' }, relay: 'development mock' },
+]
+const devListings = computed(() => props.kind === 'phone' ? DEV_PHONE_LISTINGS : DEV_ROUTER_LISTINGS)
+const topicTags = computed(() => props.kind === 'phone' ? ['pixel'] : ['openwrt', 'router', 'gl-inet', 'beryl', 'flint'])
+const open = ref(false)
+const carousel = ref<HTMLElement>()
+const listings = ref<HardwareListing[]>([])
+const loading = ref(false)
+const error = ref('')
+let requestId = 0
+let sockets: WebSocket[] = []
+
+function tag(event: { tags?: string[][] }, name: string): string {
+  return event.tags?.find(item => item[0] === name)?.[1]?.trim() ?? ''
+}
+function imageTag(event: { tags?: string[][] }): string {
+  return event.tags?.find(item => item[0] === 'image')?.[1]?.trim() ?? ''
+}
+function matchesHardware(item: { title: string; summary: string; content: string; tags?: string[][] }) {
+  const tags = item.tags?.flat().join(' ') ?? ''
+  const text = `${item.title} ${item.summary} ${item.content} ${tags}`
+  return props.kind === 'phone'
+    ? /\bpixel\b/i.test(text)
+    : /openwrt|gl[- .]?inet|beryl|flint|nanopi|gl-mt3000|gl-mt6000/i.test(text)
+}
+function parse(event: {
+  id?: string; pubkey?: string; content?: string; tags?: string[][]
+}, relay: string): HardwareListing | null {
+  if (!event.id || !event.pubkey || !matchesHardware({ title: tag(event, 'title'), summary: tag(event, 'summary'), content: event.content ?? '', tags: event.tags })) return null
+  const price = event.tags?.find(item => item[0] === 'price')
+  return {
+    id: event.id,
+    pubkey: event.pubkey,
+    title: tag(event, 'title') || (props.kind === 'phone' ? 'Pixel phone' : 'OpenWrt router'),
+    summary: tag(event, 'summary') || (event.content ?? '').split('\n')[0]?.slice(0, 150) || 'Hardware listing',
+    content: event.content ?? '',
+    location: tag(event, 'location'),
+    status: tag(event, 'status') || 'active',
+    image: imageTag(event),
+    price: price?.[1] && price[2] ? { amount: price[1], currency: price[2], frequency: price[3] } : undefined,
+    relay,
+  }
+}
+function closeSockets() {
+  sockets.forEach(socket => socket.close())
+  sockets = []
+}
+async function search() {
+  const run = ++requestId
+  closeSockets(); loading.value = true; error.value = ''
+  try {
+    const configured = await rpcClient.call<{ relays?: Array<{ url?: string; enabled?: boolean }> }>({ method: 'nostr.list-relays', params: {} })
+    relayUrls.value = (configured.relays ?? [])
+      .filter(relay => relay.enabled !== false && typeof relay.url === 'string' && /^wss?:\/\//.test(relay.url))
+      .map(relay => relay.url!.replace(/\/$/, ''))
+  } catch {
+    relayUrls.value = []
+  }
+  if (run !== requestId) return
+  if (!relayUrls.value.length) {
+    if (import.meta.env.DEV) {
+      listings.value = devListings.value
+      loading.value = false
+      return
+    }
+    loading.value = false
+    error.value = 'No Archipelago Nostr relays are configured. Add a relay in Settings → Nostr Relays and try again.'
+    return
+  }
+  const found = new Map<string, HardwareListing>()
+  await Promise.all(relayUrls.value.map(relay => new Promise<void>(resolve => {
+    let settled = false
+    const finish = () => { if (!settled) { settled = true; resolve() } }
+    let socket: WebSocket
+    try { socket = new WebSocket(relay) } catch { finish(); return }
+    sockets.push(socket)
+    const timer = window.setTimeout(() => { socket.close(); finish() }, 8000)
+    socket.addEventListener('open', () => {
+      socket.send(JSON.stringify(['REQ', `archy-${props.kind}-${run}`, {
+        kinds: [30402],
+        '#t': topicTags.value,
+        limit: 100,
+      }, {
+        kinds: [30402],
+        limit: 200,
+      }]))
+    })
+    socket.addEventListener('message', message => {
+      try {
+        const packet = JSON.parse(String(message.data)) as [string, string, { id?: string; pubkey?: string; content?: string; tags?: string[][] }]
+        if (packet[0] === 'EVENT') {
+          const item = parse(packet[2], relay)
+          if (item && item.status !== 'sold') found.set(item.id, item)
+        }
+        if (packet[0] === 'EOSE') { window.clearTimeout(timer); socket.close(); finish() }
+      } catch { /* Ignore malformed relay frames. */ }
+    })
+    socket.addEventListener('error', () => { window.clearTimeout(timer); finish() })
+    socket.addEventListener('close', () => { window.clearTimeout(timer); finish() })
+  })))
+  if (run !== requestId) return
+  listings.value = found.size ? [...found.values()] : import.meta.env.DEV ? devListings.value : []
+  loading.value = false
+  if (!listings.value.length) error.value = `No active ${props.kind === 'phone' ? 'Pixel phone' : 'OpenWrt router'} listings found on your configured relays.`
+}
+function openShop() {
+  open.value = true
+  if (import.meta.env.DEV) listings.value = devListings.value
+  emit('open')
+  void search()
+}
+function closeShop() { requestId++; open.value = false; closeSockets(); emit('close') }
+function moveCarousel(direction: number) {
+  const list = carousel.value
+  const card = list?.querySelector<HTMLElement>('.router-marketplace__card')
+  if (list && card) list.scrollBy({ left: direction * (card.offsetWidth + 16), behavior: 'smooth' })
+}
+function formatPrice(item: HardwareListing) {
+  if (!item.price) return 'Price on request'
+  return `${item.price.amount} ${item.price.currency.toUpperCase()}${item.price.frequency ? ` / ${item.price.frequency}` : ''}`
+}
+onBeforeUnmount(() => { requestId++; closeSockets() })
+</script>
+
+<template>
+  <section class="router-marketplace lg:mt-0" :class="{ 'router-marketplace--expanded': props.expanded }" aria-labelledby="router-marketplace-title">
+    <div class="glass-card p-5 md:p-6">
+      <template v-if="!open">
+        <p class="text-xs uppercase tracking-[.18em] text-white/40">{{ props.kind === 'phone' ? 'Private mobile' : 'OpenWrt gateway' }}</p>
+        <h2 id="router-marketplace-title" class="text-base font-semibold text-white mt-1">{{ props.kind === 'phone' ? 'Ready for a phone that answers to you?' : 'Not got an OpenWrt router?' }}</h2>
+        <p class="text-sm text-white/55 mt-2 max-w-2xl">{{ props.kind === 'phone' ? 'Choose an unlockable Pixel. Install GrapheneOS. Lock the bootloader for verified boot.' : 'Browse community-published router listings from Nostr marketplaces. We’ll add Archipelago checkout after discovery is in place.' }}</p>
+        <button type="button" class="glass-button router-marketplace__cta mt-4" @click="openShop">
+          {{ props.kind === 'phone' ? 'Buy phone' : 'Buy router' }}
+          <span aria-hidden="true">→</span>
+        </button>
+      </template>
+      <template v-else>
+      <div class="flex flex-wrap items-start justify-between gap-3 mb-2">
+        <div>
+          <h2 id="router-marketplace-title" class="text-base font-semibold text-white">{{ props.kind === 'phone' ? 'Pixel phones for sale' : 'OpenWrt routers for sale' }}</h2>
+          <p class="text-xs text-white/50 mt-1">{{ listings[0]?.relay === 'development mock' ? 'Development preview · conceptual images and sample prices' : 'Live NIP-99 listings from Archipelago relays.' }}</p>
+        </div>
+        <div class="flex items-center gap-2">
+          <button type="button" class="router-marketplace__nav" :aria-label="`Previous ${props.kind} listing`" @click="moveCarousel(-1)">‹</button>
+          <button type="button" class="router-marketplace__nav" :aria-label="`Next ${props.kind} listing`" @click="moveCarousel(1)">›</button>
+          <button type="button" class="text-xs text-white/45 hover:text-white ml-2" @click="closeShop">Close</button>
+        </div>
+      </div>
+      <div v-if="loading && !listings.length" class="sr-only" aria-live="polite">Loading {{ props.kind }} listings</div>
+      <div v-else-if="error && !listings.length" class="text-sm text-white/50 py-5 text-center">{{ error }}</div>
+      <div v-else ref="carousel" class="router-marketplace__results" tabindex="0" :aria-label="`${props.kind === 'phone' ? 'Phone' : 'Router'} listings carousel`">
+        <article v-for="item in listings" :key="item.id" class="router-marketplace__card">
+          <img v-if="item.image" :src="item.image" :alt="item.title" class="router-marketplace__image" loading="lazy" />
+          <div v-else class="router-marketplace__image router-marketplace__image--empty" aria-hidden="true">⌁</div>
+          <div class="router-marketplace__details">
+            <h3 class="text-sm font-medium text-white truncate">{{ item.title }}</h3>
+            <p class="text-xs text-white/55 mt-1 line-clamp-1">{{ item.summary }}</p>
+            <div class="flex flex-wrap gap-x-3 gap-y-1 mt-3 text-[11px] text-white/40">
+              <span v-if="item.location">{{ item.location }}</span>
+              <span>seller {{ item.pubkey.slice(0, 8) }}…</span>
+            </div>
+            <div class="router-marketplace__footer">
+              <strong class="router-marketplace__price">{{ formatPrice(item) }}</strong>
+              <div class="router-marketplace__actions">
+                <button type="button" class="router-marketplace__action" disabled title="Listing details are next">View</button>
+                <button type="button" class="router-marketplace__action router-marketplace__action--buy" disabled title="Checkout is the next step">Buy</button>
+              </div>
+            </div>
+          </div>
+        </article>
+      </div>
+      </template>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.router-marketplace { margin-top: 16px; }
+.router-marketplace--expanded { grid-column: 1 / -1; width: 100%; min-width: 0; height: 100%; min-height: 0; margin-top: 0; }
+.router-marketplace--expanded > .glass-card { height: 100%; min-height: 0; display: flex; flex-direction: column; padding: 14px; }
+.router-marketplace--expanded .router-marketplace__results { flex: 1 1 0; min-height: 0; }
+.router-marketplace__cta { display: inline-flex; align-items: center; gap: 10px; }
+.router-marketplace__nav { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; color: rgba(255,255,255,.72); font-size: 18px; line-height: 1; }
+.router-marketplace__nav:hover { background: rgba(255,255,255,.09); }
+@media (max-width: 1023px) {
+  .router-marketplace__cta { width: 100%; justify-content: center; }
+  /* The dashboard's fixed mobile Back bar must not cover card actions. */
+  .router-marketplace--expanded > .glass-card { padding-bottom: 64px; }
+}
+.router-marketplace__results { display: flex; align-items: stretch; gap: 16px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 52px), transparent 100%); }
+.router-marketplace__results::-webkit-scrollbar { display: none; }
+.router-marketplace__card { display: flex; flex: 0 0 88%; scroll-snap-align: start; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; padding: 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; background: rgba(255,255,255,.035); }
+.router-marketplace__details { display: flex; flex: 0 0 auto; min-width: 0; flex-direction: column; }
+.router-marketplace__footer { margin-top: auto; padding-top: 8px; }
+.router-marketplace__price { display: block; color: rgba(180,244,235,.9); font-size: 18px; }
+.router-marketplace__actions { display: flex; gap: 8px; margin-top: 8px; }
+.router-marketplace__action { flex: 1; padding: 8px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: rgba(255,255,255,.55); font-size: 12px; }
+.router-marketplace__action--buy { border-color: rgba(118,230,191,.35); color: rgba(180,244,235,.9); }
+@media (min-width: 768px) {
+  .router-marketplace__card { flex-basis: min(360px, 44%); }
+}
+.router-marketplace__image { width: 100%; height: 0; min-height: 0; flex: 1 1 0; object-fit: contain; border-radius: 8px; background: linear-gradient(135deg, rgba(112,214,205,.18), rgba(255,255,255,.04)); }
+.router-marketplace__image--empty { display: grid; place-items: center; color: rgba(121,205,215,.6); font-size: 34px; }
+</style>

neode-ui/src/components/mesh/MeshDeviceSetupModal.vue

@@ -8,25 +8,11 @@
   >
     <!-- Step 1: detection graphic + what's currently on the radio -->
     <div v-if="step === 1" class="text-center">
-      <div class="mx-auto my-2 w-40 h-40 relative">
-        <!-- pulsing signal waves behind the board image -->
-        <svg viewBox="0 0 160 160" class="absolute inset-0 w-full h-full" aria-hidden="true">
-          <g class="mesh-detect-waves" stroke="rgba(251,146,60,0.5)" fill="none" stroke-width="2.5" stroke-linecap="round">
-            <path d="M130 44 a30 30 0 0 1 0 28" />
-            <path d="M138 36 a42 42 0 0 1 0 44" />
-            <path d="M146 28 a54 54 0 0 1 0 60" />
-          </g>
-        </svg>
-        <!-- actual board image (vendored from the Meshtastic web flasher) -->
-        <img
-          :src="deviceImage.image"
-          :alt="deviceImage.label"
-          class="relative w-full h-full object-contain drop-shadow-[0_8px_24px_rgba(251,146,60,0.25)]"
-          @error="imageFailed = true"
-          v-if="!imageFailed"
-        />
-        <div v-else class="relative w-full h-full flex items-center justify-center text-5xl">📡</div>
-      </div>
+      <DeviceModel
+        :model="deviceImage.model"
+        :label="deviceImage.label"
+        dev-browse
+      />
       <p class="text-white text-base font-medium">{{ deviceImage.label }}</p>
       <p class="text-white/60 text-xs mt-1">
         {{ deviceImage.exact ? 'Detected' : 'Detected LoRa radio' }} on
@@ -306,6 +292,7 @@ import { useMeshStore, type MeshDeviceProbe, type MeshConfigureParams, type Flas
 import { useAppStore } from '@/stores/app'
 import { LORA_REGIONS, regionByCode, suggestRegionFromLatLon, meshcorePlanFor, RNODE_REGION_PLANS } from '@/utils/loraRegions'
 import { resolveMeshDeviceImage } from '@/utils/meshDeviceImages'
+import DeviceModel from '@/components/DeviceModel.vue'
 
 const mesh = useMeshStore()
 const appStore = useAppStore()
@@ -344,7 +331,6 @@ function stopProbeProgress(done = false) {
 
 const devicePath = computed(() => mesh.flashFlowPath ?? mesh.undismissedDetectedDevices[0] ?? '')
 const show = computed(() => !!devicePath.value)
-const imageFailed = ref(false)
 const deviceImage = computed(() =>
   resolveMeshDeviceImage(
     mesh.status?.detected_device_info?.find(d => d.path === devicePath.value)
@@ -417,7 +403,6 @@ watch([show, devicePath], async ([visible]) => {
     probeError.value = ''
     probing.value = false
     stopProbeProgress()
-    imageFailed.value = false
     openFlashStep()
     const t = (mesh.status?.device_type ?? '').toLowerCase()
     if (t === 'meshcore' || t === 'meshtastic' || t === 'reticulum') {
@@ -427,7 +412,6 @@ watch([show, devicePath], async ([visible]) => {
   }
   step.value = 1
   error.value = ''
-  imageFailed.value = false
   form.value.region = suggestedRegion.value?.code ?? mesh.status?.lora_region ?? ''
   form.value.name = mesh.status?.self_advert_name ?? appStore.serverName ?? ''
   form.value.channel = mesh.status?.channel_name || 'archipelago'
@@ -629,17 +613,3 @@ function closeFlashStep() {
   step.value = 1
 }
 </script>
-
-<style scoped>
-.mesh-detect-waves path {
-  animation: mesh-wave-pulse 2.2s ease-out infinite;
-  opacity: 0;
-}
-.mesh-detect-waves path:nth-child(2) { animation-delay: 0.35s; }
-.mesh-detect-waves path:nth-child(3) { animation-delay: 0.7s; }
-@keyframes mesh-wave-pulse {
-  0% { opacity: 0; }
-  25% { opacity: 1; }
-  100% { opacity: 0; }
-}
-</style>

neode-ui/src/data/goals.ts

@@ -67,6 +67,13 @@ export const GOALS: GoalDefinition[] = [
     route: '/dashboard/setup/external-access', estimatedTime: 'Guided setup', difficulty: 'beginner',
     steps: [{ id: 'external-access', title: 'Configure access', description: 'Choose and verify each connection.', action: 'configure', isAutomatic: false }],
   },
+  {
+    id: 'non-surveillance-phone', title: 'Get a non surveillance phone',
+    subtitle: 'Choose an unlockable Pixel and take control with GrapheneOS',
+    icon: 'phone', category: 'identity', requiredApps: [],
+    route: '/dashboard/setup/non-surveillance-phone', estimatedTime: 'Browse phones', difficulty: 'beginner',
+    steps: [{ id: 'choose-private-phone', title: 'Choose a compatible Pixel', description: 'Check that the bootloader can be unlocked, then install GrapheneOS and lock it again for verified boot.', action: 'info', isAutomatic: false }],
+  },
   {
     id: 'publish-website', title: 'Publish a website',
     subtitle: 'Create a website on your node and choose where to publish it',

neode-ui/src/graphics/assets/ATTRIBUTION.md

@@ -0,0 +1,15 @@
+# GrapheneOS boot artwork
+
+`grapheneos-boot-mask.png` is the unmodified boot logo mask from GrapheneOS's
+Android framework, commit `0f505137b78efaee3058434e88974e2a06e0917c`:
+
+https://github.com/GrapheneOS/platform_frameworks_base/blob/0f505137b78efaee3058434e88974e2a06e0917c/core/res/assets/images/android-logo-mask.png
+
+The source commit credits Daniel Micay and smdyv. The framework is distributed
+under Apache-2.0; the license text is also shipped at
+`public/assets/fonts/Open_Sans/LICENSE.txt` in this frontend.
+
+The phone displays a static white phase of the actual GrapheneOS OS boot logo.
+It does not reproduce Google's separate bootloader / yellow alternate-OS notice.
+GrapheneOS branding identifies the illustrated operating system; it does not
+imply endorsement. The phone geometry and materials are original procedural art.

neode-ui/src/graphics/deviceModels.ts

@@ -0,0 +1,406 @@
+import * as THREE from 'three'
+import { RoundedBoxGeometry } from 'three/addons/geometries/RoundedBoxGeometry.js'
+import grapheneBootMaskUrl from './assets/grapheneos-boot-mask.png'
+
+// Original, procedural display models. Dimensions/layouts follow the existing
+// device illustrations and manufacturer references listed in device-models.md.
+// These are recognition aids, not mechanical CAD or revision-specific pinouts.
+type Kind = 'board' | 'echo' | 'deck' | 'card' | 'case' | 'router' | 'phone'
+interface DeviceSpec {
+  kind: Kind; name: string; w: number; h: number; d: number; color: number
+  screen?: 'oled' | 'paper'; antenna?: boolean; battery?: boolean; pins?: number
+}
+export const deviceSpecs: Record<string, DeviceSpec> = {
+  'heltec-v3': { kind: 'board', name: 'HELTEC V3', w: 2.9, h: 1.25, d: .07, color: 0xe8e7df, screen: 'oled', pins: 18 },
+  'heltec_v4': { kind: 'board', name: 'HELTEC V4', w: 2.85, h: 1.2, d: .07, color: 0x181d20, screen: 'oled', pins: 18 },
+  'heltec-wsl-v3': { kind: 'board', name: 'HELTEC WSL', w: 2.85, h: 1, d: .07, color: 0x182225, pins: 18 },
+  'heltec-mesh-node-t114': { kind: 'board', name: 'HELTEC T114', w: 2.65, h: 1.25, d: .08, color: 0xe6e3dc, screen: 'oled' },
+  'tlora-t3s3-v1': { kind: 'board', name: 'LILYGO T3-S3', w: 2.8, h: 1.25, d: .07, color: 0x1b2024, screen: 'oled', antenna: true, pins: 16 },
+  'tlora-v2-1-1_6': { kind: 'board', name: 'LILYGO T-LoRa', w: 2.8, h: 1.2, d: .07, color: 0x25272a, screen: 'oled', antenna: true, pins: 16 },
+  'tbeam': { kind: 'board', name: 'LILYGO T-Beam', w: 3.7, h: 1.2, d: .08, color: 0x242a2d, screen: 'oled', antenna: true, battery: true, pins: 16 },
+  'tbeam-s3-core': { kind: 'board', name: 'T-Beam S3', w: 3.35, h: 1.05, d: .08, color: 0x22272a, screen: 'oled', antenna: true, battery: true },
+  'rak4631': { kind: 'board', name: 'RAK4631', w: 1.4, h: 2.8, d: .08, color: 0x202629, pins: 12 },
+  'seeed-xiao-s3': { kind: 'board', name: 'XIAO ESP32S3', w: 1.25, h: 1.5, d: .08, color: 0x152c28, pins: 7 },
+  'wio-tracker-wm1110': { kind: 'board', name: 'Wio WM1110', w: 1.85, h: 2.7, d: .08, color: 0xb32130, pins: 12 },
+  'rpipicow': { kind: 'board', name: 'Raspberry Pi Pico', w: 3.1, h: 1.2, d: .07, color: 0x16754d, pins: 20 },
+  'diy': { kind: 'board', name: 'RNode', w: 2.8, h: 1.3, d: .07, color: 0x24272b, pins: 19 },
+  't-deck': { kind: 'deck', name: 'LILYGO T-Deck', w: 2, h: 3.2, d: .28, color: 0x25262b, screen: 'oled' },
+  't-echo': { kind: 'echo', name: 'LILYGO', w: 1.7, h: 1.9, d: .5, color: 0xe3e4dc, screen: 'paper', antenna: true },
+  't-echo_plus': { kind: 'echo', name: 'LILYGO', w: 1.9, h: 2.15, d: .65, color: 0x343839, screen: 'paper', antenna: true },
+  'tracker-t1000-e': { kind: 'card', name: 'SenseCAP T1000-E', w: 1.8, h: 2.9, d: .17, color: 0xc6c9c5 },
+  'rak-wismeshtap': { kind: 'case', name: 'WisMesh Tap', w: 2.2, h: 1.7, d: .52, color: 0x33363a, screen: 'oled', antenna: true },
+  'station-g2': { kind: 'case', name: 'Station G2', w: 1.7, h: 2.85, d: .65, color: 0x32363b, screen: 'oled' },
+  'nano-g2-ultra': { kind: 'case', name: 'Nano G2 Ultra', w: 1.7, h: 2.8, d: .5, color: 0x36383d, screen: 'oled' },
+  'thinknode_m1': { kind: 'case', name: 'ThinkNode M1', w: 1.7, h: 2.3, d: .65, color: 0x252c2c, screen: 'paper', antenna: true },
+  'heltec-v3-case': { kind: 'case', name: 'HELTEC V3', w: 2.8, h: 1.25, d: .48, color: 0x13857e, screen: 'oled', antenna: true },
+  'heltec-mesh-node-t114-case': { kind: 'case', name: 'HELTEC T114', w: 1.25, h: 2.4, d: .5, color: 0x10a9c4, screen: 'oled', antenna: true },
+  'rak4631_case': { kind: 'case', name: 'RAK WisBlock', w: 1.4, h: 2.3, d: .55, color: 0xd5dad5, screen: 'oled', antenna: true },
+  'unknown-new': { kind: 'case', name: 'LoRa mesh radio', w: 1.8, h: 2.6, d: .5, color: 0x182623, screen: 'oled' },
+  'beryl-ax': { kind: 'router', name: 'Beryl AX · GL-MT3000', w: 3, h: .8, d: 2.05, color: 0x171b20 },
+  'pixel-graphene': { kind: 'phone', name: 'Pixel 9 Pro · GrapheneOS', w: 1.8, h: 3.82, d: .213, color: 0x08090b },
+}
+
+export function createDeviceModel(id: string, invalidate: () => void = () => {}) {
+  const spec = deviceSpecs[id] ?? deviceSpecs['unknown-new']!
+  const root = new THREE.Group()
+  const geometries = new Map<string, THREE.BufferGeometry>()
+  const materials: THREE.Material[] = []
+  const textures: THREE.Texture[] = []
+  let disposed = false
+  const material = (color: number, roughness = .5, metalness = .1) => {
+    const m = new THREE.MeshStandardMaterial({ color, roughness, metalness })
+    materials.push(m); return m
+  }
+  const body = material(spec.color, .43)
+  const black = material(0x10151a, .58)
+  const dark = material(0x03070a, .72)
+  const silver = material(0x9ca9af, .3, .86)
+  const gold = material(0xc9a454, .3, .82)
+  const white = material(0xdce2de, .66)
+  const pcb = material(0x193a30, .6)
+  const glass = material(0x091923, .17, .26)
+  const accent = material(0x76e6bf, .35)
+  accent.emissive.set(0x1b704a); accent.emissiveIntensity = .5
+  const grainCanvas = document.createElement('canvas'); grainCanvas.width = grainCanvas.height = 64
+  const grainContext = grainCanvas.getContext('2d')!
+  const pixels = grainContext.createImageData(64, 64)
+  let seed = 173
+  for (let i = 0; i < pixels.data.length; i += 4) {
+    seed = (seed * 1664525 + 1013904223) >>> 0
+    const value = 200 + seed % 45; pixels.data.set([value, value, value, 255], i)
+  }
+  grainContext.putImageData(pixels, 0, 0)
+  const grain = new THREE.CanvasTexture(grainCanvas)
+  grain.wrapS = grain.wrapT = THREE.RepeatWrapping; grain.repeat.set(7, 7); textures.push(grain)
+  body.roughnessMap = grain; body.bumpMap = grain; body.bumpScale = .0018
+  const geometry = (key: string, build: () => THREE.BufferGeometry) => {
+    if (!geometries.has(key)) geometries.set(key, build())
+    return geometries.get(key)!
+  }
+  function box(w: number, h: number, d: number, x: number, y: number, z: number, m = body, radius = .025, parent = root) {
+    const r = Math.min(radius, w / 3, h / 3, d / 3)
+    const g = geometry(`b${w},${h},${d},${r}`, () => new RoundedBoxGeometry(w, h, d, 2, r))
+    const mesh = new THREE.Mesh(g, m); mesh.position.set(x, y, z); parent.add(mesh); return mesh
+  }
+  function cylinder(r: number, length: number, x: number, y: number, z: number, m = silver, parent = root) {
+    const g = geometry(`c${r},${length}`, () => new THREE.CylinderGeometry(r, r, length, 20))
+    const mesh = new THREE.Mesh(g, m); mesh.position.set(x, y, z); parent.add(mesh); return mesh
+  }
+  function disk(r: number, x: number, y: number, z: number, m = silver) {
+    const mesh = cylinder(r, .018, x, y, z, m); mesh.rotation.x = Math.PI / 2; return mesh
+  }
+  function label(text: string, w: number, h: number, x: number, y: number, z: number, back = false, color = '#dbe4e3') {
+    const canvas = document.createElement('canvas'); canvas.width = 512; canvas.height = 96
+    const ctx = canvas.getContext('2d')!
+    ctx.fillStyle = color; ctx.font = '500 40px monospace'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'
+    ctx.fillText(text, 256, 48, 500)
+    const texture = new THREE.CanvasTexture(canvas); texture.colorSpace = THREE.SRGBColorSpace; textures.push(texture)
+    const m = new THREE.MeshBasicMaterial({ map: texture, transparent: true, depthWrite: false }); materials.push(m)
+    const mesh = new THREE.Mesh(geometry(`p${w},${h}`, () => new THREE.PlaneGeometry(w, h)), m)
+    mesh.position.set(x, y, z); if (back) mesh.rotation.y = Math.PI; root.add(mesh); return mesh
+  }
+  function screws(w: number, h: number, z: number) {
+    for (const x of [-w / 2 + .12, w / 2 - .12]) for (const y of [-h / 2 + .12, h / 2 - .12]) {
+      disk(.055, x, y, z, silver)
+      box(.058, .012, .012, x, y, z + Math.sign(z) * .013, dark, .001)
+    }
+  }
+  function antenna(x: number, y: number, length = 1.3) {
+    cylinder(.085, .2, x, y + .1, 0, gold)
+    cylinder(.1, .18, x, y + .24, 0, black)
+    cylinder(.068, length, x, y + .3 + length / 2, 0, black)
+    for (let i = 0; i < 3; i++) cylinder(.074, .02, x, y + length + .1 + i * .05, 0, body)
+  }
+  function screen(w: number, h: number, x: number, y: number, z: number, paper = false) {
+    box(w + .12, h + .12, .065, x, y, z, black)
+    box(w, h, .02, x, y, z + .038, paper ? white : glass, .015)
+    const ink = paper ? '#263834' : '#8ce4d5'
+    label('MESH', w * .65, h * .28, x, y + h * .14, z + .052, false, ink)
+    for (let i = 0; i < 4; i++) box(.028, .045 + .035 * i, .008, x + w * .3 + i * .045, y - h * .32, z + .053, paper ? black : accent, .002)
+    label('LoRa', w * .48, h * .18, x - w * .08, y - h * .2, z + .054, false, ink)
+  }
+  function usb(x: number, y: number, z: number, back = false) {
+    box(.28, .115, .14, x, y, z, silver)
+    box(.22, .063, .015, x, y, z + (back ? -.077 : .077), dark)
+    box(.15, .015, .018, x, y, z + (back ? -.084 : .084), black)
+  }
+  const { w, h, d } = spec
+  if (spec.kind === 'router') {
+    // Beryl AX: two hinged paddles, rear USB-C / WAN / LAN / vertical USB-A.
+    box(w, h, d, 0, 0, 0, body, .25)
+    for (const z of [-1.023, 1.023]) box(2.56, .013, .008, 0, -.12, z, black, .002)
+    label('GL.iNet', .62, .14, 0, .423, .08, false, '#d5e9ed').rotation.x = -Math.PI / 2
+    box(.22, .032, .022, 0, -.115, d / 2 + .012, white)
+    for (const side of [-1, 1]) {
+      const hinge = cylinder(.16, .12, side * 1.57, -.04, .36, body); hinge.rotation.z = Math.PI / 2
+      const paddle = new THREE.Group(); paddle.position.set(side * 1.62, 0, .36); paddle.rotation.z = side * -.1; root.add(paddle)
+      box(.27, 1.93, .19, 0, .86, 0, body, .085, paddle)
+      box(.18, 1.65, .015, 0, .88, .102, body, .005, paddle)
+      for (let i = 0; i < 24; i++) box(.014, .37, .028, side * 1.497, -.035, -.85 + i * .069, dark, .003)
+      for (const z of [-.72, .72]) {
+        cylinder(.14, .08, side * 1.12, -.43, z, black)
+        for (let i = 0; i < 14; i++) box(.038, .012, .45, side * (.35 + i * .055), -.405, z * .6, dark, .002)
+      }
+    }
+    box(2.46, .55, .022, 0, -.015, -1.031, body, .008)
+    usb(1, .04, -1.035, true)
+    label('POWER', .3, .075, 1, .2, -1.057, true)
+    for (const [x, text] of [[.38, '2.5G WAN'], [-.27, 'LAN']] as const) {
+      box(.51, .4, .03, x, -.025, -1.055, silver)
+      box(.45, .32, .03, x, -.025, -1.074, dark)
+      box(.22, .06, .04, x, -.19, -1.08, dark)
+      for (let i = 0; i < 8; i++) box(.019, .08, .014, x - .15 + i * .043, .062, -1.095, gold, .001)
+      label(text, .53, .075, x, .24, -1.06, true)
+    }
+    box(.22, .4, .035, -.93, -.04, -1.06, silver)
+    box(.145, .32, .02, -.93, -.04, -1.086, dark)
+    box(.038, .26, .022, -.92, -.04, -1.1, material(0x287ecc))
+    label('USB 3.0', .42, .075, -.93, .24, -1.06, true)
+    box(.018, .085, .18, -1.508, .14, -.5, black)
+    box(.02, .05, .05, -1.51, .14, -.77, dark)
+    const underside = label('GL-MT3000  /  BERYL AX', 1.25, .15, 0, -.413, 0)
+    underside.rotation.x = Math.PI / 2
+  } else if (spec.kind === 'phone') {
+    // Rounded outlines are independent of thickness: a thin RoundedBox clamps
+    // the corner radius to its depth and makes a handset look square.
+    function outline(width: number, height: number, radius: number) {
+      const x = -width / 2, y = -height / 2, r = radius
+      const shape = new THREE.Shape()
+      shape.moveTo(x + r, y); shape.lineTo(x + width - r, y)
+      shape.quadraticCurveTo(x + width, y, x + width, y + r)
+      shape.lineTo(x + width, y + height - r)
+      shape.quadraticCurveTo(x + width, y + height, x + width - r, y + height)
+      shape.lineTo(x + r, y + height)
+      shape.quadraticCurveTo(x, y + height, x, y + height - r)
+      shape.lineTo(x, y + r); shape.quadraticCurveTo(x, y, x + r, y)
+      return shape
+    }
+    function panel(width: number, height: number, depth: number, radius: number, z: number, m: THREE.Material, x = 0, y = 0) {
+      const bevel = Math.min(.012, depth / 4)
+      const g = geometry(`phone${width},${height},${depth},${radius}`, () => {
+        const shape = outline(width - bevel * 2, height - bevel * 2, radius - bevel)
+        const result = new THREE.ExtrudeGeometry(shape, { depth: depth - bevel * 2, bevelEnabled: true, bevelThickness: bevel, bevelSize: bevel, bevelSegments: 3, steps: 1, curveSegments: 12 })
+        result.translate(0, 0, -depth / 2 + bevel)
+        return result
+      })
+      const mesh = new THREE.Mesh(g, m); mesh.position.set(x, y, z); root.add(mesh); return mesh
+    }
+    const frame = material(0x101113, .32, .72)
+    const edge = material(0x24262a, .27, .8)
+    const rear = material(0x08090b, .32, .12)
+    const lensRing = material(0x303238, .25, .78)
+    const lens = material(0x080d16, .12, .3)
+    const lensCoating = material(0x172a38, .16, .45)
+    const seal = material(0x030405, .85)
+    panel(w, h, d, .265, 0, frame)
+    panel(w - .024, h - .024, .022, .255, -d / 2, edge)
+    panel(w - .048, h - .048, .018, .245, -d / 2 - .013, rear)
+    panel(w - .02, h - .02, .02, .255, d / 2, seal)
+    panel(w - .044, h - .044, .012, .244, d / 2 + .011, material(0x050609, .2, .08))
+    const oled = new THREE.MeshBasicMaterial({ color: 0x000000, toneMapped: false }); materials.push(oled)
+    panel(w - .108, h - .108, .004, .216, d / 2 + .02, oled)
+
+    // Unmodified GrapheneOS boot mask, centered at its native Pixel 9 Pro
+    // screen ratio (448 / 1280). Static white phase of the OS boot animation.
+    const logoW = (w - .108) * 448 / 1280, logoH = logoW * 605 / 448
+    const logoGeometry = geometry('graphene-boot-logo', () => new THREE.PlaneGeometry(logoW, logoH))
+    const bootCanvas = document.createElement('canvas'); bootCanvas.width = 448; bootCanvas.height = 605
+    const boot = bootCanvas.getContext('2d')!
+    boot.fillStyle = '#000'; boot.fillRect(0, 0, 448, 605)
+    const bootTexture = new THREE.CanvasTexture(bootCanvas)
+    bootTexture.colorSpace = THREE.SRGBColorSpace; textures.push(bootTexture)
+    new THREE.ImageLoader().load(grapheneBootMaskUrl, image => {
+      if (disposed) return
+      boot.fillStyle = '#f3f3f3'; boot.fillRect(0, 0, 448, 605)
+      boot.drawImage(image, 0, 0); bootTexture.needsUpdate = true; invalidate()
+    })
+    const logoMaterial = new THREE.MeshBasicMaterial({ map: bootTexture, toneMapped: false }); materials.push(logoMaterial)
+    const logo = new THREE.Mesh(logoGeometry, logoMaterial); logo.position.z = d / 2 + .026; root.add(logo)
+    disk(.031, 0, h / 2 - .145, d / 2 + .028, seal)
+    disk(.017, 0, h / 2 - .145, d / 2 + .039, lens)
+    panel(.32, .014, .006, .007, d / 2 + .02, seal, 0, h / 2 - .044)
+
+    // Pixel 9 Pro's raised camera island, glass pill, three layered optics,
+    // flash and temperature sensor; all face outward on the rear.
+    const cameraY = h / 2 - .68
+    panel(1.57, .59, .105, .285, -d / 2 - .058, frame, 0, cameraY)
+    panel(1.51, .53, .018, .255, -d / 2 - .117, edge, 0, cameraY)
+    panel(1.14, .402, .012, .196, -d / 2 - .13, seal, .125, cameraY)
+    for (const x of [-.245, .125, .49]) {
+      disk(.154, x, cameraY, -d / 2 - .142, lensRing)
+      disk(.13, x, cameraY, -d / 2 - .153, dark)
+      disk(.103, x, cameraY, -d / 2 - .164, lens)
+      disk(.064, x, cameraY, -d / 2 - .175, lensCoating)
+      disk(.039, x, cameraY, -d / 2 - .186, dark)
+      disk(.018, x - .029, cameraY + .038, -d / 2 - .197, material(0x46556c, .18, .3))
+    }
+    disk(.069, -.582, cameraY + .11, -d / 2 - .139, material(0xc8c4ae, .5))
+    disk(.033, -.582, cameraY - .11, -d / 2 - .139, lens)
+    disk(.009, -.45, cameraY - .12, -d / 2 - .14, seal)
+    // Black buttons, antenna seams, bottom USB-C opening and speaker holes.
+    box(.038, .28, .09, w / 2 + .012, .74, 0, frame, .012)
+    box(.038, .45, .09, w / 2 + .012, .19, 0, frame, .012)
+    for (const side of [-1, 1]) for (const y of [-1.35, 1.36]) box(.008, .027, d - .035, side * (w / 2 + .001), y, 0, seal, .002)
+    const port = panel(.245, .071, .009, .032, 0, edge)
+    port.rotation.x = Math.PI / 2; port.position.set(0, -h / 2 - .002, 0)
+    const portHole = panel(.213, .047, .01, .021, 0, seal)
+    portHole.rotation.x = Math.PI / 2; portHole.position.set(0, -h / 2 - .008, 0)
+    box(.145, .008, .012, 0, -h / 2 - .015, 0, frame, .003)
+    for (let i = 0; i < 5; i++) {
+      const hole = disk(.016, 0, 0, 0, seal)
+      hole.rotation.x = 0; hole.position.set(.34 + i * .067, -h / 2 - .003, 0)
+    }
+    const mic = disk(.015, 0, 0, 0, seal); mic.rotation.x = 0; mic.position.set(-.4, -h / 2 - .003, 0)
+  } else if (spec.kind === 'board') {
+    box(w, h, d, 0, 0, 0, body, .06)
+    // Plated through holes, copper traces, solder joints and populated reverse.
+    const horizontal = w > h; const count = spec.pins ?? 10
+    for (const side of [-1, 1]) for (let i = 0; i < count; i++) {
+      const a = ((i + .5) / count - .5) * ((horizontal ? w : h) - .28)
+      const x = horizontal ? a : side * (w / 2 - .08)
+      const y = horizontal ? side * (h / 2 - .08) : a
+      for (const face of [-1, 1]) {
+        disk(.037, x, y, face * (d / 2 + .008), gold)
+        disk(.018, x, y, face * (d / 2 + .021), dark)
+      }
+    }
+    const heltec = id.startsWith('heltec')
+    const shieldX = spec.screen ? w * .28 : w * .05
+    if (!heltec || !spec.screen) {
+      box(w * .25, h * .43, .11, shieldX, .05, .095, silver)
+      label(spec.name.split(' ')[0]!, w * .23, .08, shieldX, .06, .158, false, '#354047')
+    } else {
+      box(w * .32, h * .43, .11, shieldX, .05, -.12, silver)
+      label('ESP32 · LoRa', w * .29, .08, shieldX, .06, -.18, true, '#354047')
+    }
+    for (let i = 0; i < 12; i++) {
+      const x = -w * .38 + (i % 6) * w * .14, y = -h * .28 + Math.floor(i / 6) * h * .56
+      box(.095, .043, .035, x, y, .065, i % 3 ? black : silver, .003)
+      box(.15, .023, .008, x, y, -.05, gold, .002)
+      box(.022, .18, .008, x, y + .07, -.047, pcb, .001)
+    }
+    box(w * .28, h * .34, .055, -w * .15, 0, -.08, black)
+    label(spec.name, w * .65, .12, 0, -h * .31, -.114, true)
+    // SMD passives with metal end caps, short traces and silkscreen outlines.
+    for (const face of [-1, 1]) for (let i = 0; i < 26; i++) {
+      const x = -w * .4 + (i % 13) * w * .065, y = (i < 13 ? -.33 : .33) * h
+      box(.065, .029, .021, x, y, face * .061, i % 4 ? black : material(0x8b7856), .002)
+      for (const end of [-1, 1]) box(.013, .032, .024, x + end * .032, y, face * .063, silver, .001)
+      box(.09, .007, .004, x, y + .03, face * .043, white, .001)
+    }
+    if (spec.screen) screen(w * (heltec ? .52 : .36), h * .51, w * (heltec ? .15 : -.15), 0, .145)
+    else {
+      box(w * .23, h * .28, .055, -w * .26, .03, .1, black)
+      for (let i = 0; i < 6; i++) box(.028, h * .32, .015, -w * .36 + i * .04, .03, .085, silver, .001)
+    }
+    // USB connector faces outward at the short edge.
+    const port = new THREE.Group(); root.add(port)
+    box(.29, .17, .14, 0, 0, 0, silver, .02, port)
+    box(.22, .11, .015, 0, 0, .078, dark, .018, port)
+    if (horizontal) { port.position.set((heltec ? -1 : 1) * (w / 2 + .025), 0, .12); port.rotation.y = (heltec ? -1 : 1) * Math.PI / 2 }
+    else { port.position.set(0, h / 2 + .025, .12); port.rotation.x = -Math.PI / 2 }
+    disk(.055, -w * .4, .12, .076, gold)
+    box(.105, .105, .055, -w * .4, -.14, .09, silver)
+    box(.052, .052, .024, -w * .4, -.14, .13, black)
+    if (spec.antenna) antenna(w * .27, h / 2, 1.25)
+    if (spec.battery) {
+      box(w * .82, .85, .5, 0, 0, -.31, black, .05)
+      const cell = cylinder(.34, w * .7, 0, 0, -.52, material(0x8461a5)); cell.rotation.z = Math.PI / 2
+      for (const x of [-w * .36, w * .36]) { const end = cylinder(.29, .05, x, 0, -.52); end.rotation.z = Math.PI / 2 }
+    }
+    if (id === 'wio-tracker-wm1110') for (const x of [-.66, .66]) for (let i = 0; i < 4; i++) box(.21, .2, .15, x, -.87 + i * .52, .1, white)
+    if (id === 'rak4631') {
+      box(1.08, .96, .035, 0, .45, .18, material(0x187b65))
+      box(.86, .73, .04, 0, .45, .22, silver)
+      label('RAK', .52, .19, 0, .56, .246, false, '#126d95')
+      label('4631', .45, .1, 0, .33, .247, false, '#354047')
+      for (const x of [-.43, 0, .43]) box(.21, .52, .06, x, -.74, .12, black)
+    }
+  } else {
+    box(w, h, d, 0, 0, 0, body, .17)
+    // A recessed rear panel preserves the rounded enclosure silhouette.
+    box(w * .88, h * .91, .025, 0, 0, -d / 2 - .012, body, .008)
+    screws(w * .94, h * .95, -d / 2 - .031)
+    label(spec.name, w * .66, .11, 0, -.2, -d / 2 - .045, true)
+    label('LoRa · wireless', w * .52, .07, 0, -.34, -d / 2 - .045, true)
+    if (spec.kind === 'deck') {
+      screen(w * .79, h * .38, 0, h * .19, d / 2 + .015)
+      const keys = ['QWERTYUIOP', 'ASDFGHJKL', 'ZXCVBNM']
+      keys.forEach((row, r) => [...row].forEach((key, i) => {
+        const x = (i - (row.length - 1) / 2) * .165, y = -.55 - r * .19
+        box(.146, .15, .07, x, y, d / 2 + .03, black, .02)
+        label(key, .065, .06, x, y, d / 2 + .069)
+      }))
+      box(.63, .13, .065, 0, -1.12, d / 2 + .03, black)
+      disk(.11, 0, -.28, d / 2 + .04, silver)
+      disk(.072, 0, -.28, d / 2 + .056, white)
+      label('LILYGO', .48, .09, 0, 1.47, d / 2 + .02)
+      usb(0, -h / 2 + .05, -.015)
+      // Exposed rear PCB on the original T-Deck development board.
+      box(w * .85, h * .83, .045, 0, 0, -d / 2 - .05, pcb)
+      box(.7, .65, .1, .35, .7, -d / 2 - .11, silver)
+      label('ESP32-S3', .55, .08, .35, .7, -d / 2 - .165, true, '#354047')
+      box(1.35, 1.1, .06, 0, -.65, -d / 2 - .09, black)
+      for (let i = 0; i < 8; i++) box(.07, .12, .04, -.65 + i * .18, .04, -d / 2 - .09, gold)
+    } else if (spec.kind === 'echo') {
+      box(w * .49, .42, d * .85, w * .25, h / 2 + .12, 0, body, .08)
+      label('LILYGO', w * .37, .13, w * .25, h / 2 + .14, d * .43, false, '#67b6d8')
+      screen(w * .57, h * .57, 0, -.05, d / 2 + .017, true)
+      screws(w, h, d / 2 + .024)
+      antenna(w * .25, h / 2 + .33, 1.15)
+      for (const y of [-.3, 0, .3]) box(.05, .14, .17, -w / 2 - .02, y, 0, white)
+      usb(0, -h / 2 + .1, -d / 2, true)
+      if (id === 't-echo_plus') {
+        const loop = new THREE.Mesh(geometry('loop', () => new THREE.TorusGeometry(.31, .065, 10, 28, Math.PI)), silver)
+        loop.position.set(-.25, h / 2 + .22, -.08); root.add(loop)
+      }
+    } else if (spec.kind === 'card') {
+      disk(.31, 0, -.3, d / 2 + .015, gold)
+      disk(.24, 0, -.3, d / 2 + .029, body)
+      disk(.06, 0, .92, d / 2 + .018, dark)
+      label('SenseCAP', 1.03, .17, 0, .35, d / 2 + .021, false, '#59645f')
+      box(.46, .085, .025, 0, h / 2 - .12, d / 2 + .008, dark)
+      for (let i = 0; i < 4; i++) disk(.045, -.22 + i * .145, -.95, -d / 2 - .047, gold)
+    } else {
+      if (spec.screen) screen(w * .6, Math.min(h * .3, .7), 0, h * -.04, d / 2 + .025, spec.screen === 'paper')
+      label(spec.name, w * .72, .13, 0, -h * .35, d / 2 + .025)
+      screws(w, h, d / 2 + .016)
+      for (let i = 0; i < 7; i++) box(.045, h * .16, .013, (i - 3) * w * .08, h * .3, d / 2 + .012, dark, .004)
+      usb(0, -h / 2 + .09, -d / 2, true)
+      if (spec.antenna) antenna(w * .25, h / 2, 1.05)
+      if (id === 'unknown-new') {
+        for (const x of [-.48, .48]) disk(.12, x, -.85, d / 2 + .02, accent)
+      }
+    }
+  }
+  // Batch repeated opaque hardware. Every device owns/disposes its resources.
+  function batch(parent: THREE.Object3D) {
+    const groups = new Map<string, THREE.Mesh[]>()
+    for (const child of [...parent.children]) {
+      if (child.children.length) batch(child)
+      if (!(child instanceof THREE.Mesh) || Array.isArray(child.material) || child.material.transparent) continue
+      const key = child.geometry.uuid + child.material.uuid
+      const list = groups.get(key) ?? []; list.push(child); groups.set(key, list)
+    }
+    for (const meshes of groups.values()) if (meshes.length > 1) {
+      const first = meshes[0]!
+      const instance = new THREE.InstancedMesh(first.geometry, first.material, meshes.length)
+      meshes.forEach((mesh, i) => { mesh.updateMatrix(); instance.setMatrixAt(i, mesh.matrix); parent.remove(mesh) })
+      parent.add(instance)
+    }
+  }
+  batch(root)
+  const bounds = new THREE.Box3().setFromObject(root)
+  root.position.sub(bounds.getCenter(new THREE.Vector3()))
+  const pivot = new THREE.Group(); pivot.add(root)
+  const radius = bounds.getBoundingSphere(new THREE.Sphere()).radius
+  root.traverse(object => { object.updateMatrix(); object.matrixAutoUpdate = false })
+  return {
+    pivot, radius, name: spec.name,
+    dispose() {
+      disposed = true
+      root.traverse(object => { if (object instanceof THREE.InstancedMesh) object.dispose() })
+      geometries.forEach(g => g.dispose()); materials.forEach(m => m.dispose()); textures.forEach(t => t.dispose())
+    },
+  }
+}

neode-ui/src/graphics/deviceScene.ts

@@ -0,0 +1,58 @@
+import * as THREE from 'three'
+import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js'
+import { createDeviceModel } from './deviceModels'
+
+export function createDeviceScene(host: HTMLElement, id: string) {
+  const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, powerPreference: 'low-power' })
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.75))
+  renderer.setClearColor(0x000000, 0)
+  renderer.outputColorSpace = THREE.SRGBColorSpace
+  renderer.toneMapping = THREE.ACESFilmicToneMapping
+  renderer.toneMappingExposure = .94
+  renderer.domElement.setAttribute('aria-hidden', 'true')
+  const scene = new THREE.Scene()
+  const camera = new THREE.PerspectiveCamera(33, 1, .1, 100)
+  let disposed = false
+  let model = createDeviceModel(id, render)
+  scene.add(model.pivot)
+  model.pivot.rotation.set(id === 'beryl-ax' ? .27 : -.08, -.4, 0)
+  const studio = new RoomEnvironment()
+  const pmrem = new THREE.PMREMGenerator(renderer)
+  const environment = pmrem.fromScene(studio, .04, .1, 100, { size: 128 })
+  scene.environment = environment.texture; scene.environmentIntensity = 1.05
+  studio.dispose(); pmrem.dispose()
+  scene.add(new THREE.HemisphereLight(0xe4eeff, 0x354052, 2.25))
+  for (const [color, intensity, x, y, z] of [
+    [0xffffff, 1.15, 3, 5, 6], [0x91c6e8, .85, -4, 1, -3], [0xe8c5ac, .65, 4, 0, -4],
+  ]) {
+    const light = new THREE.DirectionalLight(color, intensity)
+    light.position.set(x!, y!, z!); scene.add(light)
+  }
+  host.append(renderer.domElement)
+  function render() { if (!disposed) renderer.render(scene, camera) }
+  function resize() {
+    if (disposed) return
+    const { width, height } = host.getBoundingClientRect()
+    if (!width || !height) return
+    renderer.setSize(width, height, false)
+    camera.aspect = width / height
+    const halfFov = Math.atan(Math.tan(THREE.MathUtils.degToRad(camera.fov / 2)) * Math.min(1, camera.aspect))
+    camera.position.set(0, 0, model.radius / Math.sin(halfFov) * 1.09)
+    camera.lookAt(0, 0, 0); camera.updateProjectionMatrix(); render()
+  }
+  resize()
+  return {
+    canvas: renderer.domElement, get rotation() { return model.pivot.rotation }, render, resize,
+    setModel(next: string) {
+      const replacement = createDeviceModel(next, render)
+      scene.remove(model.pivot); model.dispose(); model = replacement
+      model.pivot.rotation.set(next === 'beryl-ax' ? .27 : -.08, -.4, 0)
+      scene.add(model.pivot); resize()
+    },
+    dispose() {
+      if (disposed) return
+      disposed = true; model.dispose(); environment.dispose(); renderer.dispose()
+      renderer.forceContextLoss(); renderer.domElement.remove()
+    },
+  }
+}

neode-ui/src/router/index.ts

@@ -255,6 +255,11 @@ const router = createRouter({
           name: 'publish-website',
           component: () => import('@/views/publishing/PublishingSetup.vue'),
         },
+        {
+          path: 'setup/non-surveillance-phone',
+          name: 'non-surveillance-phone',
+          component: () => import('@/views/goals/NonSurveillancePhone.vue'),
+        },
         {
           path: 'goals/:goalId',
           name: 'goal-detail',

neode-ui/src/utils/meshDeviceImages.ts

@@ -1,7 +1,6 @@
 /**
- * Best-effort mapping from a detected serial port's USB identity to a board
- * image (SVGs vendored from the Meshtastic web-flasher, GPL-3.0 —
- * github.com/meshtastic/web-flasher, public/img/devices/).
+ * Best-effort mapping from a detected serial port's USB identity to an
+ * original procedural Three.js model.
  *
  * Native-USB boards (T-Deck, RAK4631, T1000-E…) report their name in the USB
  * product string, so those match precisely. UART-bridge boards only identify
@@ -18,58 +17,56 @@ export interface DetectedDeviceInfo {
 }
 
 export interface MeshDeviceImage {
-  /** Path under public/ */
-  image: string
+  /** Procedural model key in graphics/deviceModels.ts. */
+  model: string
   /** Human name shown in the modal */
   label: string
   /** True when the match is exact (product string), false for chip-level guesses */
   exact: boolean
 }
 
-const IMG = '/assets/img/mesh-devices'
-
 /** product-string keyword → image (checked in order, case-insensitive) */
-const PRODUCT_MATCHES: Array<{ match: RegExp; image: string; label: string }> = [
-  { match: /t-?deck/i, image: `${IMG}/t-deck.svg`, label: 'LILYGO T-Deck' },
-  { match: /t-?echo\s*plus/i, image: `${IMG}/t-echo_plus.svg`, label: 'LILYGO T-Echo Plus' },
-  { match: /t-?echo/i, image: `${IMG}/t-echo.svg`, label: 'LILYGO T-Echo' },
-  { match: /t-?beam\s*s3/i, image: `${IMG}/tbeam-s3-core.svg`, label: 'LILYGO T-Beam S3' },
-  { match: /t-?beam/i, image: `${IMG}/tbeam.svg`, label: 'LILYGO T-Beam' },
-  { match: /t3.?s3/i, image: `${IMG}/tlora-t3s3-v1.svg`, label: 'LILYGO T3-S3' },
-  { match: /t-?lora|tlora/i, image: `${IMG}/tlora-v2-1-1_6.svg`, label: 'LILYGO T-LoRa' },
-  { match: /rak.?4631|wisblock/i, image: `${IMG}/rak4631.svg`, label: 'RAK WisBlock 4631' },
-  { match: /wismesh|wistap/i, image: `${IMG}/rak-wismeshtap.svg`, label: 'RAK WisMesh Tap' },
-  { match: /t1000|tracker.?t1000/i, image: `${IMG}/tracker-t1000-e.svg`, label: 'Seeed Card Tracker T1000-E' },
-  { match: /xiao/i, image: `${IMG}/seeed-xiao-s3.svg`, label: 'Seeed XIAO S3' },
-  { match: /wio.?tracker|wm1110/i, image: `${IMG}/wio-tracker-wm1110.svg`, label: 'Seeed Wio Tracker' },
-  { match: /station\s*g2/i, image: `${IMG}/station-g2.svg`, label: 'B&Q Station G2' },
-  { match: /nano\s*g2/i, image: `${IMG}/nano-g2-ultra.svg`, label: 'B&Q Nano G2 Ultra' },
-  { match: /t114/i, image: `${IMG}/heltec-mesh-node-t114.svg`, label: 'Heltec Mesh Node T114' },
-  { match: /wireless\s*stick|wsl/i, image: `${IMG}/heltec-wsl-v3.svg`, label: 'Heltec Wireless Stick Lite V3' },
-  { match: /heltec.*v4/i, image: `${IMG}/heltec_v4.svg`, label: 'Heltec V4' },
-  { match: /heltec/i, image: `${IMG}/heltec-v3.svg`, label: 'Heltec LoRa 32 V3' },
-  { match: /thinknode/i, image: `${IMG}/thinknode_m1.svg`, label: 'Elecrow ThinkNode' },
-  { match: /pico/i, image: `${IMG}/rpipicow.svg`, label: 'Raspberry Pi Pico' },
-  { match: /rnode/i, image: `${IMG}/diy.svg`, label: 'RNode' },
+const PRODUCT_MATCHES: Array<{ match: RegExp; model: string; label: string }> = [
+  { match: /t-?deck/i, model: 't-deck', label: 'LILYGO T-Deck' },
+  { match: /t-?echo\s*plus/i, model: 't-echo_plus', label: 'LILYGO T-Echo Plus' },
+  { match: /t-?echo/i, model: 't-echo', label: 'LILYGO T-Echo' },
+  { match: /t-?beam\s*s3/i, model: 'tbeam-s3-core', label: 'LILYGO T-Beam S3' },
+  { match: /t-?beam/i, model: 'tbeam', label: 'LILYGO T-Beam' },
+  { match: /t3.?s3/i, model: 'tlora-t3s3-v1', label: 'LILYGO T3-S3' },
+  { match: /t-?lora|tlora/i, model: 'tlora-v2-1-1_6', label: 'LILYGO T-LoRa' },
+  { match: /rak.?4631|wisblock/i, model: 'rak4631', label: 'RAK WisBlock 4631' },
+  { match: /wismesh|wistap/i, model: 'rak-wismeshtap', label: 'RAK WisMesh Tap' },
+  { match: /t1000|tracker.?t1000/i, model: 'tracker-t1000-e', label: 'Seeed Card Tracker T1000-E' },
+  { match: /xiao/i, model: 'seeed-xiao-s3', label: 'Seeed XIAO S3' },
+  { match: /wio.?tracker|wm1110/i, model: 'wio-tracker-wm1110', label: 'Seeed Wio Tracker' },
+  { match: /station\s*g2/i, model: 'station-g2', label: 'B&Q Station G2' },
+  { match: /nano\s*g2/i, model: 'nano-g2-ultra', label: 'B&Q Nano G2 Ultra' },
+  { match: /t114/i, model: 'heltec-mesh-node-t114', label: 'Heltec Mesh Node T114' },
+  { match: /wireless\s*stick|wsl/i, model: 'heltec-wsl-v3', label: 'Heltec Wireless Stick Lite V3' },
+  { match: /heltec.*v4/i, model: 'heltec_v4', label: 'Heltec V4' },
+  { match: /heltec/i, model: 'heltec-v3', label: 'Heltec LoRa 32 V3' },
+  { match: /thinknode/i, model: 'thinknode_m1', label: 'Elecrow ThinkNode' },
+  { match: /pico/i, model: 'rpipicow', label: 'Raspberry Pi Pico' },
+  { match: /rnode/i, model: 'diy', label: 'RNode' },
 ]
 
 /** vid:pid → most-likely board (bridge chips = chip-level guess) */
-const VIDPID_MATCHES: Record<string, { image: string; label: string; exact: boolean }> = {
+const VIDPID_MATCHES: Record<string, { model: string; label: string; exact: boolean }> = {
   // Silicon Labs CP210x — Heltec V3 family ships this bridge
-  '10c4:ea60': { image: `${IMG}/heltec-v3.svg`, label: 'LoRa radio (CP2102 serial)', exact: false },
+  '10c4:ea60': { model: 'heltec-v3', label: 'LoRa radio (CP2102 serial)', exact: false },
   // WCH CH340 — most T-Beam / T-LoRa boards
-  '1a86:7523': { image: `${IMG}/tbeam.svg`, label: 'LoRa radio (CH340 serial)', exact: false },
-  '1a86:55d4': { image: `${IMG}/tbeam.svg`, label: 'LoRa radio (CH9102 serial)', exact: false },
+  '1a86:7523': { model: 'tbeam', label: 'LoRa radio (CH340 serial)', exact: false },
+  '1a86:55d4': { model: 'tbeam', label: 'LoRa radio (CH9102 serial)', exact: false },
   // Espressif native USB (S3 boards: T3-S3, T-Deck without product str)
-  '303a:1001': { image: `${IMG}/tlora-t3s3-v1.svg`, label: 'ESP32-S3 LoRa board', exact: false },
+  '303a:1001': { model: 'tlora-t3s3-v1', label: 'ESP32-S3 LoRa board', exact: false },
   // RAK4631 nRF52 native USB
-  '239a:8029': { image: `${IMG}/rak4631.svg`, label: 'RAK WisBlock 4631', exact: true },
+  '239a:8029': { model: 'rak4631', label: 'RAK WisBlock 4631', exact: true },
   // Raspberry Pi (Pico W)
-  '2e8a:0005': { image: `${IMG}/rpipicow.svg`, label: 'Raspberry Pi Pico', exact: false },
+  '2e8a:0005': { model: 'rpipicow', label: 'Raspberry Pi Pico', exact: false },
 }
 
 const FALLBACK: MeshDeviceImage = {
-  image: `${IMG}/unknown-new.svg`,
+  model: 'unknown-new',
   label: 'LoRa mesh radio',
   exact: false,
 }
@@ -79,7 +76,7 @@ export function resolveMeshDeviceImage(info: DetectedDeviceInfo | undefined): Me
   const product = `${info.manufacturer ?? ''} ${info.product ?? ''}`.trim()
   if (product) {
     for (const m of PRODUCT_MATCHES) {
-      if (m.match.test(product)) return { image: m.image, label: m.label, exact: true }
+      if (m.match.test(product)) return { model: m.model, label: m.label, exact: true }
     }
   }
   if (info.vid && info.pid) {

neode-ui/src/views/GoalDetail.vue

@@ -280,13 +280,16 @@ function stepIconUrl(step: GoalStep): string | undefined {
  * generic services list. `launchAppId` opens via the app launcher (iframe apps
  * overlay on top of the current screen; X-Frame-Options apps open a tab).
  */
-const GOAL_COMPLETION_CTA: Record<string, { label: string; route?: string; launchAppId?: string }> = {
+const GOAL_COMPLETION_CTA: Record<string, { label: string; route?: string | { path: string; query?: Record<string, string> }; launchAppId?: string }> = {
   'instant-business-site': { label: 'Open Just Works', launchAppId: 'justworks' },
   'open-a-shop': { label: 'Go to my shop (BTCPay)', launchAppId: 'btcpay-server' },
   'accept-payments': { label: 'Go to Lightning (LND)', route: '/dashboard/apps/lnd' },
   'run-lightning-node': { label: 'View my channels', route: '/dashboard/apps/lnd/channels' },
   'setup-fedimint': { label: 'Open Fedimint', launchAppId: 'fedimint' },
-  'file-browser': { label: 'Open File Browser', launchAppId: 'filebrowser' },
+  // Keep the completion action inside Archipelago's native Cloud browser. The
+  // old CTA launched the standalone File Browser app, which lost the Cloud
+  // navigation context and bypassed the original in-app file browser view.
+  'file-browser': { label: 'Open my cloud files', route: { path: '/dashboard/cloud', query: { tab: 'mine' } } },
   'store-files': { label: 'Open my cloud (Nextcloud)', launchAppId: 'nextcloud' },
   'create-identity': { label: 'Go to my identity', route: '/dashboard/web5' },
   'back-up-everything': { label: 'Go to backups', route: '/dashboard/settings' },

neode-ui/src/views/Server.vue

@@ -163,13 +163,22 @@
             </div>
           </template>
         </div>
-        <router-link
-          to="/dashboard/server/firewall-tunnels"
-          class="glass-button mt-4 w-full gap-2 rounded-lg text-sm font-medium"
-        >
-          Firewalls &amp; tunnels
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
-        </router-link>
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-4">
+          <router-link
+            to="/dashboard/server/firewall-tunnels"
+            class="glass-button w-full gap-2 rounded-lg text-sm font-medium"
+          >
+            Firewalls &amp; tunnels
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
+          </router-link>
+          <router-link
+            to="/dashboard/server/openwrt"
+            class="glass-button w-full gap-2 rounded-lg text-sm font-medium"
+          >
+            OpenWrt Gateway
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
+          </router-link>
+        </div>
       </div>
 
       <FipsNetworkCard />

neode-ui/src/views/goals/NonSurveillancePhone.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { nextTick, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import BackButton from '@/components/BackButton.vue'
+import DeviceModel from '@/components/DeviceModel.vue'
+import HardwareMarketplace from '@/components/HardwareMarketplace.vue'
+
+const router = useRouter()
+const shopOpen = ref(false)
+const showcase = ref<HTMLElement>()
+const showcaseHeight = ref<string>()
+
+function openShop() {
+  const height = showcase.value?.getBoundingClientRect().height
+  if (height) showcaseHeight.value = `${height}px`
+  shopOpen.value = true
+}
+async function closeShop() {
+  shopOpen.value = false
+  await nextTick()
+  showcaseHeight.value = undefined
+}
+</script>
+
+<template>
+  <div class="pb-12">
+    <div class="flex items-center gap-3 mb-6">
+      <BackButton desktop-margin="mb-0" @click="router.push({ path: '/dashboard', query: { tab: 'setup' } })" />
+      <h1 class="text-lg font-semibold text-white">Get a non surveillance phone</h1>
+    </div>
+    <p class="text-sm text-white/75 max-w-2xl">Your phone should answer to you. Choose a supported Pixel, install GrapheneOS, and keep verified boot on.</p>
+
+    <div ref="showcase" class="glass-card p-6 overflow-hidden phone-showcase" :style="showcaseHeight ? { height: showcaseHeight } : undefined">
+      <div class="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(280px,360px)] gap-6 items-start phone-showcase__grid">
+        <DeviceModel v-if="!shopOpen" model="pixel-graphene" label="Black Pixel 9 Pro with the GrapheneOS boot screen" fill-viewport :controls="false" />
+        <HardwareMarketplace kind="phone" :expanded="shopOpen" @open="openShop" @close="closeShop" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.phone-showcase { margin: 24px 0 48px; }
+.phone-showcase__grid { height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr); }
+@media (min-width: 1024px) {
+  .phone-showcase__grid > :deep(.router-marketplace) { align-self: end; margin-top: 0; }
+}
+</style>

neode-ui/src/views/server/OpenWrtGateway.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 import { rpcClient } from '@/api/rpc-client'
 import { useCachedResource } from '@/composables/useCachedResource'
 import BackButton from '@/components/BackButton.vue'
+import DeviceModel from '@/components/DeviceModel.vue'
+import HardwareMarketplace from '@/components/HardwareMarketplace.vue'
 
 const router = useRouter()
 function goBack() {
@@ -113,6 +115,19 @@ const host = ref('')
 const sshUser = ref('root')
 const sshPassword = ref('')
 const showConnectForm = ref(false)
+const routerShopOpen = ref(false)
+const routerCard = ref<HTMLElement>()
+const routerCardHeight = ref<string>()
+function openRouterShop() {
+  const height = routerCard.value?.getBoundingClientRect().height
+  if (height) routerCardHeight.value = `${height}px`
+  routerShopOpen.value = true
+}
+async function closeRouterShop() {
+  routerShopOpen.value = false
+  await nextTick()
+  routerCardHeight.value = undefined
+}
 const connecting = ref(false)
 const connectedParams = ref<Record<string, string> | null>(null)
 
@@ -456,7 +471,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="pb-6">
+  <div class="pb-12">
     <!-- mb-0 overrides the pill's default mb-4, which pushed it above the
          title's centerline in this inline header row. -->
     <div class="flex items-center gap-3 mb-6">
@@ -465,7 +480,8 @@ onMounted(() => {
     </div>
 
     <!-- Connect form -->
-    <div v-if="showConnectForm" class="glass-card p-6 mb-6">
+    <template v-if="showConnectForm">
+    <div class="glass-card p-6 mb-6">
       <h2 class="text-sm font-semibold text-white/80 mb-4">Connect to Router</h2>
       <div class="space-y-3">
         <div>
@@ -530,6 +546,16 @@ onMounted(() => {
       <p v-if="error" class="mt-3 text-xs text-red-400">{{ error }}</p>
     </div>
 
+    <div ref="routerCard" class="glass-card p-6 mb-6 overflow-hidden router-model-card" :style="routerCardHeight ? { height: routerCardHeight } : undefined">
+      <div class="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(280px,360px)] gap-6 items-start">
+        <DeviceModel v-if="!routerShopOpen" model="beryl-ax" label="Beryl AX (GL-MT3000) OpenWrt router" fill-viewport :controls="false" />
+        <HardwareMarketplace :expanded="routerShopOpen" @open="openRouterShop" @close="closeRouterShop" />
+      </div>
+    </div>
+    <div class="h-16" aria-hidden="true"></div>
+
+    </template>
+
     <!-- Loading skeleton -->
     <template v-else-if="loading">
       <div v-for="i in 3" :key="i" class="glass-card p-6 mb-4 animate-pulse">
@@ -1004,5 +1030,20 @@ onMounted(() => {
       </div>
 
     </template>
+
   </div>
 </template>
+
+<style scoped>
+.router-model-card {
+  margin: 24px 0 48px;
+}
+.router-model-card > .grid { height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr); }
+
+@media (min-width: 1024px) {
+  .router-model-card > .grid > :deep(.router-marketplace) {
+    align-self: end;
+    margin-top: 0;
+  }
+}
+</style>