better-codex 0.1.0

package/apps/web/src/components/ui/mobile-drawer.tsx

@@ -0,0 +1,124 @@
+import { useEffect, type ReactNode } from 'react'
+
+interface MobileDrawerProps {
+  open: boolean
+  onClose: () => void
+  children: ReactNode
+  side?: 'left' | 'right'
+  className?: string
+}
+
+export function MobileDrawer({ 
+  open, 
+  onClose, 
+  children, 
+  side = 'left',
+  className = '' 
+}: MobileDrawerProps) {
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = 'hidden'
+      return () => {
+        document.body.style.overflow = ''
+      }
+    }
+  }, [open])
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && open) {
+        onClose()
+      }
+    }
+    document.addEventListener('keydown', handleEscape)
+    return () => document.removeEventListener('keydown', handleEscape)
+  }, [open, onClose])
+
+  const translateClass = side === 'left' 
+    ? open ? 'translate-x-0' : '-translate-x-full'
+    : open ? 'translate-x-0' : 'translate-x-full'
+
+  const positionClass = side === 'left' ? 'left-0' : 'right-0'
+
+  return (
+    <>
+      <div 
+        className={`fixed inset-0 z-40 bg-black/60 backdrop-blur-mobile transition-opacity duration-300 ${
+          open ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        }`}
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      
+      <div 
+        className={`fixed top-0 ${positionClass} z-50 w-[280px] max-w-[85vw] bg-bg-secondary border-r border-border transform transition-transform duration-300 ease-out ${translateClass} ${className}`}
+        style={{ height: 'calc(var(--vh, 1vh) * 100)' }}
+        role="dialog"
+        aria-modal="true"
+      >
+        {children}
+      </div>
+    </>
+  )
+}
+
+interface MobileSheetProps {
+  open: boolean
+  onClose: () => void
+  children: ReactNode
+  className?: string
+}
+
+export function MobileSheet({ 
+  open, 
+  onClose, 
+  children,
+  className = '' 
+}: MobileSheetProps) {
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = 'hidden'
+      return () => {
+        document.body.style.overflow = ''
+      }
+    }
+  }, [open])
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && open) {
+        onClose()
+      }
+    }
+    document.addEventListener('keydown', handleEscape)
+    return () => document.removeEventListener('keydown', handleEscape)
+  }, [open, onClose])
+
+  return (
+    <>
+      <div 
+        className={`fixed inset-0 z-40 bg-black/60 backdrop-blur-mobile transition-opacity duration-300 ${
+          open ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        }`}
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      
+      <div 
+        className={`fixed inset-x-0 bottom-0 z-50 bg-bg-secondary border-t border-border rounded-t-2xl transform transition-transform duration-300 ease-out ${
+          open ? 'translate-y-0' : 'translate-y-full'
+        } ${className}`}
+        style={{ maxHeight: 'calc(var(--vh, 1vh) * 85)' }}
+        role="dialog"
+        aria-modal="true"
+      >
+        <div className="flex justify-center py-2">
+          <div className="w-10 h-1 bg-border rounded-full" />
+        </div>
+        <div className="overflow-y-auto touch-scroll pb-safe">
+          {children}
+        </div>
+      </div>
+    </>
+  )
+}

package/apps/web/src/components/ui/section-header.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react'
+
+interface SectionHeaderProps {
+  children: ReactNode
+}
+
+export function SectionHeader({ children }: SectionHeaderProps) {
+  return (
+    <h2 className="text-xs font-medium text-text-muted uppercase tracking-wider px-2 mb-2">
+      {children}
+    </h2>
+  )
+}

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

