cx-viewer 1.0.2 → 1.0.4

package/src/components/chat/interactionOwnership.js

@@ -0,0 +1,106 @@
+import { isAskToolName, isPlanToolName } from '../../utils/toolNameAliases.js';
+
+/**
+ * Interaction-state helpers for ask/plan approval cards.
+ *
+ * The helpers keep ChatView's message-side pending scan and incremental-cache
+ * healing consistent, so exactly one normal message bubble owns a pending
+ * request_user_input / update_plan interaction.
+ *
+ * Pure functions over plain data — no React/antd/i18n imports, statically
+ * loadable under node:test. React element cache write-backs stay in ChatView.
+ *
+ * Deliberate asymmetry callers must respect: the messages-side scan and
+ * ask-heal use MERGED maps (JSONL + local optimistic answers), while plan-heal
+ * uses the RAW session planApprovalMap. Parameter names keep them apart.
+ */
+
+export function isNonInteractivePlanTool(block) {
+  return !!(block?.input?.codexTurnPlan || block?.input?.nonInteractive);
+}
+
+export function getPlanApprovalForToolUse(block, planApprovalMap) {
+  if (isPlanToolName(block?.name) && isNonInteractivePlanTool(block)) {
+    const plan = typeof block.input?.plan === 'string' ? block.input.plan : '';
+    return { status: 'approved', planContent: plan };
+  }
+  return (planApprovalMap || {})[block?.id] || { status: 'pending' };
+}
+
+/**
+ * Messages-side pending scan. Only tools in the LAST non-empty assistant
+ * message can be pending: once a later assistant message exists, any earlier
+ * plan/ask must already have been handled (Codex cannot continue the turn
+ * otherwise) — treating older ones as pending made every historical plan
+ * re-open its modal forever (non-interactive plan cards have no tool_result, so their
+ * planApprovalMap entry stays undefined).
+ *
+ * ownerIdx values are RAW message indices (the render loop compares them
+ * against its own `mi`), locking the pending id to exactly one bubble even
+ * when streaming repeats the same toolId across incrementally-pushed messages.
+ *
+ * @param planApprovalMap MERGED plan-approval map
+ * @param askAnswerMap    MERGED ask-answer map (JSONL + local optimistic)
+ */
+export function computeMessagesPending({ messages, planApprovalMap, askAnswerMap }) {
+  let lastPendingAskId = null;
+  let lastPendingPlanId = null;
+  let askOwnerIdx = -1;
+  let planOwnerIdx = -1;
+  let lastAssistantIdx = -1;
+  const msgs = messages || [];
+  for (let mi = msgs.length - 1; mi >= 0; mi--) {
+    const m = msgs[mi];
+    if (m && m.role === 'assistant' && Array.isArray(m.content) && m.content.length > 0) {
+      lastAssistantIdx = mi;
+      break;
+    }
+  }
+  if (lastAssistantIdx >= 0) {
+    for (const block of msgs[lastAssistantIdx].content) {
+      if (block.type === 'tool_use' && isPlanToolName(block.name)) {
+        if (isNonInteractivePlanTool(block)) continue;
+        const approval = (planApprovalMap || {})[block.id];
+        if (!approval || approval.status === 'pending') {
+          lastPendingPlanId = block.id;
+          planOwnerIdx = lastAssistantIdx;
+        }
+      }
+      if (block.type === 'tool_use' && isAskToolName(block.name)) {
+        const answers = (askAnswerMap || {})[block.id];
+        if (!answers || Object.keys(answers).length === 0) {
+          lastPendingAskId = block.id;
+          askOwnerIdx = lastAssistantIdx;
+        }
+      }
+    }
+  }
+  return { lastPendingAskId, lastPendingPlanId, askOwnerIdx, planOwnerIdx };
+}
+
+/**
+ * Incremental session-cache heal: the new segment produced no pending ids, but
+ * the cached ones may still be unresolved — keep them, or the approval modal
+ * flickers closed and re-opens between streaming increments. A cached id whose
+ * approval/answer has since landed is dropped.
+ *
+ * Asymmetry (see module header): plan checks the RAW sessionPlanApprovalMap,
+ * ask checks the MERGED answer map.
+ */
+export function healStalePendingIds({ resultAskId, resultPlanId, prevAskId, prevPlanId, sessionPlanApprovalMap, mergedAskAnswerMap }) {
+  let lastPendingAskId = resultAskId;
+  let lastPendingPlanId = resultPlanId;
+  if (!lastPendingPlanId && prevPlanId) {
+    const prevPlanApproval = (sessionPlanApprovalMap || {})[prevPlanId];
+    if (!prevPlanApproval || prevPlanApproval.status === 'pending') {
+      lastPendingPlanId = prevPlanId;
+    }
+  }
+  if (!lastPendingAskId && prevAskId) {
+    const prevAns = (mergedAskAnswerMap || {})[prevAskId];
+    if (!prevAns || Object.keys(prevAns).length === 0) {
+      lastPendingAskId = prevAskId;
+    }
+  }
+  return { lastPendingAskId, lastPendingPlanId };
+}

