From 463f61babef739c98103d7fac9cb34730d0b6412 Mon Sep 17 00:00:00 2001
From: Paulo <commonzenpython@gmail.com>
Date: Mon, 17 Aug 2026 04:07:34 +0200
Subject: [PATCH] Settings names an app the way the switcher does

The rail item and the options group printed the raw extension name, so an
app whose name carries underscores read as `field_notes` in settings while
the switcher showed `field notes`. Both now go through `extensionLabel`,
the one place that turns a name into its display label.
---
 .../src/components/SettingsModal.test.tsx     | 33 +++++++++++++++++++
 frontend/src/components/SettingsModal.tsx     |  5 +--
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/SettingsModal.test.tsx b/frontend/src/components/SettingsModal.test.tsx
index 4b5040c6..30751f1a 100644
--- a/frontend/src/components/SettingsModal.test.tsx
+++ b/frontend/src/components/SettingsModal.test.tsx
@@ -99,6 +99,30 @@ const extensionSettings = {
         },
       ],
     },
+    {
+      name: 'field_notes',
+      description: 'Field notes settings',
+      icon: 'box',
+      builtin: false,
+      agents: [],
+      workflows: [],
+      settings: [
+        {
+          name: 'notebook',
+          label: 'Notebook',
+          help: '',
+          type: 'str',
+          value: 'default',
+          default: 'default',
+          choices: null,
+          section: '',
+          visibleWhenField: '',
+          visibleWhenValue: null,
+          secretSet: null,
+          overridden: false,
+        },
+      ],
+    },
   ],
 }
 
@@ -167,6 +191,15 @@ describe('SettingsModal extension fields', () => {
     expect(await screen.findByText('No browser sessions yet.')).toBeTruthy()
   })
 
+  it('spells an underscored app name out in the rail and its options group', async () => {
+    stubFetch()
+    renderModal()
+
+    fireEvent.click(await screen.findByRole('button', { name: 'field notes' }))
+
+    expect(screen.getByText('field notes options')).toBeTruthy()
+  })
+
   it('renders every 422 message under the field named by the backend', async () => {
     stubFetch()
     const onClose = renderModal()
diff --git a/frontend/src/components/SettingsModal.tsx b/frontend/src/components/SettingsModal.tsx
index 8b633797..21ad4107 100644
--- a/frontend/src/components/SettingsModal.tsx
+++ b/frontend/src/components/SettingsModal.tsx
@@ -21,6 +21,7 @@ import {
   type UpdateUserSettingsRequest,
   type WorkflowSettingField,
 } from '../api/types'
+import { extensionLabel } from '../extensions/registry'
 import { absTime, relTimeFromIso } from '../lib/format'
 import { harnessColors } from '../lib/harnessColors'
 
@@ -363,7 +364,7 @@ export function SettingsModal({ open, onClose }: Props) {
                 <span className="ni-glyph">
                   <ExtensionGlyph name={extension.icon} />
                 </span>
-                <span className="ni-label">{extension.name}</span>
+                <span className="ni-label">{extensionLabel(extension.name)}</span>
               </button>
             ))}
           </nav>
@@ -2162,7 +2163,7 @@ function ExtensionPane({
 
       {optionFields.length > 0 && (
         <div className="set-group">
-          <div className="set-group-label">{extension.name} options</div>
+          <div className="set-group-label">{extensionLabel(extension.name)} options</div>
           {sectionLabels
             .map((sectionLabel) => ({
               sectionLabel,