1b402fcb678ca321dc4ef0edf3a7e5833b18437a
12
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 Bohdan Triapitsyn
|
079e3a9bd6 |
feat(settings): add item search (#1592)
Adds item-level search inside Settings so users can find concrete settings like provider auth, agent mode, terminal font size, tunnel options, notification events, and similar controls instead of only filtering top-level pages. Groups search results by Settings page and shows localized labels plus optional descriptions where useful. Supports keyboard navigation with Arrow Up/Down, Enter, and Escape, matching the existing autocomplete interaction style. Opens the correct Settings page or split-page draft state before scrolling to the matching control. Highlights the matched setting with a subtle token-based background so users can see where they landed without an aggressive outline. Adds explicit data-settings-item anchors across Settings pages and a centralized search registry with runtime/mobile availability guards. Updates Settings UI skill guidance so future Settings changes keep search registry entries, anchors, localization, and availability guards in sync. |
||
|
Bohdan Triapitsyn
|
874dc15263 |
fix: respect time format preference in UI
Add shared time formatting helpers that apply the Appearance time format preference consistently. Update visible time labels across chat, quota usage, scheduled tasks, tunnels, context details, git views, PR metadata, and passkey settings to use the selected 12-hour, 24-hour, or automatic format. Leave date-only and non-UI formatting untouched so unrelated behavior does not change. |
||
|
Bohdan Triapitsyn
|
14357257ae |
perf(ui): migrate icons to SVG sprite system
Replace @remixicon/react with a shared Icon component that renders via <use href> references to a single hidden SVG sprite. This reduces DOM node count by replacing inline SVGs with lightweight references. - Create Icon component with sprite injection (packages/ui/src/components/icon/) - Migrate all 164 files from @remixicon/react to Icon component - Auto-generate sprite data from remixicon bundle (scripts/generate-icon-sprite.mjs) - Add bun run icons:generate to package.json - Move @remixicon/react to devDependencies - Add icon usage instructions to theme-system skill |
||
|
Bohdan Triapitsyn
|
63da6e6292 |
feat(ui): unify overlay animations and trim tooltip delays
Use base-ui's transition-status pattern (data-starting-style / data-ending-style) for Dialog, DropdownMenu, Select, Tooltip and Popover so open/close animate consistently at 150ms ease-out without flicker. Wrap dialog popups in a centered flex container so the scale animation no longer fights with translate-based positioning, and switch PendingChangesBar to a real Popover so it actually animates closed. Convert ScheduledTaskEditorDialog from raw Radix to the shared Dialog wrapper, give ScheduledTasksDialog a stable min-height to prevent layout shift mid-animation, and reset NewWorktreeDialog form state on open instead of close so fields don't empty during the close transition. Drop tooltip delay from 700ms to 300ms globally and remove all per-component overrides except the model/variant/agent selectors in the chat input (600ms). |
||
|
Bohdan Triapitsyn
|
7d7285655d |
Add i18n foundation and translations (#1027)
* feat: add i18n foundation * feat: localize sessions sidebar * Localize multirun/scheduled tasks and fix dialog dropdown interactions * localize git sidebar surface and add zh-CN keys * feat(ui): localize context panel, diff/plan views, and context sidebar content * fix(config): resolve user config home via fs/home before embedded home * localize header/chat UI and complete model/worktree panel strings * localize worktree + github issue/pr dialog flows * localize settings sections and split settings i18n dictionaries * localize additional settings sections and sidebars * localize more settings pages and dialogs * fix settings select trigger localization * localize tunnel settings ui surface * localize additional settings sections * localize keyboard shortcuts labels in settings * localize terminal and utility dialogs surfaces * feat(i18n): localize remaining UI strings * Add Ukrainian locale * Add Spanish locale * Add Brazilian Portuguese locale * Polish locale translations |
||
|
Bohdan Triapitsyn
|
6a70d51ea7 |
refactor: drop mobile keyboard/viewport hacks, rely on browser
Remove body position:fixed lock, visualViewport listener in MainLayout (keyboard-inset heuristics, scroll-to-zero lock, focusin/focusout RAF), [data-keyboard-avoid-active] translateY rule, and related CSS vars (--oc-keyboard-inset, --oc-keyboard-avoid-offset, --oc-keyboard-home-indicator, --oc-visual-viewport-offset-top). Strip data-keyboard-avoid* attrs and keyboardAvoid props from Dialog/ScrollableOverlay and consumers. Drop isKeyboardOpen from useUIStore. With body unlocked and the layout plain flex-col (h-dvh), the browser shrinks the viewport on keyboard open naturally — composer sits above the keyboard, header stops lagging, input no longer jitters. FilesView.nudgeEditorSelectionAboveKeyboard now derives the occluded bottom locally from visualViewport + documentElement.clientHeight. |
||
|
Bohdan Triapitsyn
|
d2358c2c03 |
feat: redesign settings pages to match canonical flat UI patterns (#493)
* refactor(settings): new IA shell + projects section + skills catalog discoverability * chore(settings): split providers list by scope; show user before project * fix: navigation flow in mobile Settings * feat: redesign settings pages to use modern elevated surface patterns * feat: replace helper text with tooltips in settings * ui: redesign update dialog and fix external link routing - Restructures UpdateDialog to focus on changelog readability with a wider max-w-4xl canvas - Highlights @username contributor mentions with theme primary color - Strips excessive vertical padding and right-aligns compact action buttons - Disables streamdown's internal link safety dialog in favor of direct Tauri shell routing * feat: refactor Git identities into dedicated Git settings page * feat: unify sidebar background styling across VS Code and web/mobile * fix: adjust button styling and layout for mobile settings pages * feat: add MCP settings page and sidebar * feat: hide models in provider view (thanks to @nguyenngothuong) * feat: add "Add new provider" option to model selector dropdown * fix: local evroc logo + provider dropdown icons * fix: increase width of provider menu * fix: dark theme background color for better contrast * feat: update @opencode-ai/sdk dependency to v1.2.10 * fix: restore session sorting to only use updated time * fix: added settings for sessions deletion dialog * fix: adjust padding on settings pages for better layout * fix: standardize select dropdown height across UI * fix: agent selector UI and notification settings * fix: remove redundant helper text from settings pages * fix: update UI layout for description fields * fix: remove border-none and shadow-none from textarea classes * fix: enable context menu on sidebar items * feat: refactor UI controls and layout patterns across settings pages * fix: use headerless blocks when page title already provides context * fix: remove subtask option from command settings * fix: refactor mcp page settings * fix: reduce spacing in skills configuration pages * feat: refactor voice settings * feat: refactor settings sidebar sections |
||
|
gsxdsm
|
5deb851a75 | feat: Add usage prediction and pace to usage dropdown and settings (#372) | ||
|
Nelson Pires
|
7af81c2436 |
Add per-model quotas with collapsible model groups in header (#355)
* feat(ui): show per-model quota groups in header with collapsible families Add per-model quota groups under each provider in the header Introduce collapsible sections for model families to reveal models Show all models when none are explicitly selected or respect explicit selections * feat: add toggle to UsageCard for dropdown visibility Introduce a switch in UsageCard to control inclusion in the dropdown Hide the percent label when the toggle is visible * feat(usage): enhance UsagePage with model grouping and collapsibles Add model lists grouped by family for the selected provider Enable collapsible sections per family to toggle visibility Apply and persist default model selections on provider change * feat(quota): add model family helpers Add utilities to categorize models into families by provider Enable grouping of models by family for header and usage pages Define default models for Gemini 3.x and Claude families * feat(desktop): extend settings with model grouping and selection Track per-provider selected models for usage Allow collapsing and expanding families in the usage page Support per-provider custom model groups with labels and assignments * feat: persist usage preferences in persistence Persist usageSelectedModels per provider Persist usageCollapsedFamilies and usageExpandedFamilies states Support custom usageModelGroups with groups and assignments * feat: track selected quota models and expanded families per provider Initialize selectedModels and expandedFamilies state for quota providers Add actions to set, toggle, and apply default model selections and expanded families Persist selections to desktop settings and apply defaults on load * feat(server): sanitize usage model configuration in settings update Validate and sanitize usage selections per provider Persist only valid usageCollapsedFamilies and usageExpandedFamilies in settings Enforce limits on custom model groups and model assignments * feat: add collapsible model families in header Add collapsible sections for model families within each provider in the header Show per-model usage with percent display and a progress bar Toggle expansion via arrow icons and preserve expanded state per provider * fix(ui): treat explicit per-provider model selections correctly in header Enable showing all models by default when a provider has no explicit selection Recognize an explicit per-provider selection when a provider key exists in selectedModels Filter to selected models only if an explicit selection is present for the provider |
||
|
gsxdsm
|
a264393f1b |
feat: extend quota providers and add usage dropdown (#254) (#284)
* feat: extend quota providers and add usage dropdown Add new quota providers: - Claude (Anthropic API) - Codex (OpenAI/ChatGPT) - GitHub Copilot (base + add-on) - Kimi for Coding - OpenRouter UI enhancements: - Add rate limits dropdown in header with timer icon - Desktop: sticky header with Used/Remaining toggle, refresh button - Mobile: full-screen dropdown with same controls - Per-provider sticky headers with provider logos - Auto-refresh on open if no data exists Usage settings page: - Provider icon next to header - Show in dropdown toggle per provider - Global display selector (Usage vs Quota remaining) - Auto-refresh controls in sidebar Settings persistence: - Add usageDisplayMode and usageDropdownProviders settings - Server-side sanitization for new settings Provider logo aliases: - codex -> openai, claude -> anthropic Bug fixes: - Fix React error #310 by calling hooks before early returns - Add aria-describedby to SettingsWindow dialog - Remove horizontal scroll from dropdown * fix: Remove duplicate github copilot declarations |
||
|
Bohdan TriapitsynandNelson Pires
|
05e95410d7 |
feat(desktop/vscode): add quota providers API and UI integration (#266)
* feat(openchamber): persist usage auto-refresh settings Enable a switch to toggle automatic usage refresh Provide input to configure refresh interval in milliseconds Persist changes to desktop settings and server API when changed * feat: add UsageCard component Add a new UsageCard component to display a usage window with title, optional subtitle, and a progress bar Show current usage percentage and a reset time label for the window Render a formatted window label and a compact subtitle for concise UI * feat(usage): add UsagePage UI for quota usage Add a dedicated UsagePage with provider-based usage details Show last updated time and auto-refresh status Handle empty, not configured, and error states with informative banners * feat(usage): add UsageProgressBar component Introduce a new UsageProgressBar component to visualize quota usage Display a gradient fill that changes with critical, warn, or normal tones Expose accessible progress attributes for screen readers * feat(usage): add UsageSidebar component Display quotas for all providers in a scrollable sidebar Refresh quotas with a button and loading indicator Colorize provider rows based on usage status and runtime context * feat: add usage section to Settings Add a new Usage item to the Settings sidebar for desktop and mobile Render UsagePage when the Usage tab is selected in Settings Wire up new UsageSidebar and UsagePage components under usage * feat: add Usage section to sidebar Add new Usage section in the sidebar for API quota monitoring. Display a bar chart icon and description for the Usage item. Monitor and display API quota usage across providers. * feat(desktop): add usage auto-refresh settings Enable automatic refresh for usage data with new settings Store refresh interval in milliseconds for usage updates * feat(persistence): support usageAutoRefresh and usageRefreshIntervalMs Persist usageAutoRefresh in desktop settings Persist usageRefreshIntervalMs in desktop settings Validate types for new fields during sanitizeWebSettings * feat(quota): export providers and utilities Expose QUOTA_PROVIDERS and QUOTA_PROVIDER_MAP for consumers Export QuotaProviderMeta type for user code Make formatting and usage resolution utilities available from quota module * feat(quota): define base quota provider interface Define QuotaProvider interface with id, name, isConfigured, and fetchQuota Expose ProviderResult type in fetchQuota contract * feat: add quota providers index and map Expose QUOTA_PROVIDERS with OpenAI, Google and z.ai Provide QUOTA_PROVIDER_MAP for quick provider lookup by id * feat: add quota utils for percent formatting and tone Add clampPercent to sanitize and clamp numbers to 0-100 Add formatPercent to render '-' for null and 'x%' for values Add resolveUsageTone to categorize percent as safe, warn, or critical * feat: add useQuotaStore for quota data Load usage settings from desktop, VSCode, or API at startup Fetch quotas for all providers in parallel and update loading state Expose lastUpdated timestamp and error state for UI feedback * feat: export quota types from quota module Expose quota-related types in UI type definitions Allow downstream code to import QuotaProviderId and related types Aggregate quota exports under the quota module in index * feat: add quota types for usage providers Add QuotaProviderId and UsageWindow shapes to model quota data Add ProviderUsage, ProviderResult, and related usage mapping for providers * feat: add quota provider endpoints API List available quota providers via GET /api/quota/providers Retrieve quota details for a specific provider with GET /api/quota/:providerId Log errors and return 500 with error message on quota fetch failures * feat: add quota providers discovery and formatting Detect configured quota providers from auth and account files Normalize auth entries to tokens or objects for API usage Expose formatted reset times and remaining window metrics * feat: persist usage settings in UsageSidebar and remove from defaults Load usage settings on mount for the sidebar Persist changes to auto-refresh and refresh interval to server Remove usage settings state and effects from DefaultsSettings * fix(usage): guard auto-select in UsagePage when results empty Guard auto-select in UsagePage when results are empty Prevent unexpected provider selection on initial render * fix(quota): set error state during quota updates Reset error to null when a new quota result is added Set error to the error message on fetch failure or fallback Keep error state alongside results in all update paths * feat(desktop/vscode): add quota providers API and UI integration * fix(quotaProviders): correct quota payload parsing --------- Co-authored-by: Nelson Pires <nelsonpires.sn@gmail.com> |
||
|
Nelson Pires
|
0981194eed |
feat: Multi-provider Usage Dashboard & Quota Monitoring (#259)
* feat(openchamber): persist usage auto-refresh settings Enable a switch to toggle automatic usage refresh Provide input to configure refresh interval in milliseconds Persist changes to desktop settings and server API when changed * feat: add UsageCard component Add a new UsageCard component to display a usage window with title, optional subtitle, and a progress bar Show current usage percentage and a reset time label for the window Render a formatted window label and a compact subtitle for concise UI * feat(usage): add UsagePage UI for quota usage Add a dedicated UsagePage with provider-based usage details Show last updated time and auto-refresh status Handle empty, not configured, and error states with informative banners * feat(usage): add UsageProgressBar component Introduce a new UsageProgressBar component to visualize quota usage Display a gradient fill that changes with critical, warn, or normal tones Expose accessible progress attributes for screen readers * feat(usage): add UsageSidebar component Display quotas for all providers in a scrollable sidebar Refresh quotas with a button and loading indicator Colorize provider rows based on usage status and runtime context * feat: add usage section to Settings Add a new Usage item to the Settings sidebar for desktop and mobile Render UsagePage when the Usage tab is selected in Settings Wire up new UsageSidebar and UsagePage components under usage * feat: add Usage section to sidebar Add new Usage section in the sidebar for API quota monitoring. Display a bar chart icon and description for the Usage item. Monitor and display API quota usage across providers. * feat(desktop): add usage auto-refresh settings Enable automatic refresh for usage data with new settings Store refresh interval in milliseconds for usage updates * feat(persistence): support usageAutoRefresh and usageRefreshIntervalMs Persist usageAutoRefresh in desktop settings Persist usageRefreshIntervalMs in desktop settings Validate types for new fields during sanitizeWebSettings * feat(quota): export providers and utilities Expose QUOTA_PROVIDERS and QUOTA_PROVIDER_MAP for consumers Export QuotaProviderMeta type for user code Make formatting and usage resolution utilities available from quota module * feat(quota): define base quota provider interface Define QuotaProvider interface with id, name, isConfigured, and fetchQuota Expose ProviderResult type in fetchQuota contract * feat: add quota providers index and map Expose QUOTA_PROVIDERS with OpenAI, Google and z.ai Provide QUOTA_PROVIDER_MAP for quick provider lookup by id * feat: add quota utils for percent formatting and tone Add clampPercent to sanitize and clamp numbers to 0-100 Add formatPercent to render '-' for null and 'x%' for values Add resolveUsageTone to categorize percent as safe, warn, or critical * feat: add useQuotaStore for quota data Load usage settings from desktop, VSCode, or API at startup Fetch quotas for all providers in parallel and update loading state Expose lastUpdated timestamp and error state for UI feedback * feat: export quota types from quota module Expose quota-related types in UI type definitions Allow downstream code to import QuotaProviderId and related types Aggregate quota exports under the quota module in index * feat: add quota types for usage providers Add QuotaProviderId and UsageWindow shapes to model quota data Add ProviderUsage, ProviderResult, and related usage mapping for providers * feat: add quota provider endpoints API List available quota providers via GET /api/quota/providers Retrieve quota details for a specific provider with GET /api/quota/:providerId Log errors and return 500 with error message on quota fetch failures * feat: add quota providers discovery and formatting Detect configured quota providers from auth and account files Normalize auth entries to tokens or objects for API usage Expose formatted reset times and remaining window metrics * feat: persist usage settings in UsageSidebar and remove from defaults Load usage settings on mount for the sidebar Persist changes to auto-refresh and refresh interval to server Remove usage settings state and effects from DefaultsSettings * fix(usage): guard auto-select in UsagePage when results empty Guard auto-select in UsagePage when results are empty Prevent unexpected provider selection on initial render * fix(quota): set error state during quota updates Reset error to null when a new quota result is added Set error to the error message on fetch failure or fallback Keep error state alongside results in all update paths |