From cd9f0eb8b10ac4bfa7fbf3dac2deee0c9ca2f515 Mon Sep 17 00:00:00 2001 From: Max Mayfield Date: Fri, 27 Feb 2026 23:38:14 +0000 Subject: [PATCH] Add Reltio AgentFlow theme + update compose for 3-service architecture - custom.css: Reltio dark theme (purple-navy palette, wave bg, frosted glass sidebar, gradient buttons) - darkWave2.svg: Wave background asset from reltio.ai - docker-compose.yml: gateway + mcpo + webui with CSS/SVG volume mounts --- docker-compose.yml | 49 +- openwebui/custom.css | 239 ++++++++ openwebui/darkWave2.svg | 1202 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 1481 insertions(+), 9 deletions(-) create mode 100644 openwebui/custom.css create mode 100644 openwebui/darkWave2.svg diff --git a/docker-compose.yml b/docker-compose.yml index e23cf82..6e27c81 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,14 +1,45 @@ services: - forge: - image: node:22-slim - container_name: forge-console - working_dir: /app - command: > - sh -c "cd web && npm install --production --silent && node server.js" - ports: - - "3000:3000" + gateway: + image: ghcr.io/jwadow/kiro-gateway:latest + container_name: pm-gateway env_file: - .env + environment: + - DEBUG_MODE=${DEBUG_MODE:-} + ports: + - "8000:8000" volumes: - - .:/app + - "${KIRO_CLI_DATA:-~/.local/share/kiro-cli}:/home/kiro/.local/share/kiro-cli:ro" restart: unless-stopped + + mcpo: + image: ghcr.io/open-webui/mcpo:latest + container_name: pm-mcpo + command: --config /config/mcporter.json --port 3001 + ports: + - "3001:3001" + volumes: + - ./config/mcporter.json:/config/mcporter.json:ro + restart: unless-stopped + + webui: + image: ghcr.io/open-webui/open-webui:main + container_name: pm-webui + ports: + - "3000:8080" + env_file: + - .env + environment: + - OPENAI_API_BASE_URL=http://gateway:8000/v1 + - OPENAI_API_KEY=${OPENAI_API_KEY:-sk-none} + volumes: + - webui-data:/app/backend/data + - ./openwebui/custom.css:/app/build/static/custom.css:ro + - ./openwebui/darkWave2.svg:/app/build/static/darkWave2.svg:ro + depends_on: + - gateway + - mcpo + restart: unless-stopped + +volumes: + webui-data: diff --git a/openwebui/custom.css b/openwebui/custom.css new file mode 100644 index 0000000..818b7f1 --- /dev/null +++ b/openwebui/custom.css @@ -0,0 +1,239 @@ +/* Reltio AgentFlow Theme for Open WebUI */ +/* Mount: ./openwebui/custom.css:/app/build/static/custom.css:ro */ + +/* Import Roboto Flex */ +@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@100..1000&display=swap'); + +:root { + /* Reltio dark theme tokens */ + --reltio-primary: #66f; + --reltio-primary-hover: #6666ff; + --reltio-accent: #0af; + --reltio-secondary: #9143ef; + --reltio-bg: #000000; + --reltio-bg-secondary: #303050; + --reltio-bg-tertiary: #0e0e25e6; + --reltio-surface: #0e0e25; + --reltio-surface-high: #262640; + --reltio-surface-dialog: #434370; + --reltio-border: #262640; + --reltio-border-secondary: #505079; + --reltio-outline: #434370; + --reltio-text: #e3e3f2; + --reltio-text-secondary: #7070a9; + --reltio-text-tertiary: #babade; + --reltio-text-support: #8d8dc8; + --reltio-scrim: #0e0e25b2; + --reltio-selected: #b2b2ff4d; + --reltio-gradient: linear-gradient(170deg, #0af 18.96%, #00c 81.29%); + --reltio-gradient-1: linear-gradient(172deg, #0af 50%, #00c 100%); +} + +/* Font */ +body { + font-family: 'Roboto Flex', sans-serif !important; + font-size: 14px !important; + -webkit-font-smoothing: antialiased !important; + -moz-osx-font-smoothing: grayscale !important; +} + +/* App background */ +body, .app, main, #app { + background-color: var(--reltio-bg) !important; + color: var(--reltio-text) !important; +} + +/* Wave background via pseudo-element for blur control */ +body::before { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url('/static/darkWave2.svg'); + background-repeat: no-repeat; + background-position: center bottom; + background-size: cover; + z-index: -1; + opacity: 1; + transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out; +} + +/* Blur wave when conversation is active */ +body:has(.messages-container)::before, +body:has([data-message-role])::before, +body:has(.chat-messages)::before { + opacity: 0.4; + filter: blur(40px); +} + +/* Transparent layers so wave shows through */ +.max-w-full, [data-chat], main, .app { + background-color: transparent !important; +} + +/* Sidebar — frosted glass */ +#sidebar, [data-sidebar], .sidebar { + background-color: var(--reltio-bg-tertiary) !important; + border-right: 1px solid var(--reltio-border) !important; + -webkit-backdrop-filter: blur(12px) !important; + backdrop-filter: blur(12px) !important; +} + +#sidebar button:hover, +#sidebar a:hover, +.sidebar button:hover { + background-color: var(--reltio-selected) !important; +} + +/* User messages */ +.user-message, [data-message-role="user"] .message-content { + background-color: var(--reltio-surface-high) !important; + border-radius: 12px !important; + color: var(--reltio-text) !important; +} + +/* AI messages */ +.assistant-message, [data-message-role="assistant"] .message-content { + color: var(--reltio-text-tertiary) !important; +} + +/* Input area */ +textarea, .chat-input, [contenteditable] { + background-color: var(--reltio-surface) !important; + border: 1px solid var(--reltio-outline) !important; + border-radius: 12px !important; + color: var(--reltio-text) !important; +} + +textarea:focus, [contenteditable]:focus { + border-color: var(--reltio-primary) !important; + box-shadow: 0 0 0 2px rgba(102, 102, 255, 0.2) !important; + outline: none !important; +} + +/* Send button — gradient */ +#send-message-button, +button[type="submit"] { + background: var(--reltio-gradient) !important; + color: #fff !important; + border-radius: 10px !important; + border: none !important; +} + +#send-message-button:hover, +button[type="submit"]:hover { + background: var(--reltio-gradient-1) !important; +} + +/* Primary action buttons */ +.bg-black, .dark\:bg-white { + background: var(--reltio-gradient) !important; + color: #fff !important; +} + +.bg-black:hover, .dark\:bg-white:hover { + background: var(--reltio-gradient-1) !important; +} + +/* Suggestion chips */ +button.flex.items-center, +.suggestion-chip, +[data-suggestion] { + background-color: var(--reltio-surface) !important; + border: 1px solid var(--reltio-outline) !important; + border-radius: 10px !important; + color: var(--reltio-text-secondary) !important; + transition: border-color 0.225s cubic-bezier(0.4, 0, 0.2, 1), + color 0.225s cubic-bezier(0.4, 0, 0.2, 1) !important; +} + +button.flex.items-center:hover, +.suggestion-chip:hover, +[data-suggestion]:hover { + border-color: var(--reltio-primary) !important; + color: var(--reltio-text) !important; + background-color: var(--reltio-selected) !important; +} + +/* Toggle switches */ +[role="switch"][aria-checked="true"] { + background-color: var(--reltio-primary) !important; +} + +/* Links */ +a { + color: var(--reltio-accent) !important; +} +a:hover { + color: var(--reltio-primary) !important; +} + +/* Code blocks */ +pre, code { + background-color: var(--reltio-surface) !important; + border: 1px solid var(--reltio-border) !important; + border-radius: 8px !important; +} + +/* Tooltips */ +.tippy-content, .tippy-box { + background-color: var(--reltio-surface-dialog) !important; + border-color: var(--reltio-outline) !important; + color: var(--reltio-text) !important; +} + +/* Dropdowns / menus */ +[role="menu"], [role="listbox"], .dropdown { + background-color: var(--reltio-surface) !important; + border: 1px solid var(--reltio-border) !important; + border-radius: 8px !important; +} + +/* Modal / dialog — frosted glass like Reltio */ +[role="dialog"] { + background-color: var(--reltio-surface) !important; + border: 1px solid var(--reltio-border) !important; +} + +/* Dialog backdrop */ +.modal-backdrop, [data-dialog-backdrop] { + background-color: rgba(14, 14, 37, 0.7) !important; + -webkit-backdrop-filter: blur(3px) !important; + backdrop-filter: blur(3px) !important; +} + +/* Voice mode button */ +[aria-label="Voice mode"] { + background: var(--reltio-gradient) !important; +} + +/* Table styling */ +th { + background-color: var(--reltio-surface-dialog) !important; +} +tr:hover { + background-color: var(--reltio-surface-high) !important; +} + +/* Scrollbar */ +::-webkit-scrollbar { + width: 6px; + height: 6px; +} +::-webkit-scrollbar-track { + background: transparent; +} +::-webkit-scrollbar-thumb { + background: var(--reltio-border); + border-radius: 3px; +} +::-webkit-scrollbar-thumb:hover { + background: var(--reltio-text-secondary); +} + +/* Selection highlight */ +::selection { + background-color: var(--reltio-selected) !important; +} diff --git a/openwebui/darkWave2.svg b/openwebui/darkWave2.svg new file mode 100644 index 0000000..af6ad2e --- /dev/null +++ b/openwebui/darkWave2.svg @@ -0,0 +1,1202 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 +
 + + + + + + + +
 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +