feat(console): mobile adaptation for Workspace page

[yaozy2020]

Description

This PR adds mobile adaptation for the Workspace (Files) page in the QwenPaw console.

On narrow screens (≤768px):

• The page header stacks vertically and the workspace path chip wraps instead of overflowing.
• The upload/download button group wraps below the breadcrumb.
• The file list panel and file editor switch from a side-by-side layout to a full-screen page-level switch: tapping a file hides the file list and shows the editor, while a "Back" button or a right-to-left swipe returns to the file list.
• The viewport is watched with matchMedia, so rotating/resizing the browser automatically switches between mobile and desktop layouts.
• The editor header shows a save status label ("Saving... / Saved / Unsaved") and the save button enters a loading state during save.

Related Issue: Relates to the ongoing console mobile adaptation effort.

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Refactoring

Component(s) Affected

• Core / Backend (app, agents, config, providers, utils, local_models)
• Console (frontend web UI)
• Channels (DingTalk, Feishu, QQ, Discord, iMessage, etc.)
• Skills
• CLI
• Documentation (website)
• Tests
• CI/CD
• Scripts / Deploy

Checklist

• I ran pre-commit run --all-files locally and it passes
• If pre-commit auto-fixed files, I committed those changes and reran checks
• I ran tests locally (pytest or as relevant) and they pass
• Documentation updated (if needed)
• Ready for review

Note on pre-commit: The current pre-commit config excludes ^console/ from the prettier hook, so frontend files are not auto-checked. I manually verified the changes with tsc, prettier, eslint, and npm run build.

Testing

1. Open QwenPaw Console on a mobile browser or a narrow viewport (≤768px).
2. Navigate to Agent → Workspace (Files).
3. Verify that:
   • The workspace path does not overflow the screen.
   • Upload / Download buttons are accessible and do not overlap tabs.
   • Tapping a file opens the editor full-screen.
   • The "Back" button or a right-to-left swipe returns to the file list.
   • Save status is shown in the editor header.
4. Resize to desktop width and confirm the side-by-side layout remains unchanged.

Local Verification Evidence

cd console
npx tsc --noEmit
npx prettier --check "src/pages/Agent/Workspace/**/*.{ts,tsx,less}"
npx eslint "src/pages/Agent/Workspace/**/*.{ts,tsx}"
npm run build
# all passed

Additional Notes

• PageHeader receives className={styles.pageHeader}.
• New common.back i18n key added (Back / 返回).
• FileEditor gained two optional props: onBack and compact, plus a saving state prop. All mobile styles are scoped inside @media (max-width: 768px) at the end of index.module.less.

[github-actions]

Welcome to QwenPaw! 🐾

Hi @yaozy2020, thank you for your first Pull Request! 🎉

🙌 Join Developer Community

Thanks so much for your contribution! We'd love to invite you to join the official QwenPaw developer group! You can find the Discord and DingTalk group links under the "Developer Community" section on our docs page:
https://qwenpaw.agentscope.io/docs/community

We truly appreciate your enthusiasm—and look forward to your future contributions! 😊

We'll review your PR soon.

---

Tip

⭐ If you find QwenPaw useful, please give us a Star!

Staying ahead

Star QwenPaw on GitHub and be instantly notified of new releases.

Your star helps more developers discover this project! 🐾

[zhaozhuang521]

@yaozy2020

The memory module has two levels. Currently, clicking on the memory module only expands it, not closes it; the second level cannot be viewed or edited.

[zhaozhuang521]

@yaozy2020 The memory function itself can also be selected; this needs to be changed so that clicking to select it expands it.

[yaozy2020]

@yaozy2020 存储模块有两级。目前，点击内存模块只能展开它，而不能关闭它；第二级无法查看或编辑。

谢谢你的评论！

我已经将此PR重新基于最新的上游/主版本，并将所有更改压缩到一个干净的提交中。它包括所有之前的移动交互修复：
•移动布局调整工作空间页面（列表编辑器视图切换）
•移动支持内存。Md文件夹切换和日常内存编辑
删除了文件项上默认的蓝色点击高亮
•固定内容标签包装问题和编辑头对齐
增加了对移动工具栏和扩展图标的暗模式支持

所有核查均在当地完成：
•NPM运行格式：check
eslint——max-warnings=0
•NPM运行构建
•iPhone上的真实设备冒烟测试

有机会请你再看一遍好吗？谢谢!

[zhaozhuang521]

@yaozy2020 The Memory.md file can only expand its substructures; it cannot be previewed or edited. Please ensure that it can both expand and select.

[yaozy2020]

@yaozy2020md文件只能展开其子结构；不能预览或编辑。请确保它既可以展开又可以选择。

@zhaozhuang521 Thanks for the follow-up. I've updated the behavior so that tapping the MEMORY.md row/filename opens it in the editor, while the left arrow toggles expansion of the daily memory list. This way MEMORY.md can both expand and be previewed/edited. Please take another look.

[zhaozhuang521]

@yaozy2020

The style has changed on non-mobile devices, and clicking on it on mobile devices still doesn't allow previewing the Memory.md file.

[yaozy2020]

@yaozy2020 在非移动设备上的样式已经改变，在移动设备上点击它仍然不允许预览Memory.md文件。

@zhaozhuang521 Thanks for the follow-up. I've pushed two fixes:

1. Desktop style leakage fixed: moved touch-action, tap-highlight, active states, expand-icon button sizing, and .contentLabel gap/white-space back inside @media (max-width: 768px). The expand icon keeps its original minimal look on non-mobile devices.

2. MEMORY.md preview on mobile: tapping the MEMORY.md row now toggles the daily-memory expansion and opens the file in the editor simultaneously. The arrow icon still toggles expansion independently.

Desktop-side changes compared to main (intentional):

• .workspacePath and .markdownViewer .x-markdown now have dark-mode color/background fixes (they were missing before and caused invisible text / white blocks in dark mode).
• The expand arrow next to MEMORY.md is now a <button> with transparent background/border; visually it looks the same as the original <span>, but it is now independently clickable to toggle expansion.
• Clicking the MEMORY.md row still toggles expansion and now always loads the file content. Previously, if the list was already expanded, clicking the row would only collapse it without reloading; now it collapses and reloads. This keeps desktop and mobile behavior consistent.

Everything else (layout, font sizes, spacing, toolbar, mobile toolbar, etc.) remains strictly inside @media (max-width: 768px) and does not affect desktop.

Please clear the browser/WebView cache and test again.

[zhaozhuang521]

LGTM

[github-actions]

Welcome to QwenPaw! 🎉

Thank you @yaozy2020 for your first contribution! Your PR has been merged. 🚀

We'd love to give you a shout-out in our release notes! If you're comfortable sharing, please reply to this comment with your social media handles using the format below:

discord: your_discord_handle
x: your_x_handle
xiaohongshu: your_xiaohongshu_id

Note: Only share what you're comfortable with — all fields are optional.

Thanks again for helping make QwenPaw better!