feat(ags-v3): desktop adaptation — ultrawide scaling, brain power panel, system stats

- Scaling 16px base pour ultrawide 3440x1440
- Bar: CPU/RAM/GPU visible, media single player (skip playerctld), network tooltip LAN/WAN IPv4
- Volume: class module pour sizing cohérent
- Battery: désactivé (PC fixe)
- Clock: tooltip calendrier + uptime
- BrainPower: panel enrichi (focus, session, intentions, todos, repos git, derniers commits)
- App: BrainPower sur moniteur principal uniquement
- Heartbeat: Layer.TOP pour compatibilité COSMIC

ags-v3/app.ts

@@ -7,11 +7,14 @@ import BrainPower from "./widget/panels/BrainPower"
 app.start({
   css: style,
   main() {
-    for (const monitor of app.get_monitors()) {
+    const monitors = app.get_monitors()
+    for (const monitor of monitors) {
       Heartbeat(monitor)
       Bar(monitor)
-      BrainPower(monitor)
     }
+    // Brain Power on primary monitor only
+    const primary = monitors[0]
+    if (primary) BrainPower(primary)
   },
   requestHandler(request: any, res: (response: any) => void) {
     const cmd = String(request)

ags-v3/lib/brain.ts

@@ -1,4 +1,5 @@
 import GLib from "gi://GLib"
+import { exec } from "ags/process"
 
 const BRAIN_ROOT = GLib.getenv("BRAIN_ROOT")
   || readFile(GLib.get_home_dir() + "/.config/brain-path")?.trim()
@@ -8,6 +9,10 @@ export interface BrainState {
   focus: string
   todos: { open: number; done: number; top3: string[] }
   session: string | null
+  intentions: { active: number; names: string[] }
+  repos: { name: string; status: string }[]
+  commits: string[]
+  kernelVersion: string
 }
 
 function readFile(path: string): string | null {
@@ -20,10 +25,13 @@ function readFile(path: string): string | null {
   return null
 }
 
+function sh(cmd: string): string {
+  try { return exec(`bash -c "${cmd}"`).trim() } catch { return "" }
+}
+
 export function getFocus(): string {
   const content = readFile(`${BRAIN_ROOT}/focus.md`)
   if (!content) return "no focus"
-  // skip header lines, get the meat
   const lines = content.split("\n").filter(
     (l) => !l.startsWith("#") && !l.startsWith(">") && l.trim() !== "" && !l.startsWith("---")
   )
@@ -47,11 +55,7 @@ export function getTodos(): { open: number; done: number; top3: string[] } {
     }
   }
 
-  return {
+  return { open: open.length, done, top3: open.slice(0, 3) }
-    open: open.length,
-    done,
-    top3: open.slice(0, 3),
-  }
 }
 
 export function getSession(): string | null {
@@ -66,10 +70,53 @@ export function getSession(): string | null {
   return null
 }
 
+export function getIntentions(): { active: number; names: string[] } {
+  try {
+    const out = sh(`grep -rl 'status: active' ${BRAIN_ROOT}/intentions/*.yml 2>/dev/null | while read f; do grep '^name:' "$f" | head -1 | sed 's/name: //'; done`)
+    const names = out.split("\n").filter(Boolean)
+    return { active: names.length, names: names.slice(0, 5) }
+  } catch {
+    return { active: 0, names: [] }
+  }
+}
+
+export function getRepoStatus(): { name: string; status: string }[] {
+  const repos = [
+    { name: "brain", path: BRAIN_ROOT },
+    { name: "toolkit", path: `${BRAIN_ROOT}/toolkit` },
+    { name: "progression", path: `${BRAIN_ROOT}/progression` },
+  ]
+
+  return repos.map(({ name, path }) => {
+    const count = sh(`git -C ${path} status --short 2>/dev/null | wc -l`)
+    const n = parseInt(count) || 0
+    return {
+      name,
+      status: n === 0 ? "✅" : `⚠️ ${n} fichiers`,
+    }
+  })
+}
+
+export function getRecentCommits(): string[] {
+  const out = sh(`git -C ${BRAIN_ROOT} log --oneline -5 2>/dev/null`)
+  return out.split("\n").filter(Boolean)
+}
+
+export function getKernelVersion(): string {
+  const content = readFile(`${BRAIN_ROOT}/brain-compose.yml`)
+  if (!content) return "?"
+  const match = content.match(/^version:\s*"?([^"\n]+)"?/m)
+  return match ? match[1] : "?"
+}
+
 export function getBrainState(): BrainState {
   return {
     focus: getFocus(),
     todos: getTodos(),
     session: getSession(),
+    intentions: getIntentions(),
+    repos: getRepoStatus(),
+    commits: getRecentCommits(),
+    kernelVersion: getKernelVersion(),
   }
 }

ags-v3/style.scss

@@ -4,7 +4,7 @@
 
 * {
   font-family: $font;
-  font-size: 13px;
+  font-size: 16px;
   font-weight: bold;
 }
 
@@ -96,10 +96,32 @@ window.BrainPower {
     padding: 4px 0 4px 16px;
   }
 
-  .brain-terminal-placeholder {
+  .brain-version {
     color: $muted;
-    font-size: 11px;
+    font-size: 12px;
-    font-style: italic;
+    font-weight: normal;
-    padding: 8px 0 4px 16px;
+  }
+
+  .brain-intentions-list {
+    color: $mitsuri;
+    font-size: 13px;
+    font-weight: normal;
+    padding: 4px 0 4px 16px;
+  }
+
+  .brain-repos-status {
+    color: $subtext1;
+    font-size: 13px;
+    font-weight: normal;
+    font-family: "Maple Mono NF", monospace;
+    padding: 4px 0 4px 16px;
+  }
+
+  .brain-commits-list {
+    color: $subtext0;
+    font-size: 12px;
+    font-weight: normal;
+    font-family: "Maple Mono NF", monospace;
+    padding: 4px 0 4px 16px;
   }
 }

ags-v3/styles/_bar.scss

@@ -11,7 +11,7 @@ window.Bar {
     border: 3px solid rgba(255, 77, 166, 0.60);  // $magenta @ 0.60
     margin: 6px 8px;
     padding: 0 8px;
-    min-height: 38px;
+    min-height: 48px;
   }
 
   .modules-left,
@@ -27,20 +27,20 @@ window.Bar {
 
   .prompt-name {
     color: $magenta;
-    font-size: 14px;
+    font-size: 17px;
-    padding: 0 0 0 10px;
+    padding: 0 0 0 14px;
   }
 
   .prompt-cursor {
     color: $lilac;
-    font-size: 14px;
+    font-size: 17px;
     font-weight: 900;
   }
 
   .separator {
     color: rgba(240, 234, 248, 0.12);  // $text @ 0.12
-    font-size: 11px;
+    font-size: 14px;
-    padding: 0 4px;
+    padding: 0 6px;
     font-weight: normal;
   }
 
@@ -48,14 +48,14 @@ window.Bar {
   .clock {
     color: $magenta;
     font-weight: 900;
-    font-size: 14px;
+    font-size: 18px;
     letter-spacing: 0.04em;
     padding: 0 10px;
   }
 
   .date {
     color: $lavande;
-    font-size: 12px;
+    font-size: 15px;
     font-weight: normal;
     padding: 0 10px 0 2px;
   }
@@ -69,7 +69,9 @@ window.Bar {
     font-weight: normal;
   }
 
-  .cpu, .ram, .temp {
+  .gpu { color: $mitsuri; }
+
+  .cpu, .ram, .gpu, .temp {
     &.warning { color: $champagne; }
     &.critical { color: $danger; }
   }
@@ -77,8 +79,8 @@ window.Bar {
   // ── network ──
   .network {
     color: $lavande;
-    font-size: 12px;
+    font-size: 15px;
-    padding: 0 8px;
+    padding: 0 10px;
     &.disconnected { color: $danger; }
   }
 
@@ -121,7 +123,7 @@ window.Bar {
 
   .media-text {
     color: $lilac;
-    font-size: 12px;
+    font-size: 15px;
     font-weight: normal;
     padding: 0 6px;
   }
@@ -135,7 +137,7 @@ window.Bar {
     min-width: 0;
     min-height: 0;
 
-    label { color: $lilac; font-size: 13px; }
+    label { color: $lilac; font-size: 16px; }
     &:hover label { color: $magenta; }
   }
 

ags-v3/widget/Bar.tsx

@@ -1,12 +1,12 @@
 import app from "ags/gtk3/app"
 import { Astal, Gtk, Gdk } from "ags/gtk3"
 import Clock from "./modules/Clock"
-import Battery from "./modules/Battery"
+// import Battery from "./modules/Battery"  // desktop — no battery
 import Volume from "./modules/Volume"
 import Network from "./modules/Network"
 import SystemStats from "./modules/SystemStats"
 import Media from "./modules/Media"
-import SysTray from "./modules/SysTray"
+// import SysTray from "./modules/SysTray"  // TODO: needs astal-tray (appmenu-glib-translator)
 import Prompt from "./modules/Prompt"
 
 export default function Bar(gdkmonitor: Gdk.Monitor) {
@@ -33,7 +33,7 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
     <window
       class="Bar"
       name="bar"
-      visible={false}
+      visible={true}
       gdkmonitor={gdkmonitor}
       exclusivity={Astal.Exclusivity.EXCLUSIVE}
       anchor={TOP | LEFT | RIGHT}
@@ -42,9 +42,8 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
     >
       <eventbox
         onHover={() => cancelHide()}
-        onHoverLost={(self) => {
+        onHoverLost={(_self) => {
-          const win = self.get_toplevel() as Astal.Window
+          // disabled for debug — auto-hide off
-          scheduleHide(win)
         }}
       >
         <centerbox>
@@ -59,13 +58,10 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
             <Clock />
           </box>
           <box $type="end" class="modules-right" halign={Gtk.Align.END}>
-            <SysTray />
+            {/* <SysTray /> */}
-            <label class="separator" label="│" />
             <Network />
             <label class="separator" label="│" />
             <Volume />
-            <label class="separator" label="│" />
-            <Battery />
           </box>
         </centerbox>
       </eventbox>

ags-v3/widget/Heartbeat.tsx

@@ -11,7 +11,7 @@ export default function Heartbeat(gdkmonitor: Gdk.Monitor) {
       exclusivity={Astal.Exclusivity.NONE}
       anchor={TOP | LEFT | RIGHT}
       application={app}
-      layer={Astal.Layer.OVERLAY}
+      layer={Astal.Layer.TOP}
     >
       <eventbox
         onHover={() => {

ags-v3/widget/modules/Battery.tsx

@@ -1,16 +1,12 @@
 import AstalBattery from "gi://AstalBattery"
-import { createBinding, createDerivedBinding } from "ags"
+import { createBinding } from "ags"
 
 export default function Battery() {
   const bat = AstalBattery.get_default()
 
-  const percentage = createBinding(bat, "percentage")
+  const text = createBinding(bat, "percentage")((p: number) => {
-  const charging = createBinding(bat, "charging")
-
-  const text = createDerivedBinding(
-    [percentage, charging],
-    (p: number, isCharging: boolean) => {
     const pct = Math.round(p * 100)
+    const isCharging = bat.charging
     let icon = ""
     if (isCharging) icon = "󰂄"
     else if (pct > 90) icon = "󰁹"
@@ -20,19 +16,15 @@ export default function Battery() {
     else if (pct > 10) icon = "󰁻"
     else icon = "󰂃"
     return `${icon} ${pct}%`
-    },
+  })
-  )
 
-  const cls = createDerivedBinding(
+  const cls = createBinding(bat, "percentage")((p: number) => {
-    [percentage, charging],
-    (p: number, isCharging: boolean) => {
     const pct = Math.round(p * 100)
-      if (isCharging) return "battery charging"
+    if (bat.charging) return "battery charging"
     if (pct <= 10) return "battery low"
     if (pct <= 20) return "battery warning"
     return "battery"
-    },
+  })
-  )
 
   return <label class={cls} label={text} />
 }

ags-v3/widget/modules/Clock.tsx

@@ -1,4 +1,5 @@
 import { createPoll } from "ags/time"
+import { exec } from "ags/process"
 
 function formatTime(): string {
   const now = new Date()
@@ -10,6 +11,16 @@ function formatTime(): string {
 }
 
 function formatDate(): string {
+  const now = new Date()
+  return now.toLocaleDateString("fr-FR", {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  })
+}
+
+function formatDateShort(): string {
   const now = new Date()
   return now.toLocaleDateString("fr-FR", {
     weekday: "short",
@@ -18,15 +29,44 @@ function formatDate(): string {
   })
 }
 
+function getCalendar(): string {
+  try {
+    return exec("bash -c \"cal -h\"").trim()
+  } catch {
+    return ""
+  }
+}
+
+function getUptime(): string {
+  try {
+    return exec("bash -c \"uptime -p | sed 's/up //'\"").trim()
+  } catch {
+    return ""
+  }
+}
+
+function buildTooltip(): string {
+  const full = formatDate()
+  const cal = getCalendar()
+  const up = getUptime()
+  return `${full}\n\n${cal}\n\n⏱ uptime: ${up}`
+}
+
 export default function Clock() {
   const time = createPoll("", 1000, () => formatTime())
-  const date = createPoll("", 60000, () => formatDate())
+  const date = createPoll("", 60000, () => formatDateShort())
 
   return (
     <box>
       <label class="clock" label={time} />
       <label class="separator" label="│" />
-      <label class="date" label={date} />
+      <eventbox
+        onHover={(self) => {
+          self.tooltipText = buildTooltip()
+        }}
+      >
+        <label class="date" label={date} hasTooltip />
+      </eventbox>
     </box>
   )
 }

ags-v3/widget/modules/Media.tsx

@@ -5,24 +5,27 @@ export default function Media() {
   const mpris = AstalMpris.get_default()
   const players = createBinding(mpris, "players")
 
+  // Filter to only show non-playerctld players
+  const filtered = players((list: AstalMpris.Player[]) =>
+    list.filter((p) => p.busName && !p.busName.includes("playerctld")).slice(0, 1)
+  )
+
   return (
     <box class="media-module">
-      <For each={players}>
+      <For each={filtered}>
         {(player) => {
           const title = createBinding(player, "title")
-          const artist = createBinding(player, "artist")
           const status = createBinding(player, "playbackStatus")
 
           const icon = status((s: AstalMpris.PlaybackStatus) =>
-            s === AstalMpris.PlaybackStatus.PLAYING ? "󰐊" : "󰏤"
+            s === AstalMpris.PlaybackStatus.PLAYING ? "▶" : "⏸"
           )
 
           const label = title((t: string) => {
             const a = player.artist
             const display = a ? `${a} — ${t}` : t
-            // truncate long titles
+            return display.length > 45
-            return display.length > 40
+              ? display.substring(0, 42) + "..."
-              ? display.substring(0, 37) + "..."
               : display
           })
 
@@ -32,23 +35,14 @@ export default function Media() {
 
           return (
             <box class={cls}>
-              <button
+              <button class="media-prev" onClicked={() => player.previous()}>
-                class="media-prev"
+                <label label="⏮" />
-                onClicked={() => player.previous()}
-              >
-                <label label="󰒮" />
               </button>
-              <button
+              <button class="media-play" onClicked={() => player.play_pause()}>
-                class="media-play"
-                onClicked={() => player.play_pause()}
-              >
                 <label label={icon} />
               </button>
-              <button
+              <button class="media-next" onClicked={() => player.next()}>
-                class="media-next"
+                <label label="⏭" />
-                onClicked={() => player.next()}
-              >
-                <label label="󰒭" />
               </button>
               <label class="media-text" label={label} />
             </box>

ags-v3/widget/modules/Network.tsx

@@ -1,5 +1,16 @@
 import AstalNetwork from "gi://AstalNetwork"
 import { createBinding } from "ags"
+import { exec } from "ags/process"
+
+function getIPs(): string {
+  try {
+    const lan = exec("bash -c \"hostname -I | awk '{print $1}'\"").trim()
+    const wan = exec("bash -c \"curl -4 -s --max-time 2 ifconfig.me\"").trim()
+    return `LAN: ${lan || "?"}\nWAN: ${wan || "?"}`
+  } catch {
+    return "IPs unavailable"
+  }
+}
 
 export default function Network() {
   const net = AstalNetwork.get_default()
@@ -17,15 +28,23 @@ export default function Network() {
       else if (strength > 20) icon = "󰤟"
       return `${icon} ${ssid}`
     }
-    if (type === AstalNetwork.Primary.WIRED) return "󰈀 eth"
+    if (type === AstalNetwork.Primary.WIRED) return "󰈀 wired"
     return "󰤮 offline"
   })
 
   const cls = createBinding(net, "primary")((type: AstalNetwork.Primary) => {
-    if (type === AstalNetwork.Primary.WIFI) return "network wifi"
+    if (type === AstalNetwork.Primary.WIFI) return "network module wifi"
-    if (type === AstalNetwork.Primary.WIRED) return "network wired"
+    if (type === AstalNetwork.Primary.WIRED) return "network module wired"
-    return "network disconnected"
+    return "network module disconnected"
   })
 
-  return <label class={cls} label={text} />
+  return (
+    <eventbox
+      onHover={(self) => {
+        self.tooltipText = getIPs()
+      }}
+    >
+      <label class={cls} label={text} hasTooltip />
+    </eventbox>
+  )
 }

ags-v3/widget/modules/SystemStats.tsx

@@ -1,5 +1,6 @@
 import GLib from "gi://GLib"
 import { createPoll } from "ags/time"
+import { exec } from "ags/process"
 
 function readProc(path: string): string | null {
   try {
@@ -16,9 +17,9 @@ function getCpuUsage(): string {
   const content = readProc("/proc/stat")
   if (!content) return "?"
 
-  const line = content.split("\n")[0]  // "cpu  user nice system idle ..."
+  const line = content.split("\n")[0]
   const parts = line.split(/\s+/).slice(1).map(Number)
-  const idle = parts[3] + parts[4]  // idle + iowait
+  const idle = parts[3] + parts[4]
   const total = parts.reduce((a, b) => a + b, 0)
 
   const dIdle = idle - prevIdle
@@ -30,31 +31,59 @@ function getCpuUsage(): string {
   return `${Math.round(((dTotal - dIdle) / dTotal) * 100)}`
 }
 
-function getRamUsage(): string {
+function getRamUsage(): { pct: string; used: string; total: string } {
   const content = readProc("/proc/meminfo")
-  if (!content) return "?"
+  if (!content) return { pct: "?", used: "?", total: "?" }
 
   const lines = content.split("\n")
-  let total = 0, available = 0
+  let totalKb = 0, availableKb = 0
 
   for (const line of lines) {
-    if (line.startsWith("MemTotal:")) total = parseInt(line.split(/\s+/)[1])
+    if (line.startsWith("MemTotal:")) totalKb = parseInt(line.split(/\s+/)[1])
-    if (line.startsWith("MemAvailable:")) available = parseInt(line.split(/\s+/)[1])
+    if (line.startsWith("MemAvailable:")) availableKb = parseInt(line.split(/\s+/)[1])
-    if (total && available) break
+    if (totalKb && availableKb) break
   }
 
-  if (!total) return "?"
+  if (!totalKb) return { pct: "?", used: "?", total: "?" }
-  return `${Math.round(((total - available) / total) * 100)}`
+  const usedGb = ((totalKb - availableKb) / 1048576).toFixed(1)
+  const totalGb = (totalKb / 1048576).toFixed(0)
+  const pct = `${Math.round(((totalKb - availableKb) / totalKb) * 100)}`
+  return { pct, used: usedGb, total: totalGb }
+}
+
+function getGpuInfo(): string {
+  try {
+    const out = exec("bash -c \"nvidia-smi --query-gpu=utilization.gpu,temperature.gpu --format=csv,noheader,nounits 2>/dev/null\"")
+    const [usage, temp] = out.trim().split(", ")
+    return `GPU ${usage}% · ${temp}°C`
+  } catch {
+    return ""
+  }
 }
 
 export default function SystemStats() {
   const cpu = createPoll("0", 3000, () => getCpuUsage())
-  const ram = createPoll("0", 5000, () => getRamUsage())
+  const ram = createPoll("", 5000, () => {
+    const r = getRamUsage()
+    return JSON.stringify(r)
+  })
+
+  const ramLabel = ram((v: string) => {
+    try {
+      const r = JSON.parse(v)
+      return `RAM ${r.used}/${r.total}G`
+    } catch { return "RAM ?" }
+  })
+
+  const gpu = createPoll("", 5000, () => getGpuInfo())
 
   return (
     <box>
-      <label class="cpu module" label={cpu((v: string) => ` ${v}%`)} />
+      <label class="cpu module" label={cpu((v: string) => `CPU ${v}%`)} />
-      <label class="ram module" label={ram((v: string) => `󰍛 ${v}%`)} />
+      <label class="separator" label="│" />
+      <label class="ram module" label={ramLabel} />
+      <label class="separator" label="│" />
+      <label class="gpu module" label={gpu((v: string) => v || "GPU ?")} />
     </box>
   )
 }

ags-v3/widget/modules/Volume.tsx

@@ -20,7 +20,7 @@ export default function Volume() {
   })
 
   const cls = mute((m: boolean) =>
-    m ? "volume muted" : "volume"
+    m ? "volume module muted" : "volume module"
   )
 
   return (

ags-v3/widget/panels/BrainPower.tsx

@@ -6,15 +6,40 @@ import { getBrainState } from "../../lib/brain"
 function BrainContent() {
   const state = createPoll("", 10000, () => JSON.stringify(getBrainState()))
 
+  const version = state((s: string) => {
+    try { return `kernel v${JSON.parse(s).kernelVersion}` } catch { return "" }
+  })
+
   const focus = state((s: string) => {
     try { return JSON.parse(s).focus } catch { return "..." }
   })
 
-  const todosLabel = state((s: string) => {
+  const session = state((s: string) => {
+    try {
+      const sess = JSON.parse(s).session
+      return sess || "aucune session active"
+    } catch { return "..." }
+  })
+
+  const intentionsTitle = state((s: string) => {
+    try {
+      const i = JSON.parse(s).intentions
+      return `  INTENTIONS (${i.active} active${i.active > 1 ? "s" : ""})`
+    } catch { return "  INTENTIONS" }
+  })
+
+  const intentionsList = state((s: string) => {
+    try {
+      const names = JSON.parse(s).intentions.names
+      return names.map((n: string) => `  • ${n}`).join("\n") || "  aucune"
+    } catch { return "..." }
+  })
+
+  const todosTitle = state((s: string) => {
     try {
       const t = JSON.parse(s).todos
       return `${t.open} ouverts / ${t.done} faits`
-    } catch { return "..." }
+    } catch { return "" }
   })
 
   const todosList = state((s: string) => {
@@ -24,22 +49,32 @@ function BrainContent() {
     } catch { return "..." }
   })
 
-  const session = state((s: string) => {
+  const reposStatus = state((s: string) => {
     try {
-      const sess = JSON.parse(s).session
+      const repos = JSON.parse(s).repos
-      return sess || "aucune"
+      return repos.map((r: any) => `  ${r.name.padEnd(14)} ${r.status}`).join("\n")
+    } catch { return "..." }
+  })
+
+  const commitsList = state((s: string) => {
+    try {
+      const commits = JSON.parse(s).commits
+      return commits.map((c: string) => `  ${c}`).join("\n") || "  aucun"
     } catch { return "..." }
   })
 
   return (
     <box orientation={Gtk.Orientation.VERTICAL} class="brain-content">
+      {/* FOCUS */}
       <box class="brain-section">
         <label class="brain-section-title" label="  FOCUS" xalign={0} />
+        <label class="brain-version" label={version} xalign={1} hexpand />
       </box>
       <label class="brain-focus" label={focus} xalign={0} wrap />
 
       <box class="brain-divider" />
 
+      {/* SESSION */}
       <box class="brain-section">
         <label class="brain-section-title" label="  SESSION" xalign={0} />
       </box>
@@ -47,18 +82,36 @@ function BrainContent() {
 
       <box class="brain-divider" />
 
+      {/* INTENTIONS */}
+      <box class="brain-section">
+        <label class="brain-section-title" label={intentionsTitle} xalign={0} />
+      </box>
+      <label class="brain-intentions-list" label={intentionsList} xalign={0} />
+
+      <box class="brain-divider" />
+
+      {/* TODOS */}
       <box class="brain-section">
         <label class="brain-section-title" label="󰄲  TODOS" xalign={0} />
-        <label class="brain-todos-count" label={todosLabel} xalign={1} hexpand />
+        <label class="brain-todos-count" label={todosTitle} xalign={1} hexpand />
       </box>
       <label class="brain-todos-list" label={todosList} xalign={0} />
 
       <box class="brain-divider" />
 
+      {/* REPOS */}
       <box class="brain-section">
-        <label class="brain-section-title" label="  TERMINAL" xalign={0} />
+        <label class="brain-section-title" label="  REPOS" xalign={0} />
       </box>
-      <label class="brain-terminal-placeholder" label="  bientôt — agent brain-hud" xalign={0} />
+      <label class="brain-repos-status" label={reposStatus} xalign={0} />
+
+      <box class="brain-divider" />
+
+      {/* COMMITS */}
+      <box class="brain-section">
+        <label class="brain-section-title" label="  DERNIERS COMMITS" xalign={0} />
+      </box>
+      <label class="brain-commits-list" label={commitsList} xalign={0} />
     </box>
   )
 }