fix(app): complete services history and export refs

Author: CartagoGit

packages/app/src/app/core/state/history.store.ts

@@ -10,6 +10,7 @@ export class HistoryStore {
   readonly error = signal<string | null>(null);
   readonly lastRestore = signal<IHistoryRestoreResult | null>(null);
   readonly lastExport = signal<unknown>(null);
+  readonly compareConfiguration = signal<IHistoryConfiguration>({});
 
   constructor(private readonly client: HistoryClient) {}
 
@@ -21,9 +22,15 @@ export class HistoryStore {
 
   async compare(projectRoot: string, leftId: string, rightId: string, configuration?: IHistoryConfiguration): Promise<void> {
     this.error.set(null);
+    this.compareConfiguration.set(configuration ?? {});
     try { this.diff.set(await this.client.compare(projectRoot, leftId, rightId, configuration)); } catch (error) { this.error.set(error instanceof Error ? error.message : String(error)); }
   }
 
+  async compareConfig(projectRoot: string, leftId: string, rightId: string): Promise<void> {
+    this.error.set(null);
+    try { this.compareConfiguration.set(await this.client.compareConfig(projectRoot, leftId, rightId) ?? {}); } catch (error) { this.error.set(error instanceof Error ? error.message : String(error)); }
+  }
+
   async reExport(projectRoot: string, historyId: string, configuration?: IHistoryConfiguration): Promise<void> {
     this.error.set(null);
     try { this.lastExport.set(await this.client.reExport(projectRoot, historyId, configuration)); } catch (error) { this.error.set(error instanceof Error ? error.message : String(error)); }

packages/app/src/app/features/exports/export-preview.component.ts

@@ -6,10 +6,14 @@ import { ExportDiagnostic, ExportDryRun } from "../../core/api/exports.client";
   selector: "tanit-export-preview",
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<section class="preview" aria-labelledby="preview-title"><header><div><h2 id="preview-title">Dry run</h2><p>Files and overwrite risk before generation.</p></div><strong>{{ preview.canGenerate ? "Ready" : "Needs confirmation" }}</strong></header>@if (preview.combinedExport; as combined) { <aside class="combined" [attr.data-partial]="combined.partial"><strong>{{ combined.partial ? "Partial combined export" : "Combined export" }}</strong><p>{{ combined.explanation }}</p>@for (service of combined.services; track service.serviceId) { <small>{{ service.serviceId }}: {{ service.reason }}</small> }</aside> }<div class="files">@for (file of preview.files; track file.path) { <div class="file"><span>{{ file.change }}</span><code>{{ file.path }}</code>@if (file.overwriteRisk) { <small>Overwrite risk</small> } @if (file.outsideWorkspace) { <small>Outside workspace</small> }</div> }</div>@if (preview.diagnostics.length) { <div class="diagnostics" aria-live="polite">@for (diagnostic of preview.diagnostics; track diagnostic.code) { <button type="button" (click)="diagnosticSelected.emit(diagnostic)"><strong>{{ diagnostic.code }}</strong><span>{{ diagnostic.message }}</span><small>{{ diagnostic.suggestion }}</small></button> }</div> }</section>`,
+  template: `<section class="preview" aria-labelledby="preview-title"><header><div><h2 id="preview-title">Dry run</h2><p>Files and overwrite risk before generation.</p></div><strong>{{ preview.canGenerate ? "Ready" : "Needs confirmation" }}</strong></header>@if (preview.combinedExport; as combined) { <aside class="combined" [attr.data-partial]="combined.partial"><strong>{{ combined.partial ? "Partial combined export" : "Combined export" }}</strong><p>{{ combined.explanation }}</p>@for (service of combined.services; track service.serviceId) { <small>{{ service.serviceId }}: {{ service.reason }}</small> }@for (reference of operationReferences(combined.operationRefs); track reference.id) { <small>{{ reference.id }}: server {{ reference.serverRef || "none" }} · auth {{ reference.authRef || "none" }}</small> }</aside> }<div class="files">@for (file of preview.files; track file.path) { <div class="file"><span>{{ file.change }}</span><code>{{ file.path }}</code>@if (file.overwriteRisk) { <small>Overwrite risk</small> } @if (file.outsideWorkspace) { <small>Outside workspace</small> }</div> }</div>@if (preview.diagnostics.length) { <div class="diagnostics" aria-live="polite">@for (diagnostic of preview.diagnostics; track diagnostic.code) { <button type="button" (click)="diagnosticSelected.emit(diagnostic)"><strong>{{ diagnostic.code }}</strong><span>{{ diagnostic.message }}</span><small>{{ diagnostic.suggestion }}</small></button> }</div> }</section>`,
   styles: `.preview { display: grid; gap: 12px; } header { display: flex; justify-content: space-between; gap: 12px; } h2 { margin: 0; font-size: 18px; } p { margin: 4px 0 0; color: var(--color-muted); } .files, .diagnostics { display: grid; gap: 6px; } .file { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--color-border); } code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } small { color: var(--color-muted); font-size: 11px; } .diagnostics button { display: grid; gap: 3px; padding: 9px; border: 1px solid var(--color-border); background: transparent; color: var(--color-ink); text-align: left; cursor: pointer; } .diagnostics span { color: var(--color-muted); }`,
 })
 export class ExportPreviewComponent {
   @Input() preview: ExportDryRun = { files: [], diagnostics: [], canGenerate: false, requiresOverwriteConfirmation: false, requiresOutsideWorkspaceConfirmation: false };
   @Output() readonly diagnosticSelected = new EventEmitter<ExportDiagnostic>();
+
+  operationReferences(references: Readonly<Record<string, { readonly serverRef?: string; readonly authRef?: string }>>): ReadonlyArray<{ readonly id: string; readonly serverRef?: string; readonly authRef?: string }> {
+    return Object.entries(references).map(([id, value]) => ({ id, ...value }));
+  }
 }

packages/app/src/app/features/history/history-diff.component.ts

@@ -1,19 +1,25 @@
 import { ChangeDetectionStrategy, Component, inject, input } from "@angular/core";
+import { JsonPipe } from "@angular/common";
 import { HistoryClient } from "../../core/api/history.client";
 import { ProjectStore } from "../../core/state/project.store";
 
 @Component({
   selector: "tanit-history-diff",
+  standalone: true,
+  imports: [JsonPipe],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <section><header><h2>Snapshot diff</h2><label>Output <input [value]="outputDirectory" (input)="outputDirectory = inputValue($event)" /></label><button type="button" (click)="compare()">Compare</button></header>
+    <section><header><h2>Snapshot diff</h2><label>Output <input [value]="outputDirectory" (input)="outputDirectory = inputValue($event)" /></label><button type="button" (click)="loadConfiguration()">Load config</button><button type="button" (click)="compare()">Compare</button></header>
       @if (error; as message) { <p role="alert">{{ message }}</p> }
       @if (result; as diff) {
         <p>{{ diff.added.length }} added · {{ diff.removed.length }} removed · {{ diff.changed.length }} changed</p>
         <p>Schemas: {{ diff.schemaChanges.length }} · Auth: {{ diff.authChanges.length }}</p>
         <p>Services: {{ diff.services.length }} · Operations: {{ diff.operations.length }}</p>
         @for (change of diff.serviceChanges; track change.key) { <div>{{ change.key }}: {{ change.before | json }} → {{ change.after | json }}</div> }
         @for (change of diff.operationChanges; track change.key) { <div>{{ change.key }}: {{ change.before | json }} → {{ change.after | json }}</div> }
+        @for (change of diff.schemaChanges; track change.key) { <div>{{ change.key }} schema: {{ change.before | json }} → {{ change.after | json }}</div> }
+        @for (change of diff.authChanges; track change.key) { <div>{{ change.key }} auth: {{ change.before | json }} → {{ change.after | json }}</div> }
+        @if (diff.configuration; as configuration) { <p>Config: {{ configuration.before | json }} → {{ configuration.after | json }}</p> }
       }
     </section>
   `,
@@ -34,5 +40,15 @@ export class HistoryDiffComponent {
     try { this.result = await this.client.compare(root, this.leftId(), this.rightId(), { outputDirectory: this.outputDirectory }); } catch (error) { this.error = error instanceof Error ? error.message : String(error); }
   }
 
+  async loadConfiguration(): Promise<void> {
+    const root = this.project.projectRoot();
+    if (!root) return;
+    try {
+      const configuration = await this.client.compareConfig(root, this.leftId(), this.rightId());
+      const after = configuration?.after;
+      this.outputDirectory = after && typeof after === "object" && "outputDirectory" in after ? String(after.outputDirectory ?? "") : "";
+    } catch (error) { this.error = error instanceof Error ? error.message : String(error); }
+  }
+
   inputValue(event: Event): string { return (event.target as HTMLInputElement).value; }
 }

