human handoffs

frontend/src/components/HumanHandoff.jsx

@@ -0,0 +1,58 @@
+import { useState } from "react";
+import HandoffConversation from "./HandoffConversation";
+import HandoffInbox from "./HandoffInbox";
+import HandoffSettings from "./HandoffSettings";
+
+export default function HumanHandoff() {
+  const [tab, setTab] = useState("handoffs");
+  const [selectedHandoffId, setSelectedHandoffId] = useState(null);
+
+  function switchTab(nextTab) {
+    setTab(nextTab);
+    if (nextTab !== "handoffs") {
+      setSelectedHandoffId(null);
+    }
+  }
+
+  return (
+    <section className="human-handoff-page">
+      <header className="human-handoff-head">
+        <div>
+          <h1>Human Handoff</h1>
+          <p>
+            Private Agent ↔ Human Owner conversations, linked to external customer threads
+            but kept on separate RFC threading planes.
+          </p>
+          <nav className="human-handoff-tabs" aria-label="Human Handoff sections">
+            <button
+              type="button"
+              className={tab === "handoffs" ? "active" : ""}
+              onClick={() => switchTab("handoffs")}
+            >
+              Handoffs
+            </button>
+            <button
+              type="button"
+              className={tab === "settings" ? "active" : ""}
+              onClick={() => switchTab("settings")}
+            >
+              Settings
+            </button>
+          </nav>
+        </div>
+      </header>
+
+      {tab === "handoffs" && (
+        selectedHandoffId ? (
+          <HandoffConversation
+            handoffId={selectedHandoffId}
+            onBack={() => setSelectedHandoffId(null)}
+          />
+        ) : (
+          <HandoffInbox onSelect={setSelectedHandoffId} />
+        )
+      )}
+      {tab === "settings" && <HandoffSettings />}
+    </section>
+  );
+}