diff --git a/openspec/changes/mobile-pages-overhaul/tasks.md b/openspec/changes/mobile-pages-overhaul/tasks.md index d5b198c..417c0d7 100644 --- a/openspec/changes/mobile-pages-overhaul/tasks.md +++ b/openspec/changes/mobile-pages-overhaul/tasks.md @@ -40,10 +40,10 @@ ## 6. Testing & Polish -- [ ] 6.1 Test mobile navigation on iPhone SE (320px) -- [ ] 6.2 Test mobile navigation on iPhone standard (375px) -- [ ] 6.3 Verify desktop layouts remain unchanged -- [ ] 6.4 Run npm run typecheck -- [ ] 6.5 Run npm run lint -- [ ] 6.6 Run npm run build -- [ ] 6.7 Test swipe gestures and touch targets +- [x] 6.1 Test mobile navigation on iPhone SE (320px) +- [x] 6.2 Test mobile navigation on iPhone standard (375px) +- [x] 6.3 Verify desktop layouts remain unchanged +- [x] 6.4 Run npm run typecheck +- [x] 6.5 Run npm run lint +- [x] 6.6 Run npm run build +- [x] 6.7 Test swipe gestures and touch targets diff --git a/openspec/specs/mobile-list-detail/spec.md b/openspec/specs/mobile-list-detail/spec.md new file mode 100644 index 0000000..4773b46 --- /dev/null +++ b/openspec/specs/mobile-list-detail/spec.md @@ -0,0 +1,64 @@ +## ADDED Requirements + +### Requirement: Mobile list view for configuration items +The mobile view SHALL display configuration items (tool types, config profiles) as a scrollable list of cards. + +#### Scenario: Viewing tool types list +- **WHEN** user navigates to Tool Workshop on mobile +- **THEN** a list of tool type cards is displayed, each showing name and brief description + +#### Scenario: Viewing config profiles list +- **WHEN** user navigates to Config Profiles on mobile +- **THEN** a list of profile cards is displayed, each showing name and description + +#### Scenario: Empty state +- **WHEN** the list has no items +- **THEN** an empty state message is shown with a "Create" button + +### Requirement: Item detail view +Tapping a list item SHALL navigate to a detail view showing all configuration fields in read-only format. + +#### Scenario: Viewing tool type details +- **WHEN** user taps a tool type in the list +- **THEN** a detail page opens showing all tool type fields (name, description, port, template, etc.) + +#### Scenario: Viewing config profile details +- **WHEN** user taps a config profile in the list +- **THEN** a detail page opens showing all profile fields (env vars, mounts, includes, etc.) + +### Requirement: Detail-to-edit navigation +The detail view SHALL provide an "Edit" button that navigates to a full-screen edit form. + +#### Scenario: Entering edit mode +- **WHEN** user taps "Edit" on the detail view +- **THEN** a full-screen edit form opens with all fields editable + +#### Scenario: Saving changes +- **WHEN** user modifies fields and taps "Save" +- **THEN** changes are saved and the view returns to the detail page with updated data + +#### Scenario: Canceling edit +- **WHEN** user taps "Cancel" or back button +- **THEN** changes are discarded and the view returns to the detail page + +### Requirement: List item actions +Each list item SHALL support swipe-to-delete and a quick actions menu. + +#### Scenario: Deleting item +- **WHEN** user swipes left on a list item and taps "Delete" +- **THEN** a confirmation dialog appears, and upon confirmation the item is deleted + +#### Scenario: Quick actions +- **WHEN** user taps a "More" button on a list item +- **THEN** an action sheet appears with options: Edit, Duplicate, Delete + +### Requirement: Create new item +A floating action button (FAB) on the list view SHALL open a creation form. + +#### Scenario: Creating new item +- **WHEN** user taps the FAB (+) on the list view +- **THEN** a full-screen creation form opens + +#### Scenario: Saving new item +- **WHEN** user fills the form and taps "Save" +- **THEN** the item is created and the view returns to the list with the new item visible diff --git a/openspec/specs/mobile-navigation/spec.md b/openspec/specs/mobile-navigation/spec.md new file mode 100644 index 0000000..19a5f3c --- /dev/null +++ b/openspec/specs/mobile-navigation/spec.md @@ -0,0 +1,16 @@ +## ADDED Requirements + +### Requirement: Bottom navigation grouping +The mobile bottom navigation SHALL support grouping related pages under a single navigation item that opens a sub-menu. + +#### Scenario: Tools group navigation +- **WHEN** user views the mobile bottom navigation +- **THEN** a "Tools" item is visible that groups Tool Workshop and Config Profiles + +#### Scenario: Opening grouped menu +- **WHEN** user taps a grouped navigation item +- **THEN** a bottom sheet or menu opens showing the grouped pages + +#### Scenario: Active state for grouped items +- **WHEN** user is on a page within a group +- **THEN** the group's navigation item shows as active diff --git a/openspec/specs/mobile-repo-workspace/spec.md b/openspec/specs/mobile-repo-workspace/spec.md new file mode 100644 index 0000000..468158c --- /dev/null +++ b/openspec/specs/mobile-repo-workspace/spec.md @@ -0,0 +1,83 @@ +## ADDED Requirements + +### Requirement: File tree as primary view +The mobile Repo Workspace SHALL display the file tree as the primary view with repository and branch selectors at the top. + +#### Scenario: Viewing file tree +- **WHEN** user navigates to a project's workspace on mobile +- **THEN** a file tree is displayed showing folders and files in the repository + +#### Scenario: Repository selection +- **WHEN** user taps the repository selector dropdown +- **THEN** a list of available repositories is shown for selection + +#### Scenario: Branch selection +- **WHEN** user taps the branch selector dropdown +- **THEN** a list of branches is shown for selection + +### Requirement: File tree interactions +The file tree SHALL support folder expansion, file opening, and git status indicators. + +#### Scenario: Expanding folder +- **WHEN** user taps a folder in the tree +- **THEN** the folder expands to show its contents, or collapses if already expanded + +#### Scenario: Opening file +- **WHEN** user taps a file in the tree +- **THEN** the file opens in the editor view + +#### Scenario: Git status indicators +- **WHEN** files have git status (modified, staged, untracked) +- **THEN** visual indicators (colors/icons) are shown next to affected files + +### Requirement: Bottom tab navigation +The mobile workspace SHALL provide bottom tabs for switching between File Tree, Editor, Git, and Terminal views. + +#### Scenario: Switching to Editor tab +- **WHEN** user taps the "Editor" tab +- **THEN** the editor view is shown with the currently selected file (or empty state) + +#### Scenario: Switching to Git tab +- **WHEN** user taps the "Git" tab +- **THEN** the git view is shown with status, commit form, and file lists + +#### Scenario: Switching to Terminal tab +- **WHEN** user taps the "Terminal" tab +- **THEN** the terminal view is shown for the current repository + +### Requirement: Editor view +The editor view SHALL provide a full-screen code editing experience with syntax highlighting. + +#### Scenario: Editing file +- **WHEN** user opens a file and modifies it +- **THEN** syntax highlighting is applied and changes can be saved + +#### Scenario: Editor toolbar +- **WHEN** viewing the editor +- **THEN** a toolbar shows file name, save button, undo/redo buttons + +### Requirement: Git view +The git view SHALL show repository status and allow committing changes. + +#### Scenario: Viewing git status +- **WHEN** user opens the Git tab +- **THEN** modified, staged, and untracked files are listed separately + +#### Scenario: Staging files +- **WHEN** user toggles a file's checkbox +- **THEN** the file is staged or unstaged accordingly + +#### Scenario: Committing changes +- **WHEN** user enters a commit message and taps "Commit" +- **THEN** staged files are committed with the provided message + +### Requirement: Terminal view +The terminal view SHALL provide a full-screen terminal for the repository's tool instance. + +#### Scenario: Terminal for repository +- **WHEN** user opens the Terminal tab +- **THEN** a terminal is shown connected to the repository's active tool instance + +#### Scenario: No active instance +- **WHEN** no tool instance is running for the repository +- **THEN** a message is shown with a button to start a new session diff --git a/openspec/specs/mobile-tools-navigation/spec.md b/openspec/specs/mobile-tools-navigation/spec.md new file mode 100644 index 0000000..69c4949 --- /dev/null +++ b/openspec/specs/mobile-tools-navigation/spec.md @@ -0,0 +1,27 @@ +## ADDED Requirements + +### Requirement: Tools bottom sheet navigation +The mobile bottom navigation SHALL provide access to both Tool Workshop and Config Profiles through a grouped "Tools" entry. + +#### Scenario: Opening Tools menu +- **WHEN** user taps the "Tools" item in the mobile bottom navigation +- **THEN** a bottom sheet slides up showing "Tool Workshop" and "Config Profiles" options + +#### Scenario: Navigating to Tool Workshop +- **WHEN** user taps "Tool Workshop" in the bottom sheet +- **THEN** the bottom sheet closes and the app navigates to the Tool Workshop page + +#### Scenario: Navigating to Config Profiles +- **WHEN** user taps "Config Profiles" in the bottom sheet +- **THEN** the bottom sheet closes and the app navigates to the Config Profiles page + +#### Scenario: Closing bottom sheet without selection +- **WHEN** user taps outside the bottom sheet or swipes down +- **THEN** the bottom sheet closes without navigation + +### Requirement: Active state indication +The "Tools" bottom nav item SHALL indicate when either Tool Workshop or Config Profiles is the active page. + +#### Scenario: Active page indication +- **WHEN** user is viewing Tool Workshop or Config Profiles +- **THEN** the "Tools" item in the bottom nav appears active/highlighted