Skip to content

✨ feat(onboarding): adapt agent onboarding UI for mobile#15019

Merged
Innei merged 1 commit into
canaryfrom
feat/onboarding-agent-mobile
May 20, 2026
Merged

✨ feat(onboarding): adapt agent onboarding UI for mobile#15019
Innei merged 1 commit into
canaryfrom
feat/onboarding-agent-mobile

Conversation

@Innei

@Innei Innei commented May 20, 2026

Copy link
Copy Markdown
Member

πŸ’» Change Type

  • ✨ feat
  • πŸ› fix
  • ♻️ refactor
  • πŸ’„ style
  • πŸ‘· build
  • ⚑️ perf
  • βœ… test
  • πŸ“ docs
  • πŸ”¨ chore

πŸ”— Related Issue

N/A β€” internal mobile polish.

πŸ”€ Description of Change

Adapts the Agent Onboarding flow for mobile viewports. The previous layout stacked the desktop Welcome (large hero, three guide cards, Markdown intro, full NameSuggestions cards) on narrow screens, pushing the input box off-screen on the first paint.

Key changes

  • Welcome.mobile.tsx (new): a dedicated mobile greeting component β€” compact LobeMessage avatar above the title (left-aligned), short Markdown intro, pushed to the bottom of the chat list so the input area stays visible above the fold.
  • NameSuggestions: new variant: 'cards' | 'chips' prop. Mobile uses chips β€” a horizontally scrollable row with emoji + short name only (no prompt description).
  • LobeMessage: new align, horizontal, and disableTypewriter props. Default align is flex-start to preserve every existing page's left-aligned layout. Avatar wrapper removed and flexShrink: 0 set inline. Static text path (disableTypewriter) avoids the typewriter punctuation-break problem on small screens.
  • CompletionPanel: explicitly opts into align='center' (the only page that wants the avatar + title centered), uses mobile-friendly sizes, and the CTA button becomes block-width on mobile.
  • ModeSwitch: responsive.mobile media query lifts the floating switch above the input area using env(safe-area-inset-bottom).
  • _layout: mobile drops the outer padding, inner border, and border-radius for an edge-to-edge experience; header padding tightened; footer text centered.
  • Classic: dev-only ModeSwitch is now gated behind isDev, mirroring the Agent page (the existing Agent/index.tsx already does this).

Deployment note: the real-mobile-UA users go through the mobile bundle hosted on the S3/CDN pipeline (scripts/mobileSpaWorkflow), which is decoupled from Vercel deploys. These visual changes will only reach mobile-UA visitors once the next bun run mobile-spa workflow runs and the resulting mobileHtmlTemplate.source.ts is committed. Desktop bundles (including narrow desktop viewports / tablets) receive the changes immediately on merge.

πŸ§ͺ How to Test

  • Tested locally
  • Added/updated tests
  • No tests needed

Existing tests for NameSuggestions, Conversation, ModeSwitch, and _layout all pass. Manual:

  1. bun run dev:spa
  2. Open the printed Debug Proxy URL (or localhost:3010) and sign in
  3. In DevTools, toggle a mobile viewport (e.g. iPhone 14 Pro / 393Γ—852)
  4. Navigate to /onboarding/agent (must have completed common onboarding steps)
  5. Verify: input area visible on first paint, avatar above title (left-aligned), no punctuation orphan, chips horizontally scrollable, ModeSwitch (in dev) sits above the input area
  6. Switch back to desktop viewport β€” verify the existing Welcome layout and other onboarding pages (Classic, AgentPicker, Interests, etc.) remain unchanged (LobeMessage stays left-aligned)
  7. Complete onboarding and trigger CompletionPanel β€” avatar + title should now be centered

πŸ“Έ Screenshots / Videos

Before After
Mobile first paint shows only the giant greeting + guide cards, input box off-screen Welcome (avatar + short intro) sits just above the chip row and input box

πŸ“ Additional Information

  • No data migration, no API change
  • The mobileSpaWorkflow rebuild + mobileHtmlTemplate.source.ts commit is still required to ship to true mobile-UA users β€” flagged so reviewers don't expect immediate mobile-UA impact from this PR alone

@vercel

