feat(examples-chat): port ItineraryStore — empty start, value hydration, no localStorage

Author: blove

examples/chat/angular/src/app/itinerary-store.spec.ts

@@ -0,0 +1,162 @@
+// SPDX-License-Identifier: MIT
+import { describe, it, expect, vi } from 'vitest';
+import { ItineraryStore } from './itinerary-store';
+
+describe('ItineraryStore', () => {
+  it('add appends a stop', () => {
+    const s = new ItineraryStore();
+    s.add(2, 'Sainte-Chapelle', 'morning');
+    expect(s.stops().some((x) => x.place === 'Sainte-Chapelle')).toBe(true);
+  });
+
+  it('move matches place case-insensitively and returns the stop', () => {
+    const s = new ItineraryStore();
+    s.add(1, 'Louvre');
+    const moved = s.move('louvre', 2);
+    expect(moved?.day).toBe(2);
+    expect(s.move('atlantis', 1)).toBeUndefined();
+  });
+
+  it('clearDay removes only stops for that day', () => {
+    const s = new ItineraryStore();
+    s.add(1, 'Louvre');
+    s.add(1, 'Eiffel Tower');
+    s.add(2, "Musée d'Orsay");
+    const removed = s.clearDay(1);
+    expect(removed).toBe(2);
+    expect(s.stops().every((x) => x.day !== 1)).toBe(true);
+    // day 2 stop still exists
+    expect(s.stops().some((x) => x.day === 2)).toBe(true);
+  });
+
+  it('remove deletes the stop with the given id', () => {
+    const s = new ItineraryStore();
+    s.add(1, 'Louvre');
+    s.add(1, 'Eiffel Tower');
+    const first = s.stops()[0];
+    s.remove(first.id);
+    expect(s.stops().find((x) => x.id === first.id)).toBeUndefined();
+    expect(s.stops().length).toBe(1);
+  });
+
+  it('reset clears all stops', () => {
+    const s = new ItineraryStore();
+    s.add(3, 'Versailles');
+    s.reset();
+    expect(s.stops().length).toBe(0);
+  });
+});
+
+describe('ItineraryStore — server-state model', () => {
+  it('starts empty (no seed)', () => {
+    const store = new ItineraryStore();
+    expect(store.stops()).toEqual([]);
+    expect(store.days()).toEqual([]);
+  });
+
+  it('hydrates from a server itinerary snapshot', () => {
+    const store = new ItineraryStore();
+    store.hydrate([{ id: 'x', day: 1, place: 'Louvre' }]);
+    expect(store.stops().map((s) => s.place)).toEqual(['Louvre']);
+  });
+
+  it('does not touch localStorage on update', () => {
+    const spy = vi.spyOn(Storage.prototype, 'setItem');
+    const store = new ItineraryStore();
+    store.add(1, 'Eiffel Tower');
+    expect(spy).not.toHaveBeenCalled();
+    spy.mockRestore();
+  });
+});
+
+describe('reorder', () => {
+  it('moves a stop to a new index within the same day', () => {
+    const s = new ItineraryStore();
+    s.add(1, 'Louvre');
+    s.add(1, 'Eiffel Tower');
+    const eiffel = s.stops().find((x) => x.place === 'Eiffel Tower')!;
+    s.reorder(eiffel.id, 1, 0);
+    const day1 = s.days().find((g) => g.day === 1)!;
+    expect(day1.stops.map((x) => x.place)).toEqual(['Eiffel Tower', 'Louvre']);
+  });
+
+  it('moves a stop across days at a specific index', () => {
+    const s = new ItineraryStore();
+    s.add(1, 'Louvre');
+    s.add(1, 'Eiffel Tower');
+    s.add(2, "Musée d'Orsay");
+    const orsay = s.stops().find((x) => x.place === "Musée d'Orsay")!;
+    s.reorder(orsay.id, 1, 0);
+    const day1 = s.days().find((g) => g.day === 1)!;
+    expect(day1.stops[0].place).toBe("Musée d'Orsay");
+    expect(day1.stops[0].day).toBe(1);
+  });
+
+  it('reorder by unknown id is a no-op', () => {
+    const s = new ItineraryStore();
+    s.add(1, 'Louvre');
+    const before = s.stops();
+    s.reorder('does-not-exist', 1, 0);
+    expect(s.stops()).toEqual(before);
+  });
+});
+
+describe('recentlyChangedId', () => {
+  it('is null initially', () => {
+    const s = new ItineraryStore();
+    expect(s.recentlyChangedId()).toBeNull();
+  });
+
+  it('is set after an agent-source add', () => {
+    const s = new ItineraryStore();
+    const added = s.add(3, 'Sacré-Cœur');
+    expect(s.recentlyChangedId()).toBe(added.id);
+  });
+
+  it('is NOT set after a user-source add', () => {
+    const s = new ItineraryStore();
+    s.add(3, 'Sacré-Cœur', undefined, { source: 'user' });
+    expect(s.recentlyChangedId()).toBeNull();
+  });
+
+  it('clears 1600ms after the change', async () => {
+    vi.useFakeTimers();
+    const s = new ItineraryStore();
+    s.add(3, 'Sacré-Cœur');
+    expect(s.recentlyChangedId()).not.toBeNull();
+    vi.advanceTimersByTime(1600);
+    expect(s.recentlyChangedId()).toBeNull();
+    vi.useRealTimers();
+  });
+});
+
+describe('focus', () => {
+  it('focus sets and clears focusedStopId', () => {
+    const s = new ItineraryStore();
+    s.add(1, 'Louvre');
+    const id = s.stops()[0].id;
+    expect(s.focusedStopId()).toBeNull();
+    s.focus(id);
+    expect(s.focusedStopId()).toBe(id);
+    s.focus(null);
+    expect(s.focusedStopId()).toBeNull();
+  });
+});
+
+describe('coordinates', () => {
+  it('add accepts optional lat/lng via opts.coords', () => {
+    const s = new ItineraryStore();
+    const added = s.add(2, 'Sacré-Cœur', undefined, {
+      coords: { lat: 48.8867, lng: 2.3431 },
+    });
+    expect(added.lat).toBeCloseTo(48.8867, 3);
+    expect(added.lng).toBeCloseTo(2.3431, 3);
+  });
+
+  it('add without coords leaves lat/lng undefined', () => {
+    const s = new ItineraryStore();
+    const added = s.add(2, 'Somewhere');
+    expect(added.lat).toBeUndefined();
+    expect(added.lng).toBeUndefined();
+  });
+});

