/* A3 Studio (chat) — hotel booking · conversation, plan & context data. */

const CHAT_PROJECT = { title: 'search-hotels', site: 'booking.com', dataset: 'smith-family' };

/* Selectable input datasets for the workflow run. */
const CHAT_DATASETS = [
    { id: 'smith-family', label: 'smith-family', hint: 'Lisbon · 2 guests · 3 nights' },
    { id: 'jdoe-solo', label: 'jdoe-solo', hint: 'Paris · 1 guest · 1 night' },
    { id: 'acme-offsite', label: 'acme-offsite', hint: 'Berlin · 8 guests · 2 nights' },
    { id: 'qa-fixtures', label: 'qa-fixtures', hint: 'synthetic · 12 rows' },
];

const CHAT_SCOPE = {
    inputs: [
        { key: 'destination', preview: '"Lisbon, Portugal"' },
        { key: 'checkIn', preview: '"2026-07-14"' },
        { key: 'checkOut', preview: '"2026-07-17"' },
        { key: 'guests', preview: '{ adults: 2, rooms: 1 }' },
    ],
    outputs: [
        { key: 'booked', preview: 'true' },
        { key: 'reservation', preview: '{ ref: "BK-7741", … }' },
    ],
    context: [
        { key: 'browser.url', preview: '"…/book/guest"' },
        { key: 'stage.current', preview: '"guest-details"' },
        { key: 'session.exitCode', preview: 'null' },
    ],
};

/* Full JSON values for the data panel's tree viewer. */
const CHAT_SCOPE_DATA = {
    inputs: {
        destination: 'Lisbon, Portugal',
        checkIn: '2026-07-14',
        checkOut: '2026-07-17',
        guests: { adults: 2, children: 0, rooms: 1 },
        budget: { currency: 'GBP', maxPerNight: 200 },
        guest: { firstName: 'John', lastName: 'Smith', title: 'Mr', email: 'john@example.com', phone: '+44 7700 900180' },
        preferences: { roomType: 'double', breakfast: true, bed: 'king' },
    },
    outputs: {
        booked: true,
        reservation: { ref: 'BK-7741', hotel: 'The Grand Avenida', room: 'Deluxe Double', checkIn: '2026-07-14', checkOut: '2026-07-17', total: { currency: 'GBP', amount: 534 } },
        warnings: [],
    },
    context: {
        browser: { url: 'https://booking.com/book/guest', title: 'Your details', viewport: { width: 1280, height: 800 } },
        stage: { current: 'guest-details', index: 3, total: 5 },
        session: { id: 'sess_b41d7e', runner: 'chrome', exitCode: null, startedAt: '2026-06-18T09:21:04Z' },
    },
};

const CHAT_PLAN = [
    { name: 'open-site', status: 'pending' },
    { name: 'search', status: 'pending' },
    { name: 'choose-room', status: 'pending' },
    { name: 'enter-guest', status: 'pending' },
    { name: 'enter-card', status: 'pending' },
    { name: 'finalise', status: 'pending' },
];

/* Learning mode — learn ALL workflows at once by chaining them. The rail
   shows every workflow's stages in sequence; the agent walks the chain,
   learning each stage and carrying outputs forward. The six workflows mirror
   the booking funnel: search → select → guest → extras → pay → confirm. */
const ORCHESTRATOR_PLAN = [
    { workflow: 'search-hotels', site: 'booking.com', stages: [
        { name: 'open-site', status: 'pending' },
        { name: 'search', status: 'pending' },
    ] },
    { workflow: 'select-room', site: 'booking.com', stages: [
        { name: 'open-hotel', status: 'pending' },
        { name: 'choose-room', status: 'pending' },
    ] },
    { workflow: 'guest-details', site: 'booking.com', stages: [
        { name: 'enter-guest', status: 'pending' },
    ] },
    { workflow: 'add-extras', site: 'booking.com', stages: [
        { name: 'add-breakfast', status: 'pending' },
    ] },
    { workflow: 'payment', site: 'booking.com', stages: [
        { name: 'enter-card', status: 'pending' },
        { name: 'authorize', status: 'pending' },
    ] },
    { workflow: 'confirm-booking', site: 'booking.com', stages: [
        { name: 'finalise', status: 'pending' },
    ] },
];

