wooo/awoooi
1
1
Fork 0
Code Issues 2 Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

feat(ui): UI/UX sweep for all P2 panels (Option A - Light Mode Glassmorphism)

Browse Source
This commit is contained in:
Your Name
2026-07-04 11:52:14 +08:00
parent a0a5e850e1
commit 25835e065e
11 changed files with 1016 additions and 1172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
apps/web/src/components/errors/error-overview-card.tsx
View File

@@ -4,15 +4,7 @@
* ErrorOverviewCard - #41 錯誤統計卡片
* =====================================
* Phase 10: Sentry + OpenClaw + UI 整合
*
* Nothing.tech 視覺規範:
* - 純白底色 (bg-white)
* - 極細淺灰邊框 (border border-gray-200)
* - 無圓角或微圓角 (rounded-sm)
* - 嚴禁陰影 (shadow-none)
*
* 建立: 2026-03-26 (台北時區)
* 建立者: Claude Code (#41 Error UI)
* 2026-07-04 Codex: UI/UX 全面升級 (Option A 明亮模式)
*/
import { useTranslations } from 'next-intl'
@@ -20,10 +12,6 @@ import { cn } from '@/lib/utils'
import { AlertTriangle, Bug, Clock, TrendingUp, TrendingDown, Minus } from 'lucide-react'
import type { ErrorStatsResponse } from '@/lib/api-client'
// =============================================================================
// Component Props
// =============================================================================
interface ErrorOverviewCardProps {
stats: ErrorStatsResponse | null
loading?: boolean
@@ -32,10 +20,6 @@ interface ErrorOverviewCardProps {
className?: string
}
// =============================================================================
// Component
// =============================================================================
export function ErrorOverviewCard({
stats,
loading = false,
@@ -45,135 +29,116 @@ export function ErrorOverviewCard({
}: ErrorOverviewCardProps) {
const t = useTranslations('errors')
// Loading state
if (loading) {
return (
<div className={cn(
'bg-white border border-gray-200 rounded-sm p-4',
className
)}>
<div className="animate-pulse space-y-3">
<div className="h-4 bg-gray-200 rounded w-1/3" />
<div className={cn('overflow-hidden rounded-xl border border-[#e0ddd4] bg-white p-5', className)}>
<div className="animate-pulse space-y-4">
<div className="h-4 w-1/3 rounded bg-[#e0ddd4]" />
<div className="grid grid-cols-2 gap-4">
<div className="h-12 bg-gray-100 rounded" />
<div className="h-12 bg-gray-100 rounded" />
<div className="h-16 rounded bg-[#faf9f3]" />
<div className="h-16 rounded bg-[#faf9f3]" />
</div>
<div className="grid grid-cols-2 gap-4">
<div className="h-12 bg-gray-100 rounded" />
<div className="h-12 bg-gray-100 rounded" />
<div className="h-16 rounded bg-[#faf9f3]" />
<div className="h-16 rounded bg-[#faf9f3]" />
</div>
</div>
</div>
)
}
// Error state
if (error) {
return (
<div className={cn(
'bg-white border border-red-200 rounded-sm p-4',
className
)}>
<div className="flex items-center gap-2 text-red-600">
<AlertTriangle className="h-4 w-4" />
<div className={cn('overflow-hidden rounded-xl border border-[#e2a29b] bg-[#fff1f0] p-5 text-[#9f2f25]', className)}>
<div className="flex items-start gap-2 font-semibold">
<AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
<span className="text-sm">{error}</span>
</div>
</div>
)
}
// Empty state
if (!stats) {
return (
<div className={cn(
'bg-white border border-gray-200 rounded-sm p-4',
className
)}>
<div className="text-center text-gray-500 py-4">
<Bug className="h-8 w-8 mx-auto mb-2 opacity-50" />
<p className="text-sm">{t('noData')}</p>
<div className={cn('overflow-hidden rounded-xl border border-[#e0ddd4] bg-white p-5', className)}>
<div className="py-8 text-center text-[#77736a]">
<Bug className="mx-auto mb-3 h-8 w-8 opacity-40" />
<p className="text-sm font-semibold">{t('noData')}</p>
</div>
</div>
)
}
// Trend indicator
const TrendIcon = changePercent > 0 ? TrendingUp : changePercent < 0 ? TrendingDown : Minus
const trendColor = changePercent > 0 ? 'text-red-500' : changePercent < 0 ? 'text-green-500' : 'text-gray-400'
const trendColor = changePercent > 0 ? 'text-[#9f2f25]' : changePercent < 0 ? 'text-[#17602a]' : 'text-[#77736a]'
return (
<div className={cn(
'bg-white border border-gray-200 rounded-sm p-4',
className
)}>
{/* Header */}
<div className="flex items-center justify-between mb-4">
<div className={cn('overflow-hidden rounded-xl border border-[#e0ddd4] bg-white p-5 shadow-sm', className)}>
<div className="mb-5 flex items-center justify-between">
<div className="flex items-center gap-2">
<Bug className="h-4 w-4 text-gray-600" />
<h3 className="text-sm font-medium text-gray-900">{t('overview')}</h3>
<Bug className="h-4 w-4 text-[#77736a]" />
<h3 className="font-semibold text-[#141413]">{t('overview')}</h3>
</div>
{changePercent !== 0 && (
<div className={cn('flex items-center gap-1 text-xs', trendColor)}>
<TrendIcon className="h-3 w-3" />
<div className={cn('flex items-center gap-1 font-mono text-xs font-bold tracking-widest', trendColor)}>
<TrendIcon className="h-3.5 w-3.5" />
<span>{Math.abs(changePercent).toFixed(1)}%</span>
</div>
)}
</div>
{/* Stats Grid */}
<div className="grid grid-cols-2 gap-3">
<div className="grid grid-cols-2 gap-px overflow-hidden rounded-lg border border-[#e0ddd4] bg-[#e0ddd4]">
{/* Unresolved Issues */}
<div className="bg-red-50 border border-red-100 rounded-sm p-3">
<div className="text-2xl font-semibold text-red-700">
<div className="bg-white p-4 transition-colors hover:bg-[#fff1f0]">
<div className="font-mono text-2xl font-bold tabular-nums text-[#9f2f25]">
{stats.unresolved_issues}
</div>
<div className="text-xs text-red-600 mt-1">
<div className="mt-1 text-[10px] font-semibold uppercase tracking-wider text-[#9f2f25]">
{t('unresolvedIssues')}
</div>
</div>
{/* 24h Errors */}
<div className="bg-orange-50 border border-orange-100 rounded-sm p-3">
<div className="flex items-center gap-1">
<Clock className="h-3 w-3 text-orange-500" />
<span className="text-2xl font-semibold text-orange-700">
<div className="bg-white p-4 transition-colors hover:bg-[#fff7e8]">
<div className="flex items-center gap-1.5">
<Clock className="h-4 w-4 text-[#8a5a08]" />
<span className="font-mono text-2xl font-bold tabular-nums text-[#8a5a08]">
{stats.error_count_24h}
</span>
</div>
<div className="text-xs text-orange-600 mt-1">
<div className="mt-1 text-[10px] font-semibold uppercase tracking-wider text-[#8a5a08]">
{t('errors24h')}
</div>
</div>
{/* Critical Count */}
<div className="bg-purple-50 border border-purple-100 rounded-sm p-3">
<div className="flex items-center gap-1">
<AlertTriangle className="h-3 w-3 text-purple-500" />
<span className="text-2xl font-semibold text-purple-700">
<div className="bg-white p-4 transition-colors hover:bg-[#f4f1ff]">
<div className="flex items-center gap-1.5">
<AlertTriangle className="h-4 w-4 text-[#6d28d9]" />
<span className="font-mono text-2xl font-bold tabular-nums text-[#6d28d9]">
{stats.critical_count}
</span>
</div>
<div className="text-xs text-purple-600 mt-1">
<div className="mt-1 text-[10px] font-semibold uppercase tracking-wider text-[#6d28d9]">
{t('criticalErrors')}
</div>
</div>
{/* Total Issues */}
<div className="bg-gray-50 border border-gray-100 rounded-sm p-3">
<div className="text-2xl font-semibold text-gray-700">
<div className="bg-white p-4 transition-colors hover:bg-[#faf9f3]">
<div className="font-mono text-2xl font-bold tabular-nums text-[#141413]">
{stats.total_issues}
</div>
<div className="text-xs text-gray-600 mt-1">
<div className="mt-1 text-[10px] font-semibold uppercase tracking-wider text-[#77736a]">
{t('totalIssues')}
</div>
</div>
</div>
{/* Projects */}
{stats.projects.length > 0 && (
<div className="mt-3 pt-3 border-t border-gray-100">
<div className="text-xs text-gray-500">
{t('projects')}: {stats.projects.join(', ')}
<div className="mt-4 border-t border-[#e0ddd4] pt-4">
<div className="font-mono text-[10px] font-bold uppercase tracking-wider text-[#77736a]">
{t('projects')}: <span className="text-[#141413]">{stats.projects.join(', ')}</span>
</div>
</div>
)}

130
apps/web/src/components/errors/error-trend-chart.tsx
View File

@@ -4,15 +4,7 @@
* ErrorTrendChart - #43 錯誤趨勢圖表
* ===================================
* Phase 10: Sentry + OpenClaw + UI 整合
*
* Nothing.tech 視覺規範:
* - 純白底色 (bg-white)
* - 極細淺灰邊框 (border border-gray-200)
* - 無圓角或微圓角 (rounded-sm)
* - 嚴禁陰影 (shadow-none)
*
* 建立: 2026-03-26 (台北時區)
* 建立者: Claude Code (#43 Error UI)
* 2026-07-04 Codex: UI/UX 全面升級 (Option A 明亮模式)
*/
import { useMemo } from 'react'
@@ -21,10 +13,6 @@ import { cn } from '@/lib/utils'
import { TrendingUp, TrendingDown, Minus, Activity } from 'lucide-react'
import type { ErrorTrendResponse, ErrorTrendPoint } from '@/lib/api-client'
// =============================================================================
// Component Props
// =============================================================================
interface ErrorTrendChartProps {
data: ErrorTrendResponse | null
loading?: boolean
@@ -34,13 +22,9 @@ interface ErrorTrendChartProps {
className?: string
}
// =============================================================================
// Sparkline Component
// =============================================================================
function Sparkline({
data,
width = 200,
width = 280,
height = 60,
}: {
data: ErrorTrendPoint[]
@@ -81,21 +65,19 @@ function Sparkline({
if (data.length === 0) {
return (
<svg width={width} height={height} className="text-gray-300">
<svg width="100%" height={height} viewBox={`0 0 ${width} ${height}`} className="text-[#e0ddd4] preserve-aspect-ratio-none">
<line x1="0" y1={height / 2} x2={width} y2={height / 2} stroke="currentColor" strokeDasharray="4" />
</svg>
)
}
return (
<svg width={width} height={height} className="overflow-visible">
{/* Area fill */}
<svg width="100%" height={height} viewBox={`0 0 ${width} ${height}`} className="overflow-visible preserve-aspect-ratio-none">
<path
d={areaPath}
fill="url(#gradient)"
fillOpacity="0.3"
/>
{/* Line */}
<path
d={path}
fill="none"
@@ -103,23 +85,18 @@ function Sparkline({
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="text-red-500"
className="text-[#d97757]"
/>
{/* Gradient definition */}
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="rgb(239 68 68)" stopOpacity="0.4" />
<stop offset="100%" stopColor="rgb(239 68 68)" stopOpacity="0" />
<stop offset="0%" stopColor="#d97757" stopOpacity="0.4" />
<stop offset="100%" stopColor="#d97757" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
)
}
// =============================================================================
// Period Selector Component
// =============================================================================
function PeriodSelector({
activePeriod,
onChange,
@@ -134,16 +111,16 @@ function PeriodSelector({
]
return (
<div className="flex items-center gap-1 bg-gray-100 rounded p-0.5">
<div className="flex items-center gap-1 rounded-lg border border-[#e0ddd4] bg-[#faf9f3] p-0.5">
{periods.map(({ value, label }) => (
<button
key={value}
onClick={() => onChange?.(value)}
className={cn(
'px-2 py-0.5 text-xs rounded transition-colors',
'px-2.5 py-1 font-mono text-[10px] font-bold tracking-widest transition-colors rounded-md',
activePeriod === value
? 'bg-white text-gray-900 shadow-sm'
: 'text-gray-500 hover:text-gray-700',
? 'bg-white text-[#141413] shadow-sm border border-[#e0ddd4]'
: 'text-[#77736a] hover:text-[#141413]'
)}
>
{label}
@@ -153,10 +130,6 @@ function PeriodSelector({
)
}
// =============================================================================
// Main Component
// =============================================================================
export function ErrorTrendChart({
data,
loading = false,
@@ -167,36 +140,28 @@ export function ErrorTrendChart({
}: ErrorTrendChartProps) {
const t = useTranslations('errors')
// Loading state
if (loading) {
return (
<div className={cn(
'bg-white border border-gray-200 rounded-sm p-4',
className
)}>
<div className="animate-pulse space-y-3">
<div className={cn('overflow-hidden rounded-xl border border-[#e0ddd4] bg-white p-5', className)}>
<div className="animate-pulse space-y-4">
<div className="flex items-center justify-between">
<div className="h-4 bg-gray-200 rounded w-1/4" />
<div className="h-5 bg-gray-200 rounded w-16" />
<div className="h-4 w-1/4 rounded bg-[#e0ddd4]" />
<div className="h-6 w-24 rounded bg-[#faf9f3]" />
</div>
<div className="h-16 bg-gray-100 rounded" />
<div className="h-16 rounded bg-[#faf9f3]" />
<div className="flex items-center justify-between">
<div className="h-6 bg-gray-200 rounded w-16" />
<div className="h-4 bg-gray-200 rounded w-24" />
<div className="h-6 w-16 rounded bg-[#e0ddd4]" />
<div className="h-4 w-24 rounded bg-[#faf9f3]" />
</div>
</div>
</div>
)
}
// Error state
if (error) {
return (
<div className={cn(
'bg-white border border-red-200 rounded-sm p-4',
className
)}>
<div className="flex items-center gap-2 text-red-600">
<div className={cn('overflow-hidden rounded-xl border border-[#e2a29b] bg-[#fff1f0] p-5 text-[#9f2f25]', className)}>
<div className="flex items-center gap-2 font-semibold">
<Activity className="h-4 w-4" />
<span className="text-sm">{error}</span>
</div>
@@ -204,68 +169,49 @@ export function ErrorTrendChart({
)
}
// Empty state
if (!data) {
return (
<div className={cn(
'bg-white border border-gray-200 rounded-sm p-4',
className
)}>
<div className="text-center text-gray-500 py-4">
<Activity className="h-8 w-8 mx-auto mb-2 opacity-50" />
<p className="text-sm">{t('noTrendData')}</p>
<div className={cn('overflow-hidden rounded-xl border border-[#e0ddd4] bg-white p-5', className)}>
<div className="py-8 text-center text-[#77736a]">
<Activity className="mx-auto mb-3 h-8 w-8 opacity-40" />
<p className="text-sm font-semibold">{t('noTrendData')}</p>
</div>
</div>
)
}
// Trend indicator
const TrendIcon = data.change_percent > 0 ? TrendingUp : data.change_percent < 0 ? TrendingDown : Minus
const trendColor = data.change_percent > 0 ? 'text-red-500' : data.change_percent < 0 ? 'text-green-500' : 'text-gray-400'
const trendBg = data.change_percent > 0 ? 'bg-red-50' : data.change_percent < 0 ? 'bg-green-50' : 'bg-gray-50'
const trendColor = data.change_percent > 0 ? 'text-[#9f2f25]' : data.change_percent < 0 ? 'text-[#17602a]' : 'text-[#77736a]'
const trendBg = data.change_percent > 0 ? 'bg-[#fff1f0]' : data.change_percent < 0 ? 'bg-[#f0faf2]' : 'bg-[#faf9f3]'
const trendBorder = data.change_percent > 0 ? 'border-[#e2a29b]' : data.change_percent < 0 ? 'border-[#8fc29a]' : 'border-[#e0ddd4]'
return (
<div className={cn(
'bg-white border border-gray-200 rounded-sm p-4',
className
)}>
{/* Header */}
<div className="flex items-center justify-between mb-3">
<div className={cn('overflow-hidden rounded-xl border border-[#e0ddd4] bg-white p-5 shadow-sm', className)}>
<div className="mb-4 flex items-center justify-between">
<div className="flex items-center gap-2">
<Activity className="h-4 w-4 text-gray-600" />
<h3 className="text-sm font-medium text-gray-900">{t('errorTrend')}</h3>
<Activity className="h-4 w-4 text-[#77736a]" />
<h3 className="font-semibold text-[#141413]">{t('errorTrend')}</h3>
</div>
<PeriodSelector
activePeriod={activePeriod}
onChange={onPeriodChange}
/>
<PeriodSelector activePeriod={activePeriod} onChange={onPeriodChange} />
</div>
{/* Chart */}
<div className="py-2">
<Sparkline data={data.data} width={280} height={60} />
</div>
{/* Footer */}
<div className="flex items-center justify-between mt-2 pt-2 border-t border-gray-100">
{/* Total Count */}
<div className="mt-4 flex items-center justify-between border-t border-[#e0ddd4] pt-4">
<div>
<div className="text-xl font-semibold text-gray-900">
<div className="font-mono text-2xl font-bold tabular-nums text-[#141413]">
{data.total_count.toLocaleString()}
</div>
<div className="text-xs text-gray-500">
<div className="text-[10px] font-semibold uppercase tracking-wider text-[#77736a]">
{t('totalErrors', { period: data.period })}
</div>
</div>
{/* Change Percent */}
<div className={cn(
'flex items-center gap-1 px-2 py-1 rounded',
trendBg,
trendColor,
)}>
<TrendIcon className="h-4 w-4" />
<span className="text-sm font-medium">
<div className={cn('flex items-center gap-1.5 rounded border px-2.5 py-1', trendBg, trendColor, trendBorder)}>
<TrendIcon className="h-3.5 w-3.5" />
<span className="font-mono text-[11px] font-bold tracking-widest">
{data.change_percent > 0 ? '+' : ''}{data.change_percent.toFixed(1)}%
</span>
</div>

200
apps/web/src/components/errors/recent-issues-list.tsx
View File

@@ -4,15 +4,7 @@
* RecentIssuesList - #42 近期錯誤列表
* ====================================
* Phase 10: Sentry + OpenClaw + UI 整合
*
* Nothing.tech 視覺規範:
* - 純白底色 (bg-white)
* - 極細淺灰邊框 (border border-gray-200)
* - 無圓角或微圓角 (rounded-sm)
* - 嚴禁陰影 (shadow-none)
*
* 建立: 2026-03-26 (台北時區)
* 建立者: Claude Code (#42 Error UI)
* 2026-07-04 Codex: UI/UX 全面升級 (Option A 明亮模式)
*/
import { useState } from 'react'
@@ -22,41 +14,33 @@ import { AlertTriangle, Bug, Clock, Users, ChevronRight, Sparkles, ExternalLink
import type { SentryIssue, ErrorAnalysisResponse } from '@/lib/api-client'
import { apiClient } from '@/lib/api-client'
// =============================================================================
// Level Config
// =============================================================================
const LEVEL_CONFIG = {
fatal: {
color: 'text-red-700',
bgColor: 'bg-red-50',
borderColor: 'border-red-200',
color: 'text-[#9f2f25]',
bgColor: 'bg-[#fff1f0]',
borderColor: 'border-[#e2a29b]',
icon: AlertTriangle,
},
error: {
color: 'text-orange-700',
bgColor: 'bg-orange-50',
borderColor: 'border-orange-200',
color: 'text-[#8a5a08]',
bgColor: 'bg-[#fff7e8]',
borderColor: 'border-[#d9b36f]',
icon: Bug,
},
warning: {
color: 'text-amber-700',
bgColor: 'bg-amber-50',
borderColor: 'border-amber-200',
color: 'text-[#8a5a08]',
bgColor: 'bg-[#faf9f3]',
borderColor: 'border-[#e0ddd4]',
icon: AlertTriangle,
},
info: {
color: 'text-blue-700',
bgColor: 'bg-blue-50',
borderColor: 'border-blue-200',
color: 'text-[#4A90D9]',
bgColor: 'bg-[#f0f6ff]',
borderColor: 'border-[#c7dcf7]',
icon: Bug,
},
} as const
// =============================================================================
// Component Props
// =============================================================================
interface RecentIssuesListProps {
issues: SentryIssue[]
loading?: boolean
@@ -65,10 +49,6 @@ interface RecentIssuesListProps {
className?: string
}
// =============================================================================
// Issue Item Component
// =============================================================================
function IssueItem({
issue,
onClick,
@@ -83,7 +63,6 @@ function IssueItem({
const levelConfig = LEVEL_CONFIG[issue.level] || LEVEL_CONFIG.error
const LevelIcon = levelConfig.icon
// Format relative time (i18n compliant)
const lastSeen = new Date(issue.last_seen)
const now = new Date()
const diffMs = now.getTime() - lastSeen.getTime()
@@ -116,116 +95,104 @@ function IssueItem({
return (
<div
onClick={onClick}
className={cn(
'border-b border-gray-100 last:border-b-0 p-3 hover:bg-gray-50 cursor-pointer transition-colors',
)}
className="group cursor-pointer border-b border-[#e0ddd4] p-4 transition-colors last:border-b-0 hover:bg-[#faf9f3]"
>
{/* Main Row */}
<div className="flex items-start gap-3">
{/* Level Badge */}
<div className="flex items-start gap-4">
<div className={cn(
'px-1.5 py-0.5 rounded text-xs font-medium',
'inline-flex items-center gap-1.5 rounded border px-2 py-0.5 font-mono text-[10px] font-bold uppercase tracking-widest',
levelConfig.bgColor,
levelConfig.color,
levelConfig.borderColor
)}>
<LevelIcon className="h-3 w-3 inline mr-1" />
<LevelIcon className="h-3 w-3" />
{issue.level}
</div>
{/* Content */}
<div className="flex-1 min-w-0">
{/* Title */}
<div className="text-sm font-medium text-gray-900 truncate">
<div className="min-w-0 flex-1">
<div className="truncate font-semibold text-[#141413]">
{issue.title}
</div>
{/* Culprit */}
{issue.culprit && (
<div className="text-xs text-gray-500 truncate mt-0.5">
<div className="mt-1 truncate font-mono text-[11px] text-[#77736a]">
{issue.culprit}
</div>
)}
{/* Meta */}
<div className="flex items-center gap-3 mt-1.5 text-xs text-gray-500">
<span className="flex items-center gap-1">
<Bug className="h-3 w-3" />
<div className="mt-3 flex flex-wrap items-center gap-4 text-[11px] font-semibold uppercase tracking-wider text-[#77736a]">
<span className="flex items-center gap-1.5">
<Bug className="h-3.5 w-3.5" />
{issue.count.toLocaleString()}
</span>
<span className="flex items-center gap-1">
<Users className="h-3 w-3" />
<span className="flex items-center gap-1.5">
<Users className="h-3.5 w-3.5" />
{issue.user_count}
</span>
<span className="flex items-center gap-1">
<Clock className="h-3 w-3" />
<span className="flex items-center gap-1.5">
<Clock className="h-3.5 w-3.5" />
{timeAgo}
</span>
<span className="text-gray-400">
<span className="font-mono text-[#b0ad9f]">
{issue.short_id}
</span>
</div>
</div>
{/* Actions */}
<div className="flex items-center gap-2">
{/* AI Analyze Button */}
<div className="flex items-center gap-3">
<button
onClick={handleAnalyze}
disabled={analyzing}
className={cn(
'flex items-center gap-1 px-2 py-1 text-xs rounded',
'bg-purple-50 text-purple-700 hover:bg-purple-100',
'border border-purple-200 transition-colors',
analyzing && 'opacity-50 cursor-not-allowed',
'flex items-center gap-1.5 rounded-lg border border-[#e0ddd4] bg-white px-2.5 py-1.5 text-xs font-semibold text-[#141413] transition-colors',
'hover:border-[#6d28d9] hover:bg-[#f4f1ff] hover:text-[#6d28d9]',
analyzing && 'cursor-not-allowed opacity-50'
)}
>
<Sparkles className={cn('h-3 w-3', analyzing && 'animate-pulse')} />
{analyzing ? t('analyzing') : t('aiAnalyze')}
<Sparkles className={cn('h-3.5 w-3.5', analyzing && 'animate-pulse')} />
<span className="hidden sm:inline">{analyzing ? t('analyzing') : t('aiAnalyze')}</span>
</button>
{/* External Link */}
{issue.permalink && (
<a
href={issue.permalink}
target="_blank"
rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()}
className="text-gray-400 hover:text-gray-600"
className="text-[#77736a] transition-colors hover:text-[#4A90D9]"
>
<ExternalLink className="h-4 w-4" />
</a>
)}
<ChevronRight className="h-4 w-4 text-gray-400" />
<ChevronRight className="h-4 w-4 text-[#b0ad9f] transition-transform group-hover:translate-x-0.5 group-hover:text-[#141413]" />
</div>
</div>
{/* AI Analysis Result */}
{analysis && analysis.status === 'completed' && analysis.analysis && (
<div className="mt-3 p-3 bg-purple-50 border border-purple-100 rounded-sm">
<div className="flex items-center gap-2 mb-2">
<Sparkles className="h-4 w-4 text-purple-600" />
<span className="text-sm font-medium text-purple-800">{t('aiAnalysis')}</span>
<div className="mt-4 rounded-lg border border-[#d4c3ff] bg-[#f4f1ff] p-4">
<div className="mb-3 flex items-center gap-2">
<Sparkles className="h-4 w-4 text-[#6d28d9]" />
<span className="text-sm font-bold text-[#4c1d95]">{t('aiAnalysis')}</span>
<span className={cn(
'text-xs px-1.5 py-0.5 rounded',
analysis.analysis.severity === 'CRITICAL' ? 'bg-red-100 text-red-700' :
analysis.analysis.severity === 'HIGH' ? 'bg-orange-100 text-orange-700' :
analysis.analysis.severity === 'MEDIUM' ? 'bg-amber-100 text-amber-700' :
'bg-gray-100 text-gray-700'
'rounded border px-2 py-0.5 font-mono text-[10px] font-bold uppercase tracking-widest',
analysis.analysis.severity === 'CRITICAL' ? 'border-[#e2a29b] bg-[#fff1f0] text-[#9f2f25]' :
analysis.analysis.severity === 'HIGH' ? 'border-[#d9b36f] bg-[#fff7e8] text-[#8a5a08]' :
analysis.analysis.severity === 'MEDIUM' ? 'border-[#d9b36f] bg-[#faf9f3] text-[#8a5a08]' :
'border-[#e0ddd4] bg-white text-[#5f5b52]'
)}>
{analysis.analysis.severity}
</span>
</div>
<div className="text-sm text-purple-900 mb-2">
<strong>{t('rootCause')}:</strong> {analysis.analysis.root_cause}
<div className="mb-2 text-sm text-[#4c1d95]">
<strong className="font-semibold">{t('rootCause')}:</strong> {analysis.analysis.root_cause}
</div>
<div className="text-sm text-purple-800">
<strong>{t('fixSummary')}:</strong> {analysis.analysis.fix_recommendation.summary}
<div className="text-sm text-[#5b21b6]">
<strong className="font-semibold">{t('fixSummary')}:</strong> {analysis.analysis.fix_recommendation.summary}
</div>
<div className="mt-2 text-xs text-purple-600">
<div className="mt-3 font-mono text-[10px] font-bold uppercase tracking-wider text-[#7c3aed]">
{t('category')}: {analysis.analysis.category} | {t('confidence')}: {(analysis.analysis.confidence * 100).toFixed(0)}%
</div>
</div>
@@ -234,10 +201,6 @@ function IssueItem({
)
}
// =============================================================================
// Main Component
// =============================================================================
export function RecentIssuesList({
issues,
loading = false,
@@ -247,24 +210,20 @@ export function RecentIssuesList({
}: RecentIssuesListProps) {
const t = useTranslations('errors')
// Loading state
if (loading) {
return (
<div className={cn(
'bg-white border border-gray-200 rounded-sm',
className
)}>
<div className="p-3 border-b border-gray-100">
<div className="h-4 bg-gray-200 rounded w-1/4 animate-pulse" />
<div className={cn('overflow-hidden rounded-xl border border-[#e0ddd4] bg-white', className)}>
<div className="border-b border-[#e0ddd4] p-4">
<div className="h-4 w-1/4 animate-pulse rounded bg-[#e0ddd4]" />
</div>
<div className="divide-y divide-gray-100">
<div className="divide-y divide-[#e0ddd4]">
{[1, 2, 3].map((i) => (
<div key={i} className="p-3 animate-pulse">
<div className="flex items-start gap-3">
<div className="h-5 w-12 bg-gray-200 rounded" />
<div className="flex-1 space-y-2">
<div className="h-4 bg-gray-200 rounded w-3/4" />
<div className="h-3 bg-gray-100 rounded w-1/2" />
<div key={i} className="p-4">
<div className="flex items-start gap-4">
<div className="h-6 w-16 animate-pulse rounded bg-[#e0ddd4]" />
<div className="flex-1 space-y-3">
<div className="h-4 w-3/4 animate-pulse rounded bg-[#faf9f3]" />
<div className="h-3 w-1/2 animate-pulse rounded bg-[#faf9f3]" />
</div>
</div>
</div>
@@ -274,14 +233,10 @@ export function RecentIssuesList({
)
}
// Error state
if (error) {
return (
<div className={cn(
'bg-white border border-red-200 rounded-sm p-4',
className
)}>
<div className="flex items-center gap-2 text-red-600">
<div className={cn('overflow-hidden rounded-xl border border-[#e2a29b] bg-[#fff1f0] p-5 text-[#9f2f25]', className)}>
<div className="flex items-center gap-2 font-semibold">
<AlertTriangle className="h-4 w-4" />
<span className="text-sm">{error}</span>
</div>
@@ -289,37 +244,28 @@ export function RecentIssuesList({
)
}
// Empty state
if (issues.length === 0) {
return (
<div className={cn(
'bg-white border border-gray-200 rounded-sm p-6',
className
)}>
<div className="text-center text-gray-500">
<Bug className="h-8 w-8 mx-auto mb-2 opacity-50" />
<p className="text-sm">{t('noIssues')}</p>
<div className={cn('overflow-hidden rounded-xl border border-[#e0ddd4] bg-white p-5', className)}>
<div className="py-12 text-center text-[#77736a]">
<Bug className="mx-auto mb-3 h-8 w-8 opacity-40" />
<p className="text-sm font-semibold">{t('noIssues')}</p>
</div>
</div>
)
}
return (
<div className={cn(
'bg-white border border-gray-200 rounded-sm',
className
)}>
{/* Header */}
<div className="px-3 py-2 border-b border-gray-100 flex items-center justify-between">
<div className={cn('overflow-hidden rounded-xl border border-[#e0ddd4] bg-white shadow-sm', className)}>
<div className="flex items-center justify-between border-b border-[#e0ddd4] bg-[#faf9f3] px-5 py-4">
<div className="flex items-center gap-2">
<Bug className="h-4 w-4 text-gray-600" />
<h3 className="text-sm font-medium text-gray-900">{t('recentIssues')}</h3>
<span className="text-xs text-gray-500">({issues.length})</span>
<Bug className="h-4 w-4 text-[#77736a]" />
<h3 className="font-semibold text-[#141413]">{t('recentIssues')}</h3>
<span className="font-mono text-[11px] font-bold text-[#77736a]">({issues.length})</span>
</div>
</div>
{/* Issues List */}
<div className="max-h-96 overflow-y-auto">
<div className="max-h-[500px] overflow-y-auto">
{issues.map((issue) => (
<IssueItem
key={issue.id}

181
apps/web/src/components/errors/ux-audit-card.tsx
View File

@@ -4,20 +4,7 @@
* UXAuditCard - #126 Session Replay / UX Audit 卡片
* ==================================================
* Phase 19: Sentry Session Replay 前端整合
*
* 功能:
* - 顯示 UX 健康度評分
* - 列出有錯誤的 Replay 連結
* - 顯示憤怒/死亡點擊統計
*
* Nothing.tech 視覺規範:
* - 純白底色 (bg-white)
* - 極細淺灰邊框 (border border-gray-200)
* - 無圓角或微圓角 (rounded-sm)
* - 嚴禁陰影 (shadow-none)
*
* 建立: 2026-03-31 (台北時區)
* 建立者: Claude Code (#126 Replay UI)
* 2026-07-04 Codex: UI/UX 全面升級 (Option A 明亮模式)
*/
import { useTranslations } from 'next-intl'
@@ -32,10 +19,6 @@ import {
} from 'lucide-react'
import type { UXAuditResponse, UXAuditDetail } from '@/lib/api-client'
// =============================================================================
// Component Props
// =============================================================================
interface UXAuditCardProps {
data: UXAuditResponse | null
loading?: boolean
@@ -43,35 +26,27 @@ interface UXAuditCardProps {
className?: string
}
// =============================================================================
// Health Score Config
// =============================================================================
const HEALTH_CONFIG = {
good: {
color: 'text-green-700',
bgColor: 'bg-green-50',
borderColor: 'border-green-200',
color: 'text-[#17602a]',
bgColor: 'bg-[#f0faf2]',
borderColor: 'border-[#8fc29a]',
label: 'good',
},
moderate: {
color: 'text-amber-700',
bgColor: 'bg-amber-50',
borderColor: 'border-amber-200',
color: 'text-[#8a5a08]',
bgColor: 'bg-[#fff7e8]',
borderColor: 'border-[#d9b36f]',
label: 'moderate',
},
poor: {
color: 'text-red-700',
bgColor: 'bg-red-50',
borderColor: 'border-red-200',
color: 'text-[#9f2f25]',
bgColor: 'bg-[#fff1f0]',
borderColor: 'border-[#e2a29b]',
label: 'poor',
},
} as const
// =============================================================================
// Replay Item Component
// =============================================================================
function ReplayItem({ detail }: { detail: UXAuditDetail }) {
const t = useTranslations('errors.uxAudit')
@@ -81,54 +56,49 @@ function ReplayItem({ detail }: { detail: UXAuditDetail }) {
href={detail.url}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-3 p-2 hover:bg-gray-50 rounded-sm transition-colors group"
className="group flex items-center gap-3 p-3 transition-colors hover:bg-[#faf9f3]"
>
<div className="flex-shrink-0">
<Video className="h-4 w-4 text-purple-600" />
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-[#d4c3ff] bg-[#f4f1ff] text-[#6d28d9]">
<Video className="h-4 w-4" />
</div>
<div className="flex-1 min-w-0">
<div className="text-sm font-medium text-gray-900 truncate">
<div className="min-w-0 flex-1">
<div className="truncate text-xs font-semibold text-[#141413]">
{t('replayWithErrors', { count: detail.error_count || 0 })}
</div>
{detail.urls && detail.urls.length > 0 && (
<div className="text-xs text-gray-500 truncate">
<div className="mt-0.5 truncate font-mono text-[10px] text-[#77736a]">
{detail.urls[0]}
</div>
)}
</div>
<ExternalLink className="h-3.5 w-3.5 text-gray-400 group-hover:text-purple-600 transition-colors" />
<ExternalLink className="h-3.5 w-3.5 text-[#b0ad9f] transition-colors group-hover:text-[#6d28d9]" />
</a>
)
}
// UI Error type
return (
<a
href={detail.url}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-3 p-2 hover:bg-gray-50 rounded-sm transition-colors group"
className="group flex items-center gap-3 p-3 transition-colors hover:bg-[#faf9f3]"
>
<div className="flex-shrink-0">
<AlertTriangle className="h-4 w-4 text-orange-600" />
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-[#d9b36f] bg-[#fff7e8] text-[#8a5a08]">
<AlertTriangle className="h-4 w-4" />
</div>
<div className="flex-1 min-w-0">
<div className="text-sm font-medium text-gray-900 truncate">
<div className="min-w-0 flex-1">
<div className="truncate text-xs font-semibold text-[#141413]">
{detail.title || 'UI Error'}
</div>
<div className="text-xs text-gray-500">
<div className="mt-0.5 font-mono text-[10px] text-[#77736a]">
{t('occurrences', { count: detail.count || 0 })}
</div>
</div>
<ExternalLink className="h-3.5 w-3.5 text-gray-400 group-hover:text-orange-600 transition-colors" />
<ExternalLink className="h-3.5 w-3.5 text-[#b0ad9f] transition-colors group-hover:text-[#8a5a08]" />
</a>
)
}
// =============================================================================
// Main Component
// =============================================================================
export function UXAuditCard({
data,
loading = false,
@@ -137,27 +107,25 @@ export function UXAuditCard({
}: UXAuditCardProps) {
const t = useTranslations('errors.uxAudit')
// Loading state
if (loading) {
return (
<div className={cn('bg-white border border-gray-200 rounded-sm', className)}>
<div className="p-3 border-b border-gray-100">
<div className="h-4 bg-gray-200 rounded w-1/3 animate-pulse" />
<div className={cn('overflow-hidden rounded-xl border border-[#e0ddd4] bg-white', className)}>
<div className="border-b border-[#e0ddd4] p-4">
<div className="h-4 w-1/3 animate-pulse rounded bg-[#e0ddd4]" />
</div>
<div className="p-4 space-y-3 animate-pulse">
<div className="h-8 bg-gray-100 rounded w-1/4" />
<div className="h-4 bg-gray-100 rounded w-full" />
<div className="h-4 bg-gray-100 rounded w-3/4" />
<div className="space-y-4 p-5">
<div className="h-10 w-1/4 animate-pulse rounded bg-[#faf9f3]" />
<div className="h-4 w-full animate-pulse rounded bg-[#faf9f3]" />
<div className="h-4 w-3/4 animate-pulse rounded bg-[#faf9f3]" />
</div>
</div>
)
}
// Error state
if (error) {
return (
<div className={cn('bg-white border border-red-200 rounded-sm p-4', className)}>
<div className="flex items-center gap-2 text-red-600">
<div className={cn('overflow-hidden rounded-xl border border-[#e2a29b] bg-[#fff1f0] p-5 text-[#9f2f25]', className)}>
<div className="flex items-center gap-2 font-semibold">
<AlertTriangle className="h-4 w-4" />
<span className="text-sm">{error}</span>
</div>
@@ -165,13 +133,12 @@ export function UXAuditCard({
)
}
// No data state
if (!data) {
return (
<div className={cn('bg-white border border-gray-200 rounded-sm p-6', className)}>
<div className="text-center text-gray-500">
<Video className="h-8 w-8 mx-auto mb-2 opacity-50" />
<p className="text-sm">{t('noData')}</p>
<div className={cn('overflow-hidden rounded-xl border border-[#e0ddd4] bg-white p-5', className)}>
<div className="py-8 text-center text-[#77736a]">
<Video className="mx-auto mb-3 h-8 w-8 opacity-40" />
<p className="text-sm font-semibold">{t('noData')}</p>
</div>
</div>
)
@@ -182,78 +149,72 @@ export function UXAuditCard({
const errorDetails = data.details.filter((d) => d.type === 'ui_error')
return (
<div className={cn('bg-white border border-gray-200 rounded-sm', className)}>
{/* Header */}
<div className="px-3 py-2 border-b border-gray-100 flex items-center justify-between">
<div className={cn('overflow-hidden rounded-xl border border-[#e0ddd4] bg-white shadow-sm', className)}>
<div className="flex items-center justify-between border-b border-[#e0ddd4] bg-[#faf9f3] px-5 py-4">
<div className="flex items-center gap-2">
<Video className="h-4 w-4 text-purple-600" />
<h3 className="text-sm font-medium text-gray-900">{t('title')}</h3>
<Video className="h-4 w-4 text-[#77736a]" />
<h3 className="font-semibold text-[#141413]">{t('title')}</h3>
</div>
<span
className={cn(
'px-2 py-0.5 text-xs font-medium rounded',
'inline-flex rounded border px-2 py-0.5 font-mono text-[10px] font-bold uppercase tracking-widest',
healthConfig.bgColor,
healthConfig.color,
healthConfig.borderColor
)}
>
{t(`health.${healthConfig.label}`)}
</span>
</div>
{/* Stats Grid */}
<div className="grid grid-cols-2 gap-px bg-gray-100 border-b border-gray-100">
{/* Replays with Errors */}
<div className="bg-white p-3">
<div className="grid grid-cols-2 gap-px border-b border-[#e0ddd4] bg-[#e0ddd4]">
<div className="bg-white p-4 transition-colors hover:bg-[#faf9f3]">
<div className="flex items-center gap-2">
<Video className="h-4 w-4 text-purple-500" />
<span className="text-xs text-gray-500">{t('replaysWithErrors')}</span>
<Video className="h-4 w-4 text-[#6d28d9]" />
<span className="text-[10px] font-semibold uppercase tracking-wider text-[#77736a]">{t('replaysWithErrors')}</span>
</div>
<div className="mt-1 text-xl font-semibold text-gray-900">
<div className="mt-2 font-mono text-2xl font-bold tabular-nums text-[#141413]">
{data.replays_with_errors}
</div>
</div>
{/* UI Errors */}
<div className="bg-white p-3">
<div className="bg-white p-4 transition-colors hover:bg-[#faf9f3]">
<div className="flex items-center gap-2">
<AlertTriangle className="h-4 w-4 text-orange-500" />
<span className="text-xs text-gray-500">{t('uiErrors')}</span>
<AlertTriangle className="h-4 w-4 text-[#8a5a08]" />
<span className="text-[10px] font-semibold uppercase tracking-wider text-[#77736a]">{t('uiErrors')}</span>
</div>
<div className="mt-1 text-xl font-semibold text-gray-900">
<div className="mt-2 font-mono text-2xl font-bold tabular-nums text-[#141413]">
{data.ui_errors}
</div>
</div>
{/* Rage Clicks */}
<div className="bg-white p-3">
<div className="bg-white p-4 transition-colors hover:bg-[#faf9f3]">
<div className="flex items-center gap-2">
<Zap className="h-4 w-4 text-red-500" />
<span className="text-xs text-gray-500">{t('rageClicks')}</span>
<Zap className="h-4 w-4 text-[#9f2f25]" />
<span className="text-[10px] font-semibold uppercase tracking-wider text-[#77736a]">{t('rageClicks')}</span>
</div>
<div className="mt-1 text-xl font-semibold text-gray-900">
<div className="mt-2 font-mono text-2xl font-bold tabular-nums text-[#141413]">
{data.rage_clicks}
</div>
</div>
{/* Dead Clicks */}
<div className="bg-white p-3">
<div className="bg-white p-4 transition-colors hover:bg-[#faf9f3]">
<div className="flex items-center gap-2">
<MousePointerClick className="h-4 w-4 text-gray-400" />
<span className="text-xs text-gray-500">{t('deadClicks')}</span>
<MousePointerClick className="h-4 w-4 text-[#b0ad9f]" />
<span className="text-[10px] font-semibold uppercase tracking-wider text-[#77736a]">{t('deadClicks')}</span>
</div>
<div className="mt-1 text-xl font-semibold text-gray-900">
<div className="mt-2 font-mono text-2xl font-bold tabular-nums text-[#141413]">
{data.dead_clicks}
</div>
</div>
</div>
{/* Replay List */}
{replayDetails.length > 0 && (
<div className="border-b border-gray-100">
<div className="px-3 py-1.5 bg-gray-50 text-xs font-medium text-gray-600">
<div className="border-b border-[#e0ddd4]">
<div className="bg-[#faf9f3] px-4 py-2 font-mono text-[10px] font-bold uppercase tracking-wider text-[#77736a]">
{t('recentReplays')}
</div>
<div className="divide-y divide-gray-100">
<div className="divide-y divide-[#e0ddd4]">
{replayDetails.slice(0, 5).map((detail, idx) => (
<ReplayItem key={detail.replay_id || idx} detail={detail} />
))}
@@ -261,13 +222,12 @@ export function UXAuditCard({
</div>
)}
{/* UI Errors List */}
{errorDetails.length > 0 && (
<div className="border-b border-gray-100">
<div className="px-3 py-1.5 bg-gray-50 text-xs font-medium text-gray-600">
<div className="border-b border-[#e0ddd4]">
<div className="bg-[#faf9f3] px-4 py-2 font-mono text-[10px] font-bold uppercase tracking-wider text-[#77736a]">
{t('recentUIErrors')}
</div>
<div className="divide-y divide-gray-100">
<div className="divide-y divide-[#e0ddd4]">
{errorDetails.slice(0, 3).map((detail, idx) => (
<ReplayItem key={detail.issue_id || idx} detail={detail} />
))}
@@ -275,17 +235,16 @@ export function UXAuditCard({
</div>
)}
{/* Footer: Dashboard Link */}
<div className="px-3 py-2">
<div className="bg-white p-4">
<a
href={data.replay_dashboard_url}
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center gap-1.5 text-xs text-purple-600 hover:text-purple-700 transition-colors"
className="flex items-center justify-center gap-2 rounded-lg border border-[#e0ddd4] px-4 py-2 text-xs font-semibold text-[#141413] transition-colors hover:border-[#6d28d9] hover:bg-[#f4f1ff] hover:text-[#6d28d9]"
>
<Activity className="h-3.5 w-3.5" />
<Activity className="h-4 w-4" />
{t('viewDashboard')}
<ExternalLink className="h-3 w-3" />
<ExternalLink className="h-3.5 w-3.5" />
</a>
</div>
</div>