feat: rework mobile UI for Tool Workshop and Profile pages

- Rework ToolWorkshopMobileView to support full desktop functionality:
  definition type selection (Compose/Dockerfile/Manifest), manifest editor,
  conditional port, startup command, readiness probe, required variables,
  and validation feedback.
- Add ProfileMobileView and wire ProfilePage to render it on mobile.
- Update useToolWorkshop hook to return boolean success from submit.
- Add responsive CSS for mobile forms, edit views, and manifest editor.
- Update project maps.

Quality gates: npm run typecheck, npm run lint, npm test -- --run (87 passed)

Refs: openspec/changes/mobile-tool-profile-ui
This commit is contained in:
Developer
2026-06-13 21:41:42 +00:00
parent 8f7f682a92
commit 350b393457
28 changed files with 797 additions and 187 deletions
@@ -0,0 +1,26 @@
# Mobile Tool Workshop & Profile UI Rework
## Goal
Completely rework the mobile experience for the **Tool Workshop** (tool configuration) and **Profile** (user profile configuration) pages so they are usable on small viewports while preserving all existing desktop functionality.
## Scope
- Rework `ToolWorkshopMobileView` to expose every field and action available on the desktop editor, including manifest definition support.
- Add a new `ProfileMobileView` and update `ProfilePage` to render it on small viewports.
- Keep desktop layouts and behavior unchanged.
- No backend API changes.
## Acceptance Criteria
- On viewports narrower than 768 px, the Tool Workshop page renders a mobile-friendly list/detail/edit flow.
- Tool type creation and editing on mobile support: definition type selection (Compose/Dockerfile/Manifest), manifest editor, interface type, conditional port, startup command, readiness probe, required variables, and all existing validation.
- On viewports narrower than 768 px, the Profile page renders a mobile-friendly form with avatar upload, name/email editing, validation, and save feedback.
- All existing desktop functionality remains intact.
- `npm run typecheck` and `npm run lint` pass in `apps/web`.
## Out of Scope
- Backend changes.
- Changes to other pages (sessions, settings, etc.).
- New features beyond the existing desktop capabilities.
@@ -0,0 +1,9 @@
# Tasks: Mobile Tool Workshop & Profile UI Rework
- [x] Inspect existing mobile components, desktop editors, and hooks.
- [x] Rework `ToolWorkshopMobileView` to support full desktop functionality (definition type, manifest editor, conditional port, startup command, readiness probe, required variables, validation).
- [x] Add responsive CSS for manifest editor and tool-workshop mobile forms.
- [x] Create `ProfileMobileView` component with mobile-friendly avatar/name/email form.
- [x] Update `ProfilePage` to render `ProfileMobileView` on mobile viewports.
- [x] Run `npm run typecheck` and `npm run lint` in `apps/web` and fix issues.
- [x] Update project maps for changed files.