create-arete-workspace 0.2.0

package/packages/gatsaeng-os/src/components/ErrorBoundary.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { Component, type ReactNode } from 'react'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { AlertTriangle } from 'lucide-react'
+
+interface Props {
+  children: ReactNode
+  fallback?: ReactNode
+}
+
+interface State {
+  hasError: boolean
+  error?: Error
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  state: State = { hasError: false }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback ?? (
+        <Card className="border-gatsaeng-red/30">
+          <CardContent className="py-8 text-center">
+            <AlertTriangle className="w-8 h-8 text-gatsaeng-red mx-auto mb-3" />
+            <p className="text-sm text-foreground mb-1">오류가 발생했습니다</p>
+            <p className="text-xs text-muted-foreground mb-4">{this.state.error?.message}</p>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => this.setState({ hasError: false, error: undefined })}
+            >
+              다시 시도
+            </Button>
+          </CardContent>
+        </Card>
+      )
+    }
+    return this.props.children
+  }
+}

package/packages/gatsaeng-os/src/components/dashboard/DashboardGrid.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import { useQuery } from '@tanstack/react-query'
+import { useDashboardStore } from '@/stores/dashboardStore'
+import { RoutineChecklist } from './RoutineChecklist'
+import { GoalRings } from './GoalRings'
+import { FocusTimer } from './FocusTimer'
+import { GatsaengScore } from './GatsaengScore'
+import { ZeigarnikPanel } from './ZeigarnikPanel'
+import { EnergyTracker } from './EnergyTracker'
+import { DdayWidget } from './DdayWidget'
+import { ProactiveBar } from './ProactiveBar'
+import { TimingWidget } from './TimingWidget'
+import type { WidgetId } from '@/types'
+
+const WIDGETS: Partial<Record<WidgetId, React.ComponentType>> = {
+  routine: RoutineChecklist,
+  goals: GoalRings,
+  timer: FocusTimer,
+  zeigarnik: () => null, // rendered separately as top bar
+  energy: EnergyTracker,
+  dday: DdayWidget,
+  proactive: () => null, // rendered as top bar
+  heatmap: () => (
+    <div className="border border-border rounded-lg p-6 text-center text-muted-foreground text-sm">
+      Activity Heatmap — coming soon
+    </div>
+  ),
+  kanban: () => (
+    <div className="border border-border rounded-lg p-6 text-center text-muted-foreground text-sm">
+      Quick Kanban — coming soon
+    </div>
+  ),
+}
+
+export function DashboardGrid() {
+  const { activeWidgets } = useDashboardStore()
+  const { data: profile } = useQuery({
+    queryKey: ['profile'],
+    queryFn: async () => {
+      const res = await fetch('/api/profile')
+      return res.json()
+    },
+    staleTime: 1000 * 60 * 30,
+  })
+
+  const displayWidgets = activeWidgets.filter(w => w !== 'zeigarnik' && w !== 'proactive')
+
+  return (
+    <div className="space-y-6">
+      {/* Proactive alerts bar */}
+      {activeWidgets.includes('proactive') && <ProactiveBar />}
+
+      {/* Zeigarnik panel */}
+      {activeWidgets.includes('zeigarnik') && <ZeigarnikPanel />}
+
+      {/* Saju motto banner */}
+      {profile?.saju_motto && (
+        <div className="border border-gatsaeng-purple/30 bg-gatsaeng-purple/5 rounded-lg px-4 py-3">
+          <div className="text-[10px] uppercase tracking-wider text-gatsaeng-purple/60 mb-1">
+            사주 모토
+          </div>
+          <p className="text-sm text-foreground font-medium">{profile.saju_motto}</p>
+          {profile.saju_identity && (
+            <p className="text-xs text-muted-foreground mt-1">{profile.saju_identity}</p>
+          )}
+        </div>
+      )}
+
+      {/* Score + Timing row */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <GatsaengScore />
+        <TimingWidget />
+      </div>
+
+      {/* Widget grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {displayWidgets.map(widgetId => {
+          const Widget = WIDGETS[widgetId]
+          if (!Widget) return null
+          return <Widget key={widgetId} />
+        })}
+      </div>
+    </div>
+  )
+}

package/packages/gatsaeng-os/src/components/dashboard/DdayWidget.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import { useMilestonesWithDDay } from '@/hooks/useMilestones'
+import { useGoals } from '@/hooks/useGoals'
+import { WidgetWrapper } from './WidgetWrapper'
+import { Calendar, Target } from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import Link from 'next/link'
+
+function formatDDay(d: number) {
+  if (d === 0) return 'D-Day'
+  if (d > 0) return `D-${d}`
+  return `D+${Math.abs(d)}`
+}
+
+function ddayColor(d: number) {
+  if (d <= 0) return 'text-gatsaeng-red'
+  if (d <= 7) return 'text-gatsaeng-red'
+  if (d <= 30) return 'text-gatsaeng-amber'
+  return 'text-foreground'
+}
+
+export function DdayWidget() {
+  const { data: milestones = [], isLoading } = useMilestonesWithDDay()
+  const { data: goals = [] } = useGoals()
+
+  const active = milestones.filter(m => m.status === 'active').slice(0, 5)
+
+  const goalMap = new Map(goals.map(g => [g.id, g]))
+
+  return (
+    <WidgetWrapper title="D-day 트래커" icon={<Calendar className="w-4 h-4 text-gatsaeng-red" />}>
+      {isLoading ? (
+        <div className="space-y-3">
+          {[1, 2, 3].map(i => <div key={i} className="h-10 bg-muted/30 rounded animate-pulse" />)}
+        </div>
+      ) : active.length === 0 ? (
+        <p className="text-sm text-muted-foreground">활성 마일스톤이 없습니다.</p>
+      ) : (
+        <div className="space-y-3">
+          {active.map(m => {
+            const goal = goalMap.get(m.goal_id)
+            const progress = m.target_value > 0
+              ? Math.min(100, Math.round((m.current_value / m.target_value) * 100))
+              : 0
+            return (
+              <Link
+                key={m.id}
+                href={`/goals/${m.goal_id}`}
+                className="flex items-center gap-3 group"
+              >
+                <div className={`text-lg font-bold font-mono min-w-[60px] text-right ${ddayColor(m.d_day)}`}>
+                  {formatDDay(m.d_day)}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="text-sm font-medium text-foreground truncate group-hover:text-primary transition-colors">
+                    {m.title}
+                  </div>
+                  <div className="flex items-center gap-2 mt-0.5">
+                    {goal && (
+                      <div className="flex items-center gap-1">
+                        <Target className="w-3 h-3" style={{ color: goal.color }} />
+                        <span className="text-[10px] text-muted-foreground truncate max-w-[100px]">{goal.title}</span>
+                      </div>
+                    )}
+                    <Badge variant="outline" className="text-[10px] px-1 py-0">
+                      {progress}%
+                    </Badge>
+                  </div>
+                </div>
+                {/* mini progress bar */}
+                <div className="w-12 h-1.5 bg-muted rounded-full overflow-hidden">
+                  <div
+                    className="h-full rounded-full transition-all"
+                    style={{
+                      width: `${progress}%`,
+                      backgroundColor: goal?.color ?? '#58a6ff',
+                    }}
+                  />
+                </div>
+              </Link>
+            )
+          })}
+        </div>
+      )}
+    </WidgetWrapper>
+  )
+}

