Rework alarm icon: tilt for escalation, rock for ringing

Replace the flashing colored dots with progressive bell rotations
(-22.5°/45°/60° for MIGHT_BE_BUSY/BUSY/MIGHT_NEED_ATTENTION) and
replace the subtle button pulse with a bell rocking ±45° for
ALARM_RINGING. No background tint on the ringing state — just the
warning foreground color plus motion carries the signal.

Adds cfg.alarm.ringingPaused (flipped under Chromatic UA, mirroring
the marching-ants pattern) so visual-regression snapshots freeze the
bell at +45° instead of capturing random animation frames.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: nedtwigg

lib/.storybook/preview.ts

@@ -17,9 +17,10 @@ import { cfg } from '../src/cfg';
 // Initialize fake platform once at module scope
 const fakePlatform = initPlatform('fake');
 
-// Pin marching-ants animation at T=0 for deterministic Chromatic snapshots
+// Pin animations at T=0 for deterministic Chromatic snapshots
 if (window?.navigator?.userAgent?.includes('Chromatic')) {
   cfg.marchingAnts.paused = true;
+  cfg.alarm.ringingPaused = true;
 }
 
 // Collect all CSS variable names across all themes for cleanup

lib/src/cfg.ts

@@ -26,6 +26,8 @@ export const cfg = {
     resizeDebounce: 500,
     /** ms — attention idle expiry. How long before "looking at this pane" wears off. */
     userAttention: 15_000,
+    /** When true, the ALARM_RINGING bell-ring animation is frozen at T=0 (for deterministic Chromatic snapshots). */
+    ringingPaused: false,
   },
   todoBucket: {
     /** Seconds of idle time needed to un-strike one letter of the soft-TODO pill.

lib/src/components/Door.tsx

@@ -1,6 +1,7 @@
 import { BellIcon } from '@phosphor-icons/react';
 import { TODO_OFF, isSoftTodo, type SessionStatus, type TodoState } from '../lib/terminal-registry';
 import { useTodoPillContent } from './TodoPillBody';
+import { cfg } from '../cfg';
 
 export interface DoorProps {
   doorId?: string;
@@ -37,9 +38,7 @@ export function Door({
       className={[
         'relative flex h-6 max-w-[220px] min-w-[68px] items-center gap-2 overflow-hidden px-2.5',
         'rounded-t-md',
-        alarmRinging
-          ? 'bg-warning/10 motion-safe:animate-pulse motion-reduce:animate-none ring-1 ring-warning/60'
-          : 'bg-surface',
+        'bg-surface',
         'text-[10px] font-medium font-mono tracking-[0.02em]',
         'transition-colors hover:bg-surface-raised',
       ].join(' ')}
@@ -66,16 +65,22 @@ export function Door({
             </span>
           )}
           {alarmEnabled && (
-            <span className={['relative', alarmRinging ? 'text-warning' : (isActive && windowFocused) ? 'text-foreground' : 'text-muted'].join(' ')}>
-              <BellIcon size={11} weight="fill" />
-              {(status === 'MIGHT_BE_BUSY' || status === 'BUSY' || status === 'MIGHT_NEED_ATTENTION') && (
-                <span className={[
-                  'absolute -top-0.5 -right-0.5 h-1 w-1 rounded-full',
-                  status === 'MIGHT_BE_BUSY' && 'bg-foreground/40',
-                  status === 'BUSY' && 'bg-accent motion-safe:animate-alarm-dot motion-reduce:animate-none',
-                  status === 'MIGHT_NEED_ATTENTION' && 'bg-warning/60 motion-safe:animate-alarm-dot motion-reduce:animate-none',
-                ].filter(Boolean).join(' ')} />
-              )}
+            <span className={[alarmRinging ? 'text-warning' : (isActive && windowFocused) ? 'text-foreground' : 'text-muted'].join(' ')}>
+              <BellIcon
+                size={11}
+                weight="fill"
+                className={[
+                  'transition-transform',
+                  status === 'MIGHT_BE_BUSY' && '-rotate-[22.5deg]',
+                  status === 'BUSY' && 'rotate-45',
+                  status === 'MIGHT_NEED_ATTENTION' && 'rotate-[60deg]',
+                  status === 'ALARM_RINGING' && (
+                    cfg.alarm.ringingPaused
+                      ? 'rotate-45'
+                      : 'motion-safe:animate-bell-ring motion-reduce:rotate-45'
+                  ),
+                ].filter(Boolean).join(' ')}
+              />
             </span>
           )}
         </span>

lib/src/components/Pond.tsx

@@ -702,7 +702,7 @@ export function TerminalPaneHeader({ api }: IDockviewPanelHeaderProps) {
           className={[
             'flex h-5 min-w-5 items-center justify-center rounded transition-colors shrink-0',
             sessionState.status === 'ALARM_RINGING'
-              ? 'bg-warning/15 text-warning hover:bg-warning/20 motion-safe:animate-pulse motion-reduce:animate-none'
+              ? 'text-warning hover:bg-foreground/10'
               : 'text-muted hover:bg-foreground/10 hover:text-foreground',
           ].join(' ')}
           onMouseDownCapture={(e) => {
@@ -725,19 +725,25 @@ export function TerminalPaneHeader({ api }: IDockviewPanelHeaderProps) {
           tooltip={alarmButtonTooltip}
           dataAlarmButtonFor={api.id}
         >
-          <span className="relative flex items-center justify-center">
+          <span className="flex items-center justify-center">
             {sessionState.status === 'ALARM_DISABLED' ? (
               <BellSlashIcon size={14} />
             ) : (
-              <BellIcon size={14} weight="fill" />
-            )}
-            {(sessionState.status === 'MIGHT_BE_BUSY' || sessionState.status === 'BUSY' || sessionState.status === 'MIGHT_NEED_ATTENTION') && (
-              <span className={[
-                'absolute -top-0.5 -right-0.5 h-[6px] w-[6px] rounded-full border border-surface-alt',
-                sessionState.status === 'MIGHT_BE_BUSY' && 'bg-foreground/40',
-                sessionState.status === 'BUSY' && 'bg-accent motion-safe:animate-alarm-dot motion-reduce:animate-none',
-                sessionState.status === 'MIGHT_NEED_ATTENTION' && 'bg-warning/60 motion-safe:animate-alarm-dot motion-reduce:animate-none',
-              ].filter(Boolean).join(' ')} />
+              <BellIcon
+                size={14}
+                weight="fill"
+                className={[
+                  'transition-transform',
+                  sessionState.status === 'MIGHT_BE_BUSY' && '-rotate-[22.5deg]',
+                  sessionState.status === 'BUSY' && 'rotate-45',
+                  sessionState.status === 'MIGHT_NEED_ATTENTION' && 'rotate-[60deg]',
+                  sessionState.status === 'ALARM_RINGING' && (
+                    cfg.alarm.ringingPaused
+                      ? 'rotate-45'
+                      : 'motion-safe:animate-bell-ring motion-reduce:rotate-45'
+                  ),
+                ].filter(Boolean).join(' ')}
+              />
             )}
           </span>
         </HeaderActionButton>

lib/src/theme.css

@@ -67,7 +67,7 @@
   --color-button-hover-bg: var(--vscode-button-hoverBackground, #1177bb);
 
   /* Animation */
-  --animate-alarm-dot: alarm-dot 2s ease-in-out infinite;
+  --animate-bell-ring: bell-ring 800ms ease-in-out infinite;
   --animate-shake-x: shake-x 400ms ease-out;
 }
 
@@ -133,9 +133,9 @@ body.vscode-light {
   }
 }
 
-@keyframes alarm-dot {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
+@keyframes bell-ring {
+  0%, 100% { transform: rotate(45deg); }
+  50%      { transform: rotate(-45deg); }
 }
 
 @keyframes shake-x {