+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Confirm +
++ {{ pendingConfirm.message }} +
+
+
+
+
+
+ Backend Tampering Detected!
+ The application backend binary (unpacked from ASAR) appears to have been modified or replaced. This
+ could indicate a malicious actor trying to compromise your mesh communication.
+
+ Data Tampering Detected!
+ Your identities or database files appear to have been modified while the app was closed.
+
-
+
- {{ issue }} +
+ Proceed with caution. If you did not manually update or modify these files, your installation may be + compromised. +
+
+ ![]()
+
@@ -19,6 +22,10 @@ export default {
MaterialDesignIcon,
},
props: {
+ customImage: {
+ type: String,
+ default: "",
+ },
iconName: {
type: String,
default: "",
diff --git a/meshchatx/src/frontend/components/MaterialDesignIcon.vue b/meshchatx/src/frontend/components/MaterialDesignIcon.vue
index fa640c1..7c508a5 100644
--- a/meshchatx/src/frontend/components/MaterialDesignIcon.vue
+++ b/meshchatx/src/frontend/components/MaterialDesignIcon.vue
@@ -5,7 +5,8 @@
role="img"
:aria-label="iconName"
fill="currentColor"
- style="display: inline-block; vertical-align: middle"
+ style="display: inline-block; vertical-align: middle; shape-rendering: inherit"
+ class="antialiased"
>
+
+
+
+
+
+
+
+
+
+
+ Back
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+ + Welcome to MeshChatX +
++ The future of off-grid communication. Secure, decentralized, and unstoppable. +
+
+
+
+
+
+
+ Security & Performance
+
+ Massive improvements in speed, security, and crash recovery.
+
+
+
+
+
+ Enhanced Maps
+
+ OpenLayers w/ MBTiles support and custom API endpoints.
+
+
+
+
+
+ Full LXST Voice
+
+ Voicemail, ringtones, phonebook, and contact sharing.
+
+
+
+
+
+ Advanced Tools
+
+ Micron, Paper Messages, RNS tools, Crawler & Archiver.
+
+
+
+
+
+ Command Palette
+
+ Navigate everything instantly with a few keystrokes.
+
+
+
+
+
+ i18n Support
+ Available in English, German, and Russian.
+
+
+
+
+
+
+
+ Connect to the Mesh
++ To send messages, you need to connect to a Reticulum interface. +
+
+
+
+ Manual Configuration
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{
+ iface.name
+ }}
+ {{ iface.target_host }}:{{ iface.target_port }}
+
+
+
+
+ Online
+
+ Use
+
+
+
+ OR
+
+
+
+
+
+
+
+
+
+ Learn & Create
++ Discover how to use MeshChatX to its full potential. +
+
+
+
+
+
+
+
+ Documentation
+
+ Read the official MeshChatX and Reticulum documentation.
+
+
+ MeshChatX Docs
+ Reticulum Docs
+
+
+
+
+ Open Micron Editor
+
+ Micron Editor
+
+ Take a look at the Micron Editor for a guide on creating mesh-native pages.
+
+
+
+
+
+
+
+ Ready to Roll!
++ Everything is set up. You need to restart the application for the changes to take + effect. +
+
+
+
+ Skip
+
+ Next
+
+ Restart & Start Chatting
+
+
+
+
+
+
+
+
+
diff --git a/meshchatx/src/frontend/components/about/AboutPage.vue b/meshchatx/src/frontend/components/about/AboutPage.vue
index 363662f..2d15f2a 100644
--- a/meshchatx/src/frontend/components/about/AboutPage.vue
+++ b/meshchatx/src/frontend/components/about/AboutPage.vue
@@ -18,8 +18,33 @@
{{ $t("about.python_version", { version: appInfo.python_version }) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+ + Welcome to MeshChatX +
++ The future of off-grid communication. Secure, decentralized, and unstoppable. +
+
+
+
+
+
+
+
+ Security & Performance
+
+
+ Massive improvements in speed, security, and integrity with built-in crash
+ recovery.
+
+
+
+
+
+ Enhanced Maps
+
+ OpenLayers support with offline MBTiles and custom API endpoints for online
+ maps.
+
+
+
+
+
+ Full LXST Voice
+
+ Crystal clear voice calls over mesh. Voicemail, custom ringtones, and phonebook
+ discovery.
+
+
+
+
+
+ Advanced Tools
+
+ Micron editor, paper messages, RNS tools, network Crawler and Archiver.
+
+
+
+
+
+ Command Palette
+
+ Navigate the entire application and access tools instantly with a single
+ shortcut.
+
+
+
+
+
+ i18n Support
+
+ Full internationalization support for English, German, and Russian languages.
+
+
+
+
+
+
+
+
+ Connect to the Mesh
++ To send messages and make calls, you need to connect to a Reticulum interface. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Custom Setup
+
+
+
+ Manual Configuration
+
+
+ + Already have a private relay or hardware RNode? Add it manually to connect to + your own mesh. +
+
+
+
+
+
+
+
+ Learn & Create
++ Discover how to use MeshChatX to its full potential and create your own content. +
+
+
+
+
+
+
+
+
+ Documentation
+
+ + Comprehensive guides for MeshChatX and the underlying Reticulum Network Stack. +
+
+ Read MeshChatX Docs
+ Reticulum Network Manual
+
+
+
+
+ Open Micron Editor
+
+
+ Micron Editor
+
+ + Learn how to create mesh-native pages and interactive content using the Micron + markup language. +
+
+
+
+
+
+
+ Ready to Roll!
++ MeshChatX is now configured. You need to restart the application to finalize the + connection. +
+
+
+
+
+ Restart Required
+
+ If you're running in Docker, ensure your container auto-restarts. Native apps will
+ relaunch automatically.
+
+
+ Back
+
+
+
+
+ Skip Setup
+
+ Continue
+
+ Restart & Start Chatting
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t("about.security_integrity") }}
+
+
+ {{ $t("about.security_integrity_description") }}
+
+
+
+
+
+
+
+ {{ $t("about.technical_issues") }}
+
+ -
+
- {{ issue }} +
+
+
+
+
+ {{ $t("about.dependency_chain") }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+ MeshChatX
+ v{{ appInfo.version }}
+
+
+
+
+
+
+
+
+ LXMF
+
+
+
+
+ Lightweight Extensible Message Format
+
+
+ v{{ appInfo.lxmf_version }}
+
+
+
+
+ RNS
+
+
+
+
+ Reticulum Network Stack
+
+
+ v{{ appInfo.rns_version }}
+
+
+
+
+
+
+ {{ $t("about.other_core_components", "Other Core Components") }}
+
+
+
+
+ LXST
+ v{{ appInfo.lxst_version }}
+
+
+ Python
+ v{{ appInfo.python_version }}
+
+
+ Electron
+ v{{ electronVersion }}
+
+
+ Chrome
+ v{{ chromeVersion }}
+
+
+ Node
+ v{{ nodeVersion }}
+
+
+
+
+ {{ $t("about.backend_dependencies") }}
+
+
+
+
+ {{
+ name.replace("_", " ")
+ }}
+ v{{ version }}
+
+
@@ -187,6 +390,48 @@
+ {{ backupMessage }}
{{ backupError }}
+ Snapshots
+
+
+
+
+
+
+
+
+
+ {{ snapshot.name }}
+ {{ formatBytes(snapshot.size) }} • {{ snapshot.created_at }}
+
+
+ {{ snapshotMessage }}
+ {{ snapshotError }}
+
Restore
@@ -304,6 +549,33 @@
+
+
+
+
+
+
+ Electron Resources
+
+
+
+ {{ $t("about.live") }}
+
+
+
+
+
+ Private Memory
+ {{ formatBytes(electronMemoryUsage.private * 1024) }}
+
+
+ Resident Set
+
+ {{ formatBytes(electronMemoryUsage.residentSet * 1024) }}
+
+
-
+
+
+
-
-
-
+
-
-
+
+
- + {{ selectedNode.node_name }} +
+
+ {{ selectedNode.archives.length }}
+
-
- {{ $t("app.archives") }}
-- {{ $t("archives.description") }} -
+ + +
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+ {{ $t("archives.loading") }}
-
+
-
+
-
-
- - {{ $t("archives.no_archives_found") }} -
-- {{ searchQuery ? $t("archives.adjust_filters") : $t("archives.browse_to_archive") }} -
-
-
-
-
-
-
+
-
-
-
- {{ group.archives.length }}
- {{ group.archives.length === 1 ? $t("archives.page") : $t("archives.pages") }}
-
-
- - {{ group.node_name }} -
-- {{ group.destination_hash.substring(0, 16) }}... -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - {{ archive.page_path || "/" }} -
-
-
-
-
-
-
-
-
-
-
- {{ $t("archives.view") }}
-
-
+
+
+
+ Viewing Archive
+ {{ viewingArchive.page_path || "/" }}
+
+
+
+
-
-
- {{
- wasDeclined
- ? $t("call.call_declined")
- : isEnded
- ? $t("call.call_ended")
- : activeCall.is_voicemail
- ? $t("call.recording_voicemail")
- : activeCall.status === 6
- ? $t("call.active_call")
- : $t("call.call_status")
- }}
-
+
+
- {{
- $t("archives.showing_range", {
- start: pagination.total_count > 0 ? (pagination.page - 1) * pagination.limit + 1 : 0,
- end: Math.min(pagination.page * pagination.limit, pagination.total_count),
- total: pagination.total_count,
- })
- }}
+
+
@@ -190,34 +184,45 @@
import MaterialDesignIcon from "../MaterialDesignIcon.vue";
import Utils from "../../js/Utils";
import MicronParser from "micron-parser";
-import CardStack from "../CardStack.vue";
+import ArchiveSidebar from "./ArchiveSidebar.vue";
export default {
name: "ArchivesPage",
components: {
MaterialDesignIcon,
- CardStack,
+ ArchiveSidebar,
},
data() {
return {
archives: [],
- searchQuery: "",
isLoading: false,
- searchTimeout: null,
muParser: new MicronParser(),
+ selectedNodeHash: null,
+ viewingArchive: null,
+ isSidebarHidden: false,
+ renderedContent: "",
+ searchQuery: "",
+ selectedArchives: [],
pagination: {
page: 1,
- limit: 15,
- total_count: 0,
- total_pages: 0,
+ limit: 500, // Reduced from 1000 to improve initial load
},
};
},
computed: {
+ selectedNode() {
+ if (!this.selectedNodeHash) return null;
+ return this.groupedArchives.find((g) => g.destination_hash === this.selectedNodeHash);
+ },
+ isAllSelected() {
+ if (!this.selectedNode || this.selectedNode.archives.length === 0) return false;
+ return this.selectedNode.archives.every((a) => this.selectedArchives.includes(a.id));
+ },
groupedArchives() {
+ // Optimization: Use a simple object for grouping
const groups = {};
-
- for (const archive of this.archives) {
+ for (let i = 0; i < this.archives.length; i++) {
+ const archive = this.archives[i];
const hash = archive.destination_hash;
if (!groups[hash]) {
groups[hash] = {
@@ -229,24 +234,32 @@ export default {
groups[hash].archives.push(archive);
}
- // sort each group by date
- const grouped = Object.values(groups).map((group) => ({
- ...group,
- archives: group.archives.sort((a, b) => {
- const dateA = new Date(a.created_at);
- const dateB = new Date(b.created_at);
- return dateB - dateA;
- }),
- }));
-
- // sort groups by the date of their most recent archive
- return grouped.sort((a, b) => {
+ return Object.values(groups).sort((a, b) => {
+ // Sort by latest archive date
const dateA = new Date(a.archives[0].created_at);
const dateB = new Date(b.archives[0].created_at);
return dateB - dateA;
});
},
},
+ watch: {
+ groupedArchives(newVal) {
+ if (!this.selectedNodeHash && newVal.length > 0 && window.innerWidth >= 640) {
+ this.selectedNodeHash = newVal[0].destination_hash;
+ }
+ },
+ viewingArchive(newVal) {
+ if (newVal) {
+ // Defer heavy rendering to next tick or use a small delay to prevent UI freezing
+ this.renderedContent = "Rendering...";
+ setTimeout(() => {
+ this.renderedContent = this.renderFullContent(newVal);
+ }, 10);
+ } else {
+ this.renderedContent = "";
+ }
+ },
+ },
mounted() {
this.getArchives();
},
@@ -256,34 +269,103 @@ export default {
try {
const response = await window.axios.get("/api/v1/nomadnet/archives", {
params: {
+ page: 1,
+ limit: 500,
q: this.searchQuery,
- page: this.pagination.page,
- limit: this.pagination.limit,
},
});
this.archives = response.data.archives;
- this.pagination = response.data.pagination;
} catch (e) {
console.error("Failed to load archives:", e);
} finally {
this.isLoading = false;
}
},
- onSearchInput() {
- this.pagination.page = 1; // reset to first page on search
+ onSearchQueryChange(query) {
+ this.searchQuery = query;
+ // Debounce search
clearTimeout(this.searchTimeout);
this.searchTimeout = setTimeout(() => {
this.getArchives();
}, 300);
},
- async changePage(page) {
- this.pagination.page = page;
- await this.getArchives();
- // scroll to top of content
- const contentElement = document.querySelector(".overflow-y-auto");
- if (contentElement) contentElement.scrollTop = 0;
+ onNodeSelect(node) {
+ this.selectedNodeHash = node.destination_hash;
+ this.selectedArchives = [];
+ // On desktop, auto-select latest archive. On mobile, just show the list.
+ if (window.innerWidth >= 640 && node.archives && node.archives.length > 0) {
+ this.viewingArchive = node.archives[0];
+ } else {
+ this.viewingArchive = null;
+ }
+ },
+ toggleSelectAll() {
+ if (this.isAllSelected) {
+ this.selectedArchives = [];
+ } else if (this.selectedNode) {
+ this.selectedArchives = this.selectedNode.archives.map((a) => a.id);
+ }
+ },
+ async deleteSelected() {
+ if (this.selectedArchives.length === 0) return;
+
+ if (!confirm(`Are you sure you want to delete ${this.selectedArchives.length} selected snapshots?`)) {
+ return;
+ }
+
+ try {
+ await window.axios.delete("/api/v1/nomadnet/archives", {
+ data: { ids: this.selectedArchives },
+ });
+
+ // Remove from local list
+ this.archives = this.archives.filter((a) => !this.selectedArchives.includes(a.id));
+ this.selectedArchives = [];
+
+ if (this.viewingArchive && !this.archives.find((a) => a.id === this.viewingArchive.id)) {
+ this.viewingArchive = null;
+ }
+
+ // If current node has no more archives, deselect it
+ if (this.selectedNode && this.selectedNode.archives.length === 0) {
+ this.selectedNodeHash = null;
+ }
+ } catch (e) {
+ console.error("Failed to delete archives:", e);
+ alert("Failed to delete snapshots. Please try again.");
+ }
+ },
+ async deleteArchive(archive) {
+ if (!confirm("Are you sure you want to delete this snapshot?")) {
+ return;
+ }
+
+ try {
+ await window.axios.delete("/api/v1/nomadnet/archives", {
+ data: { ids: [archive.id] },
+ });
+
+ // Remove from local list
+ this.archives = this.archives.filter((a) => a.id !== archive.id);
+ this.selectedArchives = this.selectedArchives.filter((id) => id !== archive.id);
+
+ if (this.viewingArchive?.id === archive.id) {
+ this.viewingArchive = null;
+ }
+
+ // If current node has no more archives, deselect it
+ if (this.selectedNode && this.selectedNode.archives.length === 0) {
+ this.selectedNodeHash = null;
+ }
+ } catch (e) {
+ console.error("Failed to delete archive:", e);
+ alert("Failed to delete snapshot. Please try again.");
+ }
},
viewArchive(archive) {
+ this.viewingArchive = archive;
+ },
+ openInNomadnet(archive) {
this.$router.push({
name: "nomadnetwork",
params: { destinationHash: archive.destination_hash },
@@ -296,94 +378,75 @@ export default {
formatDate(dateStr) {
return Utils.formatTimeAgo(dateStr);
},
- renderPreview(archive) {
+ renderFullContent(archive) {
if (!archive.content) return "";
- // limit content for preview
- const previewContent = archive.content.substring(0, 500);
-
// convert micron to html if it looks like micron or ends with .mu
if (archive.page_path?.endsWith(".mu") || archive.content.includes("`")) {
try {
- return this.muParser.convertMicronToHtml(previewContent);
- } catch {
- return previewContent;
+ // Optimization: check if content is extremely large and maybe simplify rendering
+ // For now, just catch potential parser errors
+ return this.muParser.convertMicronToHtml(archive.content);
+ } catch (e) {
+ console.error("Micron parsing failed", e);
+ return archive.content;
}
}
- return previewContent;
+ // otherwise, we will just serve the raw content, making sure to prevent injecting html
+ return archive.content
+ .replace(/&/g, "&")
+ .replace(//g, ">")
+ .replace(/"/g, """)
+ .replace(/'/g, "'");
},
},
};
diff --git a/meshchatx/src/frontend/components/call/CallOverlay.vue b/meshchatx/src/frontend/components/call/CallOverlay.vue
index be740ad..61cddda 100644
--- a/meshchatx/src/frontend/components/call/CallOverlay.vue
+++ b/meshchatx/src/frontend/components/call/CallOverlay.vue
@@ -11,19 +11,36 @@
class="size-2 rounded-full"
:class="isEnded || wasDeclined ? 'bg-red-500' : 'bg-green-500 animate-pulse'"
>
+
+
-
-
-
- {{
- $t("archives.page_of", {
- page: pagination.page,
- total_pages: pagination.total_pages,
- })
- }}
-
-
+
+
+
Select a snapshot to view
+
+ REC
+
@@ -88,17 +95,24 @@
+
+
{{ $t("call.call_declined") }}
{{ $t("call.call_ended") }}
+
+
+ {{ initiationStatus }}
+
+
{{ elapsedTime }}
@@ -178,7 +198,7 @@
: $t('call.hangup_call')
"
class="p-2.5 rounded-full bg-red-600 text-white hover:bg-red-700 shadow-lg shadow-red-600/30 transition-all duration-200"
- @click="hangupCall"
+ @click="hangupCall(null)"
>
+
+
{{ activeCall.remote_identity_name || $t("call.unknown") }}
@@ -260,12 +287,13 @@
diff --git a/meshchatx/src/frontend/components/call/CallPage.vue b/meshchatx/src/frontend/components/call/CallPage.vue
index e4da0f5..cfd46c6 100644
--- a/meshchatx/src/frontend/components/call/CallPage.vue
+++ b/meshchatx/src/frontend/components/call/CallPage.vue
@@ -64,12 +64,23 @@
>
{{ $t("call.ringtone") }}
+
+
+
@@ -196,7 +259,7 @@
+
+ Recording
+
+
+
+
+ {{ initiationStatus }}
+
+
+
Duration: {{ callDuration }}
+
+
+
+
-
+
+
+
+
+
+
+
+ {{ $t("call.default_quality") }}
+
+
+
-
@@ -617,7 +710,7 @@
@@ -837,6 +930,67 @@
class="block w-full rounded-lg border-0 py-2 text-gray-900 dark:text-white shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-zinc-800 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-zinc-900"
placeholder="Enter greeting text..."
>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This text will be converted to speech using eSpeak NG. @@ -1016,32 +1170,20 @@
-
-
-
@@ -1077,10 +1219,17 @@
>
+
+
+
Call Back
+
+