@nauticana/sail 1.1.33 → 1.1.34

package/src/agent/component/studio_page.html

@@ -0,0 +1,269 @@
+<div class="studio">
+  <aside class="studio__rail" aria-label="Agents">
+    <mat-slide-toggle [checked]="showArchived()" (change)="showArchived.set($event.checked)">Show archived</mat-slide-toggle>
+    @for (group of groups(); track group.name) {
+      <section class="studio__group" [attr.aria-label]="group.name">
+        <h3 class="studio__group-name">{{ group.name }}</h3>
+        <ul>
+          @for (agent of group.agents; track agent.agent_name) {
+            <li>
+              <button type="button" class="studio__agent" [class.selected]="agent.agent_name === selectedName()"
+                [attr.aria-current]="agent.agent_name === selectedName()" (click)="select(agent.agent_name)">
+                <span class="studio__agent-name">{{ agent.display_name }}</span>
+                <span [class]="'studio__readiness studio__readiness--' + agent.readiness">{{ agent.readiness }}</span>
+                <span class="studio__agent-meta">
+                  @if (agent.is_default) { <span>Default</span> }
+                  @if (agent.archived) { <span>Archived</span> }
+                  @if (agent.published_version > 0) { <span>v{{ agent.published_version }}</span> } @else { <span>Never published</span> }
+                </span>
+              </button>
+            </li>
+          }
+        </ul>
+      </section>
+    }
+  </aside>
+
+  <main class="studio__main">
+    @if (draft(); as d) {
+      <header class="studio__header">
+        <h2>{{ d.display_name }}</h2>
+        @if (selected(); as agent) {
+          <p>{{ agent.purpose }} @if (agent.readiness_reason) { · {{ agent.readiness_reason }} }</p>
+        }
+        @if (d.drift; as drift) {
+          <p class="studio__drift" role="status">
+            {{ drift.causes.join(', ') }} changed since version {{ drift.active_version }} ({{ drift.changed_languages.join(', ') }}). Publishing adopts it.
+          </p>
+        }
+      </header>
+
+      <nav class="studio__tabs" role="tablist" aria-label="Agent">
+        @for (t of tabs(); track t.id) {
+          <button type="button" role="tab" [class.active]="tab() === t.id" [attr.aria-selected]="tab() === t.id"
+            (click)="openTab(t.id)">{{ t.label }}</button>
+        }
+      </nav>
+
+      <div class="studio__panel" role="tabpanel">
+        @switch (tab()) {
+          @case ('overview') {
+            <mat-form-field>
+              <mat-label>Display name</mat-label>
+              <input matInput [value]="d.display_name" [disabled]="!can('EDIT')"
+                (input)="patchDraft({ display_name: $any($event.target).value })">
+            </mat-form-field>
+            <mat-slide-toggle [checked]="d.enabled" [disabled]="!can('EDIT') || busy()"
+              (change)="setEnabled($event.checked)">Enabled</mat-slide-toggle>
+            <mat-form-field>
+              <mat-label>Text model</mat-label>
+              <mat-select [value]="d.models.text_model" [disabled]="!can('EDIT')" (selectionChange)="patchModel('text_model', $event.value)">
+                @for (m of modelsOf('T'); track m.id) { <mat-option [value]="m.id">{{ m.display_name }} · {{ m.provider }}</mat-option> }
+              </mat-select>
+            </mat-form-field>
+            @if (modelsOf('I').length > 0) {
+              <mat-form-field>
+                <mat-label>Image model</mat-label>
+                <mat-select [value]="d.models.image_model" [disabled]="!can('EDIT')" (selectionChange)="patchModel('image_model', $event.value)">
+                  <mat-option value="">None</mat-option>
+                  @for (m of modelsOf('I'); track m.id) { <mat-option [value]="m.id">{{ m.display_name }} · {{ m.provider }}</mat-option> }
+                </mat-select>
+              </mat-form-field>
+            }
+            @if (modelsOf('V').length > 0) {
+              <mat-form-field>
+                <mat-label>Video model</mat-label>
+                <mat-select [value]="d.models.video_model" [disabled]="!can('EDIT')" (selectionChange)="patchModel('video_model', $event.value)">
+                  <mat-option value="">None</mat-option>
+                  @for (m of modelsOf('V'); track m.id) { <mat-option [value]="m.id">{{ m.display_name }} · {{ m.provider }}</mat-option> }
+                </mat-select>
+              </mat-form-field>
+            }
+            <p class="studio__key">Internal key <code>{{ d.agent_name }}</code> · type {{ d.agent_type }}</p>
+            <div class="studio__actions">
+              @if (!d.is_default && can('PUBLISH')) {
+                <button matButton type="button" [disabled]="busy()" (click)="makeDefault()">Make default {{ d.agent_type }}</button>
+              }
+              @if (can('ARCHIVE')) {
+                <button matButton type="button" [disabled]="busy()" (click)="setArchived(!selected()?.archived)">
+                  {{ selected()?.archived ? 'Unarchive' : 'Archive' }}
+                </button>
+              }
+            </div>
+            @if (can('CREATE', 'agent_type:' + d.agent_type)) {
+              <div class="studio__create">
+                <mat-form-field>
+                  <mat-label>New {{ d.agent_type }} agent, copied from this one</mat-label>
+                  <input matInput #newName>
+                </mat-form-field>
+                <button matButton type="button" [disabled]="busy() || dirty()" (click)="createCopy(newName.value); newName.value = ''">Create</button>
+              </div>
+            }
+          }
+          @case ('prompts') {
+            @if (d.languages.length > 1) {
+              <mat-form-field>
+                <mat-label>Language</mat-label>
+                <mat-select [value]="currentLanguage()?.language_code" (selectionChange)="language.set($event.value)">
+                  @for (l of d.languages; track l.language_code) { <mat-option [value]="l.language_code">{{ l.language_code }}</mat-option> }
+                </mat-select>
+              </mat-form-field>
+            }
+            @if (currentLanguage(); as lang) {
+              <sail-prompt-language-editor [language]="lang" [agentScopeId]="d.agent_scope_id ?? ''" [typeScopeId]="d.type_scope_id ?? ''"
+                [disabled]="!can('EDIT') || busy()" (languageChange)="updateLanguage($event)"
+                (validChange)="promptsValid.set($event)" (resetRequested)="reset($event)" />
+            }
+          }
+          @case ('settings') {
+            @if (settings(); as s) {
+              @if (s.problem) { <p class="studio__error" role="alert">{{ s.problem }}</p> }
+              <h3>In effect</h3>
+              <ul class="studio__settings">
+                @for (e of s.effective; track e.resource_kind + '/' + e.resource_id) {
+                  <li>
+                    <strong>{{ e.resource_kind }} / {{ e.resource_id }}</strong>
+                    from {{ e.source.scope_kind }} ({{ e.source.merge_mode | sailCaption:'config_merge_mode' }}@if (e.source.sealed) {, sealed})
+                    <pre>{{ e.value | json }}</pre>
+                  </li>
+                }
+              </ul>
+              <h3>Editable bindings</h3>
+              <ul class="studio__settings">
+                @for (b of s.bindings; track b.scope_id + '/' + b.resource_kind + '/' + b.resource_id) {
+                  @if (b.editable) {
+                    <li>
+                      <strong>{{ b.resource_kind }} / {{ b.resource_id }}</strong> at {{ b.scope_kind }}
+                      ({{ b.merge_mode | sailCaption:'config_merge_mode' }}@if (b.sealed) {, sealed})
+                      <mat-form-field>
+                        <mat-label>Value (JSON)</mat-label>
+                        <textarea matInput rows="4" #value [value]="b.value | json" [disabled]="!can('EDIT')"></textarea>
+                      </mat-form-field>
+                      @if (can('EDIT')) {
+                        <button matButton type="button" [disabled]="busy()" (click)="saveSetting(b, value.value)">Save</button>
+                        <button matButton type="button" [disabled]="busy()" (click)="saveSetting(b, '', true)">Remove</button>
+                      }
+                    </li>
+                  }
+                }
+              </ul>
+              @if (can('EDIT')) {
+                <fieldset class="studio__add-setting">
+                  <legend>Add a binding</legend>
+                  <mat-form-field>
+                    <mat-label>Scope</mat-label>
+                    <mat-select #scope [value]="s.agent_scope_id">
+                      <mat-option [value]="s.agent_scope_id">This agent</mat-option>
+                      <mat-option [value]="s.type_scope_id">Every {{ d.agent_type }} agent</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                  <mat-form-field><mat-label>Resource kind</mat-label><input matInput #kind></mat-form-field>
+                  <mat-form-field><mat-label>Resource id</mat-label><input matInput #rid></mat-form-field>
+                  <mat-form-field>
+                    <mat-label>Merge mode</mat-label>
+                    <mat-select #merge value="R">
+                      @for (mode of mergeModes(); track mode.code) { <mat-option [value]="mode.code">{{ mode.caption }}</mat-option> }
+                    </mat-select>
+                  </mat-form-field>
+                  <mat-form-field><mat-label>Value (JSON)</mat-label><textarea matInput rows="3" #val></textarea></mat-form-field>
+                  <button matButton type="button" [disabled]="busy()"
+                    (click)="addSetting(scope.value, kind.value, rid.value, merge.value, val.value)">Add</button>
+                </fieldset>
+              }
+            }
+          }
+          @case ('test') {
+            @if (can('TEST')) {
+              @if (dirty()) { <p role="status">Unsaved changes are not tested; save the draft first.</p> }
+              <mat-form-field><mat-label>Task (optional)</mat-label><input matInput #task></mat-form-field>
+              <mat-form-field><mat-label>Sample input (optional)</mat-label><textarea matInput rows="3" #sample></textarea></mat-form-field>
+              <button matButton="elevated" type="button" [disabled]="busy()" (click)="runTest(task.value, sample.value)">Run test</button>
+              @if (testResult(); as r) {
+                <div class="studio__test-result" aria-live="polite">
+                  <p>{{ r.model }} · {{ r.latency_ms }} ms · {{ r.input_tokens }} in / {{ r.output_tokens }} out · cost {{ r.credits }} · config {{ r.digest.slice(0, 12) }}</p>
+                  <p>Sections: {{ r.sections.join(', ') }}</p>
+                  <pre>{{ r.output }}</pre>
+                </div>
+              }
+            } @else {
+              <p>You are not authorized to run tests.</p>
+            }
+          }
+          @case ('history') {
+            @if (diff(); as df) {
+              <section class="studio__diff" aria-label="Version comparison">
+                <h3>v{{ df.previous }} → v{{ df.version }}</h3>
+                <button matButton type="button" (click)="diff.set(null)">Close</button>
+                @for (row of df.rows; track row.language_code + '#' + row.prompt_header_id) {
+                  <div [class]="'studio__diff-row studio__diff-row--' + row.status">
+                    <span>{{ row.caption }} · {{ row.language_code }} · {{ row.status }}</span>
+                    @if (row.old_text) { <pre class="studio__diff-old">{{ row.old_text }}</pre> }
+                    @if (row.new_text) { <pre class="studio__diff-new">{{ row.new_text }}</pre> }
+                  </div>
+                } @empty {
+                  <p>Prompt sections are identical; the versions differ only in configuration.</p>
+                }
+              </section>
+            }
+            <ul class="studio__releases">
+              @for (release of releases(); track release.version) {
+                <li>
+                  <strong>v{{ release.version }}</strong> @if (release.active) { <span>Active</span> }
+                  {{ release.change_summary || 'No change summary' }}
+                  · {{ release.published_at | date: 'medium' }} · {{ release.languages.join(', ') }}
+                  @if (release.activation; as a) { · scheduled {{ a.effective_at | date: 'medium' }} ({{ a.state | sailCaption:'release_activation_state' }}) }
+                  @if (previousVersion(release.version) > 0) {
+                    <button matButton type="button" [disabled]="busy()" (click)="compare(release.version)">Diff</button>
+                  }
+                  @if (!release.active && can('RESTORE')) {
+                    <button matButton type="button" [disabled]="busy()" (click)="restore(release.version)">Restore</button>
+                  }
+                </li>
+              } @empty {
+                <li>Nothing published yet.</li>
+              }
+            </ul>
+            @if (audit().length > 0) {
+              <h3>Audit</h3>
+              <ul class="studio__audit">
+                @for (event of audit(); track $index) {
+                  <li>{{ event.event }} · {{ event.detail }} · {{ event.event_time | date: 'medium' }}</li>
+                }
+              </ul>
+            }
+          }
+          @default {
+            @if (productTab(); as t) {
+              @if (selected(); as agent) {
+                <ng-container [ngTemplateOutlet]="t.template" [ngTemplateOutletContext]="{ $implicit: agent }" />
+              }
+            }
+          }
+        }
+      </div>
+
+      @if (successMessage()) { <p class="studio__success" role="status">{{ successMessage() }}</p> }
+      @if (errorMessage()) { <p class="studio__error" role="alert">{{ errorMessage() }}</p> }
+
+      <footer class="studio__footer" [class.dirty]="dirty()">
+        @if (dirty()) {
+          <span>Unsaved changes</span>
+          <button matButton type="button" [disabled]="busy()" (click)="discard()">Discard</button>
+        }
+        @if (can('EDIT')) {
+          <button matButton="elevated" type="button" [disabled]="!dirty() || !promptsValid() || busy()" (click)="save()">Save draft</button>
+        }
+        @if (can('PUBLISH')) {
+          <mat-form-field>
+            <mat-label>Change summary</mat-label>
+            <input matInput [value]="changeSummary()" (input)="changeSummary.set($any($event.target).value)">
+          </mat-form-field>
+          <button matButton="elevated" type="button" [disabled]="dirty() || busy()" (click)="publish()">Publish</button>
+        }
+      </footer>
+    } @else {
+      @if (errorMessage()) { <p class="studio__error" role="alert">{{ errorMessage() }}</p> }
+      @if (!busy() && summaries().length === 0) { <p>No agents yet.</p> }
+    }
+  </main>
+</div>

