Flight Canvas

Cyberpunk-themed flight comparison and seat selection interface.

Example Prompts

Try asking Claude:

• "Find flights from San Francisco to Denver on January 15th"
• "Book me a window seat on the cheapest nonstop to NYC"
• "Compare morning flights from LAX to Seattle next Monday"
• "I need a business class seat to Chicago with extra legroom"
• "Show me United flights to Boston under $300"

Scenarios

booking (default)

Interactive flight comparison and seat selection.

• Shows flight options with airline, times, duration, and price
• Interactive seat map for seat selection
• Keyboard navigation between flights and seats
• Returns selected flight and seat via IPC

bun run src/cli.ts spawn flight --scenario booking --config '{
  "title": "// FLIGHT_BOOKING_TERMINAL //",
  "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"]
      }
    }
  ]
}'

Configuration

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
}

Controls

• ↑/↓: Navigate between flights
• Tab: Switch focus between flight list and seatmap
• ←/→/↑/↓ (in seatmap): Move seat cursor
• Space: Select/deselect seat
• Enter: Confirm selection
• Shift+Enter: Confirm immediately (skip countdown)
• q or Esc: Cancel

Selection Result

interface FlightResult {
  selectedFlight: Flight;
  selectedSeat?: string;    // e.g., "12A"
}

Seat Legend

• [ ] - Available seat
• [X] - Occupied seat
• [/] - Unavailable/blocked
• [+] - Premium seat (extra legroom)
• [*] - Currently selected

API Usage

import { bookFlight } from "${CLAUDE_PLUGIN_ROOT}/src/api";

const result = await bookFlight({
  flights: [
    {
      id: "ua123",
      airline: "United Airlines",
      flightNumber: "UA 123",
      origin: { code: "SFO", name: "San Francisco", city: "SF", timezone: "PST" },
      destination: { code: "DEN", name: "Denver", 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",
      stops: 0,
      seatmap: { ... }
    }
  ]
});

if (result.success && result.data) {
  console.log(`Booked: ${result.data.selectedFlight.flightNumber}`);
  console.log(`Seat: ${result.data.selectedSeat}`);
}