cx-viewer 1.0.3 → 1.0.4

package/src/components/common/PanelResizer.module.css

@@ -0,0 +1,11 @@
+.resizer {
+  width: 6px;
+  cursor: col-resize;
+  background: var(--bg-elevated);
+  flex-shrink: 0;
+  transition: background 0.2s;
+}
+
+.resizer:hover {
+  background: var(--color-primary-light);
+}

package/src/components/common/QuickAutoApproveRows.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { t } from '../../i18n';
+import chrome from './sharedChrome.module.css';
+import { ShieldCheckIcon, PlanClipboardIcon } from './quickMenuIcons';
+import { PLAN_AUTO_APPROVE_OPTIONS, autoApproveValueLabel } from '../../utils/autoApproveOptions';
+import { APPROVALS_REVIEWER_OPTIONS, approvalReviewerValueLabel, normalizeApprovalsReviewer } from '../../utils/approvalReviewerOptions';
+
+// 四芒星快捷菜单的「权限审批代理 / Plan 自动审批」两行级联。
+// 级联子菜单由 expandedKey 驱动显隐而非 CSS :hover —— 选完档位要立即收起，
+// 此时鼠标仍悬停在 group 上，纯 :hover 收不掉。hover-intent 由宿主经
+// onHoverEnter/onHoverLeave 注入（见 utils/quickMenuHoverIntent）。
+function QuickAutoApproveRows({ approvalsReviewer, planAutoApproveSeconds, onApprovalsReviewerChange, onPlanAutoApproveChange, expandedKey, onToggle, onHoverEnter, onHoverLeave }) {
+  const rows = [
+    {
+      key: 'perm',
+      icon: <ShieldCheckIcon />,
+      label: t('ui.permission.reviewer.setting'),
+      value: normalizeApprovalsReviewer(approvalsReviewer),
+      options: APPROVALS_REVIEWER_OPTIONS,
+      onChange: onApprovalsReviewerChange,
+      valueLabel: approvalReviewerValueLabel,
+    },
+    {
+      key: 'plan',
+      icon: <PlanClipboardIcon />,
+      label: t('ui.approval.settings.planAutoApprove'),
+      value: planAutoApproveSeconds,
+      options: PLAN_AUTO_APPROVE_OPTIONS,
+      onChange: onPlanAutoApproveChange,
+      valueLabel: autoApproveValueLabel,
+    },
+  ];
+  return rows.map(row => {
+    const expanded = expandedKey === row.key;
+    return (
+      <div
+        key={row.key}
+        className={`${chrome.quickMenuGroup} ${expanded ? chrome.quickMenuGroupOpen : ''}`}
+        onMouseEnter={() => onHoverEnter(row.key)}
+        onMouseLeave={() => onHoverLeave(row.key)}
+      >
+        <button className={chrome.quickMenuRow} onClick={() => onToggle(expanded ? null : row.key)}>
+          <span className={chrome.quickMenuRowIcon}>{row.icon}</span>
+          <span className={chrome.quickMenuLabel}>{row.label}</span>
+          <span className={chrome.quickMenuValue}>[{row.valueLabel(row.value, t)}]</span>
+          <span className={chrome.quickMenuCaret}>▸</span>
+        </button>
+        <div className={chrome.quickMenuSubWrap}>
+          <div className={chrome.quickMenuSub}>
+            {row.options.map(v => (
+              <button
+                key={v}
+                className={`${chrome.quickMenuOption} ${row.value === v ? chrome.quickMenuOptionActive : ''}`}
+                onClick={() => { row.onChange?.(v); onToggle(null); }}
+              >
+                {row.valueLabel(v, t)}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  });
+}
+
+export default QuickAutoApproveRows;

package/src/components/common/RefreshIcon.jsx

@@ -0,0 +1,50 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styles from './RefreshIcon.module.css';
+
+// 标题栏内联刷新图标：<span role="button"> 包壳，跟 OpenFolderIcon 风格一致，避免在
+// inline-flex 标题里塞真 <button> 影响节奏。封装 300ms cooldown 防狂点；cooldown 期间
+// pointer-events:none + tabIndex=-1 双重拦截连击，避免 fetchChildren 风暴（FileExplorer /
+// GitChanges 内部 fetch 无 AbortController，旧 promise 不取消会按响应顺序竞争 setState）。
+// 点击时一次性 360° 旋转动效给即时反馈（跟项目 spinner keyframe 同源 0 → 360）。
+export default function RefreshIcon({ onClick, title, size = 12 }) {
+  const [cooldown, setCooldown] = useState(false);
+  const timerRef = useRef(null);
+
+  useEffect(() => () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+  }, []);
+
+  const fire = (e) => {
+    if (e) e.stopPropagation();
+    if (cooldown) return;
+    setCooldown(true);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => setCooldown(false), 300);
+    try { onClick && onClick(); } catch { /* swallow */ }
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      fire(e);
+    }
+  };
+
+  return (
+    <span
+      role="button"
+      tabIndex={cooldown ? -1 : 0}
+      onClick={fire}
+      onKeyDown={handleKeyDown}
+      title={title}
+      aria-label={title}
+      aria-busy={cooldown}
+      className={`${styles.btn} ${cooldown ? styles.btnBusy : ''}`}
+    >
+      <svg width={size} height={size} viewBox="0 0 1024 1024" fill="currentColor" aria-hidden="true">
+        <path d="M281.6 798.72c-76.8-61.44-122.88-153.6-122.88-261.12 0-153.6 102.4-281.6 245.76-322.56V133.12c-189.44 40.96-327.68 204.8-327.68 404.48 0 122.88 51.2 235.52 138.24 312.32 66.56 61.44 107.52-20.48 66.56-51.2zM752.64 225.28c-40.96-35.84-102.4 25.6-61.44 56.32 76.8 61.44 122.88 153.6 122.88 261.12 0 153.6-102.4 281.6-245.76 322.56v87.04c189.44-40.96 327.68-204.8 327.68-404.48 0-138.24-56.32-250.88-143.36-322.56z"/>
+        <path d="M440.32 286.72L573.44 204.8c20.48-10.24 20.48-30.72 0-40.96L440.32 81.92c-20.48-10.24-35.84-5.12-35.84 20.48v163.84c0 25.6 15.36 35.84 35.84 20.48zM532.48 788.48L399.36 870.4c-20.48 10.24-20.48 30.72 0 40.96l133.12 81.92c20.48 10.24 35.84 5.12 35.84-20.48v-163.84c0-25.6-15.36-35.84-35.84-20.48z"/>
+      </svg>
+    </span>
+  );
+}

package/src/components/common/RefreshIcon.module.css

@@ -0,0 +1,26 @@
+/* 标题栏内联刷新按钮样式 */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  color: var(--text-muted);
+  opacity: 0.7;
+  border-radius: 3px;
+  /* 旋转 transition 跟项目 spinner 同样的 0.4s 单次过渡，反馈温和不抢镜 */
+  transition: opacity 0.15s, color 0.15s, transform 0.4s;
+}
+
+.btn:hover {
+  opacity: 1;
+  color: var(--text-secondary);
+}
+
+/* cooldown 期间：禁用点击 + 一次性 360° 旋转 + 进度光标提示 */
+.btnBusy {
+  pointer-events: none;
+  cursor: progress;
+  transform: rotate(360deg);
+}

package/src/components/common/SnapLineOverlay.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import styles from './SnapLineOverlay.module.css';
+
+function SnapLineOverlay({ isDragging, activeSnapLine, snapLines, currentLeft }) {
+  if (!isDragging) return null;
+
+  // snap preview
+  let snapPreview = null;
+  if (activeSnapLine) {
+    const snapLeft = activeSnapLine.linePosition;
+    const left = Math.min(currentLeft, snapLeft);
+    const width = Math.abs(snapLeft - currentLeft);
+    snapPreview = (
+      <div
+        className={styles.snapPreview}
+        style={{ left: `${left}px`, width: `${width}px` }}
+      />
+    );
+  }
+
+  // nearest snap line
+  const sorted = [...snapLines]
+    .map(snap => ({ ...snap, dist: Math.abs(snap.linePosition - currentLeft) }))
+    .sort((a, b) => a.dist - b.dist);
+
+  let snapLineEl = null;
+  if (sorted.length > 0) {
+    const snap = sorted[0];
+    const isActive = activeSnapLine && activeSnapLine.cols === snap.cols;
+    snapLineEl = (
+      <div
+        key={snap.cols}
+        className={isActive ? styles.snapLineActive : styles.snapLine}
+        style={{ left: `${snap.linePosition}px` }}
+      />
+    );
+  }
+
+  return (
+    <>
+      {snapPreview}
+      {snapLineEl}
+    </>
+  );
+}
+
+export default SnapLineOverlay;

