- add CopilotInfo type and install mutation to useCopilot hook
- show version in status card when installed
- add Install button with loading state when not installed
Add ErrorLogsMonitor component to Home page that displays CLIProxyAPI
error logs when requests fail. Users can now diagnose why success rates
drop by viewing detailed error log contents.
Backend:
- Add fetchCliproxyErrorLogs/fetchCliproxyErrorLogContent in stats-fetcher
- Add GET /api/cliproxy/error-logs and /api/cliproxy/error-logs/:name routes
- Include path traversal protection for filename validation
Frontend:
- Add CliproxyErrorLog type and errorLogs API methods
- Add useCliproxyErrorLogs/useCliproxyErrorLogContent hooks
- Create ErrorLogsMonitor component with expandable log viewer
- Integrate into Home page below AuthMonitor
Closes#132
- Split-view layout (40% left / 60% right) matching CLIProxy design
- Left panel: Model Config tab with FlexibleModelSelector components,
Settings tab, and Info tab
- Right panel: Raw JSON editor for copilot.settings.json
- Add preset buttons for quick model tier mapping
- Bidirectional sync between UI and raw JSON
- Simplify copilot.tsx page layout with narrower sidebar
Adds proper error handling when useProfiles() hook fails to fetch data.
Previously, API errors would cause a blank screen as the component had
no error state handling. Now shows a user-friendly error message with
a retry button.
Fixes#125
- use-copilot.ts: React hook for copilot state management
- copilot-status-card.tsx: status display with auth/daemon controls
- copilot-config-form.tsx: configuration form with model selector
- copilot.tsx: main page combining status and config
- add /copilot route and sidebar navigation
- replace "CCS Config" header text with two promotional buttons
- add ClaudeKit badge with logo linking to claudekit.cc
- add Sponsor button with heart icon linking to GitHub Sponsors
- both buttons feature hover effects and consistent styling
- fix dark theme hover text visibility
- add filterUnits="userSpaceOnUse" to flow-glow filter for consistent rendering
- unify connector-side padding to p*-4 across all zones (top/bottom/left/right)
- previous: top pb-5, left pr-6, right pl-6, bottom no extra
- now: all zones have consistent 16px padding on connector side
- Change flow viz section from items-center to items-stretch
- Use justify-center with gap-8 instead of justify-between for middle row
- Add w-full to top/bottom zone containers
- Increase gap from gap-3 to gap-4 for consistent spacing
Fixes issue where visualization left huge blank spaces
- Add 4-zone layout (top/left/right/bottom) based on account count
- Dynamic provider card sizing scales with account count
- Add localStorage persistence for card positions with reset button
- Implement click-to-toggle for account detail panel
- Add drag vs click detection to prevent accidental selections
- Fix connection curves to properly follow dragged cards using getBoundingClientRect
- Add fixed widths (w-44) to all zone cards for consistency
- Add top/bottom connector points to provider card
- Add model field to Gemini/OpenCode WebSearch providers
- Config.yaml now explicitly stores model (gemini-2.5-flash, opencode/grok-code)
- UI: blur-to-save for model inputs (no save on every keystroke)
- UI: collapsible install hints inside provider cards
- UI: left accent border for enabled providers (better light theme contrast)
- Hook: use systemMessage for info-styled confirmation
- Hook: cleaner result format without defensive "NOT an error" language
- Add OpenCodeWebSearchConfig type with enabled, model, timeout options
- Implement getOpenCodeCliStatus() for CLI detection with caching
- Add hasOpenCodeCli() and clearOpenCodeCliCache() helper functions
- Update getWebSearchCliProviders() to include OpenCode provider info
- Update hasAnyWebSearchCli() to check all three providers
- Update getCliInstallHints() with OpenCode install command
- Update WebSearchStatus interface to include opencodeCli
- Update getWebSearchReadiness() to report OpenCode status
- Update routes.ts PUT /api/websearch to handle opencode config
- Update routes.ts GET /api/websearch/status to return opencodeCli
- Add OpenCode provider card in settings.tsx UI
- Add purple-themed installation hints for OpenCode
- Order providers: Gemini (1st) -> OpenCode (2nd) -> Grok (3rd/last)
OpenCode uses `opencode run` with `opencode/gpt-5-nano` model for
web search. FREE tier available via OpenCode Zen, no API key required.
- Update install command to npm install -g @vibe-kit/grok-cli
- Update docs URL to github.com/superagent-ai/grok-cli
- Fix env var from XAI_API_KEY to GROK_API_KEY
- Update description to reflect AI coding agent capabilities
- Add Grok CLI detection (grok-4-cli by lalomorales22) alongside Gemini CLI
- Add WebSearch health check group to health-service.ts
- Update settings UI to show both Gemini and Grok CLI providers
- Add detailed install hints when no WebSearch CLI is installed
- Update API routes to return grokCli status
- Both CLI and dashboard users now see clear installation guidance
Providers:
- Gemini CLI: FREE tier (1000 req/day), no API key needed
- Grok CLI: Requires xAI API key (XAI_API_KEY), web + X search
- Add ConnectionTimeline component showing recent connection events
- Restructure layout to 2-column design: flow viz (flex) | timeline (fixed)
- Flow chart now expands to fill available space with justify-between
- Timeline has compact fixed width (w-56) on the right
- Detail panel now uses flow-based positioning instead of absolute
- Generate mock connection events based on account success/failure data
Remove deprecated components and logic from the home page,
including the progress bar, live clock, and old quick launch sections.
Introduce new components (HeroSection, QuickCommands, StatCard) to streamline the layout.
Delete unused component.
- Full-width layout (removed max-w constraints)
- Restored CcsLogo in hero section with live clock
- Added real-time provider status cards with animated indicators
- Health progress bar with color-coded status
- Icon-based quick launch grid (G/C/A/K/L/D shortcuts)
- System navigation panel with all major routes
- Shared resources summary with counts
- Added Progress UI component for status bars
- Subtle grid background for control center aesthetic
Design Proposal 4: Interactive Status Board implementation
- Add ProfileCard component for user profile display
- Add ProfileDeck for managing multiple profiles
- Add CommandBuilder for CLI command construction
- Add ValueMetrics for dashboard statistics
- Add HubFooter for navigation and actions
- Update documentation with Phase 1 summary
- Add GitHub link button next to connection status for quick issue reporting
- Add 24H button on analytics page with hourly granularity chart
- Add /api/usage/hourly endpoint with date range filtering
- Add hourly data aggregation and caching (disk + memory)
- Fix timezone display: convert UTC hours to local time in chart
- Fix CLIProxy Stats card loading state synchronization
- Bump disk cache version to 3 (includes hourly data)
- Add split-view provider editor with model mapping UI and JSON editor
- Implement persistent custom presets (save/load per provider)
- Add provider logos with white backgrounds for light/dark theme
- Integrate CLIProxyAPI control panel embed via iframe
- Add service manager for CLIProxyAPI lifecycle control
- Support variant logo display using parent provider
- Add categorized model selector with search and groups
- Replace tab-based layout with sidebar + detail panel pattern
- Add provider navigation in left sidebar with quick actions
- Implement provider detail panel with model preferences and accounts
- Add Config Editor and Logs quick access in sidebar
- Fix naming consistency: Clipproxy → Cliproxy (single p) across 8 files
- Fix TypeScript errors for models and stats data shapes
- Add stats-fetcher.ts for CLIProxy analytics integration
- Add openai-compat-manager.ts for model discovery and listing
- Add CLIProxy stats routes to web-server for real-time metrics
- Create cliproxy-stats-card component for analytics dashboard
- Add use-cliproxy-stats hook for data fetching
- Extend doctor.ts with CLIProxy health checks
- Update analytics page with CLIProxy usage metrics
kaitranntt