@nauticana/sail 1.1.19 → 1.1.20

package/README.md

@@ -60,6 +60,8 @@ Since sail ships raw TypeScript source, you need a path mapping so the Angular c
 }
 ```
 
+Apps that use the agent entry point (see [Agent UI](#agent-ui-v1120)) add a second mapping, `"@nauticana/sail/agent": ["./node_modules/@nauticana/sail/src/agent/index"]`. The package exposes only these two entry points; deep imports such as `@nauticana/sail/service/...` are not supported.
+
 > **Note:** If your tsconfig has `"baseUrl": "src"`, use `"../node_modules/@nauticana/sail/src/index"` instead (paths resolve relative to `baseUrl`).
 
 Suppress class-validator CommonJS warnings in `angular.json`:
@@ -627,6 +629,29 @@ A complete screen is the pieces above assembled over `BillingService` — no met
 <!-- invoices: render listInvoices() rows directly -->
 ```
 
+## Agent UI (v1.1.20)
+
+Agent Studio and agent-conversation UI live in a secondary entry point, `@nauticana/sail/agent`. Nothing in it is exported from `@nauticana/sail`, so an app that never imports it bundles none of it. It needs no additional peer dependency.
+
+```ts
+import { AgentStudioService, PromptLanguageEditorComponent, TurnStream } from '@nauticana/sail/agent';
+```
+
+| Export | Purpose |
+|---|---|
+| `AgentStudioService` | Client for the thirteen `studio-v2` routes under `/api/agent-studio/` (fixed, unversioned paths). Models mirror the backend's JSON names. |
+| `studioConflictCause(err)` | `'revision'` (reload the draft), `'sealed'` (a layer sits under a sealed one) or `'other'` for a `409`. |
+| `studioFieldErrors(err)` / `retryAfterSeconds(err)` | Field errors of a `400`; `Retry-After` of a `429`/`503`. |
+| `sail-prompt-language-editor` | One language's prompt sections. Emits the whole language on every edit — a save must send every layer back, because an editable layer missing from the request ends its binding. Emits `resetRequested` with the scope, section, and language to reset. |
+| `sail-prompt-section-editor` | One section's layers in server order. Read-only layers render as text; editable ones edit `instruction`, `output`, `merge_mode`, `sealed`. A sealed layer locks every layer below it. Effective text is shown as received, never merged client-side; after a save, replace the whole draft with the response. |
+| `sail-release-sections` | Frozen sections of a release with the layer (`source`) that decided each. |
+| `sail-turn-event-list` | Renders typed turn events in frame order; proposal, result, effect, and approval of one call meet by `call_id`. Effect status `unknown` is its own state. Unknown kinds are ignored; `extension` events render only through `[extensionTemplate]`. |
+| `TurnStream` | Per-turn stream state: `accept(frame)` drops frames already rendered, `cursor()` is the resume point, `markReplayExpired()` + `acceptStoredResult(frame)` handle an expired replay window, `markCancelRequested()` holds `cancelling` until the final frame. |
+| `sail-turn-stream-view` | `TurnStream` + event list + status + cancel button (`cancelRequested`). |
+| `sail-decision-timeline` | Read-only decision chain of one request, grouped by category. |
+
+Transport is app-owned: map your reply frames onto `TurnReplyFrame` and your audit rows onto `DecisionRecord`, then feed them in. Style the `.prompt-*`, `.release-*`, `.turn-*`, and `.decision-*` class hooks.
+
 ## Agency / reseller UI (v1.1.14)
 
 sail v1.1.14 supplies composable, unstyled agency components over keel v1.2.41.

package/package.json

