Reworked app install setup + new custom env var support

Author: rpuls

AGENTS.md

@@ -318,6 +318,7 @@ The manifest shape (generation 1, `manifestVersion: 1`) is a locked public contr
 - A package using a newly added field must raise its `minimumMosVersion` to the release that introduced the field.
 - New template namespaces (for example a future `${smtp.*}`) follow the same rule: added to the validator and schema together, gated by `minimumMosVersion`.
 - Fields documented as provisional (`role`, `exports`, `integrations`, `configTargets`, `usefulness`, `homepage.widget`, `routes[].internalIcalBridge`) are outside the lock and may still change; do not present them to external authors as stable.
+- `${ownerEnv.*}` is a projection-only namespace that MOS generates into runtime projections for owner-set environment variables. It is not part of the manifest contract: package authors may never reference it, it stays out of `KNOWN_NAMESPACES` and the schema, and an authored manifest using it must keep failing validation.
 - Schema and validator move together: any change to `apps/manifest.schema.json` requires updating the manifest reference page and running `npm run apps:manifest:check` plus the backend unit tests.
 
 ### Catalog Privacy-Review Requirement

CHANGELOG.md

@@ -7,8 +7,14 @@ Updater-facing software changes only — documentation, site, repository, and co
 ### Added
 
 - Suite Manager keeps technical detail out of the way until you ask for it. Package ids, digests, ports, volume names, generated configuration and raw logs are no longer shown on healthy screens; **Settings → Technical controls** brings them all back, per owner and off by default. Diagnostics on a screen that is reporting a failure stay visible either way, so a bug report can still quote them.
+- Installed apps can now take environment variables you set yourself, under **Advanced details** in an app's **Settings** dialog. It is for values an app's own documentation asks for that MOS never knew to ask about — an upstream API credential, a feature switch — and it needs **Settings → Technical controls** switched on. Names MOS already manages are refused by name rather than silently ignored, hidden values are stored like any other app secret and never shown again, and MOS restarts the app and waits for it to answer: a value that stops it starting is rolled back to the previous environment on its own. Your variables survive app updates. **Compatibility:** a published privacy assessment describes an app as MOS ships it, so an app carrying your own variables says so on its posture panel.
 - Own-hardware installs now work on machines with more than one internal disk, which the installer previously refused outright. It lists every disk large enough in a stable order and says what each already holds — `empty - no partitions`, or `NOT EMPTY` with the filesystems and labels it found — so the spare drive is distinguishable from the one with your photos on it. Only the disk you pick is touched; the confirmation names it and its contents again before anything is erased.
 
+### Changed
+
+- Installing an app now opens the same review dialog for every app in the catalog, replacing the **Prepare** panel some apps showed and the bare **Install** button the rest had. It lists whatever the app needs from you, the web address it will get, and whether to put a shortcut on Homepage. Apps that need nothing say so rather than installing on the first click.
+- That dialog reopens as **Settings** once an app is running, and is no longer hidden behind technical controls. The values you gave at install are shown there as facts rather than editable fields: most are read only once, when the app first starts, so changing them afterwards would either do nothing or stop the app reaching its own data. Change them from inside the app itself.
+
 ### Fixed
 
 - The own-hardware installer no longer turns a mistyped answer into a silent non-install. It numbers the choices, takes the erase confirmation as a separate step, and asks again on anything it does not recognise. Previously any answer other than exactly `YES` — a lowercase `yes` included — continued booting from the USB stick and brought the suite up there, which looked like a finished install on a machine that stopped booting the moment the stick came out. A machine running from the stick now says so on its console instead of reporting itself installed, and the stick is no longer expanded to fill itself, so it stays usable as an installer.

branding/styles/mos.css

@@ -489,6 +489,252 @@ label:hover > .mos-switch-input:enabled + .mos-switch-track {
   }
 }
 
