Files
archy/.planning/quick/260729-fw7-improve-mesh-message-hop-graphic-animati/260729-fw7-SUMMARY.md
T

5.4 KiB
Raw Blame History

phase, plan, subsystem, tags, requires, provides, affects, tech-stack, key-files, decisions, metrics, status
phase plan subsystem tags requires provides affects tech-stack key-files decisions metrics status
quick-260729-fw7 01 neode-ui/mesh
frontend
mesh
hop-viz
branding
animation
responsive
HopVizModal.vue branded hop-route visualization component
neode-ui mesh chat (transport pill / ⋯ route modal)
added patterns
Self-contained Teleport-to-body modal component with scoped styles
EQ-segment ring motif (ScreensaverRing technique) reused for endpoint medallions
CSS custom property accent theming (--hop-accent) derived per transport in JS
created modified
neode-ui/src/views/mesh/HopVizModal.vue
neode-ui/src/views/Mesh.vue
neode-ui/src/views/mesh/mesh-styles.css
Label strings (transportLabel/signalQualityLabel/timeAgo) passed as props from Mesh.vue — no logic duplication
hopVizHops moved into the component (derived from peer.hops); hopVizMsg/hopVizPeer state stays in Mesh.vue
web/dist/neode-ui NOT committed — web/ is gitignored (.gitignore:74); build output is intentionally untracked in this repo
duration completed
~15m 2026-07-29
complete

Quick Task 260729-fw7: Mesh Hop-Route Visualization Redesign Summary

One-liner: Replaced the cramped 420px inline hop-viz modal with a self-contained branded HopVizModal.vue — 560px balanced desktop layout with EQ-segment-ringed glowing medallions, per-transport accent track with animated traveling packet and staggered relay markers, flipping to a vertical sender-top→recipient-bottom chain below 560px.

What Was Built

  • neode-ui/src/views/mesh/HopVizModal.vue (new, ~430 lines): Teleport-to-body modal, min(560px, 94vw) glass panel, max-height: 90vh scrollable.
    • Montserrat transport-colored title; --hop-accent / --hop-accent-soft / --hop-accent-faint CSS vars derived from msg.transport matching the chat pill colors exactly (meshtastic #3eb489, meshcore #fb923c, reticulum #60a5fa, lora #f59e0b, fips #a78bfa, tor #818cf8, fallback orange).
    • Endpoint medallions: 72px (56px mobile), island glyph on an accent-tinted disc with glow, ringed by 14 EQ segments using the ScreensaverRing rotate+translateY+scaleY-pulse technique.
    • Track: accent gradient line, relay markers positioned fractionally along it — mini 3-bar EQ clusters for radio hops (min(hops, 6)), 🧅 ×3 for Tor, none for FIPS/unknown (unknown dims the line). Animated white/accent glowing packet travels sender→recipient on a 2.2s loop.
    • Per-transport labels preserved verbatim: "direct radio link" / "N hops" / "3 anonymous relays" / "FIPS overlay · direct peer-to-peer" / "transport wasn't recorded".
    • Staggered entrance (0.05/0.35/0.65s), metadata as glass chips (signal + SNR/RSSI + disclaimer note; E2E badge + delivered ✓✓ + time).
    • @media (max-width: 560px): chain flips to column, track becomes a vertical line, packet animates top→bottom (hopviz-packet-y), same DOM.
    • @media (prefers-reduced-motion: reduce): all loops and entrance animations disabled, packet hidden.
  • Mesh.vue: inline 50-line Teleport block replaced by <HopVizModal>; label helpers passed as computed props; hopVizHops() removed (moved into component).
  • mesh-styles.css: all .mesh-hopviz-* rules and their keyframes/reduced-motion block deleted; .mesh-chat-transport-clickable, .mesh-transport-modal-* (shared with send-transport + image-quality modals), and .mesh-chat-more-btn untouched (12 shared-class occurrences verified intact).

Commits

Task Commit Description
13 ac09fc5d feat(mesh): redesign hop-route visualization — branded, animated, vertical on mobile

Verification

  • npx vue-tsc --noEmit → exit 0.
  • npm run build → success; bundle guard (CLAUDE.md silent-no-op rule): hopviz-packet and hopviz-medallion found in web/dist/neode-ui/assets/Mesh-D2ImmPoh.js + Mesh-Dy7zKwro.css; old mesh-hopviz-chain string absent from both source and bundle.
  • Task 2 grep checks: max-width: 560px + column present in HopVizModal.vue.
  • Submodule guard run before commit (no indeedhub paths staged); no file deletions in the commit.

Deviations from Plan

1. [Rule 3 - Blocking] web/dist/neode-ui not staged/committed

  • Found during: Task 3
  • Issue: Plan said to stage web/dist/neode-ui, but web/ is gitignored (.gitignore:74) and untracked — build output is intentionally excluded from the repo (release tarballs are built from it at ship time).
  • Fix: Committed the three source files only; fresh build exists on disk in web/dist/neode-ui/ and was grep-verified.

2. Push deferred to orchestrator — plan Task 3 said git push gitea-ai main, but the executor constraints state the orchestrator handles pushing; not pushed here.

Known Stubs

None — no placeholder text, hardcoded-empty data paths, or unwired components introduced.

Human Verification Pending

On the dev preview (npm run dev or :8100), open a mesh chat and click a message's transport pill: desktop shows the wide medallion+packet layout; shrinking below 560px flips it vertical. Confirm brand feel (glass, accent glow, EQ motif).

Self-Check: PASSED

  • FOUND: neode-ui/src/views/mesh/HopVizModal.vue
  • FOUND: commit ac09fc5d on main
  • FOUND: hopviz strings in web/dist/neode-ui/assets/ (fresh build)
  • CONFIRMED: 0 occurrences of mesh-hopviz in Mesh.vue and mesh-styles.css