const ORCHESTRATOR_THREAD = [
    { role: 'user', text: 'learn booking.com' },
    { role: 'agent', text: "I'll learn them as one chain of **6 workflows**: **search-hotels → select-room → guest-details → add-extras → payment → confirm-booking**, carrying each workflow's outputs into the next. Let me read the missions first." },
    { role: 'tool', icon: 'far fa-file-lines', name: 'read', args: 'missions/search-hotels.mission.md', result: '12 lines · 2 stages', status: 'ok' },
    { role: 'tool', icon: 'far fa-file-lines', name: 'read', args: 'missions/select-room.mission.md', result: '10 lines · 2 stages', status: 'ok' },
    { role: 'tool', icon: 'far fa-file-lines', name: 'read', args: 'missions/guest-details.mission.md', result: '11 lines · 1 stage', status: 'ok' },
    { role: 'tool', icon: 'far fa-file-lines', name: 'read', args: 'missions/add-extras.mission.md', result: '9 lines · 1 stage', status: 'ok' },
    { role: 'tool', icon: 'far fa-file-lines', name: 'read', args: 'missions/payment.mission.md', result: '12 lines · 2 stages', status: 'ok' },
    { role: 'tool', icon: 'far fa-file-lines', name: 'read', args: 'missions/confirm-booking.mission.md', result: '8 lines · 1 stage', status: 'ok' },
    { role: 'agent', text: "Starting with **search-hotels**. I'll author each stage and run it against booking.com." },
    { role: 'tool', icon: 'far fa-play', name: 'run stage', args: 'search-hotels / open-site', result: 'passed · booking.com loaded', status: 'ok', ostages: { 'search-hotels/open-site': 'executed' }, screen: 'search' },
    { role: 'agent', text: "The date picker is a custom calendar widget, not native inputs. Writing the `search` stage to open it and click the day cells.", ostages: { 'search-hotels/search': 'executing' } },
    { role: 'diff', file: 'search-hotels/search.stage.ts', added: 3, removed: 1, hunks: [
        { type: 'ctx', text: "    await this.type('#destination', ctx.inputs.destination);" },
        { type: 'del', text: "    await this.type('#dates', ctx.inputs.checkIn);" },
        { type: 'add', text: "    await this.click('[data-testid=date-display-field-start]');" },
        { type: 'add', text: "    await this.click(`[data-date=\"${ctx.inputs.checkIn}\"]`);" },
        { type: 'add', text: "    await this.click(`[data-date=\"${ctx.inputs.checkOut}\"]`);" },
    ] },
    { role: 'tool', icon: 'far fa-play', name: 'run stage', args: 'search-hotels / search', result: 'passed · 18 under £200/night', status: 'ok', ostages: { 'search-hotels/search': 'executed' }, screen: 'results' },
    { role: 'agent', text: "**search-hotels** is learned. Chaining the top result's `hotelId` into **select-room**." },
    { role: 'tool', icon: 'far fa-link', name: 'chain', args: 'search-hotels.output → select-room.input', result: 'hotelId, dates mapped', status: 'ok' },
    { role: 'tool', icon: 'far fa-play', name: 'run stage', args: 'select-room / open-hotel', result: 'passed · The Grand Avenida opened', status: 'ok', ostages: { 'select-room/open-hotel': 'executed' }, screen: 'hotel-detail' },
    { role: 'tool', icon: 'far fa-play', name: 'run stage', args: 'select-room / choose-room', result: 'passed · Deluxe Double selected', status: 'ok', ostages: { 'select-room/choose-room': 'executed' }, screen: 'hotel-detail' },
    { role: 'agent', text: "**select-room** done. Now **guest-details** — the title field is a custom combobox, so I'll drive it by keyboard.", ostages: { 'guest-details/enter-guest': 'executing' } },
    { role: 'diff', file: 'guest-details/enter-guest.stage.ts', added: 3, removed: 1, hunks: [
        { type: 'ctx', text: "    await this.type('#lastName', g.lastName);" },
        { type: 'del', text: "    await this.select('#title', g.title);" },
        { type: 'add', text: "    await this.click('#title');" },
        { type: 'add', text: "    await this.keyboard.type(g.title);" },
        { type: 'add', text: "    await this.keyboard.press('Enter');" },
    ] },
    { role: 'tool', icon: 'far fa-play', name: 'run stage', args: 'guest-details / enter-guest', result: 'passed · guest filled', status: 'ok', ostages: { 'guest-details/enter-guest': 'executed' }, screen: 'guest-details' },
    { role: 'agent', text: "Guest captured. Chaining into **add-extras** to add breakfast to the stay." },
    { role: 'tool', icon: 'far fa-link', name: 'chain', args: 'guest-details.output → add-extras.input', result: 'stayId mapped', status: 'ok' },
    { role: 'tool', icon: 'far fa-play', name: 'run stage', args: 'add-extras / add-breakfast', result: 'passed · breakfast added (+£36)', status: 'ok', ostages: { 'add-extras/add-breakfast': 'executed' }, screen: 'guest-details' },
    { role: 'agent', text: "Extras added. Learning **payment** next — entering the card, then authorizing." },
    { role: 'tool', icon: 'far fa-play', name: 'run stage', args: 'payment / enter-card', result: 'passed · card accepted', status: 'ok', ostages: { 'payment/enter-card': 'executed' }, screen: 'payment' },
    { role: 'tool', icon: 'far fa-play', name: 'run stage', args: 'payment / authorize', result: 'Error: 3-D Secure iframe timed out', status: 'error', ostages: { 'payment/authorize': 'failed' }, screen: 'payment' },
    { role: 'agent', text: "Authorization bounced to a 3-D Secure challenge in an iframe. Scoping the wait to the frame and resuming.", ostages: { 'payment/authorize': 'executing' } },
    { role: 'diff', file: 'payment/authorize.stage.ts', added: 1, removed: 1, hunks: [
        { type: 'del', text: "    await this.waitFor('.payment-accepted');" },
        { type: 'add', text: "    await this.frame('#3ds').waitFor('input[name=otp]');" },
    ] },
    { role: 'tool', icon: 'far fa-play', name: 'run stage', args: 'payment / authorize', result: 'passed · payment authorized · £534', status: 'ok', ostages: { 'payment/authorize': 'executed' }, screen: 'payment' },
    { role: 'agent', text: "**payment** learned. Finishing with **confirm-booking** to capture the reference." },
    { role: 'tool', icon: 'far fa-play', name: 'run stage', args: 'confirm-booking / finalise', result: 'passed · ref BK-7741 · £534', status: 'ok', ostages: { 'confirm-booking/finalise': 'executed' }, screen: 'confirmation' },
    { role: 'agent', text: "All **6 workflows** are learned and chained — search → select-room → guest-details → add-extras → payment → confirm-booking. **9/9 stages** passing end to end." },
    { role: 'cta', to: 'run', text: "Every workflow in the funnel is learned and chained. You can now talk to them all at once as MCP tools.", link: 'Open Chat to MCP →' },
];