packages/app/src/app/features/services/service-detail.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, inject, input, signal } from "@angular/core";
+import { ChangeDetectionStrategy, Component, effect, inject, input, signal } from "@angular/core";
 import { ServicesClient, type IServiceDetail } from "../../core/api/services.client";
 import { ProjectStore } from "../../core/state/project.store";
 
@@ -23,8 +23,12 @@ export class ServiceDetailComponent {
   private readonly project = inject(ProjectStore);
   private readonly client = inject(ServicesClient);
 
-  async load(): Promise<void> {
+  constructor() {
+    effect(() => { void this.load(this.serviceId()); });
+  }
+
+  async load(serviceId = this.serviceId()): Promise<void> {
     const root = this.project.projectRoot();
-    if (root) this.service.set(await this.client.detail(root, this.serviceId()));
+    if (root) this.service.set(await this.client.detail(root, serviceId));
   }
 }

packages/app/src/app/features/services/services-list.component.ts

@@ -1,9 +1,12 @@
 import { ChangeDetectionStrategy, Component, inject, signal } from "@angular/core";
 import { ServicesClient, type IServiceDetail } from "../../core/api/services.client";
 import { ProjectStore } from "../../core/state/project.store";
+import { ServiceDetailComponent } from "./service-detail.component";
 
 @Component({
   selector: "tanit-services-list",
+  standalone: true,
+  imports: [ServiceDetailComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <section class="services-list">
@@ -13,7 +16,7 @@ import { ProjectStore } from "../../core/state/project.store";
           <strong>{{ service.serviceId }}</strong><span>{{ service.framework }}</span>
           <small>{{ service.operationCount }} operations · {{ service.transports.join(", ") }} · {{ service.baseUrl || "No base URL" }} · auth {{ service.auth ? "configured" : "none" }}</small>
         </button>
-      } @empty { <p>No services discovered.</p> }
+      } @empty { <p>No services discovered.</p> }@if (selected(); as serviceId) { <tanit-service-detail [serviceId]="serviceId" /> }
     </section>
   `,
 })

packages/core/session/history-recorder.service.ts

@@ -39,7 +39,12 @@ function fingerprint(value: unknown): string {
   });
 }
 
-export function diffSnapshots(left: ICanonicalSnapshot, right: ICanonicalSnapshot): IHistoryDiff {
+export function diffSnapshots(
+  left: ICanonicalSnapshot,
+  right: ICanonicalSnapshot,
+  leftConfiguration?: Readonly<Record<string, unknown>>,
+  rightConfiguration?: Readonly<Record<string, unknown>>,
+): IHistoryDiff {
   const leftServices = new Map(left.services.map((service) => [service.serviceId, service]));
   const rightServices = new Map(right.services.map((service) => [service.serviceId, service]));
   const services = new Set<string>();
@@ -84,6 +89,7 @@ export function diffSnapshots(left: ICanonicalSnapshot, right: ICanonicalSnapsho
     serviceChanges: serviceChanges.sort((left, right) => left.key.localeCompare(right.key)),
     operationChanges: operationChanges.sort((left, right) => left.key.localeCompare(right.key)),
     schemaChanges: schemaChangeDetails.sort((left, right) => left.key.localeCompare(right.key)),
+    configuration: { before: leftConfiguration ?? {}, after: rightConfiguration ?? {} },
   };
 }
 
@@ -138,7 +144,7 @@ export class HistoryRecorderService {
     const left = this.get(projectRoot, leftId);
     const right = this.get(projectRoot, rightId);
     if (!left || !right) throw new Error("Both history records are required for comparison");
-    return diffSnapshots(left.snapshot, right.snapshot);
+    return diffSnapshots(left.snapshot, right.snapshot, left.configuration, right.configuration);
   }
 
   serialize(record: IHistoryRecord): string {

tests/app/export-center.spec.ts

@@ -130,4 +130,15 @@ describe("Export Center", () => {
     expect(preview.diagnostics.at(-1)?.code).toBe("COMBINED_EXPORT_PARTIAL");
     expect(preview.diagnostics.at(-1)?.operationIds).toContain("catalog.list");
   });
+
+  it("renders operation references in the preview", () => {
+    TestBed.resetTestingModule();
+    const fixture = TestBed.configureTestingModule({ imports: [ExportPreviewComponent] }).createComponent(ExportPreviewComponent);
+    fixture.componentRef.setInput("preview", {
+      files: [], diagnostics: [], canGenerate: true, requiresOverwriteConfirmation: false, requiresOutsideWorkspaceConfirmation: false,
+      combinedExport: { partial: true, explanation: "Partial", services: [], operationRefs: { "catalog.list": { serverRef: "server-catalog", authRef: "auth-catalog" } } },
+    });
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).toContain("catalog.list: server server-catalog · auth auth-catalog");
+  });
 });

tests/app/history.spec.ts

@@ -43,6 +43,16 @@ describe("canonical history", () => {
     expect(entry.snapshot.combinedExport?.operationRefs["api/get"]?.serverRef).toBe("server-api");
   });
 
+  it("diffs the recorded configuration before and after", () => {
+    const recorder = new HistoryRecorderService();
+    const left = recorder.record("/workspace", snapshot, { configuration: { formats: ["postman"], outputDirectory: "/workspace/one" } });
+    const right = recorder.record("/workspace", { ...snapshot, capturedAt: "2026-09-08T00:01:00.000Z" }, { configuration: { formats: ["openapi"], outputDirectory: "/workspace/two" } });
+    expect(recorder.compare("/workspace", left.id, right.id).configuration).toEqual({
+      before: { formats: ["postman"], outputDirectory: "/workspace/one" },
+      after: { formats: ["openapi"], outputDirectory: "/workspace/two" },
+    });
+  });
+
   it("keeps divergent services scoped in detailed diffs", () => {
     const left: ICanonicalSnapshot = {
       ...snapshot,