From 1707f8f3d4c46c34e2eef71a9779d05437ef5379 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Tue, 24 Mar 2026 10:12:13 +0000
Subject: [PATCH] feat: add HandoffModal for unified park/escalate

Fixed overlay with park/escalate intent toggle (accent-dim when active),
notes textarea, elevated priority checkbox (escalate only), and Cancel/Submit
buttons. Mobile responsive: items-end on mobile, items-center on sm+.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/session/HandoffModal.tsx   | 167 ++++++++++++++++++
 1 file changed, 167 insertions(+)
 create mode 100644 frontend/src/components/session/HandoffModal.tsx

diff --git a/frontend/src/components/session/HandoffModal.tsx b/frontend/src/components/session/HandoffModal.tsx
new file mode 100644
index 00000000..4e2826ac
--- /dev/null
+++ b/frontend/src/components/session/HandoffModal.tsx
@@ -0,0 +1,167 @@
+import { useState } from 'react'
+import { X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { HandoffCreateRequest } from '@/types/branching'
+
+interface HandoffModalProps {
+  onClose: () => void
+  onSubmit: (data: HandoffCreateRequest) => Promise<void>
+}
+
+type HandoffIntent = 'park' | 'escalate'
+
+export function HandoffModal({ onClose, onSubmit }: HandoffModalProps) {
+  const [intent, setIntent] = useState<HandoffIntent>('park')
+  const [notes, setNotes] = useState('')
+  const [elevated, setElevated] = useState(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  async function handleSubmit() {
+    setIsSubmitting(true)
+    try {
+      const data: HandoffCreateRequest = {
+        intent,
+        engineer_notes: notes.trim() || undefined,
+        priority: intent === 'escalate' && elevated ? 'elevated' : 'normal',
+      }
+      await onSubmit(data)
+      onClose()
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/50"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      {/* Dialog */}
+      <div
+        className={cn(
+          'relative z-10 w-full max-w-full sm:max-w-lg',
+          'bg-card border border-default rounded-lg',
+          'flex flex-col gap-0'
+        )}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Hand off session"
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-default">
+          <h2 className="text-sm font-semibold text-heading">Hand Off Session</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="text-muted hover:text-primary transition-colors"
+            aria-label="Close"
+          >
+            <X size={16} />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="flex flex-col gap-4 px-4 py-4">
+          {/* Intent toggle */}
+          <div className="flex flex-col gap-1.5">
+            <span className="text-[10px] font-semibold uppercase tracking-wider text-muted">
+              Handoff Type
+            </span>
+            <div className="flex gap-2">
+              <button
+                type="button"
+                onClick={() => setIntent('park')}
+                className={cn(
+                  'flex-1 rounded-[5px] border px-3 py-2 text-sm font-medium transition-colors',
+                  intent === 'park'
+                    ? 'border-accent bg-accent-dim text-accent-text'
+                    : 'border-default bg-transparent text-secondary hover:bg-elevated hover:text-primary'
+                )}
+              >
+                Park
+              </button>
+              <button
+                type="button"
+                onClick={() => setIntent('escalate')}
+                className={cn(
+                  'flex-1 rounded-[5px] border px-3 py-2 text-sm font-medium transition-colors',
+                  intent === 'escalate'
+                    ? 'border-accent bg-accent-dim text-accent-text'
+                    : 'border-default bg-transparent text-secondary hover:bg-elevated hover:text-primary'
+                )}
+              >
+                Escalate
+              </button>
+            </div>
+            <p className="text-xs text-secondary">
+              {intent === 'park'
+                ? 'Park this session to resume later or hand to another engineer.'
+                : 'Escalate to a senior engineer with full context and branch history.'}
+            </p>
+          </div>
+
+          {/* Notes */}
+          <div className="flex flex-col gap-1.5">
+            <label
+              htmlFor="handoff-notes"
+              className="text-[10px] font-semibold uppercase tracking-wider text-muted"
+            >
+              Engineer Notes
+              <span className="ml-1 normal-case font-normal text-muted">(optional)</span>
+            </label>
+            <textarea
+              id="handoff-notes"
+              value={notes}
+              onChange={e => setNotes(e.target.value)}
+              rows={3}
+              placeholder="Add context for whoever picks this up…"
+              className={cn(
+                'w-full resize-none rounded-[5px] border border-default bg-input',
+                'px-3 py-2 text-sm text-primary placeholder:text-muted',
+                'focus:outline-none focus:border-accent focus:shadow-[0_0_0_2px_var(--color-accent-dim)]',
+                'transition-colors'
+              )}
+            />
+          </div>
+
+          {/* Priority (escalate only) */}
+          {intent === 'escalate' && (
+            <label className="flex items-center gap-2 cursor-pointer select-none">
+              <input
+                type="checkbox"
+                checked={elevated}
+                onChange={e => setElevated(e.target.checked)}
+                className="accent-accent w-4 h-4"
+              />
+              <span className="text-sm text-primary">Mark as elevated priority</span>
+            </label>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-2 px-4 py-3 border-t border-default">
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={isSubmitting}
+            className="rounded-[5px] border border-default px-4 py-2 text-sm text-secondary hover:bg-elevated hover:text-primary transition-colors disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={handleSubmit}
+            disabled={isSubmitting}
+            className="rounded-[5px] bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-[#ea580c] transition-colors disabled:opacity-50"
+          >
+            {isSubmitting ? 'Submitting…' : intent === 'park' ? 'Park Session' : 'Escalate Session'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}