Build and Deploy Settings Block for React

Edit PRESETS (each has a root directory, install and build commands and an output directory), APPS (the sample repository: each app has its folder, its scripts, the folder its build writes and whether it holds a Dockerfile) and SAVED, which holds what the account has stored when the page opens. TOOLS and RUNNERS list the commands the sample runner knows. The lead sentence, the log and the unsaved count are all worked out from the fields.

Nothing builds. The log is a pure function of the fields: an unknown folder stops at "No such file or directory", an unknown command at "command not found", a script the app doesn't have at "Missing script", Docker in an app without a Dockerfile at the error Docker gives, and an output folder that isn't the one the build writes at "not found". An empty install command is skipped, an empty build command serves the folder as it is, and a Docker build ignores the Node version and the output folder. Edit a field and the log follows at once.

A terminal is dark by nature, so it keeps the dark scope and everything around it follows the theme. Its text sits on the dark surface at full contrast, each line has a sign and, for assistive technology, a spoken word (command, output, note, problem or done), and the region scrolls and takes focus so a long log can be read by keyboard.

Everything. Save keeps the settings in this page's state, and the log is the simulation above. To make it real, post the settings to your server, run the build in a container or a runner, and stream its real output into the same list, one entry per line. The fields can validate against the repository's real folders and scripts instead of the sample.

Save checks the root directory and the output directory when it is pressed: a root that is empty or leaves the repository (an absolute path or one with ..) and an output folder that is empty when the build writes files are marked, read with their field, and focus goes to the first one. An unknown folder is not a refusal: the log shows the error a real build would give, so you can still save a setting for a folder you are about to create.

The form comes first and the log under it, in a box of fixed height that scrolls inside itself, so nothing moves as lines appear. Each field has a visible label and a reserved line for its problem, the region is a group of three buttons and the action foot stays pinned to the bottom of the screen with the status line, which says what changed and what was saved.