docs(quick-260729-fw7): mesh hop graphic redesign — summary + state
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
archipelago
parent
cb58a06d4b
commit
5bffba034e
@ -23,7 +23,7 @@ See: .planning/PROJECT.md (updated 2026-07-29)
|
||||
Phase: 1 of 8 (Federation & Mesh Hardening)
|
||||
Plan: 0 of TBD in current phase
|
||||
Status: Ready to plan
|
||||
Last activity: 2026-07-29 — Inserted Phase 1 (Federation & Mesh Hardening) and Phase 2 (UI Performance) per user priority; prior phases renumbered 3–8
|
||||
Last activity: 2026-07-29 — Completed quick task 260729-fw7: mesh hop graphic redesign (branded HopVizModal, vertical mobile layout)
|
||||
|
||||
Progress: [░░░░░░░░░░] 0%
|
||||
|
||||
@ -70,6 +70,12 @@ None yet.
|
||||
- [Phase 6] Strengthened ADR-009 validation may reject existing catalog apps — audit manifests before enforcement lands
|
||||
- [Global] Live OTA fleet: deploy to the dev pair before any OTA; gate re-runs required after orchestrator changes; some verification is user/hardware-gated (radios, on-device tests)
|
||||
|
||||
### Quick Tasks Completed
|
||||
|
||||
| # | Description | Date | Commit | Directory |
|
||||
|---|-------------|------|--------|-----------|
|
||||
| 260729-fw7 | improve mesh message hop graphic/animation: balanced desktop sizing, vertical mobile layout, archipelago branding | 2026-07-29 | ac09fc5d | [260729-fw7-improve-mesh-message-hop-graphic-animati](./quick/260729-fw7-improve-mesh-message-hop-graphic-animati/) |
|
||||
|
||||
## Deferred Items
|
||||
|
||||
| Category | Item | Status | Deferred At |
|
||||
|
||||
@ -0,0 +1,85 @@
|
||||
---
|
||||
phase: quick-260729-fw7
|
||||
plan: 01
|
||||
subsystem: neode-ui/mesh
|
||||
tags: [frontend, mesh, hop-viz, branding, animation, responsive]
|
||||
requires: []
|
||||
provides:
|
||||
- HopVizModal.vue branded hop-route visualization component
|
||||
affects:
|
||||
- neode-ui mesh chat (transport pill / ⋯ route modal)
|
||||
tech-stack:
|
||||
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
|
||||
key-files:
|
||||
created:
|
||||
- neode-ui/src/views/mesh/HopVizModal.vue
|
||||
modified:
|
||||
- neode-ui/src/views/Mesh.vue
|
||||
- neode-ui/src/views/mesh/mesh-styles.css
|
||||
decisions:
|
||||
- "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"
|
||||
metrics:
|
||||
duration: ~15m
|
||||
completed: 2026-07-29
|
||||
status: 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 |
|
||||
| ---- | ------ | ----------- |
|
||||
| 1–3 | `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
|
||||
Loading…
x
Reference in New Issue
Block a user