@loadmill/droid-cua 1.0.0

package/LICENSE

@@ -0,0 +1 @@
+© 2025 Loadmill. All rights reserved.

package/README.md

@@ -0,0 +1,227 @@
+# droid-cua
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@loadmill/droid-cua"><img src="https://img.shields.io/npm/v/@loadmill/droid-cua?color=green" alt="npm version"></a>
+</p>
+
+<p align="center">
+  <a href="#what-is-droid-cua">What is droid-cua?</a> •
+  <a href="#quick-start">Quick Start</a> •
+  <a href="#features">Features</a> •
+  <a href="#usage">Usage</a> •
+  <a href="#assertions">Assertions</a> •
+  <a href="#command-line-options">Command Line Options</a> •
+  <a href="#how-it-works">How It Works</a> •
+  <a href="#license">License</a>
+</p>
+
+---
+
+**AI-powered Android testing using OpenAI's computer-use model**
+
+Create and run automated Android tests using natural language. The AI explores your app and generates executable test scripts.
+
+https://github.com/user-attachments/assets/36b2ea7e-820a-432d-9294-8aa61dceb4b0
+
+---
+
+<h2 id="what-is-droid-cua">💡 What is droid-cua?</h2>
+
+`droid-cua` gives you three core components for Android testing:
+
+* **Interactive Shell** – Design and run tests with real-time feedback and visual status indicators
+* **Test Scripts** – Simple text files with natural language instructions and assertions
+* **AI Agent** – Autonomous exploration powered by OpenAI's computer-use model
+
+Together, these let you create and execute Android tests without writing traditional test code.
+
+---
+
+<h2 id="quick-start">🚀 Quick Start</h2>
+
+**1. Install**
+
+Globally (recommended):
+```sh
+npm install -g @loadmill/droid-cua
+```
+
+Or from source:
+```sh
+git clone https://github.com/loadmill/droid-cua
+cd droid-cua
+npm install
+npm run build
+```
+
+**2. Set your OpenAI API key**
+
+Using environment variable:
+```sh
+export OPENAI_API_KEY=your-api-key
+```
+
+Or create a `.env` file:
+```sh
+echo "OPENAI_API_KEY=your-api-key" > .env
+```
+
+**3. Ensure ADB is available**
+
+```sh
+adb version
+```
+
+**4. Run**
+
+```sh
+droid-cua
+```
+
+The emulator will auto-launch if not already running.
+
+---
+
+<h2 id="features">✨ Features</h2>
+
+- **Design Mode** - Describe what to test, AI explores and creates test scripts
+- **Execution Mode** - Run tests with real-time feedback and assertion handling
+- **Headless Mode** - Run tests in CI/CD pipelines
+- **Test Management** - Create, edit, view, and run test scripts
+- **Smart Actions** - Automatic wait detection and coordinate mapping
+
+---
+
+<h2 id="usage">📚 Usage</h2>
+
+### Interactive Commands
+
+| Command | Description |
+|---------|-------------|
+| `/create <name>` | Create a new test |
+| `/run <name>` | Execute a test |
+| `/list` | List all tests |
+| `/view <name>` | View test contents |
+| `/edit <name>` | Edit a test |
+| `/help` | Show help |
+| `/exit` | Exit shell |
+
+### Creating Tests
+
+```sh
+droid-cua
+> /create login-test
+> Test the login flow with valid credentials
+```
+
+The AI will explore your app and generate a test script. Review and save it.
+
+### Running Tests
+
+Interactive:
+```sh
+droid-cua
+> /run login-test
+```
+
+Headless (CI/CD):
+```sh
+droid-cua --instructions tests/login-test.dcua
+```
+
+### Test Script Format
+
+One instruction per line:
+
+```
+Open the Calculator app
+assert: Calculator app is visible
+Type "2"
+Click the plus button
+Type "3"
+Click the equals button
+assert: result shows 5
+exit
+```
+
+<h3 id="assertions">Assertions</h3>
+
+Assertions validate the app state during test execution. Add them anywhere in your test script.
+
+**Syntax** (all valid):
+```
+assert: the login button is visible
+Assert: error message appears
+ASSERT the result shows 5
+```
+
+**Interactive Mode** - When an assertion fails:
+- `retry` - Retry the same assertion
+- `skip` - Continue to next instruction
+- `stop` - Stop test execution
+
+**Headless Mode** - Assertions fail immediately and exit with code 1.
+
+**Examples**:
+```
+assert: Calculator app is open
+assert: the result shows 8
+assert: error message is displayed in red
+assert: login button is enabled
+```
+
+---
+
+<h2 id="command-line-options">💻 Command Line Options</h2>
+
+| Option | Description |
+|--------|-------------|
+| `--avd=NAME` | Specify emulator |
+| `--instructions=FILE` | Run test headless |
+| `--record` | Save screenshots |
+| `--debug` | Enable debug logs |
+
+---
+
+## Requirements
+
+- Node.js 18.17.0+
+- Android Debug Bridge (ADB)
+- Android Emulator (AVD)
+- OpenAI API Key (Tier 3 for computer-use-preview model)
+
+---
+
+<h2 id="how-it-works">🔧 How It Works</h2>
+
+1. Connects to a running Android emulator
+2. Captures full-screen device screenshots
+3. Scales down the screenshots for OpenAI model compatibility
+4. Sends screenshots and user instructions to OpenAI's computer-use-preview model
+5. Receives structured actions (click, scroll, type, keypress, wait, drag)
+6. Rescales model outputs back to real device coordinates
+7. Executes the actions on the device via ADB
+8. Validates assertions and handles failures
+9. Repeats until task completion
+
+---
+
+## 🎞️ Convert Screenshots to Video
+
+If you run with `--record`, screenshots are saved to:
+```
+droid-cua-recording-<timestamp>/
+```
+
+Convert to video with ffmpeg:
+```sh
+ffmpeg -framerate 1 -pattern_type glob -i 'droid-cua-recording-*/frame_*.png' \
+  -vf "pad=ceil(iw/2)*2:ceil(ih/2)*2" \
+  -c:v libx264 -pix_fmt yuv420p session.mp4
+```
+
+---
+
+<h2 id="license">📄 License</h2>
+
+© 2025 Loadmill. All rights reserved.