@@ -1,8 +1,16 @@
 {
   "name": "@nauticana/sail",
-  "version": "1.1.19",
+  "version": "1.1.20",
   "description": "Metadata-driven Angular component library for CRUD admin frontends backed by the keel Go backend. Tables, forms, navigation, OTP/2FA/social auth, billing, payout onboarding.",
   "main": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./agent": "./src/agent/index.ts",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "./src/model/decorator.ts"
+  ],
   "scripts": {
     "typecheck": "tsc --noEmit",
     "check:templates": "ngc -p tsconfig.json",

package/src/agent/component/decision_timeline.html

@@ -0,0 +1,35 @@
+@for (group of groups(); track group.category) {
+  <section class="decision-group" [attr.aria-label]="group.category">
+    <h3 class="decision-group__category">{{ group.category }}</h3>
+    <ol class="decision-group__records">
+      @for (record of group.records; track record.id) {
+        <li
+          class="decision-record"
+          [class.decision-record--allow]="record.outcome === 'allow'"
+          [class.decision-record--deny]="record.outcome === 'deny'"
+          [class.decision-record--pending]="record.outcome === 'pending'"
+        >
+          <time class="decision-record__time" [attr.datetime]="record.occurred_at">{{ record.occurred_at }}</time>
+          <span class="decision-record__action">{{ record.action }}</span>
+          <span class="decision-record__resource">{{ record.resource }}</span>
+          <span class="decision-record__outcome">{{ record.outcome }}</span>
+          <span class="decision-record__principal">{{ record.principal.kind }} {{ record.principal.id }}</span>
+          @if (record.reason) {
+            <p class="decision-record__reason">{{ record.reason }}</p>
+          }
+          @if (record.authority; as authority) {
+            <p class="decision-record__authority">
+              Acting for {{ authority.subject.kind }} {{ authority.subject.id }}
+              @if (authority.grant_id) {
+                under grant {{ authority.grant_id }}
+                @if (authority.grantor; as grantor) {
+                  from {{ grantor.kind }} {{ grantor.id }}
+                }
+              }
+            </p>
+          }
+        </li>
+      }
+    </ol>
+  </section>
+}

package/src/agent/component/decision_timeline.ts

@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { DecisionCategoryGroup, DecisionRecord } from '../model/decision';
+
+/**
+ * Read-only decision chain of one request, oldest first and grouped by category. Records are
+ * shown exactly as supplied — never de-duplicated. Selector: <sail-decision-timeline>.
+ */
+@Component({
+  selector: 'sail-decision-timeline',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './decision_timeline.html',
+})
+export class DecisionTimelineComponent {
+  readonly records = input.required<readonly DecisionRecord[]>();
+
+  protected readonly groups = computed<DecisionCategoryGroup[]>(() => {
+    const chronological = [...this.records()].sort((a, b) => a.occurred_at.localeCompare(b.occurred_at));
+    const groups = new Map<string, DecisionRecord[]>();
+    for (const record of chronological) {
+      const group = groups.get(record.category);
+      if (group) group.push(record);
+      else groups.set(record.category, [record]);
+    }
+    return [...groups].map(([category, records]) => ({ category, records }));
+  });
+}

package/src/agent/component/prompt_language_editor.html

@@ -0,0 +1,29 @@
+<div class="prompt-language">
+  <fieldset class="prompt-language__reset">
+    <legend>Reset prompts</legend>
+    <mat-form-field>
+      <mat-label>Reset to</mat-label>
+      <mat-select [formControl]="resetScope">
+        <mat-option value="agent_override">Remove agent overrides</mat-option>
+        <mat-option value="type_default">Remove type defaults</mat-option>
+        <mat-option value="platform_baseline">Platform baseline</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-checkbox [formControl]="everyLanguage">Every language</mat-checkbox>
+    <button matButton type="button" [disabled]="disabled()" (click)="requestReset(0)">Reset all sections</button>
+  </fieldset>
+
+  @for (section of language().prompt_sections; track section.prompt_header_id) {
+    <sail-prompt-section-editor
+      [section]="section"
+      [agentScopeId]="agentScopeId()"
+      [typeScopeId]="typeScopeId()"
+      [disabled]="disabled()"
+      (sectionChange)="replaceSection($event)"
+      (validChange)="setSectionValid(section.prompt_header_id, $event)"
+    />
+    <button matButton type="button" [disabled]="disabled()" (click)="requestReset(section.prompt_header_id)">
+      Reset “{{ section.caption }}”
+    </button>
+  }
+</div>

package/src/agent/component/prompt_language_editor.ts

@@ -0,0 +1,77 @@
+import { ChangeDetectionStrategy, Component, effect, input, output, signal } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { AgentLanguageDraft, AgentPromptSection, AgentResetScope } from '../model/agent_studio';
+import { PromptSectionEditorComponent } from './prompt_section_editor';
+
+/** What to reset; the page adds the agent name and both expected revisions. */
+export interface PromptResetTarget {
+  scope: AgentResetScope;
+  /** 0 = every section. */
+  prompt_header_id: number;
+  /** '' = every language. */
+  language_code: string;
+}
+
+/**
+ * The prompt sections of one language. Emits the whole language on every edit so a save always
+ * carries every layer back. Selector: <sail-prompt-language-editor>.
+ */
+@Component({
+  selector: 'sail-prompt-language-editor',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ReactiveFormsModule, MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatSelectModule, PromptSectionEditorComponent],
+  templateUrl: './prompt_language_editor.html',
+})
+export class PromptLanguageEditorComponent {
+  readonly language = input.required<AgentLanguageDraft>();
+  readonly agentScopeId = input('');
+  readonly typeScopeId = input('');
+  readonly disabled = input(false);
+
+  readonly languageChange = output<AgentLanguageDraft>();
+  readonly validChange = output<boolean>();
+  readonly resetRequested = output<PromptResetTarget>();
+
+  protected readonly resetScope = new FormControl<AgentResetScope>('agent_override', { nonNullable: true });
+  protected readonly everyLanguage = new FormControl(false, { nonNullable: true });
+  private readonly invalidSections = signal<ReadonlySet<number>>(new Set());
+
+  constructor() {
+    effect(() => {
+      for (const control of [this.resetScope, this.everyLanguage]) {
+        if (this.disabled()) control.disable({ emitEvent: false });
+        else control.enable({ emitEvent: false });
+      }
+    });
+  }
+
+  protected replaceSection(section: AgentPromptSection): void {
+    const current = this.language();
+    this.languageChange.emit({
+      ...current,
+      prompt_sections: current.prompt_sections.map((existing) =>
+        existing.prompt_header_id === section.prompt_header_id ? section : existing,
+      ),
+    });
+  }
+
+  protected setSectionValid(promptHeaderId: number, valid: boolean): void {
+    const invalid = new Set(this.invalidSections());
+    if (valid) invalid.delete(promptHeaderId);
+    else invalid.add(promptHeaderId);
+    this.invalidSections.set(invalid);
+    this.validChange.emit(invalid.size === 0);
+  }
+
+  protected requestReset(promptHeaderId: number): void {
+    this.resetRequested.emit({
+      scope: this.resetScope.value,
+      prompt_header_id: promptHeaderId,
+      language_code: this.everyLanguage.value ? '' : this.language().language_code,
+    });
+  }
+}