package/packages/gatsaeng-os/src/components/dashboard/EnergyTracker.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { WidgetWrapper } from './WidgetWrapper'
+import { Zap } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { apiFetch } from '@/lib/apiFetch'
+import { getToday } from '@/lib/date'
+import type { EnergyLog } from '@/types'
+
+const ENERGY_LEVELS = [
+  { value: 1, label: '매우 낮음', color: 'bg-gatsaeng-red' },
+  { value: 2, label: '낮음', color: 'bg-orange-500' },
+  { value: 3, label: '보통', color: 'bg-yellow-500' },
+  { value: 4, label: '높음', color: 'bg-gatsaeng-teal' },
+  { value: 5, label: '최고', color: 'bg-green-500' },
+]
+
+export function EnergyTracker() {
+  const today = getToday()
+  const currentHour = new Date().getHours()
+  const queryClient = useQueryClient()
+
+  const { data: energyLog } = useQuery({
+    queryKey: ['energy-log', today],
+    queryFn: () => apiFetch<EnergyLog>(`/api/logs/energy?date=${today}`),
+  })
+
+  const logMutation = useMutation({
+    mutationFn: (level: number) =>
+      apiFetch('/api/logs/energy', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ date: today, hour: currentHour, level }),
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['energy-log', today] })
+    },
+  })
+
+  const currentEntry = energyLog?.entries?.find(e => e.hour === currentHour)
+
+  return (
+    <WidgetWrapper title="에너지 체크" icon={<Zap className="w-4 h-4 text-gatsaeng-amber" />} widgetId="energy">
+      <div className="space-y-3">
+        <p className="text-xs text-muted-foreground">
+          현재 시간: {currentHour}시 — 지금 에너지 레벨은?
+        </p>
+        <div className="flex gap-2">
+          {ENERGY_LEVELS.map(level => (
+            <button
+              key={level.value}
+              onClick={() => logMutation.mutate(level.value)}
+              className={cn(
+                'w-8 h-8 rounded-full transition-all text-xs font-bold',
+                currentEntry?.level === level.value
+                  ? `${level.color} text-white scale-110`
+                  : 'bg-muted text-muted-foreground hover:scale-105'
+              )}
+            >
+              {level.value}
+            </button>
+          ))}
+        </div>
+        {energyLog?.entries && energyLog.entries.length > 0 && (
+          <div className="flex gap-1 mt-2">
+            {Array.from({ length: 24 }, (_, h) => {
+              const entry = energyLog.entries.find(e => e.hour === h)
+              return (
+                <div
+                  key={h}
+                  className={cn(
+                    'w-2 h-6 rounded-sm',
+                    entry
+                      ? ENERGY_LEVELS[entry.level - 1]?.color ?? 'bg-muted'
+                      : 'bg-muted/30'
+                  )}
+                  title={`${h}시: ${entry ? `레벨 ${entry.level}` : '미기록'}`}
+                />
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </WidgetWrapper>
+  )
+}

package/packages/gatsaeng-os/src/components/dashboard/FocusTimer.tsx

@@ -0,0 +1,139 @@
+'use client'
+
+import { useEffect, useRef, useCallback } from 'react'
+import { WidgetWrapper } from './WidgetWrapper'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Input } from '@/components/ui/input'
+import { Timer, Play, Pause, RotateCcw } from 'lucide-react'
+import { useTimerStore } from '@/stores/timerStore'
+import { cn } from '@/lib/utils'
+import type { SessionType } from '@/types'
+
+const SESSION_LABELS: Record<SessionType, string> = {
+  pomodoro_25: '25분',
+  focus_90: '90분 딥워크',
+  deep_work: '커스텀',
+}
+
+export function FocusTimer() {
+  const seconds = useTimerStore(s => s.seconds)
+  const isRunning = useTimerStore(s => s.isRunning)
+  const sessionType = useTimerStore(s => s.sessionType)
+  const completedSessions = useTimerStore(s => s.completedSessions)
+  const customMinutes = useTimerStore(s => s.customMinutes)
+  const startedAt = useTimerStore(s => s.startedAt)
+  const start = useTimerStore(s => s.start)
+  const pause = useTimerStore(s => s.pause)
+  const reset = useTimerStore(s => s.reset)
+  const tick = useTimerStore(s => s.tick)
+  const setSessionType = useTimerStore(s => s.setSessionType)
+  const setCustomMinutes = useTimerStore(s => s.setCustomMinutes)
+
+  const intervalRef = useRef<NodeJS.Timeout | null>(null)
+  const prevCompletedRef = useRef(completedSessions)
+
+  const saveFocusSession = useCallback(async (started: string, type: SessionType, custom: number) => {
+    const durationMap: Record<SessionType, number> = {
+      pomodoro_25: 25,
+      focus_90: 90,
+      deep_work: custom,
+    }
+    try {
+      await fetch('/api/logs/focus', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          session_type: type,
+          duration_minutes: durationMap[type],
+          completed: true,
+          started_at: started,
+          ended_at: new Date().toISOString(),
+        }),
+      })
+    } catch {
+      // silently fail — vault save is best-effort from dashboard widget
+    }
+  }, [])
+
+  useEffect(() => {
+    if (completedSessions > prevCompletedRef.current && startedAt) {
+      saveFocusSession(startedAt, sessionType, customMinutes)
+    }
+    prevCompletedRef.current = completedSessions
+  }, [completedSessions, startedAt, sessionType, customMinutes, saveFocusSession])
+
+  useEffect(() => {
+    if (isRunning) {
+      intervalRef.current = setInterval(tick, 1000)
+    } else if (intervalRef.current) {
+      clearInterval(intervalRef.current)
+    }
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current)
+    }
+  }, [isRunning, tick])
+
+  const minutes = Math.floor(seconds / 60)
+  const secs = seconds % 60
+
+  return (
+    <WidgetWrapper title="포커스 타이머" icon={<Timer className="w-4 h-4" />} widgetId="timer">
+      <div className="flex flex-col items-center gap-4">
+        <div className="flex gap-2">
+          {(Object.keys(SESSION_LABELS) as SessionType[]).map(type => (
+            <Badge
+              key={type}
+              variant={sessionType === type ? 'default' : 'outline'}
+              className={cn(
+                'cursor-pointer text-xs',
+                sessionType === type && 'bg-gatsaeng-purple text-white'
+              )}
+              onClick={() => setSessionType(type)}
+            >
+              {SESSION_LABELS[type]}
+            </Badge>
+          ))}
+        </div>
+
+        {sessionType === 'deep_work' && !isRunning && seconds === customMinutes * 60 && (
+          <div className="flex items-center gap-2">
+            <Input
+              type="number"
+              value={customMinutes}
+              onChange={e => setCustomMinutes(Number(e.target.value))}
+              className="w-20 h-8 text-center text-sm"
+              min={1}
+              max={180}
+            />
+            <span className="text-xs text-muted-foreground">분</span>
+          </div>
+        )}
+
+        <div className="text-4xl font-mono font-bold text-gatsaeng-purple tabular-nums">
+          {String(minutes).padStart(2, '0')}:{String(secs).padStart(2, '0')}
+        </div>
+
+        <div className="flex gap-2">
+          <Button
+            size="sm"
+            variant={isRunning ? 'outline' : 'default'}
+            onClick={isRunning ? pause : start}
+            className={cn(!isRunning && 'bg-gatsaeng-purple hover:bg-gatsaeng-purple/80')}
+          >
+            {isRunning ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
+          </Button>
+          <Button size="sm" variant="outline" onClick={reset}>
+            <RotateCcw className="w-4 h-4" />
+          </Button>
+        </div>
+
+        {completedSessions > 0 && (
+          <span className="text-xs text-muted-foreground">
+            완료 세션: {completedSessions}
+          </span>
+        )}
+      </div>
+    </WidgetWrapper>
+  )
+}

