fix(frontend/autopilot): improve AutoPilot OS push notification icon and copy - #13231
Conversation
Replaces blurry favicon-based notification icon with a dedicated 192x192 (and 512x512) PNG, and updates the copy to match the design mockup: title "AutoGPT", body "Task completed" / "Task failed". Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
github-project-automation
Bot
moved this to 🆕 Needs initial review
in AutoGPT development kanban
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📜 Recent review details⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
WalkthroughThe PR updates Copilot task completion notifications across the frontend: a new shared ChangesCopilot Task Completion Notifications
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## dev #13231 +/- ##
==========================================
- Coverage 72.33% 72.15% -0.18%
==========================================
Files 2299 2284 -15
Lines 173117 171359 -1758
Branches 17515 17431 -84
==========================================
- Hits 125221 123646 -1575
+ Misses 44185 44022 -163
+ Partials 3711 3691 -20
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
Pulls the OS-notification title/body/icon out of the inline call site and into an exported constant in copilot/helpers.ts, then asserts it matches the values hardcoded in public/push-sw.js. Brings the codecov patch coverage on the changed lines back to 100%. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Adds a focused integration test that simulates a copilot_completion session_completed WebSocket event and asserts the in-page Notification fallback fires with the correct title/body/icon. Lifts the changed showBrowserNotification call site out of codecov's uncovered diff so the patch coverage check goes green. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Accidentally committed in 6e5500b — local agent state, not part of the PR. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@autogpt_platform/frontend/src/app/`(platform)/copilot/__tests__/useCopilotNotifications.test.tsx:
- Around line 95-107: The test uses a fixed sleep and a non-asserted
capturedHandler which can hide setup failures; update the test for
useCopilotNotifications to first assert capturedHandler is defined (or waitFor
it) after renderHook, then dispatch the event, and replace the setTimeout +
direct expect with a testing-library waitFor assertion that NotificationCtor is
not called; reference the useCopilotNotifications hook, the capturedHandler
variable, and NotificationCtor to locate where to add the precondition and to
use waitFor for the negative assertion.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 6229bb4e-14ee-42bb-86b6-ca04b69e79f6
📒 Files selected for processing (1)
autogpt_platform/frontend/src/app/(platform)/copilot/__tests__/useCopilotNotifications.test.tsx
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: check API types
- GitHub Check: integration_test
- GitHub Check: end-to-end tests
- GitHub Check: Check PR Status
- GitHub Check: Analyze (python)
🧰 Additional context used
📓 Path-based instructions (12)
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}: Use Node.js 21+ with pnpm package manager for frontend development
Always run 'pnpm format' for formatting and linting code in frontend developmentFormat frontend code using
pnpm format
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}: Fully capitalize acronyms in symbols, e.g.graphID,useBackendAPI
No linter suppressors (//@ts-ignore``,// eslint-disable) — fix the actual issue
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/__tests__/useCopilotNotifications.test.tsx
autogpt_platform/frontend/**/*.{tsx,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{tsx,ts}: Use function declarations for components and handlers (not arrow functions) in React components
Only use arrow functions for small inline lambdas (map, filter, etc.) in React components
Use PascalCase for component names and camelCase with 'use' prefix for hook names in React
Use Tailwind CSS utilities only for styling in frontend components
Use design system components from 'src/components/' (atoms, molecules, organisms) in frontend development
Never use 'src/components/legacy/' in frontend code
Only use Phosphor Icons (@phosphor-icons/react) for icons in frontend components
Use generated API hooks from '@/app/api/__generated__/endpoints/' instead of deprecated 'BackendAPI' or 'src/lib/autogpt-server-api/'
Use React Query for server state (via generated hooks) in frontend development
Default to client components ('use client') in Next.js; only use server components for SEO or extreme TTFB needs
Use '' component for rendering errors in frontend UI; use toast notifications for mutation errors; use 'Sentry.captureException()' for manual exceptions
Separate render logic from data/behavior in React components; keep comments minimal (code should be self-documenting)
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/__tests__/useCopilotNotifications.test.tsx
autogpt_platform/frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{ts,tsx}: No barrel files or 'index.ts' re-exports in frontend code
Regenerate API hooks with 'pnpm generate:api' after backend OpenAPI spec changes in frontend development
autogpt_platform/frontend/**/*.{ts,tsx}: Use function declarations (not arrow functions) for components/handlers
Noanytypes unless the value genuinely can be anything
Keep render functions and hooks under ~50 lines; extract named helpers or sub-components when they grow longer
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/__tests__/useCopilotNotifications.test.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/src/**/*.{ts,tsx}: Use generated API hooks from@/app/api/__generated__/endpoints/following the patternuse{Method}{Version}{OperationName}, and regenerate withpnpm generate:api
Separate render logic from business logic using component.tsx + useComponent.ts + helpers.ts pattern, colocate state when possible and avoid creating large components, use sub-components in local/componentsfolder
Use function declarations for components and handlers, use arrow functions only for callbacks
Do not useuseCallbackoruseMemounless asked to optimise a given function
autogpt_platform/frontend/src/**/*.{ts,tsx}: Keep files under ~200 lines; extract sub-components or hooks into their own files when a file grows beyond this
Use generated API hooks from@/app/api/__generated__/endpoints/with patternuse{Method}{Version}{OperationName}
Always import the-Icon-suffixed alias from@phosphor-icons/react(e.g.TrashIcon,PlusIcon,SquareIcon) — bare exports are deprecated
Do not useuseCallbackoruseMemounless asked to optimize a given function
Never usesrc/components/__legacy__/*— use design system components fromsrc/components/
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/__tests__/useCopilotNotifications.test.tsx
autogpt_platform/frontend/**/*.{tsx,css}
📄 CodeRabbit inference engine (AGENTS.md)
Use Tailwind CSS only for styling, use design tokens, and use Phosphor Icons only
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/__tests__/useCopilotNotifications.test.tsx
autogpt_platform/frontend/src/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Component props should use
interface Props { ... }(not exported) unless the interface needs to be used outside the component
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/__tests__/useCopilotNotifications.test.tsx
autogpt_platform/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Never type with
any, if no types available useunknown
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/__tests__/useCopilotNotifications.test.tsx
autogpt_platform/frontend/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/**/*.{test,spec}.{ts,tsx}: Use Vitest + RTL + MSW for integration tests as the primary testing approach (~90%, page-level), use Playwright for E2E critical flows, and use Storybook for design system components
Run frontend integration tests withpnpm test:unit(Vitest + RTL + MSW)
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/__tests__/useCopilotNotifications.test.tsx
autogpt_platform/frontend/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
autogpt_platform/frontend/**/*.{tsx,jsx}: Nodark:Tailwind classes — the design system handles dark mode
Use Next.js<Link>for internal navigation — never raw<a>tags
Use Tailwind CSS only for styling with design tokens and Phosphor Icons only
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/__tests__/useCopilotNotifications.test.tsx
autogpt_platform/frontend/src/app/**/__tests__/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Write integration tests in
__tests__/next topage.tsxusing Vitest + RTL + MSW for new pages/features
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/__tests__/useCopilotNotifications.test.tsx
autogpt_platform/frontend/src/**/__tests__/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Use Orval-generated MSW handlers from
@/app/api/__generated__/endpoints/{tag}/{tag}.msw.tsfor API mocking
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/__tests__/useCopilotNotifications.test.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Avoid index and barrel files
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/__tests__/useCopilotNotifications.test.tsx
🧠 Learnings (11)
📚 Learning: 2026-02-27T10:45:49.499Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12213
File: autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunMCPTool/helpers.tsx:23-24
Timestamp: 2026-02-27T10:45:49.499Z
Learning: Prefer using generated OpenAPI types from '`@/app/api/__generated__/`' for payloads defined in openapi.json (e.g., MCPToolsDiscoveredResponse, MCPToolOutputResponse). Use inline TypeScript interfaces only for payloads that are SSE-stream-only and not exposed via OpenAPI. Apply this pattern to frontend tool components (e.g., RunMCPTool) and related areas where similar SSE/openapi-discrepancies occur; avoid re-implementing types when a generated type is available.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/__tests__/useCopilotNotifications.test.tsx
📚 Learning: 2026-03-24T02:05:04.672Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12526
File: autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx:0-0
Timestamp: 2026-03-24T02:05:04.672Z
Learning: When gating React component logic on a React Query result (e.g., hooks like `useQuery` / `useGetV2GetCopilotUsage`), prefer destructuring and checking `isSuccess` (or aliasing it to a meaningful boolean like `isSuccess: hasUsage`) instead of relying on `!isLoading`. Reason: `isLoading` can be `false` in error/idle states where `data` may still be `undefined`, while `isSuccess` indicates the query completed successfully and `data` is populated.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/__tests__/useCopilotNotifications.test.tsx
📚 Learning: 2026-03-24T02:23:31.305Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12526
File: autogpt_platform/frontend/src/app/(platform)/copilot/components/RateLimitResetDialog/RateLimitResetDialog.tsx:0-0
Timestamp: 2026-03-24T02:23:31.305Z
Learning: In the Copilot platform UI code, follow the established Orval hook `onError` error-handling convention: first explicitly detect/handle `ApiError`, then read `error.response?.detail` (if present) as the primary message; if not available, fall back to `error.message`; and finally fall back to a generic string message. This convention should be used for generated Orval hooks even if the custom Orval mutator already maps details into `ApiError.message`, to keep consistency across hooks/components (e.g., `useCronSchedulerDialog.ts`, `useRunGraph.ts`, and rate-limit/reset flows).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/__tests__/useCopilotNotifications.test.tsx
📚 Learning: 2026-03-31T14:04:42.444Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12623
File: autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/ChatInput.tsx:172-177
Timestamp: 2026-03-31T14:04:42.444Z
Learning: In the Copilot frontend components under autogpt_platform/frontend/src/app/(platform)/copilot/, Tailwind dark mode variants (e.g., `dark:*`) are intentional and should be allowed. Do not flag `dark:` utilities in these Copilot UI components as incorrect; they are used to ensure proper contrast and correct behavior in both light and dark themes.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/__tests__/useCopilotNotifications.test.tsx
📚 Learning: 2026-04-01T18:54:16.035Z
Learnt from: Bentlybro
Repo: Significant-Gravitas/AutoGPT PR: 12633
File: autogpt_platform/frontend/src/app/(platform)/library/components/AgentFilterMenu/AgentFilterMenu.tsx:3-10
Timestamp: 2026-04-01T18:54:16.035Z
Learning: In the frontend, the legacy Select component at `@/components/__legacy__/ui/select` is an intentional, codebase-wide visual-consistency pattern. During code reviews, do not flag or block PRs merely for continuing to use this legacy Select. If a migration to the newer design-system Select is desired, bundle it into a single dedicated cleanup/migration PR that updates all Select usages together (e.g., avoid piecemeal replacements).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/__tests__/useCopilotNotifications.test.tsx
📚 Learning: 2026-04-07T09:24:16.582Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12686
File: autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/__tests__/PainPointsStep.test.tsx:1-19
Timestamp: 2026-04-07T09:24:16.582Z
Learning: In Significant-Gravitas/AutoGPT’s `autogpt_platform/frontend` (Vite + `vitejs/plugin-react` with the automatic JSX transform), do not flag usages of React types/components (e.g., `React.ReactNode`) in `.ts`/`.tsx` files as missing `React` imports. Since the React namespace is made available by the project’s TS/Vite setup, an explicit `import React from 'react'` or `import type { ReactNode } ...` is not required; only treat it as missing if typechecking (e.g., `pnpm types`) would actually fail.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/__tests__/useCopilotNotifications.test.tsx
📚 Learning: 2026-04-02T05:43:49.128Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12640
File: autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/WelcomeStep.tsx:13-13
Timestamp: 2026-04-02T05:43:49.128Z
Learning: Do not flag `import { Question } from "phosphor-icons/react"` as an invalid import. `Question` is a valid named export from `phosphor-icons/react` (as reflected in the package’s generated `.d.ts` files and re-exports via `dist/index.d.ts`), so it should be treated as a supported named export during code reviews.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/__tests__/useCopilotNotifications.test.tsx
📚 Learning: 2026-04-13T13:11:07.445Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12764
File: autogpt_platform/frontend/src/app/(platform)/library/components/SitrepItem/SitrepItem.tsx:143-145
Timestamp: 2026-04-13T13:11:07.445Z
Learning: In `autogpt_platform/frontend`, do not flag direct interpolation of `executionID` UUID strings into URL query parameters (e.g., `activeItem=${executionID}` in JSX/Next links). If the value is a UUID string matching `[0-9a-f-]`, it contains no reserved URL characters, so additional `encodeURIComponent` or Next.js object-based `href` encoding is unnecessary. Only treat it as an encoding issue if the query-param value is not guaranteed to be UUID-formatted (i.e., may include characters outside `[0-9a-f-]`).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/__tests__/useCopilotNotifications.test.tsx
📚 Learning: 2026-04-15T22:49:06.896Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11235
File: autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/ExecutionsTable.tsx:0-0
Timestamp: 2026-04-15T22:49:06.896Z
Learning: In the AutoGPT frontend (React Query + toast/ErrorCard patterns), do not require `Sentry.captureException` in React Query mutation `catch` blocks. React Query handles error propagation for mutation paths, so follow the established pattern: show toast notifications for mutation errors and use `ErrorCard` for render/fetch errors. Only add `Sentry.captureException` for truly manual/unexpected exception paths that are outside React Query’s control (e.g., standalone async utilities or event handlers not wired through React Query).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/__tests__/useCopilotNotifications.test.tsx
📚 Learning: 2026-04-20T13:17:39.951Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12854
File: autogpt_platform/frontend/src/app/(platform)/library/__tests__/briefing.test.tsx:84-84
Timestamp: 2026-04-20T13:17:39.951Z
Learning: In the AutoGPT frontend, `testing-library/react` cleanup is already handled globally after each test via `src/tests/integrations/vitest.setup.tsx`. Therefore, for integration test files under `__tests__/`, do NOT add redundant `afterEach(() => cleanup())`. Only add local `afterEach` teardown for resources that are not covered globally—specifically, when using fake timers, add `afterEach(() => vi.useRealTimers())` (or equivalent) to restore real timers and prevent cross-test interference.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/__tests__/useCopilotNotifications.test.tsx
📚 Learning: 2026-04-20T20:07:22.981Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11235
File: autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/__tests__/ExecutionsTable.test.tsx:27-76
Timestamp: 2026-04-20T20:07:22.981Z
Learning: In this codebase, Orval-generated API modules under `src/app/api/__generated__/` are not committed to git and must be generated via `pnpm generate:api` (requires a running backend). In integration tests, it’s acceptable—and expected—to stub generated hooks/modules by mocking them with `vi.mock("`@/app/api/__generated__/endpoints/`{tag}/{tag}")`. Do not treat `vi.mock` of these generated hook modules as a violation of the MSW handler guideline, since the corresponding MSW handlers cannot be imported at test time when generated files are absent.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/__tests__/useCopilotNotifications.test.tsx
Replaces the fixed setTimeout(20) with testing-library waitFor and adds an explicit precondition assertion that the WS handler was registered before dispatch. Addresses CodeRabbit feedback. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…rove-copilot-os-push-notification-icon
github-project-automation
Bot
moved this from 🆕 Needs initial review
to 👍🏼 Mergeable
in AutoGPT development kanban
github-project-automation
Bot
moved this from 👍🏼 Mergeable
to ✅ Done
in AutoGPT development kanban
…and copy (Significant-Gravitas#13231) ### Why / What / How **Why:** The OS-level push notification fired by AutoPilot on session completion looks broken next to other apps on iOS (and Android): the icon is the 16×16 `favicon.ico` upscaled by the OS, so it renders blurry/pixelated, and the copy ("A response is waiting for you.") is wordier than the rest of our notification surface area. **What:** Adds a dedicated high-resolution square notification icon, and tightens the copy to match the design mockup — title `AutoGPT`, body `Task completed` (and `Task failed` for the parallel failure case). **How:** The push payload from the backend only carries `{type, event, session_id, status}` — title/body/icon are hardcoded in the service worker (`public/push-sw.js`). So this is a frontend-only change: - Drop the new `notification-icon-192.png` (light-on-dark AutoGPT mark) into `public/`, plus a 512×512 for retina/Android upscaling. - Swap `icon` and `badge` in `push-sw.js` away from `/favicon.ico`. - Update the `NOTIFICATION_MAP` entries for `copilot_completion.session_completed` and `session_failed`. - Mirror the same values in the in-page `Notification()` fallback in `useCopilotNotifications.ts` (used when no SW push subscription is active). - Update `push-sw-helpers.test.ts` assertions accordingly. ### Changes 🏗️ - `frontend/public/notification-icon-192.png`, `notification-icon-512.png` — new square brand icon assets (light-on-dark) - `frontend/public/push-sw.js` — new title/body strings, icon/badge point at the new PNG - `frontend/src/app/(platform)/copilot/useCopilotNotifications.ts` — in-page fallback notification updated to match - `frontend/src/services/push-notifications/__tests__/push-sw-helpers.test.ts` — assertions updated, added body asserts Closes [OPEN-3139](https://linear.app/autogpt/issue/OPEN-3139/fixfrontendautopilot-improve-autopilot-os-push-notification-icon-and). ### Checklist 📋 #### For code changes: - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [ ] I have tested my changes according to the test plan: - [x] `pnpm test:unit` for `src/services/push-notifications` (73/73 pass) - [x] `pnpm test:unit` for `src/app/(platform)/copilot` (972/972 pass) - [x] `pnpm format`, `pnpm lint`, `pnpm types` all clean - [ ] **Manual:** trigger a real AutoPilot session-completion on iOS Safari/PWA, confirm the notification renders the new icon crisply and reads "AutoGPT — Task completed" - [ ] **Manual:** same on Android Chrome — confirm icon is clear and the status-bar badge silhouette looks correct - [ ] **Manual:** trigger a session failure and confirm "Task failed" copy --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com> Co-authored-by: Nicholas Tindle <nicholas.tindle@agpt.co>
…ifest (Significant-Gravitas#13245) ## Why Follow-up to Significant-Gravitas#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 + Significant-Gravitas#13231) | | Android Chrome web push (not installed) | `notification.icon` → `/notification-icon-192.png` | Fixed (this PR + Significant-Gravitas#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 - [x] Icons + badge verified visually - [x] 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 --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2 participants
Why / What / How
Why: The OS-level push notification fired by AutoPilot on session completion looks broken next to other apps on iOS (and Android): the icon is the 16×16
favicon.icoupscaled by the OS, so it renders blurry/pixelated, and the copy ("A response is waiting for you.") is wordier than the rest of our notification surface area.What: Adds a dedicated high-resolution square notification icon, and tightens the copy to match the design mockup — title
AutoGPT, bodyTask completed(andTask failedfor the parallel failure case).How: The push payload from the backend only carries
{type, event, session_id, status}— title/body/icon are hardcoded in the service worker (public/push-sw.js). So this is a frontend-only change:notification-icon-192.png(light-on-dark AutoGPT mark) intopublic/, plus a 512×512 for retina/Android upscaling.iconandbadgeinpush-sw.jsaway from/favicon.ico.NOTIFICATION_MAPentries forcopilot_completion.session_completedandsession_failed.Notification()fallback inuseCopilotNotifications.ts(used when no SW push subscription is active).push-sw-helpers.test.tsassertions accordingly.Changes 🏗️
frontend/public/notification-icon-192.png,notification-icon-512.png— new square brand icon assets (light-on-dark)frontend/public/push-sw.js— new title/body strings, icon/badge point at the new PNGfrontend/src/app/(platform)/copilot/useCopilotNotifications.ts— in-page fallback notification updated to matchfrontend/src/services/push-notifications/__tests__/push-sw-helpers.test.ts— assertions updated, added body assertsCloses OPEN-3139.
Checklist 📋
For code changes:
pnpm test:unitforsrc/services/push-notifications(73/73 pass)pnpm test:unitforsrc/app/(platform)/copilot(972/972 pass)pnpm format,pnpm lint,pnpm typesall clean