package/src/agent/component/studio_page.ts

@@ -0,0 +1,346 @@
+import { DatePipe, JsonPipe, NgTemplateOutlet } from '@angular/common';
+import {
+  ChangeDetectionStrategy, Component, DestroyRef, OnInit, computed, contentChildren, inject, input, signal,
+} from '@angular/core';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { Observable, forkJoin, map } from 'rxjs';
+import { BaseAuthService } from '../../service/auth.service';
+import { CaptionPipe } from '../../service/caption_pipe';
+import { LabelOption, LabelService } from '../../service/label.service';
+import {
+  AgentAuditEvent, AgentDraft, AgentLanguageDraft, AgentMergeMode, AgentModelSelection, AgentRelease, AgentSetting,
+  AgentSettings, AgentSummary, AgentTestResult, StudioFeature, StudioModel,
+} from '../model/agent_studio';
+import { AgentStudioService } from '../service/agent_studio.service';
+import { ReleaseSectionDiff, diffReleaseSections } from '../util/release_diff';
+import { studioErrorMessage } from '../util/studio_errors';
+import { PromptLanguageEditorComponent, PromptResetTarget } from './prompt_language_editor';
+import { StudioTabDirective } from './studio_tab';
+
+const CORE_TABS = [
+  { id: 'overview', label: 'Overview' },
+  { id: 'prompts', label: 'Prompts' },
+  { id: 'settings', label: 'Settings' },
+  { id: 'test', label: 'Test' },
+  { id: 'history', label: 'History' },
+];
+
+/**
+ * Embeddable Agent Studio over Scout's core `agents` feature: a grouped agent rail and tabs
+ * for the draft, prompts, scoped settings, tests, and release history, plus product tabs
+ * declared with `sailStudioTab`. A control shows only when the feature manifest lists its
+ * action and the caller holds the grant; hiding is never the authorization, Scout decides.
+ * Selector: <sail-studio-page>.
+ */
+@Component({
+  selector: 'sail-studio-page',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    DatePipe, JsonPipe, NgTemplateOutlet, MatButtonModule, MatFormFieldModule, MatInputModule, MatSelectModule,
+    MatSlideToggleModule, CaptionPipe, PromptLanguageEditorComponent,
+  ],
+  templateUrl: './studio_page.html',
+})
+export class StudioPageComponent implements OnInit {
+  private readonly studio = inject(AgentStudioService);
+  private readonly auth = inject(BaseAuthService);
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly labels = inject(LabelService);
+
+  /** Rail group of an agent; its type by default. */
+  readonly groupBy = input<(agent: AgentSummary) => string>((agent) => agent.agent_type);
+  private readonly productTabs = contentChildren(StudioTabDirective);
+
+  readonly features = signal<StudioFeature[]>([]);
+  readonly models = signal<StudioModel[]>([]);
+  readonly summaries = signal<AgentSummary[]>([]);
+  readonly showArchived = signal(false);
+  readonly selectedName = signal('');
+  readonly draft = signal<AgentDraft | null>(null);
+  private readonly baseline = signal('');
+  readonly settings = signal<AgentSettings | null>(null);
+  readonly releases = signal<AgentRelease[]>([]);
+  readonly audit = signal<AgentAuditEvent[]>([]);
+  readonly diff = signal<{ version: number; previous: number; rows: ReleaseSectionDiff[] } | null>(null);
+  readonly testResult = signal<AgentTestResult | null>(null);
+  readonly tab = signal('overview');
+  readonly language = signal('');
+  readonly promptsValid = signal(true);
+  readonly changeSummary = signal('');
+  readonly mergeModes = toSignal(this.labels.loadLabels('config_merge_mode').pipe(
+    map(() => this.labels.options('config_merge_mode'))), { initialValue: [] as LabelOption[] });
+  readonly errorMessage = signal('');
+  readonly successMessage = signal('');
+  private readonly pending = signal(0);
+  readonly busy = computed(() => this.pending() > 0);
+
+  readonly tabs = computed(() => [...CORE_TABS, ...this.productTabs().map((t) => ({ id: t.id(), label: t.label() }))]);
+  readonly productTab = computed(() => this.productTabs().find((t) => t.id() === this.tab()));
+  readonly selected = computed(() => this.summaries().find((a) => a.agent_name === this.selectedName()));
+  readonly dirty = computed(() => this.draft() !== null && JSON.stringify(this.draft()) !== this.baseline());
+  readonly currentLanguage = computed<AgentLanguageDraft | undefined>(() => {
+    const languages = this.draft()?.languages ?? [];
+    return languages.find((l) => l.language_code === this.language()) ?? languages[0];
+  });
+  readonly groups = computed(() => {
+    const groupOf = this.groupBy();
+    const groups = new Map<string, AgentSummary[]>();
+    for (const agent of this.summaries()) {
+      if (agent.archived && !this.showArchived()) continue;
+      const key = groupOf(agent);
+      groups.set(key, [...(groups.get(key) ?? []), agent]);
+    }
+    return [...groups].map(([name, agents]) => ({ name, agents }));
+  });
+  private readonly core = computed(() => this.features().find((f) => f.id === 'agents'));
+
+  ngOnInit(): void {
+    this.call(this.studio.features(), (features) => this.features.set(features));
+    this.call(this.studio.models(), (models) => this.models.set(models));
+    this.loadList();
+  }
+
+  /** For a canDeactivate guard. */
+  hasUnsavedChanges(): boolean {
+    return this.dirty();
+  }
+
+  /** Whether the manifest serves `action` and the caller holds it at `value` (the selected agent by default). */
+  can(action: string, value = `agent:${this.selectedName()}`): boolean {
+    const core = this.core();
+    return !!core?.actions.includes(action) && this.auth.hasPermission(core.object || 'AGENT_STUDIO', action, value);
+  }
+
+  modelsOf(type: string): StudioModel[] {
+    return this.models().filter((m) => m.model_type === type);
+  }
+
+  loadList(select?: string): void {
+    this.call(this.studio.listAgents(), (rows) => {
+      this.summaries.set(rows);
+      const target = select ?? (this.selectedName() || rows.find((a) => !a.archived)?.agent_name);
+      if (target && target !== this.selectedName()) this.select(target, true);
+    });
+  }
+
+  select(agentName: string, force = false): void {
+    if (!force && agentName === this.selectedName()) return;
+    if (!force && this.dirty() && !window.confirm('Discard unsaved changes for this agent?')) return;
+    this.selectedName.set(agentName);
+    this.draft.set(null);
+    this.settings.set(null);
+    this.releases.set([]);
+    this.audit.set([]);
+    this.diff.set(null);
+    this.testResult.set(null);
+    this.errorMessage.set('');
+    this.successMessage.set('');
+    this.loadAgent();
+  }
+
+  openTab(id: string): void {
+    this.tab.set(id);
+    if (id === 'history') this.loadHistory();
+  }
+
+  private loadAgent(): void {
+    const name = this.selectedName();
+    this.call(this.studio.getDraft(name), (draft) => this.applyDraft(draft), name);
+    this.call(this.studio.settings(name), (settings) => this.settings.set(settings), name);
+    if (this.tab() === 'history') this.loadHistory();
+  }
+
+  private applyDraft(draft: AgentDraft): void {
+    this.draft.set(draft);
+    this.baseline.set(JSON.stringify(draft));
+    this.promptsValid.set(true);
+  }
+
+  /** Carries new revisions into the draft and its baseline without touching unsaved edits. */
+  private applyRevisions(agentRevision: number, typeRevision?: number, patch: Partial<AgentDraft> = {}): void {
+    const revisions: Partial<AgentDraft> = { ...patch, expected_agent_revision: agentRevision };
+    if (typeRevision !== undefined) revisions.expected_type_defaults_revision = typeRevision;
+    const d = this.draft();
+    if (!d) return;
+    this.draft.set({ ...d, ...revisions });
+    this.baseline.set(JSON.stringify({ ...(JSON.parse(this.baseline()) as AgentDraft), ...revisions }));
+  }
+
+  patchDraft(changes: Partial<AgentDraft>): void {
+    const d = this.draft();
+    if (d) this.draft.set({ ...d, ...changes });
+  }
+
+  patchModel(field: keyof AgentModelSelection, value: string): void {
+    const d = this.draft();
+    if (d) this.patchDraft({ models: { ...d.models, [field]: value } });
+  }
+
+  updateLanguage(language: AgentLanguageDraft): void {
+    const d = this.draft();
+    if (d) this.patchDraft({ languages: d.languages.map((l) => l.language_code === language.language_code ? language : l) });
+  }
+
+  discard(): void {
+    if (window.confirm('Discard unsaved changes?')) this.draft.set(JSON.parse(this.baseline()) as AgentDraft);
+  }
+
+  save(): void {
+    const d = this.draft();
+    if (!d) return;
+    this.act(this.studio.saveDraft(d), (saved) => {
+      this.applyDraft(saved);
+      this.successMessage.set('Draft saved.');
+      this.loadList();
+    }, d.agent_name);
+  }
+
+  setEnabled(enabled: boolean): void {
+    const d = this.draft();
+    if (!d) return;
+    this.act(this.studio.setEnabled({ agent_name: d.agent_name, enabled, expected_agent_revision: d.expected_agent_revision }), (state) => {
+      this.applyRevisions(state.expected_agent_revision, undefined, { enabled: state.enabled });
+      this.loadList();
+    }, d.agent_name);
+  }
+
+  makeDefault(): void {
+    const d = this.draft();
+    if (!d || !window.confirm(`Make "${d.display_name}" the default ${d.agent_type} agent?`)) return;
+    this.act(this.studio.setDefault({ agent_name: d.agent_name, expected_type_defaults_revision: d.expected_type_defaults_revision }), (rows) => {
+      this.summaries.set(rows);
+      this.loadAgent();
+    }, d.agent_name);
+  }
+
+  setArchived(archived: boolean): void {
+    const d = this.draft();
+    if (!d || (archived && !window.confirm(`Archive "${d.display_name}"?`))) return;
+    const request = { agent_name: d.agent_name, expected_agent_revision: d.expected_agent_revision };
+    this.act(archived ? this.studio.archive(request) : this.studio.unarchive(request), (summary) => {
+      this.applyRevisions(summary.agent_revision);
+      this.loadList();
+    }, d.agent_name);
+  }
+
+  /** Creates an agent of the selected agent's type, copied from its saved draft. */
+  createCopy(displayName: string): void {
+    const d = this.draft();
+    if (!d || !displayName.trim()) return;
+    this.act(this.studio.create({
+      agent_type: d.agent_type, display_name: displayName.trim(), copy_from: d.agent_name, idempotency_key: crypto.randomUUID(),
+    }), (created) => this.loadList(created.agent_name));
+  }
+
+  reset(target: PromptResetTarget): void {
+    const d = this.draft();
+    if (!d || !window.confirm('Reset these prompt sections? Publish to make it live.')) return;
+    this.act(this.studio.reset({
+      agent_name: d.agent_name, ...target,
+      expected_agent_revision: d.expected_agent_revision, expected_type_defaults_revision: d.expected_type_defaults_revision,
+    }), (draft) => this.applyDraft(draft), d.agent_name);
+  }
+
+  saveSetting(binding: Pick<AgentSetting, 'scope_id' | 'resource_kind' | 'resource_id' | 'merge_mode' | 'sealed'>, valueText: string, remove = false): void {
+    const s = this.settings();
+    if (!s) return;
+    let value: unknown;
+    if (!remove) {
+      try {
+        value = JSON.parse(valueText);
+      } catch {
+        this.errorMessage.set('The value must be valid JSON.');
+        return;
+      }
+    }
+    this.act(this.studio.saveSetting({
+      agent_name: s.agent_name, scope_id: binding.scope_id, resource_kind: binding.resource_kind.trim(),
+      resource_id: binding.resource_id.trim(), merge_mode: binding.merge_mode, sealed: binding.sealed, value, remove,
+      expected_agent_revision: s.expected_agent_revision, expected_type_defaults_revision: s.expected_type_defaults_revision,
+    }), (saved) => {
+      this.settings.set(saved);
+      this.applyRevisions(saved.expected_agent_revision, saved.expected_type_defaults_revision);
+    }, s.agent_name);
+  }
+
+  addSetting(scopeId: string, kind: string, id: string, mergeMode: AgentMergeMode, valueText: string): void {
+    this.saveSetting({ scope_id: scopeId, resource_kind: kind, resource_id: id, merge_mode: mergeMode, sealed: false }, valueText);
+  }
+
+  runTest(task: string, inputData: string): void {
+    const name = this.selectedName();
+    this.testResult.set(null);
+    this.act(this.studio.testDraft({
+      agent_name: name, language_code: this.currentLanguage()?.language_code ?? '', task: task.trim(), input_data: inputData.trim(),
+    }), (result) => this.testResult.set(result), name);
+  }
+
+  publish(): void {
+    const d = this.draft();
+    if (!d) return;
+    this.act(this.studio.publish({
+      agent_name: d.agent_name, change_summary: this.changeSummary().trim(),
+      expected_agent_revision: d.expected_agent_revision, expected_type_defaults_revision: d.expected_type_defaults_revision,
+    }), (release) => {
+      this.successMessage.set(`Version ${release.version} published${release.active ? ' and active' : ''}.`);
+      this.changeSummary.set('');
+      this.loadList();
+      this.loadAgent();
+    }, d.agent_name);
+  }
+
+  restore(version: number): void {
+    if (!window.confirm(`Restore version ${version}? It is published again as a new version.`)) return;
+    this.act(this.studio.restore({ agent_name: this.selectedName(), version }), (release) => {
+      this.successMessage.set(`Version ${release.version} published from version ${version}.`);
+      this.loadList();
+      this.loadAgent();
+    }, this.selectedName());
+  }
+
+  loadHistory(): void {
+    const name = this.selectedName();
+    this.diff.set(null);
+    this.call(forkJoin([this.studio.history(name), this.studio.auditLog(name)]), ([releases, audit]) => {
+      this.releases.set(releases);
+      this.audit.set(audit);
+    }, name);
+  }
+
+  previousVersion(version: number): number {
+    return this.releases().reduce((best, r) => r.version < version && r.version > best ? r.version : best, 0);
+  }
+
+  compare(version: number): void {
+    const name = this.selectedName();
+    const previous = this.previousVersion(version);
+    this.act(forkJoin([this.studio.releaseSections(name, previous), this.studio.releaseSections(name, version)]),
+      ([prior, current]) => this.diff.set({ version, previous, rows: diffReleaseSections(prior, current) }), name);
+  }
+
+  /** Runs a Studio call; a reply for an agent no longer selected is dropped. */
+  private call<T>(request: Observable<T>, done: (value: T) => void, agentName?: string): void {
+    const current = () => agentName === undefined || agentName === this.selectedName();
+    this.pending.update((n) => n + 1);
+    request.pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+      next: (value) => { if (current()) done(value); },
+      error: (err: unknown) => {
+        this.pending.update((n) => n - 1);
+        if (current()) this.errorMessage.set(studioErrorMessage(err));
+      },
+      complete: () => this.pending.update((n) => n - 1),
+    });
+  }
+
+  /** A user action: clears the previous outcome first. */
+  private act<T>(request: Observable<T>, done: (value: T) => void, agentName?: string): void {
+    this.errorMessage.set('');
+    this.successMessage.set('');
+    this.call(request, done, agentName);
+  }
+}