package/packages/gatsaeng-os/src/components/dashboard/GatsaengScore.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { useQuery } from '@tanstack/react-query'
+import { WidgetWrapper } from './WidgetWrapper'
+import { Zap } from 'lucide-react'
+import type { Profile } from '@/types'
+
+export function GatsaengScore() {
+  const { data: profile } = useQuery({
+    queryKey: ['profile'],
+    queryFn: async (): Promise<Profile> => {
+      const res = await fetch('/api/profile')
+      return res.json()
+    },
+  })
+
+  return (
+    <WidgetWrapper title="갓생 스코어" icon={<Zap className="w-4 h-4 text-gatsaeng-amber" />}>
+      <div className="flex items-center gap-4">
+        <div className="text-3xl font-bold font-mono text-gatsaeng-amber">
+          {profile?.total_score ?? 0}
+        </div>
+        <div className="text-sm text-muted-foreground">
+          <div>Lv. {profile?.level ?? 1}</div>
+          <div>연속 {profile?.current_streak ?? 0}일</div>
+        </div>
+      </div>
+    </WidgetWrapper>
+  )
+}

package/packages/gatsaeng-os/src/components/dashboard/GoalRings.tsx

@@ -0,0 +1,107 @@
+'use client'
+
+import { WidgetWrapper } from './WidgetWrapper'
+import { Target } from 'lucide-react'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { useGoals } from '@/hooks/useGoals'
+
+const DEFAULT_RING_COLOR = '#58a6ff'
+const VALID_COLOR_RE = /^#[0-9a-fA-F]{3,8}$|^(rgb|hsl)/
+
+function RingChart({ progress, color, size = 60 }: { progress: number; color: string; size?: number }) {
+  const radius = (size - 8) / 2
+  const circumference = 2 * Math.PI * radius
+  const offset = circumference - (progress / 100) * circumference
+  const safeColor = VALID_COLOR_RE.test(color) ? color : DEFAULT_RING_COLOR
+
+  return (
+    <svg width={size} height={size} className="transform -rotate-90">
+      <circle
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={4}
+        className="text-muted/30"
+      />
+      <circle
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        fill="none"
+        stroke={safeColor}
+        strokeWidth={4}
+        strokeDasharray={circumference}
+        strokeDashoffset={offset}
+        strokeLinecap="round"
+        className="transition-all duration-500"
+      />
+    </svg>
+  )
+}
+
+export function GoalRings() {
+  const { data: goals, isLoading } = useGoals()
+
+  const activeGoals = (goals ?? []).filter(g => g.status === 'active')
+
+  if (isLoading) {
+    return (
+      <WidgetWrapper title="목표 진척률" icon={<Target className="w-4 h-4" />}>
+        <div className="flex gap-4">
+          {[1, 2, 3].map(i => (
+            <div key={i} className="w-16 h-16 rounded-full bg-muted animate-pulse" />
+          ))}
+        </div>
+      </WidgetWrapper>
+    )
+  }
+
+  return (
+    <WidgetWrapper title="목표 진척률" icon={<Target className="w-4 h-4" />}>
+      {activeGoals.length === 0 ? (
+        <p className="text-sm text-muted-foreground">목표를 추가해보세요</p>
+      ) : (
+        <div className="flex flex-wrap gap-4">
+          {activeGoals.map(goal => {
+            const progress = goal.target_value
+              ? Math.round(((goal.current_value ?? 0) / goal.target_value) * 100)
+              : 0
+
+            return (
+              <Tooltip key={goal.id}>
+                <TooltipTrigger asChild>
+                  <div className="flex flex-col items-center gap-1 cursor-pointer">
+                    <div className="relative">
+                      <RingChart progress={progress} color={goal.color} />
+                      <span className="absolute inset-0 flex items-center justify-center text-xs font-mono">
+                        {progress}%
+                      </span>
+                    </div>
+                    <span className="text-xs text-muted-foreground max-w-[70px] truncate">
+                      {goal.title}
+                    </span>
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" className="max-w-xs">
+                  <p className="font-medium">{goal.title}</p>
+                  {goal.why_statement && (
+                    <p className="text-xs text-muted-foreground mt-1">
+                      Why: {goal.why_statement}
+                    </p>
+                  )}
+                  {goal.target_value && (
+                    <p className="text-xs mt-1">
+                      {goal.current_value ?? 0} / {goal.target_value} {goal.unit}
+                    </p>
+                  )}
+                </TooltipContent>
+              </Tooltip>
+            )
+          })}
+        </div>
+      )}
+    </WidgetWrapper>
+  )
+}

