cx-viewer 1.0.2 → 1.0.4

package/src/components/terminal/UltraPlanModal.module.css

@@ -0,0 +1,527 @@
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal {
+  width: 95vw;
+  max-width: 560px;
+  /* 未拖拽过时给 modal 一个合理初始高度,让 textareaWrap flex grow 有目标。
+     拖拽过的 inline height 会覆盖这个值。 */
+  height: 480px;
+  /* max-height 由 inline style 兜底 90vh;CSS 保留 default 给未拖拽过的状态 */
+  max-height: 85vh;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-hover);
+  border-radius: 12px;
+  /* overflow:hidden 而非 auto —— scroll 容器会让 flex grow 在某些浏览器(Chrome/Safari)
+     无法正确把剩余空间分给 .textareaWrap,导致 textarea 不撑大、footer 卡中段。
+     scroll 留给 textarea 自己(textarea 长内容时它原生就有 overflow-y:auto)。 */
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  /* handle absolute 锚点 + 拖拽 inline width/height 写在这里 */
+  position: relative;
+}
+
+/* 内容容器:把 header + variantRow + fileList + textareaWrap + footer 包起来,
+   跟 .resizeHandle(absolute)解耦。
+   - 占据 modal 全部尺寸(flex: 1),
+   - 内部独立 flex column,flex grow 算法只在这一层算,不受 modal 父级影响,
+   - min-height: 0 解锁 flex shrink 默认 min-content 约束。 */
+.modalContent {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  width: 100%;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px 8px;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.closeBtn {
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+}
+
+.closeBtn:hover {
+  background: var(--bg-surface);
+  color: var(--text-secondary);
+}
+
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* flex-shrink: 0 保证横向滚动场景下自定义专家 tab 不被压缩。 */
+.customWrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.customTitle {
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.editPencil {
+  position: absolute;
+  top: -4px;
+  inset-inline-end: -4px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-primary);
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s;
+  z-index: 2;
+}
+
+.customWrap:hover .editPencil {
+  opacity: 1;
+}
+
+.editPencil:hover {
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+@media (max-width: 768px) {
+  .editPencil { opacity: 1; }
+}
+
+.disabledTip {
+  padding: 16px;
+  font-size: 13px;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+
+/* padding 0 20px:tabs 自然位置距 modal 左右各 20px,视觉上是"行进入"的呼吸区。
+   active tab 的 sticky 钉边位置是 left/right: 0,即贴 modal 内沿。两者不同 ——
+   只有当滚动开始、active tab 行进到达 left/right: 0 时才会"撞墙"钉住;不滚动时
+   tab 永远在 padding 自然位置,不会因为切换 active 而抖动。
+   flex-wrap: nowrap + overflow-x: auto 保持单行 Chrome-tab strip 风格;滚动条隐藏。 */
+.variantRow {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  padding: 0 20px;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.variantRow::-webkit-scrollbar {
+  display: none;
+}
+
+/* padding-y 从 7px 提到 9px,让专家按钮高度更厚实,与 box 衔接后视觉重量更平衡。
+   flex-shrink: 0 保证横向滚动场景下 tab 自身不被压缩,保持自然宽度。 */
+.roleBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 9px 14px;
+  font-size: 15px;
+  line-height: 1.6;
+  border: 1px solid var(--border-color);
+  border-radius: 14px;
+  background: var(--bg-main);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.2s;
+  user-select: none;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.roleBtn:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+
+/* 选中态 = Chrome 浏览器头部 tab 形:顶圆角 + 底平 + bg 取 textarea 同色
+   (--bg-container,light=#FFF/dark=#111),与 modal 容器(--bg-elevated)有明显
+   对比,视觉上像 tab 拉出来贴合下方 textarea 内容区;border-bottom 同色"开口"
+   下沿,margin-bottom: -1px 让 tab 视觉上贴合 textarea 顶部。
+   position: relative + z-index: 1 让 active tab 渲染层级高于 textareaWrap,这样
+   box 顶边向上扩散的柔光阴影会被 active tab 同色 bg 视觉吃掉,衔接处保持纯白。
+   复合选择器 .roleBtn.roleBtnActive 让特异度 0,2,0 高于 .roleBtn:hover 的 0,1,1,
+   所以 hover 时不再触发 :hover 颜色覆盖,选中态样式一直生效 (DevTools 也不会再把
+   这条规则的属性标成 overridden)。
+   sticky 定位见下方两条规则 —— 内置专家 (button 直接是 variantRow 的 flex 子) 和
+   自定义专家 (customWrap 是 flex 子,button 套在里面) 分别处理。 */
+.roleBtn.roleBtnActive {
+  background: var(--bg-container);
+  color: var(--color-primary);
+  border-color: var(--border-primary);
+  border-bottom-color: var(--bg-container);
+  border-radius: 10px 10px 0 0;
+  font-weight: 500;
+  margin-bottom: -1px;
+  position: relative;
+  z-index: 1;
+}
+
+/* 横向滚动时把 active tab 钉在 modal 内沿 (Chrome browser tab strip 风格):
+   - left/right 都设 0,即贴 scrollport 内沿;tabs 的自然位置在 padding 20px,
+     只有当用户滚动到 active tab 撞到内沿时 sticky 才接管,这是有反馈感的"撞墙"位置;
+   - 不滚动时 sticky 永远不激活,tab 都在 padding 自然位置,点击切换 active 零抖动;
+   - z-index: 2 让 active tab 渲染层级高于相邻 inactive tab,滚动时其它 tab 从下方穿过;
+   - 内置专家用 ">" 子选择器命中 (button 直接是 flex item);
+   - 自定义专家用 :has() 选中 customWrap (它才是 flex item,button 套在里面),
+     :has() 需要 Chrome 105+ / Safari 15.4+ / Firefox 121+ —— 当前主流浏览器都已支持。 */
+.variantRow > .roleBtn.roleBtnActive,
+.customWrap:has(> .roleBtn.roleBtnActive) {
+  position: sticky;
+  left: 0;
+  right: 0;
+  z-index: 2;
+}
+
+/* 浅色主题阴影:
+   - .textareaWrap 沿用对话气泡 --bubble-assistant-shadow-light 同款柔和下落阴影;
+   - .roleBtnActive 只走"向上"方向阴影 (offset-y: -3px),没有向下扩散,
+     和 box 的"向上"小尾巴一起被 active tab 自身的同色 bg 视觉吃掉,衔接处零阴影。
+   暗色主题不加阴影 (对照 chat 气泡:dark 也无 box-shadow,深底上阴影本身不可见)。 */
+[data-theme="light"] .textareaWrap {
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
+}
+[data-theme="light"] .roleBtnActive {
+  box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.06);
+}
+
+/* 无边框版:padding 上下各 6px,total height 显著短于 roleBtn;
+   align-self: center 覆盖父级 .variantRow 的 flex-end;
+   margin-bottom: 2px 把按钮向上微调 2px,贴合 PC 端 .ultraplanAddExpertBtn 的视觉对齐;
+   flex-shrink: 0 保证横向滚动场景下 +自定义专家 不被压缩。 */
+.addExpertBtn {
+  display: inline-flex;
+  align-items: center;
+  align-self: center;
+  gap: 5px;
+  padding: 6px 14px 6px;
+  font-size: 15px;
+  line-height: 1.6;
+  margin-left: 4px;
+  margin-bottom: 2px;
+  border: none;
+  border-radius: 14px;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+  user-select: none;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.addExpertBtn:hover {
+  color: var(--color-primary);
+  background: var(--bg-surface);
+}
+
+/* light theme:text-muted 在白底上对比度偏弱(static 状态接近 placeholder/disabled
+   视感),用 text-secondary 提色保留「新增 = 待激活」语义。 */
+[data-theme="light"] .addExpertBtn {
+  color: var(--text-secondary);
+}
+
+/* fileList 在 textareaWrap 内,位于 textarea 卡片下方:
+   - padding-top: 8px 给 textarea 卡片底边与 chip 之间留视觉呼吸;
+   - 横向 padding 14px 与 textarea 内 padding-x 对齐,chip 起始对齐文本起始;
+   - 底部 8px 让 chip 与外框 padding 边缘保持距离(外框 padding-bottom 4 + 这里 8 = 12)。 */
+.fileList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 8px 14px;
+  /* 限高 + 内部滚动:粘贴大量文件时 fileList 不会撑大把 textarea 挤到 0,
+     超过两行 chip 时 fileList 内部出现滚动条。flex-shrink: 0 让 textarea(flex:1 1 0)
+     抢剩余空间;textareaWrap 的 overflow: hidden 仍兜底防越界。 */
+  max-height: 80px;
+  overflow-y: auto;
+  flex-shrink: 0;
+}
+
+/* chip 被嵌入 inputBox 后,chip bg 与 box bg 同为 --bg-container 会"消失";
+   切到 --bg-elevated 让 chip 在 box 内有清晰边界(light/dark 都成立)。 */
+.fileChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-primary);
+  font-size: 11px;
+  color: var(--text-secondary);
+  max-width: 180px;
+  white-space: nowrap;
+  transition: border-color 0.15s;
+}
+
+.fileChip:hover {
+  border-color: var(--color-primary-pale);
+}
+
+.fileChip svg {
+  flex-shrink: 0;
+}
+
+.fileName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.fileRemove {
+  flex-shrink: 0;
+  cursor: pointer;
+  color: var(--text-disabled);
+}
+
+.fileRemove:hover {
+  color: var(--text-primary);
+}
+
+.imageItem {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  border-radius: 6px;
+  overflow: hidden;
+  border: 1px solid var(--border-primary);
+  transition: border-color 0.15s;
+}
+
+.imageItem:hover {
+  border-color: var(--color-primary-pale);
+}
+
+.imageThumb {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  cursor: pointer;
+}
+
+.imageRemove {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 18px;
+  height: 18px;
+  border: none;
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  font-size: 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0 0 0 6px;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.imageItem:hover .imageRemove {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .imageRemove,
+  .fileRemove {
+    opacity: 1;
+    min-width: 22px;
+    min-height: 22px;
+  }
+}
+
+/* textareaWrap = textarea + fileList 的白底容器,只给 bg + 圆角,无边框。
+   padding: 4px 让内部 textarea 卡片与外框留出呼吸距离,textarea 自身边框形成可见的
+   "卡片"轮廓(用户红框标记的位置)。overflow: hidden 保证 fileList 不越出圆角;
+   active tab 通过 margin-bottom:-1px 压进外框顶边的 padding 区,白底视觉融合。 */
+.textareaWrap {
+  margin: 0 16px;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0;
+  min-height: 0;
+  background: var(--bg-container);
+  border-radius: 8px;
+  overflow: hidden;
+  padding: 4px;
+}
+
+/* textarea 自带圆角 + 常驻可见的浅色 border,标记输入框的可见范围(用户红框区域)。
+   focus 时 border-color 升级为 primary-pale 形成"亮框" —— 高亮局限在 textarea 自身,
+   不蔓延到 fileList 区域(用户明确要求)。 */
+.textarea {
+  flex: 1 1 0;
+  width: 100%;
+  min-height: 0;
+  box-sizing: border-box;
+  padding: 12px 14px;
+  background: transparent;
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  color: var(--text-primary);
+  font-size: 16px;
+  line-height: 1.5;
+  font-family: inherit;
+  transition: border-color 0.15s;
+  /* 原生 resize 关掉(modal 整体 drag 接管)。手机模式 JS 会在 inline style 覆盖回 'vertical'。 */
+  resize: none;
+  outline: none;
+}
+
+.textarea:focus {
+  border-color: var(--color-primary-pale);
+}
+
+/* Modal 左上角 SVG resize handle:直角三角形,直角顶点在左上(rounded corner 圆弧
+   凸向左上),斜边从右上到左下。位置 top:6 left:6 跟 modal 左上保持距离,既不顶圆角
+   也不挡 header 标题(标题 from left:16)。颜色浅灰半透明,与 modal 主视觉低对比。 */
+.resizeHandle {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  width: 18px;
+  height: 18px;
+  cursor: nwse-resize;
+  z-index: 5;
+  touch-action: none;
+  /* color 用 --text-disabled-faint:浅色主题 rgba(0,0,0,0.35),暗色 rgba(255,255,255,0.45),
+     已自带"很淡"质感且对两个主题对称(深底浅 handle / 浅底深 handle)。基础 opacity 0.7
+     再降一档(合成 alpha ~0.25)更接近"几乎不打扰"的视觉重量;hover 回 1.0 提示可点。 */
+  color: var(--text-disabled-faint);
+  opacity: 0.7;
+  transition: opacity 0.15s ease;
+  /* SVG 父级:line-height 归零防 baseline 多 1px;display:block 防 inline gap */
+  display: block;
+  line-height: 0;
+}
+
+.resizeHandle svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.resizeHandle:hover,
+.resizeHandle:active {
+  opacity: 1;
+}
+
+/* iPad 模式 handle 放大,符合触摸目标 24×24 最低建议 */
+:global(.pad-mode) .resizeHandle {
+  width: 22px;
+  height: 22px;
+  top: 8px;
+  left: 8px;
+}
+
+.textarea::placeholder {
+  color: var(--text-disabled);
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px 14px;
+}
+
+.sendBtn {
+  height: 38px;
+  padding: 0 24px;
+  border: none;
+  border-radius: 8px;
+  background: var(--color-primary);
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: opacity 0.15s;
+}
+
+.sendBtn:hover {
+  opacity: 0.85;
+}
+
+.sendBtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.uploadBtn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  height: 38px;
+  padding: 0 18px;
+  border: 1px solid var(--border-secondary);
+  border-radius: 8px;
+  background: var(--bg-elevated);
+  color: var(--text-light);
+  font-size: 16px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.15s;
+}
+
+.uploadBtn:hover {
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  border-color: var(--text-disabled);
+}
+
+/* ─── 手机端补偿 mobileChatInner zoom: 0.6 ─── */
+@media (max-width: 768px) {
+  .backdrop { zoom: 1.4; }
+}
+
+/* iPad pad-mode 不需要缩放补偿 */
+:global(html.pad-mode) .backdrop {
+  zoom: 1;
+}

package/src/components/terminal/UltraplanExpertManagerModal.jsx

@@ -0,0 +1,114 @@
+import React, { useRef, useState } from 'react';
+import { Modal, Switch, message } from 'antd';
+import { t } from '../../i18n';
+import { buildExpertList, reorderKeys, canHideOne } from '../../utils/ultraplanExperts';
+import styles from './UltraplanExpertManagerModal.module.css';
+
+// UltraPlan「管理专家」弹窗：统一管理内置(代码/调研)与自定义专家的「显示/隐藏」与「拖拽排序」。
+// 数据真源 = buildExpertList(customExperts, order, hidden)(纯函数，src/utils/ultraplanExperts.js)。
+// 受控组件：每次显隐/排序都立即 onPersist({order,hidden})，父级落服务端 preferences 后回灌 props。
+// 列表展示「全部」专家(含已隐藏，便于重新显示)；只有可见者才会出现在 popover 的 tab 条上。
+
+// 内置专家在列表里的标题 / 描述 i18n key + 图标。
+const BUILTIN_META = {
+  codeExpert: {
+    titleKey: 'ui.ultraplan.roleCodeExpert',
+    descKey: 'ui.ultraplan.roleCodeExpertDesc',
+    icon: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>,
+  },
+  researchExpert: {
+    titleKey: 'ui.ultraplan.roleResearchExpert',
+    descKey: 'ui.ultraplan.roleResearchExpertDesc',
+    icon: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>,
+  },
+};
+const CUSTOM_ICON = <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8z"/></svg>;
+
+export default function UltraplanExpertManagerModal({ open, customExperts, order, hidden, onPersist, onClose }) {
+  const dragIdx = useRef(null);
+  const dragOverIdx = useRef(null);
+  const [, forceRender] = useState(0);
+
+  const list = buildExpertList(customExperts, order, hidden);
+
+  const persist = (nextOrderKeys, nextHidden) => {
+    onPersist({ order: nextOrderKeys, hidden: nextHidden });
+  };
+
+  // 显示/隐藏：受控,立即持久化。护栏:不允许隐藏最后一个可见专家(canHideOne)。
+  const handleToggle = (key, nextVisible) => {
+    if (!nextVisible && !canHideOne(list)) {
+      message.warning(t('ui.ultraplan.keepOneVisible'));
+      return;
+    }
+    const hiddenSet = new Set(Array.isArray(hidden) ? hidden : []);
+    if (nextVisible) hiddenSet.delete(key); else hiddenSet.add(key);
+    persist(list.map(d => d.key), [...hiddenSet]);
+  };
+
+  // 拖拽排序(照搬 PresetModal 的原生 HTML5 范式)。
+  const handleDragStart = (idx, e) => { e.stopPropagation(); dragIdx.current = idx; e.dataTransfer.effectAllowed = 'move'; requestAnimationFrame(() => forceRender(n => n + 1)); };
+  const handleDragOver = (idx, e) => { e.preventDefault(); e.stopPropagation(); e.dataTransfer.dropEffect = 'move'; if (dragOverIdx.current !== idx) { dragOverIdx.current = idx; forceRender(n => n + 1); } };
+  const handleDragEnd = () => { dragIdx.current = null; dragOverIdx.current = null; forceRender(n => n + 1); };
+  const handleDragLeave = (idx, e) => { e.stopPropagation(); if (dragOverIdx.current === idx) { dragOverIdx.current = null; forceRender(n => n + 1); } };
+  const handleDrop = (idx, e) => {
+    e.preventDefault(); e.stopPropagation();
+    const from = dragIdx.current;
+    if (from === null || from === idx) { handleDragEnd(); return; }
+    const keys = reorderKeys(list.map(d => d.key), from, idx);
+    persist(keys, Array.isArray(hidden) ? hidden : []);
+    handleDragEnd();
+  };
+
+  return (
+    <Modal
+      title={t('ui.ultraplan.manageExperts')}
+      open={open}
+      onCancel={onClose}
+      footer={null}
+      width="min(560px, calc(100vw - 80px))"
+      zIndex={1300}
+      destroyOnHidden
+      styles={{ content: { background: 'var(--bg-elevated)', border: '1px solid var(--border-light)' }, header: { background: 'var(--bg-elevated)', borderBottom: 'none' } }}
+    >
+      <div
+        className={styles.list}
+        onDragOver={e => { e.preventDefault(); e.stopPropagation(); }}
+        onDrop={e => { e.preventDefault(); e.stopPropagation(); }}
+      >
+        {list.map((d, idx) => {
+          const meta = d.kind === 'builtin' ? BUILTIN_META[d.key] : null;
+          const title = meta ? t(meta.titleKey) : (d.item?.title || '');
+          const desc = meta ? t(meta.descKey) : '';
+          const icon = meta ? meta.icon : CUSTOM_ICON;
+          return (
+            <div
+              key={d.key}
+              className={`${styles.row} ${dragIdx.current === idx ? styles.rowDragging : ''} ${dragOverIdx.current === idx && dragIdx.current !== idx ? styles.rowDragOver : ''} ${d.hidden ? styles.rowHidden : ''}`}
+              onDragOver={e => handleDragOver(idx, e)}
+              onDragLeave={e => handleDragLeave(idx, e)}
+              onDrop={e => handleDrop(idx, e)}
+              onDragEnd={handleDragEnd}
+            >
+              <span className={styles.dragHandle} draggable onDragStart={e => handleDragStart(idx, e)} aria-hidden="true">
+                <svg viewBox="0 0 10 16" width="10" height="16" fill="currentColor"><circle cx="3" cy="3" r="1.2"/><circle cx="7" cy="3" r="1.2"/><circle cx="3" cy="8" r="1.2"/><circle cx="7" cy="8" r="1.2"/><circle cx="3" cy="13" r="1.2"/><circle cx="7" cy="13" r="1.2"/></svg>
+              </span>
+              <span className={styles.icon}>{icon}</span>
+              <span className={styles.meta}>
+                <span className={styles.title} title={title}>{title}</span>
+                {desc && <span className={styles.desc} title={desc}>{desc}</span>}
+              </span>
+              <Switch
+                className={styles.switch}
+                size="small"
+                checked={!d.hidden}
+                aria-label={`${title} — ${t('ui.ultraplan.expertShow')}`}
+                onChange={(checked) => handleToggle(d.key, checked)}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </Modal>
+  );
+}