/* The agent conversation — fixing a failing stage (learn-mode shape, kept
   for parity; reachable via the orchestrator's per-stage editing). */
const CHAT_THREAD = [
    { role: 'user', text: 'The enter-guest stage keeps failing on the title dropdown. Can you take a look and fix it?' },
    { role: 'agent', text: "Let me reproduce it first — I'll read the stage and run it against the live site." },
    { role: 'tool', icon: 'far fa-file-code', name: 'read', args: 'stages/enter-guest.stage.ts', result: '13 lines', status: 'ok' },
    { role: 'tool', icon: 'far fa-play', name: 'run stage', args: 'enter-guest', result: "Error: select('#title') — element is not a <select>", status: 'error', stages: { 'open-site': 'executed', 'search': 'executed', 'choose-room': 'executed', 'enter-guest': 'failed' }, screen: 'guest-details' },
    { role: 'agent', text: "Found it. `#title` isn't a native `<select>` — it's a custom combobox, so `this.select()` can't drive it. I'll open it with a click and pick the option with the keyboard instead." },
    { role: 'diff', file: 'stages/enter-guest.stage.ts', added: 3, removed: 1, hunks: [
        { type: 'ctx', text: "    await this.type('#lastName', g.lastName);" },
        { type: 'del', text: "    await this.select('#title', g.title);" },
        { type: 'add', text: "    await this.click('#title');" },
        { type: 'add', text: "    await this.keyboard.type(g.title);" },
        { type: 'add', text: "    await this.keyboard.press('Enter');" },
        { type: 'ctx', text: "    await this.click('button.continue');" },
    ] },
    { role: 'tool', icon: 'far fa-pen', name: 'edit', args: 'stages/enter-guest.stage.ts', result: '+3 −1', status: 'ok' },
    { role: 'agent', text: "Re-running the stage against the live page to confirm the fix." },
    { role: 'tool', icon: 'far fa-location-dot', name: 'match stage', args: 'enter-guest', result: 'matched', status: 'ok', stages: { 'enter-guest': 'executing' }, screen: 'guest-details' },
    { role: 'tool', icon: 'far fa-play', name: 'run stage', args: 'enter-guest', result: 'passed · title=Mr, guest filled', status: 'ok', stages: { 'enter-guest': 'executed' }, screen: 'guest-details' },
    { role: 'agent', text: "Fixed. **enter-guest** now matches — the title is selected via keyboard and the guest details fill cleanly. The extras, payment and confirmation stages are next. Want me to continue the run?" },
];

