feat(examples-chat): port itinerary panel/map/day-card/clear-day UI (langgraph agent)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: blove

examples/chat/angular/src/app/clear-day-confirm.component.ts

@@ -0,0 +1,99 @@
+// SPDX-License-Identifier: MIT
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { injectRenderHost } from '@threadplane/render';
+import { ItineraryStore } from './itinerary-store';
+
+/**
+ * The interactive component for the `clear_day` client tool (an `ask`). The
+ * model fills `day`; the user confirms or cancels. Because an ask emits the
+ * tool result and the handler layer cannot intercept it, the mutation happens
+ * HERE: Clear writes the shared `ItineraryStore` (so the panel updates live)
+ * and then announces the outcome via `injectRenderHost().result(...)`, which
+ * becomes the tool result that resumes the run. Cancel never touches the store.
+ *
+ * Once the ask resolves, the adapter writes the emitted value back onto the
+ * local tool call, so this component re-renders with `cleared`/`removed` as
+ * props (chat-tool-views spreads `{...args, ...result, status}` into it). When
+ * `cleared()` is defined we render a FROZEN line with no buttons; the live
+ * interactive card only shows while `cleared()` is still undefined.
+ */
+@Component({
+  selector: 'app-clear-day-confirm',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    @if (cleared() === undefined) {
+      <div class="cdc">
+        <p class="cdc__summary">Clear all {{ count() }} stops on day {{ day() }}?</p>
+        <div class="cdc__actions">
+          <button type="button" class="cdc__btn cdc__btn--primary" (click)="clear()">Clear</button>
+          <button type="button" class="cdc__btn" (click)="cancel()">Cancel</button>
+        </div>
+      </div>
+    } @else if (cleared() === true) {
+      <div class="cdc cdc--resolved">
+        <p class="cdc__summary">Day {{ day() }} cleared — {{ removed() }} removed ✓</p>
+      </div>
+    } @else {
+      <div class="cdc cdc--resolved">
+        <p class="cdc__summary">Kept day {{ day() }} — clear cancelled</p>
+      </div>
+    }
+  `,
+  styles: [
+    `
+      .cdc {
+        border: 1px solid var(--tplane-chat-separator, #e5e7eb);
+        border-radius: 12px;
+        padding: 16px;
+        max-width: 360px;
+      }
+      .cdc--resolved .cdc__summary {
+        margin: 0;
+        opacity: 0.85;
+      }
+      .cdc__summary {
+        margin: 0 0 12px;
+      }
+      .cdc__actions {
+        display: flex;
+        gap: 8px;
+      }
+      .cdc__btn {
+        padding: 6px 14px;
+        border-radius: 8px;
+        border: 1px solid var(--tplane-chat-separator, #e5e7eb);
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+      }
+      .cdc__btn--primary {
+        background: var(--tplane-chat-accent, #2563eb);
+        color: #fff;
+        border-color: transparent;
+      }
+    `,
+  ],
+})
+export class ClearDayConfirmComponent {
+  readonly day = input.required<number>();
+  /** Spread back onto props after the ask resolves (undefined while interactive). */
+  readonly cleared = input<boolean | undefined>(undefined);
+  readonly removed = input<number | undefined>(undefined);
+  private readonly store = inject(ItineraryStore);
+  private readonly host = injectRenderHost();
+
+  protected readonly count = computed(
+    () => this.store.stops().filter((s) => s.day === this.day()).length,
+  );
+
+  protected clear(): void {
+    const day = this.day();
+    const removed = this.store.clearDay(day);
+    this.host.result({ cleared: true, day, removed });
+  }
+
+  protected cancel(): void {
+    this.host.result({ cleared: false, day: this.day() });
+  }
+}

examples/chat/angular/src/app/day-card.component.ts

@@ -0,0 +1,72 @@
+// SPDX-License-Identifier: MIT
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import type { ViewProps } from '@threadplane/chat';
+import { z } from 'zod/v4';
+
+/**
+ * Schema for the `day_card` view tool — co-located with the component so the
+ * inputs and the schema shape can be kept in sync at a glance.
+ * `client-tools.ts` imports this schema to pass to `view(…, DAY_CARD_SCHEMA, …)`.
+ */
+export const DAY_CARD_SCHEMA = z.object({
+  day: z.number().int().min(1),
+  places: z.array(z.string()),
+});
+
+/** Input types derived directly from the `day_card` schema — guarantees this
+ *  component stays compatible with the view() check at compile time. */
+type Inputs = ViewProps<typeof DAY_CARD_SCHEMA>;
+
+/**
+ * A frontend-owned view rendered for the `day_card` client tool. The model
+ * fills `day` and `places`; this card recaps one itinerary day after an edit.
+ */
+@Component({
+  selector: 'app-day-card',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="dc">
+      <div class="dc__head">Day {{ day() }}</div>
+      <ul class="dc__list">
+        @for (p of places(); track p) {
+          <li class="dc__item">{{ p }}</li>
+        } @empty {
+          <li class="dc__item dc__item--empty">No stops</li>
+        }
+      </ul>
+    </div>
+  `,
+  styles: [
+    `
+      .dc {
+        border: 1px solid var(--tplane-chat-separator, #e5e7eb);
+        border-radius: 12px;
+        padding: 16px;
+        max-width: 280px;
+      }
+      .dc__head {
+        font-weight: 600;
+        margin-bottom: 8px;
+      }
+      .dc__list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      .dc__item {
+        opacity: 0.9;
+      }
+      .dc__item--empty {
+        opacity: 0.5;
+      }
+    `,
+  ],
+})
+export class DayCardComponent {
+  readonly day = input.required<Inputs['day']>();
+  readonly places = input<Inputs['places']>([]);
+}

examples/chat/angular/src/app/itinerary-panel.component.spec.ts

@@ -0,0 +1,89 @@
+// SPDX-License-Identifier: MIT
+import { describe, it, expect, beforeEach } from 'vitest';
+import { TestBed } from '@angular/core/testing';
+import { provideAgent, FakeStreamTransport } from '@threadplane/langgraph';
+import { DEMO_AGENT_REF } from './shell/agent-ref';
+import { ItineraryPanelComponent } from './itinerary-panel.component';
+import { ItineraryStore } from './itinerary-store';
+
+// Bind the DEMO_AGENT_REF token to an in-process fake LangGraph agent so
+// injectAgent(DEMO_AGENT_REF) in the panel resolves without a backend.
+const fakeAgentProvider = provideAgent(DEMO_AGENT_REF, {
+  assistantId: 'fake',
+  transport: new FakeStreamTransport(),
+});
+
+describe('ItineraryPanelComponent — agent-edit pulse', () => {
+  beforeEach(() => localStorage.clear());
+
+  it('applies .itin__stop--pulse to the row matching recentlyChangedId', async () => {
+    TestBed.configureTestingModule({
+      providers: [
+        ItineraryStore,
+        ...fakeAgentProvider,
+      ],
+    });
+    const store = TestBed.inject(ItineraryStore);
+    const added = store.add(3, 'Sacré-Cœur'); // agent source by default
+
+    const fixture = TestBed.createComponent(ItineraryPanelComponent);
+    fixture.detectChanges();
+
+    const rows = fixture.nativeElement.querySelectorAll('.itin__stop');
+    const pulsing = Array.from(rows).filter((el: any) =>
+      el.classList.contains('itin__stop--pulse'),
+    );
+    expect(pulsing.length).toBe(1);
+    expect((pulsing[0] as HTMLElement).textContent).toContain('Sacré-Cœur');
+    // satisfy lint
+    expect(added.id).toBeDefined();
+  });
+
+  it('toggles the itin--collapsed host class via the collapse button', () => {
+    TestBed.configureTestingModule({
+      providers: [
+        ItineraryStore,
+        ...fakeAgentProvider,
+      ],
+    });
+
+    const fixture = TestBed.createComponent(ItineraryPanelComponent);
+    fixture.detectChanges();
+
+    const host = fixture.nativeElement as HTMLElement;
+    expect(host.classList.contains('itin--collapsed')).toBe(false);
+
+    const toggle = host.querySelector('.itin__collapse') as HTMLButtonElement;
+    expect(toggle).toBeTruthy();
+
+    toggle.click();
+    fixture.detectChanges();
+    expect(host.classList.contains('itin--collapsed')).toBe(true);
+
+    toggle.click();
+    fixture.detectChanges();
+    expect(host.classList.contains('itin--collapsed')).toBe(false);
+  });
+
+  it('highlights the focused row', () => {
+    TestBed.configureTestingModule({
+      providers: [
+        ItineraryStore,
+        ...fakeAgentProvider,
+      ],
+    });
+    const store = TestBed.inject(ItineraryStore);
+    // The chat-demo store starts empty, so seed a stop before focusing it.
+    const stop = store.add(1, 'Louvre');
+    store.focus(stop.id);
+
+    const fixture = TestBed.createComponent(ItineraryPanelComponent);
+    fixture.detectChanges();
+
+    const rows = fixture.nativeElement.querySelectorAll('.itin__stop');
+    const pulsing = Array.from(rows).filter((el: any) =>
+      el.classList.contains('itin__stop--pulse'),
+    );
+    expect(pulsing.length).toBe(1);
+  });
+});