From 536ae7fb37652b8ebf6ccf0bfa5e1e468a99a67e Mon Sep 17 00:00:00 2001 From: misi-bp Date: Thu, 2 Jul 2026 10:37:35 +0200 Subject: [PATCH 1/8] feat: upgrade ouk version, add testing-library/dom to deps Signed-off-by: misi-bp --- .../lungo/frontend/package-lock.json | 89 +++++++++---------- .../coffee_agents/lungo/frontend/package.json | 3 +- 2 files changed, 43 insertions(+), 49 deletions(-) diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/package-lock.json b/coffeeAGNTCY/coffee_agents/lungo/frontend/package-lock.json index 81bc0673..5bd86fe3 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/package-lock.json +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/package-lock.json @@ -12,7 +12,7 @@ "@emotion/styled": "^11.14.0", "@mui/icons-material": "^7.0.1", "@mui/material": "^7.0.1", - "@open-ui-kit/core": "^1.6.0", + "@open-ui-kit/core": "^2.1.0", "@reactflow/node-resizer": "^2.2.14", "@xyflow/react": "^12.6.4", "axios": "^1.16.1", @@ -30,6 +30,7 @@ }, "devDependencies": { "@eslint/js": "^9.25.0", + "@testing-library/dom": "^10.4.1", "@testing-library/jest-dom": "^6.9.1", "@testing-library/react": "^16.3.2", "@types/dompurify": "^3.0.5", @@ -1473,9 +1474,9 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "7.3.9", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.9.tgz", - "integrity": "sha512-MOkOCTfbMJwLshlBCKJ59V2F/uaLYfmKnN76kksj6jlGUVdI25A9Hzs08m+zjBRdLv+sK7Rqdsefe8X7h/6PCw==", + "version": "7.3.11", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.11.tgz", + "integrity": "sha512-a7I/b/nBTdXYz2cOSlEmkQ9WWE1x8FHpqMhFPp+Y1VPFxcOw91G5ELOHARQAGSPy5V+UCgJua6K/1x70bAtQPw==", "license": "MIT", "funding": { "type": "opencollective", @@ -1483,9 +1484,9 @@ } }, "node_modules/@mui/icons-material": { - "version": "7.3.9", - "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.3.9.tgz", - "integrity": "sha512-BT+zPJXss8Hg/oEMRmHl17Q97bPACG4ufFSfGEdhiE96jOyR5Dz1ty7ZWt1fVGR0y1p+sSgEwQT/MNZQmoWDCw==", + "version": "7.3.11", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.3.11.tgz", + "integrity": "sha512-+hz5ilwHZ3djd5es3sCErLioqe/NhZcYTsV/TNXZAMdJdb23F4xzJjqnnZdnurc3S1+ietcssRNqieOhPQLZ7Q==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.28.6" @@ -1498,7 +1499,7 @@ "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@mui/material": "^7.3.9", + "@mui/material": "^7.3.11", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, @@ -1553,16 +1554,16 @@ } }, "node_modules/@mui/material": { - "version": "7.3.9", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.9.tgz", - "integrity": "sha512-I8yO3t4T0y7bvDiR1qhIN6iBWZOTBfVOnmLlM7K6h3dx5YX2a7rnkuXzc2UkZaqhxY9NgTnEbdPlokR1RxCNRQ==", + "version": "7.3.11", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.11.tgz", + "integrity": "sha512-yq8bPc3LxOwKRWpcjRgDkYFmpM6aKlARfESTmOQcvLYFeJwtHte2tw6hJDrb8sk8wcvpDprHEHVaoUU0MslIkw==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.28.6", - "@mui/core-downloads-tracker": "^7.3.9", - "@mui/system": "^7.3.9", + "@mui/core-downloads-tracker": "^7.3.11", + "@mui/system": "^7.3.11", "@mui/types": "^7.4.12", - "@mui/utils": "^7.3.9", + "@mui/utils": "^7.3.11", "@popperjs/core": "^2.11.8", "@types/react-transition-group": "^4.4.12", "clsx": "^2.1.1", @@ -1581,7 +1582,7 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@mui/material-pigment-css": "^7.3.9", + "@mui/material-pigment-css": "^7.3.11", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -1602,13 +1603,13 @@ } }, "node_modules/@mui/private-theming": { - "version": "7.3.9", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.3.9.tgz", - "integrity": "sha512-ErIyRQvsiQEq7Yvcvfw9UDHngaqjMy9P3JDPnRAaKG5qhpl2C4tX/W1S4zJvpu+feihmZJStjIyvnv6KDbIrlw==", + "version": "7.3.11", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.3.11.tgz", + "integrity": "sha512-9B+YKms0fRHbNrqp9tOT/DNbNnU5gyvJ1o3qAGXfq8GmZcbJnE3At9x07Zr/o0pkhzg4aDdwXVqe4+AcgtOCPA==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.28.6", - "@mui/utils": "^7.3.9", + "@mui/utils": "^7.3.11", "prop-types": "^15.8.1" }, "engines": { @@ -1629,9 +1630,9 @@ } }, "node_modules/@mui/styled-engine": { - "version": "7.3.9", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.3.9.tgz", - "integrity": "sha512-JqujWt5bX4okjUPGpVof/7pvgClqh7HvIbsIBIOOlCh2u3wG/Bwp4+E1bc1dXSwkrkp9WUAoNdI5HEC+5HKvMw==", + "version": "7.3.10", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.3.10.tgz", + "integrity": "sha512-WxE9SiF8xskAQqGjsp0poXCkCqsoXFEsSr0HBXfApmGHR+DBnXRp+z46Vsltg4gpPM4Z96DeAQRpeAOnhNg7Ng==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.28.6", @@ -1663,16 +1664,16 @@ } }, "node_modules/@mui/system": { - "version": "7.3.9", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.9.tgz", - "integrity": "sha512-aL1q9am8XpRrSabv9qWf5RHhJICJql34wnrc1nz0MuOglPRYF/liN+c8VqZdTvUn9qg+ZjRVbKf4sJVFfIDtmg==", + "version": "7.3.11", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.11.tgz", + "integrity": "sha512-7izwGWdNawAKpBKcRlx7f2gFnAAjmASBWvMcyX4YYEeLOFsbfGRbUYGInvnAcUeql3rPxI7F9Ft4oY2OLRz44g==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.28.6", - "@mui/private-theming": "^7.3.9", - "@mui/styled-engine": "^7.3.9", + "@mui/private-theming": "^7.3.11", + "@mui/styled-engine": "^7.3.10", "@mui/types": "^7.4.12", - "@mui/utils": "^7.3.9", + "@mui/utils": "^7.3.11", "clsx": "^2.1.1", "csstype": "^3.2.3", "prop-types": "^15.8.1" @@ -1720,9 +1721,9 @@ } }, "node_modules/@mui/utils": { - "version": "7.3.9", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.9.tgz", - "integrity": "sha512-U6SdZaGbfb65fqTsH3V5oJdFj9uYwyLE2WVuNvmbggTSDBb8QHrFsqY8BN3taK9t3yJ8/BPHD/kNvLNyjwM7Yw==", + "version": "7.3.11", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.11.tgz", + "integrity": "sha512-XTjGnifwteg71/ij+0e7Y7d+hwyntMYP5wPoA/g2drdGH+Flkvjwy0OfrVpKBbaOvofq4zU/LIyUZyKgmWu18g==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.28.6", @@ -1836,9 +1837,9 @@ } }, "node_modules/@open-ui-kit/core": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/@open-ui-kit/core/-/core-1.6.0.tgz", - "integrity": "sha512-hGb/U5wmJdFiftjJkKjMPi7h3rc7wruCsxHV+6Iaqr1xoZymfuf99BibhPZRtuTllQr6+QpKvMsfXMou56Dqcg==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@open-ui-kit/core/-/core-2.1.0.tgz", + "integrity": "sha512-ICkJw7aP8aMZEalH4jBZrnQWOodf+PnjMyFRrjdKDltx0VCvn2JaUsfNFrmqk0NSPp7DcOo2SF7XRb4JrBQC6Q==", "license": "Apache-2.0", "dependencies": { "@emotion/react": "^11.14.0", @@ -2418,7 +2419,6 @@ "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", @@ -2493,8 +2493,7 @@ "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@types/babel__core": { "version": "7.20.5", @@ -3380,7 +3379,6 @@ "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -4475,8 +4473,7 @@ "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/dom-helpers": { "version": "5.2.1", @@ -5948,7 +5945,6 @@ "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", "dev": true, "license": "MIT", - "peer": true, "bin": { "lz-string": "bin/bin.js" } @@ -7312,7 +7308,6 @@ "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "ansi-regex": "^5.0.1", "ansi-styles": "^5.0.0", @@ -7328,7 +7323,6 @@ "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=10" }, @@ -7341,8 +7335,7 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/prismjs": { "version": "1.30.0", @@ -7436,9 +7429,9 @@ } }, "node_modules/react-is": { - "version": "19.2.4", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.4.tgz", - "integrity": "sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==", + "version": "19.2.7", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.7.tgz", + "integrity": "sha512-kZFnouyVv7eP/Phmrlo9FK+zcAdriZJvzxXHF1Sl1P377WSGe2G/JxVolhTrB/jeV47lKImhNUsijjHAAbcl/A==", "license": "MIT" }, "node_modules/react-markdown": { diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/package.json b/coffeeAGNTCY/coffee_agents/lungo/frontend/package.json index 25b9080c..a51f6b24 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/package.json +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/package.json @@ -25,7 +25,7 @@ "@emotion/styled": "^11.14.0", "@mui/icons-material": "^7.0.1", "@mui/material": "^7.0.1", - "@open-ui-kit/core": "^1.6.0", + "@open-ui-kit/core": "^2.1.0", "@reactflow/node-resizer": "^2.2.14", "@xyflow/react": "^12.6.4", "axios": "^1.16.1", @@ -43,6 +43,7 @@ }, "devDependencies": { "@eslint/js": "^9.25.0", + "@testing-library/dom": "^10.4.1", "@testing-library/jest-dom": "^6.9.1", "@testing-library/react": "^16.3.2", "@types/dompurify": "^3.0.5", From 8277400e261ca746ef984960186f6c88e0197e92 Mon Sep 17 00:00:00 2001 From: misi-bp Date: Thu, 2 Jul 2026 10:50:25 +0200 Subject: [PATCH 2/8] chore: make files and vars projectname-agnostic Signed-off-by: misi-bp --- .../components/Sidebar/sidebarPanelLayout.ts | 2 +- ...LungoCompactTheme.tsx => CompactTheme.tsx} | 6 ++--- ...ThemeOptions.ts => compactThemeOptions.ts} | 12 ++++----- .../frontend/src/hooks/useAppThemeMode.ts | 25 +++++++++++++++++++ 4 files changed, 35 insertions(+), 10 deletions(-) rename coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/{LungoCompactTheme.tsx => CompactTheme.tsx} (72%) rename coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/{lungoCompactThemeOptions.ts => compactThemeOptions.ts} (89%) create mode 100644 coffeeAGNTCY/coffee_agents/lungo/frontend/src/hooks/useAppThemeMode.ts diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Sidebar/sidebarPanelLayout.ts b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Sidebar/sidebarPanelLayout.ts index e46601f3..ed95dc48 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Sidebar/sidebarPanelLayout.ts +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Sidebar/sidebarPanelLayout.ts @@ -5,7 +5,7 @@ * Resizable app-shell panel ids and size constraints (react-resizable-panels). **/ -export const APP_SHELL_PANEL_GROUP_ID = "lungo-app-shell" +export const APP_SHELL_PANEL_GROUP_ID = "app-shell" export const SIDEBAR_PANEL_ID = "sidebar" export const MAIN_PANEL_ID = "main" diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/LungoCompactTheme.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/CompactTheme.tsx similarity index 72% rename from coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/LungoCompactTheme.tsx rename to coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/CompactTheme.tsx index 1d9c4f86..09bdae16 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/LungoCompactTheme.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/CompactTheme.tsx @@ -13,12 +13,12 @@ import { useTheme, } from "@mui/material/styles" -import { lungoCompactThemeOptions } from "./lungoCompactThemeOptions" +import { compactThemeOptions } from "./compactThemeOptions" -export function LungoCompactTheme({ children }: { children: ReactNode }) { +export function CompactTheme({ children }: { children: ReactNode }) { const oukTheme = useTheme() const theme = useMemo( - () => createTheme(oukTheme, lungoCompactThemeOptions), + () => createTheme(oukTheme, compactThemeOptions), [oukTheme], ) diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/lungoCompactThemeOptions.ts b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/compactThemeOptions.ts similarity index 89% rename from coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/lungoCompactThemeOptions.ts rename to coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/compactThemeOptions.ts index 029ee49a..762ec0bf 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/lungoCompactThemeOptions.ts +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/compactThemeOptions.ts @@ -2,14 +2,14 @@ * Copyright AGNTCY Contributors (https://github.com/agntcy) * SPDX-License-Identifier: Apache-2.0 * - * Compact density layer merged onto the OUK theme (see LungoCompactTheme). + * Compact density layer merged onto the OUK theme (see CompactTheme). * Body scale shifts one OUK tier down (body1: 16px → 14px); spacing unit: 6px. */ import type { ThemeOptions } from "@mui/material/styles" /** 6px per spacing unit (default MUI/OUK is 8px). */ -export const LUNGO_SPACING_UNIT_PX = 6 +export const COMPACT_SPACING_UNIT_PX = 6 type SpacingFn = ((...args: number[]) => string) & { mui: true } @@ -17,7 +17,7 @@ type SpacingFn = ((...args: number[]) => string) & { mui: true } * Must be a spacing factory when merging onto an existing theme — `spacing: 6` * deep-merges as a number and breaks `theme.spacing()` (e.g. MuiToolbar). */ -function createLungoSpacing(unitPx: number): SpacingFn { +function createCompactSpacing(unitPx: number): SpacingFn { const spacing = (...args: number[]) => { const factors = args.length === 0 ? [1] : args return factors.map((factor) => `${unitPx * factor}px`).join(" ") @@ -26,10 +26,10 @@ function createLungoSpacing(unitPx: number): SpacingFn { return spacing } -const lungoSpacing = createLungoSpacing(LUNGO_SPACING_UNIT_PX) +const compactSpacing = createCompactSpacing(COMPACT_SPACING_UNIT_PX) -export const lungoCompactThemeOptions: ThemeOptions = { - spacing: lungoSpacing, +export const compactThemeOptions: ThemeOptions = { + spacing: compactSpacing, typography: { htmlFontSize: 16, diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/hooks/useAppThemeMode.ts b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/hooks/useAppThemeMode.ts new file mode 100644 index 00000000..7dac0fa2 --- /dev/null +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/hooks/useAppThemeMode.ts @@ -0,0 +1,25 @@ +/** + * Copyright AGNTCY Contributors (https://github.com/agntcy) + * SPDX-License-Identifier: Apache-2.0 + * + * App helpers for OUK 2.x theme mode (ThemeMode enum + setMode API). + */ + +import { ThemeMode, useThemeMode } from "@open-ui-kit/core" + +export function useAppThemeMode() { + const { mode, setMode, setTheme } = useThemeMode() + const isDarkMode = mode === ThemeMode.Dark + + return { + mode, + isDarkMode, + setMode, + setTheme, + setIsDarkMode: (dark: boolean) => + setMode(dark ? ThemeMode.Dark : ThemeMode.Light), + toggleTheme: () => setMode(isDarkMode ? ThemeMode.Light : ThemeMode.Dark), + } +} + +export { ThemeMode } From 4799440e54f3230833f5b676b07cd252f3de08ed Mon Sep 17 00:00:00 2001 From: misi-bp Date: Thu, 2 Jul 2026 10:52:28 +0200 Subject: [PATCH 3/8] chore: let files use the new import names Signed-off-by: misi-bp --- .../src/components/Chat/ChatAvatarCircle.tsx | 5 +++-- .../src/components/Navigation/Navigation.tsx | 12 +++--------- .../src/components/icons/ThemeToggleIcon.tsx | 4 ++-- .../frontend/src/contexts/OpenUiKitThemeBridge.tsx | 11 +++++++---- .../frontend/src/contexts/ThemeModePersistence.tsx | 8 ++++---- .../lungo/frontend/src/hooks/useThemeIcon.ts | 4 ++-- 6 files changed, 21 insertions(+), 23 deletions(-) diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Chat/ChatAvatarCircle.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Chat/ChatAvatarCircle.tsx index 7b02d7f5..1207abab 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Chat/ChatAvatarCircle.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Chat/ChatAvatarCircle.tsx @@ -4,9 +4,10 @@ **/ import React from "react" -import { useTheme, useThemeMode, Box } from "@open-ui-kit/core" +import { useTheme, Box } from "@open-ui-kit/core" import AgentIcon from "@/assets/Coffee_Icon.svg" +import { useAppThemeMode } from "@/hooks/useAppThemeMode" export interface ChatAvatarCircleProps { children: React.ReactNode @@ -15,7 +16,7 @@ export interface ChatAvatarCircleProps { export const ChatAvatarCircle: React.FC = ({ children, }) => { - const { isDarkMode } = useThemeMode() + const { isDarkMode } = useAppThemeMode() const theme = useTheme() const avatarBg = isDarkMode ? theme.palette.vars.agentcyDarkBlue diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Navigation/Navigation.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Navigation/Navigation.tsx index a478e358..c06cdef0 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Navigation/Navigation.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Navigation/Navigation.tsx @@ -4,17 +4,11 @@ **/ import React, { useCallback, useState } from "react" -import { - useThemeMode, - Header, - IconButton, - Stack, - Tooltip, - Box, -} from "@open-ui-kit/core" +import { Header, IconButton, Stack, Tooltip, Box } from "@open-ui-kit/core" import HelpOutline from "@mui/icons-material/HelpOutline" import coffeeAgntcyLogo from "@/assets/coffeeAGNTCY_logo.svg" +import { useAppThemeMode } from "@/hooks/useAppThemeMode" import ThemeToggleIcon from "../icons/ThemeToggleIcon" import InfoModal from "./InfoModal" import { @@ -24,7 +18,7 @@ import { const Navigation: React.FC = () => { const [isModalOpen, setIsModalOpen] = useState(false) - const { isDarkMode, toggleTheme } = useThemeMode() + const { isDarkMode, toggleTheme } = useAppThemeMode() const handleHelpClick = useCallback(() => { setIsModalOpen(true) diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/icons/ThemeToggleIcon.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/icons/ThemeToggleIcon.tsx index 304232d0..ebe095e7 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/icons/ThemeToggleIcon.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/icons/ThemeToggleIcon.tsx @@ -4,12 +4,12 @@ **/ import React from "react" -import { useThemeMode } from "@open-ui-kit/core" +import { useAppThemeMode } from "@/hooks/useAppThemeMode" import DarkMode from "@mui/icons-material/DarkMode" import LightMode from "@mui/icons-material/LightMode" const ThemeToggleIcon: React.FC = () => { - const { isDarkMode } = useThemeMode() + const { isDarkMode } = useAppThemeMode() // Moon when app is light (switch to dark); sun when app is dark (switch to light). return isDarkMode ? : diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/OpenUiKitThemeBridge.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/OpenUiKitThemeBridge.tsx index 2d264372..a0935c3f 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/OpenUiKitThemeBridge.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/OpenUiKitThemeBridge.tsx @@ -8,18 +8,21 @@ import { type ReactNode } from "react" import { ThemeProvider as OpenUiKitThemeProvider } from "@open-ui-kit/core" -import { LungoCompactTheme } from "@/contexts/LungoCompactTheme" +import { CompactTheme } from "@/contexts/CompactTheme" import { ThemeModePersistence } from "@/contexts/ThemeModePersistence" +import { ThemeMode } from "@/hooks/useAppThemeMode" import { readStoredIsDarkMode } from "@/utils/themeStorage" export function OpenUiKitThemeBridge({ children }: { children: ReactNode }) { const storedIsDarkMode = readStoredIsDarkMode() return ( - - + + {children} - + ) } diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/ThemeModePersistence.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/ThemeModePersistence.tsx index 4c579e52..cc5c0fe5 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/ThemeModePersistence.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/ThemeModePersistence.tsx @@ -7,12 +7,12 @@ */ import { type ReactNode, useEffect, useLayoutEffect } from "react" -import { useThemeMode } from "@open-ui-kit/core" +import { useAppThemeMode, ThemeMode } from "@/hooks/useAppThemeMode" import { readStoredThemeMode, writeStoredThemeMode } from "@/utils/themeStorage" export function ThemeModePersistence({ children }: { children: ReactNode }) { - const { isDarkMode, setIsDarkMode } = useThemeMode() + const { mode, setIsDarkMode } = useAppThemeMode() useLayoutEffect(() => { const storedMode = readStoredThemeMode() @@ -22,8 +22,8 @@ export function ThemeModePersistence({ children }: { children: ReactNode }) { }, [setIsDarkMode]) useEffect(() => { - writeStoredThemeMode(isDarkMode ? "dark" : "light") - }, [isDarkMode]) + writeStoredThemeMode(mode === ThemeMode.Dark ? "dark" : "light") + }, [mode]) return children } diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/hooks/useThemeIcon.ts b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/hooks/useThemeIcon.ts index 621f47c6..c8647e3e 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/hooks/useThemeIcon.ts +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/hooks/useThemeIcon.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 **/ -import { useThemeMode } from "@open-ui-kit/core" +import { useAppThemeMode } from "@/hooks/useAppThemeMode" export interface ThemeIconMap { light: string @@ -15,6 +15,6 @@ export interface ThemeIconMap { * @returns */ export const useThemeIcon = (iconMap: ThemeIconMap): string => { - const { isDarkMode } = useThemeMode() + const { isDarkMode } = useAppThemeMode() return isDarkMode ? iconMap.dark : iconMap.light } From 7957071de1da14b67ca8a415e71963468cc46b95 Mon Sep 17 00:00:00 2001 From: misi-bp Date: Thu, 2 Jul 2026 10:56:55 +0200 Subject: [PATCH 4/8] fix: remove redundant props Signed-off-by: misi-bp --- .../frontend/src/components/Chat/feeds/FeedCollapseButton.tsx | 1 - .../lungo/frontend/src/components/Sidebar/SidebarItem.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Chat/feeds/FeedCollapseButton.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Chat/feeds/FeedCollapseButton.tsx index 49d110c4..6f7f3847 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Chat/feeds/FeedCollapseButton.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Chat/feeds/FeedCollapseButton.tsx @@ -46,7 +46,6 @@ export function FeedCollapseButton({ return ( = ({ > Date: Thu, 2 Jul 2026 11:01:07 +0200 Subject: [PATCH 5/8] fix: dropdown option is not exported anymore from OUK Signed-off-by: misi-bp --- .../Chat/prompts/SuggestedPromptsDropdown.tsx | 10 ++-------- .../Chat/prompts/suggestedPromptsUtils.ts | 5 ++--- .../lungo/frontend/src/types/dropdownOption.ts | 16 ++++++++++++++++ 3 files changed, 20 insertions(+), 11 deletions(-) create mode 100644 coffeeAGNTCY/coffee_agents/lungo/frontend/src/types/dropdownOption.ts diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Chat/prompts/SuggestedPromptsDropdown.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Chat/prompts/SuggestedPromptsDropdown.tsx index 516ada1f..d550fff0 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Chat/prompts/SuggestedPromptsDropdown.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Chat/prompts/SuggestedPromptsDropdown.tsx @@ -9,14 +9,8 @@ import React, { useCallback, useMemo, useState } from "react" import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown" import type { SxProps, Theme } from "@mui/material/styles" import type { SystemStyleObject } from "@mui/system" -import { - Box, - Button, - Menu, - MenuItem, - Tooltip, - type DropdownOption, -} from "@open-ui-kit/core" +import { Box, Button, Menu, MenuItem, Tooltip } from "@open-ui-kit/core" +import type { DropdownOption } from "@/types/dropdownOption" import { useGraphCanvasLayout } from "@/contexts/graphCanvasLayout" import { computePromptsMenuMaxWidth, diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Chat/prompts/suggestedPromptsUtils.ts b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Chat/prompts/suggestedPromptsUtils.ts index 2d70fac6..20cd8b81 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Chat/prompts/suggestedPromptsUtils.ts +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Chat/prompts/suggestedPromptsUtils.ts @@ -5,9 +5,8 @@ import type { ReactNode } from "react" import type { MenuProps } from "@mui/material/Menu" -import type { ButtonProps } from "@mui/material/Button" -import type { TooltipProps } from "@open-ui-kit/core" -import type { DropdownOption } from "@open-ui-kit/core" +import type { ButtonProps, TooltipProps } from "@open-ui-kit/core" +import type { DropdownOption } from "@/types/dropdownOption" import type { GraphCanvasLayoutMetrics } from "@/contexts/graphCanvasLayout" import { getDiscoveryAppApiUrl, diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/types/dropdownOption.ts b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/types/dropdownOption.ts new file mode 100644 index 00000000..b9e5f0e7 --- /dev/null +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/types/dropdownOption.ts @@ -0,0 +1,16 @@ +/** + * Copyright AGNTCY Contributors (https://github.com/agntcy) + * SPDX-License-Identifier: Apache-2.0 + * + * Local dropdown option shape (formerly exported as DropdownOption from OUK 1.x). + */ + +import type { ReactNode } from "react" +import type { TooltipProps } from "@open-ui-kit/core" + +export interface DropdownOption { + label: string + value: T + customElement?: ReactNode + menuItemTooltipProps?: Partial +} From c522fe044861805ba10951fe18b5cfff5b01be15 Mon Sep 17 00:00:00 2001 From: misi-bp Date: Thu, 2 Jul 2026 11:02:19 +0200 Subject: [PATCH 6/8] fix: OUK exports dialog components instead of modal components now Signed-off-by: misi-bp --- .../Graph/Directory/OasfRecordModal.tsx | 18 +++++++++--------- .../Graph/Identity/BadgeDetailsModal.tsx | 18 +++++++++--------- .../Graph/Identity/PolicyDetailsModal.tsx | 18 +++++++++--------- .../src/components/Navigation/InfoModal.tsx | 6 +++--- 4 files changed, 30 insertions(+), 30 deletions(-) diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Directory/OasfRecordModal.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Directory/OasfRecordModal.tsx index 2a1b0b94..f387ea80 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Directory/OasfRecordModal.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Directory/OasfRecordModal.tsx @@ -9,9 +9,9 @@ import { Button, IconButton, Link, - Modal, - ModalContent, - ModalTitle, + Dialog, + DialogContent, + DialogTitle, Stack, Typography, } from "@open-ui-kit/core" @@ -101,14 +101,14 @@ const OasfRecordModal: React.FC = ({ ) return ( - - + Directory Information = ({ > - + - + {isDirectoryNode ? ( @@ -250,8 +250,8 @@ const OasfRecordModal: React.FC = ({ No data available )} - - + + ) } diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Identity/BadgeDetailsModal.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Identity/BadgeDetailsModal.tsx index 6a4ce388..5031a3d5 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Identity/BadgeDetailsModal.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Identity/BadgeDetailsModal.tsx @@ -8,9 +8,9 @@ import { Box, Button, IconButton, - Modal, - ModalContent, - ModalTitle, + Dialog, + DialogContent, + DialogTitle, Stack, Typography, } from "@open-ui-kit/core" @@ -68,14 +68,14 @@ const BadgeDetailsModal: React.FC = ({ }, [fetchBadgeDetailsData, isOpen, nodeName, nodeData]) return ( - - + {nodeName} Badge Details = ({ > - + - + {loading && !badgeData ? ( = ({ No data available )} - - + + ) } diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Identity/PolicyDetailsModal.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Identity/PolicyDetailsModal.tsx index af39a13d..63fda0a0 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Identity/PolicyDetailsModal.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Identity/PolicyDetailsModal.tsx @@ -8,9 +8,9 @@ import { Box, Button, IconButton, - Modal, - ModalContent, - ModalTitle, + Dialog, + DialogContent, + DialogTitle, Stack, Typography, } from "@open-ui-kit/core" @@ -69,14 +69,14 @@ const PolicyDetailsModal: React.FC = ({ }, [fetchPolicyDetailsData, isOpen, nodeName, nodeData]) return ( - - + {nodeName} Policy Details = ({ > - + - + {loading && !policyData ? ( = ({ No data available )} - - + + ) } diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Navigation/InfoModal.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Navigation/InfoModal.tsx index 30249ddf..3ca70550 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Navigation/InfoModal.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Navigation/InfoModal.tsx @@ -7,8 +7,8 @@ import React, { useEffect } from "react" import DialogTitle from "@mui/material/DialogTitle" import { Dialog, + DialogContent, IconButton, - ModalContent, Stack, Typography, } from "@open-ui-kit/core" @@ -84,7 +84,7 @@ const InfoModal: React.FC = ({ isOpen, onClose }) => { - + Build and Release Information @@ -150,7 +150,7 @@ const InfoModal: React.FC = ({ isOpen, onClose }) => { - + ) } From d928ebeac1481fc79a69e456c05a026f12d57482 Mon Sep 17 00:00:00 2001 From: misi-bp Date: Thu, 2 Jul 2026 11:03:24 +0200 Subject: [PATCH 7/8] fix: separate component from constants to make hot reloading more effective Signed-off-by: misi-bp --- .../MainArea/Graph/Elements/CustomNode.tsx | 3 +- .../MainArea/Graph/Elements/TransportRail.tsx | 52 ++---------------- .../Graph/Elements/transportRailBackground.ts | 55 +++++++++++++++++++ 3 files changed, 62 insertions(+), 48 deletions(-) create mode 100644 coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Elements/transportRailBackground.ts diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Elements/CustomNode.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Elements/CustomNode.tsx index 46622fd2..f7ffdd1a 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Elements/CustomNode.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Elements/CustomNode.tsx @@ -34,7 +34,8 @@ import { CUSTOM_NODE_WIDTH, } from "@/utils/graphNodeDimensions" import { CustomNodeData, ExtraHandle } from "./types" -import TransportRail, { railBackgroundImage } from "./TransportRail" +import TransportRail from "./TransportRail" +import { railBackgroundImage } from "./transportRailBackground" const POSITION_MAP: Record = { top: Position.Top, diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Elements/TransportRail.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Elements/TransportRail.tsx index 2be60bfd..a0c7b9c9 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Elements/TransportRail.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Elements/TransportRail.tsx @@ -5,55 +5,13 @@ import React from "react" import { alpha } from "@mui/material/styles" -import type { Theme } from "@mui/material/styles" import { Box, Typography, useTheme } from "@open-ui-kit/core" -import { transportMetaFor, type AgentTransport } from "./transportMeta" - -function normalizeTransportName(value: string | undefined): string { - return value?.trim().toLowerCase() ?? "" -} - -function getRailThemeColors(theme: Theme) { - const highlight = theme.palette.primary.main - const highlightedText = theme.palette.primary.contrastText - const resting = - theme.palette.mode === "dark" - ? theme.palette.background.paper - : theme.palette.common.white - const restingText = theme.palette.text.primary - const separator = alpha( - theme.palette.primary.main, - theme.palette.mode === "dark" ? 0.7 : 0.55, - ) - - return { highlight, highlightedText, resting, restingText, separator } -} -export function railBackgroundImage( - transports: AgentTransport[] | undefined, - activeTransport: string | undefined, - theme: Theme, -): string | undefined { - if (!transports || transports.length === 0) return undefined - - const normalizedActive = normalizeTransportName(activeTransport) - const railColors = getRailThemeColors(theme) - const stops: string[] = [] - - transports.forEach((transport, index) => { - const normalizedName = normalizeTransportName(transport.name) - const isActive = - normalizedActive.length > 0 && normalizedName === normalizedActive - const isPreferred = normalizedActive.length === 0 && transport.preferred - const color = - isActive || isPreferred ? railColors.highlight : railColors.resting - const start = (index / transports.length) * 100 - const end = ((index + 1) / transports.length) * 100 - stops.push(`${color} ${start}%`, `${color} ${end}%`) - }) - - return `linear-gradient(to bottom, ${stops.join(", ")})` -} +import { + getRailThemeColors, + normalizeTransportName, +} from "./transportRailBackground" +import { transportMetaFor, type AgentTransport } from "./transportMeta" const TransportRail: React.FC<{ transports: AgentTransport[] diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Elements/transportRailBackground.ts b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Elements/transportRailBackground.ts new file mode 100644 index 00000000..238cb959 --- /dev/null +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Elements/transportRailBackground.ts @@ -0,0 +1,55 @@ +/** + * Copyright AGNTCY Contributors (https://github.com/agntcy) + * SPDX-License-Identifier: Apache-2.0 + **/ + +import { alpha } from "@mui/material/styles" +import type { Theme } from "@mui/material/styles" + +import type { AgentTransport } from "./transportMeta" + +export function normalizeTransportName(value: string | undefined): string { + return value?.trim().toLowerCase() ?? "" +} + +export function getRailThemeColors(theme: Theme) { + const highlight = theme.palette.primary.main + const highlightedText = theme.palette.primary.contrastText + const resting = + theme.palette.mode === "dark" + ? theme.palette.background.paper + : theme.palette.common.white + const restingText = theme.palette.text.primary + const separator = alpha( + theme.palette.primary.main, + theme.palette.mode === "dark" ? 0.7 : 0.55, + ) + + return { highlight, highlightedText, resting, restingText, separator } +} + +export function railBackgroundImage( + transports: AgentTransport[] | undefined, + activeTransport: string | undefined, + theme: Theme, +): string | undefined { + if (!transports || transports.length === 0) return undefined + + const normalizedActive = normalizeTransportName(activeTransport) + const railColors = getRailThemeColors(theme) + const stops: string[] = [] + + transports.forEach((transport, index) => { + const normalizedName = normalizeTransportName(transport.name) + const isActive = + normalizedActive.length > 0 && normalizedName === normalizedActive + const isPreferred = normalizedActive.length === 0 && transport.preferred + const color = + isActive || isPreferred ? railColors.highlight : railColors.resting + const start = (index / transports.length) * 100 + const end = ((index + 1) / transports.length) * 100 + stops.push(`${color} ${start}%`, `${color} ${end}%`) + }) + + return `linear-gradient(to bottom, ${stops.join(", ")})` +} From 85474116d43152f253d7290d7d4281b9aff31cc9 Mon Sep 17 00:00:00 2001 From: misi-bp Date: Thu, 2 Jul 2026 11:03:45 +0200 Subject: [PATCH 8/8] fix: type Signed-off-by: misi-bp --- .../lungo/frontend/src/components/Sidebar/SidebarDropdown.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Sidebar/SidebarDropdown.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Sidebar/SidebarDropdown.tsx index afd62330..cf1f1925 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Sidebar/SidebarDropdown.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Sidebar/SidebarDropdown.tsx @@ -39,7 +39,7 @@ const SidebarDropdown: React.FC = ({ const panelId = React.useId() const toggleLabel = `${isExpanded ? "Collapse" : "Expand"} ${title}` - const handleToggle = (event: React.MouseEvent) => { + const handleToggle = (event: React.MouseEvent) => { event.stopPropagation() onToggle() } @@ -58,7 +58,6 @@ const SidebarDropdown: React.FC = ({ >