better-codex 0.1.0

package/apps/web/src/components/ui/contribution-graph.tsx

@@ -0,0 +1,182 @@
+import { useMemo } from 'react'
+import type { DailyDataPoint } from '../../hooks/use-analytics'
+
+interface ContributionGraphProps {
+  data: DailyDataPoint[]
+  days?: number
+  label?: string
+  colorScheme?: 'green' | 'blue' | 'purple'
+}
+
+const COLOR_SCHEMES = {
+  green: ['bg-bg-elevated', 'bg-emerald-900/50', 'bg-emerald-700/70', 'bg-emerald-500/80', 'bg-emerald-400'],
+  blue: ['bg-bg-elevated', 'bg-blue-900/50', 'bg-blue-700/70', 'bg-blue-500/80', 'bg-blue-400'],
+  purple: ['bg-bg-elevated', 'bg-purple-900/50', 'bg-purple-700/70', 'bg-purple-500/80', 'bg-purple-400'],
+}
+
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+const DAYS = ['', 'Mon', '', 'Wed', '', 'Fri', '']
+
+export function ContributionGraph({ 
+  data, 
+  days = 365,
+  label = 'contributions',
+  colorScheme = 'green'
+}: ContributionGraphProps) {
+  const { grid, monthLabels, totalCount, maxCount } = useMemo(() => {
+    const dataMap = new Map<string, number>()
+    for (const point of data) {
+      dataMap.set(point.date, point.count)
+    }
+
+    const today = new Date()
+    const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate())
+    const startDate = new Date(endDate)
+    startDate.setDate(startDate.getDate() - days + 1)
+    
+    const dayOfWeek = startDate.getDay()
+    startDate.setDate(startDate.getDate() - dayOfWeek)
+
+    const weeks: Array<Array<{ date: string; count: number; isInRange: boolean }>> = []
+    const monthLabels: Array<{ label: string; weekIndex: number }> = []
+    let currentDate = new Date(startDate)
+    let lastMonth = -1
+    let totalCount = 0
+    let maxCount = 0
+
+    while (currentDate <= endDate) {
+      const week: Array<{ date: string; count: number; isInRange: boolean }> = []
+      
+      for (let d = 0; d < 7; d++) {
+        const dateKey = formatDate(currentDate)
+        const count = dataMap.get(dateKey) ?? 0
+        const isInRange = currentDate >= startDate && currentDate <= endDate
+        
+        if (isInRange && currentDate.getMonth() !== lastMonth) {
+          monthLabels.push({ label: MONTHS[currentDate.getMonth()], weekIndex: weeks.length })
+          lastMonth = currentDate.getMonth()
+        }
+        
+        week.push({ date: dateKey, count, isInRange })
+        
+        if (isInRange) {
+          totalCount += count
+          maxCount = Math.max(maxCount, count)
+        }
+        
+        currentDate.setDate(currentDate.getDate() + 1)
+      }
+      
+      weeks.push(week)
+    }
+
+    return { grid: weeks, monthLabels, totalCount, maxCount }
+  }, [data, days])
+
+  const colors = COLOR_SCHEMES[colorScheme]
+
+  const getColorLevel = (count: number): number => {
+    if (count === 0) return 0
+    if (maxCount === 0) return 0
+    const ratio = count / maxCount
+    if (ratio <= 0.25) return 1
+    if (ratio <= 0.5) return 2
+    if (ratio <= 0.75) return 3
+    return 4
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <span className="text-sm text-text-primary font-medium">
+          {totalCount.toLocaleString()} {label} in the last {days === 365 ? 'year' : `${days} days`}
+        </span>
+      </div>
+      
+      <div className="overflow-x-auto">
+        <div className="inline-block">
+          <div className="flex text-[10px] text-text-muted mb-1 pl-7">
+            {monthLabels.map((month, i) => (
+              <div
+                key={i}
+                className="absolute"
+                style={{ marginLeft: `${month.weekIndex * 12}px` }}
+              >
+                {month.label}
+              </div>
+            ))}
+          </div>
+          
+          <div className="flex gap-0.5 relative mt-4">
+            <div className="flex flex-col gap-0.5 text-[10px] text-text-muted pr-1 w-6">
+              {DAYS.map((day, i) => (
+                <div key={i} className="h-[10px] flex items-center justify-end">
+                  {day}
+                </div>
+              ))}
+            </div>
+            
+            {grid.map((week, weekIndex) => (
+              <div key={weekIndex} className="flex flex-col gap-0.5">
+                {week.map((day, dayIndex) => (
+                  <div
+                    key={dayIndex}
+                    className={`w-[10px] h-[10px] rounded-sm ${
+                      day.isInRange ? colors[getColorLevel(day.count)] : 'bg-transparent'
+                    }`}
+                    title={day.isInRange ? `${day.date}: ${day.count} ${label}` : undefined}
+                  />
+                ))}
+              </div>
+            ))}
+          </div>
+          
+          <div className="flex items-center justify-end gap-1 mt-2 text-[10px] text-text-muted">
+            <span>Less</span>
+            {colors.map((color, i) => (
+              <div key={i} className={`w-[10px] h-[10px] rounded-sm ${color}`} />
+            ))}
+            <span>More</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function formatDate(date: Date): string {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+interface StatCardProps {
+  label: string
+  value: number | string
+  change?: number
+  icon?: React.ReactNode
+}
+
+export function StatCard({ label, value, change, icon }: StatCardProps) {
+  return (
+    <div className="bg-bg-elevated border border-border rounded-lg p-4">
+      <div className="flex items-start justify-between">
+        <div>
+          <p className="text-xs text-text-muted mb-1">{label}</p>
+          <p className="text-2xl font-semibold text-text-primary">{value}</p>
+          {change !== undefined && (
+            <p className={`text-xs mt-1 ${change >= 0 ? 'text-success' : 'text-error'}`}>
+              {change >= 0 ? '+' : ''}{change}% from last period
+            </p>
+          )}
+        </div>
+        {icon && (
+          <div className="p-2 bg-bg-hover rounded-lg text-text-muted">
+            {icon}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/apps/web/src/components/ui/dialog-box.tsx

@@ -0,0 +1,203 @@
+import { useEffect, useRef, type ReactNode } from 'react'
+import { Icons } from './icons'
+import { Button } from './button'
+
+interface DialogProps {
+  open: boolean
+  onClose: () => void
+  title?: string
+  children: ReactNode
+  size?: 'small' | 'medium' | 'large'
+}
+
+export function Dialog({ open, onClose, title, children, size = 'medium' }: DialogProps) {
+  const dialogRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+
+    document.addEventListener('keydown', handleEscape)
+    document.body.style.overflow = 'hidden'
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape)
+      document.body.style.overflow = ''
+    }
+  }, [open, onClose])
+
+  if (!open) return null
+
+  const sizeClasses = {
+    small: 'max-w-md',
+    medium: 'max-w-lg',
+    large: 'max-w-4xl',
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6">
+      <div
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        onClick={onClose}
+      />
+
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        className={`relative bg-bg-secondary border border-border rounded-xl shadow-2xl w-full ${sizeClasses[size]} max-h-[85vh] overflow-y-auto touch-scroll`}
+      >
+        {title && (
+          <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+            <h2 className="text-sm font-semibold text-text-primary">{title}</h2>
+            <button
+              onClick={onClose}
+              className="p-1 rounded-md hover:bg-bg-hover transition-colors"
+            >
+              <Icons.X className="w-4 h-4 text-text-muted" />
+            </button>
+          </div>
+        )}
+        {!title && (
+          <button
+            onClick={onClose}
+            className="absolute top-3 right-3 z-10 p-1 rounded-md hover:bg-bg-hover transition-colors"
+          >
+            <Icons.X className="w-4 h-4 text-text-muted" />
+          </button>
+        )}
+
+        <div className={title ? 'p-4' : ''}>{children}</div>
+      </div>
+    </div>
+  )
+}
+
+interface AlertDialogProps {
+  open: boolean
+  onClose: () => void
+  title: string
+  message: string
+  variant?: 'info' | 'warning' | 'error'
+}
+
+export function AlertDialog({ open, onClose, title, message, variant = 'info' }: AlertDialogProps) {
+  const iconColors = {
+    info: 'text-accent-blue bg-accent-blue/10',
+    warning: 'text-yellow-500 bg-yellow-500/10',
+    error: 'text-accent-red bg-accent-red/10',
+  }
+
+  return (
+    <Dialog open={open} onClose={onClose} title={title}>
+      <div className="flex gap-3">
+        <div className={`shrink-0 w-10 h-10 rounded-lg flex items-center justify-center ${iconColors[variant]}`}>
+          <Icons.Warning className="w-5 h-5" />
+        </div>
+        <div className="flex-1">
+          <p className="text-sm text-text-secondary leading-relaxed mb-4">{message}</p>
+          <div className="flex justify-end">
+            <Button variant="primary" size="sm" onClick={onClose}>
+              OK
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  )
+}
+
+interface PromptDialogProps {
+  open: boolean
+  onClose: () => void
+  onSubmit: (value: string) => void
+  title: string
+  placeholder?: string
+  submitLabel?: string
+  defaultValue?: string
+}
+
+export function PromptDialog({
+  open,
+  onClose,
+  onSubmit,
+  title,
+  placeholder = '',
+  submitLabel = 'Submit',
+  defaultValue = '',
+}: PromptDialogProps) {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (open && inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.value = defaultValue
+    }
+  }, [open, defaultValue])
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    const value = inputRef.current?.value.trim()
+    if (value) {
+      onSubmit(value)
+      onClose()
+    }
+  }
+
+  return (
+    <Dialog open={open} onClose={onClose} title={title}>
+      <form onSubmit={handleSubmit}>
+        <input
+          ref={inputRef}
+          type="text"
+          placeholder={placeholder}
+          className="w-full bg-bg-tertiary border border-border rounded-lg px-3 py-2 text-sm text-text-primary placeholder:text-text-muted outline-none focus:border-text-muted transition-colors mb-4"
+        />
+        <div className="flex justify-end gap-2">
+          <Button variant="ghost" size="sm" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button variant="primary" size="sm">
+            {submitLabel}
+          </Button>
+        </div>
+      </form>
+    </Dialog>
+  )
+}
+
+interface CopyDialogProps {
+  open: boolean
+  onClose: () => void
+  title: string
+  message: string
+  copyText: string
+}
+
+export function CopyDialog({ open, onClose, title, message, copyText }: CopyDialogProps) {
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(copyText)
+    onClose()
+  }
+
+  return (
+    <Dialog open={open} onClose={onClose} title={title}>
+      <p className="text-sm text-text-secondary leading-relaxed mb-3">{message}</p>
+      <div className="bg-bg-primary border border-border rounded-lg p-3 mb-4">
+        <code className="text-xs text-accent-blue break-all">{copyText}</code>
+      </div>
+      <div className="flex justify-end gap-2">
+        <Button variant="ghost" size="sm" onClick={onClose}>
+          Close
+        </Button>
+        <Button variant="primary" size="sm" onClick={handleCopy}>
+          <Icons.Copy className="w-3.5 h-3.5" />
+          Copy URL
+        </Button>
+      </div>
+    </Dialog>
+  )
+}

