BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(settings): add item search (#1592)

Browse Source 
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.
This commit is contained in:
Bohdan Triapitsyn
2026-06-10 12:15:15 +03:00
committed by GitHub
parent eff6f46ad9
commit 079e3a9bd6
44 changed files with 1428 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/sections/agents/AgentsPage.tsx
+7 -7
View File
@@ -655,7 +655,7 @@ export const AgentsPage: React.FC = () => {
<section className="px-2 pb-2 pt-0 space-y-0">
{isNewAgent && (
<div className="flex flex-col gap-2 py-1.5 sm:flex-row sm:items-center sm:gap-8">
<div data-settings-item="agents.name" className="flex flex-col gap-2 py-1.5 sm:flex-row sm:items-center sm:gap-8">
<div className="flex min-w-0 flex-col sm:w-56 shrink-0">
<span className="typography-ui-label text-foreground">{t('settings.agents.page.field.agentName')}</span>
</div>
@@ -705,7 +705,7 @@ export const AgentsPage: React.FC = () => {
</div>
</div>
<div className="pb-1.5 pt-0.5">
<div data-settings-item="agents.mode" className="pb-1.5 pt-0.5">
<div className="flex min-w-0 flex-col gap-1.5">
<div className="flex items-center gap-1.5">
<span className="typography-ui-label text-foreground">{t('settings.agents.page.field.mode')}</span>
@@ -763,7 +763,7 @@ export const AgentsPage: React.FC = () => {
<section className="px-2 pb-2 pt-0 space-y-0">
<div className="flex flex-col gap-2 py-1.5 sm:flex-row sm:items-center sm:gap-8">
<div data-settings-item="agents.model" className="flex flex-col gap-2 py-1.5 sm:flex-row sm:items-center sm:gap-8">
<div className="flex min-w-0 flex-col sm:w-56 shrink-0">
<span className="typography-ui-label text-foreground">{t('settings.agents.page.field.overrideModel')}</span>
</div>
@@ -782,7 +782,7 @@ export const AgentsPage: React.FC = () => {
</div>
</div>
<div className={cn("py-1.5", isMobile ? "flex flex-col gap-3" : "flex items-center gap-8")}>
<div data-settings-item="agents.temperature" className={cn("py-1.5", isMobile ? "flex flex-col gap-3" : "flex items-center gap-8")}>
<div className={cn("flex min-w-0 flex-col", isMobile ? "w-full" : "sm:w-56 shrink-0")}>
<div className="flex items-center gap-1.5">
<span className="typography-ui-label text-foreground">{t('settings.agents.page.field.temperature')}</span>
@@ -826,7 +826,7 @@ export const AgentsPage: React.FC = () => {
</div>
</div>
<div className={cn("py-1.5", isMobile ? "flex flex-col gap-3" : "flex items-center gap-8")}>
<div data-settings-item="agents.top-p" className={cn("py-1.5", isMobile ? "flex flex-col gap-3" : "flex items-center gap-8")}>
<div className={cn("flex min-w-0 flex-col", isMobile ? "w-full" : "sm:w-56 shrink-0")}>
<div className="flex items-center gap-1.5">
<span className="typography-ui-label text-foreground">{t('settings.agents.page.field.topP')}</span>
@@ -874,7 +874,7 @@ export const AgentsPage: React.FC = () => {
</div>
{/* System Prompt */}
<div className="mb-8">
<div data-settings-item="agents.system-prompt" className="mb-8">
<div className="mb-1 px-1">
<h3 className="typography-ui-header font-medium text-foreground">
{t('settings.agents.page.section.systemPrompt')}
@@ -893,7 +893,7 @@ export const AgentsPage: React.FC = () => {
</div>
{/* Tool Permissions */}
<div className="mb-2">
<div data-settings-item="agents.permissions" className="mb-2">
<div className="mb-1 px-1 flex items-center justify-between gap-4">
<h3 className="typography-ui-header font-medium text-foreground">
{t('settings.agents.page.section.toolPermissions')}
packages/ui/src/components/sections/agents/AgentsSidebar.tsx
+1
View File
@@ -334,6 +334,7 @@ export const AgentsSidebar: React.FC<AgentsSidebarProps> = ({ onItemSelect }) =>
<div className="flex items-center justify-between gap-2">
<span className="typography-meta text-muted-foreground">{t('settings.agents.sidebar.total', { count: visibleAgents.length })}</span>
<Button size="sm"
data-settings-item="agents.create"
variant="ghost"
className="h-7 w-7 px-0 -my-1 text-muted-foreground"
onClick={handleCreateNew}