package/src/components/chat/uploadDeferLogic.js

@@ -0,0 +1,46 @@
+// 发送链路对「图片上传仍在途」的纯判定 + uploadingItems 归约。
+// 抽成纯函数便于 node:test 单测(参考 test/single-ws-submit.test.js 的纯函数+DI 范式)。
+// 真正的 setState / URL.revokeObjectURL 副作用由 ChatView 执行,这里只算结果。
+
+/**
+ * 是否应缓发(defer):只要有上传在途就必须缓发,绝不放行立即发送。
+ * 注意:不要用 alreadyDeferred 参与判定 —— 否则「已 deferred 时返回 false」会让第二次 Enter
+ * 落进立即发送分支、在上传未完成时发出纯文字(丢图 + 可能重复发送)。
+ * 双发幂等交给调用方 _deferSend 的实例标志处理(已 deferred 则不重复武装),不在本判定里短路。
+ * @param {{uploadingCount:number}} p
+ * @returns {boolean}
+ */
+export function shouldDeferSend({ uploadingCount }) {
+  return uploadingCount > 0;
+}
+
+/**
+ * 对 uploadingItems(元素 {id, name, previewUrl})做纯归约。
+ * 返回 { next, revoke }:next 为新数组,revoke 为需要 URL.revokeObjectURL 的 url 列表。
+ * @param {Array<{id:string,name?:string,previewUrl?:string}>} items
+ * @param {{type:'add'|'remove'|'clear', item?:object, id?:string}} action
+ * @returns {{next:Array, revoke:string[]}}
+ */
+export function reduceUploading(items, action) {
+  const list = Array.isArray(items) ? items : [];
+  switch (action && action.type) {
+    case 'add': {
+      if (!action.item || !action.item.id) return { next: list, revoke: [] };
+      if (list.some(i => i.id === action.item.id)) return { next: list, revoke: [] }; // 去重 id
+      return { next: [...list, action.item], revoke: [] };
+    }
+    case 'remove': {
+      const item = list.find(i => i.id === action.id);
+      if (!item) return { next: list, revoke: [] };
+      return {
+        next: list.filter(i => i.id !== action.id),
+        revoke: item.previewUrl ? [item.previewUrl] : [],
+      };
+    }
+    case 'clear': {
+      return { next: [], revoke: list.map(i => i.previewUrl).filter(Boolean) };
+    }
+    default:
+      return { next: list, revoke: [] };
+  }
+}

package/src/components/common/ConceptHelp.jsx

@@ -0,0 +1,97 @@
+import React, { useState, useCallback } from 'react';
+import { Modal, Spin } from 'antd';
+import { renderMarkdown } from '../../utils/markdown';
+import { apiUrl } from '../../utils/apiUrl';
+import { getLang } from '../../i18n';
+import { isMobile, isPad } from '../../env';
+import { ALL_TOOL_NAMES } from '../../utils/toolCatalog';
+import styles from './ConceptHelp.module.css';
+
+// Tool-* docs come from the shared catalog (single source of truth, guarded by
+// test/tool-catalog-concepts.test.js); the rest are non-tool concept docs.
+const OTHER_DOCS = [
+  'SubAgent-Search',
+  'MainAgent', 'Teammate', 'BodyFields', 'ResponseFields', 'Tools', 'ToolsFirst', 'BodyDiffJSON', 'TranslateContextPollution', 'ProxySwitch', 'GlobalSettings', 'QRCode', 'UltraPlan', 'CustomUltraplanExpert',
+];
+const KNOWN_DOCS = new Set([...ALL_TOOL_NAMES.map((n) => `Tool-${n}`), ...OTHER_DOCS]);
+
+export default function ConceptHelp({ doc, zIndex, children }) {
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [html, setHtml] = useState('');
+  const [title, setTitle] = useState('');
+
+  // 未知 doc：若有 children，原样返回（chip 等调用方退化为纯展示）；否则不渲染
+  if (!doc || !KNOWN_DOCS.has(doc)) return children || null;
+
+  const loadDoc = useCallback(async () => {
+    setOpen(true);
+    setLoading(true);
+    setHtml('');
+    setTitle(doc);
+
+    const lang = getLang();
+    let md = null;
+
+    try {
+      const res = await fetch(apiUrl(`/api/concept?lang=${lang}&doc=${encodeURIComponent(doc)}`));
+      if (res.ok) {
+        md = await res.text();
+      }
+    } catch (_) {
+      // ignore
+    }
+
+    if (md) {
+      const firstLine = md.match(/^#\s+(.+)/m);
+      if (firstLine) setTitle(firstLine[1]);
+      setHtml(renderMarkdown(md));
+    } else {
+      setHtml('<p>Document not found.</p>');
+    }
+    setLoading(false);
+  }, [doc]);
+
+  const modalStyles = (isMobile && !isPad) ? {
+    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' },
+  };
+
+  const triggerHandlers = {
+    onClick: (e) => { e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); loadDoc(); },
+    onMouseDown: (e) => { e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); },
+    onPointerDown: (e) => { e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); },
+  };
+
+  return (
+    <>
+      {children
+        ? React.cloneElement(children, {
+            ...triggerHandlers,
+            style: { cursor: 'pointer', ...(children.props.style || {}) },
+          })
+        : <span className={styles.helpBtn} {...triggerHandlers}>?</span>}
+        <Modal
+          title={title}
+          open={open}
+          onCancel={() => setOpen(false)}
+          footer={null}
+          width={(isMobile && !isPad) ? '98vw' : 800}
+          centered={isMobile && !isPad}
+          styles={modalStyles}
+          {...(zIndex ? { zIndex } : {})}
+          wrapProps={{ onMouseDown: (e) => e.stopPropagation() }}
+        >
+          {loading ? (
+            <div className={styles.spinWrap}><Spin /></div>
+          ) : (
+            <div className={styles.modalBody} dangerouslySetInnerHTML={{ __html: html }} />
+          )}
+        </Modal>
+    </>
+  );
+}

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

