fix(settings): keep row content in shared main layout

webviews/src/gallery/format.ts

@@ -31,6 +31,7 @@ import type { MockOptions } from "../pages/settings/mockProvider";
 import type {
   AccountsState,
   AgentsState,
+  CloudEnvironmentsState,
   DevicesState,
   HarnessesState,
   HostLists,
@@ -52,6 +53,8 @@ export type SettingsPageVariant = VariantBase & {
   options?: MockOptions;
   host?: Partial<HostLists>;
   accounts?: AccountsState;
+  /** Settings > Accounts > Cloud Environments fixture state. */
+  environments?: CloudEnvironmentsState;
   /** Settings > Agents over the mock's harness list (`manages: false`: an older acpmux). */
   agents?: Partial<AgentsState>;
   /** Settings > Agents > Harnesses; default the mock's four. */

webviews/src/gallery/frame/settingsPasswords.ts

@@ -90,6 +90,7 @@ export async function mountSettingsPage(state: SettingsPageVariant, context: Sta
     mock.provider.host = { ...mock.provider.host, theme: { ...mock.provider.host.theme, config } };
   }
   if (state.accounts) mock.provider.accounts = structuredClone(state.accounts);
+  if (state.environments) mock.provider.environments = structuredClone(state.environments);
   if (state.agents) mock.provider.agents.state = { ...mock.provider.agents.state, ...structuredClone(state.agents) };
   if (state.harnesses) mock.provider.harnesses = structuredClone(state.harnesses);
   if (state.devices) mock.provider.devices = structuredClone(state.devices);

webviews/src/pages/settings/components/CloudEnvironmentsCard.tsx

@@ -93,41 +93,43 @@ function EnvironmentRow({
   const status = STATUS[row.status];
   return (
     <div className="row" data-environment={row.id}>
-      <span className="row-label">
-        <span className="row-title">{row.name}</span>
-        <span className="row-help" data-environment-status={row.status}>
-          {" "}
-          {status ? t(status) : row.status}
-          {row.repo ? ` · ${row.repo}` : ""}
+      <div className="row-main">
+        <span className="row-label">
+          <span className="row-title">{row.name}</span>
+          <span className="row-help" data-environment-status={row.status}>
+            {" "}
+            {status ? t(status) : row.status}
+            {row.repo ? ` · ${row.repo}` : ""}
+          </span>
+          {row.error && <span className="row-help"> {row.error}</span>}
+          {row.log_tail && (
+            <details data-environment-log="">
+              <summary>{t("settingsPage.cloudEnvironments.logTail")}</summary>
+              <pre>{row.log_tail}</pre>
+            </details>
+          )}
         </span>
-        {row.error && <span className="row-help"> {row.error}</span>}
-        {row.log_tail && (
-          <details data-environment-log="">
-            <summary>{t("settingsPage.cloudEnvironments.logTail")}</summary>
-            <pre>{row.log_tail}</pre>
-          </details>
-        )}
-      </span>
-      <span className="row-control">
-        <button
-          type="button"
-          className="button"
-          data-environment-action="build"
-          disabled={busy || row.status === "building" || row.status === "ready"}
-          onClick={() => void run({ action: "build", id: row.id })}
-        >
-          {t("settingsPage.cloudEnvironments.build")}
-        </button>
-        <button
-          type="button"
-          className="button"
-          data-environment-action="delete"
-          disabled={busy || row.status === "building"}
-          onClick={() => void run({ action: "delete", id: row.id })}
-        >
-          {t("settingsPage.cloudEnvironments.delete")}
-        </button>
-      </span>
+        <span className="row-control">
+          <button
+            type="button"
+            className="button"
+            data-environment-action="build"
+            disabled={busy || row.status === "building" || row.status === "ready"}
+            onClick={() => void run({ action: "build", id: row.id })}
+          >
+            {t("settingsPage.cloudEnvironments.build")}
+          </button>
+          <button
+            type="button"
+            className="button"
+            data-environment-action="delete"
+            disabled={busy || row.status === "building"}
+            onClick={() => void run({ action: "delete", id: row.id })}
+          >
+            {t("settingsPage.cloudEnvironments.delete")}
+          </button>
+        </span>
+      </div>
     </div>
   );
 }

webviews/src/pages/settings/components/HostSections.tsx

@@ -58,8 +58,8 @@ function ListRows({
           {row.subtitle && <div className="row-help">{row.subtitle}</div>}
         </div>
         {row.active && <span className="host-active" aria-hidden="true" />}
+        {trailing?.(row)}
       </div>
-      {trailing?.(row)}
       {below?.(row)}
     </div>
   ));

webviews/src/pages/settings/settings.gallery.ts

@@ -1,6 +1,6 @@
 // l10n-allow-file: gallery fixtures, not shipped UI.
 import { settingsPageEntry, type PageFixtureStep, type SettingsPageVariant } from "../../gallery/format";
-import type { AccountsCmux, AccountsRow, AccountsState, HostLists } from "./ops";
+import type { AccountsCmux, AccountsRow, AccountsState, CloudEnvironmentsState, HostLists } from "./ops";
 import { categories, homes } from "./categories";
 import { MockTeams } from "./mockTeams";
 import { mockThemeColors } from "./mockThemes";
@@ -174,6 +174,33 @@ const host: Partial<HostLists> = {
     ],
   },
 };
+const rowShapeMachines: HostLists["machines"] = [
+  {
+    id: "sample-row-shape",
+    title: "Research build machine",
+    subtitle: "Online · local network",
+    active: true,
+    color: "#7F5FA8",
+    color_key: "research build machine",
+    vm_host: { on: true, busy: false, error: null },
+  },
+];
+const rowShapeEnvironments: CloudEnvironmentsState = {
+  available: true,
+  loading: false,
+  error: null,
+  environments: [
+    {
+      id: "env-row-shape",
+      name: "Research environment",
+      repo: "manaflow-ai/cmux@feat-cmux-next",
+      setup_script: "bun install",
+      status: "failed",
+      error: "setup exited 3",
+      log_tail: "lockfile mismatch",
+    },
+  ],
+};
 const click = (selector: string): PageFixtureStep => ({ selector, action: "click" });
 const input = (selector: string, value: string): PageFixtureStep => ({ selector, action: "input", value });
 const wait = (selector: string): PageFixtureStep => ({ selector, action: "wait" });
@@ -602,6 +629,25 @@ Object.assign(variants, {
   "long-rooms": variant("rooms", { host: { ...host, rooms: longRows, browser_profiles: longProfiles } }),
   "long-profiles": variant("browser", { host: { ...host, rooms: [], browser_profiles: longProfiles } }),
   "long-machines": variant("machines", { host: { ...host, machines: longRows } }),
+  "machines-row-shape": variant("accounts", {
+    host: { ...host, machines: rowShapeMachines },
+    options: { values: { "appearance.machineColors": { "research build machine": "#7F5FA8" } } },
+    note: "One machine row with its color control and the Dedicated agent machine line below.",
+    play: async (ctx) => {
+      const card = ctx.find({ selector: '[data-card="machines"]' });
+      card.setAttribute("data-gallery-capture", "");
+      card.scrollIntoView({ block: "center" });
+    },
+  }),
+  "cloud-environments-row-shape": variant("accounts", {
+    environments: rowShapeEnvironments,
+    note: "One failed Cloud Environment row with status, repository, error log and actions.",
+    play: async (ctx) => {
+      const card = ctx.find({ selector: '[data-card="cloudEnvironments"]' });
+      card.setAttribute("data-gallery-capture", "");
+      card.scrollIntoView({ block: "center" });
+    },
+  }),
   "profile-editor": variant("browser", {
     steps: [
       click('[data-profile="p-work"] .host-toggle'),