feat(dashboard): switch to BlueBusiness theme

Replace PurpleTheme with BlueBusiness theme for improved visual design.
Includes new light and dark theme definitions.

dashboard/src/plugins/vuetify.ts

@@ -2,8 +2,8 @@ import { createVuetify } from "vuetify";
 import "@/assets/mdi-subset/materialdesignicons-subset.css";
 import * as components from "vuetify/components";
 import * as directives from "vuetify/directives";
-import { PurpleTheme } from "@/theme/LightTheme";
-import { PurpleThemeDark } from "@/theme/DarkTheme";
+import { BlueBusinessLightTheme } from "@/theme/BlueBusinessLightTheme";
+import { BlueBusinessDarkTheme } from "@/theme/BlueBusinessDarkTheme";
 import { LIGHT_THEME_NAME, DARK_THEME_NAME } from "@/theme/constants";
 
 export default createVuetify({
@@ -13,8 +13,8 @@ export default createVuetify({
   theme: {
     defaultTheme: LIGHT_THEME_NAME,
     themes: {
-      [LIGHT_THEME_NAME]: PurpleTheme,
-      [DARK_THEME_NAME]: PurpleThemeDark,
+      [LIGHT_THEME_NAME]: BlueBusinessLightTheme,
+      [DARK_THEME_NAME]: BlueBusinessDarkTheme,
     },
   },
   defaults: {

dashboard/src/stores/common.ts

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-import axios from "@/utils/request";
+import axios, { resolveApiUrl } from "@/utils/request";
 
 interface LogObject {
   uuid?: string;
@@ -51,7 +51,7 @@ export const useCommonStore = defineStore("common", () => {
       Authorization: "Bearer " + localStorage.getItem("token"),
     };
 
-    fetch("/api/live-log", {
+    fetch(resolveApiUrl("/api/live-log"), {
       method: "GET",
       headers,
       signal,

dashboard/src/theme/BlueBusinessDarkTheme.ts

@@ -0,0 +1,141 @@
+import type { ThemeTypes } from "@/types/themeTypes/ThemeType";
+import { DARK_THEME_NAME } from "./constants";
+
+/**
+ * BlueBusiness Dark Theme - Material Design 3 inspired
+ * Seed Color: #005FB0 (Business Blue)
+ *
+ * MD3 Dark Mode Colors:
+ * - Uses tonal surface variants instead of shadows for elevation
+ * - Higher saturation for better contrast in dark mode
+ * - Surface tint color applied to create depth perception
+ */
+const BlueBusinessDarkTheme: ThemeTypes = {
+  name: DARK_THEME_NAME,
+  dark: true,
+  variables: {
+    "border-color": "#A1C9FF",
+    "carousel-control-size": 10,
+  },
+  colors: {
+    // === MD3 Core Colors (Business Blue - Dark Mode) ===
+    primary: "#A1C9FF", // Lighter blue for better contrast on dark
+    "primary-darken-1": "#5BA4FF", // Hover state blue
+    secondary: "#CCC2DC", // Light purple-gray
+    "secondary-darken-1": "#B8B0C8", // Hover state
+    tertiary: "#7DD9CC", // Light teal
+    "tertiary-darken-1": "#5FCBBA", // Hover state
+
+    // === MD3 Semantic Colors (Dark Mode) ===
+    info: "#4DD0E1", // Cyan - informational
+    success: "#69F0AE", // Green - success states
+    warning: "#FFD54F", // Amber - warnings
+    error: "#FFB4AB", // Light red - errors
+
+    // === MD3 Container Colors (Dark Mode - darker containers) ===
+    "primary-container": "#004A8F", // Dark blue container
+    "on-primary-container": "#D8E2FF", // Light text on container
+    "secondary-container": "#3F4354", // Dark gray-blue container
+    "on-secondary-container": "#D8E2EC", // Light text on container
+    "tertiary-container": "#00574A", // Dark teal container
+    "on-tertiary-container": "#9CF1E8", // Light text on container
+    "error-container": "#93000A", // Dark red container
+    "on-error-container": "#FFDAD6", // Light text on container
+
+    // === MD3 Surface Colors (Dark Mode) ===
+    surface: "#141218", // Very dark purple-gray background
+    "on-surface": "#E4E1E6", // Light text on dark surface
+    "surface-variant": "#43444E", // Elevated dark surface
+    "on-surface-variant": "#C4C6D0", // Light text on variant
+    surfaceTint: "#A1C9FF", // Blue tint for elevation
+
+    // === MD3 Outline Colors (Dark Mode) ===
+    outline: "#8E9099", // Borders in dark mode
+    "outline-variant": "#44474F", // Subtle borders
+
+    // === MD3 Inverse Colors (Dark Mode becomes light) ===
+    "inverse-surface": "#E4E1E6", // Light surface
+    "inverse-on-surface": "#303033", // Dark text on light
+    "inverse-primary": "#005FB0", // Dark primary on light
+
+    // === Additional UI Colors ===
+    background: "#141218", // Same as surface
+    accent: "#FFAB91", // Peach accent
+
+    // === Light Variant Colors (inverted for dark mode) ===
+    lightprimary: "#1A3A5C", // Dark blue for subtle backgrounds
+    lightsecondary: "#2A2D38", // Dark gray for subtle backgrounds
+    lightsuccess: "#1B3D1F", // Dark green
+    lighterror: "#4D1F1F", // Dark red
+    lightwarning: "#4D3D00", // Dark amber
+
+    // === Text Colors ===
+    primaryText: "#D8E2FF", // Light text
+    secondaryText: "#C4C6D0", // Muted light text
+
+    // === Border Colors ===
+    borderLight: "#43444E", // Light borders on dark
+    border: "#303033", // Default dark border
+    inputBorder: "#8E9099", // Input borders
+
+    // === Container/Card Colors ===
+    containerBg: "#1A1A1F", // Dark card backgrounds
+    "on-surface-variant-bg": "#1E1E24", // Slightly lighter background
+
+    // === Social Colors ===
+    facebook: "#5388D4",
+    twitter: "#4DA6E8",
+    linkedin: "#2A7BB0",
+
+    // === Gray Scale (Dark Mode - inverted feel) ===
+    gray100: "#303033",
+    gray200: "#424250",
+    gray300: "#5C5C6B",
+    gray400: "#787888",
+    gray500: "#9E9EAB",
+    gray600: "#BDBDCA",
+    gray700: "#D1D1D9",
+    gray800: "#E8E8EC",
+    gray900: "#F5F5F7",
+
+    // === Primary/Secondary Tonal Range (Dark Mode) ===
+    primary50: "#001A41",
+    primary100: "#002D64",
+    primary200: "#004A8F",
+    primary300: "#0068BA",
+    primary400: "#1E88E5",
+    primary500: "#42A5F5",
+    primary600: "#64B5F6",
+    primary700: "#90CAF9",
+    primary800: "#BBDEFB",
+    primary900: "#E3F2FD",
+
+    secondary50: "#1A1B21",
+    secondary100: "#2F303A",
+    secondary200: "#454655",
+    secondary300: "#5C5E70",
+    secondary400: "#74778B",
+    secondary500: "#8E91A6",
+    secondary600: "#ABABC4",
+    secondary700: "#CACAE0",
+    secondary800: "#E0E0EC",
+    secondary900: "#F3F3F8",
+
+    // === Code/Monaco Editor Colors (Dark) ===
+    codeBg: "#1A1B21",
+    preBg: "#121218",
+    code: "#E4E1E6",
+
+    // === Chat Bubble Colors (Dark Mode) ===
+    chatMessageBubble: "#2D3040", // User bubble - darker
+    chatAssistantBubble: "#1E2A3F", // Assistant bubble - dark blue
+
+    // === Component Specific ===
+    mcpCardBg: "#1E1E26",
+
+    // === Overlay ===
+    overlay: "#000000AA",
+  },
+};
+
+export { BlueBusinessDarkTheme };

dashboard/src/theme/BlueBusinessLightTheme.ts

@@ -0,0 +1,143 @@
+import type { ThemeTypes } from "@/types/themeTypes/ThemeType";
+import { LIGHT_THEME_NAME } from "./constants";
+
+/**
+ * BlueBusiness Light Theme - Material Design 3 inspired
+ * Seed Color: #005FB0 (Business Blue)
+ *
+ * MD3 Color Roles:
+ * - Primary: Most prominent color, used for FABs and key actions
+ * - Secondary: Less prominent components like Chips
+ * - Tertiary: Emphasis/balance, used for inputs and decorations
+ * - Surface: Background areas with tonal elevation
+ * - Error: Error/warning states
+ */
+const BlueBusinessLightTheme: ThemeTypes = {
+  name: LIGHT_THEME_NAME,
+  dark: false,
+  variables: {
+    "border-color": "#005FB0",
+    "carousel-control-size": 10,
+  },
+  colors: {
+    // === MD3 Core Colors (Business Blue) ===
+    primary: "#005FB0", // Deep blue - main brand color
+    "primary-darken-1": "#004A8F", // Darker primary for hover states
+    secondary: "#565E71", // Cool gray-blue - secondary components
+    "secondary-darken-1": "#454859", // Darker secondary
+    tertiary: "#006B5B", // Teal - tertiary accent
+    "tertiary-darken-1": "#00574A", // Darker tertiary
+
+    // === MD3 Semantic Colors ===
+    info: "#03C9D7", // Cyan - informational
+    success: "#00C853", // Green - success states
+    warning: "#FFB300", // Amber - warnings
+    error: "#BA1A1A", // Red - errors
+
+    // === MD3 Container Colors (lighter tones) ===
+    "primary-container": "#D8E2FF", // Light blue container
+    "on-primary-container": "#001A41", // Text on primary container
+    "secondary-container": "#D8E2EC", // Light gray-blue container
+    "on-secondary-container": "#111423", // Text on secondary container
+    "tertiary-container": "#9CF1E8", // Light teal container
+    "on-tertiary-container": "#00201D", // Text on tertiary container
+    "error-container": "#FFDAD6", // Light red container
+    "on-error-container": "#410002", // Text on error container
+
+    // === MD3 Surface Colors ===
+    surface: "#FEF7FF", // Page background
+    "on-surface": "#1B1B1F", // Text on surface
+    "surface-variant": "#E1E2EC", // Elevated surface variant
+    "on-surface-variant": "#44474F", // Text on surface variant
+    surfaceTint: "#005FB0", // Tint overlay for elevation
+
+    // === MD3 Outline Colors ===
+    outline: "#74777F", // Borders and dividers
+    "outline-variant": "#C4C6D0", // Subtle borders
+
+    // === MD3 Inverse Colors ===
+    "inverse-surface": "#303033", // Used for dark surfaces in light mode
+    "inverse-on-surface": "#F3F0F4", // Text on inverse surface
+    "inverse-primary": "#A1C9FF", // Primary on dark backgrounds
+
+    // === Additional UI Colors ===
+    background: "#FEF7FF", // Page background (same as surface)
+    accent: "#FFAB91", // Peach accent (Vuetify legacy)
+
+    // === Light Variant Colors ===
+    lightprimary: "#E8F4FD", // Very light blue for subtle backgrounds
+    lightsecondary: "#F0F2F5", // Very light gray for subtle backgrounds
+    lightsuccess: "#E8F5E9", // Very light green
+    lighterror: "#FFEBEE", // Very light red
+    lightwarning: "#FFF8E1", // Very light amber
+
+    // === Text Colors ===
+    primaryText: "#001A41", // Primary text color
+    secondaryText: "#44474F", // Secondary text color
+
+    // === Border Colors ===
+    borderLight: "#E1E2EC", // Light borders
+    border: "#C4C6D0", // Default borders
+    inputBorder: "#74777F", // Input field borders
+
+    // === Container/Card Colors ===
+    containerBg: "#F5F7FF", // Card backgrounds
+    "on-surface-variant-bg": "#F8F9FF", // Slightly tinted background
+
+    // === Social Colors ===
+    facebook: "#4267B2",
+    twitter: "#1DA1F2",
+    linkedin: "#0E76A8",
+
+    // === Gray Scale ===
+    gray100: "#F5F5F5",
+    gray200: "#EEEEEE",
+    gray300: "#E0E0E0",
+    gray400: "#BDBDBD",
+    gray500: "#9E9E9E",
+    gray600: "#757575",
+    gray700: "#616161",
+    gray800: "#424242",
+    gray900: "#212121",
+
+    // === Primary/Secondary Tonal Range ===
+    primary50: "#E3F2FD",
+    primary100: "#BBDEFB",
+    primary200: "#90CAF9",
+    primary300: "#64B5F6",
+    primary400: "#42A5F5",
+    primary500: "#2196F3",
+    primary600: "#1E88E5",
+    primary700: "#1976D2",
+    primary800: "#1565C0",
+    primary900: "#0D47A1",
+
+    secondary50: "#ECEFF1",
+    secondary100: "#CFD8DC",
+    secondary200: "#B0BEC5",
+    secondary300: "#90A4AE",
+    secondary400: "#78909C",
+    secondary500: "#607D8B",
+    secondary600: "#546E7A",
+    secondary700: "#455A64",
+    secondary800: "#37474F",
+    secondary900: "#263238",
+
+    // === Code/Monaco Editor Colors ===
+    codeBg: "#F5F7FF",
+    preBg: "#F8F9FF",
+    code: "#1B1B1F",
+
+    // === Chat Bubble Colors ===
+    chatMessageBubble: "#E8EDF5", // User message bubble
+    chatAssistantBubble: "#D8E2FF", // Assistant message bubble
+
+    // === Component Specific ===
+    mcpCardBg: "#F5F7FF",
+
+    // === Overlay ===
+    overlay: "#FFFFFFDD",
+  },
+};
+
+export { BlueBusinessLightTheme };

dashboard/src/theme/constants.ts

@@ -1,2 +1,2 @@
-export const LIGHT_THEME_NAME = "PurpleTheme";
-export const DARK_THEME_NAME = "PurpleThemeDark";
+export const LIGHT_THEME_NAME = "BlueBusinessTheme";
+export const DARK_THEME_NAME = "BlueBusinessDarkTheme";