@@ -0,0 +1,151 @@
+.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);
+}
+
+/* Match FileContentView markdownPreview styles */
+.modalBody {
+  max-height: 60vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 4px 12px;
+  color: var(--text-primary);
+  font-size: 14px;
+  line-height: 1.75;
+  word-break: break-word;
+}
+
+.modalBody h1,
+.modalBody h2,
+.modalBody h3,
+.modalBody h4,
+.modalBody h5,
+.modalBody h6 {
+  color: var(--text-primary);
+  margin: 1.2em 0 0.6em;
+  line-height: 1.3;
+}
+.modalBody h1 { font-size: 1.8em; border-bottom: 1px solid var(--border-secondary); padding-bottom: 0.3em; }
+.modalBody h2 { font-size: 1.5em; border-bottom: 1px solid var(--border-primary); padding-bottom: 0.25em; }
+.modalBody h3 { font-size: 1.25em; }
+.modalBody p { margin: 0.8em 0; }
+.modalBody a { color: var(--color-primary-pale); text-decoration: none; }
+.modalBody a:hover { text-decoration: underline; }
+.modalBody code {
+  background: var(--bg-elevated);
+  color: var(--code-error);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 0.9em;
+  font-family: var(--font-mono);
+}
+.modalBody pre {
+  background: var(--bg-container);
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  padding: 14px 18px;
+  overflow-x: auto;
+  margin: 1em 0;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+.modalBody pre code {
+  background: none;
+  color: var(--text-primary);
+  padding: 0;
+  font-size: 13px;
+}
+.modalBody blockquote {
+  border-left: 3px solid var(--color-primary-pale);
+  margin: 1em 0;
+  padding: 0.5em 1em;
+  color: var(--text-light);
+  background: var(--color-primary-bg-extra-faint);
+  border-radius: 0 6px 6px 0;
+}
+.modalBody table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 1em 0;
+}
+.modalBody th,
+.modalBody td {
+  border: 1px solid var(--border-secondary);
+  padding: 8px 12px;
+  text-align: left;
+}
+.modalBody th {
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+  font-weight: 600;
+}
+.modalBody tr:nth-child(even) { background: var(--overlay-light-faint); }
+.modalBody ul,
+.modalBody ol { padding-left: 2em; margin: 0.8em 0; }
+.modalBody li { margin: 0.3em 0; }
+.modalBody hr { border: none; border-top: 1px solid var(--border-secondary); margin: 1.5em 0; }
+.modalBody img { max-width: 100%; height: auto; border-radius: 6px; }
+.modalBody strong { color: var(--text-primary); }
+
+.modalBody textarea {
+  width: 100%;
+  min-height: 200px;
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.6;
+  border: 1px solid var(--border-secondary);
+  border-radius: 6px;
+  padding: 10px 14px;
+  resize: vertical;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.spinWrap {
+  display: flex;
+  justify-content: center;
+  padding: 40px 0;
+}
+
+@media (max-width: 768px) {
+  .modalBody {
+    font-size: 13px;
+    line-height: 1.6;
+    max-height: 75vh;
+  }
+  .modalBody h1 { font-size: 18px; }
+  .modalBody h2 { font-size: 16px; }
+  .modalBody h3 { font-size: 14px; }
+  .modalBody pre { font-size: 12px; padding: 8px; }
+  .modalBody code { font-size: 12px; }
+  .modalBody textarea { font-size: 12px; }
+}
+
+/* ─── iPad/Pad 模式：恢复桌面默认值 ─── */
+:global(html.pad-mode) .modalBody { font-size: 14px; line-height: 1.75; max-height: 60vh; }
+:global(html.pad-mode) .modalBody h1 { font-size: 1.8em; }
+:global(html.pad-mode) .modalBody h2 { font-size: 1.5em; }
+:global(html.pad-mode) .modalBody h3 { font-size: 1.25em; }
+:global(html.pad-mode) .modalBody pre { font-size: 13px; padding: 14px 18px; }
+:global(html.pad-mode) .modalBody code { font-size: 0.9em; }
+:global(html.pad-mode) .modalBody textarea { font-size: 13px; }

package/src/components/common/ConfirmRemoveButton.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Popconfirm, Modal } from 'antd';
+import { isMobile } from '../../env';
+import { t } from '../../i18n';
+
+// 缩略图 × 移除按钮的统一二次确认包装：
+//   desktop → antd Popconfirm（紧凑、贴近按钮）
+//   mobile (含 pad) → antd Modal.confirm 命令式弹窗（居中、点击目标更大，绕开 Popconfirm 在小
+//   触控目标上不稳的问题）
+export default function ConfirmRemoveButton({
+  title,
+  onConfirm,
+  className,
+  ariaLabel,
+  tag = 'button',
+  children,
+  onPopupOpenChange,
+  disabled = false,
+}) {
+  const Tag = tag;
+  const role = tag === 'button' ? undefined : 'button';
+  // tag='button' 时用原生 disabled；span 等非按钮标签靠 aria-disabled + click 守卫表达禁用态
+  const nativeDisabled = tag === 'button' ? disabled : undefined;
+
+  if (isMobile) {
+    const handleClick = (e) => {
+      e.stopPropagation();
+      if (disabled) return;
+      onPopupOpenChange?.(true);
+      Modal.confirm({
+        title,
+        okText: t('ui.common.confirmYes'),
+        cancelText: t('ui.common.confirmCancel'),
+        okButtonProps: { danger: true },
+        centered: true,
+        zIndex: 1200,
+        onOk: () => { onConfirm(); onPopupOpenChange?.(false); },
+        onCancel: () => onPopupOpenChange?.(false),
+      });
+    };
+    return (
+      <Tag
+        className={className}
+        onClick={handleClick}
+        aria-label={ariaLabel}
+        aria-disabled={disabled || undefined}
+        disabled={nativeDisabled}
+        role={role}
+      >
+        {children}
+      </Tag>
+    );
+  }
+
+  return (
+    <Popconfirm
+      title={title}
+      okText={t('ui.common.confirmYes')}
+      cancelText={t('ui.common.confirmCancel')}
+      okButtonProps={{ danger: true }}
+      disabled={disabled}
+      onOpenChange={onPopupOpenChange}
+      onConfirm={(e) => { e?.stopPropagation(); onConfirm(); }}
+      onCancel={(e) => e?.stopPropagation()}
+    >
+      <Tag
+        className={className}
+        onClick={(e) => e.stopPropagation()}
+        aria-label={ariaLabel}
+        aria-disabled={disabled || undefined}
+        disabled={nativeDisabled}
+        role={role}
+      >
+        {children}
+      </Tag>
+    </Popconfirm>
+  );
+}

