Commit Graph
117 Commits
Author SHA1 Message Date
kaitranntt 86d992fce6 fix(ui): fix profile switching and improve UX
- Add key prop to ProfileEditor to force remount on profile change

- Reset editorHasChanges on discard confirmation

- Add text-white to destructive dialog button

- Change OpenRouter default model to claude-opus-4.5
2025-12-21 01:20:57 -05:00
kaitranntt b790005c85 fix(ui): add unsaved changes confirmation when switching profiles
- Add onHasChangesUpdate callback to ProfileEditor

- Track editor dirty state in ApiPage parent

- Show confirmation dialog before discarding unsaved changes

- Handle edge case for 'New' profile button

Closes #163
2025-12-21 01:05:23 -05:00
kaitranntt a08aef9fb7 feat(ui): add OpenRouter badge to API Profiles sidebar item
Shows compact OpenRouter indicator badge with icon and tooltip
(349+ models). Badge colors adapt for proper contrast on hover
and active states in both light and dark themes.
2025-12-21 00:08:45 -05:00
kaitranntt f41d361fe5 fix(openrouter): show all env vars except API key in Additional Variables
Only hide ANTHROPIC_AUTH_TOKEN (has dedicated input). Show all other
env vars (BASE_URL, MODEL, tier models, API_KEY, etc.) in the
"Additional Variables" section for full visibility.
2025-12-20 23:47:14 -05:00
kaitranntt 70bc44eb11 fix(openrouter): add ANTHROPIC_API_KEY="" default for OpenRouter profiles
Per OpenRouter requirements, explicitly blank out the Anthropic API key
to prevent conflicts when using OpenRouter's API. The key is visible in
the "Additional Variables" section of the profile editor.
2025-12-20 23:43:52 -05:00
kaitranntt ebc8ee2638 feat(openrouter): prioritize Exacto models for better agentic performance
- Add isExacto field to CategorizedModel for models with :exacto suffix
- Add sortModelsByPriority function (Free > Exacto > Regular)
- Apply priority sorting within each category in model picker
- Add visual "Exacto" badge (green outline) for exacto variants

Exacto models are OpenRouter's specialized variants optimized for
tool use and agentic behaviors, recommended for Claude Code.
2025-12-20 23:38:07 -05:00
kaitranntt 723ce28431 fix(ui): model selection now updates all tiers correctly
- Add updateEnvBulk function for atomic multi-key updates
- Pass onEnvBulkChange prop to FriendlyUISection
- Fixes race condition where only last tier (haiku) was updated
2025-12-20 23:23:50 -05:00
kaitranntt f947aeb21b feat(ui): add value input for new environment variables
- Add newEnvValue state to profile editor
- Update add variable section to include key + value inputs
- Apply to both OpenRouter and standard profile editors
- Clear both key and value after adding variable
2025-12-20 23:22:04 -05:00
kaitranntt 3f7add5c10 fix(ui): deduplicate API key and restore add variable input
- Add ANTHROPIC_AUTH_TOKEN to openRouterManagedKeys set
- Change collapsible section from "All Environment Variables" to "Additional Variables"
- Only show non-managed env vars in the collapsible section
- Restore "Add Environment Variable" input at bottom of OpenRouter view
2025-12-20 23:17:18 -05:00
kaitranntt 7788137f1c feat(ui): add streamlined OpenRouter profile editor
- redesign friendly-ui-section with OpenRouter-specific view

- add model selection, tier mapping, API key sections

- compact ModelItem layout for better space efficiency

- add onEnvBulkChange prop for atomic env updates
2025-12-20 23:11:15 -05:00
kaitranntt 96310dd1ac refactor(ui): reorganize profile create dialog with preset categories
- Split presets into recommended (OpenRouter) + alternative (GLM/GLMT/Kimi)
- Show alternative presets only when Custom is selected
- Replace PresetCard with CompactPresetCard (horizontal layout)
- Make baseUrl always editable (pre-filled from preset but customizable)
- Apply model selection to all 4 model tiers (opus/sonnet/haiku)
- Only show URL path warnings for truly custom URLs, not preset URLs
- Use accent tokens for consistent theming
2025-12-20 21:09:01 -05:00
kaitranntt b9f6823fc9 refactor(ui): replace hardcoded orange colors with accent tokens
- openrouter-badge: use accent/accent-foreground tokens
- openrouter-banner: use accent gradient colors
- openrouter-model-picker: use accent for sparkles and badges
- openrouter-promo-card: use accent for backgrounds and text
- openrouter-quick-start: use accent for icons, buttons, links

