1 files changed, 36 insertions, 0 deletions
diff --git a/frontend/src/components/Stage1.jsx b/frontend/src/components/Stage1.jsx
new file mode 100644
index 0000000..071937c
--- /dev/null
+++ b/frontend/src/components/Stage1.jsx
@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import './Stage1.css';
+
+export default function Stage1({ responses }) {
+  const [activeTab, setActiveTab] = useState(0);
+
+  if (!responses || responses.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="stage stage1">
+      <h3 className="stage-title">Stage 1: Individual Responses</h3>
+
+      <div className="tabs">
+        {responses.map((resp, index) => (
+          <button
+            key={index}
+            className={`tab ${activeTab === index ? 'active' : ''}`}
+            onClick={() => setActiveTab(index)}
+          >
+            {resp.model.split('/')[1] || resp.model}
+          </button>
+        ))}
+      </div>
+
+      <div className="tab-content">
+        <div className="model-name">{responses[activeTab].model}</div>
+        <div className="response-text markdown-content">
+          <ReactMarkdown>{responses[activeTab].response}</ReactMarkdown>
+        </div>
+      </div>
+    </div>
+  );
+}