@@ -0,0 +1,217 @@
+import { useState, useRef, useEffect, useCallback } from 'react'
+import { createPortal } from 'react-dom'
+import { Icons } from './icons'
+import { MobileSheet } from './mobile-drawer'
+import { useIsMobile } from '../../hooks/use-mobile'
+
+export interface SelectOption {
+  value: string
+  label: string
+  description?: string
+}
+
+interface SelectProps {
+  options: SelectOption[]
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  size?: 'sm' | 'md'
+  className?: string
+  disabled?: boolean
+  label?: string
+}
+
+export function Select({
+  options,
+  value,
+  onChange,
+  placeholder = 'Select...',
+  size = 'md',
+  className = '',
+  disabled = false,
+  label,
+}: SelectProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0, direction: 'down' as 'down' | 'up', height: 200 })
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const isMobile = useIsMobile()
+
+  const selectedOption = options.find((opt) => opt.value === value)
+
+  const updateDropdownPosition = useCallback(() => {
+    if (!isOpen || !buttonRef.current || isMobile) return
+
+    const rect = buttonRef.current.getBoundingClientRect()
+    const estimatedHeight = Math.min(options.length * 36, 200)
+    const availableBelow = window.innerHeight - (rect.top + rect.height)
+    const availableAbove = rect.top
+    const openUp = availableBelow < estimatedHeight && availableAbove > availableBelow
+    const maxHeight = openUp
+      ? Math.max(0, Math.min(estimatedHeight, availableAbove - 8))
+      : Math.max(0, Math.min(estimatedHeight, availableBelow - 8))
+
+    setDropdownPosition({
+      top: openUp ? rect.top - maxHeight - 4 : rect.top + rect.height + 4,
+      left: rect.left,
+      width: rect.width,
+      direction: openUp ? 'up' : 'down',
+      height: maxHeight || estimatedHeight,
+    })
+  }, [isOpen, isMobile, options.length])
+
+  useEffect(() => {
+    updateDropdownPosition()
+  }, [updateDropdownPosition])
+
+  useEffect(() => {
+    if (!isOpen || isMobile) return
+
+    const handleWindowChange = () => {
+      updateDropdownPosition()
+    }
+
+    window.addEventListener('resize', handleWindowChange)
+    window.addEventListener('scroll', handleWindowChange, true)
+
+    return () => {
+      window.removeEventListener('resize', handleWindowChange)
+      window.removeEventListener('scroll', handleWindowChange, true)
+    }
+  }, [isOpen, isMobile, updateDropdownPosition])
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as Node
+      if (containerRef.current?.contains(target)) return
+      if (dropdownRef.current?.contains(target)) return
+      setIsOpen(false)
+    }
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [isOpen])
+
+  const sizeStyles = {
+    sm: 'px-2 py-1 text-[11px]',
+    md: 'px-3 py-1.5 text-xs',
+  }
+
+  const dropdownSizeStyles = {
+    sm: 'text-[11px]',
+    md: 'text-xs',
+  }
+
+  const handleSelect = (optionValue: string) => {
+    onChange(optionValue)
+    setIsOpen(false)
+  }
+
+  const handleButtonClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (!disabled) {
+      setIsOpen(!isOpen)
+    }
+  }
+
+  const DropdownContent = !isMobile && isOpen && (
+    <div
+      ref={dropdownRef}
+      className="fixed bg-bg-secondary border border-border rounded-lg shadow-xl z-[9999] overflow-hidden"
+      style={{
+        top: `${dropdownPosition.top}px`,
+        left: `${dropdownPosition.left}px`,
+        minWidth: `${dropdownPosition.width}px`,
+        maxWidth: '280px',
+        maxHeight: `${dropdownPosition.height}px`,
+      }}
+    >
+      <div className="overflow-y-auto py-1" style={{ maxHeight: `${dropdownPosition.height}px` }}>
+        {options.map((option) => (
+          <button
+            key={option.value}
+            type="button"
+            onMouseDown={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              handleSelect(option.value)
+            }}
+            className={`w-full text-left px-3 py-2 hover:bg-bg-hover transition-colors ${dropdownSizeStyles[size]} ${
+              option.value === value ? 'bg-bg-elevated text-text-primary' : 'text-text-secondary'
+            }`}
+          >
+            <div className="font-medium truncate">{option.label}</div>
+            {option.description && (
+              <div className="text-[10px] text-text-muted truncate mt-0.5">{option.description}</div>
+            )}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+
+  return (
+    <div ref={containerRef} className={`relative ${className}`}>
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={handleButtonClick}
+        disabled={disabled}
+        className={`flex items-center justify-between gap-1.5 w-full bg-bg-tertiary border border-border rounded-lg ${sizeStyles[size]} text-text-secondary hover:bg-bg-hover hover:border-text-muted transition-colors disabled:opacity-50 disabled:cursor-not-allowed min-w-0`}
+      >
+        <span className="truncate">{selectedOption?.label || placeholder}</span>
+        <Icons.ChevronDown className={`w-3 h-3 shrink-0 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+      </button>
+
+      {!isMobile && DropdownContent && createPortal(DropdownContent, document.body)}
+
+      {isMobile && (
+        <MobileSheet open={isOpen} onClose={() => setIsOpen(false)}>
+          <div className="px-4 pb-4">
+            {label && (
+              <h3 className="text-sm font-semibold text-text-primary mb-3">{label}</h3>
+            )}
+            {!label && placeholder && (
+              <h3 className="text-sm font-semibold text-text-primary mb-3">{placeholder}</h3>
+            )}
+            <div className="space-y-1">
+              {options.map((option) => (
+                <button
+                  key={option.value}
+                  type="button"
+                  onClick={() => handleSelect(option.value)}
+                  className={`w-full text-left px-4 py-3 rounded-lg transition-colors ${
+                    option.value === value 
+                      ? 'bg-accent-green/10 border border-accent-green/30' 
+                      : 'bg-bg-tertiary border border-border hover:bg-bg-hover'
+                  }`}
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="min-w-0 flex-1">
+                      <div className={`text-sm font-medium truncate ${option.value === value ? 'text-accent-green' : 'text-text-primary'}`}>
+                        {option.label}
+                      </div>
+                      {option.description && (
+                        <div className="text-xs text-text-muted truncate mt-0.5">{option.description}</div>
+                      )}
+                    </div>
+                    {option.value === value && (
+                      <Icons.Check className="w-4 h-4 text-accent-green shrink-0 ml-2" />
+                    )}
+                  </div>
+                </button>
+              ))}
+            </div>
+          </div>
+        </MobileSheet>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,138 @@
+import { useEffect, useState } from 'react'
+
+interface ShimmerTextProps {
+  text: string
+  className?: string
+}
+
+export function ShimmerText({ text, className = '' }: ShimmerTextProps) {
+  const [position, setPosition] = useState(0)
+  const chars = text.split('')
+  const padding = 10
+  const period = chars.length + padding * 2
+  const sweepDuration = 2000
+  const bandHalfWidth = 5
+
+  useEffect(() => {
+    const startTime = Date.now()
+    let animationFrame: number
+
+    const animate = () => {
+      const elapsed = (Date.now() - startTime) % sweepDuration
+      const pos = (elapsed / sweepDuration) * period
+      setPosition(pos)
+      animationFrame = requestAnimationFrame(animate)
+    }
+
+    animationFrame = requestAnimationFrame(animate)
+    return () => cancelAnimationFrame(animationFrame)
+  }, [period, sweepDuration])
+
+  return (
+    <span className={className}>
+      {chars.map((char, i) => {
+        const iPos = i + padding
+        const dist = Math.abs(iPos - position)
+        
+        const t = dist <= bandHalfWidth
+          ? 0.5 * (1 + Math.cos(Math.PI * (dist / bandHalfWidth)))
+          : 0
+        
+        const opacity = 0.4 + (t * 0.6)
+        
+        return (
+          <span
+            key={i}
+            style={{
+              opacity,
+              fontWeight: t > 0.3 ? 600 : 400,
+              transition: 'opacity 0.05s, font-weight 0.05s',
+            }}
+          >
+            {char}
+          </span>
+        )
+      })}
+    </span>
+  )
+}
+
+interface ShimmerDotsProps {
+  className?: string
+}
+
+export function ShimmerDots({ className = '' }: ShimmerDotsProps) {
+  const [frame, setFrame] = useState(0)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setFrame(f => (f + 1) % 4)
+    }, 400)
+    return () => clearInterval(interval)
+  }, [])
+
+  const dots = ['', '.', '..', '...']
+
+  return (
+    <span className={className}>
+      <span className="inline-block w-[1.5em] text-left">{dots[frame]}</span>
+    </span>
+  )
+}
+
+interface ThinkingIndicatorProps {
+  message?: string
+  elapsed?: number
+  className?: string
+}
+
+export function ThinkingIndicator({ 
+  message = 'Thinking', 
+  elapsed,
+  className = '' 
+}: ThinkingIndicatorProps) {
+  const [elapsedTime, setElapsedTime] = useState(elapsed ?? 0)
+
+  useEffect(() => {
+    if (elapsed !== undefined) {
+      setElapsedTime(elapsed)
+      return
+    }
+    
+    const start = Date.now()
+    const interval = setInterval(() => {
+      setElapsedTime(Math.floor((Date.now() - start) / 1000))
+    }, 1000)
+    return () => clearInterval(interval)
+  }, [elapsed])
+
+  const formatElapsed = (secs: number) => {
+    if (secs < 60) return `${secs}s`
+    if (secs < 3600) {
+      const m = Math.floor(secs / 60)
+      const s = secs % 60
+      return `${m}m ${s.toString().padStart(2, '0')}s`
+    }
+    const h = Math.floor(secs / 3600)
+    const m = Math.floor((secs % 3600) / 60)
+    const s = secs % 60
+    return `${h}h ${m.toString().padStart(2, '0')}m ${s.toString().padStart(2, '0')}s`
+  }
+
+  return (
+    <div className={`flex items-center gap-2 text-sm ${className}`}>
+      <ShimmerText text={message} className="text-text-primary" />
+      <span className="text-text-muted">({formatElapsed(elapsedTime)})</span>
+    </div>
+  )
+}
+
+interface PulsingDotProps {
+  className?: string
+}
+
+export function PulsingDot({ className = '' }: PulsingDotProps) {
+  return (
+    <span className={`inline-block w-2 h-2 rounded-full bg-accent-green animate-pulse ${className}`} />
+  )
+}

package/apps/web/src/components/ui/status-dot.tsx

@@ -0,0 +1,24 @@
+interface StatusDotProps {
+  status: 'online' | 'degraded' | 'offline' | 'active' | 'idle'
+  size?: 'sm' | 'md'
+  pulse?: boolean
+}
+
+export function StatusDot({ status, size = 'sm', pulse = false }: StatusDotProps) {
+  const colorMap = {
+    online: 'bg-accent-green',
+    active: 'bg-accent-green',
+    degraded: 'bg-yellow-500',
+    offline: 'bg-text-muted',
+    idle: 'bg-text-muted',
+  }
+
+  const sizeStyles = {
+    sm: 'w-2 h-2',
+    md: 'w-3 h-3',
+  }
+
+  return (
+    <span className={`rounded-full ${colorMap[status]} ${sizeStyles[size]} ${pulse ? 'animate-pulse' : ''}`} />
+  )
+}

package/apps/web/src/config.ts

@@ -0,0 +1,5 @@
+const FALLBACK_HUB_URL = 'http://127.0.0.1:7711'
+
+export const HUB_URL =
+  import.meta.env.VITE_CODEX_HUB_URL ?? FALLBACK_HUB_URL
+export const HUB_TOKEN = import.meta.env.VITE_CODEX_HUB_TOKEN ?? ''

package/apps/web/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useHubConnection } from './use-hub-connection'
+export { useThreadHistory } from './use-thread-history'
+export { useIsMobile, useIsTablet, useBreakpoint, useDynamicViewportHeight } from './use-mobile'

package/apps/web/src/hooks/use-analytics.ts

@@ -0,0 +1,122 @@
+import { useState, useEffect, useCallback } from 'react'
+import { HUB_URL } from '../config'
+
+export interface DailyDataPoint {
+  date: string
+  count: number
+}
+
+export interface AnalyticsSeries {
+  metric: string
+  series: DailyDataPoint[]
+}
+
+export type AnalyticsMetric = 
+  | 'turns_started'
+  | 'turns_completed'
+  | 'threads_started'
+  | 'command_exec'
+  | 'approvals_requested_command'
+  | 'approvals_requested_file'
+  | 'approvals_accept'
+  | 'approvals_decline'
+
+export const METRIC_LABELS: Record<AnalyticsMetric, string> = {
+  turns_started: 'Turns Started',
+  turns_completed: 'Turns Completed',
+  threads_started: 'Sessions Started',
+  command_exec: 'Commands Executed',
+  approvals_requested_command: 'Command Approvals',
+  approvals_requested_file: 'File Approvals',
+  approvals_accept: 'Approvals Accepted',
+  approvals_decline: 'Approvals Declined',
+}
+
+export function useAnalytics(
+  metric: AnalyticsMetric = 'turns_started',
+  profileId?: string,
+  model?: string,
+  days = 365
+) {
+  const [data, setData] = useState<DailyDataPoint[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const fetchData = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    
+    try {
+      const params = new URLSearchParams({ metric, days: String(days) })
+      if (profileId) params.set('profileId', profileId)
+      if (model) params.set('model', model)
+      
+      const response = await fetch(`${HUB_URL}/analytics/daily?${params}`)
+      if (!response.ok) {
+        throw new Error(`Failed to fetch analytics: ${response.statusText}`)
+      }
+      
+      const result: AnalyticsSeries = await response.json()
+      setData(result.series)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch analytics')
+      setData([])
+    } finally {
+      setLoading(false)
+    }
+  }, [metric, profileId, model, days])
+
+  useEffect(() => {
+    void fetchData()
+  }, [fetchData])
+
+  return { data, loading, error, refetch: fetchData }
+}
+
+export function useMultipleMetrics(
+  metrics: AnalyticsMetric[],
+  profileId?: string,
+  days = 365
+) {
+  const [data, setData] = useState<Record<AnalyticsMetric, DailyDataPoint[]>>({} as Record<AnalyticsMetric, DailyDataPoint[]>)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const fetchAll = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    
+    try {
+      const results = await Promise.all(
+        metrics.map(async (metric) => {
+          const params = new URLSearchParams({ metric, days: String(days) })
+          if (profileId) params.set('profileId', profileId)
+          
+          const response = await fetch(`${HUB_URL}/analytics/daily?${params}`)
+          if (!response.ok) {
+            throw new Error(`Failed to fetch ${metric}`)
+          }
+          
+          const result: AnalyticsSeries = await response.json()
+          return { metric, series: result.series }
+        })
+      )
+      
+      const dataMap = {} as Record<AnalyticsMetric, DailyDataPoint[]>
+      for (const { metric, series } of results) {
+        dataMap[metric as AnalyticsMetric] = series
+      }
+      setData(dataMap)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch analytics')
+    } finally {
+      setLoading(false)
+    }
+  }, [metrics, profileId, days])
+
+  useEffect(() => {
+    void fetchAll()
+  }, [fetchAll])
+
+  return { data, loading, error, refetch: fetchAll }
+}