Refactor agent mediators to work at experiment level instead of within chat stage

firestore/firestore.rules

@@ -100,11 +100,28 @@ service cloud.firestore {
         allow write: if isExperimenter();
       }
 
-      match/cohorts/{cohortId} {
+      match /agents/{agentId} {
+        allow get: if isExperimenter();
+        allow list: if isExperimenter();
+        // Experimenters can use cloud function endpoints
+        allow write: if false;
+
+        match /chatPrompts/{promptId} {
+          allow read: if isExperimenter();
+          allow write: if false; // Write using cloud functions
+        }
+
+        match /participantPrompts/{promptId} {
+          allow read: if isExperimenter();
+          allow write: if false; // Write using cloud functions
+        }
+      }
+
+      match /cohorts/{cohortId} {
         allow get: if true; // Public read
         allow list: if canEditExperiment(experimentId);
 
-        // TODO: Experimenters can use cloud function endpoints
+        // Experimenters can use cloud function endpoints
         allow write: if false;
 
         match /publicStageData/{stageId} {
@@ -130,6 +147,17 @@ service cloud.firestore {
         }
       }
 
+      match /mediators/{mediatorId} {
+        // TODO: Only allow experimenters to read mediators and use
+        // triggers to populate mediatorPublicData for participants
+        // to read
+        allow get: if true;
+        allow list: if true;
+
+        // Use cloud function endpoints
+        allow update: if false;
+      }
+
       match /participants/{participantPrivateId} {
         // TODO: Only allow experimenters to read participants and use
         // triggers to populate participantPublicData for participants

frontend/src/components/experiment_builder/agent_editor.scss

@@ -3,15 +3,48 @@
 @use '../../sass/typescale';
 
 :host {
+  @include common.flex-row;
+  height: 100%;
+  overflow: auto;
+}
+
+.agent-nav {
   @include common.flex-column;
+  border-right: 1px solid var(--md-sys-color-outline-variant);
+  flex-shrink: 0;
+  gap: common.$spacing-medium;
   overflow: auto;
   padding: common.$main-content-padding;
+  width: common.$sidenav-width;
+}
+
+.nav-item {
+  border-radius: common.$spacing-small;
+  padding: common.$spacing-medium;
+
+  &:hover,
+  &:focus {
+    background: var(--md-sys-color-surface-variant);
+    cursor: pointer;
+  }
+
+  &.active,
+  &.active:hover,
+  &.active:focus {
+    background: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+    cursor: initial;
+  }
 }
 
 .agent-wrapper {
   @include common.flex-column;
+  align-items: start;
+  flex-grow: 1;
   gap: common.$spacing-xl;
   max-width: common.$info-content-max-width;
+  overflow: auto;
+  padding: common.$main-content-padding;
 }
 
 .section-header {
@@ -30,6 +63,7 @@
 .field {
   @include common.flex-column;
   gap: common.$spacing-small;
+  width: 100%;
 }
 
 .field-title,
@@ -72,7 +106,6 @@
 }
 
 pr-textarea {
-  flex-grow: 1;
   width: 100%;
 }
 
@@ -92,6 +125,7 @@ pr-textarea {
 
 .divider {
   border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  width: 100%;
 }
 
 .tab {
@@ -101,5 +135,31 @@ pr-textarea {
 
 .error-message {
   font-style: italic;
-  color: red;
+  color: var(--md-sys-color-error);
+}
+
+.required {
+  color: var(--md-sys-color-error);
+}
+
+.action-buttons {
+  @include common.flex-row;
+  flex-wrap: wrap;
+  gap: common.$spacing-medium;
+}
+
+.header {
+  @include common.flex-row;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.title {
+  @include typescale.title-large;
+}
+
+.chip {
+  @include common.chip;
+  @include typescale.label-small;
+  width: max-content;
 }