fix(frontend): improve mobile chat and expert layouts

[ntindle]

Why / What / How

Chat panels and expert dialogs need to fit narrow phones and adapt when a foldable changes width. This draft starts the responsive pass with full-screen builder and memory chat below 640px, compact share controls, safe-area spacing, and single-column expert connection dialogs on phones. Larger breakpoints retain the existing desktop layout.

Work is ongoing. Before/after screenshots, iPhone-size checks, fold/unfold transition checks, and desktop comparisons will be attached as each surface is verified. Chat and experts are first; admin pages follow.

Changes 🏗️

• Make builder and memory chat use the available mobile viewport, keeping floating panels at larger widths.
• Add mobile safe-area spacing to chat composers, headers, and expert overlays.
• Compact shared-chat and tour actions on narrow screens, and stack shared-chat error controls.
• Fit context and artifact drawers to phone and small-tablet widths.
• Stack expert connection and existing-credential cards below the small breakpoint.
• Extend focused component coverage for the initial responsive changes.

Agents and large language models used

OpenAI Codex with GPT-6; earlier session work used another Codex model whose exact version is unavailable.

Checklist 📋

For code changes:

• I have clearly listed my changes in the PR description
• I have made a test plan
• I have tested my changes according to the test plan:
  • Run whole-frontend formatting, lint, type checking, and integration tests; attach results.
  • Verify chat and expert surfaces at 402px, 360px, and 728px widths, including live fold/unfold transitions with draft text preserved.
  • Verify breakpoint edges at 640px, 768px, and 1024px and compare the 1440px desktop layout.
  • Upload before/after screenshots for every changed surface.
  • Exercise overflow, error, dialog-close, and keyboard-focus cases.

Example test plan

• Create from scratch and execute an agent with at least 3 blocks
• Import an agent from file upload, and confirm it executes correctly
• Upload agent to marketplace
• Import an agent from marketplace and confirm it executes correctly
• Edit an agent from monitor, and confirm it executes correctly

For configuration changes:

• .env.default is updated or already compatible with my changes
• docker-compose.yml is updated or already compatible with my changes
• I have included a list of my configuration changes in the PR description (under Changes)

Examples of configuration changes

• Changing ports
• Adding new services that need to communicate with each other
• Secrets or environment variable changes
• New or infrastructure changes such as databases

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

---

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.}

[github-actions]

🔍 PR Overlap Detection

This check compares your PR against all other open PRs targeting the same branch to detect potential merge conflicts early.

🔴 Merge Conflicts Detected

The following PRs have been tested and will have merge conflicts if merged after this PR. Consider coordinating with the authors.

• refactor(frontend): rebuild /team as one calm list #14341 (0ubbe · updated 2d ago)

  • 📁 autogpt_platform/frontend/src/app/(platform)/team/
    • __tests__/main.test.tsx (6 conflicts, ~811 lines)
    • components/AutopilotCard.tsx (modified here, deleted there)
    • components/EmptyTeamState.tsx (1 conflict, ~27 lines)
    • components/ExpertRow/components/ExpertCover.tsx (added here)
    • components/ExpertRow/components/SpendMeter.tsx (2 conflicts, ~21 lines)
    • components/ExpertTeamCard/ExpertTeamCard.tsx (modified here, deleted there)
    • components/ExpertTeamCardSkeleton.tsx (modified here, deleted there)
    • components/TeamRoster/TeamRoster.tsx (2 conflicts, ~154 lines)
    • components/WhatRunsZone/WhatRunsZone.tsx (deleted here, modified there)
    • components/WhatRunsZone/components/ExpertWorkflowGroup.tsx (deleted here, modified there)
    • components/WhatRunsZone/components/YourAgentsList.tsx (deleted here, modified there)
    • components/WhatRunsZone/helpers.test.ts (deleted here, modified there)
    • components/WhatRunsZone/helpers.ts (deleted here, modified there)
    • components/WhatRunsZone/useWhatRunsZone.ts (deleted here, modified there)
    • helpers.ts (2 conflicts, ~94 lines)
    • page.tsx (5 conflicts, ~146 lines)

• fix(frontend/copilot): prevent Tooltip from switching between controlled/uncontrolled #14179 (seer-by-sentry · updated 12d ago)

🟢 Low Risk — File Overlap Only

These PRs touch the same files but different sections (click to expand)

• feat(platform): Look Mum No Hands - AutoPilot Voice Mode #14322 (Pwuts · updated 5m ago)

  • autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/ChatInput.tsx: L86-92, L106-110, L113, L115-120

• feat(platform): expressive 3D expert avatars, /avatar lab, and AutoPilot picks a face when raising #14427 (Abhi1992002 · updated 1h ago)

  • autogpt_platform/frontend/src/app/(platform)/team/components/SoulDrawer/SoulDrawer.tsx: L22-25, L29-34

• feat(team): open expert chat in inline right-side drawer #14356 (Abhi1992002 · updated 13h ago)

  • Shared files: autogpt_platform/frontend/src/app/(platform)/team/components/ExpertChatDrawer/ExpertChatDrawer.tsx

Summary: 2 conflict(s), 0 medium risk, 3 low risk (out of 5 PRs with file overlap)

---

Auto-generated on push. Ignores: openapi.json, lock files.

[codecov]

Codecov Report

❌ Patch coverage is 76.19048% with 5 lines in your changes missing coverage. Please review.
✅ Project coverage is 81.34%. Comparing base (4109de4) to head (0c4004a).
⚠️ Report is 12 commits behind head on dev.