/* The workflows in this project — in Chat-to-MCP mode each is exposed to
   the agent as a single MCP tool (you talk to all of them at once). The six
   mirror the natural booking funnel, one workflow per step. */
const CHAT_WORKFLOWS = [
    { name: 'search-hotels', site: 'booking.com', desc: 'Search & shortlist available hotels' },
    { name: 'select-room', site: 'booking.com', desc: 'Open a hotel and choose a room' },
    { name: 'guest-details', site: 'booking.com', desc: 'Enter the lead guest details' },
    { name: 'add-extras', site: 'booking.com', desc: 'Add breakfast, parking or late checkout' },
    { name: 'payment', site: 'booking.com', desc: 'Enter card and authorize payment' },
    { name: 'confirm-booking', site: 'booking.com', desc: 'Finalise and capture the reservation' },
];

/* Chat-to-MCP mode — every WORKFLOW is exposed to the agent as a tool.
   You talk to all workflows at once; the agent invokes whole workflows. */
const CHAT_THREAD_RUN = [
    { role: 'user', text: 'Book the Smith family 3 nights in Lisbon under £200/night with breakfast.' },
    { role: 'agent', text: 'I have **6 workflows** available as MCP tools, one per step of the booking funnel. I’ll run them against booking.com with the `smith-family` dataset.' },
    { role: 'tool', kind: 'workflow', icon: 'far fa-diagram-project', name: 'search-hotels', args: '{ maxPerNight: 200 }', result: 'ok · 18 results · top: The Grand Avenida', status: 'ok', screen: 'results' },
    { role: 'tool', kind: 'workflow', icon: 'far fa-diagram-project', name: 'select-room', args: '{ room: "deluxe-double" }', result: 'ok · Deluxe Double selected', status: 'ok', screen: 'hotel-detail' },
    { role: 'tool', kind: 'workflow', icon: 'far fa-diagram-project', name: 'add-extras', args: '{ add: "breakfast" }', result: 'ok · breakfast added (+£36)', status: 'ok', screen: 'guest-details' },
    { role: 'tool', kind: 'workflow', icon: 'far fa-diagram-project', name: 'payment', args: '{ card: "smith-visa" }', result: 'ok · payment authorized · £534', status: 'ok', screen: 'payment' },
    { role: 'tool', kind: 'workflow', icon: 'far fa-diagram-project', name: 'confirm-booking', args: '{}', result: 'ok · booked · ref BK-7741', status: 'ok', screen: 'confirmation' },
    { role: 'agent', text: "Done — the Smith family is booked into **The Grand Avenida** (Deluxe Double, 14–17 Jul) for **£534**, breakfast included (ref `BK-7741`). Want me to also request an early check-in?" },
];

/* Project-config mode — the left pane shows the project's source tree
   (missions, workflows, schemas, libraries, skills) and the agent helps
   you author them. */
const CONFIG_TREE = [
    { type: 'folder', name: 'missions', children: [
        { type: 'file', name: 'search-hotels.mission.md', path: 'search-hotels.mission.md' },
        { type: 'file', name: 'select-room.mission.md', path: 'select-room.mission.md' },
        { type: 'file', name: 'guest-details.mission.md', path: 'guest-details.mission.md' },
        { type: 'file', name: 'add-extras.mission.md', path: 'add-extras.mission.md' },
        { type: 'file', name: 'payment.mission.md', path: 'payment.mission.md' },
        { type: 'file', name: 'confirm-booking.mission.md', path: 'confirm-booking.mission.md' },
    ] },
    { type: 'folder', name: 'workflows', children: [
        { type: 'file', name: 'search-hotels.workflow.ts', path: 'search-hotels.workflow.ts' },
        { type: 'file', name: 'select-room.workflow.ts', path: 'select-room.workflow.ts' },
        { type: 'file', name: 'guest-details.workflow.ts', path: 'guest-details.workflow.ts' },
        { type: 'file', name: 'add-extras.workflow.ts', path: 'add-extras.workflow.ts' },
        { type: 'file', name: 'payment.workflow.ts', path: 'payment.workflow.ts' },
        { type: 'file', name: 'confirm-booking.workflow.ts', path: 'confirm-booking.workflow.ts' },
    ] },
    { type: 'folder', name: 'schemas', children: [
        { type: 'file', name: 'guest.schema.ts', path: 'guest.schema.ts' },
        { type: 'file', name: 'stay.schema.ts', path: 'stay.schema.ts' },
    ] },
    { type: 'folder', name: 'libraries', children: [
        { type: 'file', name: 'hotels.lib.ts', path: 'hotels.lib.ts' },
        { type: 'file', name: 'dates.lib.ts', path: 'dates.lib.ts' },
    ] },
    { type: 'folder', name: 'skills', children: [
        { type: 'file', name: 'cookie-messages.md', path: 'cookie-messages.md' },
        { type: 'file', name: 'captcha.md', path: 'captcha.md' },
        { type: 'file', name: 'two-factor.md', path: 'two-factor.md' },
    ] },
    { type: 'file', name: 'project.config.ts', path: 'project.config.ts' },
];

