GitDiagram

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

1. S1

   Generate diagram from GitHub repository input

   3 steps, 3 screenshots

   high✓ pass

   

   

   

   • Navigated to GitDiagram homepage with repository input form ready.
   • Entered pallets/flask into GitHub repository input.
   • Navigated to /pallets/flask and rendered the diagram visualization with status Diagram ready.
   • Navigating to GitDiagram home page, entering 'pallets/flask' into the repository input, and clicking 'Diagram' navigated to '/pallets/flask'.
   • The diagram visualization rendered successfully with 'Diagram ready' status and architectural components.
2. S2

   Validate empty repository input

   3 steps, 2 screenshots

   high✓ pass

   

   

   • Loaded GitDiagram home page with empty GitHub repository input field having the required attribute.
   • Clicked Diagram submit button with empty input; HTML5 required validation prevented form submission and stayed on the home page without navigation or errors.
   • The GitHub repository input has the HTML5 'required' attribute.
   • Clicking the Diagram submit button while the repository textbox is empty does not trigger form navigation or page crashes, preventing empty repository submissions.
3. S3

   Search and filter public diagrams

   3 steps, 3 screenshots

   high✓ pass

   

   

   

   • Navigated to the browse page displaying the full list of public diagrams.
   • Entered search query 'react' and the repository list dynamically updated to matching repositories.
   • Selected '100' minimum stars filter and verified the public diagram list updated to show only matching repositories with at least 100 stars.
   • Navigating to /browse loaded the diagrams table with sort and star filtering controls.
   • Typing 'react' into the search input dynamically filtered the repository table to 1,178 diagrams containing 'react' in real-time.
   • Selecting '100' in the 'Minimum Stars' combobox filtered the results down to 339 diagrams, and every visible repository had at least 100 stars.
4. S4

   Export diagram functionality

   2 steps, 2 screenshots

   high✓ pass

   

   

   • Navigated directly to /pallets/flask and observed the rendered architecture diagram with the Export button available.
   • Clicked Export button and observed the export options menu appearing with 'Download PNG' and 'Copy Mermaid' buttons.
   • Navigated to /pallets/flask where the architecture diagram loaded successfully.
   • Clicked the 'Export' button, which revealed the export options ('Download PNG' and 'Copy Mermaid').
5. S5

   Configure and clear OpenAI API key

   6 steps, 4 screenshots

   high✓ pass

   

   

   

   

   • Navigated to the GitDiagram home page.
   • Opened the OpenAI API key modal dialog.
   • Entered dummy OpenAI API key into the input field.
   • Saved the API key and verified modal closed successfully.
   • Re-opened the API Key modal and observed 'Key saved. Paste a new one to replace it.' with a 'Clear key' button.
   • Clicked 'Clear key', observed 'Clearing...', and verified the modal returned to the initial unsaved state without any errors.
   • The OpenAI API key modal opens properly from the navbar button.
   • Entering a test API key enables the 'Save key' button.
   • Saving the API key stores the key, closes the modal, and updating the state to 'Key saved. Paste a new one to replace it.' upon reopening.
   • Clicking 'Clear key' clears the stored key and restores the modal to its initial unsaved state without errors.
6. S6

   Load diagram via example repository button

   2 steps, 2 screenshots

   medium✓ pass

   

   

   • Loaded the GitDiagram home page showing the example repository buttons including Flask.
   • Clicked the Flask example button and successfully navigated to /pallets/flask where the interactive diagram rendered with 'Diagram ready' status.
   • The Flask example repository button on the home page correctly navigates to /pallets/flask.
   • The diagram view loaded completely with interactive diagram nodes and 'Diagram ready' status indicator.
7. S7

   Sort diagrams by Most Stars

   2 steps, 2 screenshots

   medium✓ pass

   

   

   • Navigated to the Browse page showing recent public diagrams sorted by newest.
   • Selected 'Most Stars' in the Sort combobox and verified the repository catalog reorders with highest star count items (e.g. 547,836 stars) displayed at the top.
   • The Browse page loads with default sorting by newest.
   • Selecting 'Most Stars' updates the URL to '/browse?sort=stars_desc' and reorders the list descending by star count starting with 'codecrafters-io / build-your-own-x' (547,836 stars).
8. S8

   Navigate browse pagination

   3 steps, 2 screenshots

   medium✓ pass

   

   

   • Navigated to /browse; initial page displays 'Page 1 of 5740' with first repository 'funnyfta / newswervetestflux'.
   • Clicked Next button; URL updated to /browse?page=2, display updated to 'Page 2 of 5740', range '21 – 40 of 114,791', and first item changed to 'alharthali / workout-tracker'.
   • Navigated to /browse. First item on page 1 was 'funnyfta / newswervetestflux' with pagination showing 'Page 1 of 5740'.
   • Clicked the Next button. The page navigated to /browse?page=2, displaying 'Page 2 of 5740' and updating the list with a new first item ('alharthali / workout-tracker').
9. S9

   Toggle dark and light theme

   2 steps, 3 screenshots

   medium✓ pass

   

   

   

   • The home page is loaded in light mode with a 'Switch to dark mode' button visible in the navigation bar.
   • Clicked 'Switch to dark mode'; the theme changed to dark mode and the button updated to 'Switch to light mode'.
   • Clicked 'Switch to light mode'; the theme reverted back to light mode and the button updated to 'Switch to dark mode'.
   • Navigated to home page and observed theme toggle button labeled 'Switch to dark mode'.
   • Clicking the toggle switched the UI theme to dark mode and updated the button label to 'Switch to light mode'.
   • Clicking the toggle again switched the UI theme back to light mode and updated the button label to 'Switch to dark mode'.
10. S10

    View diagram activity statistics

    2 steps, 2 screenshots

    medium✓ pass

    

    

    • Navigated to /pallets/flask diagram view where the Activity button is visible above the diagram canvas.
    • Clicked the Activity button, which expanded a section showing architecture analysis metrics (21 components, 25 connections, cost, generation timestamp, and overview).
    • Navigated to '/pallets/flask' and observed the diagram view with the 'Activity' button visible in the header controls.
    • Clicked the 'Activity' button and verified that the activity statistics panel displayed successfully, showing component and connection counts (21 components · 25 connections), generation date, actual cost ($0.118 USD), and architecture analysis details.
11. S11

    Enable diagram zoom controls

    2 steps, 2 screenshots

    low✓ pass

    

    

    • Navigated to /pallets/flask diagram view, where the diagram is loaded and 'Enable zoom' button is present.
    • Clicked 'Enable zoom', which transformed the button into 'Exit zoom' and activated the 'Interactive diagram viewer' canvas.
    • Successfully navigated to /pallets/flask diagram view.
    • Clicked 'Enable zoom', which updated the button state to 'Exit zoom' and enabled the interactive diagram viewer canvas.
12. S12

    Copy advertisement email address

    2 steps, 3 screenshots

    low✓ pass

    

    

    

    • Navigated to the Advertise page at /advertise.
    • Clicked 'Copy email' button on the Advertise page, triggering visual update copying the email address to clipboard.
    • Navigated to /advertise and clicked the 'Copy email' button.
    • The application reacted immediately upon clicking the button, copying the email address and updating state without errors.