File size: 38,071 Bytes
94193b5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 | import type { TestSequence } from '../types';
import { standardSetup, handlebarsSetup, defaultPromptMd, basicCSSFile } from './setup-data';
export const testSequences: TestSequence[] = [
{
id: 'seq-bash-read',
name: 'Bash: Read Operations',
category: 'bash',
setupFiles: standardSetup,
steps: [
{
id: 'seq-bash-read-cat',
name: 'Read file and extract value',
prompt: 'Read index.html and tell me the page title.',
assertions: [
{ type: 'tool_used', toolName: 'bash', description: 'Used shell tool' },
{ type: 'output_matches', pattern: 'Test App', description: 'Output contains page title' },
],
},
{
id: 'seq-bash-read-head',
name: 'Read partial file with head',
prompt: 'Show me only the first 10 lines of index.html using head. What is the charset?',
assertions: [
{ type: 'tool_args_match', toolName: 'bash', pattern: 'head', description: 'Used head command' },
{ type: 'output_matches', pattern: 'UTF-8', description: 'Found charset from first 10 lines' },
],
},
{
id: 'seq-bash-read-tree',
name: 'List files with tree',
prompt: 'List all files in the project using tree, then tell me how many files there are.',
assertions: [
{ type: 'tool_args_match', toolName: 'bash', pattern: 'tree|ls|find', description: 'Used file listing command' },
{ type: 'tool_output_matches', toolName: 'bash', pattern: 'index\\.html|styles\\.css|script\\.js', description: 'Output lists project files' },
],
},
],
},
{
id: 'seq-bash-search',
name: 'Bash: Search Operations',
category: 'bash',
setupFiles: standardSetup,
steps: [
{
id: 'seq-bash-search-grep',
name: 'Search with grep',
prompt: "Use grep to find all lines in index.html that contain 'class' and show line numbers.",
assertions: [
{ type: 'tool_args_match', toolName: 'bash', pattern: 'grep|rg', description: 'Used search command' },
{ type: 'tool_output_matches', toolName: 'bash', pattern: 'class', description: 'Tool output contains class matches' },
],
},
{
id: 'seq-bash-search-rg',
name: 'Search across files with rg',
prompt: "Search across all files for the word 'function' using rg.",
assertions: [
{ type: 'tool_args_match', toolName: 'bash', pattern: 'rg.*function', description: 'Used rg to search for function' },
{ type: 'tool_output_matches', toolName: 'bash', pattern: 'function', description: 'Tool output contains function matches' },
],
},
{
id: 'seq-bash-search-find',
name: 'Find files by extension',
prompt: 'Find all .css files in the project.',
assertions: [
{ type: 'tool_args_match', toolName: 'bash', pattern: 'find|ls|rg|grep', description: 'Used file discovery command' },
{ type: 'tool_output_matches', toolName: 'bash', pattern: 'styles\\.css', description: 'Tool output contains styles.css' },
],
},
],
},
{
id: 'seq-bash-write',
name: 'Bash: Write & Text Processing',
category: 'bash',
setupFiles: standardSetup,
steps: [
{
id: 'seq-bash-write-mkdir',
name: 'Create directories and files',
prompt: "Create a directory called 'components' with three empty files: header.html, footer.html, sidebar.html.",
assertions: [
{ type: 'file_exists', path: '/components/header.html', description: 'header.html created' },
{ type: 'file_exists', path: '/components/footer.html', description: 'footer.html created' },
{ type: 'file_exists', path: '/components/sidebar.html', description: 'sidebar.html created' },
],
},
{
id: 'seq-bash-write-cp-mv',
name: 'Copy and rename files',
prompt: 'Copy styles.css to styles-backup.css, then rename script.js to app.js.',
assertions: [
{ type: 'file_exists', path: '/styles-backup.css', description: 'styles-backup.css created' },
{ type: 'file_exists', path: '/app.js', description: 'app.js exists (renamed)' },
{ type: 'file_not_exists', path: '/script.js', description: 'script.js removed after rename' },
],
},
{
id: 'seq-bash-write-echo',
name: 'Create file with echo redirect',
prompt: "Create a new file /data.json with a JSON object containing name 'Test' and version 1 using echo and redirect.",
assertions: [
{ type: 'file_exists', path: '/data.json', description: 'data.json created' },
{ type: 'valid_json', path: '/data.json', description: 'data.json is valid JSON' },
{ type: 'file_matches', path: '/data.json', pattern: '[Tt]est', description: 'Contains "Test" name' },
],
},
{
id: 'seq-bash-write-sed',
name: 'In-place substitution with sed',
prompt: "Use sed to change all occurrences of '#007bff' to '#e74c3c' in styles.css.",
assertions: [
{ type: 'file_not_contains', path: '/styles.css', value: '#007bff', description: 'Old color removed' },
{ type: 'file_contains', path: '/styles.css', value: '#e74c3c', description: 'New color applied' },
],
},
{
id: 'seq-bash-write-pipe',
name: 'Pipe cat through sed to new file',
prompt: "Read index.html with cat, pipe through sed to replace 'Test App' with 'My App', redirect to /output.html.",
assertions: [
{ type: 'file_exists', path: '/output.html', description: 'output.html created' },
{ type: 'file_contains', path: '/output.html', value: 'My App', description: 'Contains replaced text' },
],
},
{
id: 'seq-bash-write-chain',
name: 'Chained commands with &&',
prompt: "Create a 'pages' directory, create about.html and contact.html inside it, list contents — single command with &&.",
assertions: [
{ type: 'file_exists', path: '/pages/about.html', description: 'about.html created in pages/' },
{ type: 'file_exists', path: '/pages/contact.html', description: 'contact.html created in pages/' },
],
},
{
id: 'seq-bash-write-pipe-chain',
name: 'Multi-stage pipe chain',
prompt: "Cat index.html, pipe through grep to find lines with 'nav', pipe through head for first 3 matches.",
assertions: [
{ type: 'tool_args_match', toolName: 'bash', pattern: '\\|', description: 'Used pipe operator' },
{ type: 'tool_output_matches', toolName: 'bash', pattern: 'nav', description: 'Tool output contains nav matches' },
],
},
],
},
{
id: 'seq-file-editing',
name: 'File Editing: Basics',
category: 'file-editing',
setupFiles: standardSetup,
steps: [
{
id: 'seq-edit-update',
name: 'Update text in file',
prompt: "Change the page title from 'Test App' to 'My Application' in index.html.",
assertions: [
{ type: 'file_contains', path: '/index.html', value: 'My Application', description: 'New title present' },
{ type: 'file_not_contains', path: '/index.html', value: '<title>Test App</title>', description: 'Old title removed' },
],
},
{
id: 'seq-edit-new-file',
name: 'Create new file',
prompt: "Create a new /about.html with heading 'About Us' and a paragraph of placeholder text.",
assertions: [
{ type: 'file_exists', path: '/about.html', description: 'about.html created' },
{ type: 'file_matches', path: '/about.html', pattern: 'About Us', description: 'Contains About Us heading' },
],
},
{
id: 'seq-edit-multi-op',
name: 'Multiple edits to same file',
prompt: "In index.html: update the h1 text to 'Portfolio', and add a footer before the closing body tag.",
assertions: [
{ type: 'file_matches', path: '/index.html', pattern: 'Portfolio', description: 'H1 text changed' },
{ type: 'file_matches', path: '/index.html', pattern: 'footer', description: 'Footer added' },
],
},
{
id: 'seq-edit-nav',
name: 'Replace nav with new content',
prompt: "Replace the nav element in index.html with a new nav containing a logo span 'MySite' and links to Home, Portfolio, Blog, and Contact.",
assertions: [
{ type: 'file_matches', path: '/index.html', pattern: 'MySite', description: 'Has logo text' },
{ type: 'file_matches', path: '/index.html', pattern: 'Portfolio', description: 'Has Portfolio link' },
{ type: 'file_matches', path: '/index.html', pattern: 'Blog', description: 'Has Blog link' },
],
},
{
id: 'seq-edit-rewrite',
name: 'Rewrite entire file',
prompt: 'Replace styles.css entirely with a modern CSS reset.',
assertions: [
{ type: 'file_not_contains', path: '/styles.css', value: '.btn:hover', description: 'Original content replaced' },
{ type: 'file_matches', path: '/styles.css', pattern: 'box-sizing|margin:\\s*0|border-box', description: 'Contains CSS reset content' },
],
},
{
id: 'seq-edit-style-block',
name: 'Replace specific CSS rule block',
prompt: "In styles.css, add a .btn rule with padding: 12px 24px, background: #e74c3c, border-radius: 8px, and a .btn:hover that changes background to #c0392b and adds transform: translateY(-2px).",
assertions: [
{ type: 'file_contains', path: '/styles.css', value: '#e74c3c', description: 'New button color' },
{ type: 'file_contains', path: '/styles.css', value: 'border-radius: 8px', description: 'New border-radius' },
{ type: 'file_contains', path: '/styles.css', value: 'translateY', description: 'Has transform on hover' },
],
},
{
id: 'seq-edit-js-handler',
name: 'Replace JS event handler',
prompt: "In script.js, replace the click event listener with one that adds an 'active' class to the clicked link, removes 'active' from all other links, and smoothly scrolls to the target section.",
assertions: [
{ type: 'file_matches', path: '/script.js', pattern: 'active', description: 'Uses active class' },
{ type: 'file_matches', path: '/script.js', pattern: 'scroll|scrollIntoView|scrollTo', description: 'Has smooth scroll' },
{ type: 'file_matches', path: '/script.js', pattern: 'DOMContentLoaded|addEventListener', description: 'Still has event listener structure' },
],
},
{
id: 'seq-edit-entity-nav',
name: 'Replace HTML entity (nav)',
prompt: 'Replace the nav element in index.html with a new nav containing a logo and three links: Home, Portfolio, Contact.',
assertions: [
{ type: 'file_matches', path: '/index.html', pattern: 'logo|brand|site-name|site-title', description: 'Has logo/brand element' },
{ type: 'file_matches', path: '/index.html', pattern: 'Portfolio|Contact', description: 'Has new nav links' },
],
},
],
},
{
id: 'seq-file-editing-stress',
name: 'File Editing: Stress Tests',
category: 'file-editing',
setupFiles: standardSetup,
steps: [
{
id: 'seq-stress-special-chars',
name: 'Edit file with special characters',
prompt: "Update index.html: change the script tag content to include a template literal that logs `Hello, ${name}! Welcome to \"OSW Studio\" — it's great.` and a regex /\\d+\\.\\d+/g.",
assertions: [
{ type: 'file_contains', path: '/index.html', value: '${name}', description: 'Contains template literal variable' },
{ type: 'file_matches', path: '/index.html', pattern: 'it.s great', description: 'Contains apostrophe text' },
{ type: 'file_matches', path: '/index.html', pattern: '\\\\d', description: 'Contains regex pattern' },
],
},
{
id: 'seq-stress-sequential-edits',
name: 'Sequential edits to same file',
prompt: "Make these changes to index.html in order: 1) Change the title to 'My Portfolio', 2) Add a class 'dark-theme' to the body tag, 3) Add a footer with text 'Built with OSW Studio' before </body>.",
assertions: [
{ type: 'file_contains', path: '/index.html', value: 'My Portfolio', description: 'Title changed' },
{ type: 'file_contains', path: '/index.html', value: 'dark-theme', description: 'Body class added' },
{ type: 'file_contains', path: '/index.html', value: 'Built with OSW Studio', description: 'Footer added' },
],
},
{
id: 'seq-stress-json',
name: 'Create and edit JSON file',
prompt: "Create /config.json with a JSON object containing: name (string), version (string \"1.0.0\"), features (array of 3 strings), settings (nested object with theme: \"dark\", language: \"en\", debug: false).",
assertions: [
{ type: 'file_exists', path: '/config.json', description: 'config.json created' },
{ type: 'valid_json', path: '/config.json', description: 'Valid JSON' },
{ type: 'file_contains', path: '/config.json', value: '"version"', description: 'Has version field' },
{ type: 'file_contains', path: '/config.json', value: '"debug"', description: 'Has nested debug setting' },
],
},
{
id: 'seq-stress-css',
name: 'Create complex CSS file',
prompt: "Create /theme.css with: CSS custom properties on :root (--primary, --secondary, --bg, --text colors), a .container class with max-width, .btn with multiple states (:hover, :active, :disabled), a @media query for mobile, and a @keyframes fadeIn animation.",
assertions: [
{ type: 'file_exists', path: '/theme.css', description: 'theme.css created' },
{ type: 'file_contains', path: '/theme.css', value: '--primary', description: 'Has CSS custom property' },
{ type: 'file_matches', path: '/theme.css', pattern: ':hover', description: 'Has hover state' },
{ type: 'file_matches', path: '/theme.css', pattern: '@media', description: 'Has media query' },
{ type: 'file_matches', path: '/theme.css', pattern: '@keyframes', description: 'Has keyframes animation' },
],
},
{
id: 'seq-stress-multiline',
name: 'Update multi-line block',
prompt: "Replace the entire nav element in index.html (from <nav to </nav>) with a new nav containing: a logo div with text 'BRAND', and links to Home, Gallery, Portfolio, and Contact. Do not include the old About or Services links.",
assertions: [
{ type: 'file_matches', path: '/index.html', pattern: 'BRAND', description: 'Has brand logo' },
{ type: 'file_matches', path: '/index.html', pattern: 'Portfolio', description: 'Has Portfolio link' },
{ type: 'file_contains', path: '/index.html', value: 'Gallery', description: 'Has Gallery link' },
{ type: 'file_not_contains', path: '/index.html', value: '#services', description: 'Old Services link removed' },
],
},
{
id: 'seq-stress-large-rewrite',
name: 'Rewrite large file',
prompt: "Rewrite index.html with a complete landing page: a header with logo and nav, a hero section with heading and CTA button, three feature cards in a grid, a testimonials section, and a footer with copyright. Include all CSS inline in a style tag. Make it at least 100 lines.",
assertions: [
{ type: 'file_matches', path: '/index.html', pattern: 'hero|banner', description: 'Has hero section' },
{ type: 'file_matches', path: '/index.html', pattern: 'feature|card', description: 'Has feature cards' },
{ type: 'file_matches', path: '/index.html', pattern: 'testimonial|review|quote', description: 'Has testimonials' },
{ type: 'file_matches', path: '/index.html', pattern: 'footer', description: 'Has footer' },
],
},
],
},
{
id: 'seq-status',
name: 'Status: Task Completion',
category: 'status',
setupFiles: standardSetup,
steps: [
{
id: 'seq-status-simple',
name: 'Evaluate simple completed task',
prompt: "Change the h1 text to 'Hello World' in index.html.",
timeout: 60000,
assertions: [
{ type: 'file_matches', path: '/index.html', pattern: 'Hello World', description: 'h1 changed to Hello World' },
],
},
{
id: 'seq-status-verify',
name: 'Evaluate task with verification step',
prompt: "Add a 'contact' link to the nav in index.html, then verify it was added correctly by reading the file.",
timeout: 60000,
assertions: [
{ type: 'file_matches', path: '/index.html', pattern: '[Cc]ontact', description: 'Contact link added to nav' },
{ type: 'tool_used', toolName: 'bash', description: 'Used shell to verify' },
],
},
{
id: 'seq-status-conditional',
name: 'Evaluate task requiring inspection first',
prompt: "Check if index.html has a footer. If not, add one with copyright text '2024 Test App'. If it does, update the footer text to '2024 Test App'.",
timeout: 60000,
assertions: [
{ type: 'file_matches', path: '/index.html', pattern: 'footer', description: 'Has footer element' },
{ type: 'file_matches', path: '/index.html', pattern: '2024.*Test App|Test App.*2024', description: 'Footer has copyright text' },
],
},
{
id: 'seq-status-colors',
name: 'Evaluate edit with confirmation read',
prompt: "Change the nav background color from '#2c3e50' to '#1a1a2e' and all nav link colors from '#ecf0f1' to '#e94560'. After editing, read back the file to verify both changes are present.",
timeout: 60000,
assertions: [
{ type: 'file_matches_any', paths: ['/index.html', '/styles.css'], pattern: '#1a1a2e', description: 'Nav background color changed' },
{ type: 'file_matches_any', paths: ['/index.html', '/styles.css'], pattern: '#e94560', description: 'Nav link color changed' },
],
},
{
id: 'seq-status-multi-element',
name: 'Evaluate multi-element creation',
prompt: 'Add a hero section with a heading and CTA button, and a footer element to index.html.',
timeout: 60000,
assertions: [
{ type: 'file_matches', path: '/index.html', pattern: 'hero|banner', description: 'Has hero/banner section' },
{ type: 'file_matches', path: '/index.html', pattern: 'footer', description: 'Has footer element' },
],
},
{
id: 'seq-status-multi-step',
name: 'Evaluate multi-file task completion',
prompt: 'Create a /gallery.html page, add a link to it from index.html nav, and add matching styles in styles.css.',
timeout: 90000,
assertions: [
{ type: 'file_exists', path: '/gallery.html', description: 'gallery.html created' },
{ type: 'file_matches', path: '/index.html', pattern: 'gallery', description: 'Nav links to gallery' },
],
},
{
id: 'seq-status-scaffold',
name: 'Evaluate multi-file project scaffold',
prompt: "Create a blog structure: /blog/index.html (list page), /blog/post-1.html (first post with title 'Getting Started'), and /blog/styles.css (blog-specific styles).",
timeout: 90000,
assertions: [
{ type: 'file_exists', path: '/blog/index.html', description: 'Blog index created' },
{ type: 'file_exists', path: '/blog/post-1.html', description: 'Blog post created' },
{ type: 'file_exists', path: '/blog/styles.css', description: 'Blog styles created' },
{ type: 'file_matches', path: '/blog/post-1.html', pattern: 'Getting Started', description: 'Post has correct title' },
],
},
],
},
{
id: 'seq-multi-tool',
name: 'Multi-Tool: Combined Operations',
category: 'multi-tool',
setupFiles: standardSetup,
steps: [
{
id: 'seq-multi-read-edit',
name: 'Read then edit file',
prompt: 'Read styles.css, then add a .card class with box shadow and border radius.',
timeout: 60000,
assertions: [
{ type: 'file_matches', path: '/styles.css', pattern: '\\.card', description: 'Has .card class' },
{ type: 'file_matches', path: '/styles.css', pattern: 'box-shadow', description: 'Has box-shadow' },
],
},
{
id: 'seq-multi-search-replace',
name: 'Search then replace values',
prompt: "Find all files containing 'color' with rg, then change the color values in styles.css to use CSS variables.",
timeout: 60000,
assertions: [
{ type: 'file_matches', path: '/styles.css', pattern: 'var\\(--|--[a-z]', description: 'Uses CSS variables' },
],
},
{
id: 'seq-multi-sitemap',
name: 'Discover files and generate sitemap',
prompt: 'Create sitemap.xml listing all HTML files in the project — use find to discover them, then write the XML.',
timeout: 60000,
assertions: [
{ type: 'file_exists', path: '/sitemap.xml', description: 'sitemap.xml created' },
{ type: 'file_matches', path: '/sitemap.xml', pattern: 'index\\.html|<loc>.*</loc>', description: 'Sitemap lists index.html' },
],
},
{
id: 'seq-multi-scaffold',
name: 'Scaffold project structure',
prompt: 'Create /pages/ with index.html and about.html, /assets/ with main.css, and write content in each file.',
timeout: 60000,
assertions: [
{ type: 'file_exists', path: '/pages/index.html', description: 'pages/index.html created' },
{ type: 'file_exists', path: '/pages/about.html', description: 'pages/about.html created' },
{ type: 'file_exists', path: '/assets/main.css', description: 'assets/main.css created' },
],
},
{
id: 'seq-multi-refactor',
name: 'Refactor inline styles to file',
prompt: 'Read index.html, extract the inline CSS (the <style> block) into a new file /extracted.css, and replace the style tag with a link tag pointing to extracted.css.',
timeout: 60000,
assertions: [
{ type: 'file_contains', path: '/index.html', value: '<link', description: 'Has link tag' },
{ type: 'file_exists', path: '/extracted.css', description: 'extracted.css created' },
],
},
],
},
{
id: 'seq-bash-preview',
name: 'Bash: Compiled Output Inspection',
category: 'bash',
setupFiles: handlebarsSetup,
steps: [
{
id: 'seq-preview-home',
name: 'Fetch and inspect homepage',
prompt: 'Fetch the compiled homepage using curl and tell me what the page title is.',
assertions: [
{ type: 'tool_args_match', toolName: 'bash', pattern: 'curl.*localhost', description: 'Used curl to fetch compiled output' },
{ type: 'output_matches', pattern: 'Curl Test Site', description: 'Output contains compiled page title from data.json' },
],
},
{
id: 'seq-preview-about',
name: 'Fetch and inspect subpage',
prompt: 'Use curl to fetch the compiled about page and check whether the header partial rendered correctly.',
assertions: [
{ type: 'tool_args_match', toolName: 'bash', pattern: 'curl.*localhost', description: 'Used curl to fetch compiled page' },
{ type: 'output_matches', pattern: 'Site Navigation|header|nav', description: 'Output shows compiled partial content' },
],
},
{
id: 'seq-preview-search',
name: 'Fetch and find navigation elements',
prompt: 'Use curl to fetch the compiled homepage and find which lines contain navigation elements.',
assertions: [
{ type: 'tool_args_match', toolName: 'bash', pattern: 'curl.*localhost', description: 'Used curl to fetch compiled output' },
{ type: 'tool_output_matches', toolName: 'bash', pattern: 'nav', description: 'Output contains nav matches' },
],
},
],
},
{
id: 'seq-entity-editing',
name: 'Entity Replacement',
category: 'file-editing',
setupFiles: {
'/.PROMPT.md': defaultPromptMd,
'/index.html': `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Acme Corp</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; }
</style>
</head>
<body>
<header class="site-header">
<div class="header-inner">
<span class="logo">OldBrand</span>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
</ul>
</nav>
<div class="header-actions">
<a href="#login" class="login-link">Log In</a>
</div>
</div>
</header>
<main>
<section class="hero">
<h1>Welcome to Acme</h1>
<p>Building the future, one product at a time.</p>
</section>
<section class="features">
<div class="feature-card"><h3>Fast</h3><p>Lightning quick performance.</p></div>
<div class="feature-card"><h3>Secure</h3><p>Enterprise-grade security.</p></div>
<div class="feature-card"><h3>Scalable</h3><p>Grows with your business.</p></div>
</section>
</main>
<footer><p>© 2024 Acme Corp</p></footer>
</body>
</html>`,
'/styles.css': basicCSSFile,
'/script.js': `
const API_URL = 'https://api.example.com';
function renderCards(container, items) {
container.innerHTML = '';
items.forEach(item => {
const div = document.createElement('div');
div.className = 'card';
div.innerHTML = '<h3>' + item.title + '</h3><p>' + item.desc + '</p>';
container.appendChild(div);
});
}
function initApp() {
const container = document.getElementById('cards');
const items = [
{ title: 'Card 1', desc: 'Description 1' },
{ title: 'Card 2', desc: 'Description 2' },
{ title: 'Card 3', desc: 'Description 3' },
];
renderCards(container, items);
}
document.addEventListener('DOMContentLoaded', initApp);`,
},
steps: [
{
id: 'seq-entity-js-function',
name: 'Replace JS function by name',
prompt: "In script.js, replace the function renderCards with a new implementation that creates Bootstrap-style cards with image, title, and description. Keep all other code unchanged.",
assertions: [
{ type: 'file_matches', path: '/script.js', pattern: 'img|image|src', description: 'New renderCards has image support' },
{ type: 'file_contains', path: '/script.js', value: 'initApp', description: 'initApp function preserved' },
{ type: 'file_contains', path: '/script.js', value: 'API_URL', description: 'API_URL constant preserved' },
{ type: 'file_contains', path: '/script.js', value: 'DOMContentLoaded', description: 'Event listener preserved' },
],
},
{
id: 'seq-entity-html-header',
name: 'Replace HTML header section',
prompt: "Replace the entire <header> element in index.html with a new sticky header that has a logo 'Acme Co', nav links (Products, Pricing, Blog, Contact), and a 'Sign Up' CTA button. Keep all other page content unchanged.",
assertions: [
{ type: 'file_contains', path: '/index.html', value: 'Acme Co', description: 'Has new logo text' },
{ type: 'file_matches', path: '/index.html', pattern: 'Products', description: 'Has Products link' },
{ type: 'file_matches', path: '/index.html', pattern: 'Pricing', description: 'Has Pricing link' },
{ type: 'file_matches', path: '/index.html', pattern: 'Sign Up', description: 'Has Sign Up CTA' },
{ type: 'file_contains', path: '/index.html', value: 'Welcome to Acme', description: 'Hero section preserved' },
{ type: 'file_contains', path: '/index.html', value: 'feature-card', description: 'Features section preserved' },
{ type: 'file_not_contains', path: '/index.html', value: 'OldBrand', description: 'Old brand removed' },
],
},
],
},
{
id: 'seq-agent',
name: 'Agent: Sub-Agent Operations',
category: 'agent',
setupFiles: standardSetup,
steps: [
{
id: 'seq-agent-explore-edit',
name: 'Explore colors then create design tokens',
prompt: "Step 1: Use agent explore to find all color values (hex codes like #xxx) used across all project files.\nStep 2: After the explore result comes back, use that information to create /design-tokens.css with CSS custom properties (--primary, --secondary, --bg, --text) based on the colors found.\nStep 3: Update styles.css to import and use those CSS variables instead of hardcoded hex values.\nYou must do steps 2 and 3 yourself after the explore agent returns — the explore agent only reads files, it cannot edit them.",
timeout: 120000,
assertions: [
{ type: 'file_exists', path: '/design-tokens.css', description: 'Design tokens file created' },
{ type: 'file_matches', path: '/design-tokens.css', pattern: '--primary', description: 'Has primary variable' },
{ type: 'file_matches', path: '/styles.css', pattern: 'var\\(--', description: 'styles.css uses CSS variables' },
{ type: 'tool_args_match', toolName: 'bash', pattern: '(?:agent|delegate).*explore', description: 'Used agent explore' },
],
},
{
id: 'seq-agent-plan-implement',
name: 'Plan gallery then implement it',
prompt: "Step 1: Use agent plan to analyze the current project and recommend how to add a responsive image gallery section.\nStep 2: After the plan result comes back, implement the gallery yourself in index.html — add at least 4 placeholder images in a CSS grid that adapts to screen size with a @media query.\nThe plan agent only analyzes — you must write the code yourself in step 2.",
timeout: 120000,
assertions: [
{ type: 'file_matches', path: '/index.html', pattern: 'gallery|grid', description: 'Has gallery section' },
{ type: 'file_matches', path: '/index.html', pattern: 'img|image', description: 'Has images' },
{ type: 'file_matches_any', paths: ['/index.html', '/styles.css'], pattern: '@media|grid|flex', description: 'Has responsive layout' },
{ type: 'tool_args_match', toolName: 'bash', pattern: '(?:agent|delegate).*plan', description: 'Used agent plan' },
],
},
{
id: 'seq-agent-parallel-tasks',
name: 'Three parallel agent tasks',
prompt: "Use a single agent task command with three prompts to make independent changes in parallel:\n agent task \"In /index.html, add a dark mode toggle button inside the nav element\" \"In /styles.css, add a .card class with padding: 1rem, box-shadow: 0 2px 8px rgba(0,0,0,.1), border-radius: 8px, and a :hover state that lifts it up\" \"Create /footer.html with copyright '2024 MyBrand', three social media links, and a newsletter signup form\"",
timeout: 120000,
assertions: [
{ type: 'file_matches', path: '/index.html', pattern: 'dark.*mode|theme.*toggle|toggle.*dark', description: 'Has dark mode toggle' },
{ type: 'file_matches', path: '/styles.css', pattern: '\\.card', description: 'Has .card class' },
{ type: 'file_matches', path: '/styles.css', pattern: 'box-shadow', description: 'Card has box-shadow' },
{ type: 'file_exists', path: '/footer.html', description: 'Footer partial created' },
{ type: 'file_matches', path: '/footer.html', pattern: 'MyBrand|2024', description: 'Footer has copyright' },
{ type: 'tool_args_match', toolName: 'bash', pattern: '(?:agent|delegate).*task', description: 'Used agent task' },
],
},
],
},
{
id: 'seq-agent-multipage',
name: 'Agent: Multi-Page Consistency',
category: 'agent',
setupFiles: {
'/.PROMPT.md': defaultPromptMd,
'/index.html': `<!DOCTYPE html><html><head><title>Home</title></head><body><main><h1>Home Page</h1><p>Welcome to our site.</p></main></body></html>`,
'/about.html': `<!DOCTYPE html><html><head><title>About</title></head><body><main><h1>About Us</h1><p>Learn more about us.</p></main></body></html>`,
'/contact.html': `<!DOCTYPE html><html><head><title>Contact</title></head><body><main><h1>Contact</h1><p>Get in touch.</p></main></body></html>`,
},
steps: [
{
id: 'seq-agent-consistent-nav',
name: 'Add consistent nav across pages',
prompt: "Use a single agent task command with three prompts to add the same navigation bar to each page in parallel:\n agent task \"Add a nav bar with logo 'SiteKit' and links to index.html, about.html, contact.html at the top of /index.html body\" \"Add a nav bar with logo 'SiteKit' and links to index.html, about.html, contact.html at the top of /about.html body\" \"Add a nav bar with logo 'SiteKit' and links to index.html, about.html, contact.html at the top of /contact.html body\"",
timeout: 120000,
assertions: [
{ type: 'file_matches', path: '/index.html', pattern: 'nav|SiteKit', description: 'Homepage has nav' },
{ type: 'file_matches', path: '/about.html', pattern: 'nav|SiteKit', description: 'About has nav' },
{ type: 'file_matches', path: '/contact.html', pattern: 'nav|SiteKit', description: 'Contact has nav' },
{ type: 'file_matches', path: '/index.html', pattern: 'about\\.html|About', description: 'Homepage links to about' },
{ type: 'tool_args_match', toolName: 'bash', pattern: '(?:agent|delegate)', description: 'Used agent command' },
],
},
{
id: 'seq-agent-parallel-pages',
name: 'Create new pages matching existing style',
prompt: "The project now has a consistent nav bar. Use agent task to create two new pages that include the same SiteKit nav bar: /gallery.html with an 'Our Work' h1 and a grid of 4 placeholder images, and /faq.html with a 'FAQ' h1 and at least 5 question/answer pairs.",
timeout: 120000,
assertions: [
{ type: 'file_exists', path: '/gallery.html', description: 'Gallery page created' },
{ type: 'file_matches', path: '/gallery.html', pattern: 'Our Work|Gallery', description: 'Gallery has heading' },
{ type: 'file_exists', path: '/faq.html', description: 'FAQ page created' },
{ type: 'file_matches', path: '/faq.html', pattern: 'FAQ|Frequently', description: 'FAQ has heading' },
{ type: 'tool_args_match', toolName: 'bash', pattern: '(?:agent|delegate).*task', description: 'Used agent task' },
],
},
],
},
{
id: 'seq-compaction',
name: 'Compaction: Context Continuity',
category: 'compaction',
requires: ['compaction'],
setupFiles: { '/.PROMPT.md': defaultPromptMd },
steps: [
{
id: 'seq-compaction-build-site',
name: 'Build site and trigger compaction',
prompt: "Create a website for 'Nimbus Analytics'. Create 4 pages: /index.html (hero section, 3 feature cards), /about.html (company description, team section with 3 people), /pricing.html (3-tier pricing table), /contact.html (contact form). Create /styles.css shared across all pages. Every page must include nav links to all other pages and the company name 'Nimbus Analytics' in the header.",
timeout: 180000,
assertions: [
{ type: 'file_exists', path: '/index.html', description: 'Homepage created' },
{ type: 'file_exists', path: '/about.html', description: 'About page created' },
{ type: 'file_exists', path: '/pricing.html', description: 'Pricing page created' },
{ type: 'file_exists', path: '/contact.html', description: 'Contact page created' },
{ type: 'file_exists', path: '/styles.css', description: 'Shared stylesheet created' },
{ type: 'file_matches', path: '/contact.html', pattern: 'index\\.html|about\\.html', description: 'Last page has nav links' },
{ type: 'file_matches', path: '/contact.html', pattern: 'Nimbus', description: 'Brand name preserved' },
],
},
{
id: 'seq-compaction-expand',
name: 'Expand project after compaction',
prompt: "Add a /docs/getting-started.html page with setup instructions for macOS and Linux, and a /docs/api-reference.html page documenting 4 API endpoints. Both docs pages must include the site-wide nav from the main pages and mention 'Nimbus Analytics'.",
timeout: 120000,
assertions: [
{ type: 'file_exists', path: '/docs/getting-started.html', description: 'Getting started created' },
{ type: 'file_exists', path: '/docs/api-reference.html', description: 'API reference created' },
{ type: 'file_matches', path: '/docs/api-reference.html', pattern: 'Nimbus', description: 'Brand name preserved through compaction' },
{ type: 'file_matches', path: '/docs/getting-started.html', pattern: 'index\\.html|about\\.html', description: 'Docs have site nav (context survived compaction)' },
],
},
],
},
];
|