Dev < UI

.github/workflows/create-release-n-publish.yml

@@ -73,6 +73,16 @@ jobs:
                 -H "Authorization: Bearer ${ACCESS_TOKEN}" \
                 https://api.github.com/repos/${REPOSITORY}/releases
 
+      - name: Set up Node 22
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+
+      - name: Build the web UI
+        run: |
+          make ui-install
+          make ui-build
+
       - name: Install pypa/build
         run: >-
           python -m

.github/workflows/run-tests-simple.yml

@@ -59,7 +59,7 @@ jobs:
           rm -f "${FLOWCEPT_SETTINGS_PATH:-$HOME/.flowcept/settings.yaml}"
           flowcept --init-settings --full --dask --mlflow -y
           flowcept --config-profile full-online -y
-          pytest --nbmake "notebooks/" --nbmake-timeout=600 --ignore="notebooks/dask_from_CLI.ipynb" --ignore="notebooks/analytics.ipynb" --ignore=notebooks/tensorboard.ipynb
+          pytest --nbmake "notebooks/" --nbmake-timeout=600 --ignore="notebooks/dask_from_CLI.ipynb" --ignore=notebooks/tensorboard.ipynb
 
       - name: Shut down docker compose
         run: make services-stop

.github/workflows/ui-checks.yml

@@ -0,0 +1,33 @@
+name: Web UI checks
+
+on:
+  push:
+
+jobs:
+  ui-checks:
+    runs-on: ubuntu-22.04
+    if: "!contains(github.event.head_commit.message, 'CI Bot')"
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node 22
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: "npm"
+          cache-dependency-path: ui/package-lock.json
+
+      - name: Install UI dependencies
+        run: make ui-install
+
+      - name: Run UI unit tests
+        run: make ui-test
+
+      - name: Install Playwright browsers
+        run: cd ui && npx playwright install --with-deps chromium
+
+      - name: Run UI end-to-end tests
+        run: make ui-e2e
+
+      - name: Build and typecheck the UI
+        run: make ui-build

.gitignore

@@ -2,7 +2,9 @@
 .claude/settings.local.json
 **/*mlruns*
 **/*.env*
-**/*build*
+build/
+docs/_build/
+ui/tsconfig.tsbuildinfo
 **/*egg*
 **/*pycache*
 #**/*dist*
@@ -36,8 +38,8 @@ flowcept_code_assistants_memory.md
 uv.lock
 examples/flowcept_messages.jsonl
 agent_sandbox/
-*PROVENANCE_*md
-*PROVENANCE_*pdf
+*WORKFLOW_CARD_*md
+*PROVENANCE_REPORT_*pdf
 CLAUDE.md
 GEMINI.md
 SKILL.md
@@ -47,3 +49,14 @@ SKILLS.md
 .cursor/rules/
 .claude/
 input_data/
+
+# Web UI (Node toolchain + built assets)
+node_modules/
+ui/node_modules/
+ui/dist/
+ui/.vite/
+src/flowcept/webservice/ui_build/
+ui/src/routeTree.gen.ts
+ui/docs/
+ui/test-results/
+ui/playwright-report/

AGENTS.md

@@ -1,6 +1,7 @@
 # Flowcept Code Assistant Instructions
 
 This file is the single source of truth for code-assistant behavior in this repository.
+Each major module and the UI also has its own `README.md` (under `src/flowcept/*/`, `ui/`, `tests/`, `deployment/`, `examples/`) with deeper subsystem context; read the relevant one before working in that area.
 
 Do not duplicate these rules in `CLAUDE.md`, `.cursor/rules`, `GEMINI.md`, `SKILL.md`, or other agent files.
 If a tool requires its own file, make that file (which should immediately go to .gitignore) a thin pointer to this one.
