phoenixframework/phoenix_live_dashboard

This system is Phoenix LiveDashboard, a real-time monitoring and debugging tool for Phoenix applications that provides a web-based interface for inspecting system metrics, processes, and application state. It visualizes telemetry data using uPlot charts and presents structured information through sortable, searchable tables for resources like ETS, ports, and sockets. The dashboard supports interactive features such as request logging, process management, and customizable page layouts, all rendered via Phoenix LiveView with a modern, component-based UI.

11 changes.

This period marks the initial release of Phoenix LiveDashboard, introducing a real-time monitoring tool with a web-based interface for system metrics and debugging. The work involved a comprehensive architectural overhaul, including migrating configuration syntax, restructuring asset pipelines to use esbuild and dart\_sass, and replacing legacy charting components with new modular UI elements.

13 changes.

The LiveDashboard was comprehensively rewritten to adopt Phoenix LiveView and HEEx templates, replacing string-based HTML generation with declarative components. This migration introduced a new uPlot-based metrics visualization engine, a custom visual theme, and enhanced interactive features for system monitoring and request logging.

5 changes.

This period focused on upgrading the LiveDashboard's frontend infrastructure, including migrating to Phoenix LiveView 0.18 and Bootstrap 4.6.2. Key improvements involved enhancing performance through immutable caching of static assets and adding support for custom hooks and head injection to allow for greater extensibility.

The LiveDashboard layout now supports injecting custom content into the HTML head via \custom\_head\_tags\ hooks (allowing insertion after the opening head tag and before the closing head tag) and exposes a \window.LiveDashboard.registerCustomHooks\ function for registering custom LiveView hooks.

_lib/phoenix/live\dashboard/layouts · high confidence

This change introduces the Phoenix LiveDashboard, a new real-time monitoring and debugging tool for Phoenix applications. It provides a web-based interface to view system metrics, process information, ETS tables, ports, sockets, and application supervision trees. The dashboard includes a request logger, customizable pages via the PageBuilder, and support for remote node inspection. It is configured via the \live\_dashboard/2\ macro in the router and integrates with Telemetry for metrics collection.

_lib/phoenix/live\dashboard · high confidence

The color bar component now supports interactive highlighting. When a user clicks on a progress bar or legend entry, the selected item is visually emphasized while others are muted, allowing for easier focus on specific data points within the visualization.

_assets/js/color\_bar\highlight · high confidence

The application info view now features a unified modal interface for inspecting system details, powered by new dedicated LiveComponent modules. Users can view ETS tables, ports, sockets, and processes in a consistent tabular format, while the application supervision tree offers both a visual tree diagram and a filterable list view. Additionally, the process info view now supports destructive actions, allowing users to kill processes directly from the dashboard when permitted.

_lib/phoenix/live\dashboard/info · high confidence

A new \dev.exs\ file has been added to simplify local development, allowing developers to start the dashboard with \mix dev\ and optionally enable specific Ecto repositories (Postgres, MySQL, or SQLite) via command-line flags (\--postgres\, \--mysql\, \--sqlite\). The project also introduces a \traffic.yml\ file for simulating dashboard traffic using the \drill\ benchmarking tool, updates \.formatter.exs\ to support Phoenix LiveView 1.0+ syntax (including curly interpolation migration settings and HTML formatter plugins), and expands \.gitignore\ to exclude SQLite database files and npm artifacts.

(repo-wide) · high confidence

The \assets/js/metric\_charts\ directory has been removed, eliminating the previous implementation of metric visualization. This change deletes the \color\_wheel.js\ module that provided a static palette for chart colors and the \index.js\ module that managed Doughnut and Line charts using Chart.js. Users will no longer have access to these specific chart rendering capabilities in this location, as the code responsible for initializing and updating these visualizations has been completely stripped from the asset bundle.

_assets/js/metric\charts · high confidence

The dashboard now uses a dedicated visual theme with custom colors (Elixir purple, Phoenix orange, dashboard blue) and a custom sans-serif font ('LiveDashboardFont') embedded as a base64 data URL to ensure consistent rendering without external network requests. This change also establishes a new core layout structure with a gray gradient background, specific typography settings, and utility classes for LiveView states (loading/disconnected), replacing previous styling approaches.

assets/css/app · high confidence

The LiveDashboard JavaScript entry point has been replaced with a new app.js that consolidates LiveView hooks (including request logging, color bar highlighting, and refresh persistence) and initializes the LiveSocket connection. A key behavioral change is the automatic fallback to long-polling when WebSocket connections fail, ensuring dashboard connectivity in restricted network environments. Additionally, NProgress is integrated to display loading indicators during LiveView navigation and form submissions, and the previous standalone metric chart hook has been removed in favor of the new modular hook structure.

assets/js · high confidence

