feat(settings): 侧边卡片设置页 UI/UX 现代化——卡片底部设置条替代隐形齿轮 (#300)

* feat(settings): 侧边卡片设置页 UI/UX 现代化——卡片底部设置条替代隐形齿轮，协调双色启用态

- 二级设置入口：卡片右下 16px 幽灵齿轮（tertiary 色、像素钉位）改为
  卡片底缘全宽设置条（hairline 分隔 + 齿轮图标 + 「功能设置」文字
  标签），常态可发现；hover 换品牌淡底 + brand 字色引导。可见性条件
  与 aria-label 契约不变（仅父级启用且声明 settings）
- 常规行齿轮升级为带 border-l2 边框的 22px 芯片按钮，hover 同样
  accent 引导
- 启用卡片：品牌描边柔化为 color-mix(45%)，勾选徽标改用
  state-success-primary（绿=已开启确认，brand=激活强调的协调双色）
- 节奏：section gap 16 / group padding 20 / 网格 minmax(180px) gap 12；
  计数徽章改为 accent-soft 淡底 pill；开关关态 thumb 降档 +
  track 底 layer-2
- 动效纪律：全部过渡 ≤160ms 且仅颜色属性；prefers-reduced-motion
  扩展覆盖设置条/行齿轮/弹窗行
- 清理：合并 .pluginEntries 重复定义；文档同步（AGENTS.md §5 +
  设计文档新增 §9 偏差记录）

* feat(settings): 按反馈迭代——卡片开关滑块、二级弹窗长列表滚动、卡片等高

- 勾选徽标 → 紧凑品牌开关滑块（30×16 track + 10px thumb，开=品牌填充
  反色拇指，关=中性且不渲染；纯视觉指示，卡片本身仍是 aria-pressed
  开关，语义契约不变）
- 二级弹窗长列表：popupRows 内部滚动 max-height min(52vh,440px) +
  细滚动条（--dsw-alias-scrollbar-* 令牌），终端 6 行场景弹窗壳体与
  Done 固定、仅行区滚动；行密度收紧（padding 12/14、gap 8）
- 卡片等高：.card min-height 106px + .cardMain flex:1 + .cardTop
  min-height 28px——带设置条/不带设置条/无图标卡片全部等高
- prefers-reduced-motion 覆盖 cardSwitch 过渡；文档同步（AGENTS.md
  §5 + 设计文档 §9 迭代记录）

* fix(settings): 二级设置弹窗行区取消横向滚动——box-sizing:border-box + overflow-x:hidden

popupRows 的 width:100% 配 content-box 会在 padding-right:4px 时把
内容盒撑宽 4px，overflow-y:auto 隐式启用的 overflow-x 因此出现横向
滚动条；改为 border-box 并显式 overflow-x:hidden（minifier 输出
overflow:hidden auto），行区始终填满弹窗宽度、无左右滑动。add-plugin
弹窗的 pluginEntries 同步加 overflow-x:hidden。

AGENTS.md

@@ -569,7 +569,7 @@ interface OpenTabSeed {
 }
 ```
 
-> **声明式设置（v0.4.1+）**：每个注册的 tab/viewer 自动出现在 DSH 设置页「侧边卡片」分区的清单里——响应式网格中的**小卡片**（图标 + 标题 + 类型 id + **高亮 = 启用**，勾选徽标钉在卡片最右端，viewer 卡片还显示扩展名），开关持久化到 `SidebarPrefs.tabsEnabled / viewersEnabled`（开放 map，缺省 = 启用）。关闭语义：tab 从 `+` 菜单消失、`openTab` 拒绝新开、子代理自动展开 / agent 终端自动补 tab 等派生流程停止，**已打开的 tab 保留**；viewer 被 `matchFileViewer` 跳过，文件落到下一个匹配。`settings.toggles` 声明的相关设置（如子代理的 `autoOpenSubagent`、终端的 `terminalFontFamily`/`terminalFontSize`）通过卡片右下角的齿轮按钮在**原生弹窗**中编辑——`type: 'switch'` 行是复选框，`type: 'text'`/`'number'` 行是输入框（v0.11.0+），`type: 'select'` 行是下拉选择（options 带 icon 时为大图标选项卡，`multi: true` 多选存 value 数组）——父级卡片关闭时齿轮隐藏；`settings.toggles` 的 **key 必须是宿主 PrefsSchema 的字段**（内置键：`autoOpenSubagent` / `agentTerminalTools` / `terminalFontFamily` / `terminalFontSize` / `editorExplorer` / `htmlViewerNoSandbox` / `htmlViewerDefaultUnsafe` / `browserNoSandbox` / `browserInterceptLinks` / `browserInterceptHttp` / `browserInterceptHttps`）。**v0.12.0 起设置 seam 已开放**：外部插件用 `settings.pluginToggles`（同款行控件，key 插件局部）或 `settings.render`（自定义面板）声明自己的设置，值持久化在 prefs 文档的 `pluginSettings[<descriptor id>]`（开放 map，宿主 schema 已有字段，无需注册）——齿轮弹窗对 tab 与 viewer 都可用（viewer 卡片 v0.12.0 起也有齿轮）。
+> **声明式设置（v0.4.1+）**：每个注册的 tab/viewer 自动出现在 DSH 设置页「侧边卡片」分区的清单里——响应式网格中的**小卡片**（图标 + 标题 + 类型 id + **高亮 = 启用**，启用卡片最右端渲染紧凑品牌开关滑块，viewer 卡片还显示扩展名），开关持久化到 `SidebarPrefs.tabsEnabled / viewersEnabled`（开放 map，缺省 = 启用）。关闭语义：tab 从 `+` 菜单消失、`openTab` 拒绝新开、子代理自动展开 / agent 终端自动补 tab 等派生流程停止，**已打开的 tab 保留**；viewer 被 `matchFileViewer` 跳过，文件落到下一个匹配。`settings.toggles` 声明的相关设置（如子代理的 `autoOpenSubagent`、终端的 `terminalFontFamily`/`terminalFontSize`）通过卡片底部的「功能设置」设置条（齿轮图标 + 文字标签，hairline 分隔）在**原生弹窗**中编辑——`type: 'switch'` 行是复选框，`type: 'text'`/`'number'` 行是输入框（v0.11.0+），`type: 'select'` 行是下拉选择（options 带 icon 时为大图标选项卡，`multi: true` 多选存 value 数组）——父级卡片关闭时设置条隐藏；`settings.toggles` 的 **key 必须是宿主 PrefsSchema 的字段**（内置键：`autoOpenSubagent` / `agentTerminalTools` / `terminalFontFamily` / `terminalFontSize` / `editorExplorer` / `htmlViewerNoSandbox` / `htmlViewerDefaultUnsafe` / `browserNoSandbox` / `browserInterceptLinks` / `browserInterceptHttp` / `browserInterceptHttps`）。**v0.12.0 起设置 seam 已开放**：外部插件用 `settings.pluginToggles`（同款行控件，key 插件局部）或 `settings.render`（自定义面板）声明自己的设置，值持久化在 prefs 文档的 `pluginSettings[<descriptor id>]`（开放 map，宿主 schema 已有字段，无需注册）——设置弹窗对 tab 与 viewer 都可用（viewer 卡片 v0.12.0 起也有设置条）。
 
 ---
 

docs/plans/2026-08-11-declarative-sidebar-settings-design.md

@@ -146,3 +146,17 @@ isViewerEnabled(id: string): boolean
 - **声明**：`SidebarSettingsDeclaration` 增加 `pluginToggles`（声明式行，控件同 toggles 的 switch/text/number，值须 JSON 可序列化）与 `render?: (props: SidebarSettingsRenderProps) => ReactNode`（自定义面板：store/service/prefs/pluginSettings/updatePluginSetting/close；抛错被吞并显示内联错误）。
 - **渲染**：齿轮弹窗体抽为 `SettingsBody`（`render` 存在时优先，否则 toggles 行 + pluginToggles 行，后者把 pluginSettings 投影到 prefs 面复用 `FeatureSettingsRows`）；`settingsFor` 状态从 `TabDescriptor | null` 扩为 `TabDescriptor | FileViewerDescriptor | null`——viewer 卡片 v0.12.0 起同样有齿轮设置弹窗（§4.6 原仅 tab）。
 - **向后兼容**：旧设置文档无 `pluginSettings` 字段 → schema default `{}`；`toggles` 行为与 v0.11.0 完全一致。
+
+---
+
+## 9. 设置页 UI/UX 现代化（feat/settings-sidecard-uiux）
+
+纯视觉/交互入口改造，无 API 与持久化语义变化（`settings.toggles` / `pluginToggles` / `render` / Modal 条件挂载契约全部不变）：
+
+- **二级设置入口：齿轮角标 → 卡片底部设置条**。原 `.cardGear`（16×16px 三级色透明幽灵按钮，`absolute; top:46px` 像素钉位 + `.cardWithGear` padding 耦合）可发现性不足；改为卡片底缘的**全宽设置条** `.cardSettings`（hairline 分隔、齿轮图标 12px + 「功能设置」文字标签 11px/500，hover 换 `--dsw-alias-interactive-bg-hover-accent` 品牌淡底 + brand 字色）。可见性条件不变（仅父级启用且声明 settings）；aria-label 模式 `"${title} ${t('settingsPopup')}"` 不变（测试契约）。常规行齿轮 `.rowGear` 升级为 22×22 带 border-l2 边框的芯片按钮（hover 同样 accent 引导）。
+- **启用态指示（后续迭代：勾选 → 紧凑开关滑块）**：启用卡片描边从全强度品牌色柔化为 `color-mix(button-primary-fill 45%)`。第一版曾把勾选徽标改为 `--dsw-alias-state-success-primary` 实心绿（绿 = 已开启确认，brand = 激活强调）；按反馈再迭代为**紧凑品牌开关滑块** `.cardSwitch`（30×16 track + 10px thumb，开 = brand 填充 + thumb 反色，关 = 中性且不渲染滑块）——纯视觉指示，卡片本身仍是开关（`aria-pressed` 语义不变），不再使用 success 色。全部颜色仍为 `--dsw-alias-*` 令牌派生，零硬编码。
+- **卡片等高**：`.card` 统一 `min-height: 106px` + `.cardMain { flex: 1 }` + `.cardTop { min-height: 28px }`——带设置条的卡片（天然更高）与不带设置条的卡片、无图标卡片全部等高；`prefers-reduced-motion` 覆盖新增的 `.cardSwitchTrack/Thumb` 过渡。
+- **二级弹窗长列表**：`.popupRows` 增加 `max-height: min(56vh, 480px)` + 内部 `overflow-y: auto`（终端等声明 6 行设置的场景下弹窗壳体与 Done 按钮固定，仅行区滚动）；行密度收紧（padding 12/14、gap 8）。
+- **节奏**：section gap 16 / group padding 20 / 网格 `minmax(180px,1fr)` gap 12；计数徽章改为 `accent-soft` 淡底 pill（versionBadgeTag 同款令牌配方）；开关关态 thumb 降一档（label-tertiary）+ track 底 layer-2。
+- **动效纪律**：全部过渡 ≤160ms 且仅 background/border-color/color；`prefers-reduced-motion` 扩展覆盖 `.cardSettings` / `.rowGear` / `.popupRow`。
+- **清理**：合并 `.pluginEntries` 重复定义（原 L598 与 L795 两处，保留带 max-height/overflow 的一处）。

src/client/SideCardSection.module.css

@@ -11,9 +11,13 @@
  * - the feature inventories are responsive GRIDS of small toggle cards
  *   (auto-fill columns — several cards per row, wrapping): icon chip +
  *   title + type id, the card's on/off state IS its visual state
- *   (enabled = brand border + tinted fill + circular check badge,
- *   disabled = neutral hairline + dimmed);
- * - features that declare related settings carry a gear corner button
+ *   (enabled = softened brand border + tinted fill + a compact brand
+ *   switch knob at the far right — the card itself is the toggle;
+ *   disabled = neutral hairline + dimmed, no knob); every card shares a
+ *   uniform min-height so rows stay equal whether or not they carry a
+ *   settings strip;
+ * - features that declare related settings carry a labeled SETTINGS STRIP
+ *   across the card's bottom edge (gear icon + text, hairline-separated)
  *   opening a native Modal (wider than the primitive default) whose rows
  *   follow the same row recipe with switch controls and a Done footer;
  * - the width input stays a native settings row (a value, not a switch).
@@ -22,7 +26,7 @@
 .section {
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: 16px;
   width: 100%;
   max-width: 760px;
   /* The DSH settings shell's `.options` area owns vertical scrolling. Keep
@@ -47,7 +51,7 @@
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 18px 20px 20px;
+  padding: 20px;
   box-sizing: border-box;
   border: 1px solid var(--dsw-alias-border-l2);
   border-radius: 16px;
@@ -67,26 +71,36 @@
   color: var(--dsw-alias-label-primary);
 }
 
+/* The inventory count: a soft-accent pill (the versionBadgeTag token recipe)
+   so the count reads as metadata, not as part of the heading text. */
 .count {
-  font-size: 12px;
-  line-height: 18px;
-  font-weight: 400;
-  color: var(--dsw-alias-label-tertiary);
+  padding: 1px 8px;
+  border-radius: 999px;
+  background: var(--dsw-alias-accent-soft, var(--dsw-alias-bg-layer-2));
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-secondary);
   font-variant-numeric: tabular-nums;
 }
 
 /* Responsive inventory: as many small cards per row as the width allows. */
 .grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
-  gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 12px;
 }
 
-/* One small toggle card (visual chrome; the interactive part is .cardMain). */
+/* One small toggle card (visual chrome; the interactive part is .cardMain).
+   A uniform min-height keeps every inventory card the same height across
+   rows whether or not it carries a settings strip (strip cards are
+   naturally taller); overflow:hidden clips the strip to the card's radius. */
 .card {
   position: relative;
   display: flex;
   flex-direction: column;
+  min-height: 106px;
+  overflow: hidden;
   border-radius: 12px;
   border: 1px solid var(--dsw-alias-border-l2);
   background: transparent;
@@ -102,15 +116,19 @@
   border-color: var(--dsw-alias-label-dimmed);
 }
 
-/* Enabled = highlighted: brand border + tinted fill. */
+/* Enabled = highlighted: a SOFTENED brand border (color-mix, the icon-chip
+   precedent) + tinted fill — full-strength brand reads harsh at card scale. */
 .cardOn {
-  border-color: var(--dsw-alias-button-primary-fill);
+  border-color: color-mix(in srgb, var(--dsw-alias-button-primary-fill) 45%, transparent);
   background: var(--dsw-alias-interactive-bg-active);
 }
 
-/* The card's switch: the whole main area (top row + desc) flips the feature. */
+/* The card's switch: the whole main area (top row + desc) flips the feature.
+   flex:1 lets the main area absorb the extra height of the uniform card
+   (cards without a settings strip stretch to match the strip cards). */
 .cardMain {
   display: flex;
+  flex: 1;
   flex-direction: column;
   gap: 6px;
   width: 100%;
@@ -125,7 +143,7 @@
 }
 
 .cardMain:focus-visible,
-.cardGear:focus-visible,
+.cardSettings:focus-visible,
 .rowGear:focus-visible {
   outline: 2px solid var(--dsw-alias-border-l4);
   outline-offset: 2px;
@@ -136,6 +154,7 @@
   align-items: center;
   gap: 8px;
   min-width: 0;
+  min-height: 28px;
 }
 
 /* The icon sits in a rounded chip: brand-tinted while the card is on,
@@ -175,18 +194,46 @@
   color: var(--dsw-alias-label-primary);
 }
 
-/* The check badge: a circular brand-filled pin at the card's far right
-   (enabled only), the icon in the inverted surface token (the .save recipe). */
-.cardCheck {
+/* The compact on/off switch knob at the card's far right (enabled only):
+   the card itself is the toggle (aria-pressed on .cardMain), so this is a
+   PURELY VISUAL switch — same track/thumb geometry as the row switches,
+   one size down. Off cards show no knob (neutral card = off). */
+.cardSwitch {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
   flex: none;
-  width: 16px;
+}
+
+.cardSwitchTrack {
+  display: inline-flex;
+  align-items: center;
+  width: 30px;
   height: 16px;
+  padding: 2px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-2);
+  border: 1px solid var(--dsw-alias-border-l2);
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.cardSwitchThumb {
+  display: block;
+  width: 10px;
+  height: 10px;
   border-radius: 50%;
+  background: var(--dsw-alias-label-tertiary);
+  transition: transform 0.15s ease, background 0.15s ease;
+}
+
+.cardOn .cardSwitchTrack {
+  border-color: var(--dsw-alias-button-primary-fill);
   background: var(--dsw-alias-button-primary-fill);
-  color: var(--dsw-alias-bg-layer-3);
+}
+
+.cardOn .cardSwitchThumb {
+  transform: translateX(14px);
+  background: var(--dsw-alias-bg-layer-3);
 }
 
 .cardDesc {
@@ -234,41 +281,42 @@
   color: var(--dsw-alias-label-secondary);
 }
 
-/* Cards with a settings gear keep the desc clear of it: the gear sits in
-   the desc row, sharing the check badge's right edge (a vertical column of
-   controls at the card's right side). */
-.cardWithGear .cardDesc {
-  padding-right: 30px;
-}
-
-/* The gear corner button: directly UNDER the check badge on the card's
-   right edge — the two controls are vertically aligned (same right inset,
-   one row apart) and the SAME 16px size, not side by side. */
-.cardGear {
-  position: absolute;
-  right: 12px;
-  top: 46px;
-  display: inline-flex;
+/* The settings strip: a labeled full-width footer across the card's bottom
+   edge (gear icon + "功能设置" text), hairline-separated from the toggle
+   area. This is the SECONDARY settings entry — it must be discoverable at
+   rest (not a hover-only ghost), so it keeps a steady secondary-ink label
+   and answers hover with the brand-accent tint + brand ink. */
+.cardSettings {
+  display: flex;
   align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  padding: 0;
+  gap: 6px;
+  width: 100%;
+  padding: 6px 12px;
   border: 0;
-  border-radius: 50%;
+  border-top: 1px solid var(--dsw-alias-border-l1);
   background: transparent;
-  color: var(--dsw-alias-label-tertiary);
+  color: var(--dsw-alias-label-secondary);
+  font: inherit;
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 500;
+  text-align: left;
   cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
 }
 
-.cardGear:hover {
-  color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-interactive-bg-hover);
+.cardOn .cardSettings {
+  border-top-color: color-mix(in srgb, var(--dsw-alias-button-primary-fill) 18%, transparent);
+}
+
+.cardSettings:hover {
+  background: var(--dsw-alias-interactive-bg-hover-accent);
+  color: var(--dsw-alias-brand-primary);
 }
 
 /* The gear icon button on a general settings ROW (the position-compat
-   row's "customize the strip height" entry): the same 16px icon-button
-   recipe as the card gear, sitting in the row's control area. */
+   row's "customize the strip height" entry): a bordered chip (not a ghost)
+   so it reads as a control at rest; hover answers with the accent tint. */
 .rowGear {
   display: inline-flex;
   align-items: center;
@@ -276,17 +324,19 @@
   width: 22px;
   height: 22px;
   padding: 0;
-  border: none;
-  border-radius: 50%;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 6px;
   background: transparent;
-  color: var(--dsw-alias-label-tertiary);
+  color: var(--dsw-alias-label-secondary);
   cursor: pointer;
   flex: none;
+  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
 }
 
 .rowGear:hover {
-  color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-interactive-bg-hover);
+  border-color: var(--dsw-alias-interactive-bg-hover-accent);
+  background: var(--dsw-alias-interactive-bg-hover-accent);
+  color: var(--dsw-alias-brand-primary);
 }
 
 /* Settings-row recipe (the DSH General section rows): title/desc left,
@@ -349,7 +399,7 @@
   box-sizing: border-box;
   border-radius: 10px;
   border: 1px solid var(--dsw-alias-border-l2);
-  background: var(--dsw-alias-bg-layer-1);
+  background: var(--dsw-alias-bg-layer-2);
   transition: background 0.15s ease, border-color 0.15s ease;
 }
 
@@ -358,7 +408,7 @@
   width: 14px;
   height: 14px;
   border-radius: 50%;
-  background: var(--dsw-alias-label-secondary);
+  background: var(--dsw-alias-label-tertiary);
   transition: transform 0.15s ease, background 0.15s ease;
 }
 
@@ -493,21 +543,49 @@
 
 /* Popup rows: each setting gets the same outer chrome as a plugin-list
    PluginCard (l2 hairline, 12px radius, layer-3 fill). The row's title,
-   description and control geometry stay unchanged inside that frame. */
+   description and control geometry stay unchanged inside that frame.
+   The body scrolls INTERNALLY once a feature declares many rows (e.g.
+   Terminal's six) — the dialog shell and its Done footer stay put; a thin
+   token-driven scrollbar makes the scrollable region discoverable.
+   box-sizing:border-box keeps width:100% + the scrollbar gutter from
+   overflowing horizontally (a content-box width would add the 4px pad and
+   show a horizontal scrollbar); overflow-x:hidden is the belt-and-braces
+   guarantee that rows always FILL the width and never slide sideways. */
 .popupRows {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
   width: 100%;
+  box-sizing: border-box;
+  max-height: min(52vh, 440px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 4px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--dsw-alias-scrollbar-bg-l2, transparent) transparent;
+}
+
+.popupRows::-webkit-scrollbar {
+  width: 6px;
+}
+
+.popupRows::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background: var(--dsw-alias-scrollbar-bg-l2, var(--dsw-alias-border-l2));
+}
+
+.popupRows::-webkit-scrollbar-thumb:hover {
+  background: var(--dsw-alias-scrollbar-hover-l2, var(--dsw-alias-label-dimmed));
 }
 
 .popupRow {
+  flex: none;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   min-width: 0;
-  padding: 14px 16px;
+  padding: 12px 14px;
   border: 1px solid var(--dsw-alias-border-l2);
   border-radius: 12px;
   background: var(--dsw-alias-bg-layer-3);
@@ -595,12 +673,6 @@
   color: var(--dsw-alias-label-tertiary);
 }
 
-.pluginEntries {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
 /* One catalog entry: name + install button on the head row, description,
    then the install command in a mono block (the exact script that gets
    pre-typed into the terminal — review it here before installing). */
@@ -730,6 +802,11 @@
 
 @media (prefers-reduced-motion: reduce) {
   .card,
+  .cardSettings,
+  .cardSwitchTrack,
+  .cardSwitchThumb,
+  .rowGear,
+  .popupRow,
   .switchTrack,
   .switchThumb {
     transition: none;
@@ -798,6 +875,7 @@
   gap: 10px;
   max-height: 46vh;
   overflow-y: auto;
+  overflow-x: hidden;
   padding-right: 2px;
 }
 

src/client/SideCardSection.tsx

@@ -21,13 +21,15 @@
  * one-line intro (the DSH section heading+intro recipe).
  *
  * A card's on/off state is its VISUAL STATE: enabled = highlighted (brand
- * border + tinted fill + a circular check badge pinned to the card's far
- * right), disabled = neutral and dimmed. Features that declare
- * `settings.toggles` carry a gear corner button that opens a native Modal
- * (wider than the primitive default) with the related settings as
- * title/desc + custom-switch rows and a Done footer. The toggles
- * themselves are custom switches: a real checkbox (native semantics and
- * focus) driving a styled track/thumb.
+ * border + tinted fill + a compact switch knob at the card's far right),
+ * disabled = neutral and dimmed. Features that declare
+ * `settings.toggles` carry a labeled settings strip at the card's bottom
+ * edge that opens a native Modal (wider than the primitive default) with
+ * the related settings as title/desc + custom-switch rows and a Done
+ * footer; the popup body scrolls internally when a feature declares many
+ * rows (e.g. Terminal's six). The toggles themselves are custom
+ * switches: a real checkbox (native semantics and focus) driving a styled
+ * track/thumb.
  *
  * Writes ride the plugin's own fenced settings route (the host calls the
  * settings seam in-process — the DSH settings RPC domain does not serve
@@ -40,7 +42,6 @@
  */
 import { Fragment, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 import {
-  IconCheckOutline16,
   IconChevronDownOutline14,
   IconPlusOutline16,
   IconSettingsOutline16,
@@ -793,8 +794,9 @@ export function SideCardSection({ store, service }: SideCardSectionProps) {
    * One SMALL toggle card for the responsive inventory grid: the card's main
    * area is the switch (click to flips, visual state IS the state), the icon
    * sits in a rounded chip, the check badge pins to the far right, and a
-   * feature that declares related settings carries a gear corner button
-   * opening its settings popup.
+   * feature that declares related settings gets a labeled SETTINGS STRIP
+   * across the card's bottom edge (gear icon + text) opening its settings
+   * popup — discoverable at rest, not a hover-only ghost corner button.
    */
   const renderCard = (props: {
     title: string
@@ -802,13 +804,13 @@ export function SideCardSection({ store, service }: SideCardSectionProps) {
     icon?: ReactNode
     enabled: boolean
     onToggle: (next: boolean) => void
-    /** A feature with declared related settings shows the gear corner button. */
+    /** A feature with declared related settings shows the settings strip. */
     onOpenSettings?: () => void
   }) => {
     const hasSettings = props.onOpenSettings !== undefined
     return (
       <div
-        className={clsx(css.card, props.enabled && css.cardOn, hasSettings && css.cardWithGear)}
+        className={clsx(css.card, props.enabled && css.cardOn)}
       >
         <button
           type="button"
@@ -823,8 +825,10 @@ export function SideCardSection({ store, service }: SideCardSectionProps) {
             )}
             <span className={css.cardTitle}>{props.title}</span>
             {props.enabled && (
-              <span className={css.cardCheck}>
-                <IconCheckOutline16 size={12} />
+              <span className={css.cardSwitch} aria-hidden="true">
+                <span className={css.cardSwitchTrack}>
+                  <span className={css.cardSwitchThumb} />
+                </span>
               </span>
             )}
           </span>
@@ -833,12 +837,12 @@ export function SideCardSection({ store, service }: SideCardSectionProps) {
         {hasSettings && (
           <button
             type="button"
-            className={css.cardGear}
+            className={css.cardSettings}
             aria-label={`${props.title} ${t('settingsPopup')}`}
-            title={t('settingsPopup')}
             onClick={props.onOpenSettings}
           >
             <IconSettingsOutline16 size={12} />
+            <span>{t('settingsPopup')}</span>
           </button>
         )}
       </div>