fix(ags-v3): audit fixes — portable brain path, reactive volume, SCSS dedup

- brain.ts: BRAIN_ROOT résolu via $BRAIN_ROOT env / ~/.config/brain-path / fallback ~/Dev/Brain
- Volume.tsx: bindings volume + mute séparés et réactifs
- style.scss: importe _bar.scss et _heartbeat.scss via @use, supprime 199 lignes dupliquées

ags-v3/lib/brain.ts

@@ -1,6 +1,8 @@
 import GLib from "gi://GLib"
 
-const BRAIN_ROOT = "/home/tetardtek/Dev/Cortex-Template"
+const BRAIN_ROOT = GLib.getenv("BRAIN_ROOT")
+  || readFile(GLib.get_home_dir() + "/.config/brain-path")?.trim()
+  || GLib.get_home_dir() + "/Dev/Brain"
 
 export interface BrainState {
   focus: string

ags-v3/style.scss

@@ -1,4 +1,6 @@
 @use "styles/palette" as *;
+@use "styles/heartbeat";
+@use "styles/bar";
 
 * {
   font-family: $font;
@@ -6,203 +8,6 @@
   font-weight: bold;
 }
 
-// ── Layer 0 — Heartbeat ──
-window.Heartbeat {
-  background: transparent;
-
-  .heartbeat-line {
-    background: linear-gradient(
-      to right,
-      rgba(255, 77, 166, 0.0),
-      rgba(255, 77, 166, 0.6),
-      rgba(201, 160, 255, 0.8),
-      rgba(255, 77, 166, 0.6),
-      rgba(255, 77, 166, 0.0)
-    );
-    min-height: 4px;
-  }
-}
-
-// ── Layer 1 — Ghost Bar ──
-window.Bar {
-  background: transparent;
-
-  > centerbox {
-    background: rgba(38, 21, 55, 0.88);
-    border-radius: $radius;
-    border: 3px solid rgba(255, 77, 166, 0.60);
-    margin: 6px 8px;
-    padding: 0 8px;
-    min-height: 38px;
-  }
-
-  .modules-left,
-  .modules-center,
-  .modules-right {
-    padding: 0 4px;
-  }
-
-  .module {
-    padding: 0 8px;
-    color: $text;
-  }
-
-  .prompt-name {
-    color: $magenta;
-    font-size: 14px;
-    padding: 0 0 0 10px;
-  }
-
-  .prompt-cursor {
-    color: $lilac;
-    font-size: 14px;
-    font-weight: 900;
-  }
-
-  .separator {
-    color: rgba(240, 234, 248, 0.12);
-    font-size: 11px;
-    padding: 0 4px;
-    font-weight: normal;
-  }
-
-  // ── clock ──
-  .clock {
-    color: $magenta;
-    font-weight: 900;
-    font-size: 14px;
-    letter-spacing: 0.04em;
-    padding: 0 10px;
-  }
-
-  .date {
-    color: $lavande;
-    font-size: 12px;
-    font-weight: normal;
-    padding: 0 10px 0 2px;
-  }
-
-  // ── system stats ──
-  .cpu {
-    color: $lavande;
-    &.warning { color: $champagne; }
-    &.critical { color: $danger; }
-  }
-
-  .ram {
-    color: $magenta;
-    &.warning { color: $champagne; }
-    &.critical { color: $danger; }
-  }
-
-  // ── network ──
-  .network {
-    color: $lavande;
-    font-size: 12px;
-    padding: 0 8px;
-    &.disconnected { color: $danger; }
-  }
-
-  // ── volume ──
-  .volume {
-    color: $magenta;
-    padding: 0 8px;
-    &.muted { color: rgba(255, 77, 166, 0.30); }
-  }
-
-  // ── battery ──
-  .battery {
-    color: $magenta;
-    padding: 0 8px;
-    &.charging { color: $mitsuri; }
-    &.low { color: $danger; }
-    &.warning { color: $champagne; }
-  }
-
-  // ── hover effects ──
-  .module:hover,
-  .cpu:hover,
-  .ram:hover,
-  .network:hover,
-  .battery:hover {
-    color: $lilac;
-  }
-
-  // ── systray ──
-  .systray {
-    padding: 0 4px;
-  }
-
-  .systray-item {
-    background: transparent;
-    border: none;
-    padding: 0 3px;
-    min-width: 0;
-    min-height: 0;
-
-    &:hover {
-      background: rgba(201, 160, 255, 0.12);
-      border-radius: $radius-sm;
-    }
-  }
-
-  // ── volume interactive ──
-  button.volume,
-  button.muted {
-    background: transparent;
-    border: none;
-    padding: 0 8px;
-    min-width: 0;
-    min-height: 0;
-
-    label { color: $magenta; }
-    &.muted label { color: rgba(255, 77, 166, 0.30); }
-    &:hover label { color: $lilac; }
-  }
-
-  // ── media ──
-  .media-module {
-    padding: 0 4px;
-  }
-
-  .media {
-    padding: 0 4px;
-  }
-
-  .media.paused {
-    .media-text {
-      color: rgba(201, 160, 255, 0.50);
-      font-style: italic;
-    }
-  }
-
-  .media-text {
-    color: $lilac;
-    font-size: 12px;
-    font-weight: normal;
-    padding: 0 6px;
-  }
-
-  .media-prev,
-  .media-play,
-  .media-next {
-    background: transparent;
-    border: none;
-    padding: 0 3px;
-    min-width: 0;
-    min-height: 0;
-
-    label {
-      color: $lilac;
-      font-size: 13px;
-    }
-
-    &:hover label {
-      color: $magenta;
-    }
-  }
-}
-
 // ── Layer 3 — Brain Power Panel ──
 window.BrainPower {
   background: transparent;

ags-v3/styles/_bar.scss

@@ -1,7 +1,6 @@
 @use "palette" as *;
 
 // Layer 1 — Ghost bar (hover reveal)
-// GTK CSS alpha() must be unquoted strings to pass through SCSS compiler
 
 window.Bar {
   background: transparent;
@@ -24,10 +23,18 @@ window.Bar {
   .module {
     padding: 0 8px;
     color: $text;
-
-    &:hover {
-      color: $lilac;
   }
+
+  .prompt-name {
+    color: $magenta;
+    font-size: 14px;
+    padding: 0 0 0 10px;
+  }
+
+  .prompt-cursor {
+    color: $lilac;
+    font-size: 14px;
+    font-weight: 900;
   }
 
   .separator {
@@ -44,8 +51,6 @@ window.Bar {
     font-size: 14px;
     letter-spacing: 0.04em;
     padding: 0 10px;
-
-    &:hover { color: $lilac; }
   }
 
   .date {
@@ -55,7 +60,7 @@ window.Bar {
     padding: 0 10px 0 2px;
   }
 
-  // ── system ──
+  // ── system stats ──
   .cpu { color: $lavande; }
   .ram { color: $magenta; }
   .temp {
@@ -73,39 +78,93 @@ window.Bar {
   .network {
     color: $lavande;
     font-size: 12px;
+    padding: 0 8px;
     &.disconnected { color: $danger; }
   }
 
   // ── volume ──
-  .volume {
+  button.volume,
-    color: $magenta;
+  button.muted {
-    &.muted { color: rgba(255, 77, 166, 0.30); }
+    background: transparent;
+    border: none;
+    padding: 0 8px;
+    min-width: 0;
+    min-height: 0;
+
+    label { color: $magenta; }
+    &.muted label { color: rgba(255, 77, 166, 0.30); }
+    &:hover label { color: $lilac; }
   }
 
   // ── battery ──
   .battery {
     color: $magenta;
+    padding: 0 8px;
     &.charging { color: $mitsuri; }
     &.low { color: $danger; }
     &.warning { color: $champagne; }
   }
 
   // ── media ──
-  .media {
+  .media-module {
-    color: $lilac;
+    padding: 0 4px;
-    font-size: 12px;
+  }
-    font-weight: normal;
-    padding: 0 10px;
 
-    &.paused {
+  .media {
+    padding: 0 4px;
+
+    &.paused .media-text {
       color: rgba(201, 160, 255, 0.50);  // $lilac @ 0.50
       font-style: italic;
     }
   }
 
+  .media-text {
+    color: $lilac;
+    font-size: 12px;
+    font-weight: normal;
+    padding: 0 6px;
+  }
+
+  .media-prev,
+  .media-play,
+  .media-next {
+    background: transparent;
+    border: none;
+    padding: 0 3px;
+    min-width: 0;
+    min-height: 0;
+
+    label { color: $lilac; font-size: 13px; }
+    &:hover label { color: $magenta; }
+  }
+
   // ── systray ──
   .systray {
-    padding: 0 6px;
+    padding: 0 4px;
+  }
+
+  .systray-item {
+    background: transparent;
+    border: none;
+    padding: 0 3px;
+    min-width: 0;
+    min-height: 0;
+
+    &:hover {
+      background: rgba(201, 160, 255, 0.12);
+      border-radius: $radius-sm;
+    }
+  }
+
+  // ── hover effects ──
+  .module:hover,
+  .clock:hover,
+  .cpu:hover,
+  .ram:hover,
+  .network:hover,
+  .battery:hover {
+    color: $lilac;
   }
 
   // ── workspaces ──

ags-v3/widget/modules/Volume.tsx

@@ -4,7 +4,10 @@ import { createBinding } from "ags"
 export default function Volume() {
   const speaker = AstalWp.get_default()!.defaultSpeaker!
 
-  const text = createBinding(speaker, "volume")((v: number) => {
+  const volume = createBinding(speaker, "volume")
+  const mute = createBinding(speaker, "mute")
+
+  const text = volume((v: number) => {
     const pct = Math.round(v * 100)
     const muted = speaker.mute
     let icon = "󰕾"
@@ -16,7 +19,7 @@ export default function Volume() {
     return `${icon} ${pct}%`
   })
 
-  const cls = createBinding(speaker, "mute")((m: boolean) =>
+  const cls = mute((m: boolean) =>
     m ? "volume muted" : "volume"
   )