@@ -16,7 +17,7 @@ If a tool requires its own file, make that file (which should immediately go to
 - Do not commit personal absolute paths.
 - Do not commit secrets or keys.
 - Do not `pip install`; report missing packages and the command the user can run. Consider adding them to pyproject.toml.
-- Do not auto-commit. Test first, then ask the user to confirm before discussing a commit.
+- Do not auto-commit. Do not stage files automatically. The AI code assistant must test the fix/implemented feature and fix any error that appears before asking the user to test themselves. Do not ask to commit. 
 
 ## 2. Interaction Rules
 
@@ -29,13 +30,8 @@ If a tool requires its own file, make that file (which should immediately go to
 ## 3. Editing Rules
 
 - Read relevant code and tests before editing.
-- Before editing Python files, explain the intended change and keep it narrow.
-- After editing Python files, run:
-
-```bash
-conda run -n flowcept make reformat
-```
-
+- Keep Python changes narrow, small, surgical, easy to review by a human.
+- Before git commiting python files, run `make format`
 - Use existing tests when possible. Add a new test file only when no existing file is a good home.
 - Public functions/classes under `src/` need concise docstrings.
 - Use `FlowceptLogger` for Flowcept warnings/errors, not `print`.
@@ -58,13 +54,24 @@ git add path/to/file1 path/to/file2
 
 ## 5. Paths And Scratch Work
 
-- `agent_sandbox/` is the assistant scratch area.
+- `agent_sandbox/` is the assistant scratch area (gitignored — never committed).
 - Put plans and handoffs under `agent_sandbox/plans/`.
 - Do not create scratch scripts in source, tests, docs, or `/tmp` when `agent_sandbox/` is appropriate.
 - Do not run full test suites against `agent_sandbox/`, `tmp_tests/`, generated workflow cards, caches, or local data artifacts.
 - Deployment templates under `deployment/*.yaml` must use `${DATA_DIR}` placeholders for data paths.
 - Personal absolute paths belong only in untracked local settings files.
 
+### Current-task memory file
+
+**`agent_sandbox/current_task.md`** is the single living document for the feature or issue actively being developed.
+
+- **Read it at the start of every session** before doing any work, and re-read it whenever the task context seems unclear.
+- **Update it continuously**: add TODOs as they are discovered, check them off when done, record open decisions, blockers, and feature-specific mandates that do not belong in the permanent `AGENTS.md`.
+- **Archive it when the feature ships**: rename to `agent_sandbox/archive/<feature-name>.md` and create a fresh `current_task.md` for the next task.
+- Keep it short — bullets, not prose. If it grows past ~100 lines, trim resolved items.
+
+This file exists because context windows reset and session summaries lose nuance. It is the agent's external working memory for the current task.
+
 ## 6. Source Map
 
 - `src/flowcept/cli.py`: CLI commands and settings/profile entry points.
@@ -110,7 +117,9 @@ When a user or code assistant needs to learn or use a Flowcept feature, read the
 
 ## 8. Flowcept Usage Rules
 
+- Copy the sample settings file `resources/sample_settings.yaml` to `agent_sandbox/settings.yaml` and set the `FLOWCEPT_SETTINGS_PATH` environment variable to point to it during local runs and tests. Do not modify the user's settings in the home directory (`~/.flowcept/settings.yaml`).
 - Use `FLOWCEPT_SETTINGS_PATH` to isolate settings for tests or experiments.
+
 - `flowcept --init-settings` creates settings.
 - `flowcept --init-settings --full -y` creates the full template.
 - `flowcept --config-profile <profile> -y` changes runtime mode.
@@ -142,17 +151,36 @@ flowcept --init-settings --full --dask --mlflow -y
 
 ## 10. Testing And Services
 
+**TDD is mandatory for both Python and UI/frontend.** Write the test first, watch it fail, then implement until it passes.
+
+- **Python**: write a real integration test in `tests/` before the implementation. Guard service-dependent tests with `Flowcept.services_alive()` / `MONGO_ENABLED` skips. No mocks.
+- **UI/Frontend**: write a vitest test in `ui/tests/` before adding new pure logic (store mutations, utility functions, graph algorithms). Use real data fixtures — no mocks, no DOM for pure-function and store tests. Component render tests are discouraged (fragile, high mock cost); test logic at the function/store level instead. Run with `make ui-test`.
+
 Use the `flowcept` conda environment.
 
 Common commands:
 
 ```bash
+# Python: lint, format, docs
 conda run -n flowcept make checks
 conda run -n flowcept make reformat
 conda run -n flowcept make docs
+
+# Python: integration tests (require live Mongo + Redis)
 conda run -n flowcept make tests
 conda run -n flowcept make tests-offline
 conda run -n flowcept make tests-notebooks
+
+# UI: vitest unit tests (pure functions, stores, utilities — no browser)
+make ui-test
+
+# UI: Playwright E2E tests — mocked (no live services needed)
+make ui-e2e
+
+# UI: Playwright E2E live integration tests (require live Mongo + Redis + webservice + Vite dev server)
+# FLOWCEPT_SETTINGS_PATH must point to a settings file with MongoDB enabled and telemetry_capture configured
+# (same file used to start the webservice, e.g. agent_sandbox/settings.yaml)
+FLOWCEPT_SETTINGS_PATH=agent_sandbox/settings.yaml E2E_LIVE=1 make ui-e2e
 ```
 
 Service commands:
@@ -172,6 +200,9 @@ Do not run tests from scratch/sandbox directories. Target `tests/` explicitly.
 
 - Prefer real tests over mocks. Use real services, real data, and real LLMs when feasible.
 - Avoid mock-heavy tests unless there is no practical alternative.
+- When a test fails, the correct fix is almost always to fix the implementation code, not the test; the test itself is very rarely the culprit. Always resolve warnings at their source rather than silencing them.
+- **Periodically recommend running the full integration test suites** (`make tests` and `E2E_LIVE=1 make ui-e2e`) — especially after merges, significant backend or UI changes, or when the user has been iterating quickly on a feature. Mocked tests alone are not sufficient to catch regressions against real services.
+
 
 ## 11. CI And Dependency Drift
 
@@ -233,3 +264,34 @@ If docs and code disagree, verify in this order:
 When you find stale documentation, fix the smallest maintained document instead of adding another note elsewhere.
 
 Periodically offer to read the relevant RST and Markdown files to check for stale or duplicated documentation, especially after code, CLI, config, CI, or public API changes.
+
+## 14. Web UI — Workflow / Campaign List Ordering
+
+**Rule: list endpoints must return newest-first so that `docs[:limit]` yields the most recent items.**
+
+The single source of truth is `src/flowcept/webservice/services/sorting.py` → `sort_docs_by_first_date_field`. It must sort **descending** (`reverse=True`) and use `float("-inf")` as the fallback key for docs without a date field (so undated docs sort last, not first).
+
+All list routers — `workflows.py`, `tasks.py`, `objects.py`, `agents.py`, `campaigns.py` — call this function before slicing. If you change the sort direction or add a new list endpoint, make sure it also sorts descending before the limit slice.
+
+The frontend `useVisibleWorkflows` hook re-sorts the received items by `utc_timestamp` descending as well. Both layers must agree on newest-first; if either is flipped, recent runs disappear from the UI.
+
+## 15. Default Dashboard Configs — Two Locations Must Stay in Sync
+
+The default dashboard chart configs live in two places that **must always match**:
+
+1. `ui/public/default_dashboard_configs.json` — source of truth; served by the Vite dev server; edited here when adding/changing default charts.
+2. `src/flowcept/webservice/ui_build/default_dashboard_configs.json` — built copy; this is what `dashboard_store.py` seeds into Mongo on first run (`_SEED_FILE` constant).
+
+After editing `ui/public/default_dashboard_configs.json`, always copy it to the `ui_build` location:
+```
+cp ui/public/default_dashboard_configs.json src/flowcept/webservice/ui_build/default_dashboard_configs.json
+```
+
+**Mongo is seeded once (when the `dashboards` collection is empty).** If the collection already has documents, changing the seed file has no effect. To push updates to a running instance, update the Mongo records directly:
+```python
+import json
+from flowcept.webservice.services.dashboard_store import get_dashboard_store
+store = get_dashboard_store()
+for doc in json.load(open("src/flowcept/webservice/ui_build/default_dashboard_configs.json")):
+    store.save(doc)
+```

Makefile

@@ -20,15 +20,49 @@ help:
 	@printf "\033[32mtests-notebooks\033[0m           test the notebooks using pytest\n"
 	@printf "\033[32mclean\033[0m                     remove cache directories and Sphinx build output\n"
 	@printf "\033[32mdocs\033[0m                      build HTML documentation using Sphinx\n"
-	@printf "\033[32mwebservice\033[0m                run the Flowcept webservice locally (FastAPI)\n"
+	@printf "\033[32mwebservice\033[0m                start the Flowcept webservice (REST API + web UI)\n"
+	@printf "\033[32mui\033[0m                        kill old processes, start webservice + UI dev server\n"
+	@printf "\033[32mui-install\033[0m                install web UI dependencies (npm ci)\n"
+	@printf "\033[32mui-dev\033[0m                    run the web UI dev server (proxies /api to :5000)\n"
+	@printf "\033[32mui-build\033[0m                  build the web UI into src/flowcept/webservice/ui_build\n"
+	@printf "\033[32mui-checks\033[0m                 typecheck the web UI\n"
+	@printf "\033[32mui-test\033[0m                   run web UI unit tests (vitest)\n"
+	@printf "\033[32mui-e2e\033[0m                    run web UI end-to-end tests (playwright)\n"
 	@printf "\033[32mchecks\033[0m                    run ruff linter and formatter checks\n"
 	@printf "\033[32mreformat\033[0m                  run ruff linter and formatter\n"
+	@printf "\033[32mcompile-rules\033[0m             compile central rules files for all coding assistants\n"
 
 # Run linter and formatter checks using ruff
 checks:
 	ruff check src
 	ruff format --check src
 
+.PHONY: compile-rules
+compile-rules:
+	python scripts/compile_rules.py
+
+.PHONY: ui-install ui-dev ui-build ui-checks ui-test ui-e2e ui
+ui-install:
+	npm ci --prefix ui --no-audit --no-fund
+
+ui-dev:
+	npm run dev --prefix ui
+
+ui-build:
+	npm run build --prefix ui
+
+ui-checks:
+	npm run lint --prefix ui
+
+ui-test:
+	npm test --prefix ui
+
+ui-e2e:
+	cd ui && npx playwright test
+
+ui:
+	FLOWCEPT_SETTINGS_PATH=$(or $(FLOWCEPT_SETTINGS_PATH),$(PWD)/agent_sandbox/settings.yaml) PYTHONPATH=src python -m flowcept.cli --start-ui
+
 reformat:
 	ruff check src --fix --unsafe-fixes
 	ruff format src
@@ -59,7 +93,7 @@ docs:
 
 .PHONY: webservice
 webservice:
-	PYTHONPATH=src python -m flowcept.cli --start-webservice --webservice-host 127.0.0.1 --webservice-port 8008
+	FLOWCEPT_SETTINGS_PATH=$(or $(FLOWCEPT_SETTINGS_PATH),$(PWD)/agent_sandbox/settings.yaml) PYTHONPATH=src python -m flowcept.cli --start-webservice
 
 # Run services using Docker
 services: