Skip to content

Commit 08fa972

Browse files
Oliver Baerclaude
Oliver Baer
and
claude
committed
feat: add sync UI — pairing modal, status badge, auto-sync wiring
- SyncPairing.tsx: create/join session modal with 4 connection states - Wire useSync() hook + SyncStatus badge into page header - Auto-sync transcript and all 7 agent results to peer when connected Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 8a765da commit 08fa972

2 files changed

Lines changed: 344 additions & 3 deletions

File tree

‎app/components/SyncPairing.tsx‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
'use client';
2+
3+
import { useState, useCallback } from 'react';
4+
import { useVoiceStore } from '../store/voiceStore';
5+
6+
interface SyncPairingProps {
7+
createSession: () => Promise<string | null>;
8+
joinSession: (code: string) => Promise<boolean>;
9+
leaveSession: () => Promise<void>;
10+
onClose: () => void;
11+
}
12+
13+
export function SyncPairing({ createSession, joinSession, leaveSession, onClose }: SyncPairingProps) {
14+
const { syncStatus, pairingCode, pairedDeviceName, syncWarning } = useVoiceStore();
15+
const [joinCode, setJoinCode] = useState('');
16+
const [isLoading, setIsLoading] = useState(false);
17+
const [error, setError] = useState<string | null>(null);
18+
19+
const handleCreate = useCallback(async () => {
20+
setIsLoading(true);
21+
setError(null);
22+
const code = await createSession();
23+
if (!code) {
24+
setError('Failed to create session');
25+
}
26+
setIsLoading(false);
27+
}, [createSession]);
28+
29+
const handleJoin = useCallback(async () => {
30+
const code = joinCode.trim().toLowerCase();
31+
if (!code) return;
32+
setIsLoading(true);
33+
setError(null);
34+
const ok = await joinSession(code);
35+
if (!ok) {
36+
setError('Failed to connect. Check the code and try again.');
37+
}
38+
setIsLoading(false);
39+
}, [joinCode, joinSession]);
40+
41+
const handleLeave = useCallback(async () => {
42+
await leaveSession();
43+
}, [leaveSession]);
44+
45+
const copyCode = useCallback(() => {
46+
if (pairingCode) {
47+
navigator.clipboard.writeText(pairingCode).catch(() => {});
48+
}
49+
}, [pairingCode]);
50+
51+
// Connected state
52+
if (syncStatus === 'connected') {
53+
return (
54+
<div className="absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
55+
<div className="w-80 bg-voice-surface border border-white/10 rounded-xl p-6 shadow-2xl">
56+
<div className="flex items-center gap-3 mb-4">
57+
<span className="w-3 h-3 rounded-full bg-emerald-400 animate-pulse" />
58+
<h3 className="text-sm font-medium text-white">Synced</h3>
59+
</div>
60+
61+
<p className="text-sm text-gray-300 mb-1">
62+
Connected to <span className="text-white font-medium">{pairedDeviceName || 'peer'}</span>
63+
</p>
64+
<p className="text-xs text-gray-500 mb-4">
65+
Transcript and agent results sync in real time.
66+
</p>
67+
68+
{syncWarning && (
69+
<div className="mb-4 p-2 bg-amber-500/10 border border-amber-500/20 rounded-lg">
70+
<p className="text-xs text-amber-400">{syncWarning}</p>
71+
</div>
72+
)}
73+
74+
<div className="flex gap-2">
75+
<button
76+
onClick={handleLeave}
77+
className="flex-1 px-3 py-2 text-sm font-medium rounded-lg bg-red-500/10 text-red-400 hover:bg-red-500/20 transition-colors"
78+
>
79+
Disconnect
80+
</button>
81+
<button
82+
onClick={onClose}
83+
className="flex-1 px-3 py-2 text-sm font-medium rounded-lg bg-white/5 text-gray-300 hover:bg-white/10 transition-colors"
84+
>
85+
Close
86+
</button>
87+
</div>
88+
</div>
89+
</div>
90+
);
91+
}
92+
93+
// Waiting for peer
94+
if (syncStatus === 'waiting_for_peer' && pairingCode) {
95+
return (
96+
<div className="absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
97+
<div className="w-80 bg-voice-surface border border-white/10 rounded-xl p-6 shadow-2xl">
98+
<div className="flex items-center gap-3 mb-4">
99+
<span className="w-3 h-3 rounded-full bg-blue-400 animate-pulse" />
100+
<h3 className="text-sm font-medium text-white">Waiting for peer</h3>
101+
</div>
102+
103+
<p className="text-xs text-gray-400 mb-3">
104+
Share this code with the other device:
105+
</p>
106+
107+
<button
108+
onClick={copyCode}
109+
className="w-full flex items-center justify-center gap-2 px-4 py-3 mb-4 rounded-lg bg-white/5 border border-white/10 hover:bg-white/10 transition-colors group"
110+
title="Click to copy"
111+
>
112+
<span className="text-lg font-mono font-semibold tracking-widest text-white">
113+
{pairingCode}
114+
</span>
115+
<CopyIcon className="w-4 h-4 text-gray-500 group-hover:text-gray-300 transition-colors" />
116+
</button>
117+
118+
<p className="text-xs text-gray-500 mb-4 text-center">
119+
Code expires in 60 seconds
120+
</p>
121+
122+
<div className="flex gap-2">
123+
<button
124+
onClick={handleLeave}
125+
className="flex-1 px-3 py-2 text-sm font-medium rounded-lg bg-white/5 text-gray-300 hover:bg-white/10 transition-colors"
126+
>
127+
Cancel
128+
</button>
129+
</div>
130+
</div>
131+
</div>
132+
);
133+
}
134+
135+
// Connecting state
136+
if (syncStatus === 'connecting') {
137+
return (
138+
<div className="absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
139+
<div className="w-80 bg-voice-surface border border-white/10 rounded-xl p-6 shadow-2xl">
140+
<div className="flex items-center gap-3 mb-4">
141+
<LoadingSpinner className="w-4 h-4 text-amber-400" />
142+
<h3 className="text-sm font-medium text-white">Connecting...</h3>
143+
</div>
144+
<p className="text-xs text-gray-400">
145+
Establishing encrypted connection with peer.
146+
</p>
147+
</div>
148+
</div>
149+
);
150+
}
151+
152+
// Disconnected — show create/join options
153+
return (
154+
<div className="absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
155+
<div className="w-80 bg-voice-surface border border-white/10 rounded-xl p-6 shadow-2xl">
156+
<div className="flex items-center justify-between mb-5">
157+
<h3 className="text-sm font-medium text-white">Sync Devices</h3>
158+
<button
159+
onClick={onClose}
160+
className="p-1 text-gray-500 hover:text-gray-300 transition-colors"
161+
>
162+
<CloseIcon className="w-4 h-4" />
163+
</button>
164+
</div>
165+
166+
{error && (
167+
<div className="mb-4 p-2 bg-red-500/10 border border-red-500/20 rounded-lg">
168+
<p className="text-xs text-red-400">{error}</p>
169+
</div>
170+
)}
171+
172+
{/* Create session */}
173+
<button
174+
onClick={handleCreate}
175+
disabled={isLoading}
176+
className="w-full flex items-center gap-3 px-4 py-3 mb-3 rounded-lg bg-voice-primary/10 border border-voice-primary/20 hover:bg-voice-primary/20 transition-colors disabled:opacity-50"
177+
>
178+
<DeviceIcon className="w-5 h-5 text-voice-primary" />
179+
<div className="text-left">
180+
<p className="text-sm font-medium text-white">Create Session</p>
181+
<p className="text-xs text-gray-400">Generate a pairing code</p>
182+
</div>
183+
</button>
184+
185+
{/* Divider */}
186+
<div className="flex items-center gap-3 my-3">
187+
<div className="flex-1 h-px bg-white/10" />
188+
<span className="text-xs text-gray-500">or</span>
189+
<div className="flex-1 h-px bg-white/10" />
190+
</div>
191+
192+
{/* Join session */}
193+
<div className="space-y-2">
194+
<input
195+
type="text"
196+
value={joinCode}
197+
onChange={(e) => setJoinCode(e.target.value)}
198+
onKeyDown={(e) => e.key === 'Enter' && handleJoin()}
199+
placeholder="Enter pairing code"
200+
className="w-full px-4 py-2.5 text-sm rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:outline-none focus:border-voice-primary/50 font-mono tracking-wide"
201+
disabled={isLoading}
202+
/>
203+
<button
204+
onClick={handleJoin}
205+
disabled={isLoading || !joinCode.trim()}
206+
className="w-full px-4 py-2.5 text-sm font-medium rounded-lg bg-voice-primary text-white hover:bg-voice-secondary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
207+
>
208+
{isLoading ? 'Connecting...' : 'Join Session'}
209+
</button>
210+
</div>
211+
212+
<p className="mt-4 text-xs text-gray-500 text-center leading-relaxed">
213+
End-to-end encrypted. No data stored on servers.
214+
</p>
215+
</div>
216+
</div>
217+
);
218+
}
219+
220+
function CopyIcon({ className }: { className?: string }) {
221+
return (
222+
<svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
223+
<path strokeLinecap="round" strokeLinejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
224+
</svg>
225+
);
226+
}
227+
228+
function CloseIcon({ className }: { className?: string }) {
229+
return (
230+
<svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
231+
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
232+
</svg>
233+
);
234+
}
235+
236+
function DeviceIcon({ className }: { className?: string }) {
237+
return (
238+
<svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
239+
<path strokeLinecap="round" strokeLinejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
240+
</svg>
241+
);
242+
}
243+
244+
function LoadingSpinner({ className }: { className?: string }) {
245+
return (
246+
<svg className={`${className} animate-spin`} fill="none" viewBox="0 0 24 24">
247+
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
248+
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
249+
</svg>
250+
);
251+
}

0 commit comments

Comments
 (0)