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:
chihlasm
2026-03-30 00:34:38 +00:00
parent 37179096b0
commit 9ce4a8bc8e
3 changed files with 576 additions and 578 deletions

View File

@@ -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>
)
}