package/bin/droid-cua

@@ -0,0 +1,6 @@
+#!/usr/bin/env node
+
+import('../build/index.js').catch(err => {
+  console.error(err);
+  process.exit(1);
+});

package/build/index.js

@@ -0,0 +1,58 @@
+import minimist from "minimist";
+import path from "path";
+import { mkdir, readFile } from "fs/promises";
+import { connectToDevice, getDeviceInfo } from "./src/device/connection.js";
+import { Session } from "./src/core/session.js";
+import { ExecutionEngine } from "./src/core/execution-engine.js";
+import { buildBaseSystemPrompt } from "./src/core/prompts.js";
+import { startInkShell } from "./src/cli/ink-shell.js";
+import { ExecutionMode } from "./src/modes/execution-mode.js";
+import { logger } from "./src/utils/logger.js";
+const args = minimist(process.argv.slice(2));
+const avdName = args["avd"];
+const recordScreenshots = args["record"] || false;
+const instructionsFile = args.instructions || args.i || null;
+const debugMode = args["debug"] || false;
+// Initialize debug logging
+await logger.init(debugMode);
+const screenshotDir = path.join("droid-cua-recording-" + Date.now());
+if (recordScreenshots)
+    await mkdir(screenshotDir, { recursive: true });
+async function main() {
+    // Connect to device
+    const deviceId = await connectToDevice(avdName);
+    const deviceInfo = await getDeviceInfo(deviceId);
+    console.log(`Using real resolution: ${deviceInfo.device_width}x${deviceInfo.device_height}`);
+    console.log(`Model sees resolution: ${deviceInfo.scaled_width}x${deviceInfo.scaled_height}`);
+    // Create session to manage state
+    const session = new Session(deviceId, deviceInfo);
+    const initialSystemText = buildBaseSystemPrompt(deviceInfo);
+    session.setSystemPrompt(initialSystemText);
+    // Create execution engine
+    const engine = new ExecutionEngine(session, {
+        recordScreenshots,
+        screenshotDir,
+    });
+    // If --instructions provided, run in headless mode
+    if (instructionsFile) {
+        console.log(`\nRunning test from: ${instructionsFile}\n`);
+        // Read and parse the instructions file
+        const content = await readFile(instructionsFile, "utf-8");
+        const instructions = content
+            .split("\n")
+            .map(line => line.trim())
+            .filter(line => line.length > 0);
+        const executionMode = new ExecutionMode(session, engine, instructions, true); // true = headless mode
+        const result = await executionMode.execute();
+        if (result.success) {
+            process.exit(0);
+        }
+        else {
+            console.error(`\nTest failed: ${result.error}`);
+            process.exit(1);
+        }
+    }
+    // Otherwise, start interactive Ink shell
+    await startInkShell(session, engine);
+}
+main();

package/build/src/cli/app.js

@@ -0,0 +1,115 @@
+import React, { useState, useEffect } from 'react';
+import { Box } from 'ink';
+import { StatusBar } from './components/StatusBar.js';
+import { OutputPanel } from './components/OutputPanel.js';
+import { InputPanel } from './components/InputPanel.js';
+import { AgentStatus } from './components/AgentStatus.js';
+import { CommandSuggestions } from './components/CommandSuggestions.js';
+import { COMMANDS } from './command-parser.js';
+/**
+ * Main Ink App component - conversational split-pane UI
+ */
+export function App({ session, initialMode = 'command', onInput, onExit }) {
+    const [mode, setMode] = useState(initialMode);
+    const [testName, setTestName] = useState(null);
+    const [output, setOutput] = useState([]);
+    const [agentWorking, setAgentWorking] = useState(false);
+    const [agentMessage, setAgentMessage] = useState('');
+    const [inputDisabled, setInputDisabled] = useState(false);
+    const [inputPlaceholder, setInputPlaceholder] = useState('Type a command or message...');
+    const [activeDesignMode, setActiveDesignMode] = useState(null);
+    const [activeExecutionMode, setActiveExecutionMode] = useState(null);
+    const [isExecutionMode, setIsExecutionMode] = useState(false);
+    const [inputValue, setInputValue] = useState('');
+    const [inputResolver, setInputResolver] = useState(null); // For waiting on user input
+    // Context object passed to modes and commands
+    const context = {
+        // Output methods
+        addOutput: (item) => {
+            setOutput((prev) => [...prev, item]);
+        },
+        clearOutput: () => {
+            setOutput([]);
+        },
+        // Agent status
+        setAgentWorking: (working, message = '') => {
+            setAgentWorking(working);
+            setAgentMessage(message || (working ? 'Agent is working...' : ''));
+        },
+        // Mode management
+        setMode: (newMode) => setMode(newMode),
+        setTestName: (name) => setTestName(name),
+        getMode: () => mode,
+        // Input control
+        setInputDisabled: (disabled) => setInputDisabled(disabled),
+        setInputPlaceholder: (placeholder) => setInputPlaceholder(placeholder),
+        // Execution mode flag (to restrict inputs during test execution)
+        isExecutionMode: isExecutionMode,
+        setExecutionMode: (executing) => setIsExecutionMode(executing),
+        // Session access
+        session,
+        // Design mode reference (for routing inputs)
+        activeDesignMode: activeDesignMode,
+        setActiveDesignMode: (mode) => setActiveDesignMode(mode),
+        // Execution mode reference (for /stop command)
+        activeExecutionMode: activeExecutionMode,
+        setActiveExecutionMode: (mode) => setActiveExecutionMode(mode),
+        // Exit
+        exit: () => {
+            if (onExit) {
+                onExit();
+            }
+        },
+        // Wait for user input (for prompts during execution)
+        waitForUserInput: () => {
+            return new Promise((resolve) => {
+                setInputResolver(() => resolve);
+            });
+        },
+    };
+    // Make context available globally for modes
+    useEffect(() => {
+        if (typeof global !== 'undefined') {
+            global.inkContext = context;
+        }
+    }, [context]);
+    // Show welcome banner on mount
+    useEffect(() => {
+        const banner = `
+ _                    _           _ _ _       _           _     _
+| |    ___   __ _  __| |_ __ ___ (_) | |   __| |_ __ ___ (_) __| |       ___ _   _  __ _
+| |   / _ \\ / _\` |/ _\` | '_ \` _ \\| | | |  / _\` | '__/ _ \\| |/ _\` |_____ / __| | | |/ _\` |
+| |__| (_) | (_| | (_| | | | | | | | | | | (_| | | | (_) | | (_| |_____| (__| |_| | (_| |
+|_____\\___/ \\__,_|\\__,_|_| |_| |_|_|_|_|  \\__,_|_|  \\___/|_|\\__,_|      \\___|\\__,_|\\__,_|
+`;
+        context.addOutput({ type: 'system', text: banner });
+        context.addOutput({ type: 'info', text: 'Type /help for available commands.' });
+        context.addOutput({ type: 'info', text: '' });
+    }, []); // Empty deps = run once on mount
+    const handleInput = async (input) => {
+        // Check if we're waiting for user input (e.g., assertion failure prompt)
+        if (inputResolver) {
+            // Resolve the waiting promise with the user's input
+            inputResolver(input);
+            setInputResolver(null);
+            setInputValue('');
+            return;
+        }
+        // Add user input to output
+        context.addOutput({ type: 'user', text: input });
+        // Clear input value
+        setInputValue('');
+        // Call input handler
+        if (onInput) {
+            await onInput(input, context);
+        }
+    };
+    return (React.createElement(Box, { flexDirection: "column", height: "100%" },
+        React.createElement(StatusBar, { mode: mode, deviceInfo: session?.deviceInfo, testName: testName }),
+        React.createElement(Box, { flexGrow: 1, flexDirection: "column", paddingBottom: 1 },
+            React.createElement(OutputPanel, { items: output }),
+            React.createElement(AgentStatus, { isWorking: agentWorking, message: agentMessage })),
+        React.createElement(Box, { flexDirection: "column" },
+            React.createElement(InputPanel, { value: inputValue, onChange: setInputValue, onSubmit: handleInput, placeholder: inputPlaceholder, disabled: inputDisabled }),
+            React.createElement(CommandSuggestions, { input: inputValue, commands: COMMANDS }))));
+}