Additional details and impacted files

@@            Coverage Diff             @@
##              dev   #14430      +/-   ##
==========================================
- Coverage   81.35%   81.34%   -0.01%     
==========================================
  Files        3517     3518       +1     
  Lines      263467   263479      +12     
  Branches    24426    24430       +4     
==========================================
- Hits       214336   214335       -1     
- Misses      43709    43717       +8     
- Partials     5422     5427       +5     

Flag	Coverage Δ
platform-frontend	60.44% <76.19%> (+0.03%)	⬆️
platform-frontend-e2e	28.34% <100.00%> (-0.14%)	⬇️

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

Components	Coverage Δ
Platform Backend	86.35% <ø> (ø)
Platform Frontend	62.76% <76.19%> (-0.02%)	⬇️
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.

[ntindle]

Progress: expert chat survives fold and layout transitions

On the unchanged base, typing a draft and resizing 360 → 728 → 1024 → 360px loses the text at 1024px. With commit 0c4004a218, the same draft remains throughout. The phone composer also uses 16px text; desktop typography stays at its existing size.

Step	Before	After	Observed result
Folded, 360 × 840			Both contain the typed draft.
Unfolded, 728 × 656			Both retain the draft at a representative unfolded-phone width.
Wide layout, 1024 × 768			Before: input value becomes empty. After: input value remains unchanged.
Folded again, 360 × 840			Before: draft is gone. After: the complete draft is still editable.

Steps: open Team, open the built-in Autopilot chat, enter “Keep this draft when I unfold my phone.”, and resize the same browser page through each listed viewport. No messages were submitted. Each step records the actual textarea value, not a mocked response.

Expected: draft text survives every resize. Actual: passes after the fix. Integration coverage also verifies that a selected attachment and unsaved Soul edits survive the layout switch, and that switching to another expert starts with an empty draft and no carried-over attachment.

Validation for this slice:

• Whole-frontend formatting, lint, and type checks passed; existing lint warnings remain.
• Expert and shared-composer suites: 26 files, 305 tests passed.
• Both new resize regressions failed against the old behavior before the fix.
• Earlier full-suite run: 6,511 of 6,512 tests passed; the timed-out chat-pagination suite subsequently passed all 15 tests when rerun alone.

Environment and coverage limits: these are browser viewport checks, not physical-device tests. The local scheduler endpoint returns 500, so its existing error card is visible behind the wide panel. Developer overlays are hidden only during screenshot capture. Other chat surfaces, desktop height checks, expert dialogs, and admin pages remain in progress; this report is not a merge-readiness claim.

[ntindle]

Mobile progress: chat surfaces and expert connections

Before is unchanged 4109de474f; after is the current PR worktree. These are Chromium touch viewport captures at 402 × 874 CSS pixels, representative of the iPhone 17 Pro viewport, not physical-device certification. Local QA account and synthetic conversation data only. The two connection entries are intentionally unusable dummy credentials; no provider request was made.

Surface	Before	After
Builder chat: full-height mobile panel and reachable composer
Public tour: compact share action
Anonymous shared chat: header actions fit the viewport
Copilot: mobile navigation in flow; message actions available without hover
Expert existing connections: one column keeps connection names readable

Progress evidence, not a merge-ready claim. Desktop comparison, remaining chat surfaces, and admin work are ongoing. Mobile message action opacity was measured at 0,0,0,1 before and 1,1,1,1 after on a no-hover touch context. Development-only overlays were hidden for captures. Formatting, lint, and TypeScript checks passed for the pending patch; the full test suite is being rerun with two workers after an unconstrained run exhausted local memory.

[ntindle]

Mobile progress: fold state, artifacts, admin, and desktop checks

Chat/expert before captures use unchanged 4109de474f; admin before captures were taken immediately before the admin edits (the chat changes were already present). After captures use the current PR worktree. Local QA fixtures only, with browser-emulated viewport sizes rather than physical-device certification. Development overlays were hidden. The public tour is the product's own simulated scenario, not a real external automation.

Check	Before	After
Expert Soul at 1024px: retain edits and keep Save visible
Refolded to 360px: unsaved editor text is retained
Phone service picker: readable single-column choices
Artifact library at 728px: bounded sheet with visible context
Actual public tour artifact preview at 728px
Phone diagnostics: navigation no longer overlaps the logo
Phone spending: search, filters and export controls fit
Desktop Copilot control comparison, 1440 × 1000
Phone shared-chat long reference: readable wrapping

Measured results: diagnostics page width 799 → 402px; spending 489 → 402px; expert connection dialog 402px without page overflow. Long chat references now wrap below 1024px; tables/code retain local scrolling. Desktop Copilot remains at 1440px with the same sidebar, content column, and composer arrangement. The expert editor now retains unsaved changes through 360 → 728 → 1024 → 360px, with its Save action reachable in the wide layout.

The previous full run passed 612 files / 6,516 tests. Four new admin navigation tests pass, including Escape focus restoration and closing the menu at both desktop breakpoints. Formatting, lint, and TypeScript pass for this expanded patch; another full suite is running. Remaining verification includes the new-layout flag path and further admin/chat interactions. The memory settings route currently waits indefinitely on its legacy flag wrapper in this local LaunchDarkly-free stack; its panel has component test coverage, but I am not claiming full browser verification of that route yet. No admin financial, cleanup, requeue, or deletion action was run.

[github-actions]

This pull request has conflicts with the base branch, please resolve those so we can evaluate the pull request.