From baa5eef835304c496cfebb621fe0923e97ce5b8e Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Sun, 19 Apr 2026 16:44:03 -0400
Subject: [PATCH] feat(settings): add page headers to /settings and
 /runs/:id/settings

Both pages previously dumped raw JSON with no context. Add a heading
and a one-line description so a user landing from the nav understands
what they're looking at and how to edit it.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/fabro-web/app/routes/run-settings.tsx | 6 ++++++
 apps/fabro-web/app/routes/settings.tsx     | 9 +++++++++
 2 files changed, 15 insertions(+)

diff --git a/apps/fabro-web/app/routes/run-settings.tsx b/apps/fabro-web/app/routes/run-settings.tsx
index 40e42a5ad..9bfa09f99 100644
--- a/apps/fabro-web/app/routes/run-settings.tsx
+++ b/apps/fabro-web/app/routes/run-settings.tsx
@@ -33,6 +33,12 @@ export default function RunSettingsPage({ loaderData }: any) {
       <StageSidebar stages={stages} runId={id!} activeLink="settings" />
 
       <div className="min-w-0 flex-1">
+        <header className="mb-4">
+          <h2 className="text-base font-semibold text-fg">Run settings</h2>
+          <p className="mt-1 text-sm/6 text-fg-3">
+            Frozen settings snapshot used by this run.
+          </p>
+        </header>
         <CollapsibleFile
           file={{ name: "settings.json", contents: JSON.stringify(settings, null, 2), lang: "json" }}
         />
diff --git a/apps/fabro-web/app/routes/settings.tsx b/apps/fabro-web/app/routes/settings.tsx
index 9feecd60a..3a0c805d7 100644
--- a/apps/fabro-web/app/routes/settings.tsx
+++ b/apps/fabro-web/app/routes/settings.tsx
@@ -24,6 +24,15 @@ export default function Settings({ loaderData }: any) {
 
   return (
     <div className="mx-auto max-w-4xl">
+      <header className="mb-6">
+        <h1 className="text-2xl font-semibold tracking-tight text-fg">
+          Settings
+        </h1>
+        <p className="mt-2 max-w-[60ch] text-sm/6 text-fg-3 text-pretty">
+          Redacted snapshot of the server configuration. Edit values with the
+          Fabro CLI; changes take effect on the next server restart.
+        </p>
+      </header>
       <CollapsibleFile
         file={{ name: "server.json", contents: JSON.stringify(settings, null, 2), lang: "json" }}
       />