package/apps/web/src/components/ui/icon-button.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode, MouseEvent } from 'react'
+
+export interface IconButtonProps {
+  icon: ReactNode
+  onClick?: (e?: MouseEvent<HTMLButtonElement>) => void
+  className?: string
+  size?: 'sm' | 'md'
+  disabled?: boolean
+}
+
+export function IconButton({
+  icon,
+  onClick,
+  className = '',
+  size = 'md',
+  disabled = false,
+}: IconButtonProps) {
+  const sizeStyles = {
+    sm: 'p-1.5',
+    md: 'p-2',
+  }
+  
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={`rounded-lg transition-colors ${sizeStyles[size]} ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-bg-hover'} ${className}`}
+    >
+      {icon}
+    </button>
+  )
+}

package/apps/web/src/components/ui/icons.tsx

@@ -0,0 +1,187 @@
+interface IconProps {
+  className?: string
+}
+
+export const Icons = {
+  Plus: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 4v16m8-8H4" />
+    </svg>
+  ),
+
+  Search: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+    </svg>
+  ),
+
+  Settings: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+    </svg>
+  ),
+
+  Help: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+  ),
+
+  Grid: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
+    </svg>
+  ),
+
+  Clipboard: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+    </svg>
+  ),
+
+  Archive: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
+    </svg>
+  ),
+
+  Bolt: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
+    </svg>
+  ),
+
+  BarChart: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+    </svg>
+  ),
+
+  ChevronDown: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+    </svg>
+  ),
+
+  ChevronUp: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
+    </svg>
+  ),
+
+  Copy: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+    </svg>
+  ),
+
+  MoreVertical: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
+    </svg>
+  ),
+
+  Paperclip: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+    </svg>
+  ),
+
+  Microphone: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
+    </svg>
+  ),
+
+  Send: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 10l7-7m0 0l7 7m-7-7v18" />
+    </svg>
+  ),
+
+  Warning: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+    </svg>
+  ),
+
+  Check: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+    </svg>
+  ),
+
+  X: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+    </svg>
+  ),
+
+  Trash: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M6 7h12M9 7V5a1 1 0 011-1h4a1 1 0 011 1v2m-7 0l1 12a1 1 0 001 1h4a1 1 0 001-1l1-12" />
+    </svg>
+  ),
+
+  ArrowUp: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 10l7-7m0 0l7 7m-7-7v18" />
+    </svg>
+  ),
+
+  Loader: ({ className }: IconProps) => (
+    <svg className={`animate-spin ${className}`} fill="none" viewBox="0 0 24 24">
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+    </svg>
+  ),
+
+  Sparkles: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
+    </svg>
+  ),
+
+  Terminal: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+    </svg>
+  ),
+
+  File: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+    </svg>
+  ),
+
+  Globe: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+    </svg>
+  ),
+
+  Menu: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 6h16M4 12h16M4 18h16" />
+    </svg>
+  ),
+
+  List: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
+    </svg>
+  ),
+
+  ChevronLeft: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+    </svg>
+  ),
+
+  ChevronRight: ({ className }: IconProps) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+    </svg>
+  ),
+}

