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.
2026-07-26 11:49:16 +00:00 · 2026-06-14 20:18:48 -04:00
parent 49f1b49ac6
commit a5109e7916
8 changed files with 608 additions and 34 deletions
@@ -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>
@@ -0,0 +1,125 @@
+/**
+ * Mobile compose/.env editing (below the md breakpoint).
+ *
+ * Logs in and creates the stack at desktop width (the create dialog and stack
+ * list are desktop-driven), then resizes to a phone viewport so EditorView
+ * renders MobileStackDetail. Covers the acceptance-criteria flows: open on
+ * mobile, edit compose, save, save-and-deploy guard, and discard dirty changes.
+ * Phone widths exercised: 390px and 430px. The compose/.env toggle and env-file
+ * save share the same handlers and are covered by MobileStackDetail.test.tsx.
+ */
+import { test, expect, type Page } from '@playwright/test';
+import { loginAs, waitForStacksLoaded } from './helpers';
+
+const TEST_STACK = 'e2e-mobile-edit-stack';
+const PHONE_390 = { width: 390, height: 844 };
+const PHONE_430 = { width: 430, height: 932 };
+
+async function deleteTestStack(page: Page) {
+    await page.evaluate(async (name) => {
+        await fetch(`/api/stacks/${name}`, { method: 'DELETE', credentials: 'include' }).catch(() => { });
+    }, TEST_STACK);
+}
+
+async function createTestStack(page: Page) {
+    await page.getByRole('button', { name: 'Create Stack' }).click();
+    await expect(page.getByRole('dialog')).toBeVisible({ timeout: 5_000 });
+    await page.locator('#create-stack-name').fill(TEST_STACK);
+    await page.locator('[role="dialog"]').getByRole('button', { name: 'Create' }).click();
+    await expect(page.getByRole('dialog')).toBeHidden({ timeout: 8_000 });
+}
+
+// Open the freshly created stack in the editor (desktop), then drop to a phone
+// viewport so the mobile detail surface renders, and select the Compose segment.
+async function openComposeOnPhone(page: Page, viewport = PHONE_390) {
+    await page.locator('[role="listbox"]').getByText(TEST_STACK, { exact: true }).click();
+    await page.setViewportSize(viewport);
+    await page.getByRole('tab', { name: 'Compose' }).click();
+}
+
+async function openEditor(page: Page) {
+    await page.getByRole('button', { name: 'edit' }).click();
+    await expect(page.getByTestId('mobile-compose-editor')).toBeVisible({ timeout: 5_000 });
+}
+
+test.describe('mobile stack editing', () => {
+    test.beforeEach(async ({ page }) => {
+        await loginAs(page);
+        await waitForStacksLoaded(page);
+        await deleteTestStack(page);
+        await page.reload();
+        await loginAs(page);
+        await waitForStacksLoaded(page);
+        await createTestStack(page);
+    });
+
+    test.afterEach(async ({ page }) => {
+        await page.setViewportSize({ width: 1280, height: 800 });
+        await deleteTestStack(page);
+    });
+
+    test('edits and saves the compose file from a phone (390px)', async ({ page }) => {
+        await openComposeOnPhone(page);
+        await openEditor(page);
+
+        await page.getByTestId('mobile-compose-editor').fill('services:\n  app:\n    image: nginx:1.27\n    restart: always\n');
+        await page.getByTestId('mobile-editor-save').click();
+
+        await expect(page.getByText(/file saved successfully/i)).toBeVisible({ timeout: 5_000 });
+
+        // The edit must actually reach disk, not just flash a toast.
+        const onDisk = await page.evaluate(async (name) => {
+            const res = await fetch(`/api/stacks/${name}`, { credentials: 'include' });
+            return res.text();
+        }, TEST_STACK);
+        expect(onDisk).toContain('nginx:1.27');
+    });
+
+    test('does not deploy when the save PUT fails', async ({ page }) => {
+        await page.route(`**/api/stacks/${TEST_STACK}`, async (route, req) => {
+            if (req.method() === 'PUT') {
+                await route.fulfill({ status: 500, body: 'forced save failure' });
+                return;
+            }
+            await route.continue();
+        });
+        let deployAttempts = 0;
+        await page.route(`**/api/stacks/${TEST_STACK}/deploy*`, async (route, req) => {
+            if (req.method() === 'POST') deployAttempts += 1;
+            await route.continue();
+        });
+
+        await openComposeOnPhone(page);
+        await openEditor(page);
+        await page.getByTestId('mobile-editor-save-deploy').click();
+
+        await expect(page.getByText(/failed to save file/i)).toBeVisible({ timeout: 5_000 });
+        await page.waitForTimeout(1_000);
+        expect(deployAttempts).toBe(0);
+    });
+
+    test('guards a dirty close and discards on confirm', async ({ page }) => {
+        await openComposeOnPhone(page);
+        await openEditor(page);
+
+        await page.getByTestId('mobile-compose-editor').fill('services:\n  app:\n    image: nginx:1.28\n');
+        await page.getByTestId('mobile-editor-close').click();
+
+        const dialog = page.getByRole('alertdialog', { name: /discard unsaved changes/i });
+        await expect(dialog).toBeVisible({ timeout: 5_000 });
+        await page.getByRole('button', { name: 'Discard changes' }).click();
+
+        // The editor closes back to the read-only Compose segment.
+        await expect(page.getByTestId('mobile-compose-editor')).toBeHidden();
+        await expect(page.getByRole('button', { name: 'edit' })).toBeVisible();
+    });
+
+    test('opens a usable editor at 430px', async ({ page }) => {
+        await openComposeOnPhone(page, PHONE_430);
+        await openEditor(page);
+
+        await expect(page.getByTestId('mobile-compose-editor')).toBeVisible();
+        await expect(page.getByTestId('mobile-editor-save')).toBeVisible();
+        await expect(page.getByTestId('mobile-editor-save-deploy')).toBeVisible();
+    });
+});
@@ -453,6 +453,8 @@ export default function EditorLayout() {
      onDismissRecovery={() => { if (selectedFile) dismissActionResult(selectedFile); }}
      panelStartedAt={panelStartedAt}
      onMobileBack={goToMobileList}
+      onCloseEditor={() => stackActions.attemptLeaveEditor(() => setEditingCompose(false))}
+      hasUnsavedChanges={stackActions.hasUnsavedChanges}
    />
  );