package/src/components/common/SnapLineOverlay.module.css

@@ -0,0 +1,31 @@
+.snapLine {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: #00000000;
+  border-left: 2px dashed var(--overlay-light-medium);
+  pointer-events: none;
+  z-index: 1000;
+  transition: all 0.15s;
+}
+
+.snapLineActive {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: #00000000;
+  border-left: 2px dashed var(--overlay-light-half);
+  pointer-events: none;
+  z-index: 1001;
+}
+
+.snapPreview {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: var(--overlay-light-medium);
+  pointer-events: none;
+  z-index: 999;
+}

package/src/components/common/ToolsHelp.jsx

@@ -0,0 +1,113 @@
+import React, { useState } from 'react';
+import { Modal } from 'antd';
+import { t } from '../../i18n';
+import { isMobile, isPad } from '../../env';
+import { TOOL_CATALOG } from '../../utils/toolCatalog';
+import ConceptHelp from './ConceptHelp';
+import styles from './ToolsHelp.module.css';
+
+/**
+ * "All tools" catalog help. Renders a small `?` trigger; clicking it opens a
+ * modal listing every built-in tool grouped by category (TOOL_CATALOG).
+ * Clicking a tool opens its concepts/<lang>/Tool-<name>.md in a *second-level*
+ * modal (via ConceptHelp) stacked on top — the catalog stays mounted
+ * underneath, so there is no in-place content swap / flicker.
+ */
+export default function ToolsHelp({ zIndex, closeParent, onOpenChange, children }) {
+  const [open, setOpen] = useState(false);
+  const compact = isMobile && !isPad;
+
+  // 二级（工具说明）弹窗需叠在目录弹窗之上：目录用 baseZ，内层 ConceptHelp 用更高值。
+  const baseZ = zIndex || 1000;
+  const innerZ = baseZ + 10;
+
+  // onOpenChange 让宿主感知目录开关:血条 Popover 是「内容随开关换出」型,需借此让其守卫
+  // (_isCacheDetailModalOpen)保持展开,否则目录 Modal 会随 Popover 收起被卸载。
+  const setCatalogOpen = (next) => {
+    setOpen(next);
+    if (typeof onOpenChange === 'function') onOpenChange(next);
+  };
+
+  // 打开目录弹窗时收起承载本组件的 hover 弹层(token 统计面板),避免「原窗口」残留在底层。
+  // 弹层 destroyTooltipOnHide 默认为 false + 目录 Modal portal 到 body,故本组件不会被卸载。
+  const openCatalog = () => {
+    setCatalogOpen(true);
+    if (typeof closeParent === 'function') closeParent();
+  };
+
+  // 触发器位于 hover Popover(工具使用统计面板)内,点击不得穿透到外层。
+  const triggerHandlers = {
+    onClick: (e) => { e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); openCatalog(); },
+    onMouseDown: (e) => { e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); },
+    onPointerDown: (e) => { e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); },
+    onKeyDown: (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        e.stopPropagation();
+        openCatalog();
+      }
+    },
+  };
+
+  const modalStyles = compact ? {
+    header: { padding: '8px 12px', margin: 0 },
+    body: { maxHeight: '80vh', overflow: 'auto', padding: '8px 10px' },
+    content: { padding: 0 },
+  } : {
+    body: { padding: '16px 24px 24px', background: 'var(--bg-container)', borderRadius: '4px' },
+    content: { padding: '12px 20px' },
+  };
+
+  return (
+    <>
+      {children
+        ? React.cloneElement(children, {
+            ...triggerHandlers,
+            // 只加指针手势,不改原文案颜色/样式。
+            style: { cursor: 'pointer', ...(children.props.style || {}) },
+          })
+        : (
+          <span
+            className={styles.helpBtn}
+            role="button"
+            tabIndex={0}
+            aria-label={t('ui.toolCatalog.help')}
+            title={t('ui.toolCatalog.help')}
+            {...triggerHandlers}
+          >?</span>
+        )}
+      <Modal
+        title={t('ui.toolCatalog.title')}
+        open={open}
+        onCancel={() => setCatalogOpen(false)}
+        footer={null}
+        width={compact ? '98vw' : 800}
+        centered={compact}
+        styles={modalStyles}
+        zIndex={baseZ}
+        wrapProps={{ onMouseDown: (e) => e.stopPropagation() }}
+      >
+        <div className={styles.catalog}>
+          {TOOL_CATALOG.map((group) => (
+            <div key={group.key} className={styles.catBlock}>
+              <div className={styles.catLabel}>{t(`ui.toolCatalog.cat.${group.key}`)}</div>
+              <div className={styles.chipRow}>
+                {group.tools.map((name) => (
+                  <ConceptHelp key={name} doc={`Tool-${name}`} zIndex={innerZ}>
+                    <span
+                      className={styles.toolChip}
+                      role="button"
+                      tabIndex={0}
+                      aria-label={name}
+                      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.currentTarget.click(); } }}
+                    >{name}</span>
+                  </ConceptHelp>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </Modal>
+    </>
+  );
+}

package/src/components/common/ToolsHelp.module.css

@@ -0,0 +1,85 @@
+/* "All tools" catalog list view. The per-tool doc body/spinner are rendered by
+   the nested <ConceptHelp> instances (their own module); this file owns the `?`
+   trigger and the catalog list/chips. */
+
+/* `?` trigger — mirrors ConceptHelp.module.css .helpBtn (kept local to avoid
+   cross-importing a sibling component's CSS module). */
+.helpBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-light);
+  color: var(--text-light);
+  font-size: 11px;
+  line-height: 1;
+  cursor: pointer;
+  margin-left: 4px;
+  vertical-align: middle;
+  transition: background 0.2s;
+  user-select: none;
+}
+.helpBtn:hover {
+  background: var(--border-secondary);
+}
+
+.catalog {
+  max-height: 60vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 4px 2px;
+}
+
+.catBlock {
+  margin-bottom: 14px;
+}
+.catBlock:last-child {
+  margin-bottom: 0;
+}
+
+.catLabel {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-light);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 8px;
+}
+
+.chipRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.toolChip {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 12px;
+  border-radius: 14px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-light);
+  color: var(--text-primary);
+  font-size: 13px;
+  line-height: 1.4;
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.2s, border-color 0.2s;
+}
+.toolChip:hover {
+  background: var(--border-secondary);
+  border-color: var(--border-hover);
+}
+.toolChip:focus-visible {
+  outline: 2px solid var(--color-primary-pale);
+  outline-offset: 1px;
+}
+
+@media (max-width: 768px) {
+  .catalog {
+    max-height: 75vh;
+  }
+}

