PHPackages rawand201/filament-connection-badge - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. rawand201/filament-connection-badge ActiveLibrary[Utility & Helpers](/categories/utility) rawand201/filament-connection-badge =================================== A Filament topbar badge that shows real-time network quality (full/medium/low/offline) with a live ping graph tooltip and a full-screen offline overlay. Works with Filament v4 and v5, supports RTL and multi-language. v1.0.0(1mo ago)5898↑21.4%1MITPHPPHP ^8.2CI passing Since Apr 14Pushed 1mo agoCompare [ Source](https://github.com/RawanD201/filament-connection-badge)[ Packagist](https://packagist.org/packages/rawand201/filament-connection-badge)[ Docs](https://github.com/RawanD201/filament-connection-badge)[ RSS](/packages/rawand201-filament-connection-badge/feed)WikiDiscussions main Synced 1w ago READMEChangelogDependencies (11)Versions (2)Used By (0) Filament Connection Badge ========================= [](#filament-connection-badge) [![Filament Connection Badge](docs/art/banner.jpeg)](docs/art/banner.jpeg) [![Latest Version on Packagist](https://camo.githubusercontent.com/3e8a8841b7b172fc2268a5d2d5066538a65aea1215d148f033d0853a33748467/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f726177616e643230312f66696c616d656e742d636f6e6e656374696f6e2d62616467652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/rawand201/filament-connection-badge)[![Total Downloads](https://camo.githubusercontent.com/a4b0ef07638a97df547bcd3e3bca89153011f0fade3384a78c445fc7e4d8f859/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f726177616e643230312f66696c616d656e742d636f6e6e656374696f6e2d62616467652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/rawand201/filament-connection-badge)[![License](https://camo.githubusercontent.com/cd72785e57705aabb9d2fc7d9a5de998fa52ecd487467e3cabc4b809846f0016/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f526177616e443230312f66696c616d656e742d636f6e6e656374696f6e2d62616467652e7376673f7374796c653d666c61742d737175617265)](LICENSE.md)[![CI](https://github.com/RawanD201/filament-connection-badge/actions/workflows/ci.yml/badge.svg)](https://github.com/RawanD201/filament-connection-badge/actions/workflows/ci.yml) A drop-in **connection status badge** for Filament panels — shows a live signal-bars icon in the topbar next to the user avatar, a live ping graph on hover, and a full-screen overlay when the connection drops. Works with **Filament v4 and v5**, uses Filament's design tokens so it follows your panel's theme and dark mode automatically, and fully supports **RTL** and multi-language UIs. --- Requirements ------------ [](#requirements) VersionPHP^8.2 (8.2 / 8.3 / 8.4)Laravel10.x / 11.x / 12.x / 13.xFilament^4.0 | ^5.0--- Installation ------------ [](#installation) ``` composer require rawand201/filament-connection-badge ``` The service provider is auto-discovered, so no manual registration is needed. ### Publish assets [](#publish-assets) ``` php artisan filament:assets ``` ### Publish the config (optional) [](#publish-the-config-optional) ``` php artisan vendor:publish --tag="filament-connection-badge-config" ``` ### Publish translations (optional) [](#publish-translations-optional) ``` php artisan vendor:publish --tag="filament-connection-badge-translations" ``` That's it — the badge is now rendered in the topbar of every Filament panel. --- Configuration ------------- [](#configuration) The published `config/filament-connection-badge.php`: ``` return [ 'enabled' => env('FILAMENT_CONNECTION_BADGE_ENABLED', true), // Filament panel hook name (default: before the user menu). See Filament\View\PanelsRenderHook. 'render_hook' => env( 'FILAMENT_CONNECTION_BADGE_RENDER_HOOK', 'panels::user-menu.before' ), // Optional Gate / policy ability — badge and ping require auth()->user()->can(...) when set 'permission' => env('FILAMENT_CONNECTION_BADGE_PERMISSION'), 'show_label' => true, 'show_overlay' => true, 'route' => [ 'prefix' => '_filament-connection-badge', 'middleware' => ['web'], 'throttle' => env('FILAMENT_CONNECTION_BADGE_THROTTLE'), // e.g. '60,1'; null = no throttle ], 'ping_url' => env('FILAMENT_CONNECTION_BADGE_PING_URL'), 'ping_interval' => 5000, 'thresholds' => [ 'full' => 200, 'medium' => 600, ], 'max_samples' => 30, ]; ``` ### Environment variables [](#environment-variables) ``` FILAMENT_CONNECTION_BADGE_ENABLED=true FILAMENT_CONNECTION_BADGE_RENDER_HOOK=panels::topbar.end FILAMENT_CONNECTION_BADGE_PERMISSION=viewConnectionBadge FILAMENT_CONNECTION_BADGE_PING_URL=/favicon.ico FILAMENT_CONNECTION_BADGE_THROTTLE=60,1 ``` ### Disabling the badge for a specific environment [](#disabling-the-badge-for-a-specific-environment) ``` FILAMENT_CONNECTION_BADGE_ENABLED=false ``` --- Features -------- [](#features) - **Live signal bars** in the topbar — full / medium / low / offline, colored with Filament's `--success-*`, `--warning-*`, `--danger-*` tokens - **Real heartbeat endpoint** — the package registers its own JSON `/_filament-connection-badge/ping` route, so the badge actually proves your **Laravel application** is responding (PHP + router + middleware), not just the static file server - **Discord-style hover tooltip** with: - Live sparkline of the last N ping samples - Average ping, last ping, packet-loss rate - Host indicator - **Full-screen offline overlay** that auto-dismisses when the connection comes back - **Filament v4 & v5** — one package, single code path - **Dark mode** — all colors follow the panel theme via CSS variables - **RTL support** — built with CSS logical properties; numbers and the ping graph stay LTR (`unicode-bidi: isolate`) so measurements stay readable in RTL UIs - **i18n** — ships with English, Arabic, and Kurdish Sorani translations - **Configurable** — enable/disable, render hook, optional `can()` permission, optional heartbeat throttling, latency thresholds, route prefix & middleware, ping interval, history size, label visibility, overlay on/off - **Zero build step** — no Vite, no npm; assets are registered via `FilamentAsset` --- How it works ------------ [](#how-it-works) - On every Filament page, a tiny Alpine.js component is rendered via the configured render hook (default `panels::user-menu.before`, same as `PanelsRenderHook::USER_MENU_BEFORE`). - The package registers its own heartbeat route — a named GET endpoint at `route('filament-connection-badge.ping')` (default URI `/_filament-connection-badge/ping`) that returns a small JSON payload `{ ok: true, ts: ... }` with `Cache-Control: no-store`. - The Alpine component pings that endpoint every `ping_interval` ms and measures the round-trip time with `performance.now()`. Because the request goes through the Laravel router and middleware stack, a successful ping proves your **app** is responding — not just nginx serving a static file. - The measured latency is mapped to a quality level using `thresholds`. - A rolling buffer of the last `max_samples` pings is kept in memory. Failed pings count toward the packet-loss rate and visually break the sparkline. - `navigator.onLine` and the `online` / `offline` events are used as an immediate hint; a confirmation ping always follows. - When the browser reports offline (or a ping fails), the badge flips to "Offline" and the optional overlay is shown until the next successful ping. Nothing is persisted server-side — the route is stateless and the rolling sample buffer lives in the browser. ### Securing the heartbeat route [](#securing-the-heartbeat-route) By default the route uses the `web` middleware so sessions and cookies work, but it's publicly reachable. You can lock it down in two ways (combinable): **Middleware** — require an authenticated session: ``` 'route' => [ 'prefix' => '_filament-connection-badge', 'middleware' => ['web', 'auth'], ], ``` Or Filament's panel auth middleware: ``` 'middleware' => ['web', \Filament\Http\Middleware\Authenticate::class], ``` **Permission** — set `permission` (or `FILAMENT_CONNECTION_BADGE_PERMISSION`) to a Laravel Gate ability or policy method name. When set, the badge is hidden and the ping endpoint returns `403` unless `auth()->user()->can($permission)`. Register the ability in a service provider (e.g. `Gate::define('viewConnectionBadge', ...)`). You can also set `route.throttle` in config (or `FILAMENT_CONNECTION_BADGE_THROTTLE`, e.g. `60,1`) to append Laravel’s `throttle:{max},{decayMinutes}` middleware to the heartbeat route only. --- Localization ------------ [](#localization) To add another language, publish the translations and copy any of the files: ``` php artisan vendor:publish --tag="filament-connection-badge-translations" ``` --- Customization ------------- [](#customization) ### Override the view [](#override-the-view) ``` php artisan vendor:publish --tag="filament-connection-badge-views" ``` ### Override the styles [](#override-the-styles) You can either: - Publish and edit the asset files, or - Simply add your own CSS targeting the `.fcb-*` classes — every color is declared with `var(--gray-*)` / `var(--success-*)` / etc. so they automatically track your panel's theme. ``` composer sync-assets ``` --- Testing ------- [](#testing) ``` composer test composer analyse # PHPStan (src/) ``` Changelog --------- [](#changelog) See [CHANGELOG](CHANGELOG.md). Credits ------- [](#credits) - [RawanD201](https://github.com/RawanD201) License ------- [](#license) The MIT License (MIT). See [LICENSE](LICENSE.md). ### Health Score 45 — FairBetter than 91% of packages Maintenance89 Actively maintained with recent releases Popularity26 Limited adoption so far Community7 Small or concentrated contributor base Maturity46 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 56d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/245c78bdee9764a2637094945a47605f349cd68eefbd6e8b316473fad0cbc7e5?d=identicon)[RawanD201](/maintainers/RawanD201) --- Top Contributors [![RawanD201](https://avatars.githubusercontent.com/u/73317192?v=4)](https://github.com/RawanD201 "RawanD201 (6 commits)") --- Tags connectionfilament-pluginfilamentphplaravelConnectionnetworkstatusbadgeindicatorpingfilamentfilamentphpofflinertlonlinelatency ### Code Quality TestsPest Static AnalysisPHPStan Code StyleLaravel Pint Type Coverage Yes ### Embed Badge ![Health badge](/badges/rawand201-filament-connection-badge/health.svg) ``` [![Health](https://phpackages.com/badges/rawand201-filament-connection-badge/health.svg)](https://phpackages.com/packages/rawand201-filament-connection-badge) ``` ### Alternatives [rawilk/profile-filament-plugin Profile & MFA starter kit for filament. 3913.7k](/packages/rawilk-profile-filament-plugin)[dotswan/filament-map-picker Easily pick and retrieve geo-coordinates using a map-based interface in your Filament applications. 127173.7k3](/packages/dotswan-filament-map-picker)[codewithdennis/filament-select-tree The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths. 327482.0k25](/packages/codewithdennis-filament-select-tree)[stephenjude/filament-jetstream A Laravel starter kit built with Filament inspired by Jetstream. 17758.9k2](/packages/stephenjude-filament-jetstream)[creagia/filament-code-field A Filamentphp input field to edit or view code data. 57301.3k3](/packages/creagia-filament-code-field)[mradder/filament-logger Audit logging, activity tracking, exports, alerts, and dashboards for Filament admin panels. 2210.5k](/packages/mradder-filament-logger) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)