Implement Proposal Evaluation Override Component in Frontend with Supabase Direct Update

[davek-ai]

Description

Add a new frontend component to allow authenticated users to manually override the latest evaluation for a DAO proposal by setting the vote (Yes or No) for a specific wallet. This will directly update the recommendation field in the evaluations table in Supabase for the user's latest evaluation, ensuring that when the vote is auto-scheduled, it reflects the manual override. The component will use the Supabase JavaScript client for authentication and direct database updates, leveraging React with Tailwind CSS for styling and a CDN-hosted React setup.

Requirements

System Overview

• Objective: Enable authenticated users to modify the latest evaluation for a proposal by setting the vote (Yes/No) for a specific wallet, updating the evaluations table directly via Supabase.
• Scope: Create a ProposalEvaluationOverride component to query and update the evaluations table using the Supabase client, integrating with AIBTC_SUPABASE_URL for authentication and data access, and display confirmation or error messages.
• Compatibility: Ensure integration with the backend's Supabase-based DAO proposal system and LangGraph-based evaluation workflow.
• Features:
  • UI form to select a proposal, wallet, and vote (Yes/No) for authenticated users.
  • Update the recommendation field of the latest evaluation (highest revision) for the selected proposal_id, dao, and wallet_id in the evaluations table.
  • Display confirmation or error messages for the override action.
  • Securely manage Supabase authentication and database access.

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 Integration:
  • Use the Supabase JavaScript client (@supabase/supabase-js) for authentication and direct database access.
  • Authenticate users and retrieve the Supabase access token from the session.
  • Query the evaluations table to find the latest evaluation (max(revision)) for a given proposal_id, dao, and wallet_id.
  • Update the recommendation field (to "Yes" or "No") for the matching evaluation.
• Database Operations:
  • Query: SELECT * FROM evaluations WHERE proposal_id = :proposal_id AND dao = :dao AND wallet_id = :wallet_id ORDER BY revision DESC LIMIT 1.
  • Update: UPDATE evaluations SET recommendation = :recommendation, updated_at = NOW() WHERE id = :evaluation_id.
  • Ensure the user has permission to modify the evaluation (e.g., wallet_id is associated with the authenticated user).
• UI Components:
  • Create a ProposalEvaluationOverride component:
    • Display a form with dropdowns for selecting proposal_id (from active proposals), wallet_id (from user-associated wallets), and a radio button or dropdown for vote (Yes/No).
    • Disable form for unauthenticated users or if no active proposals/wallets are available.
    • Show loading state during Supabase query and update.
    • Display success message on successful update (e.g., "Vote override set to {vote} for wallet {wallet_id}") or error message on failure (e.g., "Please log in", "No evaluation found").
  • Style with Tailwind CSS for responsiveness and consistency.
• State Management:
  • Use React hooks (useState, useEffect) for managing form state, Supabase query/update responses, and loading/error states.
  • Use Supabase’s onAuthStateChange to monitor authentication state and retrieve the access token.
  • Fetch active proposals and user wallets from Supabase tables (proposals and a presumed wallets table or user metadata) to populate dropdowns.
• Error Handling:
  • Display user-friendly error messages for failed operations (e.g., "You must be logged in to override evaluations", "No evaluation found for this wallet").
  • Handle authentication errors by prompting the user to log in via Supabase auth UI or redirect.
  • Handle cases where no evaluation exists (e.g., "No active evaluation found for this proposal and wallet").
  • Log errors to console for debugging, avoiding exposure of sensitive details like tokens.
• Testing:
  • Test component rendering, Supabase integration, and form interactions with mock Supabase sessions and data.
  • Validate UI responsiveness across devices.
  • Ensure Supabase access token and database operations are secure and not exposed in client code.

Acceptance Criteria

• ProposalEvaluationOverride component is implemented in React with JSX.
• Form includes dropdowns for proposal_id, wallet_id, and a Yes/No vote selector, disabled for unauthenticated users.
• Supabase client queries the latest evaluation (max(revision)) for proposal_id, dao, and wallet_id from evaluations table.
• Supabase client updates the recommendation field to "Yes" or "No" for the latest evaluation.
• Component verifies user permission to modify the evaluation (e.g., wallet_id matches user).
• UI displays loading state during Supabase operations.
• Successful update triggers success message (e.g., "Vote override set to Yes for wallet {wallet_id}").
• Error responses display user-friendly messages (e.g., "Please log in", "No evaluation found").
• Authentication errors prompt user to log in via Supabase auth.
• Styling uses Tailwind CSS, ensuring responsiveness.
• Active proposals and user wallets are fetched from Supabase and displayed in dropdowns.
• Unit tests validate component rendering, authentication, form interactions, and Supabase operations.
• Integration tests confirm correct Supabase queries/updates and UI updates with mock sessions.
• Application runs correctly with CDN-hosted React, Tailwind CSS, and Supabase client.

Tasks

1. Set up Supabase client (@supabase/supabase-js) with AIBTC_SUPABASE_URL and AIBTC_SUPABASE_ANON_KEY for authentication and database access.
2. Create a new React component (ProposalEvaluationOverride) with JSX.
3. Implement Supabase query to fetch the latest evaluation (max(revision)) for proposal_id, dao, and wallet_id from evaluations table.
4. Implement Supabase update to set recommendation to "Yes" or "No" for the matching evaluation.
5. Add form with dropdowns for proposal_id, wallet_id, and Yes/No vote selector, styled with Tailwind CSS, disabling for unauthenticated users.
6. Implement Supabase queries to fetch active proposals (proposals table, e.g., state IN ('evaluating', 'voting')) and user wallets (from wallets table or user metadata).
7. Implement state management with useState, useEffect, and Supabase’s onAuthStateChange for auth state, token retrieval, and form state.
8. Add error handling and user feedback for Supabase operations, including authentication errors.
9. Style component with Tailwind CSS for responsiveness.
10. Write unit tests for component rendering, authentication, form interactions, and Supabase operations.
11. Write integration tests with mock Supabase sessions and data.
12. Update documentation in README.md or docs/frontend.md with setup, authentication, and usage instructions.

Dependencies

• CDN-hosted React and React DOM (cdn.jsdelivr.net).
• CDN-hosted Tailwind CSS for styling.
• Supabase JavaScript client (@supabase/supabase-js) for authentication and database access.
• Supabase backend (AIBTC_SUPABASE_URL, AIBTC_SUPABASE_ANON_KEY) for evaluations, proposals, and wallet data.
• 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 authentication errors.
• Ensure Supabase access token is not exposed in client code (e.g., avoid logging or storing in insecure state).
• Fetch proposals with state in evaluating or voting to ensure only active proposals are shown.
• Verify user ownership of wallet_id (e.g., via Supabase user

[davek-ai]

1. new proposals come in

2. agents with tokens all run through the proposal and other pieces of context and come up with a "recommendation/evaluation"

3. human can review/modify/regenerate recommendation/evaluation

4. automation will pick up all agents X blocks before voting closes and actually casts the votes stored in the db on chain

5. veto ability here but has to be before the voting closes as well . This would help you reject the on-chain recording of a vote

"human would be 3 and 5"

[biwasxyz]

Is the evaluation saved in db?