From ce04be6b89aac89ac11011014b4da5465afafdfa Mon Sep 17 00:00:00 2001
From: Menci <mencici@msn.com>
Date: Fri, 13 Nov 2026 17:16:16 +0800
Subject: [PATCH] fix(web): keep disabled-model editing equally available in
 both editor surfaces

The provider-owned-catalog kinds (Copilot, Codex, Claude Code) could not
toggle a listed model from the model-list switch: the switch folded in
`readOnly`, which for those kinds is always true because the upstream owns
the catalog and the rows cannot be added, removed or restructured. The
disabled-models combobox in the sidebar moved the same field for the same
editor, so the two disagreed.

The mirror-image case was broken too: the combobox was gated on Full
connection editability, so a models-level editor could flip the switch but
not the combobox.

Both controls now read one predicate, `modelsEditable`, which expresses the
actual requirement -- an editor who may change the catalog may set which
listed models are enabled. Structural controls keep the shape-based
restriction, so catalog-owned rows stay unaddable and uneditable.

The regression test mounts both surfaces in one form and asserts they agree
for Full, models-level and audit-only editors. It replaces the two
workspace-interactions cases, whose assertions only covered `disabled` and
missed the `readOnly` state this defect lived in.
---
 .../disabled-model-parity_test.tsx            | 137 ++++++++++++++++++
 .../workspace-interactions_test.tsx           |  22 ---
 .../upstream-editor/config-sidebar.tsx        |  10 +-
 .../src/components/upstream-editor/data.ts    |  13 +-
 .../components/upstream-editor/workspace.tsx  |  34 +++--
 5 files changed, 172 insertions(+), 44 deletions(-)
 create mode 100644 apps/web/__tests__/components/upstream-editor/disabled-model-parity_test.tsx

diff --git a/apps/web/__tests__/components/upstream-editor/disabled-model-parity_test.tsx b/apps/web/__tests__/components/upstream-editor/disabled-model-parity_test.tsx
new file mode 100644
index 0000000000..febdbd894c
--- /dev/null
+++ b/apps/web/__tests__/components/upstream-editor/disabled-model-parity_test.tsx
@@ -0,0 +1,137 @@
+import { fireEvent, screen } from '@testing-library/react';
+import { forwardRef, useState } from 'react';
+import type { PropsWithChildren } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { MemoryRouter } from 'react-router';
+import { describe, expect, it, vi } from 'vitest';
+
+import type { UpstreamRecord } from '../../../src/api/types';
+import { UpstreamConfigSidebar } from '../../../src/components/upstream-editor/config-sidebar';
+import type { UpstreamEditLevel, UpstreamEditorValues } from '../../../src/components/upstream-editor/data';
+import { valuesFromRecord } from '../../../src/components/upstream-editor/data';
+import { UpstreamWorkspace, type ModelsYamlDraft } from '../../../src/components/upstream-editor/workspace';
+import { i18n } from '../../../src/i18n';
+import { upstreamRecord } from '../../api/upstream-fixture';
+import { renderInApp } from '../../render';
+import type { UpstreamModelConfig } from '@floway-dev/provider/browser';
+
+vi.mock('../../../src/components/upstream-editor/models-yaml-editor', () => ({
+  default: ({ onChange, value }: { onChange: (value: string) => void; value: string }) => (
+    <textarea aria-label="YAML models" onChange={event => onChange(event.target.value)} value={value} />
+  ),
+}));
+
+vi.mock('../../../src/components/ui/scroll-area', () => ({
+  ScrollArea: forwardRef<HTMLDivElement, PropsWithChildren>(({ children }, ref) => <div ref={ref}>{children}</div>),
+}));
+
+const listed = (id: string): UpstreamModelConfig => ({
+  upstreamModelId: id,
+  publicModelId: id,
+  display_name: id,
+  kind: 'chat',
+  endpoints: { openaiResponses: {} },
+});
+
+const customRecord = upstreamRecord('up_custom', {
+  name: 'Test',
+  kind: 'custom',
+  config: {
+    baseUrl: 'https://example.com',
+    authStyle: 'bearer',
+    apiKey: '',
+    endpoints: { openaiResponses: {} },
+    ingressHeadersRules: [],
+    modelsFetch: { enabled: false },
+    models: [listed('model-a')],
+  },
+  state: null,
+});
+
+// The provider owns this catalog, so the workspace's structural controls are
+// read-only for it while the enable switch is not.
+const copilotRecord = upstreamRecord('', {
+  name: 'Copilot',
+  kind: 'copilot',
+  config: {
+    githubHost: 'github.com',
+    githubToken: '',
+    user: { id: 1, login: 'operator', name: null, avatar_url: '' },
+  },
+  state: null,
+});
+
+// Both surfaces of the one `disabled_public_model_ids` field in a single form,
+// because the defect was each of them deriving its own read-only flag.
+function Harness({ discovered, editLevel, record }: {
+  discovered: UpstreamModelConfig[];
+  editLevel: UpstreamEditLevel;
+  record: UpstreamRecord;
+}) {
+  const form = useForm<UpstreamEditorValues>({ defaultValues: valuesFromRecord(record) });
+  const [modelsYamlDraft, setModelsYamlDraft] = useState<ModelsYamlDraft | null>(null);
+  return (
+    <MemoryRouter>
+      <FormProvider {...form}>
+        <UpstreamConfigSidebar
+          catalogAvailable
+          discovered={discovered}
+          editLevel={editLevel}
+          onPatch={vi.fn()}
+          onRefreshModels={vi.fn()}
+          proxies={[]}
+          record={record}
+          runtime={{ kind: 'node', runtimeLocation: 'TEST' }}
+        />
+        <UpstreamWorkspace
+          discovered={discovered}
+          editLevel={editLevel}
+          modelsLoading={false}
+          modelsError={null}
+          modelsYamlDraft={modelsYamlDraft}
+          onModelsYamlDraftChange={setModelsYamlDraft}
+          onRefreshModels={vi.fn()}
+          record={record}
+        />
+      </FormProvider>
+    </MemoryRouter>
+  );
+}
+
+const combobox = () =>
+  screen.getByRole<HTMLInputElement>('combobox', { name: i18n.t('dashboard.upstreamEditor.sections.disabledModels') });
+const rowSwitch = (name: string) =>
+  screen.getAllByRole<HTMLInputElement>('switch').find(node => node.getAttribute('aria-label')?.includes(name))!;
+// `readOnly` on these controls is Fluent's own state, distinct from `disabled`:
+// the control stays focusable and refuses the change at the source.
+const isReadOnly = (control: Element) => control.getAttribute('aria-readonly') === 'true';
+
+describe('disabled model editing parity between the sidebar and the model list', () => {
+  it('leaves both surfaces editable for a Full editor of a provider-owned catalog', () => {
+    renderInApp(<Harness discovered={[listed('gpt-5')]} editLevel="full" record={copilotRecord} />);
+
+    expect(isReadOnly(rowSwitch('gpt-5'))).toBe(false);
+    expect(isReadOnly(combobox())).toBe(false);
+
+    fireEvent.click(rowSwitch('gpt-5'));
+    expect(rowSwitch('gpt-5').checked).toBe(false);
+  });
+
+  it('leaves both surfaces editable for a models-level editor', () => {
+    renderInApp(<Harness discovered={[]} editLevel="models" record={customRecord} />);
+
+    expect(isReadOnly(rowSwitch('model-a'))).toBe(false);
+    expect(isReadOnly(combobox())).toBe(false);
+  });
+
+  it('leaves both surfaces read-only for an audit-only editor', () => {
+    renderInApp(<Harness discovered={[]} editLevel="off" record={customRecord} />);
+
+    const toggle = rowSwitch('model-a');
+    expect(isReadOnly(toggle)).toBe(true);
+    expect(isReadOnly(combobox())).toBe(true);
+
+    fireEvent.click(toggle);
+    expect(toggle.checked).toBe(true);
+  });
+});
diff --git a/apps/web/__tests__/components/upstream-editor/workspace-interactions_test.tsx b/apps/web/__tests__/components/upstream-editor/workspace-interactions_test.tsx
index 23107dfaaf..08f49c1552 100644
--- a/apps/web/__tests__/components/upstream-editor/workspace-interactions_test.tsx
+++ b/apps/web/__tests__/components/upstream-editor/workspace-interactions_test.tsx
@@ -91,28 +91,6 @@ const deleteCommandStem = i18n.t('dashboard.upstreamEditor.models.deleteNamed',
 const deleteCommands = () => screen.getAllByLabelText(new RegExp(`^${deleteCommandStem}`));
 
 describe('upstream model workspace field-array transitions', () => {
-  it('keeps the enable switch and refresh available for a provider-owned catalog', () => {
-    const copilot = upstreamRecord('up_copilot', {
-      name: 'Copilot',
-      kind: 'copilot',
-      config: { githubHost: 'github.com', githubToken: '', user: { id: 1, login: 'operator', name: null, avatar_url: '' } },
-      state: null,
-    });
-    renderInApp(<Harness discovered={[{ upstreamModelId: 'gpt-5', publicModelId: 'gpt-5', kind: 'chat', endpoints: { openaiResponses: {} } }]} source={copilot} />);
-    const toggle = screen.getAllByRole('switch').find(node => node.getAttribute('aria-label')?.includes('gpt-5'))!;
-    expect(toggle.getAttribute('aria-disabled')).not.toBe('true');
-    expect(toggle.hasAttribute('disabled')).toBe(false);
-  });
-
-  it('renders the enable switch read-only for an audit-only editor', () => {
-    renderInApp(<Harness editLevel="off" />);
-    const toggle = screen.getAllByRole('switch').find(node => node.getAttribute('aria-label')?.includes('model-a'))!;
-    expect(toggle.getAttribute('aria-readonly')).toBe('true');
-    expect((toggle as HTMLInputElement).checked).toBe(true);
-    fireEvent.click(toggle);
-    expect((toggle as HTMLInputElement).checked).toBe(true);
-  });
-
   const detailLabel = models('imageDetailOriginal');
 
   it('opens a newly added model in the detail editor', async () => {
diff --git a/apps/web/src/components/upstream-editor/config-sidebar.tsx b/apps/web/src/components/upstream-editor/config-sidebar.tsx
index 33d6e1f4d7..3b953ed332 100644
--- a/apps/web/src/components/upstream-editor/config-sidebar.tsx
+++ b/apps/web/src/components/upstream-editor/config-sidebar.tsx
@@ -2,8 +2,8 @@ import { DeleteRegular } from '@fluentui/react-icons';
 import { useId, useMemo } from 'react';
 import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 
-import type { EditorAuxData, RuntimeInfo, UpstreamEditorValues } from './data';
-import { modelPrefixIsValid, publicModelId } from './data';
+import type { EditorAuxData, RuntimeInfo, UpstreamEditLevel, UpstreamEditorValues } from './data';
+import { modelPrefixIsValid, modelsEditable, publicModelId } from './data';
 import { ApiPathsSection, ProviderConfigSection } from './provider-config';
 import { EditorSection } from './section';
 import type { UpstreamRecord } from '../../api/types';
@@ -29,7 +29,7 @@ const COMMON_COLO_LOCATIONS = [
   'SYD', 'AKL', 'GRU', 'JNB', 'DXB', 'BOM', 'DEL',
 ] as const;
 
-export const configReadOnly = (editLevel: 'off' | 'models' | 'full') => ({
+export const configReadOnly = (editLevel: UpstreamEditLevel) => ({
   connection: editLevel !== 'full',
   modelsFetch: editLevel === 'off',
 });
@@ -48,7 +48,7 @@ export function UpstreamConfigSidebar({
   discovered: UpstreamModelConfig[];
   onPatch: (patch: { config?: unknown; state?: unknown }, persisted?: boolean) => void;
   onRefreshModels: () => void;
-  editLevel: 'off' | 'models' | 'full';
+  editLevel: UpstreamEditLevel;
   proxies: EditorAuxData['proxies'];
   record: UpstreamRecord;
   runtime: RuntimeInfo;
@@ -153,7 +153,7 @@ export function UpstreamConfigSidebar({
           <ModelPrefixEditor readOnly={immutable} />
         </EditorSection>
         <EditorSection title={t('dashboard.upstreamEditor.sections.disabledModels')} description={t('dashboard.upstreamEditor.disabledModelsHint')}>
-          <DisabledModelsCombobox catalogAvailable={catalogAvailable} discovered={discovered} readOnly={immutable} />
+          <DisabledModelsCombobox catalogAvailable={catalogAvailable} discovered={discovered} readOnly={!modelsEditable(editLevel)} />
         </EditorSection>
       </aside>
     </div>
diff --git a/apps/web/src/components/upstream-editor/data.ts b/apps/web/src/components/upstream-editor/data.ts
index c4109af385..d6d28d8c46 100644
--- a/apps/web/src/components/upstream-editor/data.ts
+++ b/apps/web/src/components/upstream-editor/data.ts
@@ -27,9 +27,11 @@ export interface EditorAuxData {
   runtime: RuntimeInfo;
 }
 
+export type UpstreamEditLevel = 'off' | 'models' | 'full';
+
 interface UpstreamEditorLoaderDataBase extends EditorAuxData {
   audit?: boolean;
-  editLevel: 'off' | 'models' | 'full';
+  editLevel: UpstreamEditLevel;
   record: UpstreamRecord;
   discovered: UpstreamModelConfig[] | null;
 }
@@ -119,6 +121,15 @@ export const canFetchModelCatalog = (record: UpstreamRecord, config: UpstreamEdi
   }
 };
 
+// Turning a listed model on or off is a catalog edit rather than a structural
+// one: an editor who may change the catalog may set it, and only an audit-only
+// editor may not. The sidebar's disabled-models combobox and the workspace's
+// per-row switch are two presentations of that one field, so both read this
+// predicate instead of deriving read-only flags of their own -- each derived
+// from a different restriction (connection editability on one side, catalog
+// ownership on the other) and the two drifted apart.
+export const modelsEditable = (editLevel: UpstreamEditLevel): boolean => editLevel !== 'off';
+
 // Manual entries exist only for the kinds whose stored config carries a model
 // list. For the rest the catalog is the provider's, and the editor can only
 // enable and disable what it lists.
diff --git a/apps/web/src/components/upstream-editor/workspace.tsx b/apps/web/src/components/upstream-editor/workspace.tsx
index bb7c5e6946..9c182d3c1c 100644
--- a/apps/web/src/components/upstream-editor/workspace.tsx
+++ b/apps/web/src/components/upstream-editor/workspace.tsx
@@ -11,8 +11,8 @@ import { lazy, Suspense, useCallback, useEffect, useLayoutEffect, useMemo, useRe
 import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 import { useSearchParams } from 'react-router';
 
-import type { ModelListingFailure, ModelRow, UpstreamEditorValues } from './data';
-import { canFetchModelCatalog, manualModelsSupported, publicModelId } from './data';
+import type { ModelListingFailure, ModelRow, UpstreamEditLevel, UpstreamEditorValues } from './data';
+import { canFetchModelCatalog, manualModelsSupported, modelsEditable, publicModelId } from './data';
 import { shapeForKind } from './endpoints';
 import { FeatureFlagsEditor } from './feature-flags';
 import { ModelDetail } from './model-detail';
@@ -98,7 +98,7 @@ export function UpstreamWorkspace({
   record,
 }: {
   discovered: UpstreamModelConfig[];
-  editLevel: 'off' | 'models' | 'full';
+  editLevel: UpstreamEditLevel;
   modelsYamlDraft: ModelsYamlDraft | null;
   modelsError: ModelListingFailure | null;
   modelsLoading: boolean;
@@ -130,10 +130,10 @@ export function UpstreamWorkspace({
   // on an editable buffer the upstream would never store. The same applies to
   // an audit-only editor, which may read the list but not edit it.
   const editableCatalog = manualModelsSupported(record);
-  const permissionReadOnly = editLevel === 'off';
+  const editableModels = modelsEditable(editLevel);
   const modelView: ModelView = selectedUpstreamModelId !== null
     ? 'detail'
-    : params.get(VIEW_PARAM) === 'yaml' && editableCatalog && !permissionReadOnly ? 'yaml' : 'list';
+    : params.get(VIEW_PARAM) === 'yaml' && editableCatalog && editableModels ? 'yaml' : 'list';
   const modelDetailTab: ModelDetailTab = params.get(SECTION_PARAM) === 'flags' ? 'flags' : 'details';
   const showModelDetail = modelView === 'detail';
 
@@ -195,7 +195,7 @@ export function UpstreamWorkspace({
   useLayoutEffect(() => {
     workspaceScrollRef.current?.scrollTo({ left: 0, top: 0 });
   }, [modelDetailTab, modelView, tab]);
-  const modelsWorkspace = <ModelsWorkspace detailSection={modelDetailTab} modelSelection={modelSelection} onModelLocatorCommit={commitModelLocator} onModelSelectionChange={setModelSelection} onOpenModel={openModel} selectedUpstreamModelId={selectedUpstreamModelId} discovered={discovered} modelsLoading={modelsLoading} modelsError={modelsError} onRefreshModels={onRefreshModels} onViewChange={changeModelView} permissionReadOnly={permissionReadOnly} readOnly={!editableCatalog} record={record} revealValidation={modelValidationAttempted || submitCount > 0} view={modelView} yamlDraft={modelsYamlDraft} onYamlDraftChange={onModelsYamlDraftChange} />;
+  const modelsWorkspace = <ModelsWorkspace detailSection={modelDetailTab} modelSelection={modelSelection} onModelLocatorCommit={commitModelLocator} onModelSelectionChange={setModelSelection} onOpenModel={openModel} selectedUpstreamModelId={selectedUpstreamModelId} discovered={discovered} modelsLoading={modelsLoading} modelsError={modelsError} onRefreshModels={onRefreshModels} onViewChange={changeModelView} editableModels={editableModels} readOnly={!editableCatalog} record={record} revealValidation={modelValidationAttempted || submitCount > 0} view={modelView} yamlDraft={modelsYamlDraft} onYamlDraftChange={onModelsYamlDraftChange} />;
   return <section className="grid grid-cols-[minmax(0,1fr)] grid-rows-[auto_minmax(0,1fr)] h-full min-h-0 min-w-0 max-[1050px]:h-auto">
     <div className="flex items-center gap-2 border-0 border-b border-solid border-fui-divider px-5 pt-2">
       {showModelDetail
@@ -233,9 +233,13 @@ export function UpstreamWorkspace({
   </section>;
 }
 
-function ModelsWorkspace({ detailSection, discovered, modelSelection, modelsError, modelsLoading, onModelLocatorCommit, onModelSelectionChange, onOpenModel, onRefreshModels, onViewChange, onYamlDraftChange, permissionReadOnly, readOnly, record, revealValidation, selectedUpstreamModelId, view, yamlDraft }: {
+function ModelsWorkspace({ detailSection, discovered, editableModels, modelSelection, modelsError, modelsLoading, onModelLocatorCommit, onModelSelectionChange, onOpenModel, onRefreshModels, onViewChange, onYamlDraftChange, readOnly, record, revealValidation, selectedUpstreamModelId, view, yamlDraft }: {
   detailSection: ModelDetailTab;
   discovered: UpstreamModelConfig[];
+  // Catalog-level edit permission: the caller may set which listed models are
+  // enabled and may refresh the catalog. Independent of the shape-based
+  // restriction below, which is only about the provider owning the rows.
+  editableModels: boolean;
   modelSelection: ModelSelection | null;
   modelsError: ModelListingFailure | null;
   modelsLoading: boolean;
@@ -245,12 +249,10 @@ function ModelsWorkspace({ detailSection, discovered, modelSelection, modelsErro
   onOpenModel: (selection: ModelSelection | null) => void;
   onViewChange: (view: ModelView) => void;
   onYamlDraftChange: (draft: ModelsYamlDraft | null) => void;
-  // Permission-based read-only: no Upstream.Edit at all.
-  permissionReadOnly: boolean;
   // Shape-based read-only: this provider's catalog is owned by the upstream,
   // so rows cannot be added, removed, or edited structurally. Enabling or
   // disabling a listed model and refreshing the catalog are still edits the
-  // caller may hold, so those follow permissionReadOnly.
+  // caller may hold, so those follow editableModels.
   readOnly: boolean;
   record: UpstreamRecord;
   revealValidation: boolean;
@@ -395,7 +397,7 @@ function ModelsWorkspace({ detailSection, discovered, modelSelection, modelsErro
     </div>{deleteConfirmation}</>;
   }
 
-  if (view === 'detail' && activeDetailRow) return <><ModelDetail section={detailSection} row={activeDetailRow} readOnly={permissionReadOnly || readOnly} revealValidation={revealValidation} onDelete={() => deleteDialog.open(activeDetailRow)} onSourceChange={source => setModelSource(activeDetailRow, source)} onUpstreamModelIdCommit={onModelLocatorCommit} onChange={value => {
+  if (view === 'detail' && activeDetailRow) return <><ModelDetail section={detailSection} row={activeDetailRow} readOnly={!editableModels || readOnly} revealValidation={revealValidation} onDelete={() => deleteDialog.open(activeDetailRow)} onSourceChange={source => setModelSource(activeDetailRow, source)} onUpstreamModelIdCommit={onModelLocatorCommit} onChange={value => {
     if (activeDetailRow.manualIndex === null) return;
     setValue(`manualModels.${activeDetailRow.manualIndex}`, value, {
       shouldDirty: true,
@@ -409,11 +411,11 @@ function ModelsWorkspace({ detailSection, discovered, modelSelection, modelsErro
       level={2}
       title={t('dashboard.upstreamEditor.models.title')}
       actions={<>
-        {!permissionReadOnly && !readOnly && <Button appearance="primary" icon={<AddRegular />} onClick={addModel}>{t('dashboard.upstreamEditor.models.add')}</Button>}
-        {!permissionReadOnly && !readOnly && <Button className="!min-w-[160px]" icon={<CodeRegular />} onClick={() => onViewChange('yaml')}>{t('dashboard.upstreamEditor.models.editAsYaml')}</Button>}
+        {editableModels && !readOnly && <Button appearance="primary" icon={<AddRegular />} onClick={addModel}>{t('dashboard.upstreamEditor.models.add')}</Button>}
+        {editableModels && !readOnly && <Button className="!min-w-[160px]" icon={<CodeRegular />} onClick={() => onViewChange('yaml')}>{t('dashboard.upstreamEditor.models.editAsYaml')}</Button>}
         {record.kind !== 'azure' && <>
           <ModelsCacheStatus cache={record.modelsCache} />
-          <Button disabled={!canFetch || permissionReadOnly} disabledFocusable={modelsLoading} icon={modelsLoading ? <Spinner size="tiny" /> : <ArrowClockwiseRegular />} onClick={onRefreshModels}>{t('dashboard.upstreamEditor.models.refresh')}</Button>
+          <Button disabled={!canFetch || !editableModels} disabledFocusable={modelsLoading} icon={modelsLoading ? <Spinner size="tiny" /> : <ArrowClockwiseRegular />} onClick={onRefreshModels}>{t('dashboard.upstreamEditor.models.refresh')}</Button>
         </>}
       </>}
     />
@@ -442,7 +444,7 @@ function ModelsWorkspace({ detailSection, discovered, modelSelection, modelsErro
         <TableHeader><TableRow><TableCentredHeader>{t('dashboard.upstreamEditor.models.enabled')}</TableCentredHeader><TableHeaderCell>{t('dashboard.upstreamEditor.models.name')}</TableHeaderCell><TableCentredHeader>{t('dashboard.upstreamEditor.models.kind')}</TableCentredHeader><TableHeaderCell>{t('dashboard.upstreamEditor.models.id')}</TableHeaderCell><TableCentredHeader>{t('dashboard.upstreamEditor.models.source')}</TableCentredHeader><TableActionsHeader /></TableRow></TableHeader>
         <TableBody>{filtered.length === 0 ? <TableRow><TableCell colSpan={6}><EmptyStateLine>{t('dashboard.upstreamEditor.models.noMatches')}</EmptyStateLine></TableCell></TableRow> : filtered.map(row => {
           const id = publicModelId(row.config); return <TableRow className="h-14" key={row.key}>
-            <TableCentredCell><Switch aria-label={t('dashboard.upstreamEditor.models.enabledFor', { name: row.config.display_name ?? id })} checked={!disabled.includes(id)} readOnly={permissionReadOnly || readOnly} onChange={(_, data) => setEnabled(id, data.checked)} /></TableCentredCell>
+            <TableCentredCell><Switch aria-label={t('dashboard.upstreamEditor.models.enabledFor', { name: row.config.display_name ?? id })} checked={!disabled.includes(id)} readOnly={!editableModels} onChange={(_, data) => setEnabled(id, data.checked)} /></TableCentredCell>
             <TableCell className="overflow-hidden">
               <TruncationTooltip content={row.config.display_name ?? id} relationship="label">
                 {measureRef => <RowTitleButton onClick={() => onOpenModel({ locator: row.config.upstreamModelId, manualIndex: row.manualIndex, rowKey: row.key })} ref={measureRef}>
@@ -453,7 +455,7 @@ function ModelsWorkspace({ detailSection, discovered, modelSelection, modelsErro
             <TableCentredCell>{t(`dashboard.upstreamEditor.models.kindValue.${row.config.kind}`)}</TableCentredCell>
             <TableCell className="overflow-hidden"><span className="flex items-center gap-1 min-w-0 max-w-full"><TruncationTooltip content={id} relationship="label">{measureRef => <code className="winui-focus-rect block min-w-0 max-w-[calc(100%-36px)] truncate leading-[var(--lineHeightBase300)]" ref={measureRef} tabIndex={0}>{id}</code>}</TruncationTooltip><TooltipIconButton className="flex-none" icon={copyOutcomeIcon(outcomeFor(id))} label={copyLabel(outcomeFor(id), t('dashboard.upstreamEditor.models.copy'))} onClick={() => copy(id, id)} /></span></TableCell>
             <TableCentredCell>{t(`dashboard.upstreamEditor.models.${row.source}`)}</TableCentredCell>
-            <TableCell><TableActions><TooltipIconButton icon={<EditRegular />} label={t('dashboard.upstreamEditor.models.editNamed', { name: row.config.display_name ?? id })} onClick={() => onOpenModel({ locator: row.config.upstreamModelId, manualIndex: row.manualIndex, rowKey: row.key })} />{!permissionReadOnly && !readOnly && row.manualIndex !== null && <TooltipIconButton danger icon={<DeleteRegular />} label={t('dashboard.upstreamEditor.models.deleteNamed', { name: row.config.display_name ?? id })} onClick={() => deleteDialog.open(row)} />}</TableActions></TableCell>
+            <TableCell><TableActions><TooltipIconButton icon={<EditRegular />} label={t('dashboard.upstreamEditor.models.editNamed', { name: row.config.display_name ?? id })} onClick={() => onOpenModel({ locator: row.config.upstreamModelId, manualIndex: row.manualIndex, rowKey: row.key })} />{editableModels && !readOnly && row.manualIndex !== null && <TooltipIconButton danger icon={<DeleteRegular />} label={t('dashboard.upstreamEditor.models.deleteNamed', { name: row.config.display_name ?? id })} onClick={() => deleteDialog.open(row)} />}</TableActions></TableCell>
           </TableRow>;
         })}</TableBody>
       </Table>