package/src/components/common/CountryFlag.jsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { Popover } from 'antd';
+import styles from './CountryFlag.module.css';
+
+// ISO-3166 alpha-2 → Unicode regional indicator emoji
+// e.g. "US" → 🇺🇸
+function countryToFlag(code) {
+  if (!code || code.length !== 2) return '🇨🇳';
+  return code.toUpperCase().split('').map(c => String.fromCodePoint(0x1F1E6 + c.charCodeAt(0) - 65)).join('');
+}
+
+// 多源兜底：ipinfo.io 免 token 有限流、部分网络不可达，单一源易请求失败。
+// 按序逐个尝试，先成功者生效；各源字段不一致，normalize 统一为 ipinfo 形状
+// { ip, country(ISO-3166 alpha-2), region, city, org } 供 render 直接消费。
+const GEO_SOURCES = [
+  {
+    url: 'https://ipinfo.io/json',
+    normalize: d => ({ ip: d.ip, country: d.country, region: d.region, city: d.city, org: d.org }),
+  },
+  {
+    url: 'https://ipwho.is/',
+    normalize: d => (d.success === false ? null : {
+      ip: d.ip, country: d.country_code, region: d.region, city: d.city,
+      org: d.connection?.org || d.connection?.isp,
+    }),
+  },
+  {
+    url: 'https://ipapi.co/json/',
+    normalize: d => ({ ip: d.ip, country: d.country_code || d.country, region: d.region, city: d.city, org: d.org }),
+  },
+];
+
+async function fetchGeoInfo() {
+  for (const src of GEO_SOURCES) {
+    try {
+      const r = await fetch(src.url, { signal: AbortSignal.timeout(5000) });
+      if (!r.ok) continue;
+      const info = src.normalize(await r.json());
+      if (info?.country?.length === 2) return info;
+    } catch { /* 超时/网络错误/JSON 解析失败 → 下一个源 */ }
+  }
+  return null;
+}
+
+/**
+ * Footer 左下角的地理位置指示。
+ * 自带 IP 地理请求（多源兜底，见 GEO_SOURCES）+ hover Popover。未拿到 data / country=CN 时不渲染。
+ * 原本挂在 AppHeader 的右侧控件区，1.6.200 移到 App.jsx footer 左端，
+ * 只显示紧凑的国旗，hover 才展开地区详情。
+ */
+export default class CountryFlag extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { flag: null, info: null, popoverOpen: false };
+    this._aborted = false;
+  }
+
+  componentDidMount() {
+    fetchGeoInfo().then(info => {
+      if (this._aborted || !info) return;
+      this.setState({ flag: countryToFlag(info.country), info });
+    });
+  }
+
+  componentWillUnmount() {
+    this._aborted = true;
+  }
+
+  render() {
+    const { flag, info } = this.state;
+    // 未知国家或 CN 不显示（和原先 AppHeader 行为保持一致）
+    if (!flag || info?.country === 'CN') return null;
+
+    // stopPropagation 防止 popover 内点击冒泡到外层 click 触发 onOpenChange(false);
+    // 与 AppHeader 二维码 popover 同款修复(原 trigger=['hover','focus'] 移动端 tap 即关)。
+    const content = (
+      <div className={styles.popover} onClick={e => e.stopPropagation()}>
+        <div>{flag} {info.country}</div>
+        {info.region && <div>{info.region}</div>}
+        {info.city && <div>{info.city}</div>}
+        {info.org && <div className={styles.meta}>{info.org}</div>}
+        {info.ip && <div className={styles.meta}>{info.ip}</div>}
+      </div>
+    );
+
+    return (
+      <Popover
+        content={content}
+        // 移动端 hover/focus 不可靠(tap → focus → 立即触发外部 click 关闭),改 click 受控。
+        trigger={['click']}
+        open={this.state.popoverOpen}
+        onOpenChange={(o) => this.setState({ popoverOpen: o })}
+        placement="topLeft"
+        overlayInnerStyle={{
+          background: 'var(--bg-elevated)',
+          border: '1px solid var(--border-hover)',
+          borderRadius: 8,
+          padding: '8px 12px',
+        }}
+      >
+        <button type="button" className={styles.flag} aria-label={`${info.country}${info.region ? ' · ' + info.region : ''}`}>{flag}</button>
+      </Popover>
+    );
+  }
+}

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

