refactor: redesign Session History with tabs + Load More, improve Escalation Queue urgency
Session History: - Split into AI Sessions / Flow Sessions tabs (AI default) - Load More pagination (25 per page) instead of 50-item hard cap - Dynamic problem domain filter from actual session data - Fix all blue focus rings to ember orange - Fix badge colors to use design system tokens Escalation Queue: - Add wait-time color coding (muted <1h, amber 1-4h, red >4h) - Sort oldest-first for triage urgency - Compact right-aligned pickup button - Widen container, dynamic session count in subtitle - Fix typos and non-system color tokens Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,20 +1,27 @@
|
||||
import { useState } from 'react'
|
||||
import { AlertTriangle } from 'lucide-react'
|
||||
import { EscalationQueue } from '@/components/flowpilot'
|
||||
|
||||
export default function EscalationQueuePage() {
|
||||
const [count, setCount] = useState<number | null>(null)
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-3xl p-6">
|
||||
<div className="mx-auto max-w-4xl p-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<span className="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-500/10">
|
||||
<AlertTriangle size={16} className="text-amber-400" />
|
||||
<span className="flex h-8 w-8 items-center justify-center rounded-lg bg-warning-dim">
|
||||
<AlertTriangle size={16} className="text-warning" />
|
||||
</span>
|
||||
<div>
|
||||
<h1 className="font-heading text-xl font-bold text-foreground">Escalation Queue</h1>
|
||||
<p className="text-sm text-muted-foreground">Sessions from your team waiting for pickup</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{count !== null && count > 0
|
||||
? `${count} session${count !== 1 ? 's' : ''} waiting for pickup`
|
||||
: 'Sessions from your team waiting for pickup'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<EscalationQueue />
|
||||
<EscalationQueue onCountChange={setCount} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user