AGS Bar¶

Índice¶

Resumen
Archivos
Constantes y variables globales
app.ts — Punto de entrada
style.scss — Estilos
Bar.tsx — Barra principal
MusicBar.tsx — Barra de música
CommandCenter.tsx
Keybinds.tsx
PowerMenu.tsx
NotificationCenter.tsx
NotificationPopup.tsx
OSD.tsx
cava.ts — Visualizador de audio
Notas y recursos

Resumen¶

El directorio ~/.config/ags/ contiene la barra de escritorio construida con AGS v3 (Aylurs-GTK-Shell) y el framework Astal. Está escrita en TypeScript con sintaxis JSX similar a SolidJS y se compila/ejecuta en tiempo real via el runtime GJS (GNOME JavaScript).

La barra se divide en dos capas visibles:

Barra inferior (Bar.tsx): anclada al fondo de la pantalla, siempre visible. Contiene el lanzador de apps, reloj, calendario, taskbar, bandeja del sistema y controles de audio/red/bluetooth.
Barra superior de música (MusicBar.tsx): tres píldoras flotantes en la parte superior que muestran info del reproductor actual, el visualizador CAVA y las letras sincronizadas.

Archivos¶

El widget/ está organizado en subcarpetas: Bar/ (barras), Helpers/ (módulos sin UI), Panels/ (ventanas + widgets). Los imports son ./X en la misma carpeta y ../Carpeta/X entre carpetas; app.ts importa ./widget/<Carpeta>/<Archivo>.

Archivo	Propósito
`app.ts`	Punto de entrada, monta todas las ventanas; `requestHandler` para `ags request`
`style.scss`	Estilos globales (compilado a CSS por dart-sass, binario `sass`)
`widget/Bar/Bar.tsx`	Barra inferior principal
`widget/Bar/MusicBar.tsx`	Barra de música flotante + flyout now-playing
`widget/Panels/WifiMenu.tsx`	Popup de gestión WiFi (reemplaza nm-connection-editor)
`widget/Panels/BluetoothMenu.tsx`	Popup de gestión Bluetooth
`widget/Panels/SettingsPanel.tsx`	Panel de configuración (CAVA, YT-DLP, MUSIC BAR, NETWORK, BATTERY, PERFORMANCE)
`widget/Panels/CommandCenter.tsx`	Centro de comandos (SUPER+C)
`widget/Panels/DashboardPanel.tsx`	Dashboard: Wallman, Cliphist, Emoji, Logs (SUPER+SHIFT+D)
`widget/Panels/Keybinds.tsx`	Visor de keybinds (SUPER+')
`widget/Panels/PowerMenu.tsx`	Menú de sesión (CTRL+ALT+DEL)
`widget/Panels/NotificationCenter.tsx`	Centro de notificaciones (panel lateral, historial)
`widget/Panels/NotificationPopup.tsx`	Toasts de notificación (popup transitorio, auto-dismiss)
`widget/Panels/OSD.tsx`	Indicador on-screen (volumen, brillo)
`widget/Panels/Weather.tsx`	Widget del clima
`widget/Helpers/cava.ts`	Subproceso del visualizador de audio CAVA
`widget/Helpers/Lyrics.ts`	Búsqueda de letras en lrclib.net
`widget/Helpers/YtDlp.ts`	Filtro de música (yt-dlp) para el historial
`widget/Helpers/ListenHistory.ts`	Historial de escucha (recientes / top)
`widget/Helpers/Perf.ts`	Modo Low-end device (`LOW_END`, `clampInterval`, `LYRIC_SYNC_MS`)
`widget/Helpers/DashLog.ts`	Log de eventos del dashboard (warn / lrclib / ytdlp)
`widget/Helpers/MusicBarVisibility.ts`	Mostrar/ocultar la barra de música
`scripts/battery-limit.sh`	Límite de carga al 80% (vía `pkexec`, ver SettingsPanel)
`scripts/hypr-focus-fix.py`	Fix de foco de Hyprland (lanzado por `app.ts`)
`scripts/lowend-benchmark.sh`	Benchmark CPU/RAM del modo Low-end
`package.json`	Dependencias npm (solo `ags: "*"`)
`tsconfig.json`	Configuración de TypeScript

Constantes y variables globales¶

MusicBar.tsx¶

Nombre	Valor	Descripción
`NO_TRACK`	`'/org/mpris/MediaPlayer2/TrackList/NoTrack'`	ID especial de MPRIS que indica "sin pista"
`DECAY_λ`	`0.001`	Factor de decaimiento exponencial para la caché de letras
`LYRICS_DIR`	`~/lyrics`	Directorio donde se buscan los archivos `.lyr`
`MAX_CACHE`	`200`	Máximo de entradas en la caché de letras en memoria
`NUM_BARS`	(definido en cava.ts)	Número de barras del visualizador
`lyricsIndex`	`Map<string, LyricFile[]>`	Índice en memoria de todos los `.lyr` encontrados

app.ts — Punto de entrada¶

Inicializa la aplicación AGS y monta todos los widgets en cada monitor detectado.

Función `main()`¶

Se ejecuta al lanzar ags run ~/.config/ags/app.ts -i ags-bar.

Itera sobre los monitores con app.get_monitors().
Por cada monitor crea instancias de: Bar, MusicBar, NotificationCenter, NotificationPopup.
Una sola vez (no por monitor): OSD(monitors[0]), PowerMenu(), CommandCenter(), Keybinds(), SettingsPanel(), DashboardPanel().
Registra un requestHandler (ags request -i ags-bar <cmd>) — ej. toggle-nowplaying abre/cierra el flyout de música.
Registra la app con el identificador ags-bar para que ags toggle -i ags-bar <nombre> funcione.

Daemon de notificaciones

AGS reclama el nombre D-Bus org.freedesktop.Notifications vía AstalNotifd apenas arranca. Para que esto funcione, dunst.service debe estar enmascarado (systemctl --user mask dunst.service) — si no, dunst lo reclama primero y AGS nunca recibe notificaciones. install.sh enmascara dunst automáticamente.

style.scss — Estilos¶

Hoja de estilos SCSS compilada por dart-sass (binario sass). Define variables de color del sistema y los estilos de todos los widgets.

Variables de color principales¶

$bg-deep:       #050505;   /* Fondo más oscuro */
$bg-glass:      #121212;   /* Fondo de píldoras */
$accent:        #89B19E;   /* Verde claro — color principal */
$primary:       #33473D;   /* Verde oscuro */
$secondary:     #4D6B5C;   /* Verde medio */
$text-primary:  #E8E8E8;
$text-dim:      #7A7A7A;
$border:        #2A2A2A;
$border-bright: #4D6B5C;

Los alias heredados morados/cyan ($purple-light, $purple-mid, $cyan-accent) fueron eliminados — el tema ya no es morado; todo usa $accent/$secondary directamente.

Bar.tsx — Barra principal¶

Ventana GTK anclada a BOTTOM | LEFT | RIGHT con exclusividad de espacio (EXCLUSIVE), es decir, las ventanas de aplicaciones no se superponen a ella.

Componentes¶

`Launcher`¶

Botón con el ícono de Arch Linux. Al hacer clic lanza rofi -show drun -show-icons.

`ColorPicker`¶

Botón con ícono de cuentagotas. Ejecuta hyprpicker -a (selecciona un color de pantalla y lo copia al portapapeles automáticamente).

`Clock`¶

Muestra la hora actual en formato HH:MM. Se actualiza cada segundo. Usa la zona horaria America/Santiago.

`CalendarWidget`¶

Muestra la fecha corta (lun 10 jun). Al hacer clic abre un popover con un Gtk.Calendar. Clic derecho abre calcure en una terminal.

`VolumeWidget`¶

Muestra el ícono y porcentaje del volumen del altavoz predeterminado (via WirePlumber/AstalWp). Funciones: - Clic izquierdo: abre pavucontrol. - Clic derecho: silencia/desilencia. - Scroll: sube/baja volumen en 5%.

`MicWidget`¶

Igual que VolumeWidget pero para el micrófono predeterminado.

`NetworkWidget`¶

Muestra el estado de red: ícono de WiFi con intensidad de señal (o Ethernet) + el SSID. Detecta la interfaz activa leyendo /proc/net/route.

El medidor de velocidad de descarga/subida ya no está en la barra: se movió al popup WifiMenu (fila con ↓/↑, clases .wifi-bw-row/.wifi-bw-val), que lee /proc/net/dev.

Clic izquierdo: abre WifiMenu — popup integrado de gestión WiFi (ver WifiMenu.tsx).
Requiere gdkmonitor como prop para posicionar el popup en la pantalla correcta.

`BluetoothWidget`¶

Muestra el estado Bluetooth. Visible solo si hay adaptador disponible. Clic abre blueman-manager.

`VpnWidget`¶

Se hace visible automáticamente cuando detecta alguna interfaz VPN activa (tun0, wg0, ppp0, etc.) leyendo /proc/net/dev. Se comprueba cada 4 segundos.

`NotifBell`¶

Campana que abre/cierra el NotificationCenter.

`WorkspacesWidget`¶

Indicador de workspaces de Hyprland.

Workspaces 1–5: punto fijo (•), siempre visibles, clase .ws-dot. El activo se resalta con $accent via la clase .active.
Workspaces 6+: solo se muestran si están enfocados o tienen ventanas (extraIds), usando glifos Unicode de dígito circulado (①②③… vía CIRCLED_DIGIT_DIGITS/circledNum()) en vez de números planos, para mantener la estética de "punto" sin perder la identificación del número.
El clic despacha el cambio de workspace con hyprctl dispatch 'hl.dsp.focus({workspace="N"})' (vía execAsync), no con el método nativo AstalHyprland.dispatch() — este fork de Hyprland usa un wrapper Lua que espera sintaxis de llamada a función, no el dispatch workspace N clásico. Ver Hyprland → hyprland.lua.

`Taskbar`¶

Lista de ventanas abiertas en Hyprland (vía AstalHyprland). Al hacer clic en una ventana, enfoca su workspace y luego la ventana.

`Tray`¶

Bandeja del sistema con los ítems de AstalTray. Filtra automáticamente nm-applet y blueman-applet (ya representados por NetworkWidget y BluetoothWidget).

const TRAY_HIDDEN = new Set(['nm-applet', 'network-manager-applet', 'blueman', 'blueman-applet'])

MusicBar.tsx — Barra de música¶

Tres ventanas GTK flotantes ancladas a TOP. Siempre visibles con altura fija, independientemente de si hay un reproductor MPRIS activo. Cuando no hay reproductor, las píldoras permanecen en pantalla pero vacías.

Píldoras¶

Píldora	Clase CSS	Contenido
Izquierda	`.m-left-pill`	Carátula + título/artista + controles + barra de progreso
Centro	`.m-center-pill`	Visualizador de barras CAVA
Derecha	`.m-right-pill`	Letras sincronizadas

Componentes internos¶

`AlbumArt`¶

Muestra la carátula del track actual. Usa GdkPixbuf.Pixbuf.new_from_file_at_scale para escalar la imagen a 36×36 (píldora, clase .album-art-box) ó 220×220 (flyout, clase .npp-art). Se actualiza reactivamente cuando cambia la carátula. La carátula también alimenta los colores del espectro CAVA (color dominante → barras altas, más oscuro → barras bajas).

`MediaInfo`¶

Muestra el título y artista del track con texto truncado (ellipsize).

`MediaControls`¶

Botones de anterior, play/pause y siguiente. Usan la API de AstalMpris.

`ProgressBar` (seek)¶

La barra de progreso arrastrable vive solo en el flyout now-playing, no en la píldora (Gtk.Scale, clase .npp-scale). Al soltar ejecuta playerctl position <segundos>. Ver ProgressBar en flyout.

`LyricsViewer`¶

Muestra las letras sincronizadas en la píldora derecha. Ver Letras (.lyr) para la documentación del sistema de letras.

`buildNowPlayingContent(player)`¶

Construye el flyout "now-playing" completo (carátula grande, título, artista, barra de progreso arrastrable, visualizador CAVA). Se invoca al hacer clic en la píldora izquierda.

La carátula en el flyout es de 220×220 px (clase .npp-art).
La imagen se actualiza cuando cambia la canción, comparando el path del cover anterior con el nuevo.
El visualizador en el flyout usa Gtk.DrawingArea con Cairo para renderizar las barras (clase .npp-spectrum).
Incluye los paneles laterales TOP LISTENED / RECENTLY PLAYED (clases .panel-*, datos de ListenHistory.ts).

`openFlyoutWin(gdkmonitor, content)`¶

Crea la ventana overlay del flyout: - Capa OVERLAY, anclada a TOP, sin modo de teclado. - Después de show_all(), usa GLib.idle_add para medir el ancho natural del contenido y asignarlo explícitamente con set_size_request() (necesario para que Wayland layer-shell respete los márgenes).

`ProgressBar` en flyout (progScale)¶

Gtk.Scale con clase .npp-scale, con detección de button-press-event / button-release-event para seeking preciso (marca isSeeking y aplica playerctl position al soltar).

CommandCenter.tsx¶

Ventana overlay centrada, activada con SUPER+C. Keymode EXCLUSIVE (captura todas las teclas). Se cierra con Escape.

Botones disponibles¶

Ícono	Acción	Descripción	Comando
`󰑓`	Restart Bar	Quit & relaunch AGS	`ags quit -i ags-bar; sleep 0.3; nohup ags run ...`
`󰕮`	Dashboard	Wallman, Cliphist, Logs	`ags toggle -i ags-bar dashboard`
`󰐥`	Power	Session options	`ags toggle -i ags-bar power-menu`
`󰒓`	Settings	CAVA & bar config	`ags toggle -i ags-bar cava-settings`

Cada botón usa las clases .cmd-btn (+.cmd-btn-power para Power), .cmd-btn-icon, .cmd-btn-label, .cmd-btn-desc.

Keybinds.tsx¶

Ventana overlay centrada, activada con SUPER+'. Muestra:

Keybinds comunes: tabla de 2 columnas con los atajos más usados (hardcodeados en el array COMMON).
Todos los keybinds: lista filtrable generada parseando /home/fn-finixtavh/.config/hypr/keybinds.lua en tiempo real.

`parseKeybinds()`¶

Lee keybinds.lua línea por línea. Detecta comentarios de sección (-- ── Sección ──) como encabezados y extrae llamadas hl.bind(...). Ignora bucles for.

`humanize(cmd)`¶

Convierte comandos crudos (ej. ags toggle -i ags-bar command-center) a nombres amigables (ej. Command Center).

PowerMenu.tsx¶

Menú de sesión, activado con CTRL+ALT+DEL o el botón de encendido físico (si está configurado en logind). Opciones: Lock, Suspend, Logout, Reboot, Shutdown.

NotificationCenter.tsx¶

Panel lateral de notificaciones (historial). Ventana name="notif-center", por lo que también se puede abrir/cerrar con ags toggle -i ags-bar notif-center (usado por el keybind SUPER+N). Alternativamente, se activa con el botón de campana (NotifBell) en la barra inferior, o programáticamente via toggleNotifCenter(gdkmonitor).

Escucha las señales notified/resolved de AstalNotifd.get_default() y reconstruye la lista. Requiere que AGS sea el único propietario de org.freedesktop.Notifications en D-Bus (ver nota en app.ts).

Funciones exportadas¶

Función	Descripción
`buildNotifItem(n, onDismiss)`	Construye el `Gtk.Box` de una notificación individual (ícono, app, tiempo, resumen, cuerpo, botón de descarte). Compartida con `NotificationPopup.tsx`.
`isDndEnabled()` / `subscribeDnd(cb)`	Estado de "No molestar"
`toggleNotifCenter(gdkmonitor)`	Abre/cierra el panel programáticamente

NotificationPopup.tsx¶

Toasts de notificación transitorios, uno por monitor. Anclados a TOP | RIGHT, capa OVERLAY, fondo transparente (clase .NotifPopup); cada notificación individual recibe la clase .notif-toast además de las clases base de buildNotifItem.

Reutiliza buildNotifItem() de NotificationCenter.tsx — mismo diseño visual que el panel de historial.
Respeta el modo "No molestar" (isDndEnabled()): si está activo, no muestra nada.
Timeout: n.expireTimeout si está definido (>0); si no, 5 s por defecto o 8 s si urgency === 2 (crítica).
Se apilan verticalmente si llegan varias notificaciones a la vez; cada una se puede descartar manualmente o se cierra sola al expirar el timer o recibir la señal resolved.

GTK3 CSS no soporta max-width

Solo min-width/min-height son válidos como propiedades de tamaño en CSS de GTK3. Usar max-width rompe el parseo de CSS al arrancar AGS (Gtk.CssProviderError) y el proceso muere sin abrir ninguna ventana.

OSD.tsx¶

Indicador on-screen que aparece brevemente al cambiar el volumen o brillo. Se posiciona en la parte inferior central de la pantalla.

cava.ts — Visualizador de audio¶

Clase que lanza CAVA como subproceso y parsea su salida.

Configuración embebida¶

[general]
bars = 20
framerate = <Hz>          ; auto-detectado del monitor o manual (SettingsPanel → CAVA)
sensitivity = 160
autosens = 1
lower_cutoff_freq = 25
higher_cutoff_freq = 15000
[input]
method = pipewire
source = auto
[output]
method = raw
raw_target = /dev/stdout
bit_format = 8bit          ; amplitudes 0–255
bar_delimiter = 0
channels = mono
[smoothing]
noise_reduction = 17

Importante: method=pipewire es necesario en sistemas con PipeWire puro. Sin esta línea CAVA intenta usar ALSA/PulseAudio y no recibe audio.

Propiedad `bars`¶

Array de números 0–255 representando la amplitud de cada banda de frecuencia. Se actualiza en cada frame de CAVA.

WifiMenu.tsx¶

Popup de gestión WiFi anclado a BOTTOM | RIGHT. Se abre al hacer clic en NetworkWidget. Se cierra con Escape o haciendo clic en el botón ✕.

Backend soportados¶

Backend	Comandos usados
NetworkManager	`nmcli device wifi list`, `nmcli device wifi connect`, `nmcli device wifi rescan`
iwd	`iwctl station IFACE get-networks`, `iwctl station IFACE connect`, `iwctl station IFACE scan`

El backend se resuelve al abrir el menú leyendo la preferencia en user-settings.json (networkBackend). Si está en auto, detecta cuál está corriendo y opcionalmente guarda el resultado en caché (networkBackendCached) para no repetir la detección en cada apertura.

Detección de interfaz¶

Usa /sys/class/net/*/wireless (sysfs) para encontrar la interfaz WiFi activa. No requiere iw ni nmcli.

Funciones principales¶

Función	Descripción
`resolveBackend()`	Lee settings → cache → detecta NM/iwd → guarda en cache
`getWifiIface()`	Detecta interfaz WiFi via sysfs
`parseNmcli(raw)`	Parsea salida terse de `nmcli -g ...`
`parseIwctlNetworks(raw)`	Parsea salida de `iwctl get-networks` (maneja ANSI para señal real)
`openWifiMenu(gdkmonitor)`	Crea y muestra el popup; retorna función `close()`

Características¶

Lista de APs con ícono de señal, nombre, candado y porcentaje.
Panel de detalle expandible por clic: SSID, BSSID (solo NM), Canal, Frecuencia, Security, barra de señal.
Conectar con contraseña (campo de entrada en panel de detalle).
Conectar a red oculta (panel plegable al pie del menú).
Desconectar desde el AP activo.
Botón de rescan (refresca lista con 2–2.5 s de espera).

SettingsPanel.tsx¶

Panel de configuración de usuario. Se abre desde CommandCenter (SUPER+C → botón Settings). Keymode EXCLUSIVE. Se cierra con Escape.

Páginas¶

Página	Contenido
CAVA	Hz de refresco del visualizador (auto-detectado o manual)
YT-DLP	Filtro de música en historial de escucha
MUSIC BAR	Mostrar/ocultar barra; intervalo de guardado del historial; borrar datos; prioridad de letras (local vs lrclib); intervalo de sync de letras (µs)
NETWORK	Backend WiFi (Auto/NetworkManager/iwd); toggle y borrado de cache de auto-detección
BATTERY	Límite de carga al 80% (vía `pkexec` + `battery-limit.sh`)
PERFORMANCE	Modo Low-end device (reinicia AGS); botón Clear dotfiles cache (borra `~/.cache/ags/*` regenerable)

Almacenamiento¶

~/.config/ags/user-settings.json — JSON plano. Claves relevantes:

Clave	Tipo	Descripción
`networkBackend`	`'auto'`\|`'nm'`\|`'iwd'`	Backend WiFi preferido
`networkAutoCache`	`boolean`	Si se cachea el resultado de auto-detección
`networkBackendCached`	`'nm'`\|`'iwd'`\|`''`	Resultado cacheado de la última auto-detección
`cavaAutoHz`	`boolean`	Auto-detectar Hz de CAVA desde monitor
`cavaManualHz`	`number`	Hz manual de CAVA
`ytdlpMusicFilter`	`boolean`	Filtrar solo música en historial
`historyIntervalS`	`number`	Intervalo de guardado del historial (seg)
`lyricsPriority`	`'local'`\|`'api'`	Prioridad de letras: archivos locales o lrclib.net
`lyricSyncUs`	`number`	Intervalo de sync de letras en microsegundos (default 5000 = 5 ms)
`batteryChargeLimit80`	`boolean`	Límite de carga al 80% activo
`lowEndDevice`	`boolean`	Modo low-end: sin cava, refrescos ≥30s, sin lrclib/yt-dlp (requiere reinicio de AGS)

Funciones exportadas¶

export function loadSettings(): Record<string, any>
export function saveSettings(updates: Record<string, any>): void

saveSettings hace merge shallow sobre el JSON existente. Se importa en WifiMenu.tsx para leer/escribir el backend cacheado.

Clases `style.scss` y scripts por componente¶

Referencia cruzada: qué clases de style.scss estiliza cada botón/caja/componente y qué scripts .sh/.py o comandos externos ejecuta. Las clases se aplican con class="..." en JSX o add_class('...') en código imperativo.

Barra inferior — `widget/Bar/Bar.tsx`¶

Componente	Clases `style.scss`	Scripts / comandos
Raíz	`.Bar`, `.bar-root`, `.main-bar-root`, `.bar-left`, `.bar-right`, `.divider-v`	—
`Launcher`	`.launcher`, `.launcher-icon`	`rofi -show drun -show-icons`
`ColorPicker`	`.color-picker`, `.color-picker-icon`	`hyprpicker -a`
`Clock`	`.clock`, `.clock-icon`, `.clock-time`	—
`CalendarWidget`	`.calendar-btn`, `.calendar-box`, `.calendar-icon`, `.calendar-date`	`calcure` (clic der.)
`VolumeWidget` / `MicWidget`	`.audio-group`, `.audio-icon`, `.audio-vol`	`pavucontrol`, `wpctl set-volume/set-mute`
`NetworkWidget`	`.sys-btn`, `.net-btn`, `.net-ssid`	abre `WifiMenu`; lee `/proc/net/route`, `/proc/net/dev`
`BluetoothWidget`	`.sys-btn` (variante BT)	abre `BluetoothMenu`
`Cpu`/`Ram` (`sysmon`)	`.sys-btn`, `.sysmon-btn`, `.sys-icon`, `.sysmon-val`	lee `/proc/stat`, `/proc/meminfo`, `/proc/<pid>/stat`; GPU vía sysfs `/sys/class/drm` o `nvidia-smi`
Flyout CPU/RAM	`.bar-flyout-root`, `.bar-flyout-title`, `.bar-flyout-sub-title`, `.gauge-legend-dot`, `.gauge-legend-text`	— (dibujo Cairo)
`BatteryWidget`	`.sys-btn`, `.battery-btn`, `.batt-pct`	lee `/sys/class/power_supply/BAT*`
`VpnWidget`	`.sys-btn`, `.vpn-btn`	lee `/proc/net/dev` (tun/wg/ppp)
`WorkspacesWidget`	`.workspaces`, `.ws-dot`, `.ws-extra-num`, `.active`	`hyprctl dispatch 'hl.dsp.focus({workspace="N"})'`
`Taskbar`	`.taskbar`, `.task-btn`	`hyprctl dispatch 'hl.dsp.focus(...)'`
`Tray`	`.tray`, `.tray-item`	— (AstalTray)
`NotifBell`	(icono en `.bar-right`)	`toggleNotifCenter()`

Widget del clima — `widget/Panels/Weather.tsx`¶

Componente	Clases	Scripts / comandos
`WeatherWidget`	`.weather-btn`, `.weather-box`, `.weather-icon`, `.weather-temp`	`curl` a API de clima (refresco periódico, ver `clampInterval`)

Barra de música — `widget/Bar/MusicBar.tsx`¶

Componente	Clases	Scripts / comandos
Píldoras	`.music-3pill-root`, `.m-left-pill`, `.m-center-pill`, `.m-right-pill`	—
`AlbumArt` / `MediaInfo`	`.album-art-box`, `.media-info`, `.song-title`, `.song-artist`	`GdkPixbuf`
`MediaControls`	`.media-controls`, `.ctrl-btn`, `.now-playing-btn`	`AstalMpris` / `playerctl`
`LyricsViewer` (píldora der.)	`.lyrics-container`, `.lyric-label`	`Lyrics.ts` → `curl` a lrclib.net
Flyout now-playing	`.FlyoutWindow`, `.npp-root`, `.npp-art`, `.npp-title`, `.npp-artist`, `.npp-controls-wrap`, `.npp-ctrl-btn`, `.npp-ctrl-play`, `.npp-scale`, `.npp-time`, `.npp-spectrum`, `.npp-spec-sep`, `.npp-vsep`	Cairo (espectro), `playerctl position`
Paneles top/recent	`.panel-header`, `.panel-art`, `.panel-row`, `.panel-row-btn`, `.panel-song-title`, `.panel-song-artist`, `.panel-listen-time`, `.panel-url`, `.panel-no-data`, `.panel-row-empty`	`ListenHistory.ts`, `xdg-open` (clic en fila)
Flyout letras	`.lyrics-flyout-root`, `.pop-lyric-filename`, `.pop-lyric-current`, `.pop-lyric-context`	—

Ventanas / paneles — `widget/Panels/`¶

Ventana	Clases raíz + principales	Scripts / comandos
`CommandCenter.tsx`	`.CommandCenter`, `.cmd-root`, `.cmd-btn` (+`.cmd-btn-power`), `.cmd-btn-icon`, `.cmd-btn-label`, `.cmd-btn-desc`, `.cmd-hint`	`ags quit/run` (Restart), `ags toggle dashboard/power-menu/cava-settings`
`Keybinds.tsx`	`.KeybindsViewer`, `.kb-root`, `.kb-common-grid`, `.kb-list`, `.kb-row`, `.kb-key`, `.kb-action`, `.kb-group-title`, `.kb-search`, `.kb-hint`	parsea `~/.config/hypr/keybinds.lua`
`PowerMenu.tsx`	`.PowerMenu`, `.power-menu-root`, `.power-btn` (+`.shutdown/.reboot/.suspend/.lock/.logout`), `.power-icon`, `.power-label`, `.power-confirm-btn` (+`.cancel/.confirm`), `.power-confirm-icon/-text/-buttons`	`~/.config/hypr/scripts/hyprlock-launch.sh` (Lock), `systemctl poweroff/reboot/suspend`, `hyprctl dispatch 'hl.dsp.exit()'` (logout)
`NotificationCenter.tsx`	`.NotifCenter`, `.notif-panel`, `.notif-panel-title`, `.notif-item`, `.notif-icon-box`, `.notif-app`, `.notif-time`, `.notif-summary`, `.notif-body`, `.notif-dismiss`, `.notif-clear-btn`, `.notif-dnd-label`, `.notif-empty`	`AstalNotifd`
`NotificationPopup.tsx`	`.NotifPopup`, `.notif-toast` (+ clases de `buildNotifItem`)	—
`OSD.tsx`	`.OSD`, `.osd-root`, `.osd-bar`, `.osd-icon`, `.osd-text`	—
`WifiMenu.tsx`	`.wifi-menu-root`, `.wifi-menu-header/-title`, `.wifi-bw-row`, `.wifi-bw-val`	`nmcli` / `iwctl`; lee `/sys/class/net/*/wireless`
`BluetoothMenu.tsx`	`.wifi-menu-root` (reutiliza estilos)	`bluetoothctl`
`SettingsPanel.tsx`	`.SettingsPanel`, `.settings-root`, `.settings-page`, `.settings-sidebar`, `.settings-nav-btn` (+`.active`), `.settings-section`, `.settings-label`, `.settings-hint`, `.settings-clear-btn`, `.settings-apply-btn`, `.settings-danger-armed`, `.settings-content`	`pkexec ~/.config/ags/scripts/battery-limit.sh` (batería), `ags quit/run` (aplicar low-end); borra `~/.cache/ags/*` (botón Clear cache)
`DashboardPanel.tsx`	`.DashboardPanel`, `.dash-root`, `.dash-subtab`, · Wallman: `.wall-flow/.wall-tile/.wall-thumb/.wall-name/.wall-prog` · Cliphist: `.cliphist-row/.cliphist-text/.cliphist-thumb` · Emoji: `.emoji-flow/.emoji-btn/.emoji-input/.emoji-input-wrap` · Logs: `.log-row/.log-time/.log-msg/.log-detail`	`ffmpeg` (thumbnails de wallpapers/emoji), `cliphist decode/delete/wipe`, `wl-copy`, `notify-send`; lee `widget/Panels/emoji-data.json`

Módulos helper (sin UI) — `widget/Helpers/`¶

Módulo	Rol	Scripts / comandos
`cava.ts`	Subproceso del visualizador	lanza `cava` (config raw pipewire)
`Lyrics.ts`	Búsqueda de letras	`curl` a `lrclib.net/api/search` (con retry de título limpio)
`YtDlp.ts`	Filtro música en historial	`yt-dlp --print categories`
`ListenHistory.ts`	Historial de escucha	persiste `~/.cache/ags/listen-history.json`
`Perf.ts`	Modo Low-end device	lee `lowEndDevice` de `user-settings.json`; expone `clampInterval`, `LYRIC_SYNC_MS`, `LOW_END`
`DashLog.ts`	Logs del dashboard	persiste `~/.cache/ags/logs/*.json`
`MusicBarVisibility.ts`	Mostrar/ocultar barra de música	—

app.ts además lanza al arrancar ~/.config/ags/scripts/hypr-focus-fix.py (fix de foco de Hyprland).

Notas y recursos¶

Documentación oficial de AGS v3 (Astal)
GJS Documentation
Referencia GTK3
AstalMpris — MPRIS2 bindings
Para el formato de archivos de letra: ver Letras (.lyr)

AGS Bar¶

Índice¶

Resumen¶

Archivos¶

Constantes y variables globales¶

MusicBar.tsx¶

app.ts — Punto de entrada¶

Función main()¶

style.scss — Estilos¶

Variables de color principales¶

Bar.tsx — Barra principal¶

Componentes¶

Launcher¶

ColorPicker¶

Clock¶

CalendarWidget¶

VolumeWidget¶

MicWidget¶

NetworkWidget¶

BluetoothWidget¶

VpnWidget¶

NotifBell¶

WorkspacesWidget¶

Taskbar¶

Tray¶

MusicBar.tsx — Barra de música¶

Píldoras¶

Componentes internos¶

AlbumArt¶

MediaInfo¶

MediaControls¶

ProgressBar (seek)¶

LyricsViewer¶

buildNowPlayingContent(player)¶

openFlyoutWin(gdkmonitor, content)¶

ProgressBar en flyout (progScale)¶

CommandCenter.tsx¶

Botones disponibles¶

Keybinds.tsx¶

parseKeybinds()¶

humanize(cmd)¶

PowerMenu.tsx¶

NotificationCenter.tsx¶

Funciones exportadas¶

NotificationPopup.tsx¶

OSD.tsx¶

cava.ts — Visualizador de audio¶

Configuración embebida¶

Propiedad bars¶

WifiMenu.tsx¶

Backend soportados¶

Detección de interfaz¶

Funciones principales¶

Características¶

SettingsPanel.tsx¶

Páginas¶

Almacenamiento¶

Funciones exportadas¶

Clases style.scss y scripts por componente¶

Barra inferior — widget/Bar/Bar.tsx¶

Widget del clima — widget/Panels/Weather.tsx¶

Barra de música — widget/Bar/MusicBar.tsx¶

Ventanas / paneles — widget/Panels/¶

Módulos helper (sin UI) — widget/Helpers/¶

Notas y recursos¶

Función `main()`¶

`Launcher`¶

`ColorPicker`¶

`Clock`¶

`CalendarWidget`¶

`VolumeWidget`¶

`MicWidget`¶

`NetworkWidget`¶

`BluetoothWidget`¶

`VpnWidget`¶

`NotifBell`¶

`WorkspacesWidget`¶

`Taskbar`¶

`Tray`¶

`AlbumArt`¶

`MediaInfo`¶

`MediaControls`¶

`ProgressBar` (seek)¶

`LyricsViewer`¶

`buildNowPlayingContent(player)`¶

`openFlyoutWin(gdkmonitor, content)`¶

`ProgressBar` en flyout (progScale)¶

`parseKeybinds()`¶

`humanize(cmd)`¶

Propiedad `bars`¶

Clases `style.scss` y scripts por componente¶

Barra inferior — `widget/Bar/Bar.tsx`¶

Widget del clima — `widget/Panels/Weather.tsx`¶

Barra de música — `widget/Bar/MusicBar.tsx`¶

Ventanas / paneles — `widget/Panels/`¶

Módulos helper (sin UI) — `widget/Helpers/`¶