@@ -0,0 +1,36 @@
+/* Footer 左下角紧凑国旗 —— hover 才展示地区详情。
+   字号控制在 13px，比 AppHeader 里的 18px 小一半多，适合 18px 高的 footer 条。 */
+.flag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  line-height: 1;
+  cursor: help;
+  user-select: none;
+  /* Emoji 在 macOS / Windows 字形高度不同，设定 height 配 flex 稳住 baseline */
+  height: 14px;
+  /* 作为 Popover trigger 的键盘可达 button，需抹掉浏览器默认样式 */
+  background: none;
+  border: none;
+  padding: 0;
+  color: inherit;
+  font-family: inherit;
+}
+
+.flag:focus-visible {
+  outline: 2px solid var(--primary-color, #1677ff);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.popover {
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 22px;
+}
+
+.meta {
+  color: var(--text-tertiary);
+  font-size: 12px;
+}

package/src/components/common/DingTalkIcon.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+// DingTalk brand glyph (single path, 1024 viewBox). fill=currentColor so it adapts to theme
+// / the surrounding text color; pass a `color` via style for the brand blue where wanted.
+export default function DingTalkIcon({ 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="M903.282484 382.828702c-2.999866 10.899512-6.899691 21.499038-11.699476 31.698581h0.099995l-0.599973 1.299942c-34.098474 76.596571-123.194485 226.989839-123.194485 226.989839l-0.399982-0.999955-25.998836 47.597869h125.394386L627.294839 1024l54.397565-227.589812h-98.795578l34.298465-150.493263c-27.798756 6.999687-60.497292 16.699252-99.395551 29.798666 0 0-52.49765 32.298554-151.393222-62.197216 0 0-66.697014-61.597243-27.998747-77.096548 16.399266-6.499709 79.796428-14.799337 129.694194-21.999015 67.296987-9.59957 108.79513-14.699342 108.79513-14.699342s-207.690703 3.299852-256.988496-4.899781c-49.297793-8.099637-111.695-94.49577-125.0944-170.392372 0 0-20.599078-41.698133 44.198021-21.999016 64.897095 19.699118 333.385076 76.796562 333.385076 76.796563S223.312923 266.933891 200.113962 239.535117 131.717024 89.741823 137.616759 14.645184c0 0 2.599884-18.799158 20.899065-13.799382 0 0 258.188442 123.994449 434.680541 191.691419C769.688464 260.434182 923.081598 295.032633 903.282484 382.828702z" />
+    </svg>
+  );
+}

package/src/components/common/DiscordIcon.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+// Discord brand glyph (the Clyde mark) — single path, fill=currentColor so it adapts to theme / the
+// surrounding text color. Pass a `color` via style for the Discord blurple where wanted. Single-color
+// by design: the status chip conveys connection state via this glyph's color.
+export default function DiscordIcon({ size = 16, className, style }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+      style={style}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M20.317 4.369a19.79 19.79 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.249a18.27 18.27 0 0 0-5.487 0 12.6 12.6 0 0 0-.617-1.25.077.077 0 0 0-.079-.036A19.74 19.74 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.1 13.1 0 0 1-1.872-.892.077.077 0 0 1-.008-.128c.126-.094.252-.192.372-.291a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.061 0a.074.074 0 0 1 .078.009c.12.099.246.198.373.292a.077.077 0 0 1-.006.127 12.3 12.3 0 0 1-1.873.891.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.84 19.84 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.331c-1.182 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
+    </svg>
+  );
+}