package/src/agent/component/prompt_section_editor.html

@@ -0,0 +1,93 @@
+<section class="prompt-section" [attr.aria-label]="section().caption">
+  <h3 class="prompt-section__caption">{{ section().caption }}</h3>
+  @if (section().description) {
+    <p class="prompt-section__description">{{ section().description }}</p>
+  }
+
+  @if (sealedBy(); as sealing) {
+    <p class="prompt-section__sealed" role="status">
+      <mat-icon aria-hidden="true">lock</mat-icon>
+      Sealed by {{ sealing.scope_kind || slotOf(sealing) }} scope {{ sealing.scope_id }}. Narrower layers cannot change this section.
+    </p>
+  }
+  @if (sealConflict()) {
+    <p class="prompt-section__conflict" role="alert">
+      A sealed type layer cannot be saved while the agent layer exists. Remove the agent layer or unseal the type layer.
+    </p>
+  }
+
+  <ol class="prompt-section__layers">
+    @for (row of rows(); track $index) {
+      <li
+        class="prompt-layer"
+        [class.prompt-layer--readonly]="!row.form"
+        [class.prompt-layer--sealed]="row.layer.sealed"
+        [class.prompt-layer--under-seal]="isUnderSeal($index)"
+      >
+        <div class="prompt-layer__head">
+          <span class="prompt-layer__scope">{{ row.layer.scope_kind || slotOf(row.layer) }}</span>
+          <span class="prompt-layer__scope-id">{{ row.layer.scope_id }}</span>
+          @if (row.layer.sealed) {
+            <mat-icon class="prompt-layer__seal" aria-label="Sealed" role="img">lock</mat-icon>
+          }
+        </div>
+
+        @if (row.form; as form) {
+          <div class="prompt-layer__form" [formGroup]="form">
+            <mat-form-field>
+              <mat-label>Merge mode</mat-label>
+              <mat-select formControlName="merge_mode">
+                <mat-option value="append">Append</mat-option>
+                <mat-option value="replace">Replace</mat-option>
+              </mat-select>
+            </mat-form-field>
+            <mat-form-field>
+              <mat-label>Instruction</mat-label>
+              <textarea matInput formControlName="instruction" rows="6"></textarea>
+            </mat-form-field>
+            <mat-form-field>
+              <mat-label>Output</mat-label>
+              <textarea matInput formControlName="output" rows="3"></textarea>
+            </mat-form-field>
+            <mat-checkbox formControlName="sealed">Seal this section for narrower scopes</mat-checkbox>
+
+            @if (form.hasError('instructionRequired')) {
+              <p class="prompt-layer__error" role="alert">Replace needs an instruction.</p>
+            }
+            @if (form.hasError('contentRequired')) {
+              <p class="prompt-layer__error" role="alert">Enter an instruction or an output.</p>
+            }
+            <button matButton type="button" [disabled]="disabled()" (click)="removeLayer($index)">
+              Remove layer
+            </button>
+          </div>
+        } @else {
+          <dl class="prompt-layer__readonly">
+            <dt>Merge mode</dt>
+            <dd>{{ row.layer.merge_mode }}</dd>
+            <dt>Instruction</dt>
+            <dd class="prompt-layer__text">{{ row.layer.instruction }}</dd>
+            <dt>Output</dt>
+            <dd class="prompt-layer__text">{{ row.layer.output }}</dd>
+          </dl>
+        }
+      </li>
+    }
+  </ol>
+
+  <div class="prompt-section__actions">
+    @if (canAddType()) {
+      <button matButton type="button" (click)="addLayer('type')">Add type-default layer</button>
+    }
+    @if (canAddAgent()) {
+      <button matButton type="button" (click)="addLayer('agent')">Add agent layer</button>
+    }
+  </div>
+
+  <dl class="prompt-section__effective">
+    <dt>Effective instruction</dt>
+    <dd class="prompt-layer__text">{{ section().effective_text }}</dd>
+    <dt>Effective output</dt>
+    <dd class="prompt-layer__text">{{ section().effective_output }}</dd>
+  </dl>
+</section>