const CONFIG_FILES = {
    'search-hotels.mission.md': [
        "# Search hotels mission",
        "",
        "Search and shortlist hotels on **booking.com**.",
        "",
        "## Stages to build",
        "1. **open-site** — navigate to the homepage and wait for search.",
        "2. **search** — enter `destination`, open the calendar and pick",
        "   `checkIn` / `checkOut`, set guests, then filter to budget and",
        "   collect the top results' `hotelId` and price.",
        "",
        "## Output",
        "- `results: { hotelId, name, pricePerNight }[]`",
    ],
    'select-room.mission.md': [
        "# Select room mission",
        "",
        "Open a hotel and choose a room on **booking.com**.",
        "",
        "## Stages to build",
        "1. **open-hotel** — open the shortlisted hotel's detail page.",
        "2. **choose-room** — pick the room type and reserve it.",
        "",
        "## Inputs",
        "- `hotelId`, `roomType`",
        "",
        "## Output",
        "- `room: { id, name, pricePerNight }`",
    ],
    'guest-details.mission.md': [
        "# Guest details mission",
        "",
        "Enter the lead guest on **booking.com**.",
        "",
        "## Stages to build",
        "1. **enter-guest** — fill the lead guest. The title field is a",
        "   custom combobox: click it, then keyboard-select the value.",
        "",
        "## Inputs",
        "- `guest` — see `schemas/guest.schema.ts`",
        "",
        "## Output",
        "- `stayId: string`",
    ],
    'add-extras.mission.md': [
        "# Add extras mission",
        "",
        "Add optional extras to the stay on **booking.com**.",
        "",
        "## Stages to build",
        "1. **add-breakfast** — tick breakfast (and any parking / late",
        "   checkout) and recompute the total.",
        "",
        "## Output",
        "- `extras: string[]`, `total: number`",
    ],
    'payment.mission.md': [
        "# Payment mission",
        "",
        "Pay for the booking on **booking.com**.",
        "",
        "## Stages to build",
        "1. **enter-card** — enter card details into the payment form.",
        "2. **authorize** — submit and handle the 3-D Secure iframe.",
        "",
        "## Inputs",
        "- `card`, `total`",
        "",
        "## Output",
        "- `authorized: boolean`",
    ],
    'confirm-booking.mission.md': [
        "# Confirm booking mission",
        "",
        "Finalise the booking on **booking.com**.",
        "",
        "## Stages to build",
        "1. **finalise** — submit and capture the reservation reference.",
        "",
        "## Output",
        "- `booked: boolean`, `reservation: { ref, hotel, room, total }`",
    ],
    'search-hotels.workflow.ts': [
        "// search-hotels.workflow.ts",
        "import { Workflow } from '@athree/core';",
        "",
        "export default new Workflow({",
        "    name: 'search-hotels',",
        "    site: 'booking.com',",
        "    mission: 'search-hotels.mission.md',",
        "    stages: ['open-site', 'search'],",
        "    output: { results: 'array' },",
        "});",
    ],
    'select-room.workflow.ts': [
        "// select-room.workflow.ts",
        "import { Workflow } from '@athree/core';",
        "",
        "export default new Workflow({",
        "    name: 'select-room',",
        "    site: 'booking.com',",
        "    mission: 'select-room.mission.md',",
        "    stages: ['open-hotel', 'choose-room'],",
        "    output: { room: 'object' },",
        "});",
    ],
    'guest-details.workflow.ts': [
        "// guest-details.workflow.ts",
        "import { Workflow } from '@athree/core';",
        "",
        "export default new Workflow({",
        "    name: 'guest-details',",
        "    site: 'booking.com',",
        "    mission: 'guest-details.mission.md',",
        "    stages: ['enter-guest'],",
        "    output: { stayId: 'string' },",
        "});",
    ],
    'add-extras.workflow.ts': [
        "// add-extras.workflow.ts",
        "import { Workflow } from '@athree/core';",
        "",
        "export default new Workflow({",
        "    name: 'add-extras',",
        "    site: 'booking.com',",
        "    mission: 'add-extras.mission.md',",
        "    stages: ['add-breakfast'],",
        "    output: { extras: 'array', total: 'number' },",
        "});",
    ],
    'payment.workflow.ts': [
        "// payment.workflow.ts",
        "import { Workflow } from '@athree/core';",
        "",
        "export default new Workflow({",
        "    name: 'payment',",
        "    site: 'booking.com',",
        "    mission: 'payment.mission.md',",
        "    stages: ['enter-card', 'authorize'],",
        "    output: { authorized: 'boolean' },",
        "});",
    ],
    'confirm-booking.workflow.ts': [
        "// confirm-booking.workflow.ts",
        "import { Workflow } from '@athree/core';",
        "",
        "export default new Workflow({",
        "    name: 'confirm-booking',",
        "    site: 'booking.com',",
        "    mission: 'confirm-booking.mission.md',",
        "    stages: ['finalise'],",
        "    output: { booked: 'boolean', reservation: 'object' },",
        "});",
    ],
    'guest.schema.ts': [
        "// guest.schema.ts",
        "import { z } from 'zod';",
        "",
        "export const guest = z.object({",
        "    firstName: z.string().min(1),",
        "    lastName: z.string().min(1),",
        "    title: z.enum(['Mr', 'Ms', 'Mx', 'Dr']),",
        "    email: z.string().email(),",
        "    phone: z.string().min(7),",
        "});",
        "",
        "export type Guest = z.infer<typeof guest>;",
    ],
    'stay.schema.ts': [
        "// stay.schema.ts",
        "import { z } from 'zod';",
        "",
        "export const stay = z.object({",
        "    destination: z.string().min(2),",
        "    checkIn: z.coerce.date(),",
        "    checkOut: z.coerce.date(),",
        "    guests: z.object({ adults: z.number().int().min(1), children: z.number().int().min(0) }),",
        "    roomType: z.enum(['single', 'double', 'twin', 'suite']),",
        "});",
        "",
        "export type Stay = z.infer<typeof stay>;",
    ],
    'hotels.lib.ts': [
        "// hotels.lib.ts",
        "export const chains = {",
        "    booking: { name: 'Booking.com', site: 'booking.com' },",
        "    hotels: { name: 'Hotels.com', site: 'hotels.com' },",
        "};",
        "",
        "export const nights = (a, b) =>",
        "    Math.round((+new Date(b) - +new Date(a)) / 86400000);",
    ],
    'dates.lib.ts': [
        "// dates.lib.ts",
        "export const fmtDate = (d) => new Date(d).toISOString().slice(0, 10);",
    ],
    'cookie-messages.md': [
        "# Skill: dismiss cookie messages",
        "",
        "A reusable skill any stage can apply before interacting with a page.",
        "Most sites show a consent banner that blocks clicks until dismissed.",
        "",
        "## When to use",
        "- Right after `open-site`, before the first interaction.",
        "- Whenever a click is intercepted by an overlay.",
        "",
        "## Steps",
        "1. Wait up to 3s for a consent dialog (`[id*=cookie]`, `[class*=consent]`).",
        "2. Prefer the **reject-all** control; fall back to **accept-all**.",
        "3. Confirm the overlay is gone before continuing.",
        "",
        "## Selectors to try",
        "- `button:has-text(\"Reject all\")`, `button:has-text(\"Accept all\")`",
        "- `#onetrust-reject-all-handler`, `.cookie-banner button`",
        "",
        "> If no banner appears within the timeout, continue silently.",
    ],
    'captcha.md': [
        "# Skill: handle captcha",
        "",
        "Detect and route around CAPTCHA challenges.",
        "",
        "## Steps",
        "1. Detect a challenge (`iframe[src*=recaptcha]`, `[class*=captcha]`).",
        "2. Pause the run and request a solve via the configured provider.",
        "3. Resume once the token is injected; retry the blocked action.",
        "",
        "> If unsolvable, fail the stage with `reason: 'captcha'`.",
    ],
    'two-factor.md': [
        "# Skill: two-factor / OTP",
        "",
        "Complete a one-time-password challenge during login or payment.",
        "",
        "## Steps",
        "1. Detect the OTP field (`input[autocomplete=one-time-code]`).",
        "2. Fetch the code from the dataset or the connected inbox/SMS hook.",
        "3. Type the code and submit; wait for navigation.",
    ],
    'project.config.ts': [
        "// project.config.ts",
        "export default {",
        "    project: 'hotel-booking',",
        "    runner: 'chrome',",
        "    dataset: 'smith-family',",
        "};",
    ],
};

