@axplusb/kepler 0.0.1 → 1.0.0

package/pulse/components/overview/peak-hours-chart.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import {
+  BarChart,
+  Bar,
+  Cell,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from 'recharts'
+import { useTheme } from '@/components/theme-provider'
+
+interface Props {
+  hourCounts: Record<string, number>
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function CustomTooltip({ active, payload, label }: any) {
+  if (!active || !payload?.length) return null
+  const hour = parseInt(label)
+  const period = hour < 12 ? 'AM' : 'PM'
+  const h12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour
+  return (
+    <div className="bg-card border border-border rounded-lg px-3 py-2 text-[13px]">
+      <p className="text-muted-foreground">{h12}:00 {period}</p>
+      <p className="text-primary font-bold">{payload[0].value} sessions</p>
+    </div>
+  )
+}
+
+export function PeakHoursChart({ hourCounts }: Props) {
+  const { theme } = useTheme()
+  const isDark = theme === 'dark'
+
+  const data = Array.from({ length: 24 }, (_, i) => ({
+    hour: String(i),
+    count: hourCounts[String(i)] ?? 0,
+  }))
+
+  const sorted = [...data].sort((a, b) => b.count - a.count)
+  const top3Hours = new Set(sorted.slice(0, 3).map(d => d.hour))
+
+  // Light mode: bright amber for top, soft amber for rest
+  // Dark mode: keep the original darker tones
+  const topFill    = isDark ? '#d97706' : '#f59e0b'
+  const normalFill = isDark ? '#78350f' : '#fde68a'
+  const strokeColor = isDark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.4)'
+
+  return (
+    <div>
+      <ResponsiveContainer width="100%" height={160}>
+        <BarChart data={data} margin={{ top: 4, right: 4, left: -16, bottom: 0 }}>
+          <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" vertical={false} />
+          <XAxis
+            dataKey="hour"
+            tick={{ fontSize: 11, fill: 'var(--muted-foreground)' }}
+            tickLine={false}
+            axisLine={false}
+            tickFormatter={v => {
+              const h = parseInt(v)
+              if (h === 0) return '12a'
+              if (h === 12) return '12p'
+              if (h < 12) return `${h}a`
+              return `${h - 12}p`
+            }}
+          />
+          <YAxis hide />
+          <Tooltip content={<CustomTooltip />} cursor={{ fill: 'rgba(180,83,9,0.08)' }} />
+          <Bar dataKey="count" radius={[2, 2, 0, 0]} maxBarSize={14}
+               stroke={strokeColor} strokeWidth={0.75}>
+            {data.map(d => (
+              <Cell
+                key={d.hour}
+                fill={top3Hours.has(d.hour) ? topFill : normalFill}
+              />
+            ))}
+          </Bar>
+        </BarChart>
+      </ResponsiveContainer>
+      <p className="text-[11px] font-mono text-muted-foreground/60 mt-1">
+        top 3 peak hours highlighted
+      </p>
+    </div>
+  )
+}

package/pulse/components/overview/project-activity-donut.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import {
+  PieChart,
+  Pie,
+  Cell,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from 'recharts'
+import type { ProjectSummary } from '@/types/claude'
+import { formatTokens } from '@/lib/decode'
+
+interface Props {
+  projects: ProjectSummary[]
+}
+
+/** Solid hex only — Recharts SVG `fill` does not resolve `var(--*)` reliably (shows as black). */
+const PROJECT_COLORS = [
+  '#d97706',
+  '#16a34a',
+  '#2563eb',
+  '#ea580c',
+  '#34d399',
+  '#64748b',
+]
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function CustomTooltip({ active, payload }: any) {
+  if (!active || !payload?.length) return null
+  const { name, value } = payload[0]
+  return (
+    <div className="bg-card border border-border rounded px-3 py-2 text-[13px]">
+      <p className="text-muted-foreground">{name}</p>
+      <p className="text-foreground font-bold">{formatTokens(value)} tokens</p>
+    </div>
+  )
+}
+
+export function ProjectActivityDonut({ projects }: Props) {
+  const totalTokens = projects.reduce(
+    (s, p) => s + (p.input_tokens ?? 0) + (p.output_tokens ?? 0),
+    0
+  )
+
+  const data = projects
+    .slice(0, 5)
+    .map((p) => ({
+      name: p.display_name,
+      value: (p.input_tokens ?? 0) + (p.output_tokens ?? 0),
+    }))
+    .filter((d) => d.value > 0)
+
+  const othersTokens = totalTokens - data.reduce((s, d) => s + d.value, 0)
+  if (othersTokens > 0) {
+    data.push({ name: 'others', value: othersTokens })
+  }
+
+  if (data.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-48 text-muted-foreground text-sm">
+        no project data
+      </div>
+    )
+  }
+
+  return (
+    <ResponsiveContainer width="100%" height={220}>
+      <PieChart margin={{ top: 4, right: 4, bottom: 4, left: 4 }}>
+        <Pie
+          data={data}
+          cx="50%"
+          cy="50%"
+          innerRadius={50}
+          outerRadius={80}
+          paddingAngle={2}
+          dataKey="value"
+          strokeWidth={0}
+        >
+          {data.map((_, i) => (
+            <Cell key={i} fill={PROJECT_COLORS[i % PROJECT_COLORS.length]} />
+          ))}
+        </Pie>
+        <Tooltip content={<CustomTooltip />} />
+        <Legend
+          iconType="circle"
+          iconSize={8}
+          wrapperStyle={{ fontSize: 12 }}
+          formatter={(value) => (
+            <span style={{ color: 'var(--muted-foreground)', fontSize: 12 }}>{value}</span>
+          )}
+        />
+      </PieChart>
+    </ResponsiveContainer>
+  )
+}

package/pulse/components/overview/stat-card.tsx

@@ -0,0 +1,102 @@
+'use client'
+
+import { TrendingUp, TrendingDown } from 'lucide-react'
+import { LineChart, Line, ResponsiveContainer } from 'recharts'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { useTheme } from '@/components/theme-provider'
+
+interface StatCardProps {
+  title: string
+  value: string
+  description?: string
+  /** Percentage change vs previous period: positive = up, negative = down */
+  trend?: number
+  /** Raw values for sparkline (last N days) */
+  sparkData?: number[]
+  accentColor?: string
+}
+
+/** Recharts sets SVG stroke/fill from strings; `var(--*)` often does not resolve on SVG → black. */
+function resolveChartColor(accentColor: string | undefined, theme: 'light' | 'dark'): string {
+  if (!accentColor) return theme === 'light' ? '#f97316' : '#d97706'
+  switch (accentColor) {
+    case 'var(--viz-sky)':
+      return theme === 'light' ? '#1d4ed8' : '#60a5fa'
+    case 'var(--foreground)':
+      return theme === 'light' ? '#18181b' : '#e8eaed'
+    default:
+      return accentColor
+  }
+}
+
+export function StatCard({ title, value, description, trend, sparkData, accentColor }: StatCardProps) {
+  const { theme } = useTheme()
+  const resolvedAccent = resolveChartColor(accentColor, theme)
+  const hasTrend = trend !== undefined && !isNaN(trend)
+  const isUp = hasTrend && trend! >= 0
+  const trendColor = hasTrend
+    ? isUp
+      ? theme === 'light'
+        ? '#059669'
+        : '#34d399'
+      : theme === 'light'
+        ? '#dc2626'
+        : '#f87171'
+    : undefined
+  const rawSpark = sparkData ?? []
+  // Single point does not draw a line in Recharts; duplicate for a flat segment.
+  const chartData =
+    rawSpark.length === 1
+      ? [{ v: rawSpark[0]! }, { v: rawSpark[0]! }]
+      : rawSpark.map(v => ({ v }))
+
+  return (
+    <Card className="gap-3">
+      <CardHeader className="pb-0">
+        <CardDescription className="text-sm font-medium">{title}</CardDescription>
+        <div className="flex items-end justify-between mt-1">
+          <CardTitle
+            className="text-3xl font-bold tabular-nums leading-none"
+            style={{ color: resolvedAccent }}
+          >
+            {value}
+          </CardTitle>
+          {hasTrend && (
+            <Badge
+              variant="outline"
+              className="gap-1 text-xs font-medium"
+              style={{
+                color: trendColor,
+                borderColor: `${trendColor}40`,
+                backgroundColor: `${trendColor}12`,
+              }}
+            >
+              {isUp ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
+              {Math.abs(trend!).toFixed(1)}%
+            </Badge>
+          )}
+        </div>
+        {description && (
+          <CardDescription className="text-xs mt-1">{description}</CardDescription>
+        )}
+      </CardHeader>
+      {chartData.length > 0 && (
+        <CardContent className="pt-0 pb-4 px-6">
+          <ResponsiveContainer width="100%" height={48}>
+            <LineChart data={chartData} margin={{ top: 4, right: 4, left: 4, bottom: 0 }}>
+              <Line
+                type="monotone"
+                dataKey="v"
+                stroke={resolvedAccent}
+                strokeWidth={1.5}
+                dot={false}
+                strokeOpacity={0.7}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </CardContent>
+      )}
+    </Card>
+  )
+}

package/pulse/components/overview/usage-over-time-chart.tsx

@@ -0,0 +1,166 @@
+'use client'
+
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from 'recharts'
+import type { DailyActivity } from '@/types/claude'
+import { format, parseISO, subDays } from 'date-fns'
+
+interface Props {
+  data: DailyActivity[]
+  days?: number
+  dateFrom?: string
+  dateTo?: string
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function CustomTooltip({ active, payload, label }: any) {
+  if (!active || !payload?.length) return null
+  return (
+    <div className="bg-card border border-border rounded-lg px-3 py-2 text-[13px]">
+      <p className="text-muted-foreground mb-1">{label}</p>
+      {payload.map((p: { name: string; value: number; color: string }) => (
+        <p key={p.name} style={{ color: p.color }}>
+          {p.name}: <span className="font-bold">{p.value.toLocaleString()}</span>
+        </p>
+      ))}
+    </div>
+  )
+}
+
+function toIsoDate(val: string): string | null {
+  const m = val.match(/^(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})$/)
+  if (m) {
+    const [, month, day, year] = m
+    return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
+  }
+  const iso = val.match(/^(\d{4})-(\d{2})-(\d{2})/)
+  return iso ? val.slice(0, 10) : null
+}
+
+function parseDateInput(val: string): Date | null {
+  const parsed = new Date(val)
+  return isNaN(parsed.getTime()) ? null : parsed
+}
+
+export function UsageOverTimeChart({ data, days = 90, dateFrom, dateTo }: Props) {
+  let filtered: { date: string; messages: number; sessions: number }[]
+
+  if (dateFrom && dateTo) {
+    const fromStr = toIsoDate(dateFrom.trim())
+    const toStr = toIsoDate(dateTo.trim())
+    if (fromStr && toStr && fromStr <= toStr) {
+      filtered = data
+        .filter((d) => {
+          const dataDate = /^\d{4}-\d{2}-\d{2}/.test(d.date)
+            ? d.date.slice(0, 10)
+            : toIsoDate(d.date)
+          if (!dataDate) return false
+          return dataDate >= fromStr && dataDate <= toStr
+        })
+        .map((d) => ({
+          date: (() => {
+            try {
+              const parsed = d.date.includes('-') ? parseISO(d.date) : new Date(d.date)
+              return isNaN(parsed.getTime()) ? d.date : format(parsed, 'MMM d')
+            } catch {
+              return d.date
+            }
+          })(),
+          messages: d.messageCount,
+          sessions: d.sessionCount,
+        }))
+    } else {
+      filtered = []
+    }
+  } else {
+    const cutoff = subDays(new Date(), days)
+    filtered = data
+      .filter((d) => parseISO(d.date) >= cutoff)
+      .map((d) => ({
+        date: format(parseISO(d.date), 'MMM d'),
+        messages: d.messageCount,
+        sessions: d.sessionCount,
+      }))
+  }
+
+  if (filtered.length === 0) {
+    const from = dateFrom && dateTo ? parseDateInput(dateFrom) : null
+    const to = dateFrom && dateTo ? parseDateInput(dateTo) : null
+    const isFuture = from && to && from > new Date()
+    return (
+      <div className="flex flex-col items-center justify-center h-48 text-muted-foreground text-sm gap-1">
+        <span>no data</span>
+        {isFuture && (
+          <span className="text-[12px] text-muted-foreground/60">(selected range is in the future)</span>
+        )}
+        {dateFrom && dateTo && !isFuture && (
+          <span className="text-[12px] text-muted-foreground/60">(no activity in this date range)</span>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <ResponsiveContainer width="100%" height={220}>
+      <AreaChart data={filtered} margin={{ top: 8, right: 8, left: -10, bottom: 0 }}>
+        <defs>
+          <linearGradient id="gradMessages" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%"  stopColor="#d97706" stopOpacity={0.3} />
+            <stop offset="95%" stopColor="#d97706" stopOpacity={0} />
+          </linearGradient>
+          <linearGradient id="gradSessions" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%"  stopColor="#34d399" stopOpacity={0.2} />
+            <stop offset="95%" stopColor="#34d399" stopOpacity={0} />
+          </linearGradient>
+        </defs>
+        <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" vertical={false} />
+        <XAxis
+          dataKey="date"
+          tick={{ fontSize: 12, fill: 'var(--muted-foreground)' }}
+          tickLine={false}
+          axisLine={false}
+          interval="preserveStartEnd"
+        />
+        <YAxis
+          tick={{ fontSize: 12, fill: 'var(--muted-foreground)' }}
+          tickLine={false}
+          axisLine={false}
+          tickFormatter={v => v >= 1000 ? `${(v/1000).toFixed(0)}k` : String(v)}
+        />
+        <Tooltip content={<CustomTooltip />} />
+        <Legend
+          wrapperStyle={{ fontSize: 12, paddingTop: 8 }}
+          formatter={(value) => (
+            <span style={{ color: 'var(--muted-foreground)', fontSize: 12 }}>{value}</span>
+          )}
+        />
+        <Area
+          type="monotone"
+          dataKey="messages"
+          stroke="#d97706"
+          strokeWidth={2}
+          fill="url(#gradMessages)"
+          dot={false}
+          activeDot={{ r: 3, fill: '#fbbf24' }}
+        />
+        <Area
+          type="monotone"
+          dataKey="sessions"
+          stroke="#34d399"
+          strokeWidth={1.5}
+          fill="url(#gradSessions)"
+          dot={false}
+          activeDot={{ r: 3, fill: '#6ee7b7' }}
+        />
+      </AreaChart>
+    </ResponsiveContainer>
+  )
+}

package/pulse/components/projects/project-card.tsx

@@ -0,0 +1,175 @@
+'use client'
+
+import Link from 'next/link'
+import { formatCost, formatDuration, formatRelativeDate } from '@/lib/decode'
+import { categoryColorMix, toolBarColor } from '@/lib/tool-categories'
+import type { ProjectSummary } from '@/types/claude'
+import { Card, CardContent, CardHeader } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Clock, MessageSquare, GitBranch, Plug, Bot } from 'lucide-react'
+
+const LANG_COLORS: Record<string, string> = {
+  TypeScript:  'bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-500/25',
+  JavaScript:  'bg-yellow-400/10 text-yellow-700 dark:text-yellow-400 border-yellow-400/30',
+  Python:      'bg-green-500/10 text-green-700 dark:text-green-400 border-green-500/25',
+  Rust:        'bg-orange-500/10 text-orange-700 dark:text-orange-400 border-orange-500/25',
+  Go:          'bg-cyan-500/10 text-cyan-700 dark:text-cyan-400 border-cyan-500/25',
+  Java:        'bg-red-500/10 text-red-700 dark:text-red-400 border-red-500/25',
+  'C++':       'bg-pink-500/10 text-pink-700 dark:text-pink-400 border-pink-500/25',
+  C:           'bg-slate-500/10 text-slate-700 dark:text-slate-400 border-slate-500/25',
+  'C#':        'bg-violet-500/10 text-violet-700 dark:text-violet-400 border-violet-500/25',
+  Ruby:        'bg-red-400/10 text-red-600 dark:text-red-400 border-red-400/25',
+  PHP:         'bg-indigo-500/10 text-indigo-700 dark:text-indigo-400 border-indigo-500/25',
+  Swift:       'bg-orange-400/10 text-orange-600 dark:text-orange-400 border-orange-400/25',
+  Kotlin:      'bg-purple-500/10 text-purple-700 dark:text-purple-400 border-purple-500/25',
+  CSS:         'bg-blue-700/10 dark:bg-sky-500/10 text-blue-700 dark:text-sky-400 border-blue-700/25 dark:border-sky-500/25',
+  HTML:        'bg-rose-500/10 text-rose-700 dark:text-rose-400 border-rose-500/25',
+  Shell:       'bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border-emerald-500/25',
+  Bash:        'bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border-emerald-500/25',
+  Markdown:    'bg-gray-400/10 text-gray-600 dark:text-gray-400 border-gray-400/25',
+  JSON:        'bg-amber-400/10 text-amber-700 dark:text-amber-400 border-amber-400/25',
+  YAML:        'bg-lime-500/10 text-lime-700 dark:text-lime-500 border-lime-500/25',
+}
+
+const FALLBACK_PALETTE = [
+  'bg-teal-500/10 text-teal-700 dark:text-teal-400 border-teal-500/25',
+  'bg-fuchsia-500/10 text-fuchsia-700 dark:text-fuchsia-400 border-fuchsia-500/25',
+  'bg-lime-500/10 text-lime-700 dark:text-lime-400 border-lime-500/25',
+  'bg-blue-700/10 dark:bg-sky-600/10 text-blue-700 dark:text-sky-400 border-blue-700/25 dark:border-sky-600/25',
+  'bg-rose-500/10 text-rose-700 dark:text-rose-400 border-rose-500/25',
+  'bg-amber-600/10 text-amber-700 dark:text-amber-400 border-amber-600/25',
+]
+
+function langColor(lang: string): string {
+  if (LANG_COLORS[lang]) return LANG_COLORS[lang]
+  let hash = 0
+  for (let i = 0; i < lang.length; i++) hash = (hash * 31 + lang.charCodeAt(i)) >>> 0
+  return FALLBACK_PALETTE[hash % FALLBACK_PALETTE.length]
+}
+
+export function ProjectCard({ project }: { project: ProjectSummary }) {
+  const topTools = Object.entries(project.tool_counts ?? {})
+    .sort(([, a], [, b]) => b - a)
+    .slice(0, 5)
+  const maxToolCount = topTools[0]?.[1] ?? 1
+
+  const topLangs = Object.entries(project.languages ?? {})
+    .sort(([, a], [, b]) => b - a)
+    .slice(0, 4)
+
+  return (
+    <Link href={`/projects/${project.slug}`} className="block group">
+      <Card className="h-full gap-0 py-0 hover:border-primary/40 transition-colors overflow-hidden">
+        <CardHeader className="px-4 pt-4 pb-3 gap-2">
+          {/* Title row */}
+          <div className="flex items-start justify-between gap-2">
+            <h3 className="text-sm font-semibold text-foreground group-hover:text-primary transition-colors truncate leading-snug">
+              {project.display_name}
+            </h3>
+            <span className="text-[11px] text-muted-foreground/60 whitespace-nowrap shrink-0 mt-0.5">
+              {formatRelativeDate(project.last_active)}
+            </span>
+          </div>
+
+          {/* Path */}
+          <p className="text-[11px] text-muted-foreground/50 font-mono truncate -mt-1">
+            {project.project_path}
+          </p>
+
+          {/* Language + feature badges */}
+          <div className="flex flex-wrap gap-1.5">
+            {topLangs.map(([lang]) => (
+              <Badge key={lang} variant="outline" className={`text-[11px] px-1.5 py-0 h-5 ${langColor(lang)}`}>
+                {lang}
+              </Badge>
+            ))}
+            {project.uses_mcp && (
+              <Badge variant="outline" className="text-[11px] px-1.5 py-0 h-5 bg-blue-500/10 text-blue-500 border-blue-500/20 gap-1">
+                <Plug className="w-2.5 h-2.5" /> MCP
+              </Badge>
+            )}
+            {project.uses_task_agent && (
+              <Badge variant="outline" className="text-[11px] px-1.5 py-0 h-5 bg-purple-500/10 text-purple-500 border-purple-500/20 gap-1">
+                <Bot className="w-2.5 h-2.5" /> Agent
+              </Badge>
+            )}
+            {project.branches.length > 0 && (
+              <>
+                <span
+                  className="h-4 w-px shrink-0 self-center bg-border/50"
+                  aria-hidden
+                />
+                <GitBranch className="h-3 w-3 shrink-0 self-center text-muted-foreground/45" aria-hidden />
+                {project.branches.slice(0, 3).map(b => (
+                  <Badge
+                    key={b}
+                    variant="outline"
+                    className="h-5 max-w-28 truncate border-border/50 px-1.5 py-0 font-mono text-[11px] text-muted-foreground/80"
+                    title={b}
+                  >
+                    {b}
+                  </Badge>
+                ))}
+                {project.branches.length > 3 && (
+                  <span className="self-center text-[11px] text-muted-foreground/45">
+                    +{project.branches.length - 3}
+                  </span>
+                )}
+              </>
+            )}
+          </div>
+        </CardHeader>
+
+        <CardContent className="px-4 pb-4 space-y-3">
+          {/* Stats row */}
+          <div className="flex items-center gap-3 text-[12px] text-muted-foreground">
+            <span className="flex items-center gap-1">
+              <MessageSquare className="w-3 h-3" />
+              {project.session_count} sessions
+            </span>
+            <span className="text-border">·</span>
+            <span className="flex items-center gap-1">
+              <Clock className="w-3 h-3" />
+              {formatDuration(project.total_duration_minutes)}
+            </span>
+            {(project.total_lines_added ?? 0) > 0 && (
+              <>
+                <span className="text-border">·</span>
+                <span className="text-emerald-500 font-mono">+{project.total_lines_added.toLocaleString()}</span>
+                <span className="text-red-400 font-mono">-{project.total_lines_removed.toLocaleString()}</span>
+              </>
+            )}
+          </div>
+
+          {/* Tool bar chart */}
+          {topTools.length > 0 && (
+            <div className="space-y-1">
+              {topTools.map(([tool, count]) => {
+                const color = toolBarColor(tool)
+                const width = Math.max(8, Math.round((count / maxToolCount) * 100))
+                return (
+                  <div key={tool} className="flex items-center gap-2 text-[11px]">
+                    <span className="text-muted-foreground/50 w-16 truncate">{tool}</span>
+                    <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
+                      <div
+                        className="h-full rounded-full transition-all"
+                        style={{ width: `${width}%`, backgroundColor: categoryColorMix(color, 58) }}
+                      />
+                    </div>
+                    <span className="text-muted-foreground/40 w-7 text-right tabular-nums">{count}</span>
+                  </div>
+                )
+              })}
+            </div>
+          )}
+
+          {/* Cost footer */}
+          <div className="flex items-center justify-between pt-2 border-t border-border/30">
+            <span className="text-[11px] text-muted-foreground/50">Est. cost</span>
+            <span className="text-sm font-bold text-primary tabular-nums">{formatCost(project.estimated_cost)}</span>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  )
+}