The dashboard pages (Home, Ecto Stats, ETS, Memory Allocators, Metrics, OS Data, Ports, Processes, Request Logger, Sockets, and Applications) have been rewritten to use Phoenix LiveView components and the new \~H HEEx template sigil. This change replaces the previous HTML string generation with declarative component-based rendering, introducing new UI elements like \<.live\_table\> for sortable, searchable data grids and \<.live\_chart\> for metrics visualization. It also adds specific features such as auto-discovery of Ecto repositories, configurable refresh intervals for charts, and improved handling of system information like CPU load and memory usage.

_lib/phoenix/live\dashboard/pages · high confidence

The LiveDashboard module has been significantly restructured: it no longer functions as an Agent for storing metrics, but instead uses a macro-based approach for routing and documentation. The \extract\_datapoint\_for\_metric\ function is now public and delegated to \Phoenix.LiveDashboard.TelemetryListener\, allowing users to programmatically extract data points from telemetry events. This change simplifies the internal architecture and exposes metric extraction capabilities for external use.

lib/phoenix · high confidence

The metrics visualization has been rewritten to use the uPlot library instead of Chart.js, resulting in a new rendering engine for time-series and distribution data. This change introduces support for histogram metrics, allowing users to view data distributions via bar charts, and adds a configurable \prune\_threshold\ option to limit the number of data points retained in memory, improving performance for long-running charts. Additionally, a new color wheel utility ensures consistent styling across chart series, and the system now supports tagged metrics by dynamically adding series based on tag values.

_assets/js/metrics\live · high confidence

The application configuration has been updated to use the modern \import Config\ syntax instead of the deprecated \use Mix.Config\, aligning with recent Elixir standards. Additionally, environment-specific configurations for asset compilation are now explicitly defined: the development environment configures \esbuild\ (v0.14.41) and \dart\_sass\ (v1.61.0) with specific build arguments and output paths, while the test environment configures \phoenix\_live\_view\ to ignore missing form ID warnings.

config · high confidence

The dashboard UI has been restyled using a new set of modular SCSS files in \assets/css/app/components\. This introduces a consistent visual theme across the application, including colorful gradient cards, a refined header and navigation bar, and improved chart legends for the uPlot-based metrics. The app info view now features a nested list view for processes with hover highlighting, while the logger displays color-coded log levels and animated cookie-status indicators.

assets/css/app/components · high confidence

The application now remembers the user's refresh settings across page loads by storing them in a browser cookie. A new JavaScript module handles the serialization and persistence of this data, while a LiveView hook automatically saves the current refresh configuration whenever the page updates, ensuring the preference is retained for the specific dashboard path.

_assets/js/refresh, assets/js/remember\refresh · high confidence

The Live Dashboard UI components have been significantly refactored and expanded. The previous \LiveMetric\ component has been replaced by a new \ChartComponent\ that supports configurable \prune\_threshold\ and \refresh\_interval\ options for better data management. A new \TableComponent\ has been introduced to provide sortable, searchable, and paginable data views across various dashboard pages. Additionally, a \NavBarComponent\ now handles navigation with support for different styles and methods, and a \LayeredGraphComponent\ has been added to visualize hierarchical relationships. These changes modernize the dashboard's interface and add more interactive features for users.

_lib/phoenix/live\dashboard/components · high confidence

The dashboard's styling has been restructured from a single legacy CSS file into a modular SCSS architecture. The old \live\_dashboard.css\ file, which contained custom grid and column layout rules, has been removed. In its place, a new \app.scss\ entry point imports Bootstrap, NProgress, and uPlot, along with a comprehensive set of organized partials for variables, fonts, layout, extends (progress bars, tables), components (navbar, modals, charts, layered graph, etc.), and utilities (resource usage, tabular info). This change introduces specific styling for interactive table rows (pointer cursor), enhanced table sorting icons, and dedicated styles for memory usage visualization and tabular data display, providing a more maintainable and component-driven styling foundation for the dashboard UI.

assets/css · high confidence

The request logger interface now includes two usability improvements. First, the message log view automatically scrolls to the latest entry when the 'autoscroll' checkbox is enabled, ensuring users always see the most recent logs without manual intervention. Second, the query parameter display now features a copy button that leverages the modern Clipboard API (with a fallback for older browsers), allowing users to easily copy the current query string to their clipboard with visual feedback via an animation indicator.

_assets/js/request\_logger\_messages, assets/js/request\_logger\_query\parameter · high confidence

The new PhxRequestLoggerCookie LiveView hook allows the request logger cookie to be scoped to a specific domain. Users can now set a custom domain for the cookie by providing a data-cookie-domain attribute on the element, in addition to the existing key, value, and cookie-enabled attributes. The hook automatically handles setting the cookie with the specified domain and removes it when the element is updated or disabled.

