fix(mesh): Reticulum garbage-text + reconnect churn + signal bars + node naming/HTTPS
- reticulum.rs: send_text_msg was lossy-UTF8-mangling binary CBOR control envelopes (ReadReceipt etc.) before sending as LXMF text; base64-encode with a marker instead, decoded losslessly on receive. - typed_messages.rs: mesh.send-read-receipt fired automatically on every chat view with no is_archy_peer gate, so viewing a message from a stock (non-archy) LXMF peer auto-sent it an undecodable control envelope, surfacing as garbage text right after whatever it just sent. Now a no-op for non-archy peers. - mesh/listener/mod.rs: RX_STALL_TIMEOUT was 300s and forced a full auto-detect reconnect on any otherwise-healthy but quiet mesh link (visible as "Connecting..." flapping); this also wiped Reticulum's in-memory peer-address table every cycle, breaking messaging with peers who hadn't re-announced in the window. Bumped to 1800s. - reticulum.rs: persist the peer prefix/dest-hash/display-name table to disk so a restart doesn't force every peer back to "Anonymous Peer" until they re-announce. - decode.rs/frames.rs: Meshcore was discarding the SNR its wire format carries; wire it onto the peer record. Mesh.vue's signalBars() now falls back to SNR-based bars when RSSI is unavailable (always true for Meshcore); Reticulum has neither and correctly stays at 0/"no data". - system/handlers.rs, dispatcher.rs: new system.get-hostname RPC + cert regeneration (with a proper SAN) whenever server.set-name changes the hostname, so HTTPS doesn't add a mismatch warning on top of the self-signed one after a rename. - AccountInfoSection.vue: surface the mDNS hostname + http/https links in Settings (HTTPS needed for mic/camera secure-context features) — never forced, both keep working. - build-auto-installer-iso.sh: ship avahi-daemon so .local names actually resolve on the LAN, and give the self-signed cert a real SAN instead of a bare CN, both at image-build and install-time-fallback. - Mesh.vue/MediaLightbox.vue/mesh-styles.css: mic/attach-stack no longer closes on a plain hover-past; mesh images open in the shared lightbox and have a real download button; lightbox close button moves to bottom-center on mobile instead of under the status bar; mesh device panel gets the same height/padding as its sibling tabs. Verified: 108/108 mesh unit tests, deployed + confirmed healthy on .116/.198/.228 (matching binary hash across all three), live Reticulum messaging confirmed working end-to-end post-deploy. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
archipelago
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
99cd82ab0a
commit
bebf3bae10
@@ -416,5 +416,20 @@ onUnmounted(() => {
|
||||
.lightbox-nav-next { right: 0.5rem; }
|
||||
.lightbox-audio-artwork { width: 8rem; height: 8rem; }
|
||||
.lightbox-media-video { border-radius: 0; }
|
||||
|
||||
/* The close button used to sit in the top bar, which lands under the
|
||||
status bar / notch safe area on most phones and is awkward to reach.
|
||||
Detach it from the top bar and pin it bottom-center, under the media,
|
||||
for mobile only — desktop keeps it in the top bar. */
|
||||
.lightbox-topbar { padding-right: 1rem; }
|
||||
.lightbox-topbar .lightbox-btn {
|
||||
position: fixed;
|
||||
top: auto;
|
||||
bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
|
||||
left: 50%;
|
||||
right: auto;
|
||||
transform: translateX(-50%);
|
||||
z-index: 20;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+113
-17
@@ -13,6 +13,8 @@ import MeshAssistantPanel from '@/views/mesh/MeshAssistantPanel.vue'
|
||||
import { rpcClient } from '@/api/rpc-client'
|
||||
import { wsClient } from '@/api/websocket'
|
||||
import { IMAGE_COMPRESSION_PRESETS, compressImage, makeThumbnail, type ImageCompressionPreset } from '@/utils/imageCompression'
|
||||
import MediaLightbox from '@/components/cloud/MediaLightbox.vue'
|
||||
import type { FileBrowserItem } from '@/api/filebrowser-client'
|
||||
import '@/views/mesh/mesh-styles.css'
|
||||
|
||||
const mesh = useMeshStore()
|
||||
@@ -1049,12 +1051,24 @@ watch(
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
function signalBars(rssi: number | null): number {
|
||||
if (rssi === null) return 0
|
||||
if (rssi > -60) return 4
|
||||
if (rssi > -75) return 3
|
||||
if (rssi > -90) return 2
|
||||
return 1
|
||||
function signalBars(rssi: number | null, snr: number | null = null): number {
|
||||
if (rssi !== null) {
|
||||
if (rssi > -60) return 4
|
||||
if (rssi > -75) return 3
|
||||
if (rssi > -90) return 2
|
||||
return 1
|
||||
}
|
||||
// Meshcore carries no per-packet RSSI, only SNR — fall back to it so the
|
||||
// bars aren't permanently empty for that transport (Reticulum has neither,
|
||||
// stays at 0/"No signal data yet", which is honest — RNS/LXMF genuinely
|
||||
// doesn't expose a signal-quality metric).
|
||||
if (snr !== null) {
|
||||
if (snr > 5) return 4
|
||||
if (snr > 0) return 3
|
||||
if (snr > -10) return 2
|
||||
return 1
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
function signalTitle(rssi: number | null, snr: number | null): string {
|
||||
@@ -1661,6 +1675,68 @@ function isImageMime(mime?: string): boolean {
|
||||
return !!mime && mime.startsWith('image/')
|
||||
}
|
||||
|
||||
const IMAGE_MIME_TO_EXT: Record<string, string> = {
|
||||
'image/jpeg': 'jpg',
|
||||
'image/png': 'png',
|
||||
'image/gif': 'gif',
|
||||
'image/webp': 'webp',
|
||||
'image/bmp': 'bmp',
|
||||
'image/svg+xml': 'svg',
|
||||
}
|
||||
|
||||
// Lightbox is FileBrowserItem-shaped (built for the cloud file browser) — a
|
||||
// mesh attachment isn't a real file-browser entry, so we key it by `cid`
|
||||
// and hand back the already-fetched blob URL instead of a real fetch.
|
||||
const lightboxOpen = ref(false)
|
||||
const lightboxItems = ref<FileBrowserItem[]>([])
|
||||
|
||||
type MeshAttachmentPayload = {
|
||||
cid: string
|
||||
sender_onion: string
|
||||
cap_token: string
|
||||
cap_exp: number
|
||||
mime?: string
|
||||
filename?: string | null
|
||||
}
|
||||
|
||||
async function openMeshLightbox(payload: MeshAttachmentPayload) {
|
||||
if (!fetchedUrls.value.has(payload.cid)) {
|
||||
await handleFetchContent(payload)
|
||||
}
|
||||
if (!fetchedUrls.value.has(payload.cid)) return // fetch failed
|
||||
const ext = IMAGE_MIME_TO_EXT[payload.mime || ''] || 'jpg'
|
||||
lightboxItems.value = [
|
||||
{
|
||||
name: payload.filename || `image.${ext}`,
|
||||
path: payload.cid,
|
||||
size: 0,
|
||||
modified: '',
|
||||
isDir: false,
|
||||
type: payload.mime || 'image/jpeg',
|
||||
extension: ext,
|
||||
},
|
||||
]
|
||||
lightboxOpen.value = true
|
||||
}
|
||||
|
||||
async function lightboxFetchBlobUrl(cid: string): Promise<string> {
|
||||
return fetchedUrls.value.get(cid) || ''
|
||||
}
|
||||
|
||||
async function downloadAttachment(payload: MeshAttachmentPayload) {
|
||||
if (!fetchedUrls.value.has(payload.cid)) {
|
||||
await handleFetchContent(payload)
|
||||
}
|
||||
const url = fetchedUrls.value.get(payload.cid)
|
||||
if (!url) return
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = payload.filename || `image.${IMAGE_MIME_TO_EXT[payload.mime || ''] || 'jpg'}`
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
a.remove()
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -1873,7 +1949,7 @@ function isImageMime(mime?: string): boolean {
|
||||
</span>
|
||||
<div class="mesh-peer-signal" :title="signalTitle(mp.primary_rssi, mp.primary_snr)">
|
||||
<div class="mesh-signal-bars">
|
||||
<div v-for="i in 4" :key="i" class="mesh-signal-bar" :class="{ active: i <= signalBars(mp.primary_rssi) }" />
|
||||
<div v-for="i in 4" :key="i" class="mesh-signal-bar" :class="{ active: i <= signalBars(mp.primary_rssi, mp.primary_snr) }" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1898,7 +1974,7 @@ function isImageMime(mime?: string): boolean {
|
||||
Map
|
||||
</button>
|
||||
<button class="mesh-tab" :class="{ active: activeTab === 'device' }" @click="activeTab = 'device'" title="Device settings">
|
||||
⚙️
|
||||
📡
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -2060,12 +2136,21 @@ function isImageMime(mime?: string): boolean {
|
||||
</div>
|
||||
<div v-if="msg.typed_payload.caption" class="mesh-typed-content-caption">{{ msg.typed_payload.caption }}</div>
|
||||
<template v-if="fetchedUrls.get(msg.typed_payload.cid)">
|
||||
<img
|
||||
v-if="isImageMime(msg.typed_payload.mime)"
|
||||
:src="fetchedUrls.get(msg.typed_payload.cid)"
|
||||
class="mesh-typed-content-preview"
|
||||
alt="attachment"
|
||||
/>
|
||||
<div v-if="isImageMime(msg.typed_payload.mime)" class="mesh-typed-content-image-wrap">
|
||||
<img
|
||||
:src="fetchedUrls.get(msg.typed_payload.cid)"
|
||||
class="mesh-typed-content-preview"
|
||||
alt="attachment"
|
||||
role="button"
|
||||
title="Click to view full-size"
|
||||
@click="openMeshLightbox(msg.typed_payload as any)"
|
||||
/>
|
||||
<button
|
||||
class="mesh-typed-content-download-btn"
|
||||
title="Download"
|
||||
@click="downloadAttachment(msg.typed_payload as any)"
|
||||
>⬇</button>
|
||||
</div>
|
||||
<audio
|
||||
v-else-if="(msg.typed_payload.mime || '').startsWith('audio/')"
|
||||
:src="fetchedUrls.get(msg.typed_payload.cid)"
|
||||
@@ -2083,6 +2168,9 @@ function isImageMime(mime?: string): boolean {
|
||||
:src="`data:${msg.typed_payload.mime};base64,${msg.typed_payload.thumb_bytes}`"
|
||||
class="mesh-typed-content-preview mesh-typed-content-thumb"
|
||||
alt="thumbnail preview"
|
||||
role="button"
|
||||
title="Click to view full-size"
|
||||
@click="openMeshLightbox(msg.typed_payload as any)"
|
||||
/>
|
||||
<button
|
||||
class="btn"
|
||||
@@ -2194,7 +2282,7 @@ function isImageMime(mime?: string): boolean {
|
||||
:title="isRecordingVoice ? 'Release to send' : 'Hold to record a voice message'"
|
||||
@pointerdown.prevent="startVoiceRecording"
|
||||
@pointerup.prevent="() => { stopVoiceRecording(); showAttachMenu = false }"
|
||||
@pointerleave="() => { stopVoiceRecordingIfActive(); showAttachMenu = false }"
|
||||
@pointerleave="() => { if (isRecordingVoice) { stopVoiceRecordingIfActive(); showAttachMenu = false } }"
|
||||
>
|
||||
<span v-if="isRecordingVoice" class="mesh-spinner" aria-hidden="true"></span>
|
||||
<span v-else>🎤</span>
|
||||
@@ -2243,7 +2331,7 @@ function isImageMime(mime?: string): boolean {
|
||||
AI
|
||||
</button>
|
||||
<button class="mesh-tab" :class="{ active: toolsTab === 'map' }" @click="toolsTab = 'map'">Map</button>
|
||||
<button class="mesh-tab" :class="{ active: toolsTab === 'device' }" @click="toolsTab = 'device'" title="Device settings">⚙️</button>
|
||||
<button class="mesh-tab" :class="{ active: toolsTab === 'device' }" @click="toolsTab = 'device'" title="Device settings">📡</button>
|
||||
</div>
|
||||
<MeshBitcoinPanel v-if="showBitcoinPanel" />
|
||||
<MeshDeadmanPanel v-if="showDeadmanPanel" />
|
||||
@@ -2277,7 +2365,7 @@ function isImageMime(mime?: string): boolean {
|
||||
</button>
|
||||
<button class="mesh-mtab" :class="{ active: mobileTab === 'assistant' }" @click="selectMobileTab('assistant')">AI</button>
|
||||
<button class="mesh-mtab" :class="{ active: mobileTab === 'map' }" @click="selectMobileTab('map')">Map</button>
|
||||
<button class="mesh-mtab" :class="{ active: mobileTab === 'device' }" @click="selectMobileTab('device')" title="Device settings">⚙️</button>
|
||||
<button class="mesh-mtab" :class="{ active: mobileTab === 'device' }" @click="selectMobileTab('device')" title="Device settings">📡</button>
|
||||
</div>
|
||||
</Teleport>
|
||||
|
||||
@@ -2364,6 +2452,14 @@ function isImageMime(mime?: string): boolean {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MediaLightbox
|
||||
:items="lightboxItems"
|
||||
:start-index="0"
|
||||
:show="lightboxOpen"
|
||||
:fetch-blob-url="lightboxFetchBlobUrl"
|
||||
@close="lightboxOpen = false"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -341,9 +341,18 @@
|
||||
.mesh-typed-coordinate-link { display: inline-block; font-size: 0.75rem; color: #3b82f6; margin-top: 4px; text-decoration: underline; }
|
||||
.typed-block_header { border-left: 3px solid #a855f7; }
|
||||
.mesh-typed-block { display: flex; align-items: center; gap: 4px; color: #a855f7; font-size: 0.8rem; }
|
||||
.mesh-typed-content-preview { max-width: 220px; max-height: 220px; border-radius: 10px; display: block; }
|
||||
.mesh-typed-content-preview { max-width: 220px; max-height: 220px; border-radius: 10px; display: block; cursor: pointer; }
|
||||
.mesh-typed-content-thumb { opacity: 0.85; filter: blur(0.5px); margin-bottom: 6px; }
|
||||
.mesh-typed-content-audio { width: 220px; max-width: 100%; display: block; }
|
||||
.mesh-typed-content-image-wrap { position: relative; display: inline-block; }
|
||||
.mesh-typed-content-download-btn {
|
||||
position: absolute; bottom: 6px; right: 6px; width: 1.75rem; height: 1.75rem;
|
||||
border-radius: 50%; border: 1px solid rgba(255,255,255,0.15);
|
||||
background: rgba(0,0,0,0.55); color: rgba(255,255,255,0.85); font-size: 0.85rem;
|
||||
display: flex; align-items: center; justify-content: center; cursor: pointer;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
.mesh-typed-content-download-btn:hover { background: rgba(0,0,0,0.75); color: #fff; }
|
||||
.mesh-tab-bar { display: flex; gap: 2px; background: rgba(0,0,0,0.3); border-radius: 10px; padding: 3px; flex-shrink: 0; }
|
||||
.mesh-tab { flex: 1; padding: 8px 12px; border: none; background: transparent; color: rgba(255,255,255,0.5); font-size: 0.82rem; font-weight: 500; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
.mesh-tab:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.05); }
|
||||
@@ -368,7 +377,7 @@
|
||||
.mesh-assistant-addkey input { flex: 1; min-width: 0; }
|
||||
.mesh-panel-title { font-size: 1rem; font-weight: 700; color: rgba(255,255,255,0.95); margin: 0; }
|
||||
.mesh-panel-sub { font-size: 0.8rem; color: rgba(255,255,255,0.45); margin: -4px 0 0; }
|
||||
.mesh-device-panel { display: flex; flex-direction: column; gap: 12px; }
|
||||
.mesh-device-panel { padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; overflow-y: auto; }
|
||||
.mesh-device-panel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
|
||||
.mesh-device-panel-actions { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.08); }
|
||||
.mesh-device-reboot-btn { align-self: flex-start; padding: 8px 16px; font-size: 0.85rem; }
|
||||
|
||||
@@ -68,6 +68,22 @@ const copiedOnion = ref(false)
|
||||
const copiedDid = ref(false)
|
||||
let copiedTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
// mDNS hostname — HTTPS (even self-signed) is required for mic/camera access
|
||||
// (getUserMedia refuses plain HTTP outside localhost); surface both so users
|
||||
// know where to go for features that need it, without forcing HTTPS on anyone.
|
||||
const mdnsHostname = ref<string | null>(null)
|
||||
const httpsUrl = computed(() => (mdnsHostname.value ? `https://${mdnsHostname.value}` : null))
|
||||
const httpUrl = computed(() => (mdnsHostname.value ? `http://${mdnsHostname.value}` : null))
|
||||
const copiedHttps = ref(false)
|
||||
async function copyHttpsUrl() {
|
||||
if (!httpsUrl.value) return
|
||||
try {
|
||||
await navigator.clipboard.writeText(httpsUrl.value)
|
||||
copiedHttps.value = true
|
||||
setTimeout(() => { copiedHttps.value = false }, 2000)
|
||||
} catch { /* unavailable */ }
|
||||
}
|
||||
|
||||
async function copyOnionAddress() {
|
||||
const addr = serverTorAddress.value
|
||||
if (!addr) return
|
||||
@@ -150,6 +166,13 @@ async function init() {
|
||||
} catch (e) {
|
||||
if (import.meta.env.DEV) console.warn('node.nostr-pubkey unavailable', e)
|
||||
}
|
||||
// mDNS hostname for the "Access this node" card.
|
||||
try {
|
||||
const res = await rpcClient.call<{ mdns_hostname?: string }>({ method: 'system.get-hostname' })
|
||||
if (res?.mdns_hostname) mdnsHostname.value = res.mdns_hostname
|
||||
} catch (e) {
|
||||
if (import.meta.env.DEV) console.warn('system.get-hostname unavailable', e)
|
||||
}
|
||||
}
|
||||
init()
|
||||
</script>
|
||||
@@ -215,6 +238,28 @@ init()
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Access This Node Card — local hostname + HTTP/HTTPS. HTTPS (even
|
||||
self-signed) is needed for mic/camera access on some features; never
|
||||
forced, just surfaced so people who need it know where to go. -->
|
||||
<div v-if="mdnsHostname" class="bg-black/20 rounded-xl px-5 py-4 border border-white/10">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg class="w-5 h-5 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.636 18.364a9 9 0 010-12.728m12.728 0a9 9 0 010 12.728m-9.9-2.829a5 5 0 010-7.07m7.072 0a5 5 0 010 7.07M13 12a1 1 0 11-2 0 1 1 0 012 0z" />
|
||||
</svg>
|
||||
<p class="text-xs font-semibold text-white/60 uppercase tracking-wide">Access on this network</p>
|
||||
</div>
|
||||
<p class="text-lg font-semibold text-white/95 mb-1">{{ mdnsHostname }}</p>
|
||||
<div class="flex items-center gap-2 text-xs text-white/50">
|
||||
<a :href="httpUrl!" class="hover:text-white/80 transition-colors underline">http</a>
|
||||
<span>·</span>
|
||||
<a :href="httpsUrl!" class="hover:text-white/80 transition-colors underline">https</a>
|
||||
<span class="text-white/30">(needed for mic/camera features)</span>
|
||||
<button @click="copyHttpsUrl" class="ml-auto text-white/40 hover:text-white/70 transition-colors">
|
||||
{{ copiedHttps ? 'Copied!' : 'Copy HTTPS link' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Release Notes Modal -->
|
||||
<Teleport to="body">
|
||||
<Transition name="modal">
|
||||
|
||||
Reference in New Issue
Block a user