feat(editor): enable mobile compose and env editing (#1371)

* feat(editor): enable mobile compose and env editing

The mobile stack-detail Compose segment was read-only and told users to
edit on desktop. Operators need to make small emergency edits from a
phone, so the Compose segment now opens a full-screen editor for small,
safe compose and .env changes.

The editor is a lightweight monospace textarea rather than Monaco, sized
for small corrections at common phone widths. It reuses the existing
desktop save path from useStackActions and the global overlays, so every
protection behaves the same: ETag conflict handling, diff preview when
enabled, save-only, save-and-deploy, and the unsaved-changes guard. A
compose/.env toggle appears when the stack has an env file, and the
env-file picker is locked while edits are unsaved so switching files
cannot drop them. Editing is gated by the same stack:edit permission as
desktop.

A footer note reminds users that mobile editing is for small changes and
points large rewrites to desktop. The desktop Monaco editor is unchanged.

* fix(editor): keep the mobile editor save target in sync with the shown buffer

Two edge cases in the mobile compose/.env editor could silently drop an edit:

- When the desktop editor was on the Files tab (or an env tab with no env file)
  and the viewport crossed into the mobile breakpoint, the editor showed the
  compose buffer while the shared active tab stayed on files, so a save quietly
  no-opped. Normalize the active tab to compose on the mobile surface so the
  visible edit always saves to the visible file.
- The textarea stayed writable while an env-file switch was loading, so edits
  typed during the fetch were overwritten when it resolved. Make the textarea
  read-only while a file load is in flight.

Adds unit tests for both normalizations and the read-only-during-load guard.
This commit is contained in:
Anso
2026-06-14 20:18:48 -04:00
committed by GitHub
parent 49f1b49ac6
commit a5109e7916
8 changed files with 608 additions and 34 deletions
+15
View File
@@ -140,6 +140,18 @@ Review the diff, then:
If there are no unsaved changes the modal is skipped and the save proceeds directly. The toggle is off by default and stored per browser, so each device remembers its own setting.
## On a phone
On a narrow screen the stack opens as a full-screen detail with **Health**, **Logs**, and **Compose** segments instead of the two-column cockpit. The **Compose** segment shows the read-only Anatomy summary; tap **edit** to open a full-screen editor for small, safe changes.
<Frame>
<img src="/images/editor/editor-mobile.png" alt="Mobile compose editor with a Cancel button, the compose.yaml label, a monospace text field showing the compose file, a small-edits note, and Save and Save and Deploy buttons" />
</Frame>
The mobile editor is a lightweight monospace text field rather than Monaco. Tap **compose** or **.env** at the top to choose the file. The **.env** toggle appears only when the stack has an env file, and the file picker is locked while you have unsaved edits so switching files cannot drop them. The footer carries the same **Save** and **Save & Deploy** actions, and every protection is shared with desktop: the diff preview, save-conflict handling, and the unsaved-changes prompt all behave the same way. **Cancel** leaves the editor and asks before discarding unsaved edits.
A note at the bottom of the editor is a reminder that mobile editing is meant for small corrections such as bumping an image tag or fixing a value. For large compose rewrites, open the stack on a desktop. Editing requires the `stack:edit` permission.
## Logs
Below the Command Center the left column reserves the rest of its height for the **Logs** stream. Two modes are available, toggled by the buttons at the top right of the section.
@@ -189,6 +201,9 @@ Sencho tries `/bin/bash` first and transparently falls back to `/bin/sh` if bash
<Accordion title="The .env tab is greyed out">
The stack has no env file to edit. Add an `env_file:` entry to a service in `compose.yaml` and save, or create a `.env` file in the stack directory through the **Files** tab.
</Accordion>
<Accordion title="I can't edit compose from my phone">
Open the **Compose** segment in the stack detail and tap **edit**. If the **edit** affordance is missing, your role lacks the `stack:edit` permission; ask an admin to grant it. The phone editor is intended for small corrections; for large compose rewrites, open the stack on a desktop.
</Accordion>
<Accordion title='"Container is not running" error when opening a bash session'>
The container stopped between clicking the button and the exec starting. Start the container from the action bar (or the row's **Start service** option) and try again.
</Accordion>
Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB