feat(loopx): make each requirement row a single state button

- replace the separate status text + install button with one action button
  that fills the remaining row width, so the three rows line up and the large
  blank gap on the right is gone
- available requirements now render the same button shape with a check icon
  and the availability label instead of a plain text status
- unavailable requirements install on click and flip to a spinner state
  (the pending flag is set and re-rendered synchronously, plus a pressed
  style) so the click gets immediate feedback
- tag the button with data-state (install / installing / available / status)
  and style each state, reusing the existing lx-spin keyframes

Author: xlx1212

src/crates/contracts/product-domains/src/miniapp/builtin/assets/bitfun-loopx/style.css

@@ -418,28 +418,71 @@ button:disabled { cursor: not-allowed; opacity: .48; }
   gap: 8px;
 }
 .environment-fact__title strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
-.environment-fact__title span { color: var(--lx-text-muted); font: 11px/1.2 var(--lx-mono); }
-.environment-fact__status-actions {
-  display: grid;
-  grid-template-columns: auto 128px;
-  align-items: center;
-  justify-content: start;
-  gap: 8px;
-}
+/* 一行只有一个动作按钮：可用时它就是「可用」按钮，不可用时点击即安装；
+   按钮铺满标签右侧的剩余宽度，所以三行对齐，右侧不再留大块空白。 */
 .environment-fact .environment-fact__action {
   width: 100%;
+  min-width: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
   min-height: 32px;
   padding: 4px 10px;
+  border: 1px solid var(--lx-border);
+  border-radius: 7px;
+  background: transparent;
+  color: var(--lx-text-soft);
+  font-family: inherit;
   font-size: 11px;
   font-weight: 600;
   white-space: nowrap;
+  cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 90ms ease, filter 90ms ease;
 }
 .environment-fact__action span { color: inherit; font: inherit; letter-spacing: 0; }
 .environment-fact__action svg { width: 14px; height: 14px; flex: 0 0 auto; }
+.environment-fact__action[data-state="install"] {
+  border-color: var(--lx-accent);
+  background: var(--lx-accent);
+  color: var(--openbitfun-text-on-accent);
+}
+.environment-fact__action[data-state="install"]:hover:not(:disabled) {
+  border-color: var(--lx-accent-hover);
+  background: var(--lx-accent-hover);
+}
+/* 点击立刻下沉变暗；宿主开始安装后按钮自己切成 spinner。 */
+.environment-fact__action:not(:disabled):active { transform: translateY(1px); filter: brightness(.95); }
+.environment-fact__action[data-state="installing"] {
+  border-color: var(--lx-border-strong);
+  background: var(--lx-muted-surface);
+  color: var(--lx-text-soft);
+  cursor: progress;
+}
+.environment-fact__action[data-state="available"] {
+  border-color: color-mix(in srgb, var(--lx-success) 40%, var(--lx-border));
+  background: color-mix(in srgb, var(--lx-success) 12%, transparent);
+  color: var(--lx-success);
+  cursor: default;
+}
+.environment-fact__action[data-state="status"] {
+  background: transparent;
+  color: var(--lx-text-muted);
+  cursor: default;
+}
+.environment-fact__action[data-state="install"]:disabled {
+  border-color: var(--lx-border-strong);
+  background: var(--lx-muted-surface);
+  color: var(--lx-text-muted);
+  opacity: .55;
+  cursor: not-allowed;
+}
+.environment-fact__action:disabled { cursor: default; opacity: 1; }
+.environment-fact__action:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--lx-accent) 45%, transparent);
+  outline-offset: 1px;
+}
+.environment-fact__spinner { transform-origin: center; animation: lx-spin .8s linear infinite; }
 .environment-fact__version { margin: 3px 0 0; overflow: hidden; color: var(--lx-text-muted); font: 11px/1.2 var(--lx-mono); text-overflow: ellipsis; white-space: nowrap; }
 @keyframes lx-spin { to { transform: rotate(360deg); } }
 
@@ -1577,7 +1620,6 @@ button:disabled { cursor: not-allowed; opacity: .48; }
   .environment-body { grid-template-columns: 1fr; align-items: stretch; }
   .environment-grid { grid-template-columns: 1fr; }
   .environment-fact__title { grid-template-columns: 96px minmax(0, 1fr); gap: 6px; }
-  .environment-fact__status-actions { grid-template-columns: auto minmax(110px, 128px); gap: 6px; }
 }
 
 /* 宽屏三列（任务 | 详情 | 日志）；只在右侧工作区真正变窄时上下堆叠。 */
