01836d6a2d
In Tailwind v4, text-secondary resolves to --color-secondary (#2e3140), a dark surface color — NOT --color-text-secondary (#848b9b). This made all secondary text invisible on dark backgrounds. The correct class is text-muted-foreground which maps to #848b9b. This matches the pattern used by existing FlowPilot components. Also reverts the unnecessary index.css variable bump from prior commit. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
55 lines
2.6 KiB
TypeScript
55 lines
2.6 KiB
TypeScript
import { useEffect } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { Inbox, ArrowUpRight, Pause, Clock } from 'lucide-react'
|
|
import { useHandoff } from '@/hooks/useHandoff'
|
|
|
|
export default function SessionQueuePage() {
|
|
const navigate = useNavigate()
|
|
const { queue, isLoadingQueue, loadQueue, claimHandoff } = useHandoff()
|
|
|
|
useEffect(() => { loadQueue() }, [loadQueue])
|
|
|
|
const handleClaim = async (item: typeof queue[0]) => {
|
|
const result = await claimHandoff(item.session_id, item.handoff_id)
|
|
if (result) navigate(`/pilot?sessionId=${item.session_id}`)
|
|
}
|
|
|
|
return (
|
|
<div className="flex-1 p-6">
|
|
<div className="flex items-center gap-2 mb-6">
|
|
<Inbox size={20} className="text-accent" />
|
|
<h1 className="text-xl font-heading font-bold text-heading">Session Queue</h1>
|
|
</div>
|
|
{isLoadingQueue ? (
|
|
<p className="text-sm text-muted">Loading queue...</p>
|
|
) : queue.length === 0 ? (
|
|
<div className="text-center py-12">
|
|
<Inbox size={40} className="text-muted mx-auto mb-3" />
|
|
<p className="text-sm text-muted">No sessions waiting</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{queue.map(item => (
|
|
<div key={item.handoff_id} className="bg-card border border-default rounded-lg p-4 flex items-center justify-between hover:border-hover transition-colors">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
{item.intent === 'escalate' ? <ArrowUpRight size={14} className="text-danger" /> : <Pause size={14} className="text-warning" />}
|
|
<span className="text-sm font-medium text-heading">{item.problem_summary || 'Untitled session'}</span>
|
|
{item.priority === 'elevated' && <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-danger-dim text-danger">Elevated</span>}
|
|
</div>
|
|
{item.engineer_notes && <p className="text-xs text-muted-foreground">{item.engineer_notes}</p>}
|
|
<div className="flex items-center gap-2 mt-1 text-xs text-muted">
|
|
<Clock size={10} />
|
|
<span>{new Date(item.created_at).toLocaleString()}</span>
|
|
{item.problem_domain && <span>· {item.problem_domain}</span>}
|
|
</div>
|
|
</div>
|
|
<button onClick={() => handleClaim(item)} className="px-3 py-1.5 text-xs bg-accent text-white rounded-[5px] hover:bg-accent/90">Claim</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|