cx-viewer 1.0.2 → 1.0.4

package/src/components/mobile/MobileGitDiff.module.css

@@ -0,0 +1,317 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--bg-base-alt);
+  overflow: hidden;
+}
+
+/* 上半部分：文件列表 */
+.fileListSection {
+  height: 300px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-container);
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border-primary);
+  flex-shrink: 0;
+}
+
+.headerLeft {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.headerTitle {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.fileCount {
+  font-size: 10px;
+  color: var(--text-disabled);
+  background: var(--bg-elevated);
+  padding: 1px 6px;
+  border-radius: 8px;
+}
+
+.closeBtn {
+  background: none;
+  border: none;
+  color: var(--text-tertiary);
+  padding: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+
+.closeBtn:active {
+  background: var(--overlay-light-medium);
+}
+
+.changesContainer {
+  flex: 1;
+  overflow: auto;
+  padding: 4px 0;
+  -webkit-overflow-scrolling: touch;
+}
+
+.changeItem {
+  display: flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 8px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  font-size: 13px;
+  white-space: nowrap;
+  transition: background 0.1s;
+  gap: 6px;
+}
+
+.changeItem:hover {
+  background: var(--bg-elevated);
+}
+
+.changeItemActive {
+  background: var(--color-primary-bg-light);
+  color: var(--text-white);
+}
+
+.changeItemActive:hover {
+  background: var(--color-primary-bg-light);
+}
+
+.dirItem {
+  display: flex;
+  align-items: center;
+  height: 26px;
+  padding: 0 8px;
+  color: var(--text-tertiary);
+  font-size: 13px;
+  white-space: nowrap;
+  gap: 6px;
+}
+
+.dirArrow {
+  width: 16px;
+  flex-shrink: 0;
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dirName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.status {
+  width: 16px;
+  flex-shrink: 0;
+  font-size: 11px;
+  font-weight: 600;
+  text-align: center;
+  margin-left: auto;
+}
+
+.icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fileName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
+/* 下半部分：Diff 内容 */
+.diffSection {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.diffHeader {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border-primary);
+  background: var(--bg-container);
+  flex-shrink: 0;
+}
+
+.diffFilePath {
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.diffBadge {
+  padding: 2px 8px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-light);
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--color-accent-yellow);
+  letter-spacing: 0.5px;
+  flex-shrink: 0;
+}
+
+.diffContent {
+  flex: 1;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.diffPlaceholder {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: var(--border-secondary);
+  font-size: 13px;
+}
+
+.statusText {
+  color: var(--text-disabled);
+  font-size: 12px;
+  padding: 16px 12px;
+  text-align: center;
+}
+
+.errorText {
+  color: var(--color-error-light);
+  font-size: 12px;
+  padding: 16px 12px;
+  text-align: center;
+}
+
+.emptyText {
+  color: var(--text-muted);
+  font-size: 12px;
+  padding: 16px 12px;
+  text-align: center;
+}
+
+.warningText {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  color: var(--color-accent-yellow);
+  font-size: 13px;
+  text-align: center;
+  gap: 8px;
+}
+
+.fileSizeNote {
+  color: var(--text-tertiary);
+  font-size: 12px;
+}
+
+.statusTextItalic {
+  font-style: italic;
+}
+
+.imagePreviewWrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  min-height: 200px;
+}
+
+.imagePreview {
+  max-width: 100%;
+  max-height: 60vh;
+  object-fit: contain;
+  border-radius: 4px;
+  cursor: zoom-in;
+}
+
+.rotated90 {
+  transform: rotate(90deg);
+}
+
+/* ─── 多仓库 repo section header ─── */
+.repoHeader {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  padding: 0 10px;
+  cursor: pointer;
+  color: var(--text-primary);
+  font-size: 13px;
+  white-space: nowrap;
+  gap: 6px;
+  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border-light);
+  user-select: none;
+}
+
+.repoHeader:hover {
+  background: var(--bg-elevated);
+}
+
+.repoArrow {
+  width: 14px;
+  flex-shrink: 0;
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.15s;
+  transform: rotate(0deg);
+}
+
+.repoArrowExpanded {
+  transform: rotate(90deg);
+}
+
+.repoName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  font-weight: 600;
+}
+
+.repoBadge {
+  font-size: 11px;
+  color: var(--text-disabled);
+  background: var(--bg-elevated);
+  padding: 2px 8px;
+  border-radius: 8px;
+  flex-shrink: 0;
+}

package/src/components/mobile/MobileStats.jsx

@@ -0,0 +1,211 @@
+import React, { useMemo } from 'react';
+import { formatTokenCount, computeTokenStats, computeToolUsageStats, computeSkillUsageStats } from '../../utils/helpers';
+import { classifyRequest } from '../../utils/requestType';
+import ConceptHelp from '../common/ConceptHelp';
+import ToolsHelp from '../common/ToolsHelp';
+import { t } from '../../i18n';
+import headerStyles from '../common/sharedChrome.module.css';
+import styles from './MobileStats.module.css';
+
+export default function MobileStats({ requests = [], visible, onClose }) {
+  const { byModel, models, toolStats, skillStats, subAgentEntries, hasSubAgentStats, teammateEntries, hasTeammateStats, isEmpty } = useMemo(() => {
+    const byModel = computeTokenStats(requests);
+    const models = Object.keys(byModel);
+    const toolStats = computeToolUsageStats(requests);
+    const skillStats = computeSkillUsageStats(requests);
+
+    const subAgentCounts = {};
+    const teammateCounts = {};
+    for (let i = 0; i < requests.length; i++) {
+      const cls = classifyRequest(requests[i], requests[i + 1]);
+      if (cls.type === 'SubAgent') {
+        const label = cls.subType || 'Other';
+        subAgentCounts[label] = (subAgentCounts[label] || 0) + 1;
+      } else if (cls.type === 'Teammate') {
+        const label = cls.subType || 'Teammate';
+        teammateCounts[label] = (teammateCounts[label] || 0) + 1;
+      }
+    }
+    const subAgentEntries = Object.entries(subAgentCounts).sort((a, b) => b[1] - a[1]);
+    const hasSubAgentStats = subAgentEntries.length > 0;
+    const teammateEntries = Object.entries(teammateCounts).sort((a, b) => b[1] - a[1]);
+    const hasTeammateStats = teammateEntries.length > 0;
+
+    const isEmpty = models.length === 0 && toolStats.length === 0 && !hasSubAgentStats && !hasTeammateStats && skillStats.length === 0;
+
+    return { byModel, models, toolStats, skillStats, subAgentEntries, hasSubAgentStats, teammateEntries, hasTeammateStats, isEmpty };
+  }, [requests]);
+
+  if (!visible) return null;
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <span className={styles.headerTitle}>{t('ui.tokenStats')}</span>
+        <button className={styles.closeBtn} onClick={onClose}>
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      </div>
+      <div className={styles.content}>
+        {isEmpty ? (
+          <div className={styles.empty}>—</div>
+        ) : (
+          <>
+            {/* 1. Skill Usage Stats */}
+            {skillStats.length > 0 && (
+              <div className={headerStyles.modelCard}>
+                <div className={headerStyles.modelName}>{t('ui.skillUsageStats')}</div>
+                <table className={headerStyles.statsTable}>
+                  <thead>
+                    <tr>
+                      <td className={`${headerStyles.th} ${styles.thLeft}`}>{t('ui.stats.skill')}</td>
+                      <td className={headerStyles.th}>{t('ui.stats.count')}</td>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {skillStats.map(([name, count]) => (
+                      <tr key={name} className={headerStyles.rowBorder}>
+                        <td className={headerStyles.label}>{name}</td>
+                        <td className={headerStyles.td}>{count}</td>
+                      </tr>
+                    ))}
+                    {skillStats.length > 1 && (
+                      <tr className={headerStyles.rebuildTotalRow}>
+                        <td className={headerStyles.label}>{t('ui.stats.total')}</td>
+                        <td className={headerStyles.td}>{skillStats.reduce((s, e) => s + e[1], 0)}</td>
+                      </tr>
+                    )}
+                  </tbody>
+                </table>
+              </div>
+            )}
+
+            {/* 2. SubAgent Stats */}
+            {hasSubAgentStats && (
+              <div className={headerStyles.modelCard}>
+                <div className={headerStyles.modelName}>{t('ui.subAgentStats')}</div>
+                <table className={headerStyles.statsTable}>
+                  <thead>
+                    <tr>
+                      <td className={`${headerStyles.th} ${styles.thLeft}`}>{t('ui.stats.subAgent')}</td>
+                      <td className={headerStyles.th}>{t('ui.stats.count')}</td>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {subAgentEntries.map(([name, count]) => (
+                      <tr key={name} className={headerStyles.rowBorder}>
+                        <td className={headerStyles.label}>{name} <ConceptHelp doc={`SubAgent-${name}`} /></td>
+                        <td className={headerStyles.td}>{count}</td>
+                      </tr>
+                    ))}
+                    {subAgentEntries.length > 1 && (
+                      <tr className={headerStyles.rebuildTotalRow}>
+                        <td className={headerStyles.label}>{t('ui.stats.total')}</td>
+                        <td className={headerStyles.td}>{subAgentEntries.reduce((s, e) => s + e[1], 0)}</td>
+                      </tr>
+                    )}
+                  </tbody>
+                </table>
+              </div>
+            )}
+
+            {/* 2.5 Teammate Stats */}
+            {hasTeammateStats && (
+              <div className={headerStyles.modelCard}>
+                <div className={headerStyles.modelName}>{t('ui.teammateStats.title')}</div>
+                <table className={headerStyles.statsTable}>
+                  <thead>
+                    <tr>
+                      <td className={`${headerStyles.th} ${styles.thLeft}`}>{t('ui.teammateStats.name')}</td>
+                      <td className={headerStyles.th}>{t('ui.stats.count')}</td>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {teammateEntries.map(([name, count]) => (
+                      <tr key={name} className={headerStyles.rowBorder}>
+                        <td className={headerStyles.label}>{name}</td>
+                        <td className={headerStyles.td}>{count}</td>
+                      </tr>
+                    ))}
+                    {teammateEntries.length > 1 && (
+                      <tr className={headerStyles.rebuildTotalRow}>
+                        <td className={headerStyles.label}>{t('ui.stats.total')}</td>
+                        <td className={headerStyles.td}>{teammateEntries.reduce((s, e) => s + e[1], 0)}</td>
+                      </tr>
+                    )}
+                  </tbody>
+                </table>
+              </div>
+            )}
+
+            {/* 3. Tool Usage Stats */}
+            {toolStats.length > 0 && (
+              <div className={headerStyles.modelCard}>
+                <div className={headerStyles.modelName}>{t('ui.toolUsageStats')} <ToolsHelp /></div>
+                <table className={headerStyles.statsTable}>
+                  <thead>
+                    <tr>
+                      <td className={`${headerStyles.th} ${styles.thLeft}`}>{t('ui.stats.tool')}</td>
+                      <td className={headerStyles.th}>{t('ui.stats.count')}</td>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {toolStats.map(([name, count]) => (
+                      <tr key={name} className={headerStyles.rowBorder}>
+                        <td className={headerStyles.label}>{name} <ConceptHelp doc={`Tool-${name}`} /></td>
+                        <td className={headerStyles.td}>{count}</td>
+                      </tr>
+                    ))}
+                    {toolStats.length > 1 && (
+                      <tr className={headerStyles.rebuildTotalRow}>
+                        <td className={headerStyles.label}>{t('ui.stats.total')}</td>
+                        <td className={headerStyles.td}>{toolStats.reduce((s, e) => s + e[1], 0)}</td>
+                      </tr>
+                    )}
+                  </tbody>
+                </table>
+              </div>
+            )}
+
+            {/* 4. Token Stats per Model */}
+            {models.map((model) => {
+              const s = byModel[model];
+              return (
+                <div key={model} className={headerStyles.modelCard}>
+                  <div className={headerStyles.modelName}>{model}</div>
+                  <table className={headerStyles.statsTable}>
+                    <tbody>
+                      <tr>
+                        <td className={headerStyles.label}>{t('ui.stats.token')}</td>
+                        <td className={headerStyles.th}>{t('ui.stats.input')}</td>
+                        <td className={headerStyles.th}>{t('ui.stats.output')}</td>
+                      </tr>
+                      <tr className={headerStyles.rowBorder}>
+                        <td className={headerStyles.label}></td>
+                        <td className={headerStyles.td}>{formatTokenCount(s.input)}</td>
+                        <td className={headerStyles.td}>{formatTokenCount(s.output)}</td>
+                      </tr>
+                      <tr>
+                        <td className={headerStyles.label}>{t('ui.stats.cache')}</td>
+                        <td className={headerStyles.th}>{t('ui.stats.cacheRead')}</td>
+                        <td className={headerStyles.th}>{t('ui.stats.cacheWrite')}</td>
+                      </tr>
+                      <tr className={headerStyles.rowBorder}>
+                        <td className={headerStyles.label}></td>
+                        <td className={headerStyles.td}>{formatTokenCount(s.cacheRead)}</td>
+                        <td className={headerStyles.td}>{formatTokenCount(s.cacheWrite)}</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              );
+            })}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/mobile/MobileStats.module.css

@@ -0,0 +1,75 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--bg-base-alt);
+  overflow: hidden;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border-primary);
+  flex-shrink: 0;
+}
+
+.headerTitle {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.closeBtn {
+  background: none;
+  border: none;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+}
+
+.closeBtn:active {
+  color: var(--text-white);
+}
+
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.empty {
+  color: var(--text-tertiary);
+  font-size: 13px;
+  text-align: center;
+  padding: 40px 0;
+}
+
+.fixedTable {
+  table-layout: fixed;
+}
+
+.ellipsisCell {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 0;
+}
+
+.thLeft {
+  text-align: left;
+}
+
+.colWide {
+  width: 50%;
+}
+
+.colNarrow {
+  width: 25%;
+}

package/src/components/settings/ImAppendSystemModal.jsx

@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Input, Spin, Button, Popconfirm, message } from 'antd';
+import { apiUrl } from '../../utils/apiUrl';
+import { imTr as _tr } from '../../utils/imTr';
+
+// 「模型性格定义」编辑器：读/写该 IM 工作目录下的 CODEX_APPEND_SYSTEM.md（启动 codex 时注入为
+// --append-system-prompt-file）。叠加在「通讯软件集成」配置弹窗之上（antd Modal 走 portal 自动堆叠，
+// 不关闭下层）；保存/取消后回到配置弹窗。该文件仅在 worker 启动时读取一次，故保存后提示「下次重启该 IM 生效」。
+export default function ImAppendSystemModal({ open, platform, onClose }) {
+  const [content, setContent] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [restoring, setRestoring] = useState(false);
+
+  useEffect(() => {
+    if (!open || !platform) return undefined;
+    let cancelled = false;
+    setLoading(true);
+    fetch(apiUrl(`/api/im/${encodeURIComponent(platform)}/append-system`))
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error('load failed'))))
+      .then((d) => { if (!cancelled) setContent(typeof d.content === 'string' ? d.content : ''); })
+      .catch(() => { if (!cancelled) message.error(_tr('ui.imRecord.loadFailed', null, 'Load failed')); })
+      .finally(() => { if (!cancelled) setLoading(false); });
+    return () => { cancelled = true; };
+  }, [open, platform]);
+
+  const save = async () => {
+    setSaving(true);
+    try {
+      const r = await fetch(apiUrl(`/api/im/${encodeURIComponent(platform)}/append-system`), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content }),
+      });
+      if (!r.ok) { const j = await r.json().catch(() => ({})); throw new Error(j.error || `HTTP ${r.status}`); }
+      message.success(_tr('ui.im.personaSaved', null, 'Saved — takes effect after you restart this IM'));
+      onClose();
+    } catch (e) {
+      message.error(_tr('ui.im.saveFailed', null, 'Save failed') + (e?.message ? `: ${e.message}` : ''));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 恢复默认：拉取当前语言的预置文本（?default=1，绕过磁盘文件）载入编辑框，不落盘——由用户点保存才生效。
+  const restoreDefault = async () => {
+    setRestoring(true);
+    try {
+      const r = await fetch(apiUrl(`/api/im/${encodeURIComponent(platform)}/append-system?default=1`));
+      if (!r.ok) { const j = await r.json().catch(() => ({})); throw new Error(j.error || `HTTP ${r.status}`); }
+      const d = await r.json();
+      setContent(typeof d.content === 'string' ? d.content : '');
+      message.success(_tr('ui.im.personaRestored', null, 'Loaded the default preset — review and save'));
+    } catch (e) {
+      message.error(_tr('ui.im.restoreFailed', null, 'Restore failed') + (e?.message ? `: ${e.message}` : ''));
+    } finally {
+      setRestoring(false);
+    }
+  };
+
+  return (
+    <Modal
+      open={open}
+      onCancel={onClose}
+      onOk={save}
+      okText={_tr('ui.im.save', null, 'Save')}
+      cancelText={_tr('ui.cancel', null, 'Cancel')}
+      confirmLoading={saving}
+      okButtonProps={{ disabled: loading }}
+      width={680}
+      destroyOnClose
+      title={(
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+          <span>{_tr('ui.im.persona', null, 'Model personality')}</span>
+          <Popconfirm
+            title={_tr('ui.im.restoreDefaultConfirm', null, 'Replace the current text with the default preset? (takes effect after you save)')}
+            okText={_tr('ui.ok', null, 'OK')}
+            cancelText={_tr('ui.cancel', null, 'Cancel')}
+            onConfirm={restoreDefault}
+            placement="bottomLeft"
+            disabled={saving || restoring || loading}
+          >
+            <Button size="small" type="link" loading={restoring} disabled={saving || loading} style={{ padding: 0, height: 'auto', fontWeight: 400 }}>
+              {_tr('ui.im.restoreDefault', null, 'Restore default')}
+            </Button>
+          </Popconfirm>
+        </div>
+      )}
+      styles={{ content: { background: 'var(--bg-elevated)' }, header: { background: 'var(--bg-elevated)' } }}
+    >
+      {loading ? (
+        <div style={{ textAlign: 'center', padding: '40px 0' }}><Spin /></div>
+      ) : (
+        <Input.TextArea
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          autoSize={{ minRows: 16, maxRows: 28 }}
+          spellCheck={false}
+          style={{ fontFamily: 'var(--font-mono)', fontSize: 13 }}
+        />
+      )}
+    </Modal>
+  );
+}