@axplusb/kepler 0.0.1 → 1.0.0

package/pulse/components/sessions/session-table.tsx

@@ -0,0 +1,299 @@
+'use client'
+
+import { useState, useMemo, useEffect, useRef } from 'react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+import { SessionBadges } from './session-badges'
+import { formatCost, formatTokens, formatDuration, formatDate, projectDisplayName } from '@/lib/decode'
+import type { SessionWithFacet } from '@/types/claude'
+
+const PAGE_SIZE = 25
+
+type SortKey = 'start_time' | 'duration_minutes' | 'total_messages' | 'estimated_cost' | 'tool_calls'
+type SortDir = 'asc' | 'desc'
+
+interface Props {
+  sessions: SessionWithFacet[]
+}
+
+function SortHeader({
+  label, k, sortKey, sortDir, onSort,
+}: {
+  label: string
+  k: SortKey
+  sortKey: SortKey
+  sortDir: SortDir
+  onSort: (k: SortKey) => void
+}) {
+  const active = sortKey === k
+  return (
+    <button
+      onClick={() => onSort(k)}
+      className={`text-left text-[12px] font-bold uppercase tracking-wider whitespace-nowrap hover:text-foreground transition-colors ${active ? 'text-primary' : 'text-muted-foreground'}`}
+    >
+      {label} {active ? (sortDir === 'desc' ? '↓' : '↑') : ''}
+    </button>
+  )
+}
+
+export function SessionTable({ sessions }: Props) {
+  const [sortKey, setSortKey] = useState<SortKey>('start_time')
+  const [sortDir, setSortDir] = useState<SortDir>('desc')
+  const [page, setPage] = useState(1)
+  const [filterCompacted, setFilterCompacted] = useState(false)
+  const [filterAgent, setFilterAgent] = useState(false)
+  const [filterMcp, setFilterMcp] = useState(false)
+  const [search, setSearch] = useState('')
+  const [focusedIdx, setFocusedIdx] = useState<number | null>(null)
+  const rowRefs = useRef<(HTMLTableRowElement | null)[]>([])
+  const router = useRouter()
+
+  const filtered = useMemo(() => {
+    let s = sessions
+    if (filterCompacted) s = s.filter(x => x.has_compaction)
+    if (filterAgent)     s = s.filter(x => x.uses_task_agent)
+    if (filterMcp)       s = s.filter(x => x.uses_mcp)
+    if (search) {
+      const q = search.toLowerCase()
+      s = s.filter(x =>
+        x.project_path?.toLowerCase().includes(q) ||
+        x.first_prompt?.toLowerCase().includes(q) ||
+        x.slug?.toLowerCase().includes(q)
+      )
+    }
+    return s
+  }, [sessions, filterCompacted, filterAgent, filterMcp, search])
+
+  const sorted = useMemo(() => {
+    return [...filtered].sort((a, b) => {
+      let av: number, bv: number
+      if (sortKey === 'start_time') {
+        av = new Date(a.start_time).getTime()
+        bv = new Date(b.start_time).getTime()
+      } else if (sortKey === 'total_messages') {
+        av = (a.user_message_count ?? 0) + (a.assistant_message_count ?? 0)
+        bv = (b.user_message_count ?? 0) + (b.assistant_message_count ?? 0)
+      } else if (sortKey === 'tool_calls') {
+        av = Object.values(a.tool_counts ?? {}).reduce((s, c) => s + c, 0)
+        bv = Object.values(b.tool_counts ?? {}).reduce((s, c) => s + c, 0)
+      } else {
+        av = (a[sortKey] as number) ?? 0
+        bv = (b[sortKey] as number) ?? 0
+      }
+      return sortDir === 'desc' ? bv - av : av - bv
+    })
+  }, [filtered, sortKey, sortDir])
+
+  const totalPages = Math.ceil(sorted.length / PAGE_SIZE)
+  const paginated = sorted.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)
+
+  // j/k keyboard navigation for rows
+  useEffect(() => {
+    function handler(e: KeyboardEvent) {
+      const el = document.activeElement
+      const tag = el?.tagName.toLowerCase()
+      if (tag === 'input' || tag === 'textarea' || (el as HTMLElement)?.isContentEditable) return
+
+      if (e.key === 'j') {
+        e.preventDefault()
+        setFocusedIdx(i => {
+          const next = i === null ? 0 : Math.min(i + 1, paginated.length - 1)
+          rowRefs.current[next]?.scrollIntoView({ block: 'nearest' })
+          return next
+        })
+      } else if (e.key === 'k') {
+        e.preventDefault()
+        setFocusedIdx(i => {
+          const next = i === null ? 0 : Math.max(i - 1, 0)
+          rowRefs.current[next]?.scrollIntoView({ block: 'nearest' })
+          return next
+        })
+      } else if (e.key === 'Enter' && focusedIdx !== null) {
+        const s = paginated[focusedIdx]
+        if (s) router.push(`/sessions/${s.session_id}`)
+      } else if (e.key === 'Escape' && focusedIdx !== null) {
+        setFocusedIdx(null)
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [focusedIdx, paginated, router])
+
+  function toggleSort(key: SortKey) {
+    if (sortKey === key) setSortDir(d => d === 'desc' ? 'asc' : 'desc')
+    else { setSortKey(key); setSortDir('desc') }
+    setPage(1)
+    setFocusedIdx(null)
+  }
+
+  return (
+    <div className="space-y-3">
+      {/* Filters */}
+      <div className="flex flex-wrap gap-2 items-center">
+        <input
+          type="text"
+          placeholder="Search project or prompt..."
+          value={search}
+          onChange={e => { setSearch(e.target.value); setPage(1); setFocusedIdx(null) }}
+          className="bg-muted border border-border rounded px-2 py-1 text-[13px] text-foreground placeholder:text-muted-foreground/50 outline-none focus:border-primary/50 w-52"
+        />
+        <label className="flex items-center gap-1.5 text-[13px] text-muted-foreground cursor-pointer hover:text-foreground transition-colors">
+          <input
+            type="checkbox"
+            checked={filterCompacted}
+            onChange={e => { setFilterCompacted(e.target.checked); setPage(1); setFocusedIdx(null) }}
+            className="accent-amber-500"
+          />
+          ⚡ compacted
+        </label>
+        <label className="flex items-center gap-1.5 text-[13px] text-muted-foreground cursor-pointer hover:text-foreground transition-colors">
+          <input
+            type="checkbox"
+            checked={filterAgent}
+            onChange={e => { setFilterAgent(e.target.checked); setPage(1); setFocusedIdx(null) }}
+            className="accent-purple-500"
+          />
+          🤖 agent
+        </label>
+        <label className="flex items-center gap-1.5 text-[13px] text-muted-foreground cursor-pointer hover:text-foreground transition-colors">
+          <input
+            type="checkbox"
+            checked={filterMcp}
+            onChange={e => { setFilterMcp(e.target.checked); setPage(1); setFocusedIdx(null) }}
+            className="accent-blue-500"
+          />
+          🔌 mcp
+        </label>
+        <span className="ml-auto text-[13px] text-muted-foreground">
+          {filtered.length} sessions
+        </span>
+      </div>
+
+      {/* Table */}
+      <div className="border border-border rounded overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full text-[13px]">
+            <thead>
+              <tr className="border-b border-border bg-muted">
+                <th className="px-3 py-2 text-left"><SortHeader label="Date" k="start_time" sortKey={sortKey} sortDir={sortDir} onSort={toggleSort} /></th>
+                <th className="px-3 py-2 text-left"><span className="text-[12px] font-bold uppercase tracking-wider text-muted-foreground">Project</span></th>
+                <th className="px-3 py-2 text-right"><SortHeader label="Dur" k="duration_minutes" sortKey={sortKey} sortDir={sortDir} onSort={toggleSort} /></th>
+                <th className="px-3 py-2 text-right"><SortHeader label="Msgs" k="total_messages" sortKey={sortKey} sortDir={sortDir} onSort={toggleSort} /></th>
+                <th className="px-3 py-2 text-right"><SortHeader label="Tools" k="tool_calls" sortKey={sortKey} sortDir={sortDir} onSort={toggleSort} /></th>
+                <th className="px-3 py-2 text-right"><SortHeader label="Cost" k="estimated_cost" sortKey={sortKey} sortDir={sortDir} onSort={toggleSort} /></th>
+                <th className="px-3 py-2 text-left"><span className="text-[12px] font-bold uppercase tracking-wider text-muted-foreground">Flags</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              {paginated.map((s, i) => {
+                const totalMsgs = (s.user_message_count ?? 0) + (s.assistant_message_count ?? 0)
+                const totalTools = Object.values(s.tool_counts ?? {}).reduce((sum, c) => sum + c, 0)
+                const totalTokens = (s.input_tokens ?? 0) + (s.output_tokens ?? 0)
+                const projectName = projectDisplayName(s.project_path ?? '')
+
+                return (
+                  <tr
+                    key={s.session_id}
+                    ref={el => { rowRefs.current[i] = el }}
+                    className={[
+                      'border-b border-border/50 hover:bg-muted transition-colors',
+                      i % 2 === 0 ? '' : 'bg-muted/30',
+                      i === focusedIdx ? 'ring-2 ring-primary ring-inset bg-muted' : '',
+                    ].join(' ')}
+                  >
+                    <td className="px-3 py-2 font-mono text-muted-foreground whitespace-nowrap">
+                      {formatDate(s.start_time)}
+                    </td>
+                    <td className="px-3 py-2 max-w-[200px]">
+                      <Link
+                        href={`/sessions/${s.session_id}`}
+                        className="text-foreground hover:text-primary transition-colors font-medium truncate block"
+                        title={s.project_path ?? ''}
+                      >
+                        {projectName}
+                      </Link>
+                      {s.first_prompt && (
+                        <p className="text-muted-foreground/60 truncate text-[12px]">
+                          {s.first_prompt.slice(0, 60)}
+                        </p>
+                      )}
+                    </td>
+                    <td className="px-3 py-2 text-right text-muted-foreground whitespace-nowrap">
+                      {formatDuration(s.duration_minutes ?? 0)}
+                    </td>
+                    <td className="px-3 py-2 text-right text-muted-foreground">
+                      {totalMsgs.toLocaleString()}
+                    </td>
+                    <td className="px-3 py-2 text-right text-muted-foreground">
+                      {totalTools.toLocaleString()}
+                    </td>
+                    <td className="px-3 py-2 text-right font-mono text-primary">
+                      {formatCost(s.estimated_cost)}
+                    </td>
+                    <td className="px-3 py-2">
+                      <SessionBadges
+                        has_compaction={s.has_compaction}
+                        uses_task_agent={s.uses_task_agent}
+                        uses_mcp={s.uses_mcp}
+                        uses_web_search={s.uses_web_search}
+                        uses_web_fetch={s.uses_web_fetch}
+                        has_thinking={s.has_thinking}
+                      />
+                    </td>
+                  </tr>
+                )
+              })}
+              {paginated.length === 0 && (
+                <tr>
+                  <td colSpan={7} className="px-3 py-8 text-center text-muted-foreground/50 text-[13px]">
+                    No sessions match filters
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between text-[13px]">
+          <span className="text-muted-foreground">
+            Page {page} of {totalPages} · {sorted.length} sessions
+          </span>
+          <div className="flex gap-1">
+            <button
+              onClick={() => { setPage(p => Math.max(1, p - 1)); setFocusedIdx(null) }}
+              disabled={page === 1}
+              className="px-2 py-1 rounded border border-border text-muted-foreground hover:text-foreground hover:border-primary/40 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+            >
+              ←
+            </button>
+            {(() => {
+              const maxVisible = Math.min(5, totalPages)
+              const startPage = Math.max(1, Math.min(page - 2, totalPages - maxVisible + 1))
+              const numPages = Math.min(maxVisible, totalPages - startPage + 1)
+              const pages = Array.from({ length: numPages }, (_, i) => startPage + i)
+              return pages.map((p) => (
+                <button
+                  key={p}
+                  onClick={() => { setPage(p); setFocusedIdx(null) }}
+                  className={`px-2 py-1 rounded border transition-colors ${p === page ? 'border-primary text-primary' : 'border-border text-muted-foreground hover:text-foreground hover:border-primary/40'}`}
+                >
+                  {p}
+                </button>
+              ))
+            })()}
+            <button
+              onClick={() => { setPage(p => Math.min(totalPages, p + 1)); setFocusedIdx(null) }}
+              disabled={page === totalPages}
+              className="px-2 py-1 rounded border border-border text-muted-foreground hover:text-foreground hover:border-primary/40 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+            >
+              →
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/pulse/components/theme-provider.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { createContext, useContext, useEffect, useState } from 'react'
+
+type Theme = 'dark' | 'light'
+
+const ThemeContext = createContext<{ theme: Theme; toggle: () => void }>({
+  theme: 'dark',
+  toggle: () => {},
+})
+
+export function useTheme() {
+  return useContext(ThemeContext)
+}
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setTheme] = useState<Theme>('dark')
+
+  useEffect(() => {
+    const id = window.setTimeout(() => {
+      const stored = localStorage.getItem('theme')
+      const next: Theme = stored === 'light' ? 'light' : 'dark'
+      setTheme(next)
+      document.documentElement.classList.toggle('dark', next === 'dark')
+    }, 0)
+
+    return () => window.clearTimeout(id)
+  }, [])
+
+  function toggle() {
+    setTheme(prev => {
+      const next: Theme = prev === 'dark' ? 'light' : 'dark'
+      localStorage.setItem('theme', next)
+      document.documentElement.classList.toggle('dark', next === 'dark')
+      return next
+    })
+  }
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggle }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}

package/pulse/components/tools/feature-adoption-table.tsx

@@ -0,0 +1,58 @@
+interface Props {
+  adoption: Record<string, { sessions: number; pct: number }>
+  totalSessions: number
+}
+
+const FEATURE_LABELS: Record<string, { label: string; icon: string }> = {
+  task_agents:      { label: 'Task Agents',        icon: '🤖' },
+  mcp:              { label: 'MCP Servers',         icon: '🔌' },
+  web_search:       { label: 'Web Search',          icon: '🔍' },
+  web_fetch:        { label: 'Web Fetch',           icon: '🌐' },
+  plan_mode:        { label: 'Plan Mode',           icon: '📋' },
+  git_commits:      { label: 'Git Commits',         icon: '📦' },
+  extended_thinking: { label: 'Extended Thinking',  icon: '🧠' },
+}
+
+export function FeatureAdoptionTable({ adoption, totalSessions }: Props) {
+  const rows = Object.entries(adoption)
+    .map(([key, data]) => ({ key, ...data, ...FEATURE_LABELS[key] }))
+    .filter(r => r.label)
+    .sort((a, b) => b.sessions - a.sessions)
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full text-[13px]">
+        <thead>
+          <tr className="border-b border-border">
+            <th className="py-2 text-left text-[12px] font-bold text-muted-foreground uppercase tracking-wider">Feature</th>
+            <th className="py-2 text-right text-[12px] font-bold text-muted-foreground uppercase tracking-wider">Sessions</th>
+            <th className="py-2 text-right text-[12px] font-bold text-muted-foreground uppercase tracking-wider">% of Total</th>
+            <th className="py-2 pl-4 text-left text-[12px] font-bold text-muted-foreground uppercase tracking-wider w-32">Adoption</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map(r => {
+            const pct = (r.pct * 100).toFixed(1)
+            const width = Math.round(r.pct * 100)
+            return (
+              <tr key={r.key} className="border-b border-border/30 hover:bg-muted/30 transition-colors">
+                <td className="py-2">
+                  <span className="mr-1.5">{r.icon}</span>
+                  <span className="text-foreground/80">{r.label}</span>
+                </td>
+                <td className="py-2 text-right text-foreground font-bold">{r.sessions}</td>
+                <td className="py-2 text-right text-[#d97706]">{pct}%</td>
+                <td className="py-2 pl-4">
+                  <div className="h-2 bg-muted rounded-full overflow-hidden w-24">
+                    <div className="h-full rounded-full bg-[#d97706]/60" style={{ width: `${width}%` }} />
+                  </div>
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+      <p className="text-[12px] text-muted-foreground/40 mt-2">{totalSessions} total sessions analyzed</p>
+    </div>
+  )
+}

package/pulse/components/tools/mcp-server-panel.tsx

@@ -0,0 +1,45 @@
+import type { McpServerSummary } from '@/types/claude'
+
+interface Props {
+  servers: McpServerSummary[]
+}
+
+export function McpServerPanel({ servers }: Props) {
+  if (servers.length === 0) {
+    return <p className="text-muted-foreground/50 text-[13px]">No MCP server usage detected</p>
+  }
+
+  return (
+    <div className="space-y-4">
+      {servers.map(srv => {
+        const maxCalls = srv.tools[0]?.calls ?? 1
+        return (
+          <div key={srv.server_name} className="border border-border/50 rounded-lg p-3">
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-[13px] font-bold text-[#34d399]">
+                🔌 {srv.server_name}
+              </span>
+              <span className="text-[12px] text-muted-foreground/60">
+                {srv.tools.length} tools · {srv.total_calls.toLocaleString()} calls · {srv.session_count} sessions
+              </span>
+            </div>
+            <div className="space-y-1">
+              {srv.tools.map(t => {
+                const width = Math.max(4, Math.round((t.calls / maxCalls) * 100))
+                return (
+                  <div key={t.name} className="flex items-center gap-2 text-[12px]">
+                    <span className="text-muted-foreground/70 w-32 truncate font-mono">{t.name}</span>
+                    <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
+                      <div className="h-full rounded-full bg-[#34d399]/50" style={{ width: `${width}%` }} />
+                    </div>
+                    <span className="text-muted-foreground/50 w-12 text-right">{t.calls}</span>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/pulse/components/tools/tool-ranking-chart.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { BarChart, Bar, XAxis, YAxis, Tooltip, CartesianGrid, Cell, ResponsiveContainer } from 'recharts'
+import { toolBarColor } from '@/lib/tool-categories'
+import type { ToolSummary } from '@/types/claude'
+
+interface Props {
+  tools: ToolSummary[]
+}
+
+export function ToolRankingChart({ tools }: Props) {
+  const top = tools.slice(0, 20)
+
+  return (
+    <div>
+      <h3 className="text-[13px] font-bold text-muted-foreground uppercase tracking-widest mb-3">
+        Tool Usage — Ranked by Total Calls
+      </h3>
+      <ResponsiveContainer width="100%" height={Math.max(200, top.length * 26)}>
+        <BarChart data={top} layout="vertical" margin={{ top: 0, right: 60, bottom: 0, left: 8 }}>
+          <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" horizontal={false} />
+          <XAxis
+            type="number"
+            tick={{ fontSize: 11, fill: 'var(--muted-foreground)' }}
+            tickLine={false}
+            axisLine={false}
+            tickFormatter={v => v.toLocaleString()}
+          />
+          <YAxis
+            type="category"
+            dataKey="name"
+            tick={{ fontSize: 12, fill: 'var(--muted-foreground)' }}
+            tickLine={false}
+            axisLine={false}
+            width={110}
+          />
+          <Tooltip
+            contentStyle={{ background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 4, fontSize: 12 }}
+            formatter={(val: number | undefined, _name?: string, props?: { payload?: { name?: string } }) => [
+              (val ?? 0).toLocaleString() + ' calls',
+              props?.payload?.name ?? '',
+            ]}
+          />
+          <Bar dataKey="total_calls" radius={[0, 3, 3, 0]}>
+            {top.map((tool, i) => (
+              <Cell
+                key={i}
+                fill={toolBarColor(tool.name)}
+                fillOpacity={0.92}
+              />
+            ))}
+          </Bar>
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}

package/pulse/components/tools/version-history-table.tsx

@@ -0,0 +1,32 @@
+import { formatDate } from '@/lib/decode'
+import type { VersionRecord } from '@/types/claude'
+
+interface Props {
+  versions: VersionRecord[]
+}
+
+export function VersionHistoryTable({ versions }: Props) {
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full text-[13px] font-mono">
+        <thead>
+          <tr className="border-b border-border">
+            {['Version', 'Sessions', 'First Seen', 'Last Seen'].map(h => (
+              <th key={h} className={`py-2 text-[12px] font-bold text-muted-foreground uppercase tracking-wider ${h === 'Version' ? 'text-left' : 'text-right'}`}>{h}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {versions.map((v, i) => (
+            <tr key={v.version} className={`border-b border-border/30 hover:bg-muted/30 transition-colors ${i === 0 ? 'text-[#34d399]' : 'text-foreground/70'}`}>
+              <td className="py-2 font-bold">{v.version}</td>
+              <td className="py-2 text-right">{v.session_count}</td>
+              <td className="py-2 text-right text-muted-foreground">{v.first_seen ? formatDate(v.first_seen) : '—'}</td>
+              <td className="py-2 text-right text-muted-foreground">{v.last_seen ? formatDate(v.last_seen) : '—'}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}

package/pulse/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

package/pulse/components/ui/badge.tsx

@@ -0,0 +1,48 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }