Demo video#5
Merged
Merged
Conversation
- demo/hosts.js: 15 deterministic hosts (9 eth0, 6 wlan0) with real OUI MACs (Dell, Raspberry Pi, Apple, TP-Link, VMware, HP, Samsung, Synology, Intel, Cisco, Siemens), fixed IPs, silent/active flags, and firstOffset values that drive a 28-second appearance timeline - demo/simulate.js: writes neigh-eth0.json and neigh-wlan0.json to a data directory every 2 s; active-host last_seen and byte counters advance deterministically; exports runSimulation(dataDir) for use as a module and supports standalone CLI invocation - demo/server.js: Express HTTP server that serves ui/dist/, replicates the nginx /data/ autoindex JSON format, handles If-Modified-Since conditional requests, and exposes /api/whoami; also a standalone CLI - demo/record.js: Playwright orchestrator — starts server + simulation, pre-sets the splash cookie, records a 1280×720 headless Chromium session with tab-switching and search-bar gestures, saves output.webm - demo/package.json: ESM package with playwright and express deps - .gitattributes: track assets/demo.gif via Git LFS Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
On every v*.*.* tag push (after build-ui passes): 1. Build the React UI with npm (produces ui/dist/). 2. Install demo deps (playwright, express) and Playwright Chromium. 3. Run demo/record.js to produce demo/output.webm (~42 s, 1280×720). 4. Convert with ffmpeg + gifsicle to assets/demo.gif (900 px, 10 fps, 128-colour palette, lossy optimisation). 5. Check out main, git-lfs install, commit and push assets/demo.gif with [skip ci] to avoid a CI loop. The GIF is tracked by Git LFS via .gitattributes and referenced from README.md, so the dashboard demo always reflects the latest release. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
README: insert a 🎬 Demo section with assets/demo.gif (served via LFS) just before the Features section so visitors see the UI immediately. CHANGELOG: add entry under Next for the automated demo recording. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
demo/Makefile provides a local-first workflow: make record full pipeline (build UI, install deps, record, convert) make gif convert existing output.webm → assets/demo.gif make simulate run simulator standalone (Ctrl-C to stop) make serve run demo server standalone on :3737 (Ctrl-C to stop) make clean remove generated .webm files CI record-demo job now calls 'make -C demo record' instead of duplicating the individual steps, keeping the two in sync. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
If gifsicle is not installed locally, the gif target skips the optimisation step and prints an install hint. ffmpeg's palette-optimised output is a fully valid GIF regardless; gifsicle only reduces file size. CI always has gifsicle via apt-get so it is unaffected. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The gif target now installs ffmpeg and gifsicle on demand (apt-get on Linux, brew on macOS) instead of failing or skipping. CI no longer needs an explicit apt-get step — the Makefile handles it uniformly. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Makefile creates a fresh /tmp/l2radar-demo-XXXXXX dir per run and passes it to record.js via DEMO_OUTPUT_DIR. record.js honours that env var (defaulting to a new mktemp dir when called directly). Nothing lands in the demo/ working directory; /tmp/ is managed by the OS. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
simulate.js: anchor SIM_BASE_TIME to Date.now() instead of a hardcoded UTC value; the generated first_seen/last_seen timestamps now match the viewer's clock regardless of timezone. record.js: inject a click-ripple via context.addInitScript() — each Playwright click renders a green expanding circle (scale 1→2.2, fades over 450 ms) so recording viewers can follow the cursor interactions. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
record.js: after clicking each interface tab (eth0, wlan0, and final eth0 tour), also click "Interface Stats" to expand the collapsible TX/RX bytes and packet counter section; updated gesture timeline. ci: replace commit-to-main with gh release upload — demo.gif is attached directly to the versioned GitHub release (created by the job if it doesn't already exist) with --clobber for re-runs. No git history pollution, no LFS required. README: image now points to releases/latest/download/demo.gif, which always resolves to the most recent release asset without any repo changes. Remove .gitattributes (LFS no longer needed). Add demo/.gitignore to exclude node_modules. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #3