Add user templates for experiments.

docs/_data/nav.yml

@@ -4,6 +4,8 @@
     url: /researchers/getting-started
   - title: Create an experiment
     url: /researchers/create-experiment
+  - title: Create a template
+    url: /researchers/templates
   - title: Run an experiment
     url: /researchers/run-experiment
   - title: Add LLM mediators to chat

docs/researchers/create-experiment.md

@@ -21,6 +21,9 @@ from the home page gallery.
   alt="Screenshot of Deliberate Lab experiment editor with stages"
 />
 
+### Using templates
+You can also start from a template to quickly set up your experiment. See [Experiment templates](./templates) for more information on how to use, save, and update templates.
+
 ## Edit or fork experiment
 To edit an experiment, click on its card in the home page gallery.
 

docs/researchers/templates.md

@@ -0,0 +1,44 @@
+---
+title: Experiment templates
+layout: default
+---
+
+# Experiment templates
+
+Experiment templates allow you to quickly create new experiments based on pre-defined configurations. You can use built-in templates or create your own.
+
+## Loading a template
+
+When building an experiment, you can load a template to populate the stages and settings.
+
+1.  In the experiment builder, click the **Load template** button in the left sidebar.
+2.  Browse the gallery of available templates.
+    *   **Built-in Templates**: Pre-defined templates included with Deliberate Lab.
+    *   **Saved Templates**: Templates you or your team have created and saved.
+3.  Click on a template to apply it to your current experiment. **Warning: This will overwrite your current stages and settings.**
+
+## Saving a new template
+
+You can save your current experiment configuration as a new template for future use.
+
+1.  In the experiment builder, click the **Save as template** button in the top right corner.
+2.  Enter a name and description for your template.
+3.  Click **Save**.
+
+## Updating a template
+
+If you have loaded a template and made changes, you can update the original template with your new configuration.
+
+1.  Load a template.
+2.  Make your desired changes to the stages or settings.
+3.  Click the **Update template** button in the top right corner.
+4.  Confirm the update in the dialog.
+
+## Deleting a template
+
+You can delete saved templates that are no longer needed.
+
+1.  Click the **Load template** button in the left sidebar.
+2.  Find the template you want to delete in the **Saved Templates** section.
+3.  Click the delete icon (trash can) on the template card.
+4.  Confirm the deletion.

frontend/src/components/experiment_builder/experiment_builder.scss

@@ -121,6 +121,10 @@
     gap: common.$spacing-medium;
   }
 
+    .actions {
+      @include common.flex-row-align-center;
+      gap: common.$spacing-medium;
+    }
   .left {
     flex-grow: 1;
   }

frontend/src/components/experiment_builder/experiment_builder.ts

@@ -25,6 +25,8 @@ import './agent_persona_editor';
 import './experiment_builder_nav';
 import './experiment_settings_editor';
 import './stage_builder_dialog';
+import './save_template_dialog';
+import './share_template_dialog';
 import './variable_editor';
 
 import {MobxLitElement} from '@adobe/lit-mobx';
@@ -79,9 +81,24 @@ export class ExperimentBuilder extends MobxLitElement {
     return html`
       ${this.renderPanelView()} ${this.renderExperimentConfigBuilder()}
       ${this.renderExperimenterSettings()} ${this.renderStageBuilderDialog()}
+      ${this.renderSaveTemplateDialog()} ${this.renderShareTemplateDialog()}
     `;
   }
 
+  private renderShareTemplateDialog() {
+    if (this.experimentEditor.showShareTemplateDialog) {
+      return html`<share-template-dialog></share-template-dialog>`;
+    }
+    return nothing;
+  }
+
+  private renderSaveTemplateDialog() {
+    if (this.experimentEditor.showSaveTemplateDialog) {
+      return html`<save-template-dialog></save-template-dialog>`;
+    }
+    return nothing;
+  }
+
   private renderStageBuilderDialog() {
     if (this.experimentEditor.showStageBuilderDialog) {
       return html`<stage-builder-dialog
@@ -268,7 +285,38 @@ export class ExperimentBuilder extends MobxLitElement {
           }}
         >
         </pr-icon-button>
-      </pr-tootipt>
+      </pr-tooltip>
+    `;
+  }
+
+  private renderSaveTemplateButton() {
+    return html`
+      ${this.experimentEditor.loadedTemplateId
+        ? html`
+            <pr-button
+              icon="update"
+              color="neutral"
+              variant="outlined"
+              ?disabled=${!this.experimentEditor.canEditStages}
+              @click=${() => {
+                this.experimentEditor.setShowSaveTemplateDialog(true, 'update');
+              }}
+            >
+              Update template
+            </pr-button>
+          `
+        : nothing}
+      <pr-button
+        icon="save"
+        color="neutral"
+        variant="outlined"
+        ?disabled=${!this.experimentEditor.canEditStages}
+        @click=${() => {
+          this.experimentEditor.setShowSaveTemplateDialog(true, 'new');
+        }}
+      >
+        Save as template
+      </pr-button>
     `;
   }
 
@@ -481,7 +529,10 @@ export class ExperimentBuilder extends MobxLitElement {
     return html`
       <experiment-builder-nav></experiment-builder-nav>
       <div class="experiment-builder">
-        <div class="header">${this.renderTitle()} ${this.renderActions()}</div>
+        <div class="header">
+          ${this.renderTitle()}
+          <div class="actions">${this.renderActions()}</div>
+        </div>
         ${this.renderVariableCheck()}
         <div class="content">${this.renderContent()}</div>
       </div>

frontend/src/components/experiment_builder/save_template_dialog.scss

@@ -0,0 +1,86 @@
+@use '../../sass/typescale';
+
+:host {
+  display: block;
+}
+
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.32);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+}
+
+.dialog {
+  background: var(--md-sys-color-surface);
+  border-radius: 8px;
+  width: 500px;
+  max-width: 90%;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  color: var(--md-sys-color-on-surface);
+}
+
+.header {
+  padding: 16px;
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title {
+  @include typescale.title-large;
+}
+
+.body {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.footer {
+  padding: 16px;
+  border-top: 1px solid var(--md-sys-color-outline-variant);
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+pr-textarea {
+  width: 100%;
+}
+
+.error-message {
+  @include typescale.label-small;
+  color: var(--md-sys-color-error);
+  margin-top: 4px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  label {
+    @include typescale.label-medium;
+  }
+}
+
+select {
+  @include typescale.label-medium;
+  width: 100%;
+  padding: 8px;
+  border: 1px solid var(--md-sys-color-outline);
+  border-radius: 4px;
+  background: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+}