Flight canvas for comparing flights and selecting seats. Use when users need to browse flight options and book seats.
Cyberpunk-themed flight comparison and seat selection interface.
Try asking:
Use canvas_spawn with:
kind: "flight"
scenario: "booking"
config: {
flights: [
{
id: "ua123",
airline: "United Airlines",
flightNumber: "UA 123",
origin: { code: "SFO", name: "San Francisco International", city: "San Francisco", timezone: "PST" },
destination: { code: "DEN", name: "Denver International", city: "Denver", timezone: "MST" },
departureTime: "2026-01-08T12:55:00-08:00",
arrivalTime: "2026-01-08T16:37:00-07:00",
duration: 162,
price: 34500,
currency: "USD",
cabinClass: "economy",
aircraft: "Boeing 737-800",
stops: 0,
seatmap: {
rows: 30,
seatsPerRow: ["A", "B", "C", "D", "E", "F"],
aisleAfter: ["C"],
unavailable: ["1A", "1B", "1C", "1D", "1E", "1F"],
premium: ["2A", "2B", "2C", "2D", "2E", "2F"],
occupied: ["3A", "3C", "4B", "5D"]
}
}
]
}
booking (default)Interactive flight comparison and seat selection.
interface FlightConfig {
flights: Flight[];
title?: string; // Header title
showSeatmap?: boolean; // Enable seat selection
selectedFlightId?: string; // Pre-select a flight
}
interface Flight {
id: string;
airline: string; // e.g., "United Airlines"
flightNumber: string; // e.g., "UA 123"
origin: Airport;
destination: Airport;
departureTime: string; // ISO datetime
arrivalTime: string; // ISO datetime
duration: number; // Minutes
price: number; // Cents
currency: string; // e.g., "USD"
cabinClass: "economy" | "premium" | "business" | "first";
aircraft?: string; // e.g., "Boeing 737-800"
stops: number; // 0 = nonstop
seatmap?: Seatmap; // Optional seat selection
}
interface Airport {
code: string; // 3-letter code
name: string; // Full airport name
city: string;
timezone: string;
}
interface Seatmap {
rows: number;
seatsPerRow: string[]; // e.g., ["A", "B", "C", "D", "E", "F"]
aisleAfter: string[]; // e.g., ["C"] = aisle after seat C
unavailable: string[]; // Blocked seats
premium: string[]; // Extra legroom/exit row
occupied: string[]; // Already booked
}
Up/Down: Navigate between flightsTab: Switch focus between flight list and seatmapLeft/Right/Up/Down (in seatmap): Move seat cursorSpace: Select/deselect seatEnter: Confirm selectionShift+Enter: Confirm immediately (skip countdown)q or Esc: Cancelinterface FlightResult {
selectedFlight: Flight;
selectedSeat?: string; // e.g., "12A"
}
[ ] - Available seat[X] - Occupied seat[/] - Unavailable/blocked[+] - Premium seat (extra legroom)[*] - Currently selectedThe canvas returns:
{
success: true,
data: {
selectedFlight: { /* full flight object */ },
selectedSeat: "12A"
}
}
// or
{
success: true,
cancelled: true // User pressed Esc/q
}
// or
{
success: false,
error: "Canvas requires a tmux session"
}