Bump streamlit from 1.48.1 to 1.50.0 in /libs/idun_agent_engine

services/idun_agent_web/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*storybook.log
+storybook-static
+.vercel

services/idun_agent_web/.prettierignore

@@ -0,0 +1,9 @@
+
+
+# Ignore node_modules
+node_modules/
+
+# Ignore build outputs
+dist/
+build/
+**/*.hbs

services/idun_agent_web/.prettierrc

@@ -0,0 +1,7 @@
+{
+    "singleQuote": true,
+    "tabWidth": 4,
+    "excludeFiles": ["*.hbs", "**/*.hbs"],
+    "endOfLine": "lf"
+
+}

services/idun_agent_web/.storybook/main.ts

@@ -0,0 +1,47 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    addons: [
+        '@chromatic-com/storybook',
+        '@storybook/addon-docs',
+        '@storybook/addon-onboarding',
+        '@storybook/addon-a11y',
+        '@storybook/addon-vitest',
+        '@storybook/addon-themes',
+    ],
+    framework: {
+        name: '@storybook/react-vite',
+        options: {},
+    },
+
+    // 👇 Ajoute ceci
+    viteFinal: async (viteConfig) => {
+        const ngrokHost = process.env.NGROK_DOMAIN; // ex: 821330a8908f.ngrok-free.app
+
+        viteConfig.server = {
+            ...(viteConfig.server ?? {}),
+            // Autorise ton domaine externe
+            allowedHosts: ['.ngrok-free.app'],
+            // Écoute toutes interfaces (utile en tunnel)
+            host: true,
+            // HMR fiable derrière ngrok (HTTPS + WSS)
+            hmr: {
+                ...(viteConfig.server &&
+                typeof viteConfig.server.hmr === 'object' &&
+                viteConfig.server.hmr !== null
+                    ? viteConfig.server.hmr
+                    : {}),
+                protocol: 'wss',
+                clientPort: 443,
+                host: ngrokHost, // optionnel mais aide si HMR hésite
+            },
+            // (optionnel) force l’origin si besoin
+            // origin: ngrokHost ? `https://${ngrokHost}` : undefined,
+        };
+
+        return viteConfig;
+    },
+};
+
+export default config;

services/idun_agent_web/.storybook/preview.tsx

@@ -0,0 +1,68 @@
+import type { Preview } from '@storybook/react-vite';
+import GlobalStyles from '../src/global-styles';
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+import '../src/i18n'; // Import i18n configuration
+import { I18nextProvider } from 'react-i18next';
+import i18n from '../src/i18n';
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+
+        // Configuration i18n pour Storybook
+        i18n: {
+            locales: {
+                fr: { title: 'Français', left: '🇫🇷' },
+                en: { title: 'English', left: '🇺🇸' },
+            },
+            defaultLocale: 'fr',
+        },
+
+        a11y: {
+            // 'todo' - show a11y violations in the test UI only
+            // 'error' - fail CI on a11y violations
+            // 'off' - skip a11y checks entirely
+            test: 'todo',
+        },
+
+    },
+    decorators: [
+        withThemeFromJSXProvider({ GlobalStyles }),
+        // Décorateur i18n pour Storybook
+        (Story, context) => {
+            const { locale } = context.globals;
+
+            // Change la langue quand l'utilisateur change dans Storybook
+            if (locale && locale !== i18n.language) {
+                i18n.changeLanguage(locale);
+            }
+
+            return (
+                <I18nextProvider i18n={i18n}>
+                    <Story />
+                </I18nextProvider>
+            );
+        },
+    ],
+    globalTypes: {
+        locale: {
+            description: 'Internationalization locale',
+            defaultValue: 'fr',
+            toolbar: {
+                icon: 'globe',
+                items: [
+                    { value: 'fr', title: 'Français', left: '🇫🇷' },
+                    { value: 'en', title: 'English', left: '🇺🇸' },
+                ],
+                showName: true,
+            },
+        },
+    },
+};
+
+export default preview;

services/idun_agent_web/.storybook/vitest.setup.ts

@@ -0,0 +1,10 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);
+

services/idun_agent_web/Dockerfile

@@ -0,0 +1,17 @@
+FROM node:lts-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+RUN npm i -g serve
+
+COPY . .
+
+RUN npm run build
+
+EXPOSE 3000
+
+CMD ["serve", "-s", "dist"]

services/idun_agent_web/README.md

