From 940ce16c3a4056add736f2ddb30619836bc58351 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 30 Oct 2026 07:05:47 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Added=20focus-visible?=
 =?UTF-8?q?=20styles=20to=20topbar=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added `focus-visible` styles (`focus-visible:outline-2 focus-visible:outline-[var(--color-accent)]`) to interactive `<button>` tags within the top navigation bar components (`AppHeader.tsx`, `WatchAlertsMenu.tsx`, `ActiveRuns.tsx`, and `LaunchedAgentsMenu.tsx`). This significantly improves keyboard accessibility by providing visual feedback during navigation.

Co-authored-by: bobdivx <6737167+bobdivx@users.noreply.github.com>
---
 apps/web/src/components/ActiveRuns.tsx         |  4 ++--
 apps/web/src/components/AppHeader.tsx          |  4 ++--
 apps/web/src/components/LaunchedAgentsMenu.tsx | 10 +++++-----
 apps/web/src/components/WatchAlertsMenu.tsx    |  4 ++--
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/ActiveRuns.tsx b/apps/web/src/components/ActiveRuns.tsx
index 6c39c4eebb..71e4be6186 100644
--- a/apps/web/src/components/ActiveRuns.tsx
+++ b/apps/web/src/components/ActiveRuns.tsx
@@ -56,7 +56,7 @@ export function ActiveRunRows({ runs, onPick }: { runs: AgentRunInfo[]; onPick:
         <li key={run.run_uuid}>
           <button
             type="button"
-            class="flex min-h-[44px] w-full min-w-0 items-center gap-2.5 px-3 py-2 text-left transition hover:bg-white/5"
+            class="flex min-h-[44px] w-full min-w-0 items-center gap-2.5 px-3 py-2 text-left transition hover:bg-white/5 focus-visible:outline-2 focus-visible:outline-[var(--color-accent)]"
             onClick={() => onPick(run)}
           >
             <Dot status={run.status} />
@@ -110,7 +110,7 @@ export function ActiveRunsMenu() {
     <>
       <button
         type="button"
-        class="hidden min-h-[44px] shrink-0 items-center gap-2 rounded-full border border-[var(--color-line)] bg-white/[0.03] px-3 text-sm text-[var(--color-ink)] transition hover:border-white/20 md:flex"
+        class="hidden min-h-[44px] shrink-0 items-center gap-2 rounded-full border border-[var(--color-line)] bg-white/[0.03] px-3 text-sm text-[var(--color-ink)] transition hover:border-white/20 focus-visible:outline-2 focus-visible:outline-[var(--color-accent)] md:flex"
         aria-haspopup="dialog"
         onClick={() => setOpen(true)}
       >
diff --git a/apps/web/src/components/AppHeader.tsx b/apps/web/src/components/AppHeader.tsx
index 051a87465c..a0292a3435 100644
--- a/apps/web/src/components/AppHeader.tsx
+++ b/apps/web/src/components/AppHeader.tsx
@@ -137,7 +137,7 @@ export function AppHeader({
       <div class="relative shrink-0" ref={menuRef}>
         <button
           type="button"
-          class="flex min-h-[44px] min-w-[44px] items-center justify-center gap-2.5 rounded-full border border-[var(--color-line)] bg-white/[0.03] p-1 transition-[border-color,background-color,transform] duration-200 hover:border-white/20 hover:bg-white/[0.06] active:scale-[0.99] sm:justify-start sm:pr-3"
+          class="flex min-h-[44px] min-w-[44px] items-center justify-center gap-2.5 rounded-full border border-[var(--color-line)] bg-white/[0.03] p-1 transition-[border-color,background-color,transform] duration-200 hover:border-white/20 hover:bg-white/[0.06] active:scale-[0.99] focus-visible:outline-2 focus-visible:outline-[var(--color-accent)] sm:justify-start sm:pr-3"
           aria-label={`Compte : ${displayName}`}
           aria-expanded={menuOpen}
           aria-haspopup="menu"
@@ -215,7 +215,7 @@ export function AppHeader({
               type="button"
               role="menuitem"
               disabled={loggingOut}
-              class="block w-full px-3 py-2.5 text-left text-sm text-[var(--color-danger)] transition hover:bg-white/5 disabled:opacity-50"
+              class="block w-full px-3 py-2.5 text-left text-sm text-[var(--color-danger)] transition hover:bg-white/5 disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-[var(--color-accent)]"
               onClick={logout}
             >
               {loggingOut ? 'Déconnexion…' : 'Se déconnecter'}
diff --git a/apps/web/src/components/LaunchedAgentsMenu.tsx b/apps/web/src/components/LaunchedAgentsMenu.tsx
index b6e36e3ecf..5136b9b2d6 100644
--- a/apps/web/src/components/LaunchedAgentsMenu.tsx
+++ b/apps/web/src/components/LaunchedAgentsMenu.tsx
@@ -61,7 +61,7 @@ export function LaunchedAgentRows({
             <button
               type="button"
               class={cn(
-                'flex min-w-0 flex-1 items-center gap-2.5 text-left transition hover:bg-white/5',
+                'flex min-w-0 flex-1 items-center gap-2.5 text-left transition hover:bg-white/5 focus-visible:outline-2 focus-visible:outline-[var(--color-accent)]',
                 dense ? 'px-3 py-2' : 'min-h-[44px] px-3 py-2.5',
               )}
               onClick={() => {
@@ -81,7 +81,7 @@ export function LaunchedAgentRows({
             </button>
             <button
               type="button"
-              class="shrink-0 px-3 text-sm text-[var(--color-ink-faint)] transition hover:bg-white/5 hover:text-[var(--color-ink)]"
+              class="shrink-0 px-3 text-sm text-[var(--color-ink-faint)] transition hover:bg-white/5 hover:text-[var(--color-ink)] focus-visible:outline-2 focus-visible:outline-[var(--color-accent)]"
               aria-label={`Retirer ${agent.title}`}
               onClick={() => dismissLaunchedAgent(agent.uuid)}
             >
@@ -131,7 +131,7 @@ export function LaunchedAgentsMenu() {
       <div class="flex min-h-[44px] items-center rounded-full border border-[var(--color-line)] bg-white/[0.03]">
         <button
           type="button"
-          class="flex min-w-0 items-center gap-2 py-1 pl-2.5 pr-2 transition hover:text-[var(--color-ink)]"
+          class="flex min-w-0 items-center gap-2 py-1 pl-2.5 pr-2 transition hover:text-[var(--color-ink)] focus-visible:outline-2 focus-visible:outline-[var(--color-accent)]"
           onClick={openLatest}
           title={latest.projectName ? `${latest.title} · ${latest.projectName}` : latest.title}
         >
@@ -143,7 +143,7 @@ export function LaunchedAgentsMenu() {
         {agents.length > 1 ? (
           <button
             type="button"
-            class="flex h-8 items-center gap-1 border-l border-[var(--color-line)] px-2.5 text-[11px] font-medium text-[var(--color-ink-muted)] transition hover:text-[var(--color-ink)]"
+            class="flex h-8 items-center gap-1 border-l border-[var(--color-line)] px-2.5 text-[11px] font-medium text-[var(--color-ink-muted)] transition hover:text-[var(--color-ink)] focus-visible:outline-2 focus-visible:outline-[var(--color-accent)]"
             aria-expanded={open}
             aria-haspopup="menu"
             aria-label="Agents lancés"
@@ -166,7 +166,7 @@ export function LaunchedAgentsMenu() {
         ) : (
           <button
             type="button"
-            class="pr-2.5 text-sm text-[var(--color-ink-faint)] transition hover:text-[var(--color-ink)]"
+            class="pr-2.5 text-sm text-[var(--color-ink-faint)] transition hover:text-[var(--color-ink)] focus-visible:outline-2 focus-visible:outline-[var(--color-accent)]"
             aria-label={`Retirer ${latest.title}`}
             onClick={() => dismissLaunchedAgent(latest.uuid)}
           >
diff --git a/apps/web/src/components/WatchAlertsMenu.tsx b/apps/web/src/components/WatchAlertsMenu.tsx
index d0aeb10674..01045ef962 100644
--- a/apps/web/src/components/WatchAlertsMenu.tsx
+++ b/apps/web/src/components/WatchAlertsMenu.tsx
@@ -73,7 +73,7 @@ export function WatchAlertsMenu() {
     <>
       <button
         type="button"
-        class="flex min-h-[44px] shrink-0 items-center gap-1.5 rounded-full border border-[var(--color-line)] bg-white/[0.03] px-3 text-sm text-[var(--color-ink)] transition hover:border-white/20"
+        class="flex min-h-[44px] shrink-0 items-center gap-1.5 rounded-full border border-[var(--color-line)] bg-white/[0.03] px-3 text-sm text-[var(--color-ink)] transition hover:border-white/20 focus-visible:outline-2 focus-visible:outline-[var(--color-accent)]"
         aria-haspopup="dialog"
         aria-label={`${unread} alerte${unread > 1 ? 's' : ''} de surveillance`}
         onClick={() => setOpen(true)}
@@ -111,7 +111,7 @@ export function WatchAlertsMenu() {
               <li key={a.uuid}>
                 <button
                   type="button"
-                  class="flex min-h-[44px] w-full min-w-0 items-start gap-2.5 px-4 py-2.5 text-left transition hover:bg-white/5"
+                  class="flex min-h-[44px] w-full min-w-0 items-start gap-2.5 px-4 py-2.5 text-left transition hover:bg-white/5 focus-visible:outline-2 focus-visible:outline-[var(--color-accent)]"
                   onClick={() => void pick(a)}
                 >
                   <span