Standardize Settings layout and save feedback (#2122)

* Group settings navigation menu

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Revert "Group settings navigation menu"

This reverts commit 5983a4e82074b8dab1084af1cadd803ba28ea65d.

* Standardize settings layout feedback

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Fix settings save status timer typing

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Retain settings save status

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Report color mode save state

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Match Appearance settings to two-column layout

Rebuild Appearance into Color mode & Theme, Localization, and Density & type sections with responsive two-column grids, consistent section headers, page description, and green save status.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Migrate settings pages to SettingsPageLayout and SettingsSection

Replace ScrollableOverlay/max-w-3xl shells with the shared settings
layout primitives across entity and static settings pages, normalize
section headers, and add settings.page.behavior.description locales.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Unify remaining settings pages on shared section chrome

Wire Appearance, Projects, and Remote Instances through SettingsSection/SettingsPageLayout so every settings surface shares the same header, divider, and page shell treatment.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Align settings UI with OpenChamber design system kit

Apply kit geometry and control specs: 840px content width, 32/48 padding, fixed 260/280 sidebars, radius/spacing tokens, settings select height, stepper dimensions, and shared field/link typography.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Migrate OpenChamberVisualSettings to shared settings primitives

Replace ad-hoc radio/checkbox/chip/field layouts with SettingsSection
shared chrome for Appearance, Density, Navigation, Chat/behavior, and
Privacy while preserving handlers and data-settings-item anchors.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Migrate settings pages to shared field/checkbox/radio primitives

Unify Defaults, Notifications, Behavior, Git, Session Retention, Passkeys,
OpenCode CLI, Commands, About, Keyboard Shortcuts, and Desktop Network on
SettingsFieldRow / SettingsCheckboxRow / SettingsRadioGroup / SettingsChipGroup
for consistent grid, spacing, and DRY layout. Also remove the GitPage double
SettingsSection wrap around GitHubSettings.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Unify remaining settings pages onto shared field primitives

Migrate Agents, Snippets, Skills, Usage, MCP identity rows and selects to
SettingsFieldRow/CheckboxRow/ChipGroup and SETTINGS_SELECT_*; align page
titles; light-touch Voice/Tunnel/Providers/Plugins without rewriting
complex OAuth, permissions, or tunnel flows.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Polish settings section dividers and transport helper text

Slightly stronger section borders for clearer group separation, and keep
message-stream transport description under the chip control.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Fix settings grid alignment, control heights, and Chat section titles

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Tighten settings grid: flat Chat 2x2 and full-width stacked selects

Message options use a flat two-column grid so row headers share a baseline.
Stacked selects fill their column; field-row selects keep a fixed sm:w-56 width.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Align mixed settings controls to shared FieldRow/CheckboxRow grid

Separate FieldRows from CheckboxRows with SettingsInset, move enum
radios into ControlGroups, and convert misplaced StackedFields to
full-width FieldRows so left edges no longer clash.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Translate Behavior response-style preset labels for es and pl

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Group settings nav into categories and improve icons/order

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Fix settings layout: fewer hrs, shared control widths, chat transport section

Remove SettingsInset top borders, align App install/Density controls to full cluster width, give Message Stream Transport its own Chat section, and fold Sessions Small Model into the first section to cut extra dividers.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Align Voice and MCP settings labels with shared heading classes

Swap form field labels to SETTINGS_FIELD_LABEL_CLASS and use
SettingsGroupTitle for MCP control-group headings (manual auth fallback,
request headers).

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Differentiate settings heading levels by context

Page titles are larger and quieter than section titles; group and field
labels use dedicated shared classes so hierarchy is consistent across
settings surfaces without ad-hoc typography mixes.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Use shared settings title classes in SettingsView home

Wire home and unavailable headings through the shared L1/L2 class
constants so they stay aligned with SettingsPageLayout.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Keep settings number steppers from stretching +/- buttons

Density & type NumberInputs no longer flex-grow across the row, and
NumberInput locks minus/plus to fixed width so the plus side cannot
inflate when the control is placed in a full-width cluster.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Place spacing and input-bar offset on their own row

Density & type now lays out as font families, then font sizes, then
Spacing Density / Input Bar Offset on the row below.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Regroup settings nav and improve Voice layout

Drop Advanced/Usage/Git nav categories: Voice and About under
Interface, Usage under OpenCode, Git under Workspace. Voice provider
chips and STT model cards use shared settings primitives with roomier
spacing and a two-column model grid.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* Space out chat feature groups in visual settings

* Polish settings: save-state wiring, container-query layouts, unified dropdown triggers

- Wire shared save indicator into Behavior page saves and git identity CRUD
- Convert settings layout primitives and page rows from viewport to container
  queries so narrow panes stack instead of clipping
- Unify custom dropdown triggers (model/agent/provider pickers) and remaining
  page selects on the settings control size
- Bump global radius scale by 1px; align variant input with select size
- Migrate stray raw controls (MCP OAuth checkbox, worktree remove button,
  git identity dialog rows, skills dialog labels) onto shared primitives
- Make settings nav items span full sidebar width; trim nav to 240px

* Add General settings page, regroup nav, cap control widths, promote chat feature headers

* Mobile settings nav: plain background and touch-sized rows

* Hide secondary settings descriptions behind clickable info hints

* Move quota credentials to Usage, navigation settings to General, rename External Tunnel

* Quiet settings save indicator: silent success, delayed spinner, visible errors

* Rewrite settings-ui-patterns skill around shared primitives and refactored conventions

* Remove settings starter page; open last visited page, defaulting to General

* Settings polish: spacing, control sizes, trigger widths, readable model names, device dates

* Centralize dropdown trigger chrome, settings nav polish, mobile-only input bar offset

* Fix global line-height regression, auto-hide first-section divider, shortcut row spacing

* Global line-height 1.45, align scheduled tasks header button with select

* Hide editor toolbar and About in VS Code, animate chat render preview outside desktop dialog

* Rebuild agent tool permissions on source-of-truth model

Edit the agent's own permission map verbatim (inherit vs explicit actions, pattern rules only for pattern-capable keys), save permission-only, drop the server-side non-wildcard re-merge that resurrected deleted rules, and surface session-granted rules as read-only.

* Agents model parameters polish: row spacing, variant dropdown, unified widths, dash for unset numbers

---------

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>
Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>

packages/ui/src/lib/i18n/messages/zh-TW.settings.ts

@@ -45,6 +45,10 @@
   'settings.view.search.aria': '搜尋設定',
   'settings.view.search.clear': '清除設定搜尋',
   'settings.view.search.noResults': '沒有符合的設定',
+  'settings.view.nav.group.general': 'OpenChamber',
+  'settings.view.nav.group.projects': '工作區',
+  'settings.view.nav.group.opencode': 'OpenCode',
+  'settings.view.nav.group.content': '資源庫',
   'settings.page.projects.title': '專案',
   'settings.page.remoteInstances.title': '遠端執行個體',
   'settings.page.providers.title': '供應商',
@@ -56,13 +60,22 @@
   'settings.page.skillsCatalog.title': 'Skills 目錄',
   'settings.page.git.title': 'Git',
   'settings.page.appearance.title': '外觀',
+  'settings.page.appearance.description': '自訂 OpenChamber 的外觀與體驗。',
   'settings.page.chat.title': '聊天',
+  'settings.page.chat.description': '設定訊息與工具的顯示方式。',
   'settings.page.shortcuts.title': '快速鍵',
+  'settings.page.shortcuts.description': '自訂鍵盤快速鍵。',
+  'settings.page.general.title': '一般',
+  'settings.page.general.description': '應用程式啟動、安全性、連線與隱私。',
   'settings.page.sessions.title': '工作階段',
+  'settings.page.sessions.description': '設定工作階段的預設值與保留期限。',
   'settings.page.magicPrompts.title': '魔法提示詞',
   'settings.page.notifications.title': '通知',
+  'settings.page.notifications.description': '選擇何時以及如何收到通知。',
   'settings.page.voice.title': '語音',
-  'settings.page.tunnel.title': 'Remote Tunnel',
+  'settings.page.voice.description': '設定語音朗讀與聽寫。',
+  'settings.page.tunnel.title': '外部通道',
+  'settings.page.tunnel.description': '透過遠端通道公開此實例。',
   'settings.page.about.title': '關於',
   'settings.page.snippets.title': '程式片段',
   'settings.snippets.sidebar.title': '程式片段',
@@ -87,7 +100,7 @@
   'settings.snippets.page.toast.contentRequired': '程式片段內容為必填項',
   'settings.snippets.page.toast.saveFailed': '保存程式片段失敗',
   'settings.snippets.page.toast.saved': '程式片段已保存',
-  'settings.openchamber.tunnel.title': 'Remote Tunnel',
+  'settings.openchamber.tunnel.title': '外部通道',
   'settings.openchamber.tunnel.description': '透過快速連結或你自己的 Cloudflare managed remote tunnel 設定安全遠端存取。',
   'settings.openchamber.tunnel.note.serverSideEnforced': '安全通道存取由伺服器端強制執行。',
   'settings.openchamber.tunnel.note.connectLinksOneTime': '連線連結為一次性，Tunnel 停止或連線連結 TTL 到期後會被撤銷。',
@@ -363,6 +376,7 @@
   'settings.remoteInstances.page.logsDialog.selectedInstanceFallback': '所選執行個體',
   'settings.remoteInstances.page.patternDialog.descriptionWithHost': '{host} 需要一個具體目標地址。',
   'settings.remoteInstances.page.patternDialog.description': '輸入目標地址。',
+  'settings.common.infoAria': '更多資訊',
   'settings.common.actions.cancel': '取消',
   'settings.common.actions.create': '建立',
   'settings.common.actions.delete': '刪除',
@@ -373,6 +387,8 @@
   'settings.common.actions.copyAll': '全部複製',
   'settings.common.actions.clear': '清除',
   'settings.common.actions.saving': '儲存中...',
+  'settings.common.status.saved': '已儲存',
+  'settings.common.status.saveFailed': '儲存失敗',
   'settings.common.actions.saveChanges': '儲存變更',
   'settings.common.scope.global': '全域',
   'settings.common.scope.project': '專案',
@@ -457,6 +473,33 @@
   'settings.agents.page.section.identityRole': '身分與角色',
   'settings.agents.page.section.modelParameters': '模型與參數',
   'settings.agents.page.section.systemPrompt': '系統提示詞',
+  'settings.agents.page.permissionsEditor.sectionInfo': '按設定檔中儲存的原樣編輯此代理自身的權限規則。「繼承」表示不設定該鍵，將套用全域設定與預設值。',
+  'settings.agents.page.permissionsEditor.defaultLabel': '所有工具的預設值',
+  'settings.agents.page.permissionsEditor.defaultAria': '所有工具的預設權限',
+  'settings.agents.page.permissionsEditor.defaultInfo': '代理層級的後備（* 鍵），適用於沒有個別規則的工具。',
+  'settings.agents.page.permissionsEditor.effectiveHint': '→ {action}',
+  'settings.agents.page.permissionsEditor.ruleCount': '{count} 條規則',
+  'settings.agents.page.permissionsEditor.keyAria': '{key} 的權限',
+  'settings.agents.page.permissionsEditor.patternPlaceholder': '模式，例如 rm -rf * 或 /path/**',
+  'settings.agents.page.permissionsEditor.patternActionAria': '{key} 模式的動作',
+  'settings.agents.page.permissionsEditor.customKeyPlaceholder': '自訂權限鍵…',
+  'settings.agents.page.permissionsEditor.sessionRulesTitle': '工作階段中授予（未儲存）',
+  'settings.agents.page.permissionsEditor.sessionRulesInfo': '在工作階段中授予的規則（如「一律允許」的回答）。目前生效，但不屬於已儲存的設定，重新啟動後會消失。',
+  'settings.agents.page.permissionsEditor.action.default': '預設',
+  'settings.agents.page.permissionsEditor.action.inherit': '繼承',
+  'settings.agents.page.permissionsEditor.action.allow': '允許',
+  'settings.agents.page.permissionsEditor.action.ask': '詢問',
+  'settings.agents.page.permissionsEditor.action.deny': '拒絕',
+  'settings.agents.page.permissionsEditor.actions.save': '儲存權限',
+  'settings.agents.page.permissionsEditor.actions.discard': '放棄',
+  'settings.agents.page.permissionsEditor.actions.addRule': '新增規則',
+  'settings.agents.page.permissionsEditor.actions.addKey': '新增鍵',
+  'settings.agents.page.permissionsEditor.actions.removeRuleAria': '刪除規則',
+  'settings.agents.page.permissionsEditor.actions.retry': '重試',
+  'settings.agents.page.permissionsEditor.state.loadFailed': '無法載入代理的權限設定。',
+  'settings.agents.page.permissionsEditor.toast.saved': '權限已儲存',
+  'settings.agents.page.permissionsEditor.toast.savedRestartRequired': '權限已儲存 — 重新啟動 OpenCode 伺服器後生效',
+  'settings.agents.page.permissionsEditor.toast.saveFailed': '儲存權限失敗',
   'settings.agents.page.section.toolPermissions': '工具權限',
   'settings.agents.page.field.agentName': 'Agent 名稱',
   'settings.agents.page.field.agentNamePlaceholder': 'agent-name',
@@ -492,6 +535,7 @@
   'settings.agents.page.permissions.permissionPlaceholder': '權限...',
   'settings.agents.page.permissions.patternPlaceholder': '模式（例如 *）',
   'settings.page.behavior.title': '行為',
+  'settings.page.behavior.description': '引導代理的回應方式。',
   'settings.behavior.page.title': '行為',
   'settings.behavior.page.warning.title': '全域規則會與專案規則合併使用',
   'settings.behavior.page.warning.description': '此處所做的變更會更新 {path}。當專案級 AGENTS.md 存在時，OpenCode 也會包含它。',
@@ -1496,6 +1540,7 @@
   'settings.voice.page.section.playbackAndSummary': '播放',
   'settings.voice.page.field.provider': '提供方',
   'settings.voice.page.provider.browser': '瀏覽器',
+  'settings.voice.page.provider.openai': 'OpenAI',
   'settings.voice.page.provider.custom': '自訂',
   'settings.voice.page.provider.say': 'Say',
   'settings.voice.page.provider.server': '伺服器',
@@ -1575,16 +1620,22 @@
   'settings.voice.page.field.ttsInputModeRaw': '原始 Markdown',
   'settings.voice.page.field.ttsInputModeSummarized': '摘要',
   'settings.openchamber.visual.section.colorMode': '顏色模式',
+  'settings.openchamber.visual.section.colorModeAndTheme': '色彩模式與主題',
   'settings.openchamber.visual.section.localization': '在地化',
   'settings.openchamber.visual.section.spacingAndLayout': '間距與佈局',
+  'settings.openchamber.visual.section.densityAndType': '密度與字型',
+  'settings.openchamber.visual.section.appInstall': '應用程式安裝',
   'settings.openchamber.visual.section.mobileLayout': '行動版版面',
   'settings.openchamber.visual.section.navigation': '導覽',
   'settings.openchamber.visual.section.chatRenderMode': '聊天渲染模式',
   'settings.openchamber.visual.section.chatRenderModeAria': '聊天渲染模式',
+  'settings.openchamber.visual.section.chatDisplay': '顯示',
+  'settings.openchamber.visual.section.chatMessageOptions': '訊息選項',
+  'settings.openchamber.visual.section.chatFeatures': '功能',
   'settings.openchamber.visual.section.messageStreamTransport': '訊息流傳輸方式',
   'settings.openchamber.visual.section.activityDefault': '活動預設狀態',
   'settings.openchamber.visual.section.activityDefaultAria': '活動預設模式',
-  'settings.openchamber.visual.section.showToolsOpenedByDefault': '預設展開以下工具：',
+  'settings.openchamber.visual.section.showToolsOpenedByDefault': '預設展開以下工具',
   'settings.openchamber.visual.section.sessionAssistance': '工作階段輔助',
   'settings.openchamber.visual.section.reasoning': '推理',
   'settings.openchamber.visual.section.messageAppearance': '訊息外觀',
@@ -1717,8 +1768,11 @@
   'settings.openchamber.visual.field.sendAnonymousUsageReports': '送出匿名使用報告',
   'settings.openchamber.visual.field.sendAnonymousUsageReportsHint': '協助我們了解哪些應用程式版本仍在被積極使用，以便優先改進。僅收集應用程式版本、平台與執行階段資訊，不收集個人資料或程式碼。',
   'settings.openchamber.visual.option.themeMode.system': '跟隨系統',
+  'settings.openchamber.visual.option.themeMode.system.description': '跟隨系統設定',
   'settings.openchamber.visual.option.themeMode.light': '淺色',
+  'settings.openchamber.visual.option.themeMode.light.description': '一律使用淺色外觀',
   'settings.openchamber.visual.option.themeMode.dark': '深色',
+  'settings.openchamber.visual.option.themeMode.dark.description': '一律使用深色外觀',
   'settings.openchamber.visual.option.diffLayout.dynamic.label': '動態',
   'settings.openchamber.visual.option.diffLayout.dynamic.description': '新增檔案用行內檢視，修改檔案用並排檢視。',
   'settings.openchamber.visual.option.diffLayout.inline.label': '始終行內',
@@ -1877,6 +1931,8 @@
   'settings.openchamber.desktopNetwork.field.keepAwakeAria': 'OpenChamber 執行時保持電腦喚醒',
   'settings.openchamber.desktopNetwork.field.keepAwake': 'OpenChamber 執行時保持電腦喚醒',
   'settings.openchamber.desktopNetwork.field.keepAwakeDescription': '讓手機可以持續開啟此應用程式。螢幕仍可關閉。',
+  'settings.openchamber.desktopPassword.actions.showPassword': '顯示密碼',
+  'settings.openchamber.desktopPassword.actions.hidePassword': '隱藏密碼',
   'settings.openchamber.desktopPassword.field.password': '桌面 UI 密碼',
   'settings.openchamber.desktopPassword.field.passwordDescription': 'OpenChamber 會在重新啟動後要求輸入密碼，之後會在登入工作階段過期時再次要求：12 小時後，或選擇「信任此裝置」後 7 天。留空可停用登入。',
   'settings.openchamber.desktopPassword.field.passwordPlaceholder': '不需要密碼',