examples/chat/angular/src/app/itinerary-store.ts

@@ -0,0 +1,118 @@
+// SPDX-License-Identifier: MIT
+import { computed, signal } from '@angular/core';
+
+export interface ItineraryStop {
+  id: string;
+  day: number;
+  place: string;
+  note?: string;
+  lat?: number;
+  lng?: number;
+}
+
+export interface MutationOptions {
+  source?: 'user' | 'agent';
+  coords?: { lat: number; lng: number };
+}
+
+const PULSE_MS = 1600;
+
+/** Working copy of the itinerary: the user edits it in the panel, the agent
+ *  edits it through client tools. Both write the same signals, so either's
+ *  changes render immediately. The graph checkpoint is the durable record —
+ *  the shell calls `hydrate()` from a server state snapshot on thread switch. */
+export class ItineraryStore {
+  readonly stops = signal<ItineraryStop[]>([]);
+  readonly days = computed(() => {
+    const byDay = new Map<number, ItineraryStop[]>();
+    for (const s of this.stops()) byDay.set(s.day, [...(byDay.get(s.day) ?? []), s]);
+    return [...byDay.entries()]
+      .sort(([a], [b]) => a - b)
+      .map(([day, stops]) => ({ day, stops }));
+  });
+  readonly recentlyChangedId = signal<string | null>(null);
+  readonly focusedStopId = signal<string | null>(null);
+  private pulseTimer: ReturnType<typeof setTimeout> | null = null;
+
+  focus(id: string | null): void {
+    this.focusedStopId.set(id);
+  }
+
+  add(day: number, place: string, note?: string, opts?: MutationOptions): ItineraryStop {
+    const stop: ItineraryStop = {
+      id: crypto.randomUUID(),
+      day,
+      place,
+      ...(note ? { note } : {}),
+      ...(opts?.coords ? { lat: opts.coords.lat, lng: opts.coords.lng } : {}),
+    };
+    this.update([...this.stops(), stop]);
+    this.flagChanged(stop.id, opts);
+    return stop;
+  }
+
+  move(place: string, toDay: number, opts?: MutationOptions): ItineraryStop | undefined {
+    const target = this.stops().find((s) => s.place.toLowerCase() === place.toLowerCase());
+    if (!target) return undefined;
+    const moved = { ...target, day: toDay };
+    this.update(this.stops().map((s) => (s.id === target.id ? moved : s)));
+    this.flagChanged(moved.id, opts);
+    return moved;
+  }
+
+  reorder(stopId: string, toDay: number, toIndex: number, opts?: MutationOptions): void {
+    const current = this.stops();
+    const target = current.find((s) => s.id === stopId);
+    if (!target) return;
+    const without = current.filter((s) => s.id !== stopId);
+    const dayStops = without.filter((s) => s.day === toDay);
+    const others = without.filter((s) => s.day !== toDay);
+    const clampedIndex = Math.max(0, Math.min(toIndex, dayStops.length));
+    const newDayStops = [
+      ...dayStops.slice(0, clampedIndex),
+      { ...target, day: toDay },
+      ...dayStops.slice(clampedIndex),
+    ];
+    this.update([...others, ...newDayStops]);
+    this.flagChanged(stopId, opts);
+  }
+
+  remove(id: string, opts?: MutationOptions): void {
+    this.update(this.stops().filter((s) => s.id !== id));
+    this.flagChanged(id, opts);
+  }
+
+  clearDay(day: number, opts?: MutationOptions): number {
+    const removed = this.stops().filter((s) => s.day === day).length;
+    this.update(this.stops().filter((s) => s.day !== day));
+    if (removed > 0) this.flagChanged(null, opts);
+    return removed;
+  }
+
+  reset(opts?: MutationOptions): void {
+    this.update([]);
+    this.flagChanged(null, opts);
+  }
+
+  private flagChanged(id: string | null, opts?: MutationOptions): void {
+    if (opts?.source === 'user') return;
+    if (this.pulseTimer) clearTimeout(this.pulseTimer);
+    this.recentlyChangedId.set(id);
+    if (id !== null) {
+      this.pulseTimer = setTimeout(() => {
+        this.recentlyChangedId.set(null);
+        this.pulseTimer = null;
+      }, PULSE_MS);
+    }
+  }
+
+  /** Replace the working copy from a server state snapshot (thread switch /
+   *  values stream). Public — the shell calls it when agent.values() changes. */
+  hydrate(stops: ItineraryStop[]): void {
+    this.stops.set(stops ?? []);
+  }
+
+  private update(next: ItineraryStop[]): void {
+    this.stops.set(next);
+  }
+}