package/packages/gatsaeng-os/src/components/dashboard/ProactiveBar.tsx

@@ -0,0 +1,98 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useMilestonesWithDDay } from '@/hooks/useMilestones'
+import { useRoutines } from '@/hooks/useRoutines'
+import { AlertTriangle, Clock, Target, ChevronRight, X } from 'lucide-react'
+import type { ProactiveAlert } from '@/types'
+
+export function ProactiveBar() {
+  const { data: milestones = [] } = useMilestonesWithDDay()
+  const { routines } = useRoutines()
+  const [dismissed, setDismissed] = useState<Set<string>>(new Set())
+
+  // build alerts from current data
+  const alerts: ProactiveAlert[] = []
+  const now = new Date()
+  const hour = now.getHours()
+
+  // 1. milestone D-day alerts (≤ 7 days)
+  milestones
+    .filter(m => m.status === 'active' && m.d_day <= 7 && m.d_day >= 0)
+    .forEach(m => {
+      alerts.push({
+        id: `ms-${m.id}`,
+        type: 'milestone_dday',
+        title: m.d_day === 0 ? 'D-Day!' : `D-${m.d_day}`,
+        message: m.title,
+        created_at: now.toISOString(),
+      })
+    })
+
+  // 2. skipped routine alerts (only after 11am)
+  if (hour >= 11) {
+    const skipped = routines.filter(r => !r.completed_today)
+    if (skipped.length > 0) {
+      alerts.push({
+        id: 'skipped-routines',
+        type: 'skipped_routine',
+        title: `미완료 루틴 ${skipped.length}개`,
+        message: skipped.slice(0, 3).map(r => r.title).join(', '),
+        created_at: now.toISOString(),
+      })
+    }
+  }
+
+  // 3. overdue milestones
+  milestones
+    .filter(m => m.status === 'active' && m.d_day < 0)
+    .slice(0, 2)
+    .forEach(m => {
+      alerts.push({
+        id: `overdue-${m.id}`,
+        type: 'deadline',
+        title: `D+${Math.abs(m.d_day)} 초과`,
+        message: m.title,
+        created_at: now.toISOString(),
+      })
+    })
+
+  const visible = alerts.filter(a => !dismissed.has(a.id))
+
+  if (visible.length === 0) return null
+
+  const iconMap: Record<ProactiveAlert['type'], React.ReactNode> = {
+    skipped_routine: <Clock className="w-3.5 h-3.5" />,
+    deadline: <AlertTriangle className="w-3.5 h-3.5" />,
+    milestone_dday: <Target className="w-3.5 h-3.5" />,
+    reanalysis_due: <ChevronRight className="w-3.5 h-3.5" />,
+  }
+
+  const colorMap: Record<ProactiveAlert['type'], string> = {
+    skipped_routine: 'bg-gatsaeng-amber/10 border-gatsaeng-amber/30 text-gatsaeng-amber',
+    deadline: 'bg-gatsaeng-red/10 border-gatsaeng-red/30 text-gatsaeng-red',
+    milestone_dday: 'bg-gatsaeng-purple/10 border-gatsaeng-purple/30 text-gatsaeng-purple',
+    reanalysis_due: 'bg-primary/10 border-primary/30 text-primary',
+  }
+
+  return (
+    <div className="space-y-2 mb-4">
+      {visible.map(alert => (
+        <div
+          key={alert.id}
+          className={`flex items-center gap-3 px-4 py-2 rounded-lg border text-sm ${colorMap[alert.type]}`}
+        >
+          {iconMap[alert.type]}
+          <span className="font-medium">{alert.title}</span>
+          <span className="text-foreground/70">{alert.message}</span>
+          <button
+            onClick={() => setDismissed(prev => new Set(prev).add(alert.id))}
+            className="ml-auto opacity-50 hover:opacity-100 transition-opacity"
+          >
+            <X className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      ))}
+    </div>
+  )
+}