Regenerative UI with Directive Input (Human Context Injection)

[davek-ai]

Description

Enhance the frontend application to integrate the new backend API endpoint (POST /proposals/{proposal_id}/evaluate) for triggering evaluation iterations for DAO proposals, using Supabase authentication to securely pass the Supabase access token as the Authorization token. The endpoint requires no request body and returns a 202 Accepted response to indicate successful job queueing. This will allow authenticated users to initiate new evaluation revisions for a given proposal, displaying a confirmation of the queued action. The implementation will use React with Tailwind CSS for styling, leveraging a CDN-hosted React setup, and ensure compatibility with the backend's Supabase-based authentication.

Requirements

System Overview

• Objective: Enable authenticated users to trigger new evaluation iterations via the frontend, interacting with the backend API endpoint using Supabase access tokens.
• Scope: Add a new React component and API client logic to call POST /proposals/{proposal_id}/evaluate, handle the 202 response, and display confirmation, integrating with AIBTC_PLATFORM_API_URL and Supabase authentication (AIBTC_SUPABASE_URL).
• Compatibility: Ensure seamless integration with the backend's Supabase-based DAO proposal system and LangGraph-based evaluation workflow.
• Features:
  • UI button to trigger evaluation iterations for a selected proposal, accessible only to authenticated users.
  • Display confirmation message on successful 202 response (e.g., "Evaluation jobs queued successfully").
  • Handle errors, loading states, and authentication failures with user feedback.
  • Use Supabase client to manage authentication and retrieve access tokens.

Technical Requirements

• Frontend Framework:
  • Use React (CDN-hosted via cdn.jsdelivr.net, e.g., react, react-dom).
  • Use JSX for component rendering, compiled with Babel.
  • Apply Tailwind CSS for styling, included via CDN.
• Supabase Authentication:
  • Use the Supabase JavaScript client (@supabase/supabase-js) to manage user authentication.
  • Retrieve the Supabase access token from the authenticated session for API calls.
  • Pass the token in the Authorization header as Bearer ${supabaseAccessToken}.
• API Integration:
  • Implement an API client to call POST /proposals/{proposal_id}/evaluate with:
    • Path parameter: proposal_id.
    • No request body.
    • Header: Authorization: Bearer ${supabaseAccessToken}.
  • Handle response: 202 Accepted (no body).
  • Use fetch for HTTP requests, with error handling for 401 (unauthorized), 400 (bad request), and 500 (server error) responses.
• UI Components:
  • Create a ProposalEvaluationTrigger component:
    • Display a button to initiate evaluation for a proposal, disabled for unauthenticated users.
    • No input fields, as the endpoint requires no body.
    • Show loading state during API call.
    • Display success message on 202 response (e.g., "Evaluation jobs queued successfully") or error message on failure (e.g., "Please log in", "Invalid proposal ID").
  • Style with Tailwind CSS for responsiveness and consistency.
• State Management:
  • Use React hooks (useState, useEffect) for managing loading and error states.
  • Use Supabase's onAuthStateChange to monitor authentication state and retrieve the access token.
• Error Handling:
  • Display user-friendly error messages for failed API calls (e.g., "You must be logged in to trigger evaluations", "Invalid proposal ID").
  • Handle 401 errors by prompting the user to log in via Supabase auth UI or redirect.
  • Log errors to console for debugging, avoiding exposure of sensitive details like tokens.
• Testing:
  • Test component rendering and API integration with mock Supabase sessions and API responses.
  • Validate UI responsiveness across devices.
  • Ensure Supabase access token is securely handled and not exposed in client code.

Acceptance Criteria

• ProposalEvaluationTrigger component is implemented in React with JSX.
• Component includes a button to trigger evaluation, disabled for unauthenticated users.
• API client calls POST /proposals/{proposal_id}/evaluate with no body and Authorization: Bearer ${supabaseAccessToken} header.
• Supabase client retrieves and manages access token securely.
• UI displays loading state during API call.
• 202 response triggers success message (e.g., "Evaluation jobs queued successfully").
• Error responses display user-friendly messages (e.g., "Please log in", "Failed to queue evaluations").
• 401 errors prompt user to log in via Supabase auth.
• Styling uses Tailwind CSS, ensuring responsiveness.
• Unit tests validate component rendering, authentication, and API integration.
• Integration tests confirm correct API calls and UI updates with mock Supabase sessions.
• Application runs correctly with CDN-hosted React, Tailwind CSS, and Supabase client.

Dependencies

• CDN-hosted React and React DOM (cdn.jsdelivr.net).
• CDN-hosted Tailwind CSS for styling.
• Supabase JavaScript client (@supabase/supabase-js) for authentication.
• Backend API (AIBTC_PLATFORM_API_URL) with POST /proposals/{proposal_id}/evaluate endpoint.
• Supabase backend (AIBTC_SUPABASE_URL, AIBTC_SUPABASE_ANON_KEY) for authentication.
• Testing framework (e.g., Jest, React Testing Library) for unit and integration tests.

Additional Notes

• Configure Supabase client with environment variables (e.g., VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY) in .env.local for development.
• Use Supabase's auth UI or custom login flow to handle user authentication, redirecting to login on 401 errors.
• Ensure Supabase access token is not exposed in client code (e.g., avoid logging or storing in insecure state).
• Make the UI intuitive, with clear feedback for authentication, loading, success, and error states.
• Document the component's props, authentication setup, and usage in docs/frontend.md, noting the 202 response and lack of request body.
• Test responsiveness on mobile and desktop devices using Tailwind's responsive classes.

Related Issues

• Enhance DAO Proposal Voting Flow with Evaluations, Vetoes, and API Endpoint (#TBD, backend repo)

Labels

• Frontend
• React
• API
• UI
• Tailwind CSS
• Supabase
• Authentication

[human058382928]

Moving this to frontend