Theme-aware colors for better dark mode support and customization.
2025-12-20 21:08:23 -05:00
kaitranntt adcc3235f0 feat(ui): rewrite profile create dialog with provider presets
- add preset cards grid (OpenRouter, GLM, GLMT, Kimi, Custom)
- add model search picker for OpenRouter with newest-first sorting
- auto-fill form fields when preset selected
- show API key hints from preset config
- skip model prompts for preset profiles
2025-12-20 19:48:35 -05:00
kaitranntt 9c90e1dc2c feat(ui): add provider presets and OpenRouter promo components
- add provider-presets.ts with OpenRouter/GLM/GLMT/Kimi configs
- add OpenRouterBanner for announcement header
- add OpenRouterPromoCard for sidebar promotion
- add OpenRouterQuickStart for default right panel
- export new components from profiles index
2025-12-20 19:47:58 -05:00
kaitranntt a1cbd4d923 feat(ui): add dynamic newest models detection for OpenRouter
- add created timestamp field to OpenRouterModel type
- add getNewestModelsPerProvider() for dynamic newest models
- add formatModelAge() for relative time display (e.g., "2d ago")
- show newest models section in picker when no search query
- sort search results by created date (newest first)
2025-12-20 19:47:18 -05:00
kaitranntt 677f9d1e72 feat(ui): integrate OpenRouter model picker into profile editor
- add isOpenRouterProfile() detection in utils.ts

- show OpenRouterBadge in header when detected

- replace model input with picker for OpenRouter profiles

- add tier mapping section in friendly-ui-section.tsx

- show OpenRouter icon in profile-card.tsx

- prefetch models on api.tsx page load
2025-12-20 18:31:00 -05:00
kaitranntt 3cd21bb67b feat(ui): add OpenRouter model picker and tier mapping components
- add openrouter-badge.tsx with orange-themed badge

- add openrouter-model-picker.tsx with search and category filters

- add model-tier-mapping.tsx with collapsible tier editor

