- ${this.renderModelButton(
- 'gemini-2.5-flash',
- 'Gemini 2.5 Flash',
- ApiKeyType.GEMINI_API_KEY,
- )}
- ${this.renderModelButton(
- 'gemini-2.5-pro',
- 'Gemini 2.5 Pro',
- ApiKeyType.GEMINI_API_KEY,
- )}
+
+
LLM API
+
+ ${this.renderApiTypeButton('Gemini', ApiKeyType.GEMINI_API_KEY)}
+ ${this.renderApiTypeButton('OpenAI', ApiKeyType.OPENAI_API_KEY)}
+ ${this.renderApiTypeButton('Anthropic', ApiKeyType.CLAUDE_API_KEY)}
+ ${this.renderApiTypeButton('Ollama', ApiKeyType.OLLAMA_CUSTOM_URL)}
`;
}
- private renderModelButton(
- modelId: string,
- modelName: string,
- apiType: ApiKeyType,
- ) {
- const updateModel = () => {
- this.model = modelId;
+ private renderApiTypeButton(apiName: string, apiType: ApiKeyType) {
+ const updateApiType = () => {
+ this.apiType = apiType;
+ // Set a default model name when switching API types
+ if (apiType === ApiKeyType.GEMINI_API_KEY) {
+ this.model = 'gemini-3-pro-preview';
+ } else if (apiType === ApiKeyType.OPENAI_API_KEY) {
+ this.model = 'gpt-5.1-2025-11-13';
+ } else if (apiType === ApiKeyType.CLAUDE_API_KEY) {
+ this.model = 'claude-opus-4-5-20251101';
+ } else if (apiType === ApiKeyType.OLLAMA_CUSTOM_URL) {
+ this.model = 'llama3.2';
+ }
+ // Reset web search when switching to OpenAI or Ollama (not supported)
+ if (
+ apiType === ApiKeyType.OLLAMA_CUSTOM_URL ||
+ apiType === ApiKeyType.OPENAI_API_KEY
+ ) {
+ this.useWebSearch = false;
+ }
};
- const isActive = modelId == this.model;
+ const isActive = apiType === this.apiType;
return html`
- ${modelName}
+ ${apiName}
`;
}
+ private renderModelId() {
+ const updateModel = (e: InputEvent) => {
+ const content = (e.target as HTMLTextAreaElement).value;
+ this.model = content;
+ };
+
+ return html`
+
+
+
+
+ `;
+ }
+
+ private renderWebSearchOption() {
+ // Only show for Gemini and Anthropic (OpenAI and Ollama don't support web search in chat completions)
+ if (
+ this.apiType === ApiKeyType.OLLAMA_CUSTOM_URL ||
+ this.apiType === ApiKeyType.OPENAI_API_KEY
+ ) {
+ return nothing;
+ }
+
+ const toggleWebSearch = (event: Event) => {
+ const checked = (event.target as HTMLInputElement).checked;
+ this.useWebSearch = checked;
+ };
+
+ return html`
+
+
+
+
Enable web search
+
+ `;
+ }
+
private renderPromptContext() {
const updatePromptContext = (e: InputEvent) => {
const content = (e.target as HTMLTextAreaElement).value;
@@ -172,14 +270,99 @@ export class AgentParticipantDialog extends MobxLitElement {
};
return html`
-
-
+
+
+
+
+ Additional context to include in the agent's prompts.
+
+
+ `;
+ }
+
+ private renderChatSettings() {
+ return html`
+
+
+
+ Agent's typing speed. Leave empty for instant messages.
+
+
+ {
+ const value = (e.target as HTMLInputElement).value;
+ this.wordsPerMinute = value === '' ? null : Number(value);
+ }}
+ />
+
+
+
+
+
+ Number of chat messages that must exist before the agent can respond.
+
+
+ {
+ const value = Number((e.target as HTMLInputElement).value);
+ if (!isNaN(value)) {
+ this.minMessagesBeforeResponding = value;
+ }
+ }}
+ />
+
+
+
+
{
+ this.canSelfTriggerCalls = (e.target as HTMLInputElement).checked;
+ }}
+ >
+
+
+ Can respond multiple times in a row
+
+ (Agent's own messages can trigger new responses)
+
+
+
+
+
+
+ Maximum total responses during the chat. Leave empty for no limit.
+
+
+ {
+ const value = (e.target as HTMLInputElement).value;
+ this.maxResponses = value === '' ? null : Number(value);
+ }}
+ />
+
+
`;
}
}
diff --git a/frontend/src/components/experiment_dashboard/cohort_settings_dialog.scss b/frontend/src/components/experiment_dashboard/cohort_settings_dialog.scss
index 415a3e3b2..b51865567 100644
--- a/frontend/src/components/experiment_dashboard/cohort_settings_dialog.scss
+++ b/frontend/src/components/experiment_dashboard/cohort_settings_dialog.scss
@@ -4,6 +4,7 @@
:host {
@include common.overlay;
+ z-index: 20; // Above cohort-list header (z-index: 10)
}
.dialog {
diff --git a/frontend/src/components/experiment_dashboard/participant_stats.scss b/frontend/src/components/experiment_dashboard/participant_stats.scss
index 46c22b68e..cde400431 100644
--- a/frontend/src/components/experiment_dashboard/participant_stats.scss
+++ b/frontend/src/components/experiment_dashboard/participant_stats.scss
@@ -40,3 +40,80 @@ h4 {
.stats-wrapper {
padding: 0 common.$spacing-large;
}
+
+// Agent log section
+.agent-log-wrapper {
+ @include common.flex-column;
+ gap: common.$spacing-medium;
+ padding: 0 common.$spacing-large;
+}
+
+.agent-config {
+ margin-bottom: common.$spacing-medium;
+}
+
+.agent-log-summary {
+ @include common.flex-row;
+ flex-wrap: wrap;
+ gap: common.$spacing-small;
+ margin-bottom: common.$spacing-medium;
+}
+
+.empty-message {
+ color: var(--md-sys-color-outline);
+ padding: common.$spacing-medium 0;
+}
+
+.log-entry {
+ @include common.flex-column;
+ border: 1px solid var(--md-sys-color-outline-variant);
+ border-radius: common.$spacing-small;
+ gap: common.$spacing-small;
+ padding: common.$spacing-medium;
+ margin-bottom: common.$spacing-small;
+}
+
+.log-entry-header {
+ @include common.flex-row-align-center;
+ flex-wrap: wrap;
+ gap: common.$spacing-small;
+}
+
+.log-timestamp {
+ @include typescale.label-small;
+ color: var(--md-sys-color-outline);
+}
+
+.log-duration {
+ @include typescale.label-small;
+ color: var(--md-sys-color-outline);
+}
+
+.log-description {
+ @include typescale.body-small;
+ color: var(--md-sys-color-on-surface-variant);
+}
+
+details {
+ margin-top: common.$spacing-small;
+}
+
+details summary {
+ @include typescale.label-medium;
+ cursor: pointer;
+ color: var(--md-sys-color-primary);
+}
+
+details pre {
+ background: var(--md-sys-color-surface-variant);
+ border-radius: common.$spacing-small;
+ overflow: auto;
+ padding: common.$spacing-medium;
+ margin-top: common.$spacing-small;
+ white-space: pre-wrap;
+ word-break: break-word;
+}
+
+details code {
+ font-size: 90%;
+}
diff --git a/frontend/src/components/experiment_dashboard/participant_stats.ts b/frontend/src/components/experiment_dashboard/participant_stats.ts
index d82a41140..b7641f99c 100644
--- a/frontend/src/components/experiment_dashboard/participant_stats.ts
+++ b/frontend/src/components/experiment_dashboard/participant_stats.ts
@@ -15,6 +15,12 @@ import {
StageKind,
UnifiedTimestamp,
calculatePayoutTotal,
+ LogEntry,
+ LogEntryType,
+ ModelLogEntry,
+ ModelResponseStatus,
+ getUnifiedDurationSeconds,
+ convertUnifiedTimestampToDateTime,
} from '@deliberation-lab/utils';
import {getCohortName} from '../../shared/cohort.utils';
import {getParticipantInlineDisplay} from '../../shared/participant.utils';
@@ -56,7 +62,7 @@ export class Preview extends MobxLitElement {
return html`
${this.renderChips()} ${this.renderTable()} ${this.renderStats()}
- ${this.renderStageDatas()}
+ ${this.renderAgentLog()} ${this.renderStageDatas()}
`;
}
@@ -329,6 +335,126 @@ export class Preview extends MobxLitElement {
${label}: ${convertUnifiedTimestampToDate(value)}
`;
}
+
+ /** Get logs filtered to this participant */
+ private getParticipantLogs(): ModelLogEntry[] {
+ if (!this.profile) return [];
+ const privateId = this.profile.privateId;
+ return this.experimentManager.logs
+ .filter(
+ (log): log is ModelLogEntry =>
+ log.type === LogEntryType.MODEL && log.privateId === privateId,
+ )
+ .sort((a, b) => {
+ // Sort by query timestamp descending (newest first)
+ const aTime = Number(a.queryTimestamp ?? 0);
+ const bTime = Number(b.queryTimestamp ?? 0);
+ return bTime - aTime;
+ });
+ }
+
+ /** Render the Agent log section */
+ private renderAgentLog() {
+ if (!this.profile?.agentConfig) {
+ return nothing;
+ }
+
+ const agentConfig = this.profile.agentConfig;
+ const logs = this.getParticipantLogs();
+
+ return html`
+
Agent log
+
+ ${this.renderAgentConfig(agentConfig)}
+
+
+ Total API calls: ${logs.length}
+
+
+ Successful:
+ ${logs.filter((l) => l.response.status === ModelResponseStatus.OK)
+ .length}
+
+
+ Failed:
+ ${logs.filter((l) => l.response.status !== ModelResponseStatus.OK)
+ .length}
+
+
+ ${logs.length === 0
+ ? html`
No API calls yet
`
+ : logs.map((log) => this.renderLogEntry(log))}
+
+
+ `;
+ }
+
+ /** Render agent configuration info */
+ private renderAgentConfig(
+ agentConfig: NonNullable
,
+ ) {
+ return html`
+
+
+
+
API Type
+
${agentConfig.modelSettings.apiType}
+
+
+
Model
+
${agentConfig.modelSettings.modelName}
+
+ ${agentConfig.promptContext
+ ? html`
+
+
Prompt context
+
${agentConfig.promptContext}
+
+ `
+ : nothing}
+
+
+
+ ${log.description
+ ? html`
${log.description}
`
+ : nothing}
+
+ Prompt
+ ${log.prompt}
+
+
+ Response
+ ${JSON.stringify(log.response, null, 2)}
+
+