const CHAT_THREAD_CONFIG = [
    { role: 'agent', text: "Let's set up your **hotel-booking** project. I'll work bottom-up: first scaffold the reusable **libraries** and **skills**, then reason about the data **schemas**, then write a **mission** per workflow, and finally the **workflow** definitions that tie it together. What site and tasks should it cover?" },
    { role: 'user', text: 'Booking.com — the whole funnel: search hotels, select a room, enter guest details, add extras, pay, and confirm.' },
    { role: 'agent', text: "Got it — six workflows on one site, one per funnel step. Starting with the project config and the shared building blocks, since missions and workflows will depend on them." },
    { role: 'tool', kind: 'config', icon: 'far fa-file-pen', name: 'write', args: 'project.config.ts', cfile: 'project.config.ts', result: '+5 lines', status: 'ok' },
    { role: 'agent', text: "Scaffolding the **libraries** (hotel-chain metadata, date helpers) and the **skills** every stage can reuse — dismissing cookie banners, solving captchas, and OTP at payment. These are generic, so I can drop them in immediately." },
    { role: 'tool', kind: 'config', icon: 'far fa-folder-plus', name: 'scaffold', args: 'libraries/ + skills/', cfiles: ['libraries/hotels.lib.ts', 'libraries/dates.lib.ts', 'skills/cookie-messages.md', 'skills/captcha.md', 'skills/two-factor.md'], result: '5 files · 2 libraries, 3 skills', status: 'ok' },
    { role: 'agent', text: "Now the **schemas**. Every workflow touches a **stay** (destination, dates, guests, room type) and a lead **guest** (title, names, email, phone). They're shared across the funnel, so two schemas cover all six workflows — I'll model them in Zod so inputs are validated everywhere." },
    { role: 'tool', kind: 'config', icon: 'far fa-file-pen', name: 'write', args: 'schemas/guest.schema.ts', cfile: 'schemas/guest.schema.ts', result: '+11 lines', status: 'ok' },
    { role: 'tool', kind: 'config', icon: 'far fa-file-pen', name: 'write', args: 'schemas/stay.schema.ts', cfile: 'schemas/stay.schema.ts', result: '+12 lines', status: 'ok' },
    { role: 'agent', text: "With the schemas in place I can write the **missions** — a Markdown brief per workflow that the agent follows to build the stage files. Each lists its stages, the inputs (referencing the schemas above), and the expected output. I'll batch all six funnel steps in one pass." },
    { role: 'tool', kind: 'config', icon: 'far fa-folder-plus', name: 'scaffold', args: 'missions/', cfiles: ['missions/search-hotels.mission.md', 'missions/select-room.mission.md', 'missions/guest-details.mission.md', 'missions/add-extras.mission.md', 'missions/payment.mission.md', 'missions/confirm-booking.mission.md'], result: '6 files · one mission per workflow', status: 'ok' },
    { role: 'agent', text: "Finally the **workflow** definitions — each binds its mission to a site, declares its stage list, and types its output so the orchestrator can chain the funnel together later." },
    { role: 'tool', kind: 'config', icon: 'far fa-folder-plus', name: 'scaffold', args: 'workflows/', cfiles: ['workflows/search-hotels.workflow.ts', 'workflows/select-room.workflow.ts', 'workflows/guest-details.workflow.ts', 'workflows/add-extras.workflow.ts', 'workflows/payment.workflow.ts', 'workflows/confirm-booking.workflow.ts'], result: '6 files · one workflow per funnel step', status: 'ok' },
    { role: 'agent', text: "Project scaffolded — **19 files**: 2 libraries, 3 skills, 2 Zod schemas, 6 missions and 6 workflows. Each mission lists the stages to build; open one on the left to review it, then learn the workflows in Learning mode." },
    { role: 'cta', to: 'orchestrate', text: "Your project is configured. Next, learn all the workflows at once by chaining them together.", link: 'Open Learning →' },
];

