feat(web-ui): add transform provider visual indicators

Author: SurviveM

tests/unit/web-ui-behavior-parity.test.mjs

@@ -335,7 +335,9 @@ test('captured bundled app skeleton only exposes expected data key drift versus
         'sessionsUsageLoadedLimit',
         'taskOrchestrationTabEnabled',
         'taskOrchestration',
-        '_taskOrchestrationPollTimer'
+        '_taskOrchestrationPollTimer',
+        'displayProviderUrl',
+        'isTransformProvider'
     ] : [
         '__mainTabSwitchState',
         'openclawAuthProfilesByProvider',
@@ -629,7 +631,9 @@ test('captured bundled app skeleton only exposes expected data key drift versus
         'taskOrchestrationQueueStats',
         'taskOrchestrationDraftMetrics',
         'taskOrchestrationDraftChecklist',
-        'taskOrchestrationDraftReadiness'
+        'taskOrchestrationDraftReadiness',
+        'displayProviderUrl',
+        'isTransformProvider'
     ];
     const allowedMissingCurrentComputedKeys = [
         'hasLocalAndProxy',

web-ui/modules/app.computed.dashboard.mjs

@@ -1,3 +1,4 @@
+import { getProviderDisplayUrl, checkIsTransformProvider } from './provider-url-display.mjs';
 export function createDashboardComputed() {
     return {
         agentsDiffHasChanges() {
@@ -39,6 +40,14 @@ export function createDashboardComputed() {
             const list = Array.isArray(this.providersList) ? this.providersList : [];
             return list;
         },
+
+        displayProviderUrl() {
+            return (provider) => getProviderDisplayUrl(provider);
+        },
+
+        isTransformProvider() {
+            return (provider) => checkIsTransformProvider(provider);
+        },
         installTargetCards() {
             const targets = Array.isArray(this.installStatusTargets) && this.installStatusTargets.length
                 ? this.installStatusTargets

web-ui/modules/provider-url-display.mjs

@@ -0,0 +1,14 @@
+export function getProviderDisplayUrl(provider) {
+    if (!provider) return '';
+    const bridge = typeof provider.codexmate_bridge === 'string' ? provider.codexmate_bridge.trim() : '';
+    if (bridge === 'openai') return provider.url || '';
+    return provider.url || '';
+}
+
+export function checkIsTransformProvider(provider) {
+    if (!provider || typeof provider !== 'object') return false;
+    const bridge = typeof provider.codexmate_bridge === 'string' ? provider.codexmate_bridge.trim() : '';
+    if (bridge === 'openai') return true;
+    const url = String(provider.url || '');
+    return url.includes('/bridge/openai/');
+}

web-ui/partials/index/panel-config-codex.html

@@ -204,14 +204,14 @@
                          role="button"
                          :aria-current="displayCurrentProvider === provider.name ? 'true' : null">
                         <div class="card-leading">
-                            <div class="card-icon">{{ provider.name.charAt(0).toUpperCase() }}</div>
+                            <div class="card-icon">{{ provider.name.charAt(0).toUpperCase() }}<span v-if="isTransformProvider(provider)" class="card-icon-dot" title="通过内建转换适配"></span></div>
                             <div class="card-content">
                                 <div class="card-title">
                                     <span>{{ provider.name }}</span>
                                     <span v-if="provider.readOnly" class="provider-readonly-badge">{{ t('config.badge.system') }}</span>
                                 </div>
                                 <div class="card-subtitle">
-                                    {{ provider.url || t('config.url.unset') }}
+                                    {{ displayProviderUrl(provider) || t('config.url.unset') }}
                                 </div>
                             </div>
                         </div>

web-ui/styles/titles-cards.css

@@ -410,3 +410,50 @@
     color: var(--color-text-tertiary);
     opacity: 0.5;
 }
+
+.provider-transform-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 6px;
+    font-size: 14px;
+    line-height: 1;
+    opacity: 0.6;
+    flex-shrink: 0;
+    cursor: help;
+    transition: opacity 0.2s ease;
+}
+
+.provider-transform-icon:hover {
+    opacity: 1;
+}
+
+.card-icon {
+    position: relative;
+}
+
+.card-icon-dot {
+    position: absolute;
+    bottom: -2px;
+    right: -2px;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: #22c55e;
+    border: 1.5px solid var(--color-surface);
+    box-shadow: 0 0 4px rgba(34, 197, 94, 0.6), 0 0 8px rgba(34, 197, 94, 0.3);
+    animation: breathe 2s ease-in-out infinite;
+}
+
+@keyframes breathe {
+    0%, 100% {
+        box-shadow: 0 0 4px rgba(34, 197, 94, 0.6), 0 0 8px rgba(34, 197, 94, 0.3);
+    }
+    50% {
+        box-shadow: 0 0 10px rgba(34, 197, 94, 0.8), 0 0 18px rgba(34, 197, 94, 0.5);
+    }
+}
+
+.provider-transform-icon {
+    display: none;
+}