chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: migrate remaining components to Design System v4

Browse Source 
111 files across 14 directories: common, tree-editor, kb-accelerator,
copilot, assistant, analytics, library, procedural, procedural-editor,
public, script-editor, ui, admin, step-library.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 02:18:15 -04:00
parent 858f890ed3
commit d1a56f0529
111 changed files with 1330 additions and 1330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/components/analytics/FlowQualityTable.tsx
View File

@@ -13,7 +13,7 @@ type SortColumn = 'name' | 'usage_count' | 'success_rate' | 'last_matched_at' |
type SortDir = 'asc' | 'desc'
const TYPE_LABELS: Record<string, { label: string; color: string }> = {
troubleshooting: { label: 'Troubleshooting', color: 'text-primary' },
troubleshooting: { label: 'Troubleshooting', color: 'text-[#22d3ee]' },
procedural: { label: 'Project', color: 'text-amber-400' },
maintenance: { label: 'Maintenance', color: 'text-blue-400' },
}
@@ -33,7 +33,7 @@ function formatRelativeTime(dateStr: string | null): string {
}
function rateColor(value: number | null): string {
if (value === null) return 'text-muted-foreground'
if (value === null) return 'text-[#848b9b]'
if (value > 75) return 'text-emerald-400'
if (value >= 50) return 'text-amber-400'
return 'text-rose-500'
@@ -110,9 +110,9 @@ export default function FlowQualityTable({ data }: FlowQualityTableProps) {
if (data.flows.length === 0) {
return (
<div className="glass-card-static p-3 sm:p-5">
<div className="card-flat p-3 sm:p-5">
<div className="flex items-center justify-center min-h-[200px]">
<p className="text-sm text-muted-foreground">
<p className="text-sm text-[#848b9b]">
No flows found for this account. Create your first flow to start tracking quality.
</p>
</div>
@@ -130,20 +130,20 @@ export default function FlowQualityTable({ data }: FlowQualityTableProps) {
]
return (
<div className="glass-card-static p-3 sm:p-5">
<div className="card-flat p-3 sm:p-5">
<div className="mb-4">
<div className="flex items-center gap-2">
<h3 className="font-heading text-sm font-semibold text-foreground">
<h3 className="font-heading text-sm font-semibold text-[#e2e5eb]">
Flow Quality Scores
</h3>
<span className="group relative">
<Info size={14} className="text-muted-foreground cursor-help" />
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 p-2 rounded-lg bg-card border border-border text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10">
<Info size={14} className="text-[#848b9b] cursor-help" />
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 p-2 rounded-lg bg-[#14161d] border border-[#1e2130] text-xs text-[#848b9b] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10">
Quality score combines success rate (50%), AI confidence level (30%), and recent usage (20%). Higher is better.
</div>
</span>
</div>
<p className="text-xs text-muted-foreground mt-1">
<p className="text-xs text-[#848b9b] mt-1">
Performance and usage metrics for your troubleshooting flows
</p>
</div>
@@ -151,7 +151,7 @@ export default function FlowQualityTable({ data }: FlowQualityTableProps) {
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead>
<tr className="border-b border-border">
<tr className="border-b border-[#1e2130]">
{columns.map((col) => {
const isActive = sortCol === col.key
const SortIcon = isActive
@@ -160,7 +160,7 @@ export default function FlowQualityTable({ data }: FlowQualityTableProps) {
return (
<th
key={col.key}
className="text-left py-2 px-2 font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground cursor-pointer select-none hover:text-foreground transition-colors"
className="text-left py-2 px-2 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] cursor-pointer select-none hover:text-[#e2e5eb] transition-colors"
onClick={() => handleSort(col.key)}
title={col.title}
>
@@ -207,7 +207,7 @@ function FlowRow({
return (
<tr
className={cn(
'border-b border-border/50 hover:bg-card/30 transition-colors',
'border-b border-[#1e2130]/50 hover:bg-[#14161d]/30 transition-colors',
isTopPerformer && 'border-l-2 border-l-emerald-400',
needsAttention && 'border-l-2 border-l-rose-500',
)}
@@ -217,15 +217,15 @@ function FlowRow({
<div className="flex items-center gap-2">
<Link
to={getTreeEditorPath(flow.flow_id, flow.tree_type)}
className="text-foreground hover:text-primary transition-colors font-medium truncate max-w-[200px]"
className="text-[#e2e5eb] hover:text-[#22d3ee] transition-colors font-medium truncate max-w-[200px]"
>
{flow.name}
</Link>
<span className={cn('font-label text-[0.5rem] uppercase tracking-wider ml-2 shrink-0', TYPE_LABELS[flow.tree_type]?.color || 'text-muted-foreground')}>
<span className={cn('font-sans text-xs text-[0.5rem] uppercase tracking-wider ml-2 shrink-0', TYPE_LABELS[flow.tree_type]?.color || 'text-[#848b9b]')}>
{TYPE_LABELS[flow.tree_type]?.label || flow.tree_type}
</span>
{needsAttention && (
<span className="shrink-0 bg-amber-400/10 text-amber-400 font-label text-[0.625rem] px-1.5 py-0.5 rounded">
<span className="shrink-0 bg-amber-400/10 text-amber-400 font-sans text-xs text-[0.625rem] px-1.5 py-0.5 rounded">
Needs attention
</span>
)}
@@ -233,7 +233,7 @@ function FlowRow({
</td>
{/* Usage */}
<td className="py-2.5 px-2 text-foreground">{flow.usage_count}</td>
<td className="py-2.5 px-2 text-[#e2e5eb]">{flow.usage_count}</td>
{/* Success Rate */}
<td className={cn('py-2.5 px-2', rateColor(flow.success_rate))}>
@@ -241,7 +241,7 @@ function FlowRow({
</td>
{/* Last Used */}
<td className="py-2.5 px-2 text-muted-foreground">
<td className="py-2.5 px-2 text-[#848b9b]">
{formatRelativeTime(flow.last_matched_at)}
</td>
@@ -259,7 +259,7 @@ function FlowRow({
style={{ width: `${flow.quality_score * 100}%` }}
/>
</div>
<span className="text-xs text-foreground">
<span className="text-xs text-[#e2e5eb]">
{(flow.quality_score * 100).toFixed(0)}
</span>
</div>