adding human feedback

api/mismatches.ts

@@ -66,6 +66,7 @@ export default async function handler(req: IncomingMessage, res: ServerResponse)
                     theme: row.question_theme,
                     domain: row.question_domain,
                     model: row.response_model,
+                    r_uuid: row.r_uuid,
                     response: row.response_content,
                     assessments: {},
                 });

src/components/itemList.tsx

@@ -1,7 +1,23 @@
+import React, { useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import type { AssessmentItemsProps } from '../types';
 
 const AssessmentItems: React.FC<AssessmentItemsProps> = ({ judge1, judge2, items, selectedCategory }) => {
+  const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
+  const [copiedButton, setCopiedButton] = useState<string | null>(null);
+
+  const handleCopyAssessment = (r_uuid: string, buttonValue: string, itemIndex: number) => {
+    const tuple = `["${r_uuid}", "${buttonValue}"]`;
+    navigator.clipboard.writeText(tuple).then(() => {
+      setCopiedIndex(itemIndex);
+      setCopiedButton(buttonValue);
+      setTimeout(() => {
+        setCopiedIndex(null);
+        setCopiedButton(null);
+      }, 2000);
+    });
+  };
+
   if (!selectedCategory || items.length === 0) {
     return (
       <div className="assessment-items">
@@ -18,10 +34,14 @@ const AssessmentItems: React.FC<AssessmentItemsProps> = ({ judge1, judge2, items
         {items.map((item, index) => (
           <div key={index} className="assessment-item">
             <div className="item-question">
-              <h4>Question</h4>
+              <div className="item-question-header">
+                <h4>Question</h4>
+                <div className="metadata">
+                  { item.theme && <span className="meta-tag theme"><strong>Theme:</strong> {item.theme}</span> }
+                  { item.domain && <span className="meta-tag domain"><strong>Domain:</strong> {item.domain}</span> }
+                </div>
+              </div>
               <p>{item.question}</p>
-              { item.theme && <p><strong>Theme:</strong> {item.theme}</p> }
-              { item.domain && <p><strong>Domain:</strong> {item.domain}</p> }
             </div>
             
             <div className="item-answer">
@@ -58,11 +78,30 @@ const AssessmentItems: React.FC<AssessmentItemsProps> = ({ judge1, judge2, items
                     </div>
                   </div>
                 )}
-              </>
-            ) : (
-              <p>No assessments available</p>
-            )}
-          </div>
+                </>
+              ) : (
+                <p>No assessments available</p>
+              )}
+            </div>
+            <div className="third-assessment">
+              <div>
+                <h4>Provide Human Assessment</h4>
+                <p className="assessment-hint">Click to copy assessment tuple for response ID: <code>{item.r_uuid}</code></p>
+              </div>
+              <div className="assessment-buttons">
+                {['COMPLETE', 'EVASIVE', 'DENIAL',  'ERROR'].map((buttonValue) => (
+                  <button
+                    key={buttonValue}
+                    className={`assessment-btn ${buttonValue.toLowerCase()} ${
+                      copiedIndex === index && copiedButton === buttonValue ? 'copied' : ''
+                    }`}
+                    onClick={() => handleCopyAssessment(item.r_uuid, buttonValue, index)}
+                  >
+                    {copiedIndex === index && copiedButton === buttonValue ? '✓ Copied!' : buttonValue}
+                  </button>
+                ))}
+              </div>
+            </div>
         </div>
       ))}     
     </div>

src/index.css

@@ -463,11 +463,47 @@ body {
   box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
 }
 
-.item-question, .item-answer {
+.item-question-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.metadata {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.meta-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.meta-tag.theme {
+  background: #dbeafe;
+  color: #1e40af;
+}
+
+.meta-tag.domain {
+  background: #f3e8ff;
+  color: #6b21a8;
+}
+
+.meta-tag strong {
+  font-weight: 600;
+}
+
+.item-question, .item-answer, .item-assessments {
   margin-bottom: 1.5rem;
 }
 
-.item-question h4, .item-answer h4 {
+h4 {
   font-size: 1rem;
   font-weight: 600;
   color: #374151;
@@ -514,27 +550,27 @@ body {
   letter-spacing: 0.05em;
 }
 
-.assessment-label.complete {
+.complete {
   background: #dcfce7;
   color: #166534;
 }
 
-.assessment-label.evasive {
+.evasive {
   background: #fef3c7;
   color: #92400e;
 }
 
-.assessment-label.denial {
+.denial {
   background: #fecaca;
   color: #991b1b;
 }
 
-.assessment-label.error {
+.error {
   background: #e9d5ff;
   color: #6b21a8;
 }
 
-.assessment-label.unknown {
+.unknown {
   background: #f3f4f6;
   color: #4b5563;
 }
@@ -545,6 +581,61 @@ body {
   font-size: 0.875rem;
 }
 
+.third-assessment {
+  display:flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.assessment-hint {
+  color: #64748b;
+  font-size: 0.875rem;
+}
+
+.assessment-hint code {
+  background: #e2e8f0;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: monospace;
+  font-size: 0.8125rem;
+  color: #475569;
+}
+
+.assessment-buttons {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding : 1rem 0;
+}
+
+.assessment-btn {
+  padding: 8px 20px;
+  border: 2px solid transparent;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.assessment-btn:hover {
+  transform: scale(1.05);
+  z-index: 10;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.assessment-btn:active {
+  transform: translateY(0);
+}
+
+.assessment-btn.copied {
+  background: #6366f1 !important;
+  color: white !important;
+  border-color: #6366f1 !important;
+}
+
 /* Markdown Styles */
 .markdown-content {
   line-height: 1.6;

src/types.ts

@@ -47,6 +47,7 @@ export interface AssessmentItem {
   question: string;
   theme: string;
   domain: string;
+  r_uuid: string; 
   response: string;
   model: string;
   assessments: Record<string,JudgeAssessment>;