_assets/js/request\_logger\cookie · high confidence

Live Dashboard now includes a dedicated controller to serve bundled CSS and JavaScript assets. This change introduces long-term caching headers (immutable, one-year max-age) for these static files, which improves performance by allowing browsers to cache them indefinitely. The controller also explicitly skips CSRF protection for these asset requests, ensuring they load correctly without interference from standard form-security checks.

_lib/phoenix/live\dashboard/controllers · high confidence

The LiveDashboard CSS has been updated to include styles for the uplot charting library and to switch the underlying UI framework to Bootstrap 4.6.2. This change also embeds the 'LiveDashboardFont' (Muli) directly as a base64 data URI, ensuring the dashboard renders correctly without relying on external font resources.

dist/css · high confidence

The JavaScript bundle in dist/js has been rebuilt to support Phoenix LiveView 0.18, incorporating updates to the underlying uPlot charting library and NProgress. This change enables the application to leverage the new LiveView capabilities while maintaining the existing distribution metrics and custom hook registration features.

dist/js · high confidence

Added test coverage for LiveDashboard components and configuration; Added test coverage for LiveDashboard pages; Added tests for CSP nonce embedding and optional dependency compilation; Added tests for LiveDashboard component rendering and validation; Added tests for LiveDashboard helper formatting functions; Added tests for the metrics charting component; Test suite now provisions and configures multiple database repositories.

This release upgrades the Phoenix LiveDashboard to version 0.9.1, requiring Elixir 1.15+ and introducing significant changes to its dependency stack and asset pipeline. The core dependency on Phoenix LiveView has been updated to require version 1.0 or higher, and telemetry\_metrics has been upgraded to support versions 0.6 or 1.0. The build system has shifted from the deprecated webpack to esbuild and dart\_sass for asset compilation, with a new \assets.build\ alias provided for maintainers. Additionally, the JavaScript client dependencies have been restructured: the root \package.json\ was removed in favor of an \assets/package.json\, and the charting library was replaced from chart.js to uPlot, alongside the addition of Bootstrap and nprogress. Optional database extras for PostgreSQL, MySQL, and SQLite3 have also been updated to their latest compatible versions.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 52 → 56 (+4.4)
• Rubric changed (rubric-2026.08.19 → rubric-2026.09.15) — scores are not directly comparable.

• Code Health 59 → 60 (+1.7)
• Architecture 100 → 99 (-0.7)
• Maturity 52 → 55 (+2.6)
• Readiness 41 → 48 (+6.9)
• Security 75 → 78 (+3.2)

• Coverage not included — suite not readable by the collector
• Critical CVE: [GHSA redacted] (assets/package-lock.json)
• Dependency hygiene not measured — dependency manifest found but not parsed for hygiene
• Duplicated block (8 lines × 2) (lib/phoenix/live_dashboard/reingold_tilford.ex)
• Duplicated block (8 lines × 3) (lib/phoenix/live_dashboard/info/ets_info_component.ex)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (mix.lock)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (mix.lock)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (mix.lock)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (mix.lock)
• High CVE: [GHSA redacted] (mix.lock)
• High CVE: [GHSA redacted] (mix.lock)
• Low CVE: [GHSA redacted] (assets/package-lock.json)
• …and 9 more

• Critical CVE: [GHSA redacted] (assets/package-lock.json)
• Documentation: no architecture or design documentation (README.md)
• Duplicated block (7 lines × 2) (lib/phoenix/live_dashboard/reingold_tilford.ex)
• Duplicated block (8 lines × 3) (lib/phoenix/live_dashboard/info/ets_info_component.ex)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• High CVE: [GHSA redacted] (assets/package-lock.json)
• Leaked secret: signing-key (dev.exs)
• Low CVE: [GHSA redacted] (assets/package-lock.json)
• Low CVE: [GHSA redacted] (assets/package-lock.json)
• Medium CVE: EEF-[CVE redacted] (mix.lock)
• Medium CVE: [GHSA redacted] (assets/package-lock.json)
• Medium CVE: [GHSA redacted] (assets/package-lock.json)
• Medium CVE: [GHSA redacted] (assets/package-lock.json)
• …and 16 more

• 7 commits — 5 feature/other, 2 fixes

• lib/phoenix — 3 commits
• (root) — 2 commits
• .github/workflows — 1 commit
• config/config.exs — 1 commit

• fix: fix: Silence optional Postgrex interval warning (#496)
• fix: fix: SystemInfo.fetch_app_tree/2 crash on remote process links (#495)
• change: Release v0.9.0
• change: Release v0.9.1
• change: Skip Ecto repos that cannot be resolved to an extras module (#493)
• change: format
• change: update assets CI

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

phoenixframework/phoenix_live_dashboard was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.