From b334b8b228ea16c60c3bb3a962ee3441675d3b7a Mon Sep 17 00:00:00 2001
From: Luke Norland <217919286+Luke-Norland@users.noreply.github.com>
Date: Tue, 6 Oct 2026 11:39:03 +0000
Subject: [PATCH] fix(sidebar): keep the notification repair state from
 blocking the session row

A watched session whose browser has no push subscription shows the
repair state: "Repair notifications when the assistant has a reply ready
on this device". The bell rendered that sentence as visible row text
(max-w-48, about 192px, wrapping to five lines) inside a shrink-0
wrapper in the row's actions slot. It squeezed the row's open button to
about 12px, covered the session name so clicks landed on the text, and
pushed the repair (wrench) button past the sidebar's edge, where it was
clipped. The session could not be opened from the sidebar.

The status span is now always sr-only. It is still announced and still
the buttons' aria-describedby. In the repair state the row shows only
the bell and the wrench at the bell's existing size; the wrench already
carries the repair sentence as its title and aria-label and still runs
repairDevice. Environmental reasons that used to show visible text
(permission denied, insecure context, iOS install, unsupported) become
part of the bell's tooltip. External and live rows share the component.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../SessionCompletionBell.test.tsx              | 17 ++++++++++++++++-
 .../subcomponents/SessionCompletionBell.tsx     | 10 ++++++++--
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/sidebar/view/subcomponents/SessionCompletionBell.test.tsx b/src/components/sidebar/view/subcomponents/SessionCompletionBell.test.tsx
index 3add7281..9753a958 100644
--- a/src/components/sidebar/view/subcomponents/SessionCompletionBell.test.tsx
+++ b/src/components/sidebar/view/subcomponents/SessionCompletionBell.test.tsx
@@ -143,7 +143,11 @@ test('SessionCompletionBell shows localized environmental guidance without a rep
   ] as const satisfies readonly (readonly [CompletionNotificationReason, string])[]) {
     const html = await renderBell({ error });
     assert.match(html, new RegExp(message.replace(/[.?]/g, '\\$&')), `${error} explains what prevents notifications`);
-    assert.match(html, /class="max-w-48 text-xs text-destructive"/, `${error} guidance is visible`);
+    // Visible text in the row's action slot squeezed the open button; the guidance is a tooltip.
+    assert.doesNotMatch(html, /max-w-48|text-xs text-destructive/, `${error} guidance is not visible row text`);
+    assert.match(html, /class="sr-only" role="status"/, `${error} guidance is still announced`);
+    const bellTitle = /<button[^>]*title="([^"]*)"/.exec(html)?.[1] ?? '';
+    assert.ok(bellTitle.includes(message.replace(/'/g, '&#x27;')), `${error} guidance is the bell's tooltip`);
     assert.equal((html.match(/<button/g) ?? []).length, 1, `${error} does not offer repair`);
   }
 });
@@ -161,6 +165,17 @@ test('SessionCompletionBell announces errors without changing pressed owner inte
   }
 });
 
+test('SessionCompletionBell shows repair as a wrench with the sentence as its tooltip, never as row text', async () => {
+  const watchedItem = item(true);
+  const html = await renderBell({ item: watchedItem, target: watchedItem.target ?? null, deviceRepairRequired: true, globalPaused: true });
+  const repair = enSidebar.completionNotifications.repair;
+  assert.match(html, /lucide-wrench/);
+  assert.ok(html.includes(`title="${repair}" aria-label="${repair}"`), 'the wrench carries the repair sentence');
+  assert.doesNotMatch(html, /max-w-48|text-xs text-destructive/, 'no visible status text in the row');
+  assert.match(html, /class="sr-only" role="status"/);
+  assert.equal((html.match(/<button/g) ?? []).length, 2);
+});
+
 test('SessionCompletionBell composes paused status with concurrent error and pending state', async () => {
   const watchedItem = item(true);
   const pausedWithError = await renderBell({
diff --git a/src/components/sidebar/view/subcomponents/SessionCompletionBell.tsx b/src/components/sidebar/view/subcomponents/SessionCompletionBell.tsx
index 240b8f91..519ec429 100644
--- a/src/components/sidebar/view/subcomponents/SessionCompletionBell.tsx
+++ b/src/components/sidebar/view/subcomponents/SessionCompletionBell.tsx
@@ -106,13 +106,19 @@ export default function SessionCompletionBell({ descriptor, className }: Session
   const environmentalReason = reason !== null && ENVIRONMENTAL_REASONS.includes(reason);
 
   const statusRequiresAction = environmentalReason || repairRequired;
+  // Visible text here squeezed the row's open button to nothing and pushed the
+  // wrench out of the sidebar, so the status is only read out and shown as a
+  // tooltip: on the wrench when repair is required, otherwise on the bell.
+  const bellTitle = statusRequiresAction && !repairRequired && statusText
+    ? `${watchLabel}\n${statusText}`
+    : watchLabel;
 
   return (
     <span className={cn('flex shrink-0 items-center gap-1', className)}>
       {statusText && (
         <span
           id={statusId}
-          className={statusRequiresAction ? 'max-w-48 text-xs text-destructive' : 'sr-only'}
+          className="sr-only"
           role="status"
           aria-live="polite"
         >
@@ -121,7 +127,7 @@ export default function SessionCompletionBell({ descriptor, className }: Session
       )}
       <button
         type="button"
-        title={watchLabel}
+        title={bellTitle}
         aria-label={watchLabel}
         aria-describedby={statusText ? statusId : undefined}
         aria-pressed={watched}