/* Per-stage source files — the post-fix (clean, diff-free) contents,
   shown in the right-pane editor when a stage is opened. */
const STAGE_FILES = {
    'open-site': [
        "// open-site.stage.ts",
        "",
        "import { Stage } from '@athree/runner';",
        "",
        "export default class OpenSite extends Stage {",
        "    async run(ctx) {",
        "        await this.goto('https://booking.com');",
        "        await this.waitFor('form.search');",
        "        return { matched: true };",
        "    }",
        "}",
    ],
    'search': [
        "// search.stage.ts",
        "",
        "import { Stage } from '@athree/runner';",
        "",
        "export default class Search extends Stage {",
        "    async run(ctx) {",
        "        await this.type('#destination', ctx.inputs.destination);",
        "        await this.click('[data-testid=date-display-field-start]');",
        "        await this.click(`[data-date=\"${ctx.inputs.checkIn}\"]`);",
        "        await this.click(`[data-date=\"${ctx.inputs.checkOut}\"]`);",
        "        await this.click('button.search-submit');",
        "        return { matched: true };",
        "    }",
        "}",
    ],
    'choose-room': [
        "// choose-room.stage.ts",
        "",
        "import { Stage } from '@athree/runner';",
        "",
        "export default class ChooseRoom extends Stage {",
        "    async run(ctx) {",
        "        await this.click(`[data-room=\"${ctx.inputs.roomType}\"] button.reserve`);",
        "        await this.waitFor('main.book');",
        "        return { matched: true };",
        "    }",
        "}",
    ],
    'enter-guest': [
        "// enter-guest.stage.ts",
        "",
        "import { Stage } from '@athree/runner';",
        "",
        "export default class EnterGuest extends Stage {",
        "    async run(ctx) {",
        "        const g = ctx.inputs.guest;",
        "        await this.type('#firstName', g.firstName);",
        "        await this.type('#lastName', g.lastName);",
        "        await this.click('#title');",
        "        await this.keyboard.type(g.title);",
        "        await this.keyboard.press('Enter');",
        "        await this.click('button.continue');",
        "        return { matched: true };",
        "    }",
        "}",
    ],
    'enter-card': [
        "// enter-card.stage.ts",
        "",
        "import { Stage } from '@athree/runner';",
        "",
        "export default class EnterCard extends Stage {",
        "    async run(ctx) {",
        "        const c = ctx.inputs.card;",
        "        await this.type('#cardNumber', c.number);",
        "        await this.type('#cardExpiry', c.expiry);",
        "        await this.type('#cardCvc', c.cvc);",
        "        await this.click('button.pay');",
        "        return { matched: true };",
        "    }",
        "}",
    ],
};

