From 177af76995cb64b9c8021d1456884ca1a9c38b58 Mon Sep 17 00:00:00 2001 From: codyllord Date: Wed, 27 May 2026 22:26:28 +0000 Subject: [PATCH 1/2] fix(ai-ui): legible advanced-options text in light mode; stop sending the api_key mask MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - df-ai-test-connection, df-ai-model-picker, df-ai-allowed-roles, df-ai-chat-prereqs: replace hard-coded white text/surfaces with theme-flip CSS vars (dark defaults inline, light-on-dark values under :host-context(.dark-theme)) so the AI Connection and AI Chat "Options" panels are readable in the light theme. - test-connection & model-picker: never forward the redisplayed '**********' mask as a real key — null it and pass service_id so the backend falls back to the stored secret. Adds serviceId input + binding to df-ai-model-picker so "Fetch models" works on saved connections. --- .../df-ai-chat-prereqs.component.ts | 35 +++++++++++------ .../df-service-details.component.html | 3 +- .../df-ai-allowed-roles.component.ts | 29 +++++++++----- .../df-ai-model-picker.component.ts | 38 +++++++++++++++---- .../df-ai-test-connection.component.ts | 17 +++++++-- 5 files changed, 89 insertions(+), 33 deletions(-) diff --git a/src/app/adf-ai-chat/components/df-ai-chat-prereqs/df-ai-chat-prereqs.component.ts b/src/app/adf-ai-chat/components/df-ai-chat-prereqs/df-ai-chat-prereqs.component.ts index 3fd34f33..3cc27f2b 100644 --- a/src/app/adf-ai-chat/components/df-ai-chat-prereqs/df-ai-chat-prereqs.component.ts +++ b/src/app/adf-ai-chat/components/df-ai-chat-prereqs/df-ai-chat-prereqs.component.ts @@ -171,6 +171,17 @@ interface RoleRow { `, styles: [ ` + /* Theme-flip tokens: dark text/surfaces by default (light mode); + the dark-theme class restores the original light-on-dark look. */ + :host-context(.dark-theme) { + --df-ai-fg: rgba(255, 255, 255, 0.9); + --df-ai-fg-muted: rgba(255, 255, 255, 0.7); + --df-ai-fg-faint: rgba(255, 255, 255, 0.5); + --df-ai-surface: rgba(255, 255, 255, 0.02); + --df-ai-surface-strong: rgba(255, 255, 255, 0.08); + --df-ai-border: rgba(255, 255, 255, 0.1); + } + .prereqs { border: 1px solid rgba(96, 165, 250, 0.3); background: rgba(96, 165, 250, 0.05); @@ -190,7 +201,7 @@ interface RoleRow { } p { margin: 0; - color: rgba(255, 255, 255, 0.75); + color: var(--df-ai-fg-muted, rgba(0, 0, 0, 0.7)); font-size: 15px; line-height: 1.55; } @@ -199,7 +210,7 @@ interface RoleRow { &__section { padding: 1rem 1.25rem; border-radius: 6px; - background: rgba(255, 255, 255, 0.02); + background: var(--df-ai-surface, rgba(0, 0, 0, 0.03)); &--missing { background: rgba(220, 53, 69, 0.06); @@ -226,7 +237,7 @@ interface RoleRow { } &__kind-icon { - color: rgba(255, 255, 255, 0.5); + color: var(--df-ai-fg-faint, rgba(0, 0, 0, 0.5)); font-size: 17px; } @@ -237,7 +248,7 @@ interface RoleRow { &__count { font-size: 14px; - color: rgba(255, 255, 255, 0.6); + color: var(--df-ai-fg-muted, rgba(0, 0, 0, 0.6)); } &__action { @@ -270,8 +281,8 @@ interface RoleRow { align-items: center; gap: 0.5rem; padding: 0.55rem 1.05rem; - background: rgba(255, 255, 255, 0.04); - border: 1px solid rgba(255, 255, 255, 0.1); + background: var(--df-ai-surface-strong, rgba(0, 0, 0, 0.05)); + border: 1px solid var(--df-ai-border, rgba(0, 0, 0, 0.12)); border-radius: 999px; font: inherit; font-size: 16px; @@ -289,7 +300,7 @@ interface RoleRow { &--selected { border-color: #60a5fa; background: rgba(96, 165, 250, 0.18); - color: #fff; + color: var(--df-ai-fg, rgba(0, 0, 0, 0.87)); } } @@ -304,13 +315,13 @@ interface RoleRow { &__pick-hint { margin: 0.625rem 0 0; font-size: 14px; - color: rgba(255, 255, 255, 0.6); + color: var(--df-ai-fg-muted, rgba(0, 0, 0, 0.6)); font-style: italic; } &__link { font-size: 12px; - color: rgba(255, 255, 255, 0.45); + color: var(--df-ai-fg-faint, rgba(0, 0, 0, 0.45)); text-decoration: none; &:hover { @@ -322,7 +333,7 @@ interface RoleRow { &__hint { margin: 0.5rem 0 0; font-size: 13px; - color: rgba(255, 255, 255, 0.7); + color: var(--df-ai-fg-muted, rgba(0, 0, 0, 0.7)); line-height: 1.5; code { @@ -330,11 +341,11 @@ interface RoleRow { font-size: 12px; padding: 0.1rem 0.375rem; border-radius: 3px; - background: rgba(255, 255, 255, 0.08); + background: var(--df-ai-surface-strong, rgba(0, 0, 0, 0.06)); } strong { - color: rgba(255, 255, 255, 0.9); + color: var(--df-ai-fg, rgba(0, 0, 0, 0.9)); } } } diff --git a/src/app/adf-services/df-service-details/df-service-details.component.html b/src/app/adf-services/df-service-details/df-service-details.component.html index 92d7ac01..6cc005e2 100644 --- a/src/app/adf-services/df-service-details/df-service-details.component.html +++ b/src/app/adf-services/df-service-details/df-service-details.component.html @@ -836,7 +836,8 @@

+ [form]="serviceForm" + [serviceId]="edit && serviceData ? serviceData.id : null">