@@ -199,6 +199,16 @@ export interface EditorViewProps {

    // Mobile-only: back affordance in the detail header returns to the stack list.
    onMobileBack?: () => void;
+    // Mobile-only (always supplied by renderEditor): close the full-screen
+    // compose/.env editor, routed through the unsaved-changes guard so a dirty
+    // close prompts before discarding. Required, not optional, because the
+    // fallback would silently discard edits; the desktop EditorView ignores it.
+    onCloseEditor: () => void;
+    // Mobile-only (always supplied by renderEditor): true when the compose or env
+    // buffer differs from disk; gates the env-file selector so switching files
+    // cannot drop unsaved edits. Required so a wiring gap is a compile error
+    // rather than a silently-disabled data-loss guard.
+    hasUnsavedChanges: () => boolean;
    // Mobile-only: notifications + more-menu cluster for the detail header right
    // slot (the global TopBar is dropped on the full-screen detail surface).
    headerActions?: React.ReactNode;
@@ -0,0 +1,205 @@
+import { useEffect } from 'react';
+import { ChevronLeft, Save, Rocket } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '../ui/button';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
+import type { StackAction } from './EditorView';
+
+interface MobileComposeEditorProps {
+    content: string;
+    envContent: string;
+    setContent: (next: string) => void;
+    setEnvContent: (next: string) => void;
+    activeTab: 'compose' | 'env' | 'files';
+    setActiveTab: (tab: 'compose' | 'env' | 'files') => void;
+    envExists: boolean;
+    envFiles: string[];
+    selectedEnvFile: string;
+    changeEnvFile: (file: string) => Promise<void>;
+    isFileLoading: boolean;
+    loadingAction: StackAction | null;
+    canEdit: boolean;
+    requestSave: () => void;
+    requestSaveAndDeploy: (e: React.MouseEvent) => void;
+    onClose: () => void;
+    hasUnsavedChanges: () => boolean;
+}
+
+// Full-screen phone editing surface for the compose file and the selected .env.
+// Deliberately a lightweight monospace textarea, not Monaco: the flow is scoped to
+// small, safe edits, and the native keyboard plus reliable touch scrolling matter
+// more than syntax highlighting here. Every save protection (ETag conflict, diff
+// preview, save-and-deploy, dirty-navigation guard) is reused from useStackActions
+// via the shared editor state, so this surface only renders the controls.
+export function MobileComposeEditor(props: MobileComposeEditorProps) {
+    const {
+        content,
+        envContent,
+        setContent,
+        setEnvContent,
+        activeTab,
+        setActiveTab,
+        envExists,
+        envFiles,
+        selectedEnvFile,
+        changeEnvFile,
+        isFileLoading,
+        loadingAction,
+        canEdit,
+        requestSave,
+        requestSaveAndDeploy,
+        onClose,
+        hasUnsavedChanges,
+    } = props;
+
+    // The save handlers (saveFile) key off the shared editorState.activeTab, so the
+    // displayed buffer must match it. The desktop editor can hand off a 'files' tab
+    // (or 'env' with no env file) when it crosses into the mobile breakpoint; left
+    // alone the textarea would show compose while a save silently no-ops on 'files'.
+    // Normalize to 'compose' so the visible edit always saves to the visible file.
+    useEffect(() => {
+        if (activeTab === 'files' || (activeTab === 'env' && !envExists)) {
+            setActiveTab('compose');
+        }
+    }, [activeTab, envExists, setActiveTab]);
+
+    // Mirror of the normalization above for this render: 'env' only when an env
+    // file exists, else 'compose'. The effect makes the shared activeTab follow.
+    const tab: 'compose' | 'env' = activeTab === 'env' && envExists ? 'env' : 'compose';
+    const value = tab === 'compose' ? content || '' : envContent || '';
+    // Switching the env file refetches and overwrites the env buffer, so block it
+    // while there are unsaved edits (matches the desktop selector being disabled
+    // mid-edit). The compose <-> .env toggle stays free: both buffers persist.
+    const envSwitchDisabled = hasUnsavedChanges() || isFileLoading;
+    const actionsDisabled = isFileLoading || loadingAction === 'deploy';
+    // Read-only while an env-file fetch is in flight: changeEnvFile overwrites the
+    // buffer when it resolves, so edits typed during the load would be silently lost.
+    const editorReadOnly = !canEdit || isFileLoading;
+
+    return (
+        <div className="flex h-full min-h-0 flex-col">
+            {/* Header: close + file selector */}
+            <div className="shrink-0 border-b border-hairline px-4 pb-3 pt-3">
+                <div className="flex items-center justify-between gap-2">
+                    <button
+                        type="button"
+                        onClick={onClose}
+                        aria-label="Close editor"
+                        data-testid="mobile-editor-close"
+                        className="inline-flex min-h-11 items-center gap-1 pr-3 font-mono text-xs text-brand"
+                    >
+                        <ChevronLeft className="h-4 w-4" strokeWidth={1.6} />
+                        Cancel
+                    </button>
+                    {envExists ? (
+                        <div
+                            role="tablist"
+                            aria-label="File to edit"
+                            className="flex gap-1 rounded-lg border border-card-border bg-well p-1 shadow-[var(--shadow-well)]"
+                        >
+                            {(['compose', 'env'] as const).map(id => {
+                                const on = tab === id;
+                                return (
+                                    <button
+                                        key={id}
+                                        type="button"
+                                        role="tab"
+                                        aria-selected={on}
+                                        onClick={() => setActiveTab(id)}
+                                        className={cn(
+                                            'rounded-md px-3 py-1.5 font-mono text-[11px] lowercase tracking-[0.08em] transition-colors',
+                                            on
+                                                ? 'bg-card text-stat-value shadow-card-bevel'
+                                                : 'text-stat-subtitle hover:text-foreground',
+                                        )}
+                                    >
+                                        {id === 'compose' ? 'compose' : '.env'}
+                                    </button>
+                                );
+                            })}
+                        </div>
+                    ) : (
+                        <span className="font-mono text-[11px] lowercase tracking-[0.08em] text-stat-subtitle">
+                            compose.yaml
+                        </span>
+                    )}
+                </div>
+
+                {tab === 'env' && envFiles.length > 1 && (
+                    <Select value={selectedEnvFile} onValueChange={changeEnvFile} disabled={envSwitchDisabled}>
+                        <SelectTrigger className="mt-2 h-9 min-h-11 w-full border-card-border bg-input text-xs">
+                            <SelectValue placeholder="Select environment file" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {envFiles.map(file => (
+                                <SelectItem key={file} value={file} className="text-xs">
+                                    {file.split('/').pop()}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                )}
+            </div>
+
+            {/* Editor */}
+            <div className="min-h-0 flex-1 overflow-hidden p-3">
+                <textarea
+                    data-testid="mobile-compose-editor"
+                    value={value}
+                    onChange={e => {
+                        if (editorReadOnly) return;
+                        if (tab === 'compose') setContent(e.target.value);
+                        else setEnvContent(e.target.value);
+                    }}
+                    readOnly={editorReadOnly}
+                    spellCheck={false}
+                    autoCapitalize="off"
+                    autoCorrect="off"
+                    autoComplete="off"
+                    wrap="off"
+                    aria-label={tab === 'compose' ? 'Compose file content' : 'Environment file content'}
+                    className="h-full w-full resize-none overflow-auto whitespace-pre rounded-lg border border-card-border bg-input px-3 py-2.5 font-mono text-[13px] leading-relaxed text-foreground shadow-card-bevel focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                />
+            </div>
+
+            {/* Safety note + save actions */}
+            <div className="shrink-0 space-y-2.5 border-t border-hairline px-4 py-3">
+                <p className="font-mono text-[11px] leading-snug text-stat-subtitle">
+                    Mobile editing is for small, safe changes. For large rewrites, open this stack on desktop.
+                </p>
+                {canEdit && (
+                    <div className="flex items-center gap-2">
+                        <Button
+                            type="button"
+                            variant="outline"
+                            onClick={requestSave}
+                            disabled={actionsDisabled}
+                            data-testid="mobile-editor-save"
+                            className="h-11 flex-1 rounded-lg"
+                        >
+                            <Save className="mr-2 h-4 w-4" strokeWidth={1.5} />
+                            Save
+                        </Button>
+                        <Button
+                            type="button"
+                            variant="default"
+                            onClick={requestSaveAndDeploy}
+                            disabled={actionsDisabled}
+                            data-testid="mobile-editor-save-deploy"
+                            className="h-11 flex-1 rounded-lg"
+                        >
+                            <Rocket className="mr-2 h-4 w-4" strokeWidth={1.5} />
+                            Save &amp; Deploy
+                        </Button>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
@@ -1,21 +1,34 @@
 import { describe, it, expect, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
-import type { ReactNode } from 'react';
+import { useState, type ReactNode } from 'react';
 import { MobileStackDetail } from './MobileStackDetail';
 import type { EditorViewProps } from './EditorView';

 // The detail's heavy children stream logs, parse compose, and render container
-// stats; stub them with markers so this test focuses on the segmented-control
-// behavior (default segment + switching).
+// stats; stub them with markers so this test focuses on segment behavior and the
+// mobile editing flow.
 vi.mock('./editor-view-blocks', () => ({
    StackIdentityHeader: () => <div>identity-header</div>,
    ContainersHealth: () => <div>health-pane</div>,
    StackLogsSection: () => <div>logs-pane</div>,
 }));
-vi.mock('../StackAnatomyPanel', () => ({ default: () => <div>compose-pane</div> }));
+// Prop-aware so the edit affordance (canEdit + onEditCompose) is exercised, not
+// just the read-only marker.
+vi.mock('../StackAnatomyPanel', () => ({
+    default: ({ canEdit, onEditCompose }: { canEdit: boolean; onEditCompose: () => void }) => (
+        <div>
+            compose-pane
+            {canEdit && (
+                <button type="button" onClick={onEditCompose}>
+                    edit-compose
+                </button>
+            )}
+        </div>
+    ),
+}));
 vi.mock('../ErrorBoundary', () => ({ default: ({ children }: { children: ReactNode }) => <>{children}</> }));
 // The inline operation banner pulls in the deploy-feedback context; this suite
-// covers the segmented-control behavior, so stub it (it renders nothing in the
+// covers segment + editor behavior, so stub it (it renders nothing in the
 // default Modal style anyway).
 vi.mock('./StackOperationBanner', () => ({ StackOperationBanner: () => null }));

@@ -28,7 +41,10 @@ function makeProps(over: Partial<EditorViewProps> = {}): EditorViewProps {
        containerStatsError: null,
        content: '',
        envContent: '',
+        envExists: false,
+        envFiles: [],
        selectedEnvFile: '',
+        isFileLoading: false,
        gitSourcePendingMap: {},
        notifications: [],
        copiedDigest: null,
@@ -39,6 +55,8 @@ function makeProps(over: Partial<EditorViewProps> = {}): EditorViewProps {
        trivy: { available: false },
        backupInfo: { exists: false, timestamp: null },
        logsMode: 'structured',
+        activeTab: 'compose',
+        editingCompose: false,
        copiedDigestTimerRef: { current: null },
        deployStack: vi.fn(),
        restartStack: vi.fn(),
@@ -46,19 +64,46 @@ function makeProps(over: Partial<EditorViewProps> = {}): EditorViewProps {
        updateStack: vi.fn(),
        rollbackStack: vi.fn(),
        scanStackConfig: vi.fn(),
+        requestSave: vi.fn(),
+        requestSaveAndDeploy: vi.fn(),
+        setContent: vi.fn(),
+        setEnvContent: vi.fn(),
+        changeEnvFile: vi.fn(),
        openLogViewer: vi.fn(),
        openBashModal: vi.fn(),
        serviceAction: vi.fn(),
        setLogsMode: vi.fn(),
+        setActiveTab: vi.fn(),
+        setEditingCompose: vi.fn(),
        setGitSourceOpen: vi.fn(),
        setCopiedDigest: vi.fn(),
        requestDeleteStack: vi.fn(),
        onMobileBack: vi.fn(),
+        onCloseEditor: vi.fn(),
+        hasUnsavedChanges: () => false,
        ...over,
    } as unknown as EditorViewProps;
 }

-describe('MobileStackDetail', () => {
+// Controlled wrapper so clicking the edit affordance and the compose/.env toggle
+// actually flips the editingCompose / activeTab state the parent owns.
+function ControlledDetail({ over = {} }: { over?: Partial<EditorViewProps> }) {
+    const [editingCompose, setEditingCompose] = useState(Boolean(over.editingCompose));
+    const [activeTab, setActiveTab] = useState<'compose' | 'env' | 'files'>(over.activeTab ?? 'compose');
+    return (
+        <MobileStackDetail
+            {...makeProps({
+                ...over,
+                editingCompose,
+                setEditingCompose,
+                activeTab,
+                setActiveTab,
+            })}
+        />
+    );
+}
+
+describe('MobileStackDetail segments', () => {
    it('defaults to the Logs segment', () => {
        render(<MobileStackDetail {...makeProps()} />);
        expect(screen.getByText('logs-pane')).toBeInTheDocument();
@@ -94,16 +139,151 @@ describe('MobileStackDetail', () => {
        fireEvent.click(screen.getByRole('button', { name: 'Back to stacks' }));
        expect(onMobileBack).toHaveBeenCalledTimes(1);
    });
+});

-    it('shows the edit-on-desktop nudge in Compose when the user can edit', () => {
-        render(<MobileStackDetail {...makeProps({ can: () => true })} />);
+describe('MobileStackDetail mobile editing', () => {
+    it('exposes the edit affordance in Compose only when the user can edit', () => {
+        const { rerender } = render(<MobileStackDetail {...makeProps({ can: () => true })} />);
        fireEvent.click(screen.getByRole('tab', { name: 'Compose' }));
-        expect(screen.getByText(/Editing compose is available on a larger screen/i)).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'edit-compose' })).toBeInTheDocument();
+
+        rerender(<MobileStackDetail {...makeProps({ can: () => false })} />);
+        fireEvent.click(screen.getByRole('tab', { name: 'Compose' }));
+        expect(screen.queryByRole('button', { name: 'edit-compose' })).not.toBeInTheDocument();
    });

-    it('hides the nudge when the user cannot edit', () => {
-        render(<MobileStackDetail {...makeProps({ can: () => false })} />);
+    it('opens the full-screen editor from the Compose edit affordance', () => {
+        render(<ControlledDetail />);
        fireEvent.click(screen.getByRole('tab', { name: 'Compose' }));
-        expect(screen.queryByText(/Editing compose is available/i)).not.toBeInTheDocument();
+        fireEvent.click(screen.getByRole('button', { name: 'edit-compose' }));
+        expect(screen.getByTestId('mobile-compose-editor')).toBeInTheDocument();
+        // The full-screen editor replaces the segmented detail.
+        expect(screen.queryByText('logs-pane')).not.toBeInTheDocument();
+    });
+
+    it('falls back to the read-only detail when editingCompose is set but the user cannot edit', () => {
+        render(<MobileStackDetail {...makeProps({ editingCompose: true, can: () => false })} />);
+        expect(screen.queryByTestId('mobile-compose-editor')).not.toBeInTheDocument();
+        expect(screen.getByText('logs-pane')).toBeInTheDocument();
+    });
+
+    it('shows the compose buffer and routes edits to the right setter per tab', () => {
+        const setContent = vi.fn();
+        const setEnvContent = vi.fn();
+        render(
+            <ControlledDetail
+                over={{
+                    editingCompose: true,
+                    content: 'compose-body',
+                    envContent: 'env-body',
+                    envExists: true,
+                    envFiles: ['.env'],
+                    selectedEnvFile: '.env',
+                    setContent,
+                    setEnvContent,
+                }}
+            />,
+        );
+        const textarea = screen.getByTestId('mobile-compose-editor') as HTMLTextAreaElement;
+        expect(textarea.value).toBe('compose-body');
+        fireEvent.change(textarea, { target: { value: 'compose-edited' } });
+        expect(setContent).toHaveBeenCalledWith('compose-edited');
+
+        fireEvent.click(screen.getByRole('tab', { name: '.env' }));
+        const envArea = screen.getByTestId('mobile-compose-editor') as HTMLTextAreaElement;
+        expect(envArea.value).toBe('env-body');
+        fireEvent.change(envArea, { target: { value: 'env-edited' } });
+        expect(setEnvContent).toHaveBeenCalledWith('env-edited');
+    });
+
+    it('disables the env-file selector while there are unsaved changes', () => {
+        render(
+            <ControlledDetail
+                over={{
+                    editingCompose: true,
+                    activeTab: 'env',
+                    envExists: true,
+                    envFiles: ['.env', '.env.prod'],
+                    selectedEnvFile: '.env',
+                    hasUnsavedChanges: () => true,
+                }}
+            />,
+        );
+        expect(screen.getByRole('combobox')).toBeDisabled();
+    });
+
+    it('disables save actions while a deploy is running', () => {
+        render(<MobileStackDetail {...makeProps({ editingCompose: true, loadingAction: 'deploy' })} />);
+        expect(screen.getByTestId('mobile-editor-save')).toBeDisabled();
+        expect(screen.getByTestId('mobile-editor-save-deploy')).toBeDisabled();
+    });
+
+    it('routes Cancel through the close handler even after a save and a fresh edit', () => {
+        const requestSave = vi.fn();
+        const onCloseEditor = vi.fn();
+        render(
+            <ControlledDetail
+                over={{
+                    editingCompose: true,
+                    content: 'compose-body',
+                    requestSave,
+                    onCloseEditor,
+                }}
+            />,
+        );
+        const textarea = screen.getByTestId('mobile-compose-editor');
+        fireEvent.change(textarea, { target: { value: 'first-edit' } });
+        fireEvent.click(screen.getByTestId('mobile-editor-save'));
+        expect(requestSave).toHaveBeenCalledTimes(1);
+
+        // Save clears isEditing on the real hook; Cancel must not depend on it.
+        fireEvent.change(textarea, { target: { value: 'second-edit' } });
+        fireEvent.click(screen.getByTestId('mobile-editor-close'));
+        expect(onCloseEditor).toHaveBeenCalledTimes(1);
+    });
+
+    it('triggers save-and-deploy from the deploy action', () => {
+        const requestSaveAndDeploy = vi.fn();
+        render(<MobileStackDetail {...makeProps({ editingCompose: true, requestSaveAndDeploy })} />);
+        fireEvent.click(screen.getByTestId('mobile-editor-save-deploy'));
+        expect(requestSaveAndDeploy).toHaveBeenCalledTimes(1);
+    });
+
+    it('normalizes a files tab to compose so the visible edit saves to the visible file', () => {
+        // Desktop can hand off activeTab='files' when it crosses into the mobile
+        // breakpoint; the editor shows compose, so the shared tab must follow or
+        // saveFile silently no-ops on 'files'.
+        const setActiveTab = vi.fn();
+        render(<MobileStackDetail {...makeProps({ editingCompose: true, activeTab: 'files', setActiveTab })} />);
+        expect(setActiveTab).toHaveBeenCalledWith('compose');
+    });
+
+    it('normalizes an env tab to compose when the stack has no env file', () => {
+        const setActiveTab = vi.fn();
+        render(<MobileStackDetail {...makeProps({ editingCompose: true, activeTab: 'env', envExists: false, setActiveTab })} />);
+        expect(setActiveTab).toHaveBeenCalledWith('compose');
+    });
+
+    it('blocks textarea edits while an env-file load is in flight', () => {
+        const setContent = vi.fn();
+        const setEnvContent = vi.fn();
+        render(
+            <MobileStackDetail
+                {...makeProps({
+                    editingCompose: true,
+                    activeTab: 'env',
+                    envExists: true,
+                    envFiles: ['.env'],
+                    isFileLoading: true,
+                    setContent,
+                    setEnvContent,
+                })}
+            />,
+        );
+        const editor = screen.getByTestId('mobile-compose-editor');
+        expect(editor).toHaveAttribute('readonly');
+        fireEvent.change(editor, { target: { value: 'late-edit' } });
+        expect(setEnvContent).not.toHaveBeenCalled();
+        expect(setContent).not.toHaveBeenCalled();
    });
 });
@@ -3,6 +3,7 @@ import { ChevronLeft } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import ErrorBoundary from '../ErrorBoundary';
 import StackAnatomyPanel from '../StackAnatomyPanel';
+import { MobileComposeEditor } from './MobileComposeEditor';
 import { StackIdentityHeader, ContainersHealth, StackLogsSection } from './editor-view-blocks';
 import { RecoveryPanel } from './RecoveryPanel';
 import { StackOperationBanner } from './StackOperationBanner';
@@ -21,7 +22,8 @@ type Segment = (typeof SEGMENTS)[number]['id'];
 // two-pane grid does not fit a phone, so the same identity header, container
 // health, logs, and anatomy are reorganized into a tracked-mono segmented
 // control. Logs is the default segment (first-read, without copying Dockge's
-// layout). Compose is read-only on mobile: full file editing stays on desktop.
+// layout). From the Compose segment, an editor with stack:edit can open the
+// full-screen MobileComposeEditor for small, safe compose/.env edits.
 export function MobileStackDetail(props: EditorViewProps) {
    const {
        stackName,
@@ -31,7 +33,10 @@ export function MobileStackDetail(props: EditorViewProps) {
        containerStatsError,
        content,
        envContent,
+        envExists,
+        envFiles,
        selectedEnvFile,
+        isFileLoading,
        gitSourcePendingMap,
        notifications,
        copiedDigest,
@@ -42,6 +47,8 @@ export function MobileStackDetail(props: EditorViewProps) {
        trivy,
        backupInfo,
        logsMode,
+        activeTab,
+        editingCompose,
        copiedDigestTimerRef,
        deployStack,
        restartStack,
@@ -49,14 +56,23 @@ export function MobileStackDetail(props: EditorViewProps) {
        updateStack,
        rollbackStack,
        scanStackConfig,
+        requestSave,
+        requestSaveAndDeploy,
+        setContent,
+        setEnvContent,
+        changeEnvFile,
        openLogViewer,
        openBashModal,
        serviceAction,
        setLogsMode,
+        setActiveTab,
+        setEditingCompose,
        setGitSourceOpen,
        setCopiedDigest,
        requestDeleteStack,
        onMobileBack,
+        onCloseEditor,
+        hasUnsavedChanges,
        headerActions,
        recoveryResult,
        onRefreshState,
@@ -70,6 +86,34 @@ export function MobileStackDetail(props: EditorViewProps) {
    const isRunning = safeContainers.some(c => c.State === 'running');
    const canEditStack = can('stack:edit', 'stack', stackName);

+    // The writable editor layer renders only for an editor; a stale editingCompose
+    // while the user lacks stack:edit falls back to the read-only Compose segment.
+    if (editingCompose && canEditStack) {
+        return (
+            <ErrorBoundary>
+                <MobileComposeEditor
+                    content={content}
+                    envContent={envContent}
+                    setContent={setContent}
+                    setEnvContent={setEnvContent}
+                    activeTab={activeTab}
+                    setActiveTab={setActiveTab}
+                    envExists={envExists}
+                    envFiles={envFiles}
+                    selectedEnvFile={selectedEnvFile}
+                    changeEnvFile={changeEnvFile}
+                    isFileLoading={isFileLoading}
+                    loadingAction={loadingAction}
+                    canEdit={canEditStack}
+                    requestSave={requestSave}
+                    requestSaveAndDeploy={requestSaveAndDeploy}
+                    onClose={onCloseEditor}
+                    hasUnsavedChanges={hasUnsavedChanges}
+                />
+            </ErrorBoundary>
+        );
+    }
+
    return (
        <ErrorBoundary>
            <div className="flex h-full min-h-0 flex-col">
@@ -186,27 +230,20 @@ export function MobileStackDetail(props: EditorViewProps) {
                        <StackLogsSection stackName={stackName} logsMode={logsMode} setLogsMode={setLogsMode} />
                    )}
                    {segment === 'compose' && (
-                        <div className="flex min-h-0 flex-1 flex-col gap-3">
-                            <div className="min-h-0 flex-1">
-                                <StackAnatomyPanel
-                                    stackName={stackName}
-                                    content={content}
-                                    envContent={envContent}
-                                    selectedEnvFile={selectedEnvFile}
-                                    gitSourcePending={Boolean(gitSourcePendingMap[stackName])}
-                                    onEditCompose={() => {}}
-                                    onOpenGitSource={() => setGitSourceOpen(true)}
-                                    onApplyUpdate={() => { void updateStack(); }}
-                                    applying={loadingAction === 'update'}
-                                    canEdit={false}
-                                    notifications={notifications}
-                                />
-                            </div>
-                            {canEditStack && (
-                                <div className="shrink-0 rounded-lg border border-card-border bg-card px-3 py-2.5 font-mono text-[11px] text-stat-subtitle">
-                                    Editing compose is available on a larger screen. Open this stack on desktop to edit the file.
-                                </div>
-                            )}
+                        <div className="min-h-0 flex-1">
+                            <StackAnatomyPanel
+                                stackName={stackName}
+                                content={content}
+                                envContent={envContent}
+                                selectedEnvFile={selectedEnvFile}
+                                gitSourcePending={Boolean(gitSourcePendingMap[stackName])}
+                                onEditCompose={() => { setActiveTab('compose'); setEditingCompose(true); }}
+                                onOpenGitSource={() => setGitSourceOpen(true)}
+                                onApplyUpdate={() => { void updateStack(); }}
+                                applying={loadingAction === 'update'}
+                                canEdit={canEditStack}
+                                notifications={notifications}
+                            />
                        </div>
                    )}
                </div>