Settings: give the backup block room to read (#44)

Three layout fixes to the backup setting, which had grown until the
interval control — the thing the block is actually about — was the
hardest part of it to find.

- The interval segments now sit level with the description instead of
centring against a column that runs a description, a kv table and a
thirty-chip tag field tall. Same rail position, no longer floating
halfway down the block.
- A failed run reports its timestamp and streak on one line; the Job's
message and reason move into the existing (i) tooltip. They were a
paragraph wrapping inside a right-aligned kv value, which pushed the
rest of the table around and made a table worth scanning into prose.
- The skip list, its help text and "Back up now" move out of the label
column to full width. Thirty chips wrapping in half the measure read
as a wall, and the field they belong to is a text input, which wants
the whole line.

No behaviour change: same controls, same handlers, same requests.

Co-authored-by: Agent Manager <agents@agent-manager.local>
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

web/src/components/SettingsView.tsx

@@ -403,7 +403,10 @@ export default function SettingsView({
                   </span>
                 </div>
 
-                <div className="setting-row">
+                {/* row-top: the description runs four lines, and the interval is
+                    the thing you read it for — it belongs level with the text, not
+                    floating halfway down beside it. */}
+                <div className="setting-row row-top">
                   <div>
                     <div className="s-label">Back up the bucket</div>
                     <div className="s-help">
@@ -447,18 +450,22 @@ export default function SettingsView({
                         </div>
                         {/* The dashboard strip says a backup is failing; this says
                             what the Job actually reported, which is what tells you
-                            whether it is yours to fix. */}
+                            whether it is yours to fix. The message and the Job's own
+                            reason are a paragraph you read once, so they hang off the
+                            timestamp as a tooltip rather than wrapping across the
+                            table and pushing every other row around. */}
                         {bk.lastFailure && (
                           <div>
                             <span>Last failure</span>
-                            <b style={{ color: 'var(--danger)', whiteSpace: 'normal', textAlign: 'right' }}>
+                            <b className="kv-fail">
                               {new Date(bk.lastFailure.at).toLocaleString()}
-                              {bk.lastFailure.message ? ` — ${bk.lastFailure.message}` : ''}
                               {bk.failures > 1 ? ` (${bk.failures} in a row)` : ''}
-                              {bk.lastFailure.reason && (
-                                <div className="mono" style={{ fontWeight: 400, color: 'var(--muted)', fontSize: 11.5, marginTop: 2 }}>
-                                  {bk.lastFailure.reason}
-                                </div>
+                              {(bk.lastFailure.message || bk.lastFailure.reason) && (
+                                <span
+                                  className="tip"
+                                  tabIndex={0}
+                                  data-tip={[bk.lastFailure.message, bk.lastFailure.reason].filter(Boolean).join(' — ')}
+                                ><InfoGlyph className="tip-i" /></span>
                               )}
                             </b>
                           </div>
@@ -471,80 +478,6 @@ export default function SettingsView({
                         )}
                       </div>
                     )}
-                    {/* On demand regardless of the interval: taking one backup
-                        before a risky change should not mean switching on a
-                        schedule. Disabled while a run is in flight — two Jobs
-                        uploading to one dataset would race. */}
-                    {/* Folders to keep out of the history. An env directory is
-                        thousands of files the backup has to hash and none of them
-                        worth keeping — measured, that is 7s of work versus 1s. */}
-                    {bk?.canRunNow && (
-                      <>
-                        <div className="s-help skiphead" style={{ marginTop: 10 }}>
-                          <span>
-                            Skip these folders — type a name and press Enter. Anywhere they appear
-                            (<span className="mono">node_modules</span>, <span className="mono">.venv</span>),
-                            they stay out of the history. Everything here is something a command puts
-                            back; nothing is skipped for being large. Remove any you want kept.
-                          </span>
-                          {/* The default list is long and picked from measurements, so an operator
-                              who trims it has no way back without retyping 30 names. Hidden when
-                              the list already matches the defaults, so it is never a no-op —
-                              compared against the local edit rather than the server's copy, or it
-                              would linger until the next status poll. */}
-                          {bk.excludeDefaults?.length > 0
-                            && (cfg.backup.exclude.length !== bk.excludeDefaults.length
-                              || cfg.backup.exclude.some((t, i) => t !== bk.excludeDefaults[i])) && (
-                            <button
-                              className="btn-ghost skiprestore"
-                              onClick={() => setCfg({ ...cfg, backup: { ...cfg.backup, exclude: [...bk.excludeDefaults] } })}
-                            >Restore defaults</button>
-                          )}
-                        </div>
-                        <div className="tagf" onClick={(e) => {
-                          if (e.target === e.currentTarget) (e.currentTarget.querySelector('input') as HTMLInputElement)?.focus();
-                        }}>
-                          {cfg.backup.exclude.map((t) => (
-                            <span className="tagf-chip mono" key={t}>
-                              {t}
-                              <button
-                                className="tagf-x"
-                                aria-label={`Stop skipping ${t}`}
-                                onClick={() => setCfg({ ...cfg, backup: { ...cfg.backup, exclude: cfg.backup.exclude.filter((x) => x !== t) } })}
-                              >×</button>
-                            </span>
-                          ))}
-                          <input
-                            className="tagf-input mono"
-                            placeholder={cfg.backup.exclude.length ? 'add another…' : 'node_modules'}
-                            value={skipDraft}
-                            onChange={(e) => setSkipDraft(e.target.value)}
-                            onKeyDown={(e) => {
-                              // Enter or comma commits; Backspace on an empty box
-                              // takes the last chip back, as tag fields do.
-                              if (e.key === 'Enter' || e.key === ',') {
-                                e.preventDefault();
-                                addSkip();
-                              } else if (e.key === 'Backspace' && !skipDraft && cfg.backup.exclude.length) {
-                                setCfg({ ...cfg, backup: { ...cfg.backup, exclude: cfg.backup.exclude.slice(0, -1) } });
-                              }
-                            }}
-                            onBlur={addSkip}
-                          />
-                        </div>
-                      </>
-                    )}
-                    {bk?.canRunNow && (
-                      <button
-                        className="btn-ghost"
-                        style={{ marginTop: 8 }}
-                        disabled={bkBusy || bk.running}
-                        onClick={doBackup}
-                      >
-                        {bkBusy ? 'Launching…' : bk.running ? 'Backing up…' : 'Back up now'}
-                      </button>
-                    )}
-                    {bkMsg && <div className="s-help" style={{ marginTop: 6 }}>{bkMsg}</div>}
                   </div>
                   <span className="cfg-ctl">
                     <div className="seg cfg-seg">
@@ -578,6 +511,84 @@ export default function SettingsView({
                   </div>
                 )}
 
+                {/* Folders to keep out of the history. An env directory is
+                    thousands of files the backup has to hash and none of them
+                    worth keeping — measured, that is 7s of work versus 1s.
+                    Full width, outside the row: thirty chips wrapping inside the
+                    label column read as a wall, and the field they belong to is a
+                    text input, which wants the whole measure. */}
+                {bk?.canRunNow && (
+                  <>
+                    <div className="s-help skiphead" style={{ marginTop: 10 }}>
+                      <span>
+                        Skip these folders — type a name and press Enter. Anywhere they appear
+                        (<span className="mono">node_modules</span>, <span className="mono">.venv</span>),
+                        they stay out of the history. Everything here is something a command puts
+                        back; nothing is skipped for being large. Remove any you want kept.
+                      </span>
+                      {/* The default list is long and picked from measurements, so an operator
+                          who trims it has no way back without retyping 30 names. Hidden when
+                          the list already matches the defaults, so it is never a no-op —
+                          compared against the local edit rather than the server's copy, or it
+                          would linger until the next status poll. */}
+                      {bk.excludeDefaults?.length > 0
+                        && (cfg.backup.exclude.length !== bk.excludeDefaults.length
+                          || cfg.backup.exclude.some((t, i) => t !== bk.excludeDefaults[i])) && (
+                        <button
+                          className="btn-ghost skiprestore"
+                          onClick={() => setCfg({ ...cfg, backup: { ...cfg.backup, exclude: [...bk.excludeDefaults] } })}
+                        >Restore defaults</button>
+                      )}
+                    </div>
+                    <div className="tagf" onClick={(e) => {
+                      if (e.target === e.currentTarget) (e.currentTarget.querySelector('input') as HTMLInputElement)?.focus();
+                    }}>
+                      {cfg.backup.exclude.map((t) => (
+                        <span className="tagf-chip mono" key={t}>
+                          {t}
+                          <button
+                            className="tagf-x"
+                            aria-label={`Stop skipping ${t}`}
+                            onClick={() => setCfg({ ...cfg, backup: { ...cfg.backup, exclude: cfg.backup.exclude.filter((x) => x !== t) } })}
+                          >×</button>
+                        </span>
+                      ))}
+                      <input
+                        className="tagf-input mono"
+                        placeholder={cfg.backup.exclude.length ? 'add another…' : 'node_modules'}
+                        value={skipDraft}
+                        onChange={(e) => setSkipDraft(e.target.value)}
+                        onKeyDown={(e) => {
+                          // Enter or comma commits; Backspace on an empty box
+                          // takes the last chip back, as tag fields do.
+                          if (e.key === 'Enter' || e.key === ',') {
+                            e.preventDefault();
+                            addSkip();
+                          } else if (e.key === 'Backspace' && !skipDraft && cfg.backup.exclude.length) {
+                            setCfg({ ...cfg, backup: { ...cfg.backup, exclude: cfg.backup.exclude.slice(0, -1) } });
+                          }
+                        }}
+                        onBlur={addSkip}
+                      />
+                    </div>
+                  </>
+                )}
+                {/* On demand regardless of the interval: taking one backup
+                    before a risky change should not mean switching on a
+                    schedule. Disabled while a run is in flight — two Jobs
+                    uploading to one dataset would race. */}
+                {bk?.canRunNow && (
+                  <button
+                    className="btn-ghost"
+                    style={{ marginTop: 8 }}
+                    disabled={bkBusy || bk.running}
+                    onClick={doBackup}
+                  >
+                    {bkBusy ? 'Launching…' : bk.running ? 'Backing up…' : 'Back up now'}
+                  </button>
+                )}
+                {bkMsg && <div className="s-help" style={{ marginTop: 6 }}>{bkMsg}</div>}
+
                 <div className="setting-row">
                   <div>
                     <div className="s-label">Archive inactive sessions</div>

web/src/styles.css

@@ -871,6 +871,9 @@ body {
 .settings-page h3 { margin: 24px 0 8px; font-size: 14px; }
 /* plain rows, not cards: the bold label is the section header */
 .setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 2px; }
+/* a row whose description runs several lines: the control sits level with the
+   text instead of centring against it, so the eye finds it where it starts */
+.setting-row.row-top { align-items: flex-start; }
 /* right-side controls share one width so the column reads as one rail */
 .setting-row > .btn-ghost, .setting-row .confirm-del { flex: none; }
 /* operator config (artifacts, jobs): every control sits in the same-width
@@ -936,6 +939,10 @@ a.btn-ghost { text-decoration: none; }
    and only take the accent on hover. */
 .kv a { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
 .kv a:hover { color: var(--accent); text-decoration-style: solid; }
+/* A failure value: the timestamp is the row, and what went wrong hangs off the
+   (i) beside it. overflow is visible because .kv b clips for its ellipsis, and
+   that clipping would eat the tooltip card. */
+.kv b.kv-fail { display: inline-flex; align-items: center; gap: 6px; overflow: visible; color: var(--danger); }
 /* A kv used inside a setting's description sits tighter than a section-level one. */
 .kv-inline { margin-top: 8px; }
 .kv-inline > div { padding: 6px 2px; font-size: 12.5px; }