[Micro66]

Summary by CodeRabbit

• New Features

  • Mobile settings page with plugins navigation and drawer interface
  • Chat composer now supports image attachments with upload/camera options
  • Fullscreen input expansion for multi-line messages
  • Enhanced auto-scroll behavior for conversations
  • Responsive sidebar and drawer navigation

• Bug Fixes

  • Fixed message text overflow and wrapping issues
  • Improved horizontal scrolling constraints for long content

• Style

  • Global overflow-x hiding and improved text wrapping
  • Sidebar default width increased
  • Responsive layout refinements for mobile/desktop

• Tests

  • Added mobile rendering and scroll behavior coverage
  • Responsive breakpoint validation

• Chores

  • Executor process management script for local development
  • New localization strings
  • Responsive utilities library

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This PR delivers a comprehensive mobile-first responsive redesign alongside message display improvements and executor process management. It establishes shared responsive utilities, refactors message scrolling with auto-pin behavior, extends mobile chat composition with attachments and fullscreen input modes, redesigns the mobile drawer and workbench layout, and adds mobile settings navigation.

Changes

Responsive utilities, message display, and scrolling

Layer / File(s)	Summary
Responsive utilities and hook refactoring wework/src/lib/responsive.ts, wework/src/lib/responsive.test.ts, wework/src/hooks/useIsMobile.ts, wework/src/hooks/useIsDesktop.ts	New responsive.ts exports breakpoint constants (mobileMax: 767, desktopMin: 768) and helpers (isMobileViewport, isDesktopViewport, mobileMediaQuery(), desktopMediaQuery()); useIsMobile and useIsDesktop refactored to use shared utilities instead of hardcoded breakpoints; test suite validates boundary behavior.
Robust auto-scroll message area implementation wework/src/components/chat/ScrollableMessageArea.tsx, wework/src/components/chat/ScrollableMessageArea.test.tsx	ScrollableMessageArea completely refactored with stable scroll-to-bottom scheduling via multiple delayed timeouts, ResizeObserver for content changes, and conversation-aware scroll pinning; new props (scrollerClassName, scrollTestId, conversationKey) enable test integration and custom styling; comprehensive test suite covers scroll-to-bottom, pinning, user-scroll detection, and streaming content pinning behavior.
Message display overflow and width constraints wework/src/components/chat/MessageList.tsx, wework/src/components/chat/MessageList.test.tsx, wework/src/components/chat/blocks/ToolBlockItem.tsx, wework/src/styles/globals.css	MessageList, UserMessage, and AssistantMessage rendering updated with min-w-0, overflow-x-hidden, break-words, and max-w-full constraints to prevent horizontal overflow; ToolBlockItem and code blocks similarly constrained; globals.css adds overflow-x: hidden to html/body/root and new .scrollbar-none utility; test suite validates overflow behavior with very long content.
Desktop message rendering with new ScrollableMessageArea wework/src/components/layout/DesktopWorkbenchMain.tsx, wework/src/components/layout/DesktopSidebar.tsx, wework/src/components/layout/DesktopWorkbenchLayout.test.tsx	DesktopWorkbenchMain replaces MessageList with ScrollableMessageArea component; DesktopSidebar task rows refactored with hover-driven opacity transitions on time/action elements via absolutely-positioned overlays and data-testid refinements; test suite validates sidebar width persistence from localStorage and hover opacity class behavior.

Mobile chat composition, drawer, and layout redesign