package/apps/web/src/components/ui/index.tsx

@@ -0,0 +1,15 @@
+export { Icons } from './icons'
+export { Button } from './button'
+export { IconButton } from './icon-button'
+export { Avatar } from './avatar'
+export { StatusDot } from './status-dot'
+export { Badge } from './badge'
+export { Input } from './input'
+export { Select, type SelectOption } from './select'
+export { SectionHeader } from './section-header'
+export { Dialog, AlertDialog, PromptDialog, CopyDialog } from './dialog-box'
+export { Markdown } from './markdown-stream'
+export { ShimmerText, ShimmerDots, ThinkingIndicator, PulsingDot } from './shimmer'
+export { CollapsibleContent, CollapsibleCodeBlock } from './collapsible-content'
+export { MobileDrawer, MobileSheet } from './mobile-drawer'
+export { ContributionGraph, StatCard } from './contribution-graph'

package/apps/web/src/components/ui/input.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react'
+
+interface InputProps {
+  placeholder?: string
+  value?: string
+  onChange?: (value: string) => void
+  onFocus?: () => void
+  onBlur?: () => void
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void
+  className?: string
+  icon?: ReactNode
+}
+
+export function Input({
+  placeholder,
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  className = '',
+  icon,
+}: InputProps) {
+  return (
+    <div className={`relative ${className}`}>
+      {icon && (
+        <div className="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted">
+          {icon}
+        </div>
+      )}
+      <input
+        type="text"
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange?.(e.target.value)}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onKeyDown={onKeyDown}
+        className={`w-full bg-bg-tertiary border border-border rounded-lg py-2 text-sm text-text-primary placeholder:text-text-muted outline-none focus:border-text-muted transition-colors ${icon ? 'pl-10 pr-4' : 'px-4'}`}
+      />
+    </div>
+  )
+}

package/apps/web/src/components/ui/markdown-stream.tsx

@@ -0,0 +1,21 @@
+import { Streamdown } from 'streamdown'
+
+interface MarkdownProps {
+  content: string
+  className?: string
+  streaming?: boolean
+}
+
+export function Markdown({ content, className = '', streaming = false }: MarkdownProps) {
+  return (
+    <div className={`markdown-content ${className}`}>
+      <Streamdown
+        mode={streaming ? 'streaming' : 'static'}
+        controls={false}
+        shikiTheme={['tokyo-night', 'tokyo-night']}
+      >
+        {content}
+      </Streamdown>
+    </div>
+  )
+}