Loading and error states: Added user-friendly error messages and UI recovery after errors - 3.4

[Sheep4545]

• 🙌 Enhancement (Improves existing codebase or application performance)

PR Summary

Adds loading and error handling for AI study-pack generation: loading indicator and disabled generate button during the request, user-visible error messages on failure, and clean recovery (error clears on retry, when typing, or via Dismiss).

Overview

• What feature/problem does this PR address?

During AI generation there was no loading feedback, the button could be clicked again, and failures only appeared in the console. This PR improves UX by showing loading state, blocking duplicate submissions, and surfacing user-friendly errors with clear recovery.

• What approach was taken?

Kept existing loading state and used it to show a spinner and “Generating your study pack…” and to disable the submit button and textarea.
Introduced errorMessage state and set it in the catch from err.message (with a fallback for non-Error throws).
Rendered an error box (destructive styling, role="alert", aria-live="assertive") with the message and a “Dismiss” button (aria-label="Dismiss error").
Cleared the error when the user submits again, when they type in the notes field, or when they click Dismiss.

• Any important design decisions or trade-offs?

Error text is the message from the API/throw when it’s an Error (e.g. backend detail or “Request failed with status 500”); the fallback “Something went wrong. Please try again.” is used only for non-Error throws. A later change could map technical messages (e.g. status 500) to a single friendly message if desired.
Dismiss is an underlined text-style button; “Dismiss error” is used as the accessible name for screen readers.

Additional Notes

Loading indicator and disabled button were already present; this PR adds error handling and recovery.

Jira Ticket

Jira Ticket(s) - [SOC-18]

[greptile-apps]

Greptile Summary

Adds error handling and user recovery to the AI study-pack generation flow. Introduces an errorMessage state that displays a dismissible alert when generateStudyMaterials fails, with proper accessibility (role="alert", aria-live="assertive"). The error clears automatically on retry, user input, or manual dismiss.

• Added errorMessage state with proper typing (string | null)
• Error alert rendered with destructive theme styling and a dismiss button
• Error cleared on form resubmission, textarea input change, and dismiss click
• Accessibility attributes correctly applied to alert and dismiss button
• Raw technical error messages (e.g., "Request failed with status 500") may surface to users — consider mapping to friendly messages in a follow-up

Confidence Score: 4/5

• This PR is safe to merge — it adds straightforward error state handling with no risk to existing functionality.
• Single-file change that adds well-structured error handling UI. No breaking changes, proper state management, and good accessibility. The only minor concern is raw technical error messages surfacing to users, which is acknowledged in the PR description as a deliberate trade-off.
• No files require special attention

Important Files Changed

Filename	Overview
frontend/src/app/page.tsx	Adds error state management and a dismissible error alert UI. Clean implementation with proper accessibility attributes. Minor concern: raw technical error messages may surface to users.

Sequence Diagram

sequenceDiagram
    participant U as User
    participant P as page.tsx
    participant API as generateStudyMaterials

    U->>P: Clicks "Generate study pack"
    P->>P: setErrorMessage(null)
    P->>P: setLoading(true)
    P->>API: generateStudyMaterials(notes)

    alt Success
        API-->>P: GenerateResponse
        P->>P: console.log(response)
    else API Error
        API-->>P: throws Error
        P->>P: setErrorMessage(err.message)
        P->>U: Show error alert with Dismiss button
    end

    P->>P: setLoading(false)

    alt User Recovery
        U->>P: Types in textarea
        P->>P: setErrorMessage(null)
    else
        U->>P: Clicks Dismiss
        P->>P: setErrorMessage(null)
    else
        U->>P: Resubmits form
        P->>P: setErrorMessage(null)
    end

Loading

_{Last reviewed commit: 1031f3c}

[Sheep4545]

@greptileai

[greptile-apps]

Greptile Summary

Added comprehensive error handling and user feedback for AI study-pack generation. The PR introduces a toUserFriendlyMessage helper that filters technical error messages (status codes, network errors) and replaces them with "Something went wrong. Please try again." Non-technical error messages are passed through as-is. Error state is properly cleared on retry, when typing, and via the Dismiss button.

• Introduced errorMessage state with proper recovery mechanisms
• Technical errors (status codes, network failures) replaced with user-friendly fallback
• Error UI includes accessible markup (role="alert", aria-live="assertive")
• Loading state properly disables submit button and textarea to prevent duplicate submissions

Confidence Score: 5/5

• This PR is safe to merge with no risk
• The implementation is clean, well-structured, and handles all edge cases properly. Error handling follows best practices with proper state management, the toUserFriendlyMessage function safely handles both Error objects and non-Error throws, accessibility attributes are correctly applied, and error recovery works through multiple paths (dismiss, typing, retry)
• No files require special attention

Important Files Changed

Filename	Overview
frontend/src/app/page.tsx	Added error handling with user-friendly messages, loading state UI, and error recovery via dismiss/typing/retry

Flowchart

flowchart TD
    A[User submits form] --> B{isDisabled?}
    B -->|Yes| Z[Return early]
    B -->|No| C[Clear error message]
    C --> D[Set loading = true]
    D --> E[Call generateStudyMaterials API]
    E --> F{Success?}
    F -->|Yes| G[Log response]
    F -->|No| H[Catch error]
    H --> I[toUserFriendlyMessage]
    I --> J{Is technical error?}
    J -->|Yes| K[Show fallback message]
    J -->|No| L[Show raw error message]
    K --> M[Set errorMessage state]
    L --> M
    G --> N[Set loading = false]
    M --> N
    N --> O[UI shows error with Dismiss button]
    
    P[User types in textarea] --> Q[Clear error message]
    R[User clicks Dismiss] --> Q
    S[User retries submit] --> C

Loading

_{Last reviewed commit: a13ac58}