agentfit 0.1.0 → 0.1.2

package/components/overview-cards.tsx

@@ -23,53 +23,131 @@ import {
   Cpu,
   Sun,
   CalendarClock,
+  AlertTriangle,
+  Ban,
+  Flame,
+  Zap,
+  Calendar,
   HelpCircle,
 } from 'lucide-react'
 
-function computePeakHour(sessions: SessionSummary[]): string {
+function computeTopHours(sessions: SessionSummary[]): string {
   if (sessions.length === 0) return 'N/A'
   const hourCounts = new Array(24).fill(0)
   for (const s of sessions) {
-    if (s.startTime) hourCounts[new Date(s.startTime).getHours()]++
+    const timestamps = s.messageTimestamps
+    if (timestamps && timestamps.length > 0) {
+      for (const ts of timestamps) {
+        hourCounts[new Date(ts).getHours()]++
+      }
+    } else if (s.startTime) {
+      hourCounts[new Date(s.startTime).getHours()]++
+    }
   }
-  const peak = hourCounts.indexOf(Math.max(...hourCounts))
-  const end = (peak + 1) % 24
   const fmt = (h: number) => `${h % 12 || 12}${h < 12 ? 'am' : 'pm'}`
-  return `${fmt(peak)}–${fmt(end)}`
+  const top2 = hourCounts
+    .map((count, hour) => ({ hour, count }))
+    .sort((a, b) => b.count - a.count)
+    .slice(0, 2)
+  return top2.map((t) => fmt(t.hour)).join(', ')
 }
 
+const IDLE_THRESHOLD_MS = 30 * 60 * 1000 // 30 min — gaps longer than this are idle time
+
 function computeAvgDailyTime(sessions: SessionSummary[]): number {
   if (sessions.length === 0) return 0
-  // Merge overlapping sessions per day to avoid double-counting
-  const dayIntervals = new Map<string, [number, number][]>()
+  // Collect all message timestamps grouped by local date.
+  // Sum only gaps between consecutive messages that are under the idle threshold.
+  const dayTimestamps = new Map<string, number[]>()
+
   for (const s of sessions) {
-    if (!s.startTime || !s.endTime) continue
-    const date = s.startTime.slice(0, 10)
-    const start = new Date(s.startTime).getTime()
-    const end = new Date(s.endTime).getTime()
-    if (end <= start) continue
-    if (!dayIntervals.has(date)) dayIntervals.set(date, [])
-    dayIntervals.get(date)!.push([start, end])
+    const timestamps = s.messageTimestamps
+    if (!timestamps || timestamps.length === 0) continue
+    for (const ts of timestamps) {
+      const d = new Date(ts)
+      const ms = d.getTime()
+      const date = d.toLocaleDateString('en-CA')
+      if (!dayTimestamps.has(date)) dayTimestamps.set(date, [])
+      dayTimestamps.get(date)!.push(ms)
+    }
   }
 
   let totalMinutes = 0
-  for (const intervals of dayIntervals.values()) {
-    intervals.sort((a, b) => a[0] - b[0])
-    const merged: [number, number][] = [intervals[0]]
-    for (let i = 1; i < intervals.length; i++) {
-      const last = merged[merged.length - 1]
-      if (intervals[i][0] <= last[1]) {
-        last[1] = Math.max(last[1], intervals[i][1])
-      } else {
-        merged.push(intervals[i])
+  for (const timestamps of dayTimestamps.values()) {
+    timestamps.sort((a, b) => a - b)
+    for (let i = 1; i < timestamps.length; i++) {
+      const gap = timestamps[i] - timestamps[i - 1]
+      if (gap <= IDLE_THRESHOLD_MS) {
+        totalMinutes += gap / 60000
       }
     }
-    for (const [start, end] of merged) {
-      totalMinutes += (end - start) / 60000
+  }
+
+  return dayTimestamps.size > 0 ? totalMinutes / dayTimestamps.size : 0
+}
+
+function computeAvgParallelSessions(sessions: SessionSummary[]): string {
+  if (sessions.length === 0) return '0'
+  // Group sessions by local date, count how many are active per day
+  const daySessions = new Map<string, number>()
+  for (const s of sessions) {
+    if (!s.startTime) continue
+    const date = new Date(s.startTime).toLocaleDateString('en-CA')
+    daySessions.set(date, (daySessions.get(date) || 0) + 1)
+  }
+  if (daySessions.size === 0) return '0'
+  const total = Array.from(daySessions.values()).reduce((a, b) => a + b, 0)
+  const avg = total / daySessions.size
+  return avg.toFixed(1)
+}
+
+function computeStreaks(sessions: SessionSummary[]): { longest: number; current: number; activeDays: number } {
+  if (sessions.length === 0) return { longest: 0, current: 0, activeDays: 0 }
+
+  const activeDates = new Set<string>()
+  for (const s of sessions) {
+    if (s.startTime) {
+      activeDates.add(new Date(s.startTime).toLocaleDateString('en-CA'))
+    }
+  }
+
+  if (activeDates.size === 0) return { longest: 0, current: 0, activeDays: 0 }
+
+  const sorted = Array.from(activeDates).sort()
+  let longest = 1
+  let streak = 1
+
+  for (let i = 1; i < sorted.length; i++) {
+    const prev = new Date(sorted[i - 1])
+    const curr = new Date(sorted[i])
+    const diffDays = (curr.getTime() - prev.getTime()) / (1000 * 60 * 60 * 24)
+    if (diffDays === 1) {
+      streak++
+      if (streak > longest) longest = streak
+    } else {
+      streak = 1
+    }
+  }
+
+  // Current streak: count backwards from today
+  const today = new Date().toLocaleDateString('en-CA')
+  const yesterday = new Date(Date.now() - 86400000).toLocaleDateString('en-CA')
+  let current = 0
+  if (activeDates.has(today) || activeDates.has(yesterday)) {
+    const start = activeDates.has(today) ? today : yesterday
+    current = 1
+    let d = new Date(start)
+    while (true) {
+      d = new Date(d.getTime() - 86400000)
+      if (activeDates.has(d.toLocaleDateString('en-CA'))) {
+        current++
+      } else {
+        break
+      }
     }
   }
 
-  return dayIntervals.size > 0 ? totalMinutes / dayIntervals.size : 0
+  return { longest, current, activeDays: activeDates.size }
 }
 
 interface MetricDef {
@@ -80,8 +158,9 @@ interface MetricDef {
 }
 
 export function OverviewCards({ overview, sessions }: { overview: OverviewStats; sessions: SessionSummary[] }) {
-  const peakHour = useMemo(() => computePeakHour(sessions), [sessions])
+  const topHours = useMemo(() => computeTopHours(sessions), [sessions])
   const avgDailyTime = useMemo(() => computeAvgDailyTime(sessions), [sessions])
+  const streaks = useMemo(() => computeStreaks(sessions), [sessions])
 
   const cards: MetricDef[] = [
     {
@@ -121,22 +200,22 @@ export function OverviewCards({ overview, sessions }: { overview: OverviewStats;
       explanation: 'Total number of tool invocations by the assistant (Read, Edit, Bash, Grep, Write, Agent, etc.). Each tool_use content block in an assistant message counts as one call.',
     },
     {
-      title: 'Avg Daily Time',
+      title: 'Est. Daily Time',
       value: formatDuration(avgDailyTime),
       icon: CalendarClock,
-      explanation: 'Average active time per day. Calculated by summing session durations for each day (merging overlapping sessions to avoid double-counting), then dividing by the number of active days. Session duration = time from first message to last message.',
+      explanation: 'Average active coding time per day. Computed from individual message timestamps: sums gaps between consecutive messages that are under 30 minutes (idle gaps are excluded). Then divides by the number of active days.',
     },
     {
-      title: 'Peak Hour',
-      value: peakHour,
+      title: 'Top Hours',
+      value: topHours,
       icon: Sun,
-      explanation: 'The hour of day when you start the most sessions. Based on the start timestamp of each session, grouped by hour in your local timezone.',
+      explanation: 'The two hours of day with the most message activity. Based on individual message timestamps across all sessions, grouped by hour in your local timezone. Note: logs only store UTC timestamps, so this conversion uses your browser\'s current timezone — it is only accurate if you mostly code from one timezone.',
     },
     {
-      title: 'Total Time',
-      value: formatDuration(overview.totalDurationMinutes),
+      title: 'Avg Parallel',
+      value: computeAvgParallelSessions(sessions),
       icon: Clock,
-      explanation: 'Sum of all session durations (wall-clock time from first to last message in each session). Note: overlapping sessions are counted separately, so this may exceed calendar time.',
+      explanation: 'Average number of sessions active in parallel per day. For each active day, counts how many sessions have overlapping time ranges, then averages across all days.',
     },
     {
       title: 'Top Model',
@@ -144,6 +223,36 @@ export function OverviewCards({ overview, sessions }: { overview: OverviewStats;
       icon: Cpu,
       explanation: 'The Claude model used in the most sessions. Determined by the model field in assistant responses. If a session uses multiple models, the last one seen is recorded.',
     },
+    {
+      title: 'Longest Streak',
+      value: `${streaks.longest}d`,
+      icon: Flame,
+      explanation: 'The longest consecutive-day coding streak. A day counts as active if at least one session was started that day. Helps you see your most sustained periods of AI-assisted coding.',
+    },
+    {
+      title: 'Current Streak',
+      value: `${streaks.current}d`,
+      icon: Zap,
+      explanation: 'Your current consecutive-day coding streak, counting back from today (or yesterday if you haven\'t coded today yet). Keep it going!',
+    },
+    {
+      title: 'Active Days',
+      value: formatNumber(streaks.activeDays),
+      icon: Calendar,
+      explanation: 'Total number of unique days with at least one coding session. Shows how consistently you\'ve been using AI coding tools over time.',
+    },
+    {
+      title: 'Rate Limit Days',
+      value: formatNumber(overview.totalRateLimitDays),
+      icon: AlertTriangle,
+      explanation: 'Number of unique days where you hit API rate limits. Rate limits (HTTP 429/529, "Rate limit reached/exceeded") indicate heavy token usage that day. This is a better signal of usage intensity than raw API error counts, which include unrelated server errors.',
+    },
+    {
+      title: 'Interruptions',
+      value: formatNumber(overview.totalUserInterruptions),
+      icon: Ban,
+      explanation: 'Number of times you interrupted or rejected a tool execution. Detected from tool_result messages containing "The user doesn\'t want to proceed". High counts may indicate the agent is taking unwanted actions.',
+    },
   ]
 
   return (
@@ -161,14 +270,12 @@ function MetricCard({ metric }: { metric: MetricDef }) {
   return (
     <Card className="group relative">
       <CardHeader className="flex flex-row items-center justify-between pb-2">
-        <CardTitle className="text-sm font-medium text-muted-foreground">
+        <CardTitle className="flex items-center gap-1 text-sm font-medium text-muted-foreground">
           {metric.title}
-        </CardTitle>
-        <div className="flex items-center gap-1">
           <Dialog open={open} onOpenChange={setOpen}>
             <DialogTrigger
               render={<button />}
-              className="opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-foreground"
+              className="text-muted-foreground/50 hover:text-foreground transition-colors"
             >
               <HelpCircle className="h-3.5 w-3.5" />
             </DialogTrigger>
@@ -187,8 +294,8 @@ function MetricCard({ metric }: { metric: MetricDef }) {
               </div>
             </DialogContent>
           </Dialog>
-          <metric.icon className="h-4 w-4 text-muted-foreground" />
-        </div>
+        </CardTitle>
+        <metric.icon className="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
         <div className="text-2xl font-bold tracking-tight">{metric.value}</div>

package/components/report-view.tsx

@@ -0,0 +1,307 @@
+'use client'
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from '@/components/ui/table'
+import {
+  Trophy, AlertTriangle, Lightbulb, Brain, Flame, Wrench, Clock,
+  MessageSquare, FolderOpen, LayoutList, DollarSign, Terminal,
+  Zap, Search, Ban, Calendar,
+} from 'lucide-react'
+import { formatCost, formatDuration, formatNumber, formatTokens } from '@/lib/format'
+import type { ReportContent } from '@/lib/report'
+import type { CoachInsight, InsightSeverity, InsightCategory } from '@/lib/coach'
+
+// ─── Score Ring ──────────────────────────────────────────────────────
+
+function ScoreRing({ score, size = 140 }: { score: number; size?: number }) {
+  const radius = (size - 14) / 2
+  const circumference = 2 * Math.PI * radius
+  const offset = circumference - (score / 100) * circumference
+  const getColor = (s: number) => {
+    if (s >= 85) return 'var(--chart-2)'
+    if (s >= 70) return 'var(--chart-1)'
+    if (s >= 55) return 'var(--chart-3)'
+    return 'var(--chart-5)'
+  }
+  return (
+    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+      <circle cx={size / 2} cy={size / 2} r={radius} fill="none" stroke="var(--muted)" strokeWidth="9" />
+      <circle cx={size / 2} cy={size / 2} r={radius} fill="none" stroke={getColor(score)} strokeWidth="9"
+        strokeLinecap="round" strokeDasharray={circumference} strokeDashoffset={offset}
+        transform={`rotate(-90 ${size / 2} ${size / 2})`} />
+      <text x={size / 2} y={size / 2 - 4} textAnchor="middle" dominantBaseline="middle" className="fill-foreground font-bold" style={{ fontSize: size * 0.22 }}>{score}</text>
+      <text x={size / 2} y={size / 2 + 16} textAnchor="middle" className="fill-muted-foreground" style={{ fontSize: size * 0.09 }}>/ 100</text>
+    </svg>
+  )
+}
+
+// ─── Insight Card ────────────────────────────────────────────────────
+
+const SEVERITY_BORDER: Record<InsightSeverity, string> = {
+  achievement: 'border-l-chart-2',
+  warning: 'border-l-chart-5',
+  tip: 'border-l-chart-1',
+}
+
+const SEVERITY_ICON: Record<InsightSeverity, typeof Trophy> = {
+  achievement: Trophy,
+  warning: AlertTriangle,
+  tip: Lightbulb,
+}
+
+function InsightCard({ insight }: { insight: CoachInsight }) {
+  const Icon = SEVERITY_ICON[insight.severity]
+  return (
+    <div className={`rounded-lg border border-l-4 ${SEVERITY_BORDER[insight.severity]} p-4`}>
+      <div className="flex items-start gap-3">
+        <Icon className="h-4 w-4 shrink-0 mt-0.5 text-muted-foreground" />
+        <div className="space-y-1">
+          <div className="text-sm font-semibold">{insight.title}</div>
+          <p className="text-xs text-muted-foreground">{insight.description}</p>
+          {insight.recommendation && (
+            <div className="rounded-md bg-muted/50 p-2 text-xs mt-2">{insight.recommendation}</div>
+          )}
+        </div>
+        {insight.metric && (
+          <span className="shrink-0 rounded-md bg-muted px-2 py-0.5 text-xs font-mono">{insight.metric}</span>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ─── Main Report View ────────────────────────────────────────────────
+
+export function ReportView({ content }: { content: ReportContent }) {
+  const g = content.atAGlance
+
+  return (
+    <div className="space-y-6 max-w-4xl">
+      {/* At a Glance */}
+      <Card>
+        <CardHeader>
+          <CardTitle>At a Glance</CardTitle>
+          <CardDescription>{g.dateRange.from} to {g.dateRange.to}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center gap-8">
+            <ScoreRing score={g.fitnessScore} />
+            <div className="flex-1">
+              <div className="text-lg font-semibold mb-1">Fitness: {g.scoreLabel}</div>
+              <div className="flex items-center gap-2 text-sm text-muted-foreground mb-3">
+                <Flame className="h-3.5 w-3.5" />
+                {g.currentStreak > 0 ? `${g.currentStreak}d streak` : 'No active streak'}
+                {g.longestStreak > 0 && <span>(best: {g.longestStreak}d)</span>}
+              </div>
+              <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 text-sm">
+                <div><span className="text-muted-foreground">Sessions</span><div className="font-semibold">{formatNumber(g.totalSessions)}</div></div>
+                <div><span className="text-muted-foreground">Projects</span><div className="font-semibold">{formatNumber(g.totalProjects)}</div></div>
+                <div><span className="text-muted-foreground">Messages</span><div className="font-semibold">{formatNumber(g.totalMessages)}</div></div>
+                <div><span className="text-muted-foreground">Total Time</span><div className="font-semibold">{formatDuration(g.totalDurationMinutes)}</div></div>
+                <div><span className="text-muted-foreground">Tool Calls</span><div className="font-semibold">{formatNumber(g.totalToolCalls)}</div></div>
+                <div><span className="text-muted-foreground">Total Cost</span><div className="font-semibold">{formatCost(g.totalCostUSD)}</div></div>
+                <div><span className="text-muted-foreground">API Errors</span><div className="font-semibold">{formatNumber(g.totalApiErrors)}</div></div>
+                <div><span className="text-muted-foreground">Interruptions</span><div className="font-semibold">{formatNumber(g.totalUserInterruptions)}</div></div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Project Areas */}
+      {content.projectAreas.length > 0 && (
+        <Card>
+          <CardHeader>
+            <div className="flex items-center gap-2">
+              <FolderOpen className="h-5 w-5 text-muted-foreground" />
+              <div>
+                <CardTitle>What You Work On</CardTitle>
+                <CardDescription>Top projects by session count</CardDescription>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Project</TableHead>
+                  <TableHead className="text-right">Sessions</TableHead>
+                  <TableHead className="text-right">Messages</TableHead>
+                  <TableHead className="text-right">Duration</TableHead>
+                  <TableHead>Top Tools</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {content.projectAreas.map(p => (
+                  <TableRow key={p.name}>
+                    <TableCell className="font-medium">{p.name}</TableCell>
+                    <TableCell className="text-right">{p.sessions}</TableCell>
+                    <TableCell className="text-right">{formatNumber(p.totalMessages)}</TableCell>
+                    <TableCell className="text-right">{formatDuration(p.totalDurationMinutes)}</TableCell>
+                    <TableCell className="text-xs text-muted-foreground">
+                      {p.topTools.map(([name, count]) => `${name} (${count})`).join(', ')}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Interaction Style */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Brain className="h-5 w-5 text-muted-foreground" />
+            <div>
+              <CardTitle>How You Use Your Agent</CardTitle>
+              <CardDescription>Interaction patterns and coding style</CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-start gap-6 mb-4">
+            <div>
+              <div className="text-3xl font-bold tracking-wider text-primary">{content.interactionStyle.mbtiType}</div>
+              <div className="text-xs text-muted-foreground mt-1">{content.interactionStyle.mbtiDescription}</div>
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 text-sm">
+            <div>
+              <span className="text-muted-foreground">Avg Messages/Session</span>
+              <div className="font-semibold">{Math.round(content.interactionStyle.avgMessagesPerSession)}</div>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Avg Duration</span>
+              <div className="font-semibold">{formatDuration(content.interactionStyle.avgDurationMinutes)}</div>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Read/Edit Ratio</span>
+              <div className="font-semibold">{content.interactionStyle.readEditRatio.toFixed(1)}x</div>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Bash Usage</span>
+              <div className="font-semibold">{Math.round(content.interactionStyle.bashRatio * 100)}%</div>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Subagent Calls</span>
+              <div className="font-semibold">{formatNumber(content.interactionStyle.agentCallsTotal)}</div>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Peak Hour</span>
+              <div className="font-semibold">{content.interactionStyle.peakHour}:00</div>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Most Active Day</span>
+              <div className="font-semibold">{content.interactionStyle.mostActiveDay}</div>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Avg Cost/Session</span>
+              <div className="font-semibold">{formatCost(content.interactionStyle.avgCostPerSession)}</div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* What Works */}
+      {content.whatWorks.length > 0 && (
+        <Card>
+          <CardHeader>
+            <div className="flex items-center gap-2">
+              <Trophy className="h-5 w-5 text-chart-2" />
+              <div>
+                <CardTitle>What's Working</CardTitle>
+                <CardDescription>Patterns and habits that are paying off</CardDescription>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {content.whatWorks.map(i => <InsightCard key={i.id} insight={i} />)}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Friction Analysis */}
+      {content.frictionAnalysis.length > 0 && (
+        <Card>
+          <CardHeader>
+            <div className="flex items-center gap-2">
+              <AlertTriangle className="h-5 w-5 text-chart-5" />
+              <div>
+                <CardTitle>Where Things Go Wrong</CardTitle>
+                <CardDescription>Friction points that slow you down</CardDescription>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {content.frictionAnalysis.map(i => <InsightCard key={i.id} insight={i} />)}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Suggestions */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Lightbulb className="h-5 w-5 text-chart-1" />
+            <div>
+              <CardTitle>Suggestions</CardTitle>
+              <CardDescription>Actionable ways to improve your workflow</CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* CLAUDE.md rules */}
+          {content.suggestions.claudeMdRules.length > 0 && (
+            <div>
+              <h4 className="text-sm font-semibold mb-2 flex items-center gap-1.5">
+                <Terminal className="h-4 w-4" /> Add to CLAUDE.md
+              </h4>
+              <div className="space-y-2">
+                {content.suggestions.claudeMdRules.map((rule, i) => (
+                  <div key={i} className="rounded-md bg-muted p-3 text-xs font-mono whitespace-pre-wrap">{rule}</div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Coach tips */}
+          {content.suggestions.coachTips.length > 0 && (
+            <div>
+              <h4 className="text-sm font-semibold mb-2 flex items-center gap-1.5">
+                <Zap className="h-4 w-4" /> Workflow Tips
+              </h4>
+              <div className="space-y-3">
+                {content.suggestions.coachTips.map(i => <InsightCard key={i.id} insight={i} />)}
+              </div>
+            </div>
+          )}
+
+          {/* Command tips */}
+          {content.suggestions.commandTips.length > 0 && (
+            <div>
+              <h4 className="text-sm font-semibold mb-2 flex items-center gap-1.5">
+                <Search className="h-4 w-4" /> Commands to Discover
+              </h4>
+              <div className="space-y-2">
+                {content.suggestions.commandTips.map(i => (
+                  <div key={i.id} className="rounded-lg border p-3">
+                    <div className="text-sm font-semibold">{i.title}</div>
+                    <p className="text-xs text-muted-foreground mt-0.5">{i.description}</p>
+                    {i.recommendation && (
+                      <div className="rounded-md bg-muted/50 p-2 text-xs mt-2">{i.recommendation}</div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}