package/build/src/cli/command-parser.js

@@ -0,0 +1,57 @@
+/**
+ * Parse user input to determine if it's a slash command or regular instruction
+ */
+/**
+ * Parse user input
+ * @param {string} input - Raw user input
+ * @returns {{type: 'command'|'instruction', command?: string, args?: string, text?: string}}
+ */
+export function parseInput(input) {
+    const trimmed = input.trim();
+    // Check if it starts with /
+    if (trimmed.startsWith('/')) {
+        // Extract command and args
+        const match = trimmed.match(/^\/(\w+)\s*(.*)/);
+        if (match) {
+            const [, command, args] = match;
+            return {
+                type: 'command',
+                command: command.toLowerCase(),
+                args: args.trim(),
+            };
+        }
+        // Invalid slash command format
+        return {
+            type: 'command',
+            command: trimmed.slice(1).toLowerCase(),
+            args: '',
+        };
+    }
+    // Not a command, treat as regular instruction
+    return {
+        type: 'instruction',
+        text: trimmed,
+    };
+}
+/**
+ * Available slash commands
+ */
+export const COMMANDS = {
+    help: 'Show available commands',
+    exit: 'Exit the CLI',
+    create: 'Create a new test with autonomous design',
+    run: 'Execute an existing test',
+    list: 'List all available tests',
+    view: 'View test contents with line numbers',
+    edit: 'Edit a test in your default editor',
+    stop: 'Stop current test creation or execution',
+};
+/**
+ * Get command suggestions for autocomplete
+ * @param {string} partial - Partial command (e.g., "he" for "help")
+ * @returns {string[]} - Array of matching commands
+ */
+export function getCommandSuggestions(partial) {
+    const lower = partial.toLowerCase();
+    return Object.keys(COMMANDS).filter(cmd => cmd.startsWith(lower));
+}