Layer / File(s)	Summary
Mobile attachment and fullscreen input support wework/src/components/chat/composer/CompactChatComposer.tsx, wework/src/components/chat/ChatInput.tsx, wework/src/components/chat/ChatInput.test.tsx	CompactChatComposer expanded with attachment state props, image upload/camera file inputs, fullscreen input sheet for multi-line text, attachment badge rendering, and updated send logic (enabled when text or attachments present); ChatInput wires attachment-related state and removal handlers; extensive test coverage validates compact height, mobile context sheet behavior, send with image attachments, and fullscreen expansion/collapse.
ModelSelector and ProjectWorkBar styling customization wework/src/components/chat/composer/ModelSelector.tsx, wework/src/components/chat/composer/ProjectWorkBar.tsx	ModelSelector adds optional menuPlacement, buttonClassName, menuClassName props with computed position classes; ProjectWorkBar adds optional className, buttonClassName, menuClassName, emptyLabel props; enables flexible layout/styling reuse across mobile and desktop contexts.
Mobile drawer with expandable projects and task navigation wework/src/components/layout/MobileDrawer.tsx	MobileDrawer completely refactored with expandable project sections (toggle via expandedProjectIds state), sorted task lists per project with PROJECT_TASK_LIMIT, "history" section for standalone tasks, running task indicators via Loader2, and footer actions (settings + new chat); new props track active project/task and pass optional callbacks; renders with search input and collapsible project items.
Mobile settings page navigation component wework/src/components/settings/MobileSettingsPage.tsx, wework/src/components/settings/MobileSettingsPage.test.tsx	New MobileSettingsPage component with back navigation button and optional plugins button; uses localized strings from useTranslation('common'); test suite verifies callback invocation on button clicks.
MobileWorkbenchLayout with settings state and new UI structure wework/src/components/layout/MobileWorkbenchLayout.tsx, wework/src/components/layout/MobileWorkbenchLayout.test.tsx	MobileWorkbenchLayout refactored with settingsOpen state for modal settings view; replaces prior empty-state quick-entry and header content with new conversation/empty-state modes using ModelSelector, ProjectWorkBar, and ScrollableMessageArea; wires MobileDrawer with runtime context (runningTaskIds, currentProject/Task, activeItem) and onOpenSettings callback; comprehensive test coverage validates project work button, empty page layout, drawer interactions, and settings navigation.
Pages with mobile drawer and responsive sidebar wework/src/pages/PluginsPage.tsx, wework/src/pages/PluginManagementPage.tsx, wework/src/components/layout/useResizableSidebar.ts	PluginsPage and PluginManagementPage updated with drawerOpen/sidebarCollapsed state; desktop shows optional expand sidebar button; mobile shows header menu button opening MobileDrawer with navigation handlers; MobileSettingsPage rendered on mobile when settingsOpen; sidebar default width increased from 280px to 320px.
Plugin workspace responsive styling wework/src/components/plugins/PluginsWorkspace.tsx, wework/src/components/plugins/PluginManagementWorkspace.tsx	PluginsWorkspace and PluginManagementWorkspace updated with responsive padding/spacing and horizontal scrolling (overflow-x-auto) for header actions and tab controls; title/hero section spacing adjusted for responsiveness; search label width constrained on larger breakpoints.
Test viewport control for mobile/desktop testing wework/src/App.plugins.test.tsx	App.plugins.test.tsx introduces mockViewport object enabling test control of mobile/desktop rendering; useIsMobile mock returns mockViewport.isMobile; new tests validate sidebar collapse/expand on desktop and mobile shell rendering at mobile breakpoint for plugins routes.
Localization keys for mobile UI controls wework/src/i18n/locales/en/common.json, wework/src/i18n/locales/zh-CN/common.json	English and Chinese locale files add new workbench keys for mobile input controls (take_photo, upload_image, expand_input, collapse_input, fullscreen_input_title, select_project) and settings navigation (settings_nav_plugins).

Executor process management script

Layer / File(s)	Summary
Local executor lifecycle management executor/local.sh	New Bash script for local executor process lifecycle: build (runs uv sync --group build then uv run python scripts/build_local.py), start (validates binary/WEGENT_AUTH_TOKEN, launches via nohup, records PID), stop (graceful kill with retry then force-kill), restart, status, logs (tail -f), and all (build+restart); includes usage help and command dispatching with default restart.
Ignore executor PID files .gitignore	.gitignore updated to ignore executor/.pids/ directory created by executor/local.sh at runtime.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• wecode-ai/Wegent#1164: Further refactors MobileDrawer and MobileWorkbenchLayout components introduced in that PR, extending props wiring and UI structure.
• wecode-ai/Wegent#1159: Modifies useIsMobile.ts to use shared lib/responsive helpers, building on the initial hook implementation.
• wecode-ai/Wegent#1177: Aligns with introduction of ProjectChatComposer and attachment handling in ChatInput that this PR extends with image upload/camera support.

Suggested reviewers

• qdaxb

🐰 A drawer unfolds with projects neatly stacked,
Messages flow smoothly, scrolling never cracked,
Attachments now bloom in the compact composer's hand,
Mobile meets desktop, responsive and planned! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: improving mobile chat responsive UI through fixes to layout, overflow handling, and mobile-specific components.
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.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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