package/src/components/common/WeComIcon.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+// WeChat/WeCom brand glyph — the real two-bubbles mark (single path, 1024 viewBox).
+// fill=currentColor so it adapts to theme / the surrounding text color; pass a `color` via style for
+// the brand green where wanted. Single-color by design: the status chip conveys connection state via
+// this glyph's color.
+export default function WeComIcon({ size = 16, className, style }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 1024 1024"
+      fill="currentColor"
+      className={className}
+      style={style}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M683.058 364.695c11 0 22 1.016 32.943 1.976C686.564 230.064 538.896 128 370.681 128c-188.104 0.66-342.237 127.793-342.237 289.226 0 93.068 51.379 169.827 136.725 229.256L130.72 748.43l119.796-59.368c42.918 8.395 77.37 16.79 119.742 16.79 11 0 21.46-0.48 31.914-1.442a259.168 259.168 0 0 1-10.455-71.358c0.485-148.002 128.744-268.297 291.403-268.297l-0.06-0.06z m-184.113-91.992c25.99 0 42.913 16.79 42.913 42.575 0 25.188-16.923 42.579-42.913 42.579-25.45 0-51.38-16.85-51.38-42.58 0-25.784 25.93-42.574 51.38-42.574z m-239.544 85.154c-25.384 0-51.374-16.85-51.374-42.58 0-25.784 25.99-42.574 51.374-42.574 25.45 0 42.918 16.79 42.918 42.575 0 25.188-16.924 42.579-42.918 42.579z m736.155 271.655c0-135.647-136.725-246.527-290.983-246.527-162.655 0-290.918 110.88-290.918 246.527 0 136.128 128.263 246.587 290.918 246.587 33.972 0 68.423-8.395 102.818-16.85l93.809 50.973-25.93-84.677c68.907-51.93 120.286-119.815 120.286-196.033z m-385.275-42.58c-16.923 0-34.452-16.79-34.452-34.179 0-16.79 17.529-34.18 34.452-34.18 25.99 0 42.918 16.85 42.918 34.18 0 17.39-16.928 34.18-42.918 34.18z m188.165 0c-16.984 0-33.972-16.79-33.972-34.179 0-16.79 16.927-34.18 33.972-34.18 25.93 0 42.913 16.85 42.913 34.18 0 17.39-16.983 34.18-42.913 34.18z" />
+    </svg>
+  );
+}