- update barrel exports in profiles/index.ts
2025-12-20 18:30:20 -05:00
kaitranntt 9382278704 refactor(ui): rename /api route to /providers
- avoid confusion with backend /api/* endpoints

- update route definition, sidebar nav, and home page link
2025-12-20 17:31:55 -05:00
kaitranntt e1fd3945fc refactor(ui): remove old flat component files after reorganization
- delete 42 root-level component files

- files moved to domain directories (account/, health/, layout/, etc.)
2025-12-19 19:44:54 -05:00
kaitranntt b911db8b5f refactor(ui): add barrel exports for analytics and components root
- add analytics/index.ts aggregating chart components

- add components/index.ts as main entry point
2025-12-19 19:44:04 -05:00
kaitranntt 3c7b0e7a65 refactor(ui): organize shared components into shared/ directory
- move ccs-logo, code-editor, command-builder, confirm-dialog

- move connection-indicator, docs-link, github-link, etc.

- add barrel export in shared/index.ts
2025-12-19 19:43:28 -05:00
kaitranntt bef9955123 refactor(ui): organize layout components into layout/ directory
- move app-sidebar, hero-section, hub-footer, layout

- move theme-provider, theme-toggle

- add barrel export in layout/index.ts
2025-12-19 19:42:54 -05:00
kaitranntt a106aa2ee6 refactor(ui): organize health components into health/ directory
- move health-card, health-gauge, health-check-item

- move health-group-section, health-stats-bar

- add barrel export in health/index.ts
2025-12-19 19:42:24 -05:00
kaitranntt 81196b0ff1 refactor(ui): split quick-setup-wizard into setup/wizard/ directory
- extract 541-line component into step modules

- wrap accounts in useMemo for stable deps

- add barrel export in setup/index.ts
2025-12-19 19:41:51 -05:00
kaitranntt 6778c4d637 refactor(ui): split profile-editor into profiles/editor/ directory
- extract 531-line component into 10 focused modules

- move profile dialogs, card, deck, table to profiles/

- fix react-hook-form watch() using useWatch for compiler compat

- add barrel export in profiles/index.ts
2025-12-19 19:41:17 -05:00
kaitranntt 946030c836 refactor(ui): split error-logs-monitor into monitoring/error-logs/ directory
- extract 617-line component into 6 focused modules

- move auth-monitor, proxy-status-widget to monitoring/

- add barrel export in monitoring/index.ts
2025-12-19 19:40:43 -05:00
kaitranntt 1b1015cf50 refactor(ui): split copilot-config-form into copilot/config-form/ directory
- extract 846-line component into 13 focused modules

- add barrel export in copilot/index.ts
2025-12-19 19:40:06 -05:00
kaitranntt 4bea5a3346 refactor(ui): split provider-editor into cliproxy/provider-editor/ directory
- extract 921-line component into 13 focused modules

- move cliproxy-dialog, cliproxy-table, cliproxy-stats-overview

- add barrel export in cliproxy/index.ts
2025-12-19 19:39:32 -05:00
kaitranntt 8fd35c8dd6 refactor(ui): split account-flow-viz into account/flow-viz/ directory
- extract 1,144-line monster file into 12 focused modules

- add hooks.ts, types.ts, utils.ts for reusable logic

- create backward-compatible re-export shim

- add barrel export in account/index.ts
2025-12-19 19:38:58 -05:00
kaitranntt 4036c42687 feat(cliproxy): auto-apply default preset when adding first account
- Add presetMapping to Gemini, Antigravity, Codex models
- Auto-apply preset when adding first account (Add/QuickSetup)
- Extract applyDefaultPreset to preset-utils.ts (DRY)
- Add warning toast on preset failure
- Extract port 8317 to CLIPROXY_PORT constant
2025-12-19 11:26:17 -05:00
kaitranntt 598454c931 fix(cliproxy): include BASE_URL and AUTH_TOKEN when applying presets
Presets now always include ANTHROPIC_BASE_URL and ANTHROPIC_AUTH_TOKEN
when applied to provider settings. This ensures CLIProxy routing works
correctly for Gemini, Codex, and Agy providers.

Also fixes settings save failing for new profiles by changing PUT
/api/settings/:profile to upsert behavior (create if not exists).
2025-12-19 09:44:14 -05:00
kaitranntt eeb6913d96 style(ui): use sidebar accent colors for proxy update button
- replace hardcoded amber-600 with sidebar-accent theme variable

- improve consistency with sidebar theme
2025-12-19 01:41:04 -05:00
kaitranntt d43079b724 feat(ui): add version sync timestamp to ProxyStatusWidget
- Show current CLIProxyAPI version (e.g., v6.5.53)
- Display "Synced Xm ago" with full timestamp on hover
- Extend API response to include checkedAt timestamp
2025-12-18 23:24:15 -05:00
kaitranntt 96762a9f6e feat(ui): show CLIProxyAPI update availability in dashboard
- Add GET /api/cliproxy/update-check endpoint
- Export checkCliproxyUpdate() function from binary-manager
- Add useCliproxyUpdateCheck hook with 1-hour cache
- Update ProxyStatusWidget with amber "Update" badge when available
- Highlight Restart button as "Update" with amber styling when update pending
2025-12-18 23:17:05 -05:00
kaitranntt c9ad0b0779 feat(ui): add Stop and Restart buttons to ProxyStatusWidget
- Add POST /api/cliproxy/proxy-stop API endpoint
- Add proxyStop method in api-client and useStopProxy hook
- Update ProxyStatusWidget with Stop and Restart controls when running
- Restart = stop + delay + start (for applying CLIProxyAPI updates)

Complements the fix in binary-manager.ts which now tells users to stop
proxy before updates can be applied.
2025-12-18 23:03:45 -05:00
kaitranntt 5d343260c7 feat(global-env): add global environment variables injection for third-party profiles
- add global_env config section to unified config types and loader

- inject global env vars at runtime for cliproxy and copilot profiles

- add GET/PUT /api/global-env endpoints for UI management

- add Global Env tab to Settings page with enable toggle and var management

- add GlobalEnvIndicator component showing injected vars in profile editors

- support ?tab=globalenv query param for direct navigation from indicators
2025-12-18 22:38:25 -05:00
kaitranntt 5d4f49e4bb feat(ui): add absolute path copy for error logs
- add absolutePath field to CliproxyErrorLog interface
- inject absolute path in routes.ts from getCliproxyWritablePath()
- update copy button to use absolute path with fallback to filename
- refactor error-logs-monitor to remove demo mode
- add error-log-parser lib for structured log parsing
2025-12-18 21:06:20 -05:00
Kai (Tam Nhu) TranandGitHub 03e9bdc917 Merge pull request #133 from kaitranntt/kai/feat/error-log-viewer
feat(dashboard): add error log viewer for CLIProxy diagnostics
2025-12-18 18:31:16 -05:00
kaitranntt 8f47b8775f feat(ui): redesign error logs monitor with split view layout
- Replace dropdown accordion with master-detail split view
- Add log list panel (240px) on left with selection state
- Add content viewer panel on right for better readability
- Add demo mode prop for UI testing
- Auto-select first log via useMemo/derived state
2025-12-18 18:23:38 -05:00
Kai (Tam Nhu) TranandGitHub efdf53c83c Merge pull request #138 from kaitranntt/kai/feat/copilot-integration
feat(copilot): add GitHub Copilot integration with CLI, API, and dashboard
2025-12-18 05:41:38 -05:00
kaitranntt da5dc31ec4 fix(ui): constrain copilot config left panel width to 540px 2025-12-18 05:31:37 -05:00
kaitranntt 60c01c7e60 fix(ui): handle 404 errors in profile settings fetch
- throw on non-OK responses in ProfileEditor queryFn
- add isError state with user-friendly message and retry button
- add defensive null check for data.path before .replace() call
- apply same defensive check to provider-editor.tsx

Fixes blank screen when API profile settings file doesn't exist.
2025-12-18 05:25:52 -05:00
kaitranntt ec6face8db fix(copilot): use gpt-4.1 as default model and 127.0.0.1 for local connections
Key changes:
- Changed default model from claude-sonnet-4.5 to gpt-4.1 (free tier compatible)
- Updated all Claude models to minPlan: 'pro' (requires paid Copilot subscription)
- Replaced 'localhost' with '127.0.0.1' for more reliable local connections
  (bypasses DNS resolution and potential IPv6 issues)
- Updated UI presets: replaced Claude Haiku with Raptor Mini in free tier
- Fixed FREE_PRESETS to only include actually free models

This fixes the "model_not_supported" error when using free tier GitHub Copilot
subscription, which doesn't have access to Claude models.
2025-12-18 04:58:49 -05:00
kaitranntt 87c2acc416 feat(ui): display plan tiers and presets in copilot model selector
- Add CopilotPlanTier type and extend CopilotModel with minPlan,
  multiplier, preview fields
- Show plan tier badges (free/pro/pro+/business/enterprise) with
  color-coded styling in model dropdown
- Display multiplier info (0x=free, 1x=standard, 3x-10x=premium)
- Add Preview badge for non-GA models
- Create 3 free tier presets: GPT-4.1, GPT-5 Mini, Claude Haiku 4.5
- Create 5 paid presets: Claude Opus/Sonnet 4.5, GPT-5.2,
  GPT-5.1 Codex Max, Gemini 2.5 Pro
- Separate presets into Free Tier and Pro+ Required sections
2025-12-18 04:15:08 -05:00
kaitranntt a66abba174 feat(cliproxy): implement interactive project selection for OAuth flows
- Add ProjectSelectionHandler to parse and handle CLIProxy project prompts
- Integrate project selection into AuthHandler with UI-first support
- Add project selection API endpoints and WebSocket events
- Implement ProjectSelectionDialog and useProjectSelection hook in UI
- Fixes macOS OAuth timeout by handling interactive project selection via UI
2025-12-18 04:11:59 -05:00
kaitranntt 1ef625ee86 fix(error-logs-monitor): properly handle status loading state
- Add isStatusLoading check to prevent false-negative rendering
- Use nullish coalescing for enabled param to ensure boolean value
- Component now waits for status before deciding visibility

Fixes initial render returning null due to undefined status
2025-12-18 02:45:58 -05:00
kaitranntt ddf7b704a5 Merge remote-tracking branch 'origin/dev' into kai/feat/error-log-viewer 2025-12-18 02:33:06 -05:00
kaitranntt 170dcdc44f fix(ui): limit Connection Timeline to 100 events to prevent lag
- add MAX_TIMELINE_EVENTS constant (100)

- slice events in useMemo to cap DOM elements

- prevents UI freeze with high request counts
2025-12-18 02:30:47 -05:00
kaitranntt f813ad06f6 feat(ui): add copilot-api install button and version display
- 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
2025-12-18 02:27:35 -05:00
kaitranntt 5b3d56548a feat(dashboard): add error log viewer for CLIProxy diagnostics
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
2025-12-18 02:15:35 -05:00