package/src/agent/component/prompt_section_editor.ts

@@ -0,0 +1,170 @@
+import { ChangeDetectionStrategy, Component, computed, effect, input, output, signal, untracked } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormArray, FormControl, FormGroup, ReactiveFormsModule, ValidationErrors } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { AgentMergeMode, AgentPromptLayer, AgentPromptSection } from '../model/agent_studio';
+
+type LayerForm = FormGroup<{
+  instruction: FormControl<string>;
+  output: FormControl<string>;
+  merge_mode: FormControl<AgentMergeMode>;
+  sealed: FormControl<boolean>;
+}>;
+
+interface LayerRow {
+  layer: AgentPromptLayer;
+  form: LayerForm | null;
+}
+
+export type EditableLayerSlot = 'type' | 'agent';
+
+function layerContentRequired(group: LayerForm): ValidationErrors | null {
+  const { instruction, output, merge_mode } = group.getRawValue();
+  if (merge_mode === 'replace') return instruction.trim() ? null : { instructionRequired: true };
+  return instruction.trim() || output.trim() ? null : { contentRequired: true };
+}
+
+/**
+ * Editor for one prompt section's layers. Layers keep the server's order; the effective text is
+ * shown as received and never merged here. Ships no CSS — style the `.prompt-section*` and
+ * `.prompt-layer*` hooks. Selector: <sail-prompt-section-editor>.
+ */
+@Component({
+  selector: 'sail-prompt-section-editor',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ReactiveFormsModule, MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSelectModule],
+  templateUrl: './prompt_section_editor.html',
+})
+export class PromptSectionEditorComponent {
+  readonly section = input.required<AgentPromptSection>();
+  readonly agentScopeId = input('');
+  readonly typeScopeId = input('');
+  readonly disabled = input(false);
+
+  readonly sectionChange = output<AgentPromptSection>();
+  readonly validChange = output<boolean>();
+
+  protected readonly forms = new FormArray<LayerForm>([]);
+  protected readonly rows = signal<LayerRow[]>([]);
+  private emitted?: AgentPromptSection;
+
+  protected readonly sealedAt = computed(() => this.rows().findIndex((row) => row.layer.sealed));
+  protected readonly sealedBy = computed(() => this.rows()[this.sealedAt()]?.layer);
+
+  /** The server refuses a save that keeps an agent layer under a sealed type layer. */
+  protected readonly sealConflict = computed(() => {
+    const rows = this.rows();
+    const typeSealed = rows.some((row) => row.form && row.layer.sealed && this.slotOf(row.layer) === 'type');
+    return typeSealed && rows.some((row) => row.form && this.slotOf(row.layer) === 'agent');
+  });
+
+  protected readonly canAddType = computed(() => this.canAdd(this.typeScopeId()));
+  protected readonly canAddAgent = computed(() => this.canAdd(this.agentScopeId()));
+
+  constructor() {
+    effect(() => {
+      const section = this.section();
+      if (section === this.emitted) return;
+      untracked(() => this.rebuild(section.layers));
+    });
+    effect(() => {
+      const locked = this.disabled();
+      const sealedAt = this.sealedAt();
+      untracked(() => this.applyLocks(locked, sealedAt));
+    });
+    this.forms.valueChanges.pipe(takeUntilDestroyed()).subscribe(() => this.sync(true));
+  }
+
+  protected slotOf(layer: AgentPromptLayer): EditableLayerSlot | undefined {
+    if (layer.scope_id && layer.scope_id === this.typeScopeId()) return 'type';
+    if (layer.scope_id && layer.scope_id === this.agentScopeId()) return 'agent';
+    return undefined;
+  }
+
+  protected isUnderSeal(index: number): boolean {
+    const sealedAt = this.sealedAt();
+    return sealedAt >= 0 && index > sealedAt;
+  }
+
+  protected addLayer(slot: EditableLayerSlot): void {
+    const layer: AgentPromptLayer = {
+      scope_id: slot === 'type' ? this.typeScopeId() : this.agentScopeId(),
+      scope_kind: '',
+      merge_mode: 'append',
+      sealed: false,
+      editable: true,
+      instruction: '',
+      output: '',
+    };
+    const layers = this.rows().map((row) => row.layer);
+    // Type before agent, both after every read-only layer.
+    const agentAt = layers.findIndex((existing) => this.slotOf(existing) === 'agent');
+    const at = slot === 'type' && agentAt >= 0 ? agentAt : layers.length;
+    layers.splice(at, 0, layer);
+    this.rebuild(layers);
+    this.emit();
+  }
+
+  /** Removing an editable layer ends its binding on the next save. */
+  protected removeLayer(index: number): void {
+    this.rebuild(this.rows().map((row) => row.layer).filter((_, at) => at !== index));
+    this.emit();
+  }
+
+  private canAdd(scopeId: string): boolean {
+    if (!scopeId || this.disabled() || this.sealedAt() >= 0) return false;
+    return !this.rows().some((row) => row.layer.scope_id === scopeId);
+  }
+
+  private rebuild(layers: AgentPromptLayer[]): void {
+    this.forms.clear({ emitEvent: false });
+    const rows = layers.map((layer) => ({ layer, form: layer.editable ? this.formFor(layer) : null }));
+    for (const row of rows) if (row.form) this.forms.push(row.form, { emitEvent: false });
+    this.rows.set(rows);
+    this.sync(false);
+  }
+
+  private formFor(layer: AgentPromptLayer): LayerForm {
+    return new FormGroup(
+      {
+        instruction: new FormControl(layer.instruction, { nonNullable: true }),
+        output: new FormControl(layer.output, { nonNullable: true }),
+        merge_mode: new FormControl<AgentMergeMode>(layer.merge_mode, { nonNullable: true }),
+        sealed: new FormControl(layer.sealed, { nonNullable: true }),
+      },
+      { validators: (group) => layerContentRequired(group as LayerForm) },
+    );
+  }
+
+  private sync(announce: boolean): void {
+    this.rows.update((rows) =>
+      rows.map((row) => (row.form ? { ...row, layer: { ...row.layer, ...row.form.getRawValue() } } : row)),
+    );
+    if (announce) this.emit();
+  }
+
+  private applyLocks(locked: boolean, sealedAt: number): void {
+    this.rows().forEach((row, index) => {
+      if (!row.form) return;
+      const lock = locked || (sealedAt >= 0 && index > sealedAt);
+      if (lock && row.form.enabled) row.form.disable({ emitEvent: false });
+      if (!lock && row.form.disabled) row.form.enable({ emitEvent: false });
+    });
+    this.validChange.emit(this.isValid());
+  }
+
+  private isValid(): boolean {
+    return !this.sealConflict() && this.rows().every((row) => !row.form || !row.form.invalid);
+  }
+
+  private emit(): void {
+    this.emitted = { ...this.section(), layers: this.rows().map((row) => row.layer) };
+    this.sectionChange.emit(this.emitted);
+    this.validChange.emit(this.isValid());
+  }
+}