package/src/components/common/quickMenuIcons.jsx

@@ -0,0 +1,99 @@
+// 四芒星快捷设置菜单共用图标 —— TerminalPanel 终端工具栏与 ChatInputBar 对话输入框
+// 两处「同款菜单」共享，单一事实源防止迭代漂移。全部为零依赖纯 SVG 组件；
+// 菜单行内尺寸由共享样式 .quickMenuRowIcon svg { 14px } 统一约束。
+
+// Shared geometry constants: the SVG components below AND the CSS-mask data-URIs
+// (used by TerminalPanel's gradient-shimmer glyphs) both render from these, so the
+// shapes cannot drift apart.
+const SPARKLE_PATH = 'M12 0.5 C12.4 9 15 11.6 23.5 12 C15 12.4 12.4 15 12 23.5 C11.6 15 9 12.4 0.5 12 C9 11.6 11.6 9 12 0.5 Z';
+// UltraPlan glyph: single filled silhouette (viewBox 0 0 1024 1024). Rendered both as
+// an alpha mask (opaque #fff on transparent → picks up currentColor + shimmer) and as
+// a plain currentColor <svg> fallback, so the two can't drift apart. Default nonzero
+// fill-rule reproduces the source's shield/orbit cut-outs.
+const ULTRAPLAN_VIEWBOX = '0 0 1024 1024';
+const ULTRAPLAN_PATH = 'M941.60719644 82.39280356c93.34484006 93.34484006 77.54802062 259.15620567-16.29392086 429.60719644 93.89717553 170.45099076 109.63876092 336.31759042 16.29392086 429.60719644-93.34484006 93.34484006-259.15620567 77.54802062-429.60719644-16.29392086-170.45099076 93.89717553-336.31759042 109.63876092-429.60719644 16.29392086-93.34484006-93.34484006-77.54802062-259.15620567 16.29392086-429.60719644-93.89717553-170.45099076-109.63876092-336.31759042-16.29392086-429.60719644 93.34484006-93.34484006 259.15620567-77.54802062 429.60719644 16.29392086 170.45099076-93.89717553 336.31759042-109.63876092 429.60719644-16.29392086zM403.96301401 168.44680279c-107.15324743-47.33522299-199.28294715-52.14054905-243.46985436-7.95364314-78.92886188 78.92886188-1.65700898 310.85488608 195.30612687 507.70755383 50.81494186 50.81494186 103.94969759 93.67624187 156.20071348 127.92109384a989.62100149 989.62100149 0 0 0 156.20071348-127.92109384c20.21550965-20.16027558 39.10541211-40.70718703 56.78017549-61.41979938 19.05560336 33.02971292 33.91345019 65.28615411 44.07643908 95.71988542 1.76747583 5.30242877 3.36925203 10.49439069 4.80532606 15.46541764a1135.87966103 1135.87966103 0 0 1-153.82566812 137.58698005c107.15324743 47.33522299 199.28294715 52.14054905 243.46985436 7.95364314 78.92886188-78.92886188 1.65700898-310.85488608-195.30612687-507.70755383A991.71987911 991.71987911 0 0 0 512 227.82295861a993.76352396 993.76352396 0 0 0-156.20071348 127.97632791c-20.21550965 20.16027558-39.10541211 40.70718703-56.78017549 61.41979938a526.10035358 526.10035358 0 0 1-44.07643908-95.71988542l-4.80532606-15.46541764a1140.29835124 1140.29835124 0 0 1 146.36912768-132.00838225l7.45654044-5.5785978z m-235.57144398 451.5901832l-5.24719599 12.31710058c-42.36419602 101.85081868-45.12587852 188.67808962-2.65121439 231.15275378 44.18690591 44.18690591 136.31660562 39.38157984 243.46985436-7.95364314a1134.66452068 1134.66452068 0 0 1-126.31931893-109.19689229c-32.587843-32.587843-62.46923884-66.2803595-89.47848533-100.52521277l-19.77363972-25.79410616z m347.4747847-273.24078206a14.80261406 14.80261406 0 0 1 10.43915663 10.43915662l14.41597819 53.13475445a103.72876263 103.72876263 0 0 0 72.90839545 72.90839545l53.13475445 14.41597819a14.80261406 14.80261406 0 0 1 0 28.61102272l-53.13475445 14.41597819a103.72876263 103.72876263 0 0 0-72.90839545 72.90839545l-14.41597819 53.13475445a14.80261406 14.80261406 0 0 1-28.61102272 0l-14.41597819-53.13475445a103.72876263 103.72876263 0 0 0-72.90839545-72.90839545l-53.13475445-14.41597819a14.80261406 14.80261406 0 0 1 0-28.61102272l53.13475445-14.41597819a103.72876263 103.72876263 0 0 0 72.90839545-72.90839545l14.41597819-53.13475445a14.80261406 14.80261406 0 0 1 18.22709887-10.43915662z m113.56034844-182.43668953l-9.38971718 4.03205563c43.08223369 31.98027346 85.6121306 68.54493802 126.31931893 109.25212505 40.70718703 40.7624211 77.32708566 83.23708524 109.25212505 126.31931893 47.27999022-107.15324743 52.08531628-199.28294715 7.89841038-243.46985436-41.03858882-41.03858882-123.39193552-39.82344977-220.71359716-1.54654087l-13.36654002 5.41289562z';
+
+// Mask data-URIs (alpha masks: opaque white shapes on transparent), pre-wrapped as
+// url("...") so they can be assigned directly to style.maskImage / WebkitMaskImage.
+export const SPARKLE_MASK_URI = `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='${SPARKLE_PATH}' fill='#fff'/></svg>`)}")`;
+export const ULTRAPLAN_MASK_URI = `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='${ULTRAPLAN_VIEWBOX}'><path d='${ULTRAPLAN_PATH}' fill='#fff'/></svg>`)}")`;
+
+// Ready-made inline-style objects for the mask glyph <span>s (mask-image must ride
+// inline so the shape stays single-sourced here; the shimmer CSS supplies the rest).
+export const SPARKLE_MASK_STYLE = { WebkitMaskImage: SPARKLE_MASK_URI, maskImage: SPARKLE_MASK_URI };
+export const ULTRAPLAN_MASK_STYLE = { WebkitMaskImage: ULTRAPLAN_MASK_URI, maskImage: ULTRAPLAN_MASK_URI };
+
+// 快捷设置按钮图标：纤细四芒星（凹弧四角，实心）。
+// 菜单打开时整体旋转 45° 变为斜向星，作为开合状态反馈。
+export function SparkleIcon() {
+  return (
+    <svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor">
+      <path d={SPARKLE_PATH} />
+    </svg>
+  );
+}
+
+// 菜单行图标：权限自动审批（盾牌+对勾）
+export function ShieldCheckIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+      <polyline points="9 12 11 14 15 10" />
+    </svg>
+  );
+}
+
+// 菜单行图标：Plan 自动审批（剪贴板）
+export function PlanClipboardIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
+      <rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
+      <line x1="9" y1="12" x2="15" y2="12" />
+      <line x1="9" y1="16" x2="13" y2="16" />
+    </svg>
+  );
+}
+
+export function AgentTeamIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+      <circle cx="9" cy="7" r="4" />
+      <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+      <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+    </svg>
+  );
+}
+
+export function UltraplanIcon() {
+  // Same ULTRAPLAN_PATH the mask URI uses, filled with currentColor so this fallback
+  // (mobile chat button) stays geometry-identical to the masked glyph.
+  return (
+    <svg viewBox={ULTRAPLAN_VIEWBOX} width="14" height="14" fill="currentColor">
+      <path d={ULTRAPLAN_PATH} />
+    </svg>
+  );
+}
+
+export function UploadIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <polyline points="17 8 12 3 7 8" />
+      <line x1="12" y1="3" x2="12" y2="15" />
+    </svg>
+  );
+}
+
+export function TrashIcon() {
+  return (
+    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M3 6h18" />
+      <path d="M8 6V4h8v2" />
+      <path d="M5 6v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6" />
+      <line x1="10" y1="11" x2="10" y2="17" />
+      <line x1="14" y1="11" x2="14" y2="17" />
+    </svg>
+  );
+}