e2b-dev/fragments

Every scenario DeepQA drove in the browser, in plan order, with the 34 screenshots it captured along the way. A passing scenario is evidence too.

1. S1

   Handle missing API credentials gracefully

   3 steps, 3 screenshots

   high✓ pass

   

   

   

   • Submitted prompt 'Create a React counter app' without backend API keys, and the app gracefully showed 'An unexpected error has occurred. Please try again later.' with a 'Try again' button.
   • Navigated to http://127.0.0.1:3000/ and entered prompt 'Create a React counter app'.
   • Clicked submit, observing transition from 'Generating...' to an error message 'An unexpected error has occurred. Please try again later.' with a functional 'Try again' button displayed.
2. S2

   Retry generation after an error

   5 steps, 4 screenshots

   high✓ pass

   

   

   

   

   • Initial home page loaded with prompt input ready.
   • Submitted prompt 'Create a React counter app' and saw 'Generating...' status.
   • Error state displayed with message 'An unexpected error has occurred. Please try again later.' and a 'Try again' button.
   • Loaded the Fragments app home page and entered the prompt 'Create a React counter app'.
   • Submitted the prompt, which initially showed 'Generating...' and then transitioned to an error message with a 'Try again' button.
   • Clicked the 'Try again' button and verified that the application attempted the generation request again (showing 'Generating...').
3. S3

   Prevent submission with empty prompt

   3 steps, 2 screenshots

   high✓ pass

   

   

   • Loaded homepage with empty prompt textarea marked as required.
   • Clicked submit button with empty prompt; native required form validation blocked submission with no network request, error state, or spinner triggered.
   • Navigated to http://127.0.0.1:3000/ and verified the prompt textarea has the required attribute.
   • Attempted submission with an empty prompt by clicking the submit button and pressing Enter.
   • Submission was blocked natively by HTML5 form validation; no error state, loading spinner, or unwanted navigation occurred.
4. S4

   Configure API Key and settings

   4 steps, 3 screenshots

   high✓ pass

   

   

   

   • Opened the model parameters settings menu by clicking the settings button.
   • Entered API key and custom instructions/Base URL into the settings menu, and both fields accepted the typed text.
   • The model parameters settings panel opened correctly upon clicking the settings button.
   • The API Key field accepted input ('[redacted]') and displayed it as masked password text.
   • The custom instructions / Base URL field accepted input ('Use TypeScript') successfully.
5. S5

   Prevent submission with whitespace-only prompt

   3 steps, 4 screenshots

   medium✕ fail

   

   

   

   

   • Loaded home page with prompt input field.
   • Entered whitespace-only string into prompt textarea.
   • Submitted whitespace-only prompt and observed 'Generating...' state indicating the application attempted to generate a fragment.
   • The application failed to trim and validate prompt input before submitting to the backend API.
6. S6

   Select application template

   3 steps, 4 screenshots

   medium✓ pass

   

   

   

   

   • Opened template selection combobox, navigated down the options list using ArrowDown, and pressed Enter to select a different template option, successfully closing the dropdown and updating the selection.
   • Navigated to http://127.0.0.1:3000/.
   • Clicked on the template/stack selection combobox to open the options popover menu.
   • Navigated options and selected a different template option using keyboard navigation (ArrowDown and Enter).
   • The dropdown closed and the combobox updated to visually display the newly selected template.
7. S7

   Select LLM model

   3 steps, 4 screenshots

   medium✓ pass

   

   

   

   

   • Opened the model selection combobox, navigated the list with arrow keys, and selected a different model which updated the combobox display.
   • Navigated to http://127.0.0.1:3000/ and opened the model selection combobox.
   • Selected an alternative model from the dropdown list using keyboard navigation.
   • The combobox closed and updated its state to the selected model.
8. S8

   Configure model hyperparameters

   4 steps, 3 screenshots

   medium✓ pass

   

   

   

   • Opened the model parameter settings menu, displaying hyperparameter inputs including Output tokens and Temperature.
   • Entered 0.7 for Temperature and 1000 for Output tokens, and both spinbutton fields retained and accepted the values.
   • Navigated to http://127.0.0.1:3000/ and opened the model parameters menu.
   • Inputted 0.7 into the Temperature field and 1000 into the Output tokens field.
   • The fields accepted and reflected the numeric values without errors or crashes.
9. S9

   Toggle Morph Apply fast code generation

   3 steps, 4 screenshots

   medium✓ pass

   

   

   

   

   • Clicked the model parameters settings button and the settings dropdown opened showing Morph Apply switch and parameter controls.
   • Clicked the Morph Apply switch control, which successfully responds to clicks and toggles its state.
   • The model parameters settings button opens the settings menu containing the Morph Apply fast code generation toggle.
   • The Morph Apply switch component responds directly to clicks and changes its active toggle state smoothly.
10. S10

    Interact with attach file functionality

    2 steps, 3 screenshots

    low✓ pass

    

    

    

    • Navigated to the home page and clicked the attach file button next to the prompt input.
    • Navigated to the home page at http://127.0.0.1:3000/.
    • Located and clicked the attach file button within the prompt input form.
    • The button is present and interactive.

Findings that survived the Critic's audit. Security-class issues stay summary-only until the maintainers ship a fix.

mediumconfirmed ✓functionalF1 · S5

Prompt textarea accepts whitespace-only input and attempts generation

The application fails to trim and validate whitespace-only input client-side, making unnecessary requests. While the subsequent 500 error is an environment issue, the missing input validation is a genuine functional defect. The page reported 2 console errors during the scenario.

Expected

The application should trim whitespace and disable or block submission for empty/whitespace-only input without making a backend generation request.

Actual

The application accepted the whitespace-only prompt, entered the 'Generating...' state, sent a backend request, and then failed with 'An unexpected error has occurred. Please try again later.'

Repro · 3 steps

1. Navigate to http://127.0.0.1:3000/
2. Enter whitespace characters into the 'Describe your app...' prompt textarea
3. Click the submit prompt button

S5-4.pngS5-6.pngS5-8.png

These failures came from the test environment, not from the application: a credential the sandbox does not hold, a demo nobody may write to, a resource it cannot reach. They are not counted as issues.

• S1 could not exercise this: Generation request fails with 500 Internal Server Error due to missing API keys. The server responds with a 500 Internal Server Error due to the sandbox lacking valid API credentials. The audit recorded the test environment as the cause, so it is not counted as an issue.