Fix wave positioning to match Reltio Wave_root (bottom-anchored, blur on conversation)

- 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

@@ -1,14 +1,45 @@
 services:
-  forge:
+  gateway:
-    image: node:22-slim
+    image: ghcr.io/jwadow/kiro-gateway:latest
-    container_name: forge-console
+    container_name: pm-gateway
-    working_dir: /app
-    command: >
-      sh -c "cd web && npm install --production --silent && node server.js"
-    ports:
-      - "3000:3000"
     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:

openwebui/custom.css

@@ -0,0 +1,256 @@
+/* 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 — matches Reltio Wave_root positioning */
+body::before {
+  content: '';
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('/static/darkWave2.svg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 100% 100%;
+  z-index: -1;
+  pointer-events: none;
+  opacity: 1;
+  transition: opacity var(--transition-duration-m, 225ms) cubic-bezier(0.4, 0, 0.2, 1),
+              filter var(--transition-duration-m, 225ms) cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Wave overlay for dimming (like data-wave-overlay) */
+body::after {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(14, 14, 37, 0.9);
+  z-index: -1;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--transition-duration-m, 225ms) cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Blur wave when conversation is active (matches .layout_root:has([data-conversation=true])) */
+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;
+}