package/src/agent/component/release_sections.html

@@ -0,0 +1,29 @@
+@for (language of languages(); track language.language_code) {
+  <section class="release-language" [attr.aria-label]="language.language_code">
+    <h3 class="release-language__code">{{ language.language_code }}</h3>
+    @for (section of language.sections; track section.prompt_header_id) {
+      <article class="release-section">
+        <h4 class="release-section__caption">{{ section.caption }}</h4>
+        <p class="release-section__source">
+          Decided by {{ section.source.scope_kind }} scope {{ section.source.scope_id }}
+          ({{ section.source.merge_mode }})
+          @if (section.source.sealed) {
+            <span class="release-section__sealed">
+              <mat-icon aria-hidden="true">lock</mat-icon>
+              sealed
+            </span>
+          }
+        </p>
+        @if (section.description) {
+          <p class="release-section__description">{{ section.description }}</p>
+        }
+        <dl class="release-section__copy">
+          <dt>Instruction</dt>
+          <dd class="release-section__text">{{ section.instruction }}</dd>
+          <dt>Output</dt>
+          <dd class="release-section__text">{{ section.output }}</dd>
+        </dl>
+      </article>
+    }
+  </section>
+}

package/src/agent/component/release_sections.ts

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { AgentReleaseSection } from '../model/agent_studio';
+
+interface ReleaseLanguageGroup {
+  language_code: string;
+  sections: AgentReleaseSection[];
+}
+
+/**
+ * Frozen prompt sections of one release, each beside the layer that decided it. Read-only:
+ * provenance never changes after publication. Selector: <sail-release-sections>.
+ */
+@Component({
+  selector: 'sail-release-sections',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [MatIconModule],
+  templateUrl: './release_sections.html',
+})
+export class ReleaseSectionsComponent {
+  readonly sections = input.required<AgentReleaseSection[]>();
+
+  protected readonly languages = computed<ReleaseLanguageGroup[]>(() => {
+    const groups = new Map<string, AgentReleaseSection[]>();
+    for (const section of this.sections()) {
+      const group = groups.get(section.language_code);
+      if (group) group.push(section);
+      else groups.set(section.language_code, [section]);
+    }
+    return [...groups].map(([language_code, sections]) => ({ language_code, sections }));
+  });
+}

package/src/agent/component/turn_event_list.html

@@ -0,0 +1,101 @@
+<ol class="turn-events" aria-live="polite">
+  @for (item of items(); track $index) {
+    @switch (item.kind) {
+      @case ('text') {
+        <li class="turn-text">{{ item.text }}</li>
+      }
+      @case ('tool') {
+        <li class="turn-tool" [class.turn-tool--error]="item.errorClass !== undefined">
+          <div class="turn-tool__head">
+            <mat-icon aria-hidden="true">build</mat-icon>
+            <span class="turn-tool__id">{{ item.tool_id }}</span>
+            <span class="turn-tool__version">{{ item.tool_version }}</span>
+          </div>
+
+          @if (item.approval === 'pending') {
+            <p class="turn-tool__approval turn-tool__approval--pending" role="status">Waiting for approval</p>
+          } @else if (item.approval === 'resolved') {
+            <p class="turn-tool__approval" role="status">Approval: {{ item.decision }}</p>
+          }
+
+          @if (item.arguments !== undefined) {
+            <pre class="turn-tool__arguments">{{ item.arguments | json }}</pre>
+          }
+
+          @if (item.errorClass !== undefined) {
+            <p class="turn-tool__error" role="alert">Tool call failed: {{ item.errorClass }}</p>
+          } @else if (item.result) {
+            <pre class="turn-tool__output">{{ item.result.output | json }}</pre>
+          }
+
+          @if (item.effect; as effect) {
+            <div
+              class="turn-effect"
+              [class.turn-effect--satisfied]="effect.observation.status === 'satisfied'"
+              [class.turn-effect--violated]="effect.observation.status === 'violated'"
+              [class.turn-effect--unknown]="effect.observation.status === 'unknown'"
+            >
+              @switch (effect.observation.status) {
+                @case ('satisfied') {
+                  <span class="turn-effect__status">Effect confirmed</span>
+                }
+                @case ('violated') {
+                  <span class="turn-effect__status" role="alert">Effect not confirmed</span>
+                }
+                @case ('unknown') {
+                  <span class="turn-effect__status">Effect could not be verified</span>
+                }
+              }
+              @if (effect.observation.reconciled) {
+                <span class="turn-effect__reconciled">Already in place — nothing was sent again</span>
+              }
+              @if (effect.observation.reason) {
+                <p class="turn-effect__reason">{{ effect.observation.reason }}</p>
+              }
+              @if (effect.observation.evidence?.length) {
+                <ul class="turn-effect__evidence">
+                  @for (ref of effect.observation.evidence; track ref.URI) {
+                    <li>
+                      <span class="turn-ref__uri">{{ ref.URI }}</span>
+                      <span class="turn-ref__digest">{{ ref.Digest }}</span>
+                    </li>
+                  }
+                </ul>
+              }
+            </div>
+          }
+        </li>
+      }
+      @case ('evidence') {
+        <li class="turn-evidence">
+          <ul>
+            @for (ref of item.refs; track ref.id) {
+              <li>
+                <span class="turn-ref__source">{{ ref.source }}</span>
+                <span class="turn-ref__uri">{{ ref.uri || ref.object?.URI }}</span>
+                @if (ref.object?.Digest) {
+                  <span class="turn-ref__digest">{{ ref.object?.Digest }}</span>
+                }
+              </li>
+            }
+          </ul>
+        </li>
+      }
+      @case ('progress') {
+        <li class="turn-progress">
+          <span class="turn-progress__stage">{{ item.progress.stage }}</span>
+          @if (item.progress.message) {
+            <span class="turn-progress__message">{{ item.progress.message }}</span>
+          }
+        </li>
+      }
+      @case ('extension') {
+        @if (extensionTemplate(); as template) {
+          <li class="turn-extension">
+            <ng-container [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ $implicit: item.extension }" />
+          </li>
+        }
+      }
+    }
+  }
+</ol>