-
-
-
{t('selectApproval')}
+ {/* Phase 11.3: Mobile/Tablet 返回按鈕 (#55) */}
+
+
+
+ {/* 分頁指示器 */}
+
+ {selectedIndex + 1} / {approvals.length}
+
+ {/* 快速導航按鈕 */}
+
+
+
+
- )}
+
+ {/* Y 鍵長按進度指示器 */}
+ {isYKeyHolding && (
+
+ )}
+
+ {selectedApproval ? (
+
+ ) : (
+
+
+
+
{t('selectApproval')}
+
+
+ )}
{/* 快捷鍵說明 Modal */}
diff --git a/apps/web/src/components/errors/error-overview-card.tsx b/apps/web/src/components/errors/error-overview-card.tsx
new file mode 100644
index 000000000..4053478c1
--- /dev/null
+++ b/apps/web/src/components/errors/error-overview-card.tsx
@@ -0,0 +1,182 @@
+'use client'
+
+/**
+ * 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)
+ */
+
+import { useTranslations } from 'next-intl'
+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
+ error?: string | null
+ changePercent?: number
+ className?: string
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export function ErrorOverviewCard({
+ stats,
+ loading = false,
+ error = null,
+ changePercent = 0,
+ className,
+}: ErrorOverviewCardProps) {
+ const t = useTranslations('errors')
+
+ // Loading state
+ if (loading) {
+ return (
+
+ )
+ }
+
+ // Error state
+ if (error) {
+ return (
+
+ )
+ }
+
+ // Empty state
+ if (!stats) {
+ return (
+
+ )
+ }
+
+ // 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'
+
+ return (
+
+ {/* Header */}
+
+
+
+
{t('overview')}
+
+ {changePercent !== 0 && (
+
+
+ {Math.abs(changePercent).toFixed(1)}%
+
+ )}
+
+
+ {/* Stats Grid */}
+
+ {/* Unresolved Issues */}
+
+
+ {stats.unresolved_issues}
+
+
+ {t('unresolvedIssues')}
+
+
+
+ {/* 24h Errors */}
+
+
+
+
+ {stats.error_count_24h}
+
+
+
+ {t('errors24h')}
+
+
+
+ {/* Critical Count */}
+
+
+
+
+ {stats.critical_count}
+
+
+
+ {t('criticalErrors')}
+
+
+
+ {/* Total Issues */}
+
+
+ {stats.total_issues}
+
+
+ {t('totalIssues')}
+
+
+
+
+ {/* Projects */}
+ {stats.projects.length > 0 && (
+
+
+ {t('projects')}: {stats.projects.join(', ')}
+
+
+ )}
+
+ )
+}
diff --git a/apps/web/src/components/errors/error-trend-chart.tsx b/apps/web/src/components/errors/error-trend-chart.tsx
new file mode 100644
index 000000000..e9f8af255
--- /dev/null
+++ b/apps/web/src/components/errors/error-trend-chart.tsx
@@ -0,0 +1,275 @@
+'use client'
+
+/**
+ * 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)
+ */
+
+import { useMemo } from 'react'
+import { useTranslations } from 'next-intl'
+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
+ error?: string | null
+ onPeriodChange?: (period: '24h' | '7d' | '30d') => void
+ activePeriod?: '24h' | '7d' | '30d'
+ className?: string
+}
+
+// =============================================================================
+// Sparkline Component
+// =============================================================================
+
+function Sparkline({
+ data,
+ width = 200,
+ height = 60,
+}: {
+ data: ErrorTrendPoint[]
+ width?: number
+ height?: number
+}) {
+ const path = useMemo(() => {
+ if (data.length === 0) return ''
+
+ const maxCount = Math.max(...data.map((d) => d.count), 1)
+ const minCount = Math.min(...data.map((d) => d.count), 0)
+ const range = maxCount - minCount || 1
+
+ const points = data.map((d, i) => {
+ const x = (i / (data.length - 1)) * width
+ const y = height - ((d.count - minCount) / range) * height
+ return `${x},${y}`
+ })
+
+ return `M ${points.join(' L ')}`
+ }, [data, width, height])
+
+ const areaPath = useMemo(() => {
+ if (data.length === 0) return ''
+
+ const maxCount = Math.max(...data.map((d) => d.count), 1)
+ const minCount = Math.min(...data.map((d) => d.count), 0)
+ const range = maxCount - minCount || 1
+
+ const points = data.map((d, i) => {
+ const x = (i / (data.length - 1)) * width
+ const y = height - ((d.count - minCount) / range) * height
+ return `${x},${y}`
+ })
+
+ return `M 0,${height} L ${points.join(' L ')} L ${width},${height} Z`
+ }, [data, width, height])
+
+ if (data.length === 0) {
+ return (
+
+ )
+ }
+
+ return (
+
+ )
+}
+
+// =============================================================================
+// Period Selector Component
+// =============================================================================
+
+function PeriodSelector({
+ activePeriod,
+ onChange,
+}: {
+ activePeriod: '24h' | '7d' | '30d'
+ onChange?: (period: '24h' | '7d' | '30d') => void
+}) {
+ const periods: Array<{ value: '24h' | '7d' | '30d'; label: string }> = [
+ { value: '24h', label: '24h' },
+ { value: '7d', label: '7d' },
+ { value: '30d', label: '30d' },
+ ]
+
+ return (
+
+ {periods.map(({ value, label }) => (
+
+ ))}
+
+ )
+}
+
+// =============================================================================
+// Main Component
+// =============================================================================
+
+export function ErrorTrendChart({
+ data,
+ loading = false,
+ error = null,
+ onPeriodChange,
+ activePeriod = '24h',
+ className,
+}: ErrorTrendChartProps) {
+ const t = useTranslations('errors')
+
+ // Loading state
+ if (loading) {
+ return (
+
+ )
+ }
+
+ // Error state
+ if (error) {
+ return (
+
+ )
+ }
+
+ // Empty state
+ if (!data) {
+ return (
+
+ )
+ }
+
+ // 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'
+
+ return (
+
+ {/* Header */}
+
+
+ {/* Chart */}
+
+
+
+
+ {/* Footer */}
+
+ {/* Total Count */}
+
+
+ {data.total_count.toLocaleString()}
+
+
+ {t('totalErrors', { period: data.period })}
+
+
+
+ {/* Change Percent */}
+
+
+
+ {data.change_percent > 0 ? '+' : ''}{data.change_percent.toFixed(1)}%
+
+
+
+
+ )
+}
diff --git a/apps/web/src/components/errors/index.ts b/apps/web/src/components/errors/index.ts
new file mode 100644
index 000000000..02ddfd042
--- /dev/null
+++ b/apps/web/src/components/errors/index.ts
@@ -0,0 +1,17 @@
+/**
+ * Error Components Index
+ * ======================
+ * Phase 10: Sentry + OpenClaw + UI 整合
+ *
+ * Components:
+ * - ErrorOverviewCard (#41)
+ * - RecentIssuesList (#42)
+ * - ErrorTrendChart (#43)
+ *
+ * 建立: 2026-03-26 (台北時區)
+ * 建立者: Claude Code (#41-44 Error UI)
+ */
+
+export { ErrorOverviewCard } from './error-overview-card'
+export { RecentIssuesList } from './recent-issues-list'
+export { ErrorTrendChart } from './error-trend-chart'
diff --git a/apps/web/src/components/errors/recent-issues-list.tsx b/apps/web/src/components/errors/recent-issues-list.tsx
new file mode 100644
index 000000000..f263b81a2
--- /dev/null
+++ b/apps/web/src/components/errors/recent-issues-list.tsx
@@ -0,0 +1,333 @@
+'use client'
+
+/**
+ * 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)
+ */
+
+import { useState } from 'react'
+import { useTranslations } from 'next-intl'
+import { cn } from '@/lib/utils'
+import { AlertTriangle, Bug, Clock, Users, ChevronRight, Sparkles, ExternalLink } from 'lucide-react'
+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',
+ icon: AlertTriangle,
+ },
+ error: {
+ color: 'text-orange-700',
+ bgColor: 'bg-orange-50',
+ borderColor: 'border-orange-200',
+ icon: Bug,
+ },
+ warning: {
+ color: 'text-amber-700',
+ bgColor: 'bg-amber-50',
+ borderColor: 'border-amber-200',
+ icon: AlertTriangle,
+ },
+ info: {
+ color: 'text-blue-700',
+ bgColor: 'bg-blue-50',
+ borderColor: 'border-blue-200',
+ icon: Bug,
+ },
+} as const
+
+// =============================================================================
+// Component Props
+// =============================================================================
+
+interface RecentIssuesListProps {
+ issues: SentryIssue[]
+ loading?: boolean
+ error?: string | null
+ onIssueClick?: (issue: SentryIssue) => void
+ className?: string
+}
+
+// =============================================================================
+// Issue Item Component
+// =============================================================================
+
+function IssueItem({
+ issue,
+ onClick,
+}: {
+ issue: SentryIssue
+ onClick?: () => void
+}) {
+ const t = useTranslations('errors')
+ const [analyzing, setAnalyzing] = useState(false)
+ const [analysis, setAnalysis] = useState
(null)
+
+ 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()
+ const diffMins = Math.floor(diffMs / 60000)
+ const diffHours = Math.floor(diffMs / 3600000)
+ const diffDays = Math.floor(diffMs / 86400000)
+
+ let timeAgo: string
+ if (diffMins < 60) {
+ timeAgo = t('timeAgo.minutes', { count: diffMins })
+ } else if (diffHours < 24) {
+ timeAgo = t('timeAgo.hours', { count: diffHours })
+ } else {
+ timeAgo = t('timeAgo.days', { count: diffDays })
+ }
+
+ const handleAnalyze = async (e: React.MouseEvent) => {
+ e.stopPropagation()
+ setAnalyzing(true)
+ try {
+ const result = await apiClient.analyzeError(issue.id)
+ setAnalysis(result)
+ } catch (err) {
+ console.error('Error analyzing issue:', err)
+ } finally {
+ setAnalyzing(false)
+ }
+ }
+
+ return (
+
+ {/* Main Row */}
+
+ {/* Level Badge */}
+
+
+ {issue.level}
+
+
+ {/* Content */}
+
+ {/* Title */}
+
+ {issue.title}
+
+
+ {/* Culprit */}
+ {issue.culprit && (
+
+ {issue.culprit}
+
+ )}
+
+ {/* Meta */}
+
+
+
+ {issue.count.toLocaleString()}
+
+
+
+ {issue.user_count}
+
+
+
+ {timeAgo}
+
+
+ {issue.short_id}
+
+
+
+
+ {/* Actions */}
+
+
+
+ {/* AI Analysis Result */}
+ {analysis && analysis.status === 'completed' && analysis.analysis && (
+
+
+
+ {t('aiAnalysis')}
+
+ {analysis.analysis.severity}
+
+
+
+
+ {t('rootCause')}: {analysis.analysis.root_cause}
+
+
+
+ {t('fixSummary')}: {analysis.analysis.fix_recommendation.summary}
+
+
+
+ {t('category')}: {analysis.analysis.category} | {t('confidence')}: {(analysis.analysis.confidence * 100).toFixed(0)}%
+
+
+ )}
+
+
+
+ {[1, 2, 3].map((i) => (
+
+ ))}
+
+
+ {/* Header */}
+
+
+
+
{t('recentIssues')}
+ ({issues.length})
+
+
+
+ {/* Issues List */}
+
+ {issues.map((issue) => (
+ onIssueClick?.(issue)}
+ />
+ ))}
+
+
+
+
+
+
+ Approval Required // {data.approvalId}
+
+
+
+ {data.riskLevel}
+
+
+
+
+
+
+
+
+ {data.kubectl}
+
+
+
+
+
+ {!authorized ? (
+
+ ) : (
+
+
+ [ EXECUTION AUTHORIZED ]
+
+ )}
+
+
+ {isCritical && !authorized && (
+
+ WARNING: This action has a HIGH blast radius. Multi-Sig required.
+
+ )}
+
+
[GenUI Tool Render Failed: Unknown Tool {msg.payload.tool}]
+ }
+
+ return (
+
+ {msg.content}
+
+ )
+ }
+
+ return (
+
+
+
+ {/* Terminal Header */}
+
+
+
AWOOOI // OMNI-TERMINAL
+
+
+ {isConnected ? 'SSE Live' : 'Offline'}
+
+
+
+
+
+ {/* Messages / GenUI Canvas */}
+
+ {messages.map((msg, i) => (
+
+
+
+ {msg.role === 'system' ? '[SYS]' : msg.role === 'user' ? 'root@awoooi:~#' : '[AGENT]'}
+
+
+ {renderMessageContent(msg)}
+
+
+
+ ))}
+
+
+ {/* Input Bar */}
+
+
+
+
+