Projektvorgaben und Strukturdokumentation aktualisiert

AGENTS.md neu angelegt: Vorgaben für TypeScript/Mithril-Entwicklung
(responsives Design via w3-auto, Formatierung längerer Attributlisten,
ClosureComponent-Muster, Datenmodelle in Client/models, REST-API-Gerüst).
ai-context/AI-operative_Vorgaben.md und mistral-context.md an die
aktuelle Projektstruktur (App_Server, Client, NGINX_Server) angepasst.

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>

AGENTS.md

@@ -0,0 +1,44 @@
+# Architektur der Anwendung
+Beachte die strukturellen Vorgaben, die in ai-context/AI-operative-Vorgaben.md definiert sind.
+In den Programmen sollen aussagekräftige Kommentare in deutsch erstellt werden.
+
+## Vorgaben für die Typescript und mithriljs Entwicklung
+Verwende bei der GUI primar die widgets, die es in client/Components/widgets gibt. Fehler widgets, gib eines Hinweis und erstelle einen Vorschlag für ein entsprechendes neues Widget.
+Es soll immer ein responsive Design implmentiert werden, da die App sowohl auf PCs als auch auf mobilen Geräten laufen soll.
+Verwende für Attribute der GUI-Oberfläche nach Möglichkeit Klassen aus NGINX_Server/html/static/w3.css, insbesondere wenn es darum geht, eine Respnosive Design zu implentieren.
+View-Container werden mit `w3-container.w3-auto` gewrappt, damit sie auf kleinen Bildschirmen 100% und auf großen bis max. 1140px (bzw. 95%) zentriert nutzen.
+
+Bei Mithril `m(...)`-Aufrufen mit längeren Attributlisten (z.B. mehrere `style`-Eigenschaften oder mehrere Attribute) schreibe die Attribute untereinander, sobald sie in einer Zeile nicht mehr gut lesbar sind (Faustregel: mehr als 2–3 Attribute oder ein mehrzeiliges `style`-Objekt). Kurze Attributlisten (1–2 Attribute, einzeiliges `style`) dürfen in einer Zeile bleiben. Formatbeispiel:
+```typescript
+m("div.w3-bar-block.w3-border", {
+    style: {
+        width: '95%',
+        'max-height': '220px',
+        'overflow-y': 'auto',
+        position: 'absolute',
+        'z-index': '1000'
+    }
+})
+```
+
+Für Symbole auf Buttons und ähnlichen Steuerelementen verwende Symbole aus den Google Material Icons.
+Erstelle die Datenmodelle für die Typescript-Entwicklung im Verzeichnis Client/Models. Erstelle für die verschiedenen Datenmodelle (Kunde, Projekt usw.) eigene .ts-Dateien. Erstelle in der jeweiligen Datei auch den Aufruf der REST-Api für die Server-Seite.
+
+Bei `m.ClosureComponent` den Closure-Parameter weglassen (`() =>`) und Attribute ausschließlich über das `vnode` des jeweiligen Lifecycle-Hooks (`view`, `oninit`, `onupdate` etc.) lesen. Das `vnode` der Closure-Funktion ist ein Snapshot zum Erzeugungszeitpunkt und wird bei Redraws nicht aktualisiert — daraus gelesene `attrs` sind veraltet. Initialisierung, die `attrs` braucht, gehört nach `oninit`. Beispiel:
+```typescript
+export const Select: m.ClosureComponent<iSelect> = () => {
+    // closure-State ohne Referenz auf attrs
+    let search = ""
+    return {
+        oninit: (vnode) => {
+            // vnode.attrs hier initial lesen
+            search = vnode.attrs.value
+        },
+        view: (vnode) => {
+            // vnode.attrs enthält die aktuellen Werte je Render-Durchlauf
+            const options = vnode.attrs.options
+            ...
+        }
+    }
+}
+```

ai-context/AI-operative_Vorgaben.md

@@ -23,20 +23,42 @@
 
 ```text
 .
-├── .gitignore
+├── ai-context/                       # Anweisungen und Information für Mistral AI
-├── .env
+├── App_Server/                       # Enthält Alles, was auf den Server (Backend) gehört
-├── .env.example
+│   ├── data/                         # enthält die SQLite-Datenbanken			
-├── requirements.txt
+│   ├── Dockerfile
-├── docker-compose.yml
+│   ├── root/                         # Enthält alle Python-Programme
-├── Dockerfile
+│   │   ├── approot.py	
-├── wsgi.py
+│   │   ├── auth                      # Enthält Programme zu Benutzerverwaltung		 
-├── data/                  ← Datenbankverzeichnis (persistente SQLite-Datei, nicht im Image)
+│   │   │   ├── model/		          # Enthält die Datenmodelle der Benutzerverwaltung
-└── app/
+│   │   │   └── routes.py
-    ├── __init__.py
+│   │   ├── config.ini
-    ├── config.py
+│   │   ├── db.py
-    ├── database.py
+│   │   ├── requirements.txt
-    ├── models.py
+│   │   ├── routes/                   # Enthält die Route-Definitionen für Flask
-    ├── auth.py
+│   │   ├── runserver.py
-    ├── routes.py
+│   │   ├── settings.py
-    ├── templates/
+│   │   └── templates/                # enthält die Vorlagen für Jinja2
-    └── static/
+│   └── scripts/                      # enthält Scripts, die im Dockjer-Container ausgeführt werden
+├── Client/                           # Enthält alles, was für die Browser-basierte GUI erforderlich ist
+│   ├── Components/	                  # enthält die mit mithril.js entwickelten GUI-Komponenten
+│   │   ├── auth/		              # enthält die GUI-Komponenten für die Benutzer-Verwaltung
+│   │   │   └── models/               # enthält die Datenmodelle für die Benutzerverwaltung
+│   │   └── widgets                   # enthält einzelne GUI-Elemente wie Eingabefelder u.ä., die dann in den Komponenten verwendet werden
+│   ├── index.ts
+│   ├── inireader.mjs
+│   ├── node_modules/
+├── docker-compose.base.yaml
+├── docker-compose.dev.yaml
+├── docker-compose.prod.yaml
+├── docker-compose.save.yaml
+├── Dokumentationen/                   # enthält Dokumente, die für die Entwicklung wichtig sind
+├── mistral-context.md
+├── NGINX_Server/                      # enthält die Konfiguration für den im Docker-Container laufenden NGINX-Server
+│   ├── certs/			               # enthält die Zertifikatsdateien für die SSL-Verschlüsselung
+│   ├── configtemplates
+│   ├── Dockerfile
+│   └── html/
+│       └── static/                    # enthält die statischen Elemente der GUI, wie css-Dateien und Javascript-Dateien
+└── README.md
+```

mistral-context.md

@@ -22,18 +22,53 @@ cd docs/ && make html     # Ergebnis: docs/_build/html/index.html
 
 ## Architektur
 
+Das Projekt besteht aus 2 Teilen:
+- Die GUI, die im Browser läuft und mit Typescript und mithril.js erstellt wird
+- Das Backend, welches im wesentlichen mit Python, flask und sqlalchemy entwickelt wird
+Daraus ergibt sich die folgende Struktur:
+
 ```
-app/
+.
-├── __init__.py    # App-Factory, Flask-Initialisierung, CLI-Kommandos (db-init, seed-db)
+├── ai-context/                       # Anweisungen und Information für Mistral AI
-├── config.py      # Konfiguration aus .env (12-Factor)
+├── App_Server/                       # Enthält Alles, was auf den Server (Backend) gehört
-├── database.py    # SQLAlchemy-Instanz und Session-Setup
+│   ├── data/                         # enthält die SQLite-Datenbanken			
-├── models.py      # Alle ORM-Modelle (siehe Datenmodell unten)
+│   ├── Dockerfile
-├── auth.py        # Zitadel-OIDC-Flow via Authlib; Rollen aus Token-Claims
+│   ├── root/                         # Enthält alle Python-Programme
-├── routes.py      # Flask-Blueprints und View-Funktionen
+│   │   ├── approot.py	
-├── templates/     # Jinja2-Templates
+│   │   ├── auth                      # Enthält Programme zu Benutzerverwaltung		 
-└── static/        # CSS, JS, Assets
+│   │   │   ├── model/		            # Enthält die Datenmodelle der Benutzerverwaltung
-data/              # SQLite-Datenbankdatei (nicht im Docker-Image, persistiert als Volume)
+│   │   │   └── routes.py
-wsgi.py            # Waitress-Einstiegspunkt
+│   │   ├── config.ini
+│   │   ├── db.py
+│   │   ├── requirements.txt
+│   │   ├── routes/                   # Enthält die Route-Definitionen für Flask
+│   │   ├── runserver.py
+│   │   ├── settings.py
+│   │   └── templates/                # enthält die Vorlagen für Jinja2
+│   └── scripts/                      # enthält Scripts, die im Dockjer-Container ausgeführt werden
+├── Client/                           # Enthält alles, was für die Browser-basierte GUI erforderlich ist
+│   ├── Components/	                  # enthält die mit mithril.js entwickelten GUI-Komponenten
+│   │   ├── auth/		                  # enthält die GUI-Komponenten für die Benutzer-Verwaltung
+│   │   │   └── models/               # enthält die Datenmodelle für die Benutzerverwaltung
+│   │   └── widgets                   # enthält einzelne GUI-Elemente wie Eingabefelder u.ä., 
+│   │                                 # die dann in den Komponenten verwendet werden
+│   ├── index.ts
+│   ├── inireader.mjs
+│   ├── node_modules/
+├── docker-compose.base.yaml
+├── docker-compose.dev.yaml
+├── docker-compose.prod.yaml
+├── docker-compose.save.yaml
+├── Dokumentationen/                   # enthält Dokumente, die für die Entwicklung wichtig sind
+├── mistral-context.md
+├── NGINX_Server/                      # enthält die Konfiguration für den im Docker-Container laufenden NGINX-Server
+│   ├── certs/			                   # enthält die Zertifikatsdateien für die SSL-Verschlüsselung
+│   ├── configtemplates
+│   ├── Dockerfile
+│   └── html/
+│       └── static/                    # enthält die statischen Elemente der GUI, wie css-Dateien und Javascript-Dateien
+└── README.md
+
 ```
 
 ## Datenmodell
@@ -42,12 +77,12 @@ wsgi.py            # Waitress-Einstiegspunkt
 |---|---|
 | `Benutzer` | Anwendungsnutzer; Primärschlüssel ist der Zitadel-`sub` |
 | `Kunden` | Kundenstamm (Firmen oder Privatpersonen) |
-| `Kontakte` | Ansprechpartner bei einem Kunden (FK → Kunden) |
+| `Kontakte` | Ansprechpartner bei einem Kunden (ForeignKey → Kunden) |
-| `Projekte` | Akquise-Projekte, einem Kunden zugeordnet |
+| `Projekte` | Akquise-Projekte, einem Kunden zugeordnet (ForeignKey → Kunden) |
 | `Benutzer_Projekt` | n:m-Zuordnung Benutzer ↔ Projekte (Zugriffskontrolle) |
-| `Kontaktadressen` | Anrufziele innerhalb eines Projekts; importierbar via CSV/Excel (FK → Projekte) |
+| `Kontaktadressen` | Anrufziele innerhalb eines Projekts; importierbar via CSV/Excel (ForeignKey → Projekte) |
-| `Gesprächsnotizen` | Anrufdokumentation mit Metadaten, Freitext und Tags (FK → Kontaktadressen) |
+| `Gesprächsnotizen` | Anrufdokumentation mit Metadaten, Freitext und Tags (ForeignKey → Projekte, Kontaktadressen) |
-| `Tags` | Benutzerdefinierte Kategorien für Gesprächsnotizen |
+| `Tags` | Benutzerdefinierte hierarchische Kategorien für Gesprächsnotizen |
 | `Gesprächsnotizen_Tags` | n:m-Verknüpfung Gesprächsnotizen ↔ Tags |
 
 ## Authentifizierung & Autorisierung
@@ -100,6 +135,9 @@ SECRET_KEY=...
 
 ## Weitere Vorgabedokumente
 
+Alle Dateien, die sich im Verzeichnis ai-context befinden, enthalten für das Projekt wichtige Information.
+Die wichtigsten sind dabei die folgenden:
+
 | Datei | Inhalt |
 |---|---|
 | `ai-context/AI-operative_Vorgaben.md` | Tech-Stack, Verzeichnisstruktur, Docker-Setup |