vercel Bot commented May 20, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
lobehub Ready Ready Preview, Comment May 20, 2026 7:53am

Request Review

@dosubot dosubot Bot added size:L This PR changes 100-499 lines, ignoring generated files. feature:agent Assistant/Agent configuration and behavior πŸ“± Mobile Device Issue in mobile view labels May 20, 2026

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry @Innei, you have reached your weekly rate limit of 500000 diff characters.

Please try again later or upgrade to continue using Sourcery

- Welcome.mobile: dedicated mobile greeting, push to bottom, static text (no typewriter)
- NameSuggestions: chips variant for mobile (horizontal scroll, emoji + name only)
- LobeMessage: add align/horizontal/disableTypewriter props, default flex-start
- CompletionPanel: explicit align=center, mobile-friendly sizes and block button
- ModeSwitch: mobile media query β€” avoid input area via safe-area-inset-bottom
- _layout: remove inner border/radius and outer padding on mobile
- Classic: gate ModeSwitch behind isDev (align with Agent page)
@codecov

codecov Bot commented May 20, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 28.90173% with 123 lines in your changes missing coverage. Please review.
βœ… Project coverage is 66.36%. Comparing base (63ced81) to head (4a04436).

Additional details and impacted files
@@            Coverage Diff             @@
##           canary   #15019      +/-   ##
==========================================
- Coverage   66.38%   66.36%   -0.02%     
==========================================
  Files        3000     3001       +1     
  Lines      267032   267163     +131     
  Branches    27357    32838    +5481     
==========================================
+ Hits       177262   177298      +36     
- Misses      89607    89702      +95     
  Partials      163      163              
Flag Coverage Ξ”
app 61.03% <28.90%> (-0.03%) ⬇️
database 92.13% <ΓΈ> (ΓΈ)
packages/agent-runtime 80.48% <ΓΈ> (ΓΈ)
packages/builtin-tool-lobe-agent 19.87% <ΓΈ> (ΓΈ)
packages/context-engine 84.07% <ΓΈ> (ΓΈ)
packages/conversation-flow 91.28% <ΓΈ> (ΓΈ)
packages/file-loaders 87.83% <ΓΈ> (ΓΈ)
packages/memory-user-memory 75.01% <ΓΈ> (ΓΈ)
packages/model-bank 99.94% <ΓΈ> (ΓΈ)
packages/model-runtime 83.51% <ΓΈ> (ΓΈ)
packages/prompts 71.60% <ΓΈ> (ΓΈ)
packages/python-interpreter 92.90% <ΓΈ> (ΓΈ)
packages/ssrf-safe-fetch 0.00% <ΓΈ> (ΓΈ)
packages/types 35.16% <ΓΈ> (ΓΈ)
packages/utils 88.02% <ΓΈ> (ΓΈ)
packages/web-crawler 87.74% <ΓΈ> (ΓΈ)

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

Components Coverage Ξ”
Store 67.74% <ΓΈ> (ΓΈ)
Services 54.66% <ΓΈ> (ΓΈ)
Server 71.88% <ΓΈ> (ΓΈ)
Libs 56.16% <ΓΈ> (ΓΈ)
Utils 82.65% <ΓΈ> (ΓΈ)
πŸš€ New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • πŸ“¦ JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@Innei Innei merged commit c261c06 into canary May 20, 2026
33 of 34 checks passed
@Innei Innei deleted the feat/onboarding-agent-mobile branch May 20, 2026 11:37
ONLY-yours pushed a commit that referenced this pull request May 21, 2026
- Welcome.mobile: dedicated mobile greeting, push to bottom, static text (no typewriter)
- NameSuggestions: chips variant for mobile (horizontal scroll, emoji + name only)
- LobeMessage: add align/horizontal/disableTypewriter props, default flex-start
- CompletionPanel: explicit align=center, mobile-friendly sizes and block button
- ModeSwitch: mobile media query β€” avoid input area via safe-area-inset-bottom
- _layout: remove inner border/radius and outer padding on mobile
- Classic: gate ModeSwitch behind isDev (align with Agent page)
arvinxx added a commit that referenced this pull request May 29, 2026
# πŸš€ LobeHub Release (20260528)

**Release Date:** May 28, 2026  
**Since v2.2.0:** 220 merged PRs Β· 15 contributors

> This cycle brings heterogeneous "platform agents" you can dispatch to
local or remote devices, a rebuilt onboarding flow, document-centric
chat, and a unified model-runtime error model β€” with new DeepSeek V4 and
Gemini 3.5 Flash support along the way.

---

## ✨ Highlights

- **More Hetero Agents (OpenClaw / Hermes)** β€” Create heterogeneous
agents and dispatch them to local or remote devices through the device
gateway, with an execution-target switcher in the composer and
persistent CLI sessions. (#15065, #15179, #15022)
- **iMessage on Desktop** β€” New iMessage setup and bridge on desktop,
plus bot attachments across every platform. (#15228, #15227, #15029)
- **Skills in the Composer** β€” Drag skill chips into chat, trigger
installed skills from the slash menu mid-line, and surface project-level
skills in the homogeneous agent runtime. (#15095, #15061, #15110)
- **New Models** β€” DeepSeek V4 Flash/Pro and Gemini 3.5 Flash across
providers, with thinking params for structured output and chat cost
estimates. (#15031, #15001, #15051, #14876)
- **Agent Runtime Observability** β€” OpenTelemetry GenAI semantic
conventions plus per-call generation tracing. (#15123, #15124)

---

## πŸ€– Agents & Heterogeneous Runtime

- **Platform agent creation** β€” OpenClaw/Hermes creation UI, device
guard, and remote dispatch backend. (#15065)
- **Execution-target switcher** β€” Pick local vs remote execution
directly in the composer; device-selection UX with actionable guidance.
(#15179, #15111)
- **CLI hetero dispatch** β€” OpenClaw/Hermes dispatch with persistent
sessions and a notify protocol. (#15022)
- **Gateway snapshot as source of truth** β€” Consume the gateway
`uiMessages` snapshot at step boundaries to keep chat state consistent.
(#15153, #15152)
- **Client sub-agent as a normal tool call** β€” Simplifies the sub-agent
execution path. (#15281)
- **Hermes agent chain** β€” Implements the Hermes agent chain logic.
(#15189)
- **Device registry** β€” TRPC endpoints to register, list, update, and
remove devices. (#15299)
- **Desktop device routing** β€” Route gateway agent runs through `lh
hetero exec`; restore `userId` in gateway dispatch and gate local-system
by execution target. (#15132, #15232)
- **Agent signals** β€” Anchor agent-signal receipts to messages and
isolate memory-agent messages into a child thread. (#14969, #14921)

---

## πŸš€ Onboarding

- **Simplified first screen** β€” Defer topic creation to first send.
(#15090)
- **Market Agent Picker** β€” Added as a classic onboarding step, with
template prefetch. (#14980, #15041)
- **Welcome guidance** β€” Show agent welcome guidance on first run.
(#15098)
- **Mobile** β€” Adapt agent onboarding UI and restore Classic-step
padding on mobile. (#15019, #15032)
- **Discovery** β€” Streamline discovery to a single profession question.
(#14987)
- **Analytics** β€” Track onboarding step events and create-agent modal
source. (#15133, #15028)

---

## πŸ“„ Documents, Pages & Knowledge

- **Thread chat in preview** β€” Embed thread chat in the document preview
portal. (#15216)
- **Non-markdown rendering** β€” Render non-markdown docs as a read-only
highlight. (#15272)
- **Multi-select** β€” Multi-select delete in the document tree. (#15125)
- **Page-agent streaming** β€” Preview `initPage` streaming arguments.
(#15039)
- **Per-agent topics** β€” Per-agent topic management page. (#15207)
- **Server-side category** β€” Derive document category server-side and
drop frontend predicates. (#15076)

---

## 🧩 Skills & Tools

- **Drag skill chips** β€” Drag skills into chat input and register
agent-document skills. (#15095)
- **Slash menu** β€” Installed skills appear in the slash menu with a
mid-line trigger. (#15061)
- **Project skills** β€” Recognize project-level skills in the homogeneous
agent runtime and surface them regardless of active device. (#15110,
#15177)
- **VFS archiving** β€” Archive oversized tool results to VFS instead of
truncating. (#15074)
- **@localfile mentions** β€” Drag folders into chat input as `@localFile`
mentions on desktop. (#15071)

---

## 🧠 Model Runtime & Providers

- **Error spec registry** β€” Unify error codes into a spec + pattern
registry, split `ProviderBizError` into finer codes, classify Cloud-only
codes via a tier digit, and add `DatabasePersistError`. (#15262, #15286,
#15278, #15279)
- **New models** β€” DeepSeek V4 Flash/Pro (opencode-go) and Gemini 3.5
Flash; DeepSeek V4 Pro on SiliconCloud. (#15031, #15001, #15017, #15267)
- **Structured output** β€” Thinking params for structured output, Bedrock
structured generation, and DeepSeek `generateObject` tool choice.
(#15051, #15174, #15054)
- **Cost** β€” Chat cost estimate support; preserve usage cost in custom
streams. (#14876, #15218)

---

## πŸ’¬ Chat & User Experience

- **Follow-up chips** β€” Extend follow-up chip suggestions to general
chat with scene-specific model config. (#15101, #14797)
- **Input drafts** β€” Persist unsent input drafts across tab switches and
prevent repeated draft restore. (#14992, #15024)
- **Command menu** β€” Order topic/message search by recency and promote
inline type filters. (#15094, #14986)
- **Zoom HUD** β€” Show a zoom-level HUD on Cmd +/βˆ’ and Cmd 0. (#15294)
- **Copy** β€” Unescape markdown escapes when copying user messages.
(#15253)

---

## πŸ–₯️ Desktop

- **App Nap fix** β€” Prevent App Nap from dropping the gateway WebSocket
during display sleep. (#14994)
- **File preview** β€” Preview `.cjs`/`.mjs`/no-extension files instead of
binary fallback and expand `~` when opening local files. (#15168,
#15284)
- **Cross-platform settings** β€” Open settings via main-window navigation
on Windows/Linux and restore the route after an update restart. (#15036,
#14922)
- **Token refresh** β€” Prevent frequent logout from token-refresh
retries. (#14928)

---

## πŸ“Š Observability

- **OTel GenAI** β€” Instrument Agent Runtime with OpenTelemetry GenAI
semantic conventions. (#15123)
- **Generation tracing** β€” Per-call `llm_generation_tracing` with a
pre-allocated tracingId and recordFeedback router. (#15124, #15146)
- **Error classification** β€” Persist `ERROR_CODE_SPECS` classification
on operation errors. (#15273)

---

## πŸ—ƒοΈ Database Migrations

- **Batch migrations** β€” Topic usage stats, push tokens,
`tasks.editor_data`, and document shares. (#15280)
- **Tracing & eval tables** β€” Add `llm_generation_tracing` and agent
eval experiment tables. (#15126)

> Self-hosted operators should run the database migration (`pnpm
db:migrate`, or restart with auto-migrate enabled) after upgrading. The
changes are additive and backwards-compatible.

---

## πŸ”’ Security & Reliability

- **Security:** Remove the `getPlaintextCred` tool to prevent plaintext
credential exposure. (#14998)
- **Security:** Prompt account selection for Google OAuth and add
`prompt=consent` to the OIDC authorization URL to fix missing refresh
tokens. (#15234, #15010)
- **Reliability:** Preserve streamed content across a mid-stream cancel.
(#15173)
- **Reliability:** Bound the Redis command timeout and configure the
Anthropic client timeout. (#15091, #15042)
- **Reliability:** Prevent infinite recursion in the assistant chain.
(#15288)

---

## πŸ‘₯ Contributors

Huge thanks to **15 contributors** who shipped **220 merged PRs** this
cycle.

@AnotiaWang Β· @sxjeru Β· @algojogacor Β· @hardy-one Β· @arvinxx Β· @Innei Β·
@tjx666 Β· @lijian Β· @AmAzing129 Β· @rdmclin2 Β· @neko Β· @cy948 Β·
@CanisMinor Β· @sudongyuer Β· @rivertwilight

Plus @lobehubbot and renovate[bot] for maintenance.

---

**Full Changelog**: v2.2.0...release/weekly-20260528
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature:agent Assistant/Agent configuration and behavior πŸ“± Mobile Device Issue in mobile view size:L This PR changes 100-499 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant