feat(ui): refresh dashboard and paper boat branding

frontend/src/composables/useWidgetStyles.ts

@@ -17,13 +17,14 @@ limitations under the License.
 import { computed } from 'vue'
 import type { AgentCustomization } from '../types/widget'
 import { isColorDark } from '../types/widget'
+import { resolveAvatarImage } from '../utils/orb'
 import { resolveWidgetUploadUrl } from '../webclient/widget-env'
 
 // Themed colours now come from the shared design tokens (widget-theme.ts →
 // `--rp-*` vars set on `.chat-container`). These computeds return `var(--rp-*)`
 // references so the widget's existing inline styles resolve to the token values,
 // while user overrides are folded into the vars by `themeCssVars()`.
-export function useWidgetStyles(customization: { value: AgentCustomization }) {
+export function useWidgetStyles(customization: { value: AgentCustomization }, agentName: { value: string } = { value: '' }) {
     const chatStyles = computed(() => ({
         backgroundColor: 'var(--rp-card)',
         color: 'var(--rp-text)'
@@ -55,7 +56,7 @@ export function useWidgetStyles(customization: { value: AgentCustomization }) {
 
     // Signed S3/CDN URLs pass through; local paths are resolved against the
     // runtime API origin (photo_url already carries the /api/v1 prefix).
-    const photoUrl = computed(() => resolveWidgetUploadUrl(customization.value.photo_url))
+    const photoUrl = computed(() => resolveWidgetUploadUrl(resolveAvatarImage(agentName.value, customization.value)))
 
     const shadowStyle = computed(() => {
         const bgColor = customization.value.chat_background_color || '#ffffff'
@@ -74,4 +75,4 @@ export function useWidgetStyles(customization: { value: AgentCustomization }) {
         photoUrl,
         shadowStyle
     }
-} 
+}