package/build/src/cli/components/AgentStatus.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+/**
+ * Live status indicator for agent activity
+ */
+export function AgentStatus({ isWorking, message }) {
+    if (!isWorking && !message) {
+        return null;
+    }
+    if (isWorking) {
+        return (React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: "yellow" },
+                React.createElement(Spinner, { type: "dots" })),
+            React.createElement(Text, { dimColor: true },
+                " ",
+                message || 'Agent is working...')));
+    }
+    return (React.createElement(Box, { marginTop: 1 },
+        React.createElement(Text, { dimColor: true }, message)));
+}

package/build/src/cli/components/CommandSuggestions.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+/**
+ * Command suggestions shown when user types "/"
+ */
+export function CommandSuggestions({ input, commands }) {
+    const MAX_VISIBLE = 6;
+    const HEADER_LINES = 1;
+    const PANEL_HEIGHT = HEADER_LINES + MAX_VISIBLE;
+    // Only show suggestions if input starts with /
+    if (!input.startsWith('/')) {
+        return null;
+    }
+    // Extract the command part (without the /)
+    const commandPart = input.slice(1).toLowerCase();
+    // Filter commands that match
+    const suggestions = Object.entries(commands)
+        .filter(([cmd]) => cmd.toLowerCase().startsWith(commandPart))
+        .sort()
+        .slice(0, MAX_VISIBLE);
+    const usedLines = HEADER_LINES + suggestions.length;
+    const padLines = Math.max(0, PANEL_HEIGHT - usedLines);
+    return (React.createElement(Box, { flexDirection: "column", paddingX: 1, height: PANEL_HEIGHT },
+        React.createElement(Text, { dimColor: true }, "Available commands:"),
+        suggestions.map(([cmd, description]) => (React.createElement(Box, { key: cmd },
+            React.createElement(Text, { color: "cyan" },
+                "  /",
+                cmd),
+            React.createElement(Text, { dimColor: true },
+                " - ",
+                description)))),
+        Array.from({ length: padLines }).map((_, i) => (React.createElement(Text, { key: `pad-${i}` }, " ")))));
+}

package/build/src/cli/components/InputPanel.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+/**
+ * Always-active input panel at the bottom
+ */
+export function InputPanel({ value, onChange, onSubmit, placeholder, disabled }) {
+    const handleSubmit = (submittedValue) => {
+        if (submittedValue.trim().length === 0) {
+            return;
+        }
+        onSubmit(submittedValue.trim());
+    };
+    if (disabled) {
+        return (React.createElement(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1 },
+            React.createElement(Text, { dimColor: true }, "Input disabled...")));
+    }
+    return (React.createElement(Box, { borderStyle: "single", borderColor: "cyan", paddingX: 1 },
+        React.createElement(Text, { color: "cyan", bold: true }, "> "),
+        React.createElement(TextInput, { value: value, onChange: onChange, onSubmit: handleSubmit, placeholder: placeholder || 'Type a command or message...', placeholderColor: "gray" })));
+}

package/build/src/cli/components/OutputPanel.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+/**
+ * Scrollable output panel for agent actions and reasoning
+ */
+export function OutputPanel({ items }) {
+    if (items.length === 0) {
+        return (React.createElement(Box, { flexDirection: "column", paddingX: 1, paddingY: 1 },
+            React.createElement(Text, { dimColor: true }, "Waiting for input...")));
+    }
+    return (React.createElement(Box, { flexDirection: "column", paddingX: 1, paddingY: 1 }, items.map((item, index) => (React.createElement(OutputItem, { key: index, item: item })))));
+}
+function OutputItem({ item }) {
+    switch (item.type) {
+        case 'reasoning':
+            return (React.createElement(Box, null,
+                React.createElement(Text, { color: "magenta" }, "[Reasoning]"),
+                React.createElement(Text, null,
+                    " ",
+                    item.text)));
+        case 'action':
+            return (React.createElement(Box, null,
+                React.createElement(Text, { color: "blue" }, item.text)));
+        case 'assistant':
+            return (React.createElement(Box, { flexDirection: "column", marginTop: 1 },
+                React.createElement(Text, { color: "green", bold: true }, "[Assistant]"),
+                React.createElement(Text, null, item.text)));
+        case 'user':
+            return (React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { bold: true }, "You: "),
+                React.createElement(Text, null, item.text)));
+        case 'system':
+            return (React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: "yellow" }, item.text)));
+        case 'error':
+            return (React.createElement(Box, null,
+                React.createElement(Text, { color: "red" },
+                    "\u26A0\uFE0F  ",
+                    item.text)));
+        case 'success':
+            return (React.createElement(Box, null,
+                React.createElement(Text, { color: "green" },
+                    "\u2713 ",
+                    item.text)));
+        case 'test-name':
+            return (React.createElement(Box, null,
+                React.createElement(Text, { color: "cyan" }, item.text),
+                React.createElement(Text, { dimColor: true },
+                    "  ",
+                    item.metadata)));
+        case 'info':
+            return (React.createElement(Box, null,
+                React.createElement(Text, { dimColor: true }, item.text)));
+        default:
+            return (React.createElement(Box, null,
+                React.createElement(Text, null, item.text || '')));
+    }
+}