package/src/agent/component/studio_tab.ts

@@ -0,0 +1,14 @@
+import { Directive, TemplateRef, inject, input } from '@angular/core';
+import { AgentSummary } from '../model/agent_studio';
+
+/**
+ * A product tab of <sail-studio-page>:
+ * `<ng-template sailStudioTab="governance" label="Governance" let-agent>…</ng-template>`.
+ * The template's context is the selected agent's summary.
+ */
+@Directive({ selector: 'ng-template[sailStudioTab]' })
+export class StudioTabDirective {
+  readonly id = input.required<string>({ alias: 'sailStudioTab' });
+  readonly label = input.required<string>();
+  readonly template = inject<TemplateRef<{ $implicit: AgentSummary }>>(TemplateRef);
+}

package/src/agent/component/turn_event_list.html

@@ -89,6 +89,15 @@
           }
         </li>
       }
+      @case ('citations') {
+        <li class="turn-citations">
+          <ol>
+            @for (citation of item.citations; track citation.position) {
+              <li><a [href]="citation.url" rel="noopener noreferrer nofollow" target="_blank">{{ citation.title || citation.domain || citation.url }}</a></li>
+            }
+          </ol>
+        </li>
+      }
       @case ('extension') {
         @if (extensionTemplate(); as template) {
           <li class="turn-extension">

package/src/agent/index.ts

@@ -3,15 +3,21 @@ export * from './model/turn_event';
 export * from './model/reply_frame';
 export * from './model/decision';
 export * from './model/conversation';
+export * from './model/approval';
 export * from './service/agent_studio.service';
+export * from './service/approval.service';
 export * from './service/turn_stream';
 export * from './service/conversation.service';
 export * from './util/studio_errors';
 export * from './util/turn_timeline';
 export * from './util/sse';
+export * from './util/release_diff';
 export * from './component/prompt_section_editor';
 export * from './component/prompt_language_editor';
 export * from './component/release_sections';
 export * from './component/turn_event_list';
 export * from './component/turn_stream_view';
 export * from './component/decision_timeline';
+export * from './component/studio_tab';
+export * from './component/studio_page';
+export * from './component/approval_inbox';