Auto-commit 2026-09-07 16:28: 4 files changed, 122 insertions(+), 2 deletions(-)

Folien/AISE502_Projekt_Folien.tex

@@ -206,7 +206,7 @@ The next frames show \textbf{low-fidelity sketches} of the platform from the use
 
 \vspace{0.15cm}
 \begin{hinweisbox}
-\footnotesize The sketches are in the course repository as HTML pages (\texttt{project\_exercise/ui\_sketches/}) -- open them in a browser; your own screens may look entirely different, as long as the requirements behind the notes are met.
+\footnotesize The sketches are Section 8 of the exercise sheet and, as HTML pages, in the course repository (\texttt{project\_exercise/ui\_sketches/}) -- open them in a browser; your own screens may look entirely different, as long as the requirements behind the notes are met.
 \end{hinweisbox}
 \end{frame}
 
@@ -638,7 +638,7 @@ M6 Presentation and architecture defence & 14 & present the system, defend the t
 
 \begin{frame}{Read the document -- then kick off milestone M1}
 \begin{projektbox}
-\footnotesize \textbf{Read the exercise sheet in full before the kickoff}: \texttt{project\_exercise/project\_exercise.pdf} (ten pages). Suggested order: Section 1 (goal, the single most important rule) $\to$ 5 (mandatory vs.\ distinction) $\to$ 6 (plan, milestones) $\to$ 2--4 (requirements, architecture, AI integration) $\to$ 7 (assessment). Then open the sketches in \texttt{project\_exercise/ui\_sketches/}.
+\footnotesize \textbf{Read the exercise sheet in full before the kickoff}: \texttt{project\_exercise/project\_exercise.pdf} (sixteen pages). Suggested order: Section 1 (goal, the single most important rule) $\to$ 5 (mandatory vs.\ distinction) $\to$ 6 (plan, milestones) $\to$ 2--4 (requirements, architecture, AI integration) $\to$ 7 (assessment) $\to$ 8 (the sketches, also as HTML in \texttt{project\_exercise/ui\_sketches/}).
 \end{projektbox}
 
 \vspace{0.15cm}

project_exercise/project_exercise.tex

@@ -14,6 +14,7 @@
 \usepackage{enumitem}
 \usepackage{microtype}
 \usepackage{booktabs}
+\usepackage{float}
 
 \setlength{\emergencystretch}{3em}
 \renewcommand{\texttt}[1]{{\ttfamily\hyphenchar\font=`\-\relax #1}}
@@ -229,6 +230,7 @@ are guidance, not a prescription.
     \item The UI must contain \textbf{no business logic} --- it only calls the API.
 \end{itemize}
 \end{taskbox}
+Section~\ref{sec:sketches} shows low-fidelity sketches of the six screens this interface serves.
 
 %====================================================================
 \section{Architecture: From Ontology to Services}
@@ -530,6 +532,124 @@ Evaluation of the project emphasises:
     \item Distinction criteria for top marks (see Section~\ref{sec:distinction}).
 \end{itemize}
 
+%====================================================================
+\section{What the Platform Looks Like: UI Sketches}
+\label{sec:sketches}
+
+The sketches on the following pages show the platform from the user's side. They are
+\textbf{low-fidelity wireframes, not a specification}: your own screens may look entirely
+different, as long as the requirements behind the numbered notes are met. Three things the
+sketches make visible:
+\begin{itemize}[nosep]
+    \item the dashboard is a \textbf{thin UI for demonstration} (Section~2.6): every screen only
+          calls the HTTP/JSON API and contains no business logic;
+    \item every figure names the \textbf{deterministic service} that computed it, and every AI
+          statement carries its \textbf{source and its guard verdict};
+    \item the system \textbf{degrades gracefully and says so} (Section~4.2): two of the sketches
+          show an external API failing.
+\end{itemize}
+Each sketch carries numbered sticky notes that cite the section of this document the element
+comes from. The sketches exist as self-contained HTML pages in the course repository
+(\texttt{project\_exercise/ui\_sketches/}); open them in a browser to read the details.
+
+\subsection{Three users, one system}
+Sketch~0 introduces the three users the platform serves --- the \emph{portfolio analyst} (primary),
+the \emph{compliance reviewer}, who needs every claim traceable, and the \emph{developer/operator},
+i.e.\ you --- and the analyst's path through one working day. Each step maps to a screen and to
+the services behind it; the two boxes at the bottom show the same day with the LLM API down and
+what the reviewer sees behind an advisor answer.
+
+\begin{figure}[H]
+    \centering
+    \setlength{\fboxsep}{0pt}\setlength{\fboxrule}{0.4pt}%
+    \fbox{\includegraphics[width=\dimexpr\textwidth-2\fboxrule\relax]{ui_sketches/00_user_journey.png}}
+    \caption{Sketch 0 --- users and journey. Notes: (1) API-first, no business logic in the
+    dashboard (Section~2.6); (2) graceful degradation, announced in the UI (Section~4.2).}
+\end{figure}
+
+\subsection{The six screens}
+The six screens follow the six functional requirement areas of Section~2. Table~\ref{tab:sketches}
+maps each sketch to the requirements it illustrates and to the services behind it.
+
+\begin{table}[H]
+\centering\small
+\begin{tabular}{@{}p{1.3cm}p{2.9cm}p{5.2cm}p{5.0cm}@{}}
+\toprule
+\textbf{Sketch} & \textbf{Screen} & \textbf{Illustrates} & \textbf{Services behind it} \\
+\midrule
+1 & Portfolio overview & holdings and figures with their computing service (2.3, 2.4); degraded mode with the LLM circuit open (4.2); freshness stamp & \texttt{PortfolioService}, \texttt{PerformanceService}, \texttt{RiskService} \\
+2 & Market data & live API rate-limited $\rightarrow$ mandatory cache/snapshot fallback (2.1); stable, versioned contract; resilience on every external call (4.2) & \texttt{MarketDataService} \\
+3 & News \& insights & raw news with provenance; schema-validated \texttt{Insight}; ontology guard with a rejected item (2.2, 4.1, 4.2); news as untrusted input & \texttt{NewsIngestionService}, \texttt{ResearchAgent}, ontology guard \\
+4 & Advisor & explained, cited answer; agent trace through contracts (2.5); numbers from services; cost and latency per request from the gateway (4.1) & \texttt{AdvisorAgent}, \texttt{ResearchAgent}, \texttt{RiskAgent}, \texttt{OptimizationAgent}, LLM gateway \\
+5 & Risk \& optimisation & deterministic mean--variance run pinned by reference vectors (2.3, 4.3); the agent explains, never computes (2.5) & \texttt{RiskService}, \texttt{OptimizationService}, \texttt{OptimizationAgent} \\
+6 & System status & the measurement contract live: eval pass rate, cost and latency budgets, module-boundary check, circuit breakers, CI gates (4.3, 5, M2, M5) & LLM gateway, CI pipeline, breakers on all external calls \\
+\bottomrule
+\end{tabular}
+\caption{The six screens, the requirements they illustrate, and the services behind them.}
+\label{tab:sketches}
+\end{table}
+
+\begin{figure}[H]
+    \centering
+    \setlength{\fboxsep}{0pt}\setlength{\fboxrule}{0.4pt}%
+    \fbox{\includegraphics[width=\dimexpr\textwidth-2\fboxrule\relax]{ui_sketches/01_portfolio_dashboard.png}}
+    \caption{Sketch 1 --- portfolio overview. The LLM circuit breaker is open: insights and the
+    advisor are paused, the deterministic figures are unaffected, and the banner says so.}
+\end{figure}
+
+\begin{figure}[H]
+    \centering
+    \setlength{\fboxsep}{0pt}\setlength{\fboxrule}{0.4pt}%
+    \fbox{\includegraphics[width=\dimexpr\textwidth-2\fboxrule\relax]{ui_sketches/02_market_data.png}}
+    \caption{Sketch 2 --- market data. The live price API is rate-limited; the cached snapshot
+    takes over and every figure is marked accordingly.}
+\end{figure}
+
+\begin{figure}[H]
+    \centering
+    \setlength{\fboxsep}{0pt}\setlength{\fboxrule}{0.4pt}%
+    \fbox{\includegraphics[width=\dimexpr\textwidth-2\fboxrule\relax]{ui_sketches/03_news_insights.png}}
+    \caption{Sketch 3 --- news and insights. One validated \texttt{Insight} in detail; item N-1017
+    is rejected by the ontology guard (unknown ticker, disallowed event type) and its raw text is
+    kept with provenance for audit.}
+\end{figure}
+
+\begin{figure}[H]
+    \centering
+    \setlength{\fboxsep}{0pt}\setlength{\fboxrule}{0.4pt}%
+    \fbox{\includegraphics[width=\dimexpr\textwidth-2\fboxrule\relax]{ui_sketches/04_advisor.png}}
+    \caption{Sketch 4 --- the advisor. An explained and cited answer, the agent trace through
+    service contracts, and cost and latency per request against the budgets of the measurement
+    contract.}
+\end{figure}
+
+\begin{figure}[H]
+    \centering
+    \setlength{\fboxsep}{0pt}\setlength{\fboxrule}{0.4pt}%
+    \fbox{\includegraphics[width=\dimexpr\textwidth-2\fboxrule\relax]{ui_sketches/05_optimisation.png}}
+    \caption{Sketch 5 --- risk and optimisation. Frontier, allocation, and every number come from
+    the deterministic services; the \texttt{OptimizationAgent} only explains.}
+\end{figure}
+
+\begin{figure}[H]
+    \centering
+    \setlength{\fboxsep}{0pt}\setlength{\fboxrule}{0.4pt}%
+    \fbox{\includegraphics[width=\dimexpr\textwidth-2\fboxrule\relax]{ui_sketches/06_system_status.png}}
+    \caption{Sketch 6 --- system status, the operator's view: the measurement contract live, with
+    circuit breakers, token spend, and the CI gates including a rolled-back prompt change.}
+\end{figure}
+
+\begin{hintbox}
+\begin{itemize}[nosep]
+    \item Use the sketches as a checklist of \emph{visible} requirements: if a screen of yours
+          cannot show which service computed a figure, whether an insight passed the guard, or
+          that a dependency is degraded, the architecture behind it is probably missing something.
+    \item A Streamlit dashboard with these six screens is one viable design --- but the screens
+          are yours to decide. What is graded is the system behind the API.
+    \item Keep the demo reproducible: the sketches assume a pinned data snapshot (Sketch~2, Section~6).
+\end{itemize}
+\end{hintbox}
+
 \vfill
 \begin{center}\small
 Fachhochschule Graub\"unden $\cdot$ Pulverm\"uhlestrasse 57 $\cdot$ 7000 Chur\\