feat: show chosen payment option in action card

Author: manfredsteyer

ai-server/src/mastra/tools/book-flight.ts

@@ -38,11 +38,14 @@ const flightSchema = z.object({
 // Shape mirrors Mastra's tool-result convention (`result: string`) with
 // additive domain fields (`flight`, `code`), so our own returns and Mastra's
 // built-in decline string normalize into the same client type.
+const paymentMethodSchema = z.enum(['creditCard', 'miles']);
+
 const resultSchema = z.union([
   z.object({
     ok: z.literal(true),
     result: z.string(),
     flight: flightSchema,
+    paymentMethod: paymentMethodSchema.optional(),
   }),
   z.object({
     ok: z.literal(false),
@@ -158,6 +161,7 @@ export const bookFlightTool = createTool({
       ok: true as const,
       result: `Booked flight ${flightId} from ${flight.from} to ${flight.to} on ${formatFlightDate(flight.date)}${paymentSuffix}.`,
       flight,
+      paymentMethod: selection,
     };
   },
 });

src/app/domains/ticketing/ai/widgets/book-flight-action-card.ts

@@ -16,6 +16,7 @@ import {
   BookingClient,
   type FlightMutationFlight,
   type FlightMutationResult,
+  type FlightPaymentMethod,
 } from '../../data/flight-mutation-client';
 import {
   getActionStatusLabel,
@@ -25,6 +26,11 @@ import {
   toLoadFailedResult,
 } from './card-utils';
 
+const PAYMENT_METHOD_LABELS: Record<FlightPaymentMethod, string> = {
+  creditCard: 'Credit card',
+  miles: 'Bonus miles',
+};
+
 interface BookFlightInput {
   flightId: number;
 }
@@ -48,6 +54,10 @@ type BookFlightActionData = AgUiActionData<
 
         <p class="status-line">Status: {{ statusLabel() }}</p>
 
+        @if (paymentMethodLabel(); as paymentLabel) {
+          <p class="payment-line">Payment: {{ paymentLabel }}</p>
+        }
+
         @if (showUndo()) {
           <p>
             <button class="btn btn-default" type="button" (click)="undo()">
@@ -83,6 +93,10 @@ type BookFlightActionData = AgUiActionData<
       color: #4e5b78;
     }
 
+    .payment-line {
+      color: #4e5b78;
+    }
+
     p {
       margin-top: 0;
       margin-bottom: 0;
@@ -139,6 +153,19 @@ export class BookFlightActionCard implements AgUiActionCard<BookFlightActionData
     ),
   );
 
+  protected readonly paymentMethodLabel = computed(() => {
+    if (this.undoResult()) {
+      return null;
+    }
+
+    const result = this.result();
+    if (!result?.ok || !result.paymentMethod) {
+      return null;
+    }
+
+    return PAYMENT_METHOD_LABELS[result.paymentMethod];
+  });
+
   protected async undo(): Promise<void> {
     this.undoPending.set(true);
 

src/app/domains/ticketing/data/flight-mutation-client.ts

@@ -21,15 +21,18 @@ export type FlightMutationFailureCode =
   | 'LOAD_FAILED'
   | 'USER_CANCELLED';
 
+export type FlightPaymentMethod = 'creditCard' | 'miles';
+
 // Shape aligned with Mastra's tool-result convention (`result: string`) so
 // both our own tool returns and Mastra's built-in decline ("Tool call was not
 // approved by the user") map onto the same type. Extra fields (`flight`,
-// `code`) are additive domain data.
+// `code`, `paymentMethod`) are additive domain data.
 export type FlightMutationResult =
   | {
       ok: true;
       result: string;
       flight: FlightMutationFlight;
+      paymentMethod?: FlightPaymentMethod;
     }
   | {
       ok: false;