package/build/src/cli/components/StatusBar.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+/**
+ * Status bar showing current mode and device info
+ */
+export function StatusBar({ mode, deviceInfo, testName }) {
+    const modeDisplay = mode === 'design'
+        ? `Design Mode${testName ? `: ${testName}` : ''}`
+        : mode === 'execution'
+            ? `Execution Mode${testName ? `: ${testName}` : ''}`
+            : 'Command Mode';
+    const deviceDisplay = deviceInfo
+        ? `${deviceInfo.scaled_width}x${deviceInfo.scaled_height}`
+        : '';
+    return (React.createElement(Box, { borderStyle: "single", borderColor: "cyan", paddingX: 1 },
+        React.createElement(Text, { bold: true, color: "cyan" }, "droid-cua"),
+        React.createElement(Text, { dimColor: true }, " - "),
+        React.createElement(Text, { color: "green" }, modeDisplay),
+        deviceDisplay && (React.createElement(React.Fragment, null,
+            React.createElement(Text, { dimColor: true }, " | "),
+            React.createElement(Text, { dimColor: true }, deviceDisplay)))));
+}

package/build/src/cli/ink-shell.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { render } from 'ink';
+import { App } from './app.js';
+import { parseInput } from './command-parser.js';
+import { routeCommand } from '../commands/index.js';
+/**
+ * Start the Ink-based conversational shell
+ * @param {Object} session - Session object with device info
+ * @param {Object} executionEngine - Execution engine instance
+ * @returns {Promise<void>}
+ */
+export async function startInkShell(session, executionEngine) {
+    let shouldExit = false;
+    const handleInput = async (input, context) => {
+        // Check if there's an active design mode - route input to it
+        if (context.activeDesignMode) {
+            context.activeDesignMode.handleUserInput(input);
+            return;
+        }
+        // Parse input
+        const parsed = parseInput(input);
+        // During execution mode, only allow commands (not free text)
+        if (context.isExecutionMode && parsed.type !== 'command') {
+            context.addOutput({
+                type: 'error',
+                text: 'Cannot interrupt test execution with instructions. Use /stop or /exit to stop the test.',
+            });
+            return;
+        }
+        if (parsed.type === 'command') {
+            // Route to command handler
+            const shouldContinue = await routeCommand(parsed.command, parsed.args, session, { ...context, engine: executionEngine });
+            if (!shouldContinue) {
+                shouldExit = true;
+                context.exit();
+            }
+        }
+        else {
+            // In command mode, instructions aren't supported
+            if (context.getMode() === 'command') {
+                context.addOutput({
+                    type: 'error',
+                    text: 'Direct instructions only work in execution or design mode. Use /run or /create commands.',
+                });
+            }
+        }
+    };
+    const handleExit = () => {
+        shouldExit = true;
+    };
+    // Render the Ink app
+    const { unmount, waitUntilExit } = render(React.createElement(App, { session: session, initialMode: "command", onInput: handleInput, onExit: handleExit }));
+    // Wait for exit
+    await waitUntilExit();
+    return { unmount };
+}