chat colors, IBM Plex Sans

deploy/k8s/dev/kustomization.yaml

@@ -262,6 +262,9 @@ generatorOptions:
 
 
 
+
+
+
 
 
 

web/src/App.vue

@@ -155,24 +155,24 @@ onBeforeUnmount(() => {
   width: 100vw !important;
   height: 100vh !important;
   overflow: hidden;
-  background: var(--p-surface-0) !important;
+  background: #0f0f0f !important;
 }
 
 .app-container.dark {
-  background: var(--p-surface-0) !important;
+  background: #0f0f0f !important;
 }
 
 .main-splitter {
   height: 100vh !important;
-  background: var(--p-surface-0) !important;
+  background: #0f0f0f !important;
 }
 
 .main-splitter :deep(.p-splitter-gutter) {
-  background: var(--p-surface-0) !important;
+  background: #2e2e2e !important;
 }
 
 .main-splitter :deep(.p-splitter-gutter-handle) {
-  background: var(--p-surface-400) !important;
+  background: #1c1c1c !important;
 }
 
 .chart-panel,

web/src/assets/theme.css

@@ -24,7 +24,7 @@ html, body, #app {
   height: 100vh !important;
   width: 100vw !important;
   overflow: hidden;
-  background-color: var(--p-surface-0) !important;
+  background-color: #0f0f0f !important;
   font-family: 'IBM Plex Sans', sans-serif;
 }
 
@@ -33,8 +33,8 @@ vue-advanced-chat {
 }
 
 .dark {
-  background-color: var(--p-surface-0) !important;
+  background-color: #0f0f0f !important;
-  color: var(--p-surface-900) !important;
+  color: #dbdbdb !important;
 }
 
 /* Ensure dark background for main containers */
@@ -42,5 +42,5 @@ vue-advanced-chat {
 .main-splitter,
 .p-splitter,
 .p-splitter-panel {
-  background-color: var(--p-surface-0) !important;
+  background-color: #0f0f0f !important;
 }

web/src/components/ChatPanel.vue

@@ -496,8 +496,18 @@ const chatStyles = {
 onMounted(() => {
   wsManager.addHandler(handleMessage)
 
-  // Focus on the chat input when component mounts
   setTimeout(() => {
+    // Inject styles into shadow DOM to widen message bubbles
+    const chatEl = document.querySelector('vue-advanced-chat')
+    if (chatEl?.shadowRoot) {
+      const style = document.createElement('style')
+      style.textContent = `
+        .vac-message-wrapper .vac-message-box { max-width: 80%; }
+        .vac-message-wrapper .vac-offset-current { margin-left: 20%; }
+      `
+      chatEl.shadowRoot.appendChild(style)
+    }
+
     const chatInput = document.querySelector('.vac-textarea') as HTMLTextAreaElement
     if (chatInput) {
       chatInput.focus()

web/src/main.ts

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import Aura from '@primevue/themes/aura'
+import { definePreset } from '@primevue/themes'
 import ToastService from 'primevue/toastservice'
 import 'primeicons/primeicons.css'
 import './assets/theme.css'
@@ -9,15 +10,83 @@ import './assets/theme.css'
 import App from './App.vue'
 import router from './router'
 
+// Custom TradingView-matched dark theme
+const TradingViewPreset = definePreset(Aura, {
+  primitive: {
+    // TV green palette built around #089981
+    tvgreen: {
+      50:  '#e6f7f5',
+      100: '#b3e8e2',
+      200: '#80d9cf',
+      300: '#4dcabc',
+      400: '#26bfaf',
+      500: '#089981',
+      600: '#077d69',
+      700: '#056153',
+      800: '#03453d',
+      900: '#022926',
+      950: '#011614'
+    }
+  },
+  semantic: {
+    primary: {
+      50:  '{tvgreen.50}',
+      100: '{tvgreen.100}',
+      200: '{tvgreen.200}',
+      300: '{tvgreen.300}',
+      400: '{tvgreen.400}',
+      500: '{tvgreen.500}',
+      600: '{tvgreen.600}',
+      700: '{tvgreen.700}',
+      800: '{tvgreen.800}',
+      900: '{tvgreen.900}',
+      950: '{tvgreen.950}'
+    },
+    colorScheme: {
+      dark: {
+        // Remap surface scale to TV neutrals.
+        // Aura uses surface.950 for deepest bg, surface.700 for borders,
+        // surface.900 for content bg, surface.0 for text.
+        surface: {
+          0:   '#ffffff',
+          50:  '#dbdbdb',
+          100: '#b8b8b8',
+          200: '#8a8a8a',
+          300: '#6d6d6d',
+          400: '#4d4d4d',
+          500: '#3d3d3d',
+          600: '#3d3d3d',
+          700: '#2e2e2e',  // → content.border.color, splitter gutter
+          800: '#1c1c1c',  // → hover backgrounds, splitter handle
+          900: '#141414',  // → content.background, overlays
+          950: '#0f0f0f'   // → form field backgrounds, deepest bg
+        },
+        primary: {
+          color:         '#089981',
+          contrastColor: '#0f0f0f',
+          hoverColor:    '#0aad95',
+          activeColor:   '#0cc4a8'
+        },
+        text: {
+          color:          '#dbdbdb',
+          hoverColor:     '#dbdbdb',
+          mutedColor:     '#8a8a8a',
+          hoverMutedColor:'#b8b8b8'
+        }
+      }
+    }
+  }
+})
+
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
 app.use(PrimeVue, {
   theme: {
-    preset: Aura,
+    preset: TradingViewPreset,
     options: {
-      darkModeSelector: '.dark',   // you control when dark applies
+      darkModeSelector: '.dark',
       cssLayer: false
     }
   }