Merge branch 'dev' into chore/adding-uu-strings

# Conflicts: # src/components/Logging/Logging.tsx
2026-01-28 11:29:44 +01:00
parent aeddd93b2d 60f7bad5d1
commit dc65b90e1c
25 changed files with 619 additions and 124 deletions
--- a/src/App.css
+++ b/src/App.css
@@ -166,7 +166,13 @@ input[type="checkbox"] {
 .margin-0 {
  margin: 0;
 }
+.margin-lg {
+  margin: 1rem;
+}

+.padding-0 {
+  padding: 0;
+}
 .padding-sm {
  padding: .25rem;
 }
@@ -176,11 +182,9 @@ input[type="checkbox"] {
 .padding-lg {
  padding: 1rem;
 }
-.padding-b-sm {
-  padding-bottom: .25rem;
-}
-.padding-b-md {
-  padding-bottom: .5rem;
+.padding-h-lg {
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 .padding-b-lg {
  padding-bottom: 1rem;
@@ -209,6 +213,27 @@ input[type="checkbox"] {
  border: 3px solid canvastext;
 }

+.shadow-sm {
+  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25);
+}
+.shadow-md {
+  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
+}
+.shadow-lg {
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
+}
+@media (prefers-color-scheme: dark) {
+  .shadow-sm {
+    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.5);
+  }
+  .shadow-md {
+    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
+  }
+  .shadow-lg {
+    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
+  }
+}
+
 .font-small {
  font-size: .75rem;
 }
@@ -225,6 +250,9 @@ input[type="checkbox"] {
  font-weight: bold;
 }

+.relative {
+  position: relative;
+}

 .clickable {
  cursor: pointer;
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -19,7 +19,7 @@ function App(){
      <header>
        <span>© Utrecht University (ICS)</span>
        <Link to={"/"}>Home</Link>
-        <button onClick={() => setShowLogs(!showLogs)}>Toggle Logging</button>
+        <button onClick={() => setShowLogs(!showLogs)}>Developer Logs</button>
      </header>
      <div className={"flex-row justify-center flex-1 min-height-0"}>
        <main className={"flex-col align-center flex-1 scroll-y"}>
--- a/src/components/Dialog.tsx
+++ b/src/components/Dialog.tsx
@@ -0,0 +1,48 @@
+import {type ReactNode, type RefObject, useEffect, useRef} from "react";
+
+export default function Dialog({
+  open,
+  close,
+  classname,
+  children,
+}: {
+  open: boolean;
+  close: () => void;
+  classname?: string;
+  children: ReactNode;
+}) {
+  const ref: RefObject<HTMLDialogElement | null> = useRef(null);
+
+  useEffect(() => {
+    if (open) {
+      ref.current?.showModal();
+    } else {
+      ref.current?.close();
+    }
+  }, [open]);
+
+  function handleClickOutside(event: React.MouseEvent) {
+    if (!ref.current) return;
+
+    const dialogDimensions = ref.current.getBoundingClientRect()
+    if (
+      event.clientX < dialogDimensions.left ||
+      event.clientX > dialogDimensions.right ||
+      event.clientY < dialogDimensions.top ||
+      event.clientY > dialogDimensions.bottom
+    ) {
+      close();
+    }
+  }
+
+  return (
+    <dialog
+      ref={ref}
+      onCancel={close}
+      onPointerDown={handleClickOutside}
+      className={classname}
+    >
+      {children}
+    </dialog>
+  );
+}
--- a/src/components/Icons/Next.tsx
+++ b/src/components/Icons/Next.tsx
@@ -0,0 +1,5 @@
+export default function Next({ fill }: { fill?: string }) {
+    return <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill={fill ?? "canvas"}>
+        <path d="M664.07-224.93v-510.14h91v510.14h-91Zm-459.14 0v-510.14L587.65-480 204.93-224.93Z"/>
+    </svg>;
+}
--- a/src/components/Icons/Pause.tsx
+++ b/src/components/Icons/Pause.tsx
@@ -0,0 +1,5 @@
+export default function Pause({ fill }: { fill?: string }) {
+    return <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill={fill ?? "canvas"}>
+        <path d="M556.17-185.41v-589.18h182v589.18h-182Zm-334.34 0v-589.18h182v589.18h-182Z"/>
+    </svg>;
+}
--- a/src/components/Icons/Play.tsx
+++ b/src/components/Icons/Play.tsx
@@ -0,0 +1,5 @@
+export default function Play({ fill }: { fill?: string }) {
+    return <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill={fill ?? "canvas"}>
+        <path d="M311.87-185.41v-589.18L775.07-480l-463.2 294.59Z"/>
+    </svg>;
+}
--- a/src/components/Icons/Redo.tsx
+++ b/src/components/Icons/Redo.tsx
@@ -0,0 +1,5 @@
+export default function Redo({ fill }: { fill?: string }) {
+    return <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill={fill ?? "canvas"}>
+        <path d="M390.98-191.87q-98.44 0-168.77-65.27-70.34-65.27-70.34-161.43 0-96.15 70.34-161.54 70.33-65.39 168.77-65.39h244.11l-98.98-98.98 63.65-63.65L808.13-600 599.76-391.87l-63.65-63.65 98.98-98.98H390.98q-60.13 0-104.12 38.92-43.99 38.93-43.99 96.78 0 57.84 43.99 96.89 43.99 39.04 104.12 39.04h286.15v91H390.98Z"/>
+    </svg>;
+}
--- a/src/components/Icons/Replay.tsx
+++ b/src/components/Icons/Replay.tsx
@@ -0,0 +1,5 @@
+export default function Replay({ fill }: { fill?: string }) {
+    return <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill={fill ?? "canvas"}>
+        <path d="M480.05-70.43q-76.72 0-143.78-29.1-67.05-29.1-116.75-78.8-49.69-49.69-78.79-116.75-29.1-67.05-29.1-143.49h91q0 115.81 80.73 196.47Q364.1-161.43 480-161.43q115.8 0 196.47-80.74 80.66-80.73 80.66-196.63 0-115.81-80.73-196.47-80.74-80.66-196.64-80.66h-6.24l60.09 60.08-58.63 60.63-166.22-166.21 166.22-166.22 58.63 60.87-59.85 59.85h6q76.74 0 143.76 29.09 67.02 29.1 116.84 78.8 49.81 49.69 78.91 116.64 29.1 66.95 29.1 143.61 0 76.66-29.1 143.71-29.1 67.06-78.79 116.75-49.7 49.7-116.7 78.8-67.01 29.1-143.73 29.1Z"/>
+    </svg>;
+}
--- a/src/components/Logging/Definitions.ts
+++ b/src/components/Logging/Definitions.ts
@@ -0,0 +1,31 @@
+import type {Cell} from "../../utils/cellStore.ts";
+import type {LogRecord} from "./useLogs.ts";
+
+/**
+ * Zustand store definition for managing user preferences related to logging.
+ *
+ * Includes flags for toggling relative timestamps and automatic scroll behavior.
+ */
+export type LoggingSettings = {
+  /** Whether to display log timestamps as relative (e.g., "2m 15s ago") instead of absolute. */
+  showRelativeTime: boolean;
+  /** Updates the `showRelativeTime` setting. */
+  setShowRelativeTime: (showRelativeTime: boolean) => void;
+};
+
+/**
+ * Props for any component that renders a single log message entry.
+ *
+ * @param recordCell - A reactive `Cell` containing a single `LogRecord`.
+ * @param onUpdate - Optional callback triggered when the log entry updates.
+ */
+export type MessageComponentProps = {
+  recordCell: Cell<LogRecord>,
+  onUpdate?: () => void,
+};
+
+/**
+ * Key used for the experiment filter predicate in the filter map, to exclude experiment logs from the developer logs.
+ */
+export const EXPERIMENT_FILTER_KEY = "experiment_filter";
+export const EXPERIMENT_LOGGER_NAME = "experiment";
--- a/src/components/Logging/Filters.tsx
+++ b/src/components/Logging/Filters.tsx
@@ -16,9 +16,8 @@ type Setter<T> = (value: T | ((prev: T) => T)) => void;
 * Mapping of log level names to their corresponding numeric severity.
 * Used for comparison in log filtering predicates.
 */
-const optionMapping = new Map([
+const optionMapping: Map<string, number> = new Map([
  ["ALL", 0],
-  ["LLM", 9],
  ["DEBUG", 10],
  ["INFO", 20],
  ["WARNING", 30],
@@ -96,7 +95,7 @@ function GlobalLevelFilter({
  filterPredicates: Map<string, LogFilterPredicate>;
  setFilterPredicates: Setter<Map<string, LogFilterPredicate>>;
 }) {
-  const selected = filterPredicates.get(GLOBAL_LOG_LEVEL_PREDICATE_KEY)?.value || "ALL";
+  const selected = filterPredicates.get(GLOBAL_LOG_LEVEL_PREDICATE_KEY)?.value ?? "ALL";
  const setSelected = (selected: string | null) => {
    if (!selected || !optionMapping.has(selected)) return;

--- a/src/components/Logging/Logging.module.css
+++ b/src/components/Logging/Logging.module.css
@@ -10,7 +10,6 @@ University within the Software Project course.
  flex-shrink: 0;

  box-shadow: 0 0 1rem black;
-  padding: 1rem 1rem 0 1rem;
 }

 .no-numbers {
@@ -20,8 +19,6 @@ University within the Software Project course.
 }

 .log-container {
-  margin-bottom: .5rem;
-
  .accented-0, .accented-10 {
    background-color: color-mix(in oklab, canvas, rgb(159, 159, 159) 35%)
  }
@@ -37,7 +34,7 @@ University within the Software Project course.
 }

 .floating-button {
-  position: fixed;
+  position: absolute;
  bottom: 1rem;
  right: 1rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
--- a/src/components/Logging/Logging.tsx
+++ b/src/components/Logging/Logging.tsx
@@ -1,41 +1,26 @@
 // This program has been developed by students from the bachelor Computer Science at Utrecht
 // University within the Software Project course.
 // © Copyright Utrecht University (Department of Information and Computing Sciences)
-import {useEffect, useRef, useState} from "react";
-import {create} from "zustand";
-
+import {type ComponentType, useEffect, useRef, useState} from "react";
 import formatDuration from "../../utils/formatDuration.ts";
 import {type LogFilterPredicate, type LogRecord, useLogs} from "./useLogs.ts";
 import Filters from "./Filters.tsx";
 import {type Cell, useCell} from "../../utils/cellStore.ts";
-
 import styles from "./Logging.module.css";
-
+import {
+  EXPERIMENT_FILTER_KEY,
+  EXPERIMENT_LOGGER_NAME,
+  type LoggingSettings,
+  type MessageComponentProps
+} from "./Definitions.ts";
+import {create} from "zustand";

 /**
- * Zustand store definition for managing user preferences related to logging.
- *
- * Includes flags for toggling relative timestamps and automatic scroll behavior.
- */
-type LoggingSettings = {
-  /** Whether to display log timestamps as relative (e.g., "2m 15s ago") instead of absolute. */
-  showRelativeTime: boolean;
-  /** Updates the `showRelativeTime` setting. */
-  setShowRelativeTime: (showRelativeTime: boolean) => void;
-  /** Whether the log view should automatically scroll to the newest entry. */
-  scrollToBottom: boolean;
-  /** Updates the `scrollToBottom` setting. */
-  setScrollToBottom: (scrollToBottom: boolean) => void;
-};
-
-/**
- * Global Zustand store for logging UI preferences.
+ * Local Zustand store for logging UI preferences.
 */
 const useLoggingSettings = create<LoggingSettings>((set) => ({
  showRelativeTime: false,
  setShowRelativeTime: (showRelativeTime: boolean) => set({ showRelativeTime }),
-  scrollToBottom: true,
-  setScrollToBottom: (scrollToBottom: boolean) => set({ scrollToBottom }),
 }));

 /**
@@ -48,13 +33,7 @@ const useLoggingSettings = create<LoggingSettings>((set) => ({
 * @param onUpdate - Optional callback triggered when the log entry updates.
 * @returns A JSX element displaying a formatted log message.
 */
-function LogMessage({
-  recordCell,
-  onUpdate,
-}: {
-  recordCell: Cell<LogRecord>,
-  onUpdate?: () => void,
-}) {
+function LogMessage({ recordCell, onUpdate }: MessageComponentProps) {
  const { showRelativeTime, setShowRelativeTime } = useLoggingSettings();
  const record = useCell(recordCell);

@@ -72,7 +51,7 @@ function LogMessage({
  /** Simplifies the logger name by showing only the last path segment. */
  const normalizedName = record.name.split(".").pop() || record.name;

-  // Notify parent component (e.g. for scroll updates) when this record changes.
+  // Notify the parent component (e.g., for scroll updates) when this record changes.
  useEffect(() => {
    if (onUpdate) onUpdate();
  }, [record, onUpdate]);
@@ -80,11 +59,10 @@ function LogMessage({
  return <div className={`${styles.logContainer} round-md border-lg flex-row gap-md`}>
    <div className={`${styles[`accented${normalizedLevelNo}`]} flex-col padding-sm justify-between`}>
      <span className={"mono bold"}>{record.levelname}</span>
-      <span className={"mono clickable font-small"}
-        onClick={() => setShowRelativeTime(!showRelativeTime)}
-      >{showRelativeTime
-        ? formatDuration(record.relativeCreated)
-        : new Date(record.created * 1000).toLocaleTimeString()
+      <span className={"mono clickable font-small"} onClick={() => setShowRelativeTime(!showRelativeTime)}>{
+        showRelativeTime
+          ? formatDuration(record.relativeCreated)
+          : new Date(record.created * 1000).toLocaleTimeString()
      }</span>
    </div>
    <div className={"flex-col flex-1 padding-sm"}>
@@ -103,12 +81,18 @@ function LogMessage({
 * - A floating "Scroll to bottom" button when not at the bottom.
 *
 * @param recordCells - Array of reactive log records to display.
+ * @param MessageComponent - A component to use to render each log message entry.
 * @returns A scrollable log list component.
 */
-function LogMessages({ recordCells }: { recordCells: Cell<LogRecord>[] }) {
+export function LogMessages({
+  recordCells,
+  MessageComponent,
+}: {
+  recordCells: Cell<LogRecord>[],
+  MessageComponent: ComponentType<MessageComponentProps>,
+}) {
  const scrollableRef = useRef<HTMLDivElement>(null);
-  const lastElementRef = useRef<HTMLLIElement>(null)
-  const { scrollToBottom, setScrollToBottom } = useLoggingSettings();
+  const [scrollToBottom, setScrollToBottom] = useState(true);

  // Disable auto-scroll if the user manually scrolls.
  useEffect(() => {
@@ -127,30 +111,28 @@ function LogMessages({ recordCells }: { recordCells: Cell<LogRecord>[] }) {
  }, [scrollableRef, setScrollToBottom]);

  /**
-   * Scrolls the last log message into view if auto-scroll is enabled,
-   * or if forced (e.g., user clicks "Scroll to bottom").
+   * Scrolls the log messages to the bottom, making the latest messages visible.
   *
   * @param force - If true, forces scrolling even if `scrollToBottom` is false.
   */
-  function scrollLastElementIntoView(force = false) {
-    if ((!scrollToBottom && !force) || !lastElementRef.current) return;
-    lastElementRef.current.scrollIntoView({ behavior: "smooth" });
+  function showBottom(force = false) {
+    if ((!scrollToBottom && !force) || !scrollableRef.current) return;
+    scrollableRef.current.scrollTo({top: scrollableRef.current.scrollHeight, left: 0, behavior: "smooth"});
  }

-  return <div ref={scrollableRef} className={"min-height-0 scroll-y padding-b-md"}>
+  return <div ref={scrollableRef} className={"min-height-0 scroll-y padding-h-lg padding-b-lg flex-1"}>
    <ol className={`${styles.noNumbers} margin-0 flex-col gap-md`}>
      {recordCells.map((recordCell, i) => (
        <li key={`${i}_${recordCell.get().firstRelativeCreated}`}>
-          <LogMessage recordCell={recordCell} onUpdate={scrollLastElementIntoView} />
+          <MessageComponent recordCell={recordCell} onUpdate={showBottom} />
        </li>
      ))}
-      <li ref={lastElementRef}></li>
    </ol>
    {!scrollToBottom && <button
      className={styles.floatingButton}
      onClick={() => {
        setScrollToBottom(true);
-        scrollLastElementIntoView(true);
+        showBottom(true);
      }}
    >
      Scroll to bottom
@@ -167,16 +149,27 @@ function LogMessages({ recordCells }: { recordCells: Cell<LogRecord>[] }) {
 * - Zustand-managed UI settings (auto-scroll, timestamp display).
 *
 * This component uses the `useLogs` hook to fetch and filter logs based on
- * active predicates, and re-renders automatically as new logs arrive.
+ * active predicates and re-renders automatically as new logs arrive.
 *
 * @returns The complete logging UI as a React element.
 */
 export default function Logging() {
-  const [filterPredicates, setFilterPredicates] = useState(new Map<string, LogFilterPredicate>());
+  // By default, filter experiment logs from this debug logger
+  const [filterPredicates, setFilterPredicates] = useState(new Map<string, LogFilterPredicate>([
+    [
+      EXPERIMENT_FILTER_KEY,
+      {
+        predicate: (r) => r.name == EXPERIMENT_LOGGER_NAME ? false : null,
+        priority: 999,
+        value: null,
+      } as LogFilterPredicate,
+    ],
+  ]));
  const { filteredLogs, distinctNames } = useLogs(filterPredicates)
+  distinctNames.delete(EXPERIMENT_LOGGER_NAME);

-  return <div className={`flex-col gap-lg min-height-0 ${styles.loggingContainer}`}>
-    <div className={"flex-row gap-lg justify-between align-center"}>
+  return <div className={`flex-col min-height-0 relative ${styles.loggingContainer}`}>
+    <div className={"flex-row gap-lg justify-between align-center padding-lg"}>
      <h2 className={"margin-0"}>Logs</h2>
      <Filters
        filterPredicates={filterPredicates}
@@ -184,6 +177,6 @@ export default function Logging() {
        agentNames={distinctNames}
      />
    </div>
-    <LogMessages recordCells={filteredLogs} />
+    <LogMessages recordCells={filteredLogs} MessageComponent={LogMessage} />
  </div>;
 }
--- a/src/components/Logging/useLogs.ts
+++ b/src/components/Logging/useLogs.ts
@@ -6,6 +6,21 @@ import {useCallback, useEffect, useRef, useState} from "react";
 import {applyPriorityPredicates, type PriorityFilterPredicate} from "../../utils/priorityFiltering.ts";
 import {cell, type Cell} from "../../utils/cellStore.ts";

+type ExtraLevelName = 'LLM' | 'OBSERVATION' | 'ACTION' | 'CHAT';
+
+export type LevelName = ExtraLevelName | 'DEBUG' | 'INFO' | 'WARNING' | 'ERROR' | 'CRITICAL' | string;
+
+/**
+ * Extra fields that are added to log records in the backend but are not part of the standard `LogRecord` type.
+ *
+ * @property reference - (Optional) A reference identifier linking related log messages.
+ * @property role - (Optional) For chat log messages, the role of the agent that generated the message.
+ */
+type ExtraLogRecordFields = {
+  reference?: string;
+  role?: string;
+}
+
 /**
 * Represents a single log record emitted by the backend logging system.
 *
@@ -15,21 +30,19 @@ import {cell, type Cell} from "../../utils/cellStore.ts";
 * @property levelno - The numeric severity value corresponding to `levelname`.
 * @property created - The UNIX timestamp (in seconds) when this record was created.
 * @property relativeCreated - The time (in milliseconds) since the logging system started.
- * @property reference - (Optional) A reference identifier linking related log messages.
 * @property firstCreated - Timestamp of the first log in this reference group.
 * @property firstRelativeCreated - Relative timestamp of the first log in this reference group.
 */
 export type LogRecord = {
  name: string;
  message: string;
-  levelname: 'LLM' | 'DEBUG' | 'INFO' | 'WARNING' | 'ERROR' | 'CRITICAL' | string;
+  levelname: LevelName;
  levelno: number;
  created: number;
  relativeCreated: number;
-  reference?: string;
  firstCreated: number;
  firstRelativeCreated: number;
-};
+} & ExtraLogRecordFields;

 /**
 * A log filter predicate with priority support, used to determine whether
--- a/src/index.css
+++ b/src/index.css
@@ -58,7 +58,7 @@ button {
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
-  background-color: #1a1a1a;
+  background-color: canvas;
  cursor: pointer;
  transition: border-color 0.25s;
 }
@@ -81,9 +81,6 @@ button:focus-visible {
    --dropdown-menu-background-color: rgb(247, 247, 247);
    --dropdown-menu-border: rgba(207, 207, 207, 0.986);
  }
-  button {
-    background-color: #f9f9f9;
-  }
 }

@media (prefers-color-scheme: dark) {
--- a/src/pages/MonitoringPage/MonitoringPage.module.css
+++ b/src/pages/MonitoringPage/MonitoringPage.module.css
@@ -33,6 +33,22 @@ University within the Software Project course.
  position: static; /* ensures it scrolls away */
 }

+.controlsButtons {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: .25rem;
+  max-width: 260px;
+  flex-wrap: wrap;
+
+  button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
 .phaseProgress {
  margin-top: 0.5rem;
 }
@@ -194,32 +210,6 @@ University within the Software Project course.
  line-height: 1.4;
 }

-/* LOGS */
-.logs {
-  grid-area: logs;
-  background: var(--bg-surface);
-  color: var(--text-main);
-  box-shadow: var(--panel-shadow);
-  padding: 1rem;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-}
-
-.logs textarea {
-  width: 100%;
-  height: 83%;
-  margin-top: 0.5rem;
-  background-color: Canvas;
-  color: CanvasText;
-  border: 1px solid var(--border-color);
-}
-
-.logs button {
-  background: var(--bg-surface);
-  box-shadow: var(--panel-shadow);
-  margin-top: 0.5rem;
-  margin-left: 0.5rem;
-}
-
 /* FOOTER */
 .controlsSection {
  grid-area: footer;
--- a/src/pages/MonitoringPage/MonitoringPage.tsx
+++ b/src/pages/MonitoringPage/MonitoringPage.tsx
@@ -33,6 +33,7 @@ import {
  StatusList, 
  RobotConnected 
 } from './MonitoringPageComponents';
+import ExperimentLogs from "./components/ExperimentLogs.tsx";

 // ----------------------------------------------------------------------
 // 1. State management
@@ -384,17 +385,8 @@ const MonitoringPage: React.FC = () => {
        )}
      </main>

-      {/* LOGS TODO: add actual logs */}
-      <aside className={styles.logs}>
-        <h3>Logs</h3>
-        <div className={styles.logHeader}>
-          <span>Global:</span>
-          <button>ALL</button>
-          <button>Add</button>
-          <button className={styles.live}>Live</button>
-        </div>
-        <textarea defaultValue="Example Log: much log"></textarea>
-      </aside>
+      {/* LOGS */}
+      <ExperimentLogs />

      {/* FOOTER */}
      <footer className={styles.controlsSection}>
--- a/src/pages/MonitoringPage/components/ExperimentLogs.module.css
+++ b/src/pages/MonitoringPage/components/ExperimentLogs.module.css
@@ -0,0 +1,34 @@
+.logs {
+  /* grid-area used in MonitoringPage.module.css */
+  grid-area: logs;
+  box-shadow: var(--panel-shadow);
+
+  height: 900px;
+  width: 450px;
+
+  .live {
+    width: .5rem;
+    height: .5rem;
+    left: .5rem;
+    background: red;
+    border-radius: 50%;
+  }
+}
+
+.chat-message.alternate {
+  align-items: end;
+  text-align: end;
+
+  background-color: color-mix(in oklab, canvas, 75% #86c4fa);
+
+  .message-head {
+    flex-direction: row-reverse;
+  }
+}
+
+.download-list {
+  box-sizing: border-box;
+  list-style: none;
+  height: 50dvh;
+  min-width: 300px;
+}
--- a/src/pages/MonitoringPage/components/ExperimentLogs.tsx
+++ b/src/pages/MonitoringPage/components/ExperimentLogs.tsx
@@ -0,0 +1,186 @@
+import styles from "./ExperimentLogs.module.css";
+import {LogMessages} from "../../../components/Logging/Logging.tsx";
+import {useEffect, useMemo, useState} from "react";
+import {type LogFilterPredicate, type LogRecord, useLogs} from "../../../components/Logging/useLogs.ts";
+import capitalize from "../../../utils/capitalize.ts";
+import {useCell} from "../../../utils/cellStore.ts";
+import {
+  EXPERIMENT_FILTER_KEY,
+  EXPERIMENT_LOGGER_NAME,
+  type LoggingSettings,
+  type MessageComponentProps,
+} from "../../../components/Logging/Definitions.ts";
+import formatDuration from "../../../utils/formatDuration.ts";
+import {create} from "zustand";
+import Dialog from "../../../components/Dialog.tsx";
+import delayedResolve from "../../../utils/delayedResolve.ts";
+
+/**
+ * Local Zustand store for logging UI preferences.
+ */
+const useLoggingSettings = create<LoggingSettings>((set) => ({
+  showRelativeTime: false,
+  setShowRelativeTime: (showRelativeTime: boolean) => set({ showRelativeTime }),
+}));
+
+/**
+ * A dedicated component for rendering chat messages.
+ *
+ * @param record The chat record to render.
+ */
+function ChatMessage({ record }: { record: LogRecord }) {
+  const { showRelativeTime, setShowRelativeTime } = useLoggingSettings();
+
+  const reverse = record.role === "user" ? styles.alternate : "";
+
+  return <div className={`${styles.chatMessage} ${reverse} flex-col padding-md padding-h-lg shadow-md round-md`}>
+    <div className={`${styles.messageHead} flex-row gap-md align-center`}>
+      <span className={"bold"}>{capitalize(record.role ?? "unknown")}</span>
+      <span className={"font-small"}>•</span>
+      <span className={"mono clickable font-small"} onClick={() => setShowRelativeTime(!showRelativeTime)}>{
+        showRelativeTime
+          ? formatDuration(record.relativeCreated)
+          : new Date(record.created * 1000).toLocaleTimeString()
+      }</span>
+    </div>
+    <span>{record.message}</span>
+  </div>
+}
+
+/**
+ * A generic log message component showing the log level, time, and message text.
+ *
+ * @param record The log record to render.
+ */
+function DefaultMessage({ record }: { record: LogRecord }) {
+  const { showRelativeTime, setShowRelativeTime } = useLoggingSettings();
+
+  return <div>
+    <div className={"flex-row gap-md align-center"}>
+      <span className={"font-small"}>{record.levelname}</span>
+      <span className={"font-small"}>•</span>
+      <span className={"mono clickable font-small"} onClick={() => setShowRelativeTime(!showRelativeTime)}>{
+        showRelativeTime
+          ? formatDuration(record.relativeCreated)
+          : new Date(record.created * 1000).toLocaleTimeString()
+      }</span>
+    </div>
+    <span>{record.message}</span>
+  </div>;
+}
+
+/**
+ * A custom component for rendering experiment messages, which might include chat messages.
+ *
+ * @param recordCell The cell containing the log record to render.
+ * @param onUpdate A callback to notify the parent component when the record changes.
+ */
+function ExperimentMessage({recordCell, onUpdate}: MessageComponentProps) {
+  const record = useCell(recordCell);
+
+  // Notify the parent component (e.g., for scroll updates) when this record changes.
+  useEffect(() => {
+    if (onUpdate) onUpdate();
+  }, [record, onUpdate]);
+
+  if (record.levelname == "CHAT") {
+    return <ChatMessage record={record} />
+  } else {
+    return <DefaultMessage record={record} />
+  }
+}
+
+/**
+ * A download dialog listing experiment logs to download.
+ *
+ * @param filenames The list of available experiment logs to download.
+ * @param refresh A callback to refresh the list of available experiment logs.
+ */
+function DownloadScreen({filenames, refresh}: {filenames: string[] | null, refresh: () => void}) {
+  const list = (() => {
+    if (filenames == null) return <div className={`${styles.downloadList} flex-col align-center justify-center`}>
+      <p>Loading...</p>
+    </div>;
+    if (filenames.length === 0) return <div className={`${styles.downloadList} flex-col align-center justify-center`}>
+      <p>No files available.</p>
+    </div>
+
+    return <ol className={`${styles.downloadList} margin-0 padding-h-lg scroll-y`}>
+      {filenames!.map((filename) => (
+        <li><a key={filename} href={`http://localhost:8000/api/logs/files/${filename}`} download={filename}>{filename}</a></li>
+      ))}
+    </ol>;
+  })();
+
+  return <div className={"flex-col"}>
+    <p className={"margin-lg"}>Select a file to download:</p>
+    {list}
+    <button onClick={refresh} className={"margin-lg shadow-sm"}>Refresh</button>
+  </div>;
+}
+
+/**
+ * A button that opens a download dialog for experiment logs when pressed.
+ */
+function DownloadButton() {
+  const [showModal, setShowModal] = useState(false);
+  const [filenames, setFilenames] = useState<string[] | null>(null);
+
+  async function getFiles(): Promise<string[]> {
+    const response = await fetch("http://localhost:8000/api/logs/files");
+    const files = await response.json();
+    files.sort();
+    return files;
+  }
+
+  useEffect(() => {
+    getFiles().then(setFilenames);
+  }, [showModal]);
+
+  return <>
+    <button className={"shadow-sm"} onClick={() => setShowModal((curr) => !curr)}>Download...</button>
+    <Dialog open={showModal} close={() => setShowModal(false)} classname={"padding-0 round-lg"}>
+      <DownloadScreen filenames={filenames} refresh={async () => {
+        setFilenames(null);
+        const files = await delayedResolve(getFiles(), 250);
+        setFilenames(files);
+      }} />
+    </Dialog>
+  </>;
+}
+
+/**
+ * A component for rendering experiment logs. This component uses the `useLogs` hook with a filter to show only
+ * experiment logs.
+ */
+export default function ExperimentLogs() {
+  // Show only experiment logs in this logger
+  const filters = useMemo(() => new Map<string, LogFilterPredicate>([
+    [
+      EXPERIMENT_FILTER_KEY,
+      {
+        predicate: (r) => r.name == EXPERIMENT_LOGGER_NAME,
+        priority: 999,
+        value: null,
+      } as LogFilterPredicate,
+    ],
+  ]), []);
+
+  const { filteredLogs } = useLogs(filters);
+
+  return <aside className={`${styles.logs} flex-col relative`}>
+    <div className={`${styles.head} padding-lg`}>
+      <div className={"flex-row align-center justify-between"}>
+        <h3>Logs</h3>
+        <div className={"flex-row gap-md align-center"}>
+          <div className={`flex-row align-center gap-md relative padding-md shadow-sm round-md`}>
+            <div className={styles.live}></div>
+            <span>Live</span>
+          </div>
+          <DownloadButton />
+        </div>
+      </div>
+    </div>
+    <LogMessages recordCells={filteredLogs} MessageComponent={ExperimentMessage} />
+  </aside>;
+}
--- a/src/utils/capitalize.ts
+++ b/src/utils/capitalize.ts
@@ -0,0 +1,3 @@
+export default function (s: string) {
+    return s.charAt(0).toUpperCase() + s.slice(1);
+}
--- a/src/utils/delayedResolve.ts
+++ b/src/utils/delayedResolve.ts
@@ -0,0 +1,7 @@
+export default async function <T>(promise: Promise<T>, minDelayMs: number): Promise<T> {
+  const [result] = await Promise.all([
+    promise,
+    new Promise(resolve => setTimeout(resolve, minDelayMs))
+  ]);
+  return result;
+}
--- a/src/utils/priorityFiltering.ts
+++ b/src/utils/priorityFiltering.ts
@@ -7,7 +7,7 @@ export type PriorityFilterPredicate<T> = {
 }

 /**
- * Applies a list of priority predicates to an element. For all predicates that don't return null, if the ones with the highest level return true, then this function returns true.
+ * Applies a list of priority predicates to an element. For all predicates that don't return null, if the ones with the highest level return true, then this function returns true. Or conversely, if the one with the highest level returns false, then this function returns false.
 * @param element The element to apply the predicates to.
 * @param predicates The list of predicates to apply.
 */
--- a/test/components/Logging/Logging.test.tsx
+++ b/test/components/Logging/Logging.test.tsx
@@ -14,8 +14,6 @@ const loggingStoreRef: { current: null | { setState: (state: Partial<LoggingSett
 type LoggingSettingsState = {
  showRelativeTime: boolean;
  setShowRelativeTime: (show: boolean) => void;
-  scrollToBottom: boolean;
-  setScrollToBottom: (scroll: boolean) => void;
 };

 jest.mock("zustand", () => {
@@ -62,8 +60,8 @@ type LoggingComponent = typeof import("../../../src/components/Logging/Logging.t
 let Logging: LoggingComponent;

 beforeAll(async () => {
-  if (!Element.prototype.scrollIntoView) {
-    Object.defineProperty(Element.prototype, "scrollIntoView", {
+  if (!Element.prototype.scrollTo) {
+    Object.defineProperty(Element.prototype, "scrollTo", {
      configurable: true,
      writable: true,
      value: function () {},
@@ -87,7 +85,6 @@ afterEach(() => {
 function resetLoggingStore() {
  loggingStoreRef.current?.setState({
    showRelativeTime: false,
-    scrollToBottom: true,
  });
 }

@@ -154,7 +151,7 @@ describe("Logging component", () => {
    ];
    mockUseLogs.mockReturnValue({filteredLogs: logs, distinctNames: new Set()});

-    const scrollSpy = jest.spyOn(Element.prototype, "scrollIntoView").mockImplementation(() => {});
+    const scrollSpy = jest.spyOn(Element.prototype, "scrollTo").mockImplementation(() => {});
    const user = userEvent.setup();
    const view = render(<Logging/>);

@@ -178,7 +175,7 @@ describe("Logging component", () => {
    const logCell = makeCell({message: "Initial", firstRelativeCreated: 42});
    mockUseLogs.mockReturnValue({filteredLogs: [logCell], distinctNames: new Set()});

-    const scrollSpy = jest.spyOn(Element.prototype, "scrollIntoView").mockImplementation(() => {});
+    const scrollSpy = jest.spyOn(Element.prototype, "scrollTo").mockImplementation(() => {});
    render(<Logging/>);

    await waitFor(() => {
@@ -212,7 +209,7 @@ describe("Logging component", () => {

    const initialMap = firstProps.filterPredicates;
    expect(initialMap).toBeInstanceOf(Map);
-    expect(initialMap.size).toBe(0);
+    expect(initialMap.size).toBe(1);  // Initially, only filter out experiment logs
    expect(mockUseLogs).toHaveBeenCalledWith(initialMap);

    const updatedPredicate: LogFilterPredicate = {
--- a/test/setupTests.ts
+++ b/test/setupTests.ts
@@ -3,3 +3,47 @@
 // © Copyright Utrecht University (Department of Information and Computing Sciences)
 // Adds jest-dom matchers for React testing library
 import '@testing-library/jest-dom';
+
+// Minimal browser API mocks for the test environment.
+// Fetch
+if (!globalThis.fetch) {
+  globalThis.fetch = jest.fn(async () => ({
+    ok: true,
+    status: 200,
+    json: async () => [],
+    text: async () => '',
+  })) as unknown as typeof fetch;
+}
+
+// EventSource
+if (!globalThis.EventSource) {
+  class MockEventSource {
+    url: string;
+    readyState = 1;
+    onmessage: ((event: MessageEvent) => void) | null = null;
+    onerror: ((event: Event) => void) | null = null;
+    onopen: ((event: Event) => void) | null = null;
+
+    constructor(url: string) {
+      this.url = url;
+    }
+
+    close() {
+      this.readyState = 2;
+    }
+
+    addEventListener(type: string, listener: (event: MessageEvent) => void) {
+      if (type === 'message') {
+        this.onmessage = listener;
+      }
+    }
+
+    removeEventListener(type: string, listener: (event: MessageEvent) => void) {
+      if (type === 'message' && this.onmessage === listener) {
+        this.onmessage = null;
+      }
+    }
+  }
+
+  globalThis.EventSource = MockEventSource as unknown as typeof EventSource;
+}
--- a/test/utils/capitalize.test.ts
+++ b/test/utils/capitalize.test.ts
@@ -0,0 +1,34 @@
+import capitalize from "../../src/utils/capitalize.ts";
+
+describe('capitalize', () => {
+  it('capitalizes the first letter of a lowercase word', () => {
+    expect(capitalize('hello')).toBe('Hello');
+  });
+
+  it('keeps the first letter capitalized if already uppercase', () => {
+    expect(capitalize('Hello')).toBe('Hello');
+  });
+
+  it('handles single character strings', () => {
+    expect(capitalize('a')).toBe('A');
+    expect(capitalize('A')).toBe('A');
+  });
+
+  it('returns empty string for empty input', () => {
+    expect(capitalize('')).toBe('');
+  });
+
+  it('only capitalizes the first letter, leaving the rest unchanged', () => {
+    expect(capitalize('hELLO')).toBe('HELLO');
+    expect(capitalize('hello world')).toBe('Hello world');
+  });
+
+  it('handles strings starting with numbers', () => {
+    expect(capitalize('123abc')).toBe('123abc');
+  });
+
+  it('handles strings starting with special characters', () => {
+    expect(capitalize('!hello')).toBe('!hello');
+    expect(capitalize(' hello')).toBe(' hello');
+  });
+});
--- a/test/utils/delayedResolve.test.ts
+++ b/test/utils/delayedResolve.test.ts
@@ -0,0 +1,77 @@
+import { describe, it, expect, beforeEach, afterEach } from '@jest/globals';
+import delayedResolve from "../../src/utils/delayedResolve.ts";
+
+describe('delayedResolve', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('returns the resolved value of the promise', async () => {
+    const resultPromise = delayedResolve(Promise.resolve('hello'), 100);
+    await jest.advanceTimersByTimeAsync(100);
+    expect(await resultPromise).toBe('hello');
+  });
+
+  it('waits at least minDelayMs before resolving', async () => {
+    let resolved = false;
+    const resultPromise = delayedResolve(Promise.resolve('fast'), 100);
+    resultPromise.then(() => { resolved = true; });
+
+    await jest.advanceTimersByTimeAsync(50);
+    expect(resolved).toBe(false);
+
+    await jest.advanceTimersByTimeAsync(50);
+    expect(resolved).toBe(true);
+  });
+
+  it('resolves immediately after slow promise if it exceeds minDelayMs', async () => {
+    let resolved = false;
+    const slowPromise = new Promise<string>(resolve =>
+      setTimeout(() => resolve('slow'), 150)
+    );
+    const resultPromise = delayedResolve(slowPromise, 50);
+    resultPromise.then(() => { resolved = true; });
+
+    await jest.advanceTimersByTimeAsync(50);
+    expect(resolved).toBe(false);
+
+    await jest.advanceTimersByTimeAsync(100);
+    expect(resolved).toBe(true);
+    expect(await resultPromise).toBe('slow');
+  });
+
+  it('propagates rejections from the promise', async () => {
+    const error = new Error('test error');
+    const rejectedPromise = Promise.reject(error);
+
+    const resultPromise = delayedResolve(rejectedPromise, 100);
+    const assertion = expect(resultPromise).rejects.toThrow('test error');
+
+    await jest.advanceTimersByTimeAsync(100);
+
+    await assertion;
+  });
+
+  it('works with different value types', async () => {
+    const test = async <T>(value: T) => {
+      const resultPromise = delayedResolve(Promise.resolve(value), 10);
+      await jest.advanceTimersByTimeAsync(10);
+      return resultPromise;
+    };
+
+    expect(await test(42)).toBe(42);
+    expect(await test({ foo: 'bar' })).toEqual({ foo: 'bar' });
+    expect(await test([1, 2, 3])).toEqual([1, 2, 3]);
+    expect(await test(null)).toBeNull();
+  });
+
+  it('handles zero delay', async () => {
+    const resultPromise = delayedResolve(Promise.resolve('instant'), 0);
+    await jest.advanceTimersByTimeAsync(0);
+    expect(await resultPromise).toBe('instant');
+  });
+});