@@ -0,0 +1,140 @@
+# Idun Engine — Front-end
+
+Short documentation and usage guide for the front-end application.
+
+## Overview
+
+The front-end is a React + TypeScript SPA (Vite) for Idun Engine. It provides the admin interface to manage agents, connected applications, settings, and observability. The project uses reusable components, application hooks/providers, and Storybook for UI development.
+
+## Tech Stack
+
+-   React + TypeScript
+-   Vite (dev server / build)
+-   styled-components (styles)
+-   react-i18next (i18n)
+-   Storybook (UI component sandbox)
+-   Mockoon (API mocks provided in `mockoon/`)
+
+## Key Structure
+
+-   `src/main.tsx` — application entry point
+-   `src/pages/` — application pages (routes)
+-   `src/layouts/` — layouts (header, side-bar, data-board, etc.)
+-   `src/components/` — reusable components
+-   `src/hooks/` — hooks and providers (Loader, Workspace, AgentFile, SettingsPage...)
+-   `src/types/` — TypeScript definitions
+-   `src/i18n/` — i18n configuration and locale files
+-   `src/templates` — component template files
+-   `mockoon/` — Mockoon configuration to simulate the local API
+
+## Prerequisites
+
+Before you begin, ensure you have the following installed on your system:
+
+-   **Node.js**: We recommend using the latest LTS version (e.g., `v18.x` or `v20.x`). You can download it from [nodejs.org](https://nodejs.org/).
+-   **npm**: This is the Node Package Manager and is included with Node.js. The project is configured to use `npm`, but you can also use `pnpm` or `yarn`.
+-   **Docker**: (Optional) If you prefer to run the application in a containerized environment. You can download it from [docker.com](https://www.docker.com/products/docker-desktop).
+
+## Commands (PowerShell)
+
+Install dependencies:
+
+```powershell
+npm install
+```
+
+Start the development server (Vite):
+
+```powershell
+npm run dev
+```
+
+Build for production:
+
+```powershell
+npm run build
+```
+
+Start Storybook:
+
+```powershell
+npm run storybook
+```
+
+Lint / typecheck (if scripts are present):
+
+```powershell
+npm run lint
+npm run typecheck
+```
+
+> Replace `npm` with `pnpm` or `yarn` if you use another package manager.
+
+## Test Configuration: Using Mockoon
+
+For test configuration, we use [Mockoon](https://mockoon.com/), a tool to simulate a local back-end.
+
+### Installing Mockoon
+
+You can download Mockoon here: [https://mockoon.com/download/](https://mockoon.com/download/)
+
+### Importing and Launching the Configuration
+
+1. Open Mockoon after installation.
+2. Import the configuration file `idun-engine-mockoon-config.json` located in the `services/idun_agent_web/mockoon/` folder.
+3. Start the mock server in Mockoon to launch the fake back-end.
+
+This allows you to simulate back-end responses during front-end development or testing.
+
+## Storybook — Practical Notes
+
+-   Many components use hooks that require providers (Router, i18n, Loader, Workspace, AgentFile, SettingPage). If a story fails with `useX must be used within a Provider`, provide the provider as a local decorator (`.stories.tsx`) or global (`.storybook/preview.tsx`).
+-   To avoid network calls in Storybook, mock `fetch` in the story or provide a wrapper that intercepts `window.fetch`.
+-   Lazy components should be rendered with a `Suspense` fallback in stories to avoid rendering errors.
+
+## i18n
+
+-   Initialization: `src/i18n/index.ts`.
+-   Locales: `src/i18n/locales/{fr,en,es,de,ru,pt,it}.json`.
+-   To add a language: create the JSON file, import and register it in `src/i18n/index.ts` (resources + supportedLngs).
+
+## Mocks / API
+
+-   The front-end calls `http://localhost:4001/api/...`. You can start Mockoon with the configuration provided in `mockoon/idun-engine-mockoon-config.json`.
+-   In Storybook, wrappers are often used to intercept `window.fetch` and return test data.
+
+## Common Errors & Quick Fixes
+
+-   `useX must be used within a Provider` — wrap the story/app with the corresponding provider (see `src/hooks/*` for the exact name).
+-   Storybook + lazy — add a `Suspense` fallback around the story.
+-   Typescript errors — check that values respect unions in `src/types/*` (e.g. `AgentStatus`, `FrameworkType`).
+
+## Contributions & Best Practices
+
+-   Respect TypeScript types.
+-   Add/complete stories for each new component.
+-   Prefer centralizing common providers in `.storybook/preview.tsx` if several stories need them.
+
+-   Use Plop to generate files (components/pages/layouts/hook): run `npm run plop` and follow the prompt.
+    To modify the templates used by Plop, edit the files in `src/templates/*.hbs`.
+
+    Files generated by Plop are automatically sorted by category (e.g. `src/components/...`, `src/pages/...`, `src/layouts/...`, `src/hooks/...`). When a `page` is created via Plop, the generator also modifies `src/App.tsx` to automatically import the page and inject the corresponding route (check the markers `// PLOP_IMPORT` and `/* PLOP_ROUTE */` in `src/App.tsx`).
+
+## Files to Check First
+
+-   `src/main.tsx` — provider mounting in production.
+-   `src/i18n/index.ts` — i18n configuration.
+-   `src/hooks/` — list of providers to consider for stories.
+
+## Recommended Next Improvements
+
+-   Centralize Storybook decorators in `.storybook/preview.tsx`.
+-   Add more complete mock fixtures for Storybook.
+-   Complete the `ru` / `pt` translation files with real translations.
+
+---
+
+If you want, I can:
+
+-   automatically add a `.storybook/preview.tsx` with global providers, or
+-   enrich the README (story examples, commit conventions, etc.).

services/idun_agent_web/eslint.config.js

@@ -0,0 +1,26 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { globalIgnores } from 'eslint/config'
+
+export default tseslint.config([
+  globalIgnores(['dist', '**/*.hbs']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+], storybook.configs["flat/recommended"]);