fix(frontend): correct OS push notification icons and add web app manifest

[kcze]

Why

Follow-up to #13231. That PR replaced the OS push-notification icon field, but the change didn't actually reach iOS — iOS Safari/PWA web push uses the installed home-screen app icon, not the notification.icon field, and this project had no apple-touch-icon and no web manifest. The Android notification badge was also reusing the full-color icon, which Android renders as a filled silhouette instead of the AutoGPT mark (badge must be alpha-only).

So the previous PR fixed desktop Chrome / Android-Chrome-not-installed but left iOS and the Android status-bar badge unfixed. This PR closes those gaps and tightens the icon crop while we're here.

What

• Tighter notification icon crop — notification-icon-192.png (and the restored 512) are center-cropped to ~60% so the gpt mark fills the frame instead of swimming in padding.
• Web app manifest — new public/manifest.webmanifest declares 192 + 512 icons with purpose: "any maskable", plus app name / theme color / display: standalone. Makes the site installable as a PWA on Android and provides iOS 16.4+ with the metadata it needs to treat the home-screen install as a web-push-eligible PWA.
• Apple touch icon — new public/apple-touch-icon.png (180×180, cropped) is what iOS actually uses for both the home-screen install and the icon shown in web-push notifications.
• Android monochrome badge — new public/notification-badge-96.png (96×96, transparent background, full-bleed gpt mark on the alpha channel). Android tints the alpha with the system color; non-Android badge consumers see the dark-navy mark on transparent.
• Wired into Next.js metadata — src/app/layout.tsx now declares manifest: "/manifest.webmanifest" and icons.apple: "/apple-touch-icon.png".
• push-sw.js — badge now points at /notification-badge-96.png (icon still points at /notification-icon-192.png).

How

• Icons cropped from the user-supplied branding favicons (favicon_io_light_on_dark_bg for filled icons, favicon_io_dark_no_bg for the alpha-only badge).
• The cropped mark sits ~32% from center vs. Android's 40% safe-zone radius, so it survives Android's circular mask and iOS's squircle mask.
• The badge is resize-only (no crop) — the no-background source already fills its canvas edge-to-edge, so cropping it would clip the logo.
• Next.js metadata API emits the appropriate <link rel="manifest"> and <link rel="apple-touch-icon"> tags automatically.

Per-platform coverage after this PR

Surface	Icon source	Status
Desktop Chrome / macOS notification	notification.icon → /notification-icon-192.png	Fixed (this PR + #13231)
Android Chrome web push (not installed)	notification.icon → /notification-icon-192.png	Fixed (this PR + #13231)
Android Chrome web push (installed PWA)	manifest icons	Fixed (this PR)
Android status-bar badge	notification.badge → /notification-badge-96.png	Fixed (this PR)
iOS Safari/PWA web push (16.4+)	apple-touch-icon	Fixed (this PR)

Notes

• Pre-existing TypeScript errors on dev from a stale generated API client (missing useListBotPlatforms, search.msw) are unrelated to this PR's diff.

Checklist

• Icons + badge verified visually
• Manifest + apple-touch-icon wired in layout.tsx
• Manual verification on iOS Safari/PWA (Add to Home Screen → trigger AutoPilot completion)
• Manual verification on Android Chrome (browser + installed PWA) with a real AutoPilot session completion

[coderabbitai]

Walkthrough

Adds a PWA manifest, references it and an Apple touch icon in Next.js metadata, and changes the service worker push notification badge image to /notification-badge-96.png.

Changes

PWA Support

Layer / File(s)	Summary
PWA manifest, metadata, and push badge autogpt_platform/frontend/public/manifest.webmanifest, autogpt_platform/frontend/src/app/layout.tsx, autogpt_platform/frontend/public/push-sw.js	Adds manifest.webmanifest with app identity, display mode, theme/background colors, and 192/512 maskable PNG icons; updates exported metadata to include manifest: "/manifest.webmanifest" and apple: "/apple-touch-icon.png"; changes push notification badge asset to /notification-badge-96.png.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related issues

• fix(frontend/autopilot): improve AutoPilot OS push notification icon and copy #13211: Overlaps on updating notification icon/badge assets and PWA manifest/icon updates.

Possibly related PRs

• Significant-Gravitas/AutoGPT#13231: Modifies push notification presentation assets in push-sw.js, related to the badge/icon changes here.

Suggested reviewers

• 0ubbe
• ntindle

Poem

🐰 I scurried in the code tonight, a tiny manifest in tow,
Icons snug and colors set, so mobile users know,
A badge that gleams at ninety-six, notifications bright,
AutoGPT hops to home screens, ready for the night. 🥕✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title accurately summarizes the main change: fixing OS push notification icons and adding a web app manifest, which aligns with the changeset additions of manifest.webmanifest, apple-touch-icon, notification-icon updates, and metadata wiring.
Description check	✅ Passed	The description comprehensively explains the why, what, and how of the changes, directly relating to the manifest, icon assets, and layout.tsx metadata updates shown in the changeset.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch kpczerwinski/open-3139-crop-notification-icon

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 72.48%. Comparing base (a873021) to head (0698ffc).
⚠️ Report is 2 commits behind head on dev.

Additional details and impacted files

@@            Coverage Diff             @@
##              dev   #13245      +/-   ##
==========================================
- Coverage   72.54%   72.48%   -0.06%     
==========================================
  Files        2349     2348       -1     
  Lines      174820   174608     -212     
  Branches    17727    17740      +13     
==========================================
- Hits       126817   126573     -244     
- Misses      44243    44275      +32     
  Partials     3760     3760              

Flag	Coverage Δ
platform-frontend	39.88% <ø> (-0.08%)	⬇️
platform-frontend-e2e	31.01% <ø> (-0.15%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Components	Coverage Δ
Platform Backend	80.44% <ø> (-0.02%)	⬇️
Platform Frontend	44.38% <ø> (-0.15%)	⬇️
AutoGPT Libs	∅ <ø> (∅)
Classic AutoGPT	28.43% <ø> (ø)

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.