Renaming the device in Settings changed the firmware's node name at once,
but mc-webui kept its cached copy until the next reconnect. Own messages
were stored under the old name, and their raw_packet snapshot and echo
candidates were built from it: Resend then broadcast a second packet under
the old name, and messages sent after the rename never got a repeater
badge. Open pages kept the old name in the navbar and on each message
sent, even across a container restart, until a reload.
set_param('name') now cuts the name to the firmware's 31 bytes on a
character boundary (the firmware cuts mid-character, the lib drops the
fragment on read-back), reads SELF_INFO back under the send lock - also
when the command failed or its reply was lost - and adopts the reported
name through _set_device_name(), which _connect() uses too. That updates
runtime_config and emits device_name on /chat; the page applies it to the
navbar, MC_CONFIG.deviceName and the mention rule, and loadStatus() catches
up from /api/status for a page that missed the event.
Also: send_channel_message reads the name under the send lock; the
self-echo guard no longer compares the sender's name, so a resend of a
message from before a rename is still recognised; get_device_info no
longer caches an ERROR reply as SELF_INFO; the observer reloads its MQTT
clients on a rename; Settings sends the name only when it changed.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
On a phone the map view gives the map a fixed ~45vh strip under the
message list, which is too small to read a multi-hop route on. A control
in the map's top-right corner now expands #paMap over the frame and asks
the parent to hide the modal header, so the map really does get the whole
screen; the same button becomes a labelled Close, and Escape works too.
CSS overlay rather than the Fullscreen API: the panel runs in an iframe
and inside the Android WebView, where requestFullscreen on a plain
element is unreliable. The position rule needs !important — Leaflet
writes position:relative on the container as an inline style.
Verified live at 412x915 and 1440x900, both themes, in the modal, as the
standalone page and through a chat deep link: the map fills the frame,
the drawn route and the panned viewport survive both transitions, and no
console errors.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
mc-webui has no login, which is fine on a LAN and not fine once the
address is handed to testers: they assume the node is theirs and rename
it, and the console is right there for anyone curious enough to type
into it.
MC_DEMO=true refuses everything that reconfigures the radio, destroys
data, reaches other people's repeaters, rebuilds the containers,
publishes to an external broker, or hands out a secret. Reading and
sending messages keep working, so the instance is still worth visiting.
The guard is default-deny: an api_bp.before_request hook refuses every
non-GET unless it is on a short allowlist, so an endpoint added later is
locked without touching this module. That mattered — six mutating
endpoints already had no frontend caller and would never have made a
hand-written blacklist. A small read denylist covers the GETs that leak
(repeater passwords, backup download, capture download, /api/logs),
which the write guard never sees.
Two paths bypass the HTTP layer and are closed separately: the console
is a Socket.IO event, not a route, so it is checked against a read-only
command set; the log viewer is refused at the connect handshake.
Access is kept two ways. MC_DEMO_TRUSTED_NETS unlocks by CIDR, and
MC_DEMO_UNLOCK_CODE unlocks by a code typed once in Settings and held in
an HMAC cookie for 30 days — stateless, and deliberately not Flask's
session, whose SECRET_KEY is a hardcoded public constant.
The trap the network list walks into: published through a tunnel, every
visitor arrives from the tunnel's address, and if the tunnel runs on the
LAN then trusting the LAN unlocks the instance for the whole internet.
An address arriving with a proxy header is therefore not matched unless
MC_TRUST_PROXY is on, and startup logs report the resulting shape.
Frontend is advisory only: demo-lock.js loads from _head_i18n.html so it
reaches all eight entry points including the six iframes, greys out
[data-demo-lock] rather than hiding it (the instance exists to show the
app off), re-applies via MutationObserver for JS-rendered buttons, and
turns any 403 demo_locked into a toast.
Verified on the local container: the rename, reboot, updater, vacuum,
cleanup and the leaky GETs all 403; sending, read markers and ordinary
reads pass; `set name` is refused over the console socket while `infos`
still answers; unlock/lock round-trips. 86 new unit tests, en/pl at 100%.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Some faults cannot be diagnosed from a screenshot on a server we have no
access to. The one that prompted this: a sent channel message gets no
repeater badge, and nothing in the database distinguishes "nobody in
earshot repeated it" from "the repeat came back over the air but the
firmware dropped the RX-log frame before the app ever saw it".
Settings > Diagnostics records a bounded window into a zip: every RX-log
frame, the echo correlator's decision (with the pending-send list that
explains a non-match), what each send expected to hear back, the
application log at DEBUG, and the device's own packets.recv counter at
both ends of the window. That last comparison is the whole point - it
turns the firmware's silent 4-frame queue overflow into a measurement
instead of a hypothesis.
scripts/diag_report.py reads a capture offline and prints the verdict.
Captures can be downloaded, or uploaded to a Zipline instance once the
user pastes a token handed to them out-of-band. The URL ships as a
default; the token never does, because this repository is public.
- Hot path follows observer.py's contract: one deque append, no locks,
no I/O. The log handler uses a no-op lock object rather than
lock = None, which raises under Python 3.13's `with self.lock` in
Handler.handle() - latent on the 3.11 container, fatal on 3.13
- Caps: 5/15/30/60 min, 25 MB, 10 stored captures. All enforced by the
writer thread, so a user stop and an auto-stop finalise identically
- The capture contains the text of messages received while it runs; the
UI states this and confirms before any upload
Also drops a redundant function-local `from flask import current_app` in
get_status(): it shadowed the module-level import for the whole function
and broke /api/status as soon as anything referenced current_app above
it. Found by the capture tool, in its own change.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Android's WebView scales text by the system font-size setting; Chrome
ignores it and uses its own accessibility preference. With the system
font one step above default, the wrapper rendered every string ~20%
larger than the website at an identical layout width -- the brand
truncated to "mc-web...", message bodies wrapped early, and the footer
broke apart. Pin textZoom to 100 so the wrapper matches the browser.
The footer was fragile independently of that. Status, region badge and
the "Updated:" time sat in a justify-content-between row with no wrap,
so once they exceeded the width each item broke internally instead of
the row reflowing -- a dot with "Polaczono" stranded below it, a time
split from its own label. Longer translated labels ("Aktualizacja:" vs
"Updated:") hit this well before English did. Adding flex-wrap plus
text-nowrap on the items makes them reflow as whole units; .badge
already carries white-space: nowrap, so it needs nothing.
Verified in Chrome against the local container, pl locale, region badge
forced visible, at 412/360/320 CSS px and with a 1.2x text-only override
that reproduces textZoom: before/after screenshots show the reported
breakage and a clean two-line reflow respectively, with no horizontal
overflow. At full width the change is a no-op.
Rides along in the already-pending, never-built wrapper 1.2.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Covers the navbar, the offcanvas main menu, and index.html: the channel
sidebar, filter bar, composer, status bar and the FAB column, plus the
six fullscreen panel modals, whose headers now reuse each panel's own
title key (dm.title, contacts.title, console.title, repeaters.title,
pa.title, logs.title) instead of repeating the words.
The Settings modal (base.html ~458-1147) and the other modals in
base.html are untouched - stages 8 and 7b.
Also translated in app.js: updateStatus(), updateLastRefresh(), the FAB
collapse toggle, the filter bar's "no matches" panel and
updateRegionIndicator(). The rest of app.js stays for stage 9; the line
drawn here is "does it overwrite a string index.html just got a key
for". Without them the status bar renders Polish server-side and flips
back to English a second later, which would make the slice impossible to
verify - a miss and a stage-9 leftover look identical.
"Filter messages" (menu) and "Filter Messages" (FAB) keep separate keys
even though the Polish is identical, so this commit changes no English
text, only where it lives.
Catalog: 526 -> 573 keys, pl at 100%.
Verified with i18n-diff.js and a new i18n-stage7a-chrome.js that opens
the offcanvas menu at both viewports - like the DM modals, a closed
offcanvas is invisible to the plain diff. Two tooling fixes came out of
it, both in F:\tmp\pwverify:
- i18n-diff.js checked visibility on the text node's parent only, so
every closed modal's contents landed in the report: 275 flagged lines
on the main chat, 13 after walking the ancestor chain. It was noise,
never a false pass, but it is the kind of noise that trains you to
skim the list.
- browser.js now centralises the Chrome launch. The translate bubble was
held off by one flag copy-pasted into each script; it is now flags plus
a persistent profile with translation disabled in Preferences, which is
the part that survives Chrome renaming the feature.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Clicking a route in the chat path popup now opens Path Analyzer on the
Map view with that message selected and that exact echo path drawn,
instead of copying the route to the clipboard. Copy stays available as
a small per-route clipboard icon in the popup.
Deep link flow: popup click stores {packet_hash, path hex} in
window.paDeepLink; the modal show handler builds the iframe URL with
?hash=&path=; the analyzer resolves the message after load (widening
the time range once to 7 days if needed), matches the echo by raw path
hex (fallback: shortest), and switches to the map. A plain menu open
still loads the analyzer without any deep link.
Verified live via Playwright: clicked the 3rd (non-shortest) route of a
multi-route message - the map opened with exactly that echo selected,
including the 3-to-7-day widening retry (message was 4 days old).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Full-screen iframe panel wired per the add-fullscreen-panel checklist:
- /path-analyzer Flask view + standalone template (theme bootstrap before
CSS, local vendor assets, Leaflet included for the stage-5 map view)
- path-analyzer.js: days selector (1/3/5/7), message table (time, channel,
sender, preview, copyable packet hash, hops, echo count), spinner/empty
states, local toast helpers fed from /api/ui/settings
- #pathAnalyzerModal in index.html, iframe src set on show.bs.modal for
fresh data each open; FAB button + purple gradient class
- menu entry in #mainMenu (Tools) + placement radio row in Settings ->
Appearance; registered in ITEM_PLACEMENT_DEFS/DEFAULTS (default: menu)
- style.css: #pathAnalyzerModal added to all three narrow-viewport
fullscreen-override selector lists
Verified live via Playwright at 1280px and 390px, light + dark: modal
fills the viewport exactly, placement radios move the entry both ways,
iframe reloads on every open.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Rename "meshcli Console" to "mc-webui Console" (modal title + docs).
- Drop redundant "Connected to..." messages; replace intro with a one-line "Type 'help' for available commands." hint.
- Use a teal device-name style so the header label is readable on the dark background.
- Display contact paths with commas (D1,90,05,54) instead of arrows in `contacts` and `path`, matching the standard MeshCore client.
- Fix `change_path`: previously read only args[2] after shlex split, silently writing a 1-byte path. Now joins remaining args, accepts comma/space/continuous-hex, validates hex, auto-deduces hash_size from comma-chunk length (1/2/3-byte hops), and routes through _change_path_async so path_hash_mode is set and the contacts cache is invalidated.
- Update `help` line and add a usage hint for the no-args form.
- Add capped persistent output transcript: GET/POST/DELETE /api/console/output (cap 500 entries). Console restores prior entries (faded) above a divider on open and exposes a trash button to clear it.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Lets users choose where each action appears: in the floating Quick
Access (FAB) bar or the slide-out Main Menu. Adds a "Hide Quick Access"
master switch and a per-item placement table in Settings -> Appearance.
Removes the stale "Refresh Messages" menu item (legacy of polling era,
WebSocket already covers it) and moves the Notifications toggle from
the menu to a dedicated Settings -> Notifications tab.
Each of the 11 configurable items is rendered in both locations;
applyItemPlacements() toggles d-none based on localStorage. Badges for
DM unread and pending contacts propagate to the Main Menu copies so
they stay in sync regardless of placement.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Final slice — small but completes the feature.
- index.html: add #regionIndicator pill to the chat status bar, inline
with the connection-status dot. Hidden by default; click opens the
region picker for the current channel.
- app.js: loadChannelScopes() fetches /api/channels/scopes at page init
(right after loadChannels). updateRegionIndicator() toggles the pill
based on currentChannelIdx + window.channelScopes and is called on
every successful loadMessages + after saveChannelScope.
- DM view deliberately untouched — region scope applies to flooded
channel sends only, not DMs.
- Add Settings quick-access button to both main chat and DM views
- Make FAB container draggable via toggle button with position saved to localStorage
- Add button size and spacing sliders in Settings > Appearance tab
- Use CSS custom properties for dynamic FAB sizing
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Create theme.css with CSS custom properties for light/dark themes
- Dark theme inspired by demo landing page (deep navy palette)
- Update style.css: replace ~145 hardcoded colors with CSS variables
- Extract inline styles from index.html, contacts.html, dm.html to style.css
- Add Appearance tab in Settings modal with theme selector
- Bootstrap 5.3 data-bs-theme integration for native dark mode
- Theme persisted in localStorage, applied before CSS loads (no FOUC)
- Console and System Log panels unchanged (already dark themed)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
On screens >= 992px (lg breakpoint), show a persistent sidebar panel:
- Group chat: channel list with unread badges, active highlight, muted state
- DM: conversation/contact list with search, unread dots, type badges
- Desktop contact header with info button replaces mobile selector
- Mobile/narrow screens unchanged (dropdown/top selector still used)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Changed from target="_blank" link to fullscreen modal with iframe,
matching the pattern used by Console, DM, and Contacts modals.
Iframe loads on open and clears on close to manage WebSocket lifecycle.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Search, backup, stats endpoints used current_app.config.get('DEVICE_MANAGER')
which doesn't exist — replaced with _get_dm()/_get_db() helpers
- /api/device/info used old v1 CLI — replaced with DeviceManager.get_device_info()
returning structured dict instead of string (fixes map own device marker)
- Moved search button from navbar to FAB menu (between filter and DM buttons)
- Bump SW cache to v7
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add person icon button in filter bar that inserts the current device
name into the search field, for filtering own messages
- DM filter bar already benefits from the CSS sibling push-down rule
added in previous commit (same class names used)
- Add collapsible FAB toggle to DM view, same pattern as channel chat
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add collapsible FAB container with chevron toggle button to
temporarily hide floating action buttons that overlap messages
- Make filter bar push messages down instead of overlaying the first
matched message (CSS sibling selector adds padding-top)
- Add @mentions autocomplete to filter search bar - typing @ shows
contact list dropdown, selecting inserts plain name (not @[] format)
so all messages from/mentioning that user are found
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add filter-utils.js with diacritic-insensitive search and text highlighting
- Add FAB filter button (gray funnel icon) to channel chat and DM
- Filter bar slides in as overlay at top of chat area
- Real-time filtering with debounce (150ms) as user types
- Matched text highlighted with yellow background
- Support for Polish characters (wol matches wół)
- Keyboard shortcuts: Ctrl+F to open, Escape to close
- Match counter shows X / Y filtered messages
- Filter persists during auto-refresh
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Semi-transparent button appears when user scrolls up
- Positioned at bottom-right of messages container
- Clicking scrolls to latest messages and hides button
- Smooth fade-in/out animation
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add Resend button under own messages in channel chat and DM
(allows easy re-sending of failed messages)
- Change channel chat limit from 140 to 135 bytes
- Change DM limit from 140 to 150 bytes
(experimentally verified Meshcore limits)
- Remove misleading Hops info from DM message bubbles
- Update README with new byte limits
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
When user types @ in the message input, a dropdown appears with contacts
list. The list filters as user types (matches any part of name, not just
prefix). User can navigate with arrow keys, select with Enter/Tab/click,
or dismiss with Escape.
- Add mentions popup HTML to index.html
- Add mentions CSS styling (responsive, scrollable)
- Add JavaScript logic: detection, filtering, keyboard nav, insertion
- Contacts cached for 60s, loaded on input focus
- Closes emoji picker when mentions opens (avoid overlap)
- Inserts selected contact as @[username] format
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add Flask-SocketIO backend with gevent for real-time communication
- Create chat-style console UI showing only user's command responses
- WebSocket commands tracked separately from HTTP API (ws_ prefix)
- Console accessible from main menu as fullscreen modal
- Command history navigation with arrow keys
- Auto-reconnection on disconnect
- Update service worker cache for offline support
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Complete the offline support implementation by hosting emoji-picker-element locally, eliminating the last external CDN dependency. Application now works 100% offline without any internet connection.
Changes:
- Download and host emoji-picker-element 1.28.1 locally (~100 KB)
- index.js, picker.js, database.js
- Download and host emoji data JSON (~429 KB)
- en/emojibase/data.json with full emoji database
- Update index.html and dm.html:
- Replace CDN emoji picker import with local version
- Also migrate Bootstrap CSS/JS to local in dm.html (was missed before)
- Configure emoji picker to use local data source in app.js and dm.js
- Set picker.dataSource to local JSON path
- Update Service Worker (v2 → v3):
- Add emoji picker files to pre-cache list
- Total offline cache size: ~1.2 MB
- Update documentation:
- README.md: Add emoji picker to offline support features
- CLAUDE.md: Document emoji picker implementation and file structure
Total offline package breakdown:
- Bootstrap CSS/JS: ~307 KB
- Bootstrap Icons: ~398 KB
- Emoji Picker: ~100 KB
- Emoji Data: ~429 KB
- Total: ~1.2 MB
Benefits:
- Zero external dependencies (no CDN calls)
- Full emoji picker functionality offline
- Faster page load (no external requests)
- Perfect for air-gapped mesh network deployments
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Add badge for pending contacts on Contact Management FAB button (orange)
- Move DM badge from notification bell to Direct Messages FAB button (green)
- Add universal updateFabBadge() function for all FAB badges
- Add updatePendingContactsBadge() function with localStorage type filter support
- Update badges every 10 seconds with auto-refresh
- Update badges when modals are closed
Frontend changes:
- New CSS classes: .fab-badge, .fab-badge-pending, .fab-badge-dm
- position: relative added to .fab for badge positioning
- Removed DM badge code from notification bell
- Added modal event handlers for badge updates
Backend: No changes (uses existing /api/contacts/pending endpoint with types parameter)
This improves UX by showing notification counts directly on relevant FAB buttons
instead of crowding the notification bell. DM badge moved from bell to DM button,
and new pending contacts badge added to Contact Management button.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Two critical fixes:
1. DM Badge Sync Issue:
- After closing DM modal, badge showed correct count for 10 seconds
- Then auto-refresh (running every 10s) used stale dmLastSeenTimestamps
- Solution: Call loadDmLastSeenTimestampsFromServer() before updating badge
- This ensures app.js auto-refresh uses current server state
2. Android PWA Viewport Corruption:
- Viewport corrupted on F5 refresh in Android PWA mode
- Status bar content hidden under system UI
- Solution: Force viewport recalculation on page load
- Scrolls to top and forces reflow after 100ms delay
Testing needed on Android PWA to verify both fixes work correctly.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Changed DM badge update logic to use /api/dm/conversations endpoint
instead of /api/dm/updates?last_seen={} which was causing incorrect
unread counts (showing 99+, then 2, when there should be 0).
The new approach:
- Fetches all conversations with their unread counts
- Sums up unread messages across all conversations
- Updates badge without full page reload (avoiding viewport corruption)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Replace full page reload with targeted badge update when DM modal closes.
This prevents the viewport corruption issue that was reintroduced by
window.location.reload() in the previous commit.
Problem:
- Previous solution used window.location.reload() to update badges
- This caused viewport corruption (status bar hidden under system UI)
- Same issue we solved by using modals instead of navigation
New solution:
- Fetch latest unread counts from /api/dm/updates when modal closes
- Update only the green DM badge (notification-badge-dm) on notification bell
- No page reload = no viewport corruption
- Keeps modal solution benefits intact
Changes:
- Remove window.location.reload() from hidden.bs.modal event listener
- Add async fetch to /api/dm/updates endpoint
- Update notification-badge-dm element directly using DOM manipulation
- Handle badge creation/update/hiding based on unread count
Result:
- DM badges update correctly after closing modal
- No viewport corruption
- Fast, smooth user experience
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add event listener for DM modal close event that reloads the main page.
This ensures that unread DM badges are properly updated after user reads
messages in the DM modal.
Previously, when using the "Home" button, the page would reload via navigateTo('/').
Now with the "Close" button, the modal just closes without reloading, leaving
stale unread counts in the notification badges.
Changes:
- Add 'hidden.bs.modal' event listener to dmModal
- Call window.location.reload() when DM modal is closed
- This updates all unread badges on the main page
Note: This should not cause viewport corruption issues because:
1. Modal is fully closed before reload
2. No offcanvas or other Bootstrap components are active
3. Regular page reload, not navigation
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add custom CSS overrides to ensure fullscreen modals fill the entire viewport
without any gaps on top, left, right, or bottom edges.
Changes:
- Force modal-dialog to use 0 margin and 100vw/100vh dimensions
- Remove border and border-radius from modal-content
- Set overflow hidden on modal-body to prevent scrollbars
- Use !important to override Bootstrap default styles
This fixes the issue where modals had visible gaps on the top and left sides
while content was slightly cut off on the right and bottom edges.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
After testing the modal implementation on Android PWA, removed duplicate
navigation elements and optimized layout to maximize screen real estate.
Changes to DM modal:
- Removed navbar with back button and "DM" title (duplicates modal header)
- Moved conversation selector to top of content as clean dropdown bar
- Changed main container from dynamic height to fixed 100vh
Changes to Contact Management modals:
- Removed navbar with home button from contacts_base.html
- Removed navbar_content blocks from all contact pages (manage, pending, existing)
- Removed padding/margins from base container (px-3 py-4 → p-0)
- Removed row gutters (added g-0 class)
- Removed col width constraint (col-lg-8 mx-auto → col-12)
- Added padding back to individual page content (p-3) for readability
Changes to modal close buttons:
- Replaced small X icon (btn-close) with proper button
- Added "Close" text with X icon for better visibility on mobile
- Used btn-outline-light styling for consistency with green/blue headers
Result:
- Modals now fill entire available screen space without margins
- No duplicate headers or navigation elements
- Clearer, more intuitive close action with labeled button
- Better mobile experience with larger touch targets
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implement modal dialogs to resolve PWA viewport corruption issues on Android.
When navigating between pages using window.location.href, the viewport height
calculation becomes corrupted, causing the status bar to be hidden under system UI.
Changes:
- Add fullscreen modals for Direct Messages and Contact Management in index.html
- Configure FAB buttons to open modals instead of navigating to new pages
- Add JavaScript to reload iframe content when modals are opened (ensures fresh data)
- Remove DM and Contact Management from offcanvas menu to avoid duplication
- Both modals use iframes to embed existing /dm and /contacts/manage pages
- Modal headers styled with appropriate colors (green for DM, blue for Contacts)
This approach bypasses the viewport corruption issue since modals don't trigger
the problematic navigation flow that occurs with page changes in PWA mode.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Previous sticky bar implementation took up vertical space in layout,
making viewport issues worse. Replaced with proper floating action
buttons that don't affect layout.
Changes:
- Remove sticky bar from index.html
- Add FAB container with fixed position (no layout impact)
- Two circular buttons: DM (green) and Contacts (blue)
- position: fixed, right: 16px, top: 80px
- z-index: 900 (lower than offcanvas menu 1045)
- Beautiful gradients and shadows
- Hover/active animations (scale transform)
- Mobile responsive (smaller on <768px)
Features:
- No vertical space taken (fixed position)
- Covered by offcanvas when menu opens (z-index hierarchy)
- Always visible in corner
- Uses navigateTo() for clean navigation
Test scenario:
1. Click FAB buttons (bypass offcanvas menu completely)
2. Navigate to DM / Contact Management
3. Return to main page
4. Check if status bar corruption still occurs
If FABs work: problem is in offcanvas cleanup
If FABs fail: problem is deeper in viewport/layout
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Added semi-transparent floating buttons under navbar to test
if viewport corruption is caused by offcanvas menu or navigation itself.
Changes:
- Add floating-test-buttons div in index.html
- Two buttons: DM and Contacts (using navigateTo())
- Sticky position under navbar
- Semi-transparent background with backdrop blur
- Centered layout with gap between buttons
Test scenario:
1. Click floating buttons (bypass offcanvas menu)
2. Navigate to DM / Contact Management
3. Return to main page via Home button
4. Check if status bar is still visible
If floating buttons work correctly:
- Problem is in offcanvas menu cleanup
- Can keep these buttons as permanent quick navigation
If floating buttons also cause corruption:
- Problem is deeper (viewport/layout issue)
- Need different approach
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Change DM message input from input to textarea (rows=2) for consistency
- Increase DM form padding (p-2 → p-3) to match channel view
- Increase DM status bar padding (p-1 → p-2) with larger font
- Replace "Last refresh:" with "Updated:" in both views
- Update DM status to show connection states (Connected/Connecting/Disconnected) instead of "Ready"
- Add loadStatus() function to DM page for proper connection monitoring
- Unify message input area height and status bar appearance across both pages
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Change message byte limit from 200 to 140 bytes
- Remove keyboard hint text to save space
- Simplify navbar to show only notification bell and channel selector
- Add slide-out offcanvas menu for less-used options:
* Refresh Messages
* Manage Channels
* Message History (archive selector)
* Settings
- Increase font sizes in dropdowns and menu for better readability
- Add icons and text labels to all menu items
- Auto-close menu after selecting options
- Update clipboard API to modern navigator.clipboard with fallback
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Added a professional emoji picker widget to make it easier to insert emoji on desktop browsers where native emoji input is not readily available.
Changes:
- Added emoji-picker-element library from CDN (~50KB)
- New emoji button (😊) next to the Send button
- Full emoji picker with categories and search functionality
- Emoji inserted at cursor position in textarea
- Automatic byte counter update after insertion
- Mobile responsive: 6 columns on mobile, 8 on desktop
- Click outside to close picker
Benefits:
- Easy emoji access on Windows/Linux desktop browsers
- No need to use Win+. shortcut or copy-paste
- Professional UI with search and categories
- Still works with native emoji keyboards on mobile
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fixed mobile browser viewport height issues where status bar and hint text were hidden:
CSS changes:
- Use 'height: 100dvh' (dynamic viewport height) for mobile browsers
- Fallback to '100vh' for older browsers
- Added 'min-height: 0' to main flex container (critical for flex children)
HTML changes:
- Added 'viewport-fit=cover' to meta tag (notched displays)
- Improved flexbox structure in index.html
- Added inline 'min-height: 0' on flex-grow-1 row (prevents overflow)
The 'dvh' unit dynamically adjusts to browser chrome (URL bar) visibility,
preventing layout shifts when scrolling on mobile. The min-height: 0 fix
ensures flex children properly shrink when needed.
This should fix the issue where bottom status bar disappears on mobile
and top navbar disappears after sending a message.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Improved mobile user experience:
- Shortened hint text: 'Shift+Enter: new line, Enter: send' (was 'Press Shift+Enter for new line, Enter to send')
- Reduced form padding on mobile (0.5rem instead of default)
- Made status bar more compact on mobile (smaller padding and font)
- Better vertical space utilization on small screens
This should make the status bar visible on mobile devices and improve overall usability on phones.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implemented 200-character limit for messages due to LoRa/MeshCore constraints:
- Added maxlength=200 to textarea
- Added live character counter (0 / 200)
- Visual warnings: orange at 75%, red at 90%
- Counter updates on input, reply, and send
- Backend validation with descriptive error message
- Added technotes/limity.md documentation about MeshCore limits
Based on MeshCore LoRa payload constraints (~180-200 bytes safe limit).
This prevents message fragmentation and improves transmission reliability.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implemented core backend functionality:
- Flask application structure with blueprints
- Configuration module loading from environment variables
- MeshCore CLI wrapper with subprocess execution and timeout handling
- Message parser for .msgs JSON Lines file format
- REST API endpoints (messages, status, sync, contacts cleanup)
- HTML views with Bootstrap 5 responsive design
- Frontend JavaScript with auto-refresh and live updates
- Custom CSS styling for chat interface
API Endpoints:
- GET /api/messages - List messages with pagination
- POST /api/messages - Send message with optional reply-to
- GET /api/status - Device connection status
- POST /api/sync - Trigger message sync
- POST /api/contacts/cleanup - Remove inactive contacts
- GET /api/device/info - Device information
Features:
- Auto-refresh every 60s (configurable)
- Reply to messages with @[UserName] format
- Toast notifications for feedback
- Settings modal for contact management
- Responsive design (mobile-friendly)
- Message bubbles with sender, timestamp, SNR, hop count
Ready for testing on production server (192.168.131.80:5000)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