/* Empty-state suggested prompts, per mode. Each has a headline title and
   the prompt text that gets "typed" when clicked. */
const CHAT_SUGGESTIONS = {
    orchestrate: {
        title: 'Learn every workflow at once',
        blurb: 'A3 learns all workflows and chains each one’s output into the next.',
        items: [
            { icon: 'far fa-graduation-cap', label: 'Learn booking.com', prompt: 'learn booking.com' },
        ],
    },
    run: {
        title: 'Chat with your workflows',
        blurb: 'Every funnel step is exposed to the agent as an MCP tool — just say what you need.',
        items: [
            { icon: 'far fa-bed', label: 'Book Lisbon with breakfast', prompt: 'Book the Smith family 3 nights in Lisbon under £200/night with breakfast.' },
            { icon: 'far fa-pen-to-square', label: 'Add extras to a booking', prompt: 'Add breakfast to reservation BK-7741.' },
        ],
    },
    config: {
        title: 'Describe your project',
        blurb: 'Tell A3 your objective in plain language — it scaffolds the missions, workflows and Zod schemas from scratch.',
        items: [
            { icon: 'far fa-wand-magic-sparkles', label: 'Book hotel rooms', desc: 'Set up an agent to book hotel rooms for me. It should first search for hotels in a destination for my dates, then look at the available rooms and rates, then select and reserve a room, and finally enter the guest details and payment to complete the booking.', prompt: 'Set up an agent to book hotel rooms for me. It should first search for hotels in a destination for my dates, then look at the available rooms and rates, then select and reserve a room, and finally enter the guest details and payment to complete the booking.' },
        ],
    },
};

window.A3ChatData = { CHAT_PROJECT, CHAT_DATASETS, CHAT_SUGGESTIONS, CHAT_SCOPE, CHAT_SCOPE_DATA, CHAT_WORKFLOWS, CHAT_PLAN, ORCHESTRATOR_PLAN, ORCHESTRATOR_THREAD, CHAT_THREAD, CHAT_THREAD_RUN, CHAT_THREAD_CONFIG, CONFIG_TREE, CONFIG_FILES, STAGE_FILES };