+/* Settings row: the single element app configuration is built from. Label on
+   the left, value on the right, a hairline between neighbours.
+
+   The whole vocabulary is one distinction: a value in text-strong can be typed
+   into, a value in text-muted is a fact the owner cannot change. That is why
+   there is no separate read-only control here — a disabled field says "not
+   yet", and a fact has to say "this is how it is". Nothing is boxed, nothing is
+   uppercase, and everything that is not the dialog title is one size. */
+.mos-rows {
+  display: grid;
+}
+
+.mos-row {
+  display: grid;
+  gap: var(--mos-space-1);
+  padding: var(--mos-space-3) 0;
+  /* Containing block for the visually hidden switch input, so focusing one
+     inside a scrollable dialog cannot scroll the dialog somewhere else. */
+  position: relative;
+  border-top: var(--mos-border-hairline);
+}
+
+/* Only the first row of the first group opens without a rule above it; a later
+   group still starts with one, so the hairlines read as one continuous list
+   however the groups are divided. */
+.mos-rows-lead > .mos-row:first-child {
+  border-top: 0;
+}
+
+label.mos-row {
+  cursor: pointer;
+}
+
+.mos-row-main {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mos-space-4);
+  min-height: 3rem;
+}
+
+/* A row carrying a reason line gives the height to the line instead. */
+.mos-row-main:not(:only-child) {
+  min-height: 2.4rem;
+}
+
+.mos-row-label {
+  flex: 0 0 auto;
+  color: var(--mos-color-text-strong);
+}
+
+.mos-row-trailing {
+  display: flex;
+  align-items: center;
+  gap: var(--mos-space-2);
+  min-width: 0;
+}
+
+.mos-row-value {
+  min-width: 0;
+  color: var(--mos-color-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mos-row-code {
+  font-family: var(--mos-font-mono);
+  font-size: var(--mos-text-small);
+}
+
+.mos-row-mask {
+  letter-spacing: 0.14em;
+}
+
+/* Editable: a real field, boxed like every other input in MOS. A row that is
+   waiting for something the owner has not typed yet has to look unfinished,
+   and a borderless value cannot — you cannot see the absence of a box that was
+   never there. Facts stay plain text, so the box itself now carries the
+   editable/fact distinction that colour alone used to. */
+.mos-row-input {
+  flex: 1 1 14rem;
+  min-width: 0;
+  min-height: 2.9rem;
+  padding: 0.72rem 0.8rem;
+  border: 1px solid var(--mos-color-surface-border);
+  border-radius: var(--mos-radius-sm);
+  background: var(--mos-color-surface-strong);
+  color: var(--mos-color-text-strong);
+  font: inherit;
+  transition:
+    border-color var(--mos-transition),
+    background var(--mos-transition);
+}
+
+.mos-row-input::placeholder {
+  color: var(--mos-color-text-muted);
+  opacity: 1;
+}
+
+.mos-row-input:focus-visible {
+  outline: 3px solid var(--mos-color-focus-visible);
+  outline-offset: 2px;
+}
+
+/* Required and still empty: the reason the primary button is refusing. Warning
+   rather than danger — nothing is wrong yet, there is just something left. */
+.mos-row-input-missing {
+  border-color: var(--mos-color-warning-border);
+  background: var(--mos-color-warning-soft);
+}
+
+/* Required and given. The same accent the primary button uses, so a form that
+   is ready to submit and the button that submits it agree. */
+.mos-row-input-filled {
+  border-color: var(--mos-color-accent-border);
+  background: var(--mos-color-accent-soft);
+}
+
+/* A row the owner types into puts its label on its own line and gives the whole
+   width to the box. Beside the label instead, the field is sized by whatever
+   the label happens to be — a long one leaves a stub to type in, a short one a
+   field wider than anything that goes in it — and the boxes stop lining up with
+   each other, which is what made a list of them hard to read. */
+.mos-row-stacked > .mos-row-main {
+  display: grid;
+  /* Explicit, because the inline layout's justify-content: space-between would
+     otherwise size this single column to its contents and leave the field as
+     wide as whatever happens to be typed in it. minmax(0, 1fr) fills the row
+     and still lets a long value scroll inside rather than push the row wider. */
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--mos-space-2);
+  min-height: 0;
+}
+
+/* Rows that stay side by side still let a boxed field drop to its own line
+   rather than be squeezed to nothing. */
+.mos-row-main:has(.mos-row-input) {
+  flex-wrap: wrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mos-row-input {
+    transition: none;
+  }
+}
+
+.mos-row-help {
+  display: block;
+  margin: 0;
+  color: var(--mos-color-text-muted);
+  font-size: var(--mos-text-small);
+  line-height: 1.4;
+}
+
+/* The line that stops an owner typing a password they can never change. */
+.mos-row-help-permanent {
+  color: var(--mos-color-warning);
+}
+
+.mos-row-invalid {
+  color: var(--mos-color-danger);
+}
+
+/* Inline action inside a row — copy, reveal, remove. Quiet enough that a row
+   full of them still reads as a list of values rather than a toolbar. */
+.mos-row-action {
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 auto;
+  width: 2rem;
+  height: 2rem;
+  border: 0;
+  border-radius: var(--mos-radius-sm);
+  background: transparent;
+  color: var(--mos-color-text-muted);
+  cursor: pointer;
+  transition:
+    background var(--mos-transition),
+    color var(--mos-transition);
+}
+
+.mos-row-action:hover {
+  background: var(--mos-color-surface-muted);
+  color: var(--mos-color-accent);
+}
+
+.mos-row-action-danger:hover {
+  color: var(--mos-color-danger);
+}
+
+.mos-row-action:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+/* The whole row is the hit target for a switch, so the hover affordance comes
+   from the row rather than from the track's own three rem. */
+label.mos-row:hover .mos-switch-input:enabled + .mos-switch-track {
+  border-color: var(--mos-color-accent-border);
+}
+
+/* A disclosure wearing the row's clothes: same height, same hairline, chevron
+   where a value would be. Used so "Advanced details" is one more row in the
+   list rather than a differently shaped thing bolted underneath it. */
+.mos-row-disclosure {
+  border-top: var(--mos-border-hairline);
+  padding-top: 0;
+}
+
+.mos-row-disclosure > summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mos-space-4);
+  min-height: 3rem;
+  padding: var(--mos-space-3) 0;
+  color: var(--mos-color-text-strong);
+  font-weight: var(--mos-weight-regular);
+  list-style: none;
+  cursor: pointer;
+}
+
+.mos-row-disclosure > summary::-webkit-details-marker {
+  display: none;
+}
+
+.mos-row-chevron {
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 auto;
+  color: var(--mos-color-text-muted);
+  transition: transform var(--mos-transition);
+}
+
+.mos-row-disclosure[open] > summary .mos-row-chevron {
+  transform: rotate(90deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mos-row-action,
+  .mos-row-chevron {
+    transition: none;
+  }
+}
+
 .mos-panel {
   border: var(--mos-border-strong);
   border-radius: var(--mos-radius-md);