@@ -1599,7 +1641,6 @@ button:disabled { cursor: not-allowed; opacity: .48; }
 @media (max-width: 680px) {
   .environment-grid { grid-template-columns: 1fr; }
   .environment-fact__title { grid-template-columns: 96px minmax(0, 1fr); gap: 6px; }
-  .environment-fact__status-actions { grid-template-columns: auto minmax(110px, 128px); gap: 6px; }
   .workbench { grid-template-columns: 1fr; grid-template-rows: minmax(92px, 30dvh) minmax(0, 1fr); }
   .workbench.tasks-collapsed { grid-template-columns: 1fr; grid-template-rows: 44px minmax(0, 1fr); }
   .rail-splitter { display: none; }

src/crates/contracts/product-domains/src/miniapp/builtin/assets/bitfun-loopx/ui.js

@@ -2716,25 +2716,50 @@ function renderExecutionSupport() {
   view.resumeAllLoopx.title = suspended ? text('resumeAllHint') : text('resumeAll');
 }
 
-function environmentInstallIcon() {
+function environmentIcon(paths) {
   const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
   svg.setAttribute('viewBox', '0 0 24 24');
-  svg.setAttribute('width', '15');
-  svg.setAttribute('height', '15');
   svg.setAttribute('fill', 'none');
   svg.setAttribute('stroke', 'currentColor');
   svg.setAttribute('stroke-width', '1.8');
   svg.setAttribute('stroke-linecap', 'round');
   svg.setAttribute('stroke-linejoin', 'round');
   svg.setAttribute('aria-hidden', 'true');
-  for (const pathData of ['M12 3v12', 'm7 10 5 5 5-5', 'M5 21h14a2 2 0 0 0 2-2v-4', 'M3 15v4a2 2 0 0 0 2 2']) {
+  for (const pathData of paths) {
     const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
     path.setAttribute('d', pathData);
     svg.append(path);
   }
   return svg;
 }
 
+function environmentInstallIcon() {
+  return environmentIcon([
+    'M12 3v12',
+    'm7 10 5 5 5-5',
+    'M5 21h14a2 2 0 0 0 2-2v-4',
+    'M3 15v4a2 2 0 0 0 2 2',
+  ]);
+}
+
+function environmentCheckIcon() {
+  return environmentIcon(['M20 6 9 17l-5-5']);
+}
+
+function environmentSpinnerIcon() {
+  const svg = environmentIcon([]);
+  const track = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+  track.setAttribute('cx', '12');
+  track.setAttribute('cy', '12');
+  track.setAttribute('r', '8');
+  track.setAttribute('opacity', '0.28');
+  const arc = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  arc.setAttribute('d', 'M20 12a8 8 0 0 0-8-8');
+  svg.append(track, arc);
+  svg.classList.add('environment-fact__spinner');
+  return svg;
+}
+
 function environmentFact(name, label, fact, action) {
   const element = document.createElement('article');
   const status = fact && fact.status ? fact.status : 'unknown';
@@ -2746,28 +2771,45 @@ function environmentFact(name, label, fact, action) {
   title.className = 'environment-fact__title';
   const strong = document.createElement('strong');
   strong.textContent = label;
-  const statusActions = document.createElement('div');
-  statusActions.className = 'environment-fact__status-actions';
-  const value = document.createElement('span');
-  value.textContent = statusLabel(status);
-  statusActions.append(value);
-
-  if (action) {
-    const button = document.createElement('button');
-    button.type = 'button';
-    button.className = 'primary-button environment-fact__action';
+
+  // One button carries the whole row state: install -> installing -> available.
+  // A click flips the local pending flag synchronously, so the spinner shows
+  // before the host round-trip finishes.
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.className = 'environment-fact__action';
+  let buttonState;
+  let buttonLabel;
+  if (action && action.pending) {
+    buttonState = 'installing';
+    buttonLabel = text('installing');
+    button.disabled = true;
+    button.append(environmentSpinnerIcon());
+  } else if (action) {
+    buttonState = 'install';
+    buttonLabel = action.label;
     button.disabled = Boolean(action.disabled);
     button.append(environmentInstallIcon());
-    const buttonLabel = document.createElement('span');
-    buttonLabel.textContent = action.pending ? text('installing') : action.label;
-    button.append(buttonLabel);
     button.addEventListener('click', () => action.onClick());
     if (action.onPointerDown) {
       button.addEventListener('pointerdown', action.onPointerDown);
     }
-    statusActions.append(button);
+  } else if (status === 'available') {
+    buttonState = 'available';
+    buttonLabel = statusLabel(status);
+    button.disabled = true;
+    button.append(environmentCheckIcon());
+  } else {
+    buttonState = 'status';
+    buttonLabel = statusLabel(status);
+    button.disabled = true;
   }
-  title.append(strong, statusActions);
+  button.dataset.state = buttonState;
+  const buttonLabelElement = document.createElement('span');
+  buttonLabelElement.textContent = buttonLabel;
+  button.append(buttonLabelElement);
+
+  title.append(strong, button);
   element.append(title);
 
   // Keep the row compact: only the short version stays visible; the long host