feat(ui): connection status in the header; README screenshots as WebP

- Desktop shows "offline" with a red dot under the user name when the
  server is unreachable; phones show a green/red dot on the avatar.
  Based on the app-wide realtime connection, so a server outage is
  noticed even while the device has network (4 s grace period).
- Screenshots converted to WebP (1280 px desktop, 480 px phone, q90),
  e2e/screenshots.sh converts with cwebp; new journal picture with
  round corners. Rules in AGENTS.md.
- Release v0.26.0.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/App.tsx

@@ -56,6 +56,7 @@ import { WorkspaceView } from './features/workspace/WorkspaceView';
 import { SharedListsView } from './features/lists/SharedListsView';
 import { SetupAndAuthView } from './features/auth/SetupAndAuthView';
 import { OfflineBanner } from './components/OfflineBanner';
+import { useServerOnline } from './lib/useServerOnline';
 import { SharedImportToast } from './components/SharedImportToast';
 import { outboxCount, clearOfflineData } from './lib/offline';
 import { DemoCountdown } from './components/DemoCountdown';
@@ -179,6 +180,7 @@ export const App: React.FC = () => {
 
   // Profile Dropdown State
   const [showProfileMenu, setShowProfileMenu] = useState(false);
+  const serverOnline = useServerOnline();
   const [showAbout, setShowAbout] = useState(false);
   const dropdownRef = useRef<HTMLDivElement | null>(null);
 
@@ -947,7 +949,17 @@ export const App: React.FC = () => {
               }`}
               title="Profil & Einstellungen"
             >
-              <UserAvatar user={user} size="md" className="shadow-sm" />
+              <span className="relative">
+                <UserAvatar user={user} size="md" className="shadow-sm" />
+                {/* Connection status like in a chat app: green online, red without server */}
+                <span
+                  role="status"
+                  aria-label={serverOnline ? 'Online' : 'Offline – keine Verbindung zum Server'}
+                  className={`absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full ring-2 ring-canvas ${
+                    serverOnline ? 'bg-status-ok' : 'bg-status-err'
+                  }`}
+                />
+              </span>
             </button>
           </div>
         </div>
@@ -1013,8 +1025,20 @@ export const App: React.FC = () => {
               title="Benutzermenü öffnen"
             >
               <UserAvatar user={user} size="sm" />
-              <span className="max-w-[130px] truncate hidden sm:inline text-main font-medium">
-                {user.displayName}
+              <span className="flex flex-col items-start leading-tight">
+                <span className="max-w-[130px] truncate hidden sm:inline text-main font-medium">
+                  {user.displayName}
+                </span>
+                {!serverOnline && (
+                  <span
+                    role="status"
+                    title="Keine Verbindung zum Server – Änderungen werden später synchronisiert"
+                    className="hidden sm:inline-flex items-center gap-1 text-[10px] font-normal text-muted"
+                  >
+                    <span className="w-1.5 h-1.5 rounded-full bg-status-err" />
+                    offline
+                  </span>
+                )}
               </span>
               <ChevronDown className="w-3.5 h-3.5 text-muted group-hover:text-main transition-colors" />
             </button>