tavern-harness 0.1.0

package/src/components/WorkspaceFileManagerModal.tsx

@@ -0,0 +1,216 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Modal, Icon } from './shared';
+import { DeleteConfirmDialog } from './DeleteConfirmDialog';
+import { useT } from '../core/i18n';
+import { applySessionWorkspace } from '../core/tools/toolExecutor';
+import { deleteWorkspaceFile, listSessionWorkspaceFiles } from '../core/tools/generatedSkillExecutor';
+import { useStore } from '../store/store';
+
+// ============================================================
+// 会话工作区文件管理器
+//  - 会话头部的工作目录标签点击打开
+//  - 只展示当前会话专属磁盘工作区（sandbox_workspace/）
+//  - 目录点击进入、支持返回上级与面包屑；文件点击复用 file_display 弹窗预览
+//  - 可在确认后删除文件（不删除目录）
+// ============================================================
+
+function extOf(path: string): string {
+  const m = /\.([A-Za-z0-9]+)$/.exec(path);
+  return m ? m[1].toLowerCase() : '';
+}
+
+/** 与 file_display 相同的「按扩展名推断展示方式」逻辑 */
+function kindFromPath(path: string): 'text' | 'image' | 'html' {
+  const ext = extOf(path);
+  if (/^(html?)$/i.test(ext)) return 'html';
+  if (/^(png|jpe?g|gif|webp|svg|bmp|ico)$/i.test(ext)) return 'image';
+  return 'text';
+}
+
+interface Node {
+  name: string;
+  path: string; // 会话工作区内的相对路径（目录以 / 结尾）
+  isDir: boolean;
+}
+
+/** 由扁平文件列表构建目录节点（目录与文件均以相对路径为唯一 key） */
+function buildNodes(files: string[]): Node[] {
+  const map = new Map<string, Node>();
+  for (const rel of files) {
+    const parts = rel.split('/').filter(Boolean);
+    if (parts.length === 0) continue;
+    for (let i = 1; i < parts.length; i++) {
+      const dirPath = parts.slice(0, i).join('/') + '/';
+      if (!map.has(dirPath)) map.set(dirPath, { name: parts[i - 1], path: dirPath, isDir: true });
+    }
+    map.set(rel, { name: parts[parts.length - 1] || rel, path: rel, isDir: false });
+  }
+  return [...map.values()].sort((a, b) => (a.isDir === b.isDir ? a.name.localeCompare(b.name) : a.isDir ? -1 : 1));
+}
+
+export function WorkspaceFileManagerModal({ sessionId, onClose }: { sessionId: number; onClose: () => void }) {
+  const t = useT();
+  const setActiveDisplay = useStore((s) => s.setActiveDisplay);
+  const session = useStore((s) => s.sessions.find((x) => x.id === sessionId));
+  const associatedNpc = useStore((s) => s.npcs.find((npc) => npc.id === session?.associatedId));
+  const usesPublicWorkspace = session?.mode === 'NPC' && associatedNpc?.isBuiltIn === true;
+  const rootLabel = usesPublicWorkspace ? t('header.workspaceRoot') : session?.workspaceDir?.trim() || `session-${sessionId}`;
+  const [files, setFiles] = useState<string[] | null>(null);
+  const [loadState, setLoadState] = useState<'loading' | 'ok' | 'empty' | 'error'>('loading');
+  const [pendingDelete, setPendingDelete] = useState<Node | null>(null);
+  // 当前浏览目录（'' = 根；否则为以 / 结尾的会话内相对路径）
+  const [dir, setDir] = useState('');
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoadState('loading');
+    setDir('');
+    const load = async () => {
+      // 多人及普通单人对话列出会话目录；酒馆老板单人对话列出 public 目录
+      try {
+        const workspaceDir = await applySessionWorkspace(sessionId);
+        const list = await listSessionWorkspaceFiles(workspaceDir);
+        if (cancelled) return;
+        setFiles(list);
+        setLoadState(list.length === 0 ? 'empty' : 'ok');
+      } catch {
+        if (cancelled) return;
+        setFiles([]);
+        setLoadState('error');
+      }
+    };
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, [sessionId]);
+
+  const nodes = useMemo(() => buildNodes(files ?? []), [files]);
+
+  // 当前目录的直接子项（目录与文件同级）
+  const visible = useMemo(() => {
+    const directChild = (p: string) => {
+      if (dir === '') return !p.replace(/\/$/, '').includes('/');
+      return p.startsWith(dir) && p !== dir && !p.slice(dir.length).includes('/');
+    };
+    return nodes.filter((n) => directChild(n.path));
+  }, [nodes, dir]);
+
+  const crumbs = useMemo(() => (dir === '' ? [] : dir.slice(0, -1).split('/')), [dir]);
+
+  const goUp = () => {
+    if (crumbs.length <= 1) setDir('');
+    else setDir(crumbs.slice(0, -1).join('/') + '/');
+  };
+
+  const openFile = (node: Node) => {
+    setActiveDisplay({
+      path: node.path,
+      kind: kindFromPath(node.path),
+      title: node.name,
+      sessionId,
+      presentation: 'modal',
+    });
+    onClose();
+  };
+
+  const confirmDelete = async () => {
+    if (!pendingDelete) return;
+    const workspaceDir = await applySessionWorkspace(sessionId);
+    await deleteWorkspaceFile(pendingDelete.path, workspaceDir);
+    setFiles((current) => {
+      const next = (current ?? []).filter((path) => path !== pendingDelete.path);
+      setLoadState(next.length === 0 ? 'empty' : 'ok');
+      return next;
+    });
+  };
+
+  return (
+    <Modal onClose={onClose} width="min(640px, calc(100vw - 32px))" className="ws-fm-modal">
+      <div className="modal-head ws-fm-head">
+        <span className="ws-fm-title">
+          <Icon name="folder" size={15} />
+          {t('header.fileManagerTitle')}
+          <span className="mono ws-fm-crumb">
+            {crumbs.length === 0 ? rootLabel : (
+              <>
+                <span className="ws-fm-crumb-link" onClick={() => setDir('')}>{rootLabel}</span>
+                {crumbs.map((c, i) => (
+                  <span key={i}>
+                    <span className="ws-fm-crumb-sep">/</span>
+                    {i === crumbs.length - 1 ? (
+                      <span className="ws-fm-crumb-cur">{c}</span>
+                    ) : (
+                      <span className="ws-fm-crumb-link" onClick={() => setDir(crumbs.slice(0, i + 1).join('/') + '/')}>{c}</span>
+                    )}
+                  </span>
+                ))}
+              </>
+            )}
+          </span>
+        </span>
+        <button className="icon-btn" onClick={onClose} title={t('common.close')}><Icon name="x" /></button>
+      </div>
+      <div className="modal-body ws-fm-body">
+        <div className="ws-fm-note">
+          <Icon name="eye" size={12} /> {t('header.fileManagerHint')}
+        </div>
+        {loadState === 'loading' && (
+          <div className="ws-fm-empty">
+            <span className="spinner" style={{ width: 20, height: 20 }} />
+            <span>{t('display.loading')}</span>
+          </div>
+        )}
+        {loadState === 'empty' && <div className="ws-fm-empty">{t('header.fileManagerEmpty')}</div>}
+        {loadState === 'error' && <div className="ws-fm-empty">{t('header.fileManagerError')}</div>}
+        {loadState === 'ok' && (
+          <div className="ws-fm-list">
+            {dir !== '' && (
+              <div className="ws-fm-row" role="button" onClick={goUp} title="..">
+                <span className="ws-fm-arrow" />
+                <Icon name="folder" size={14} />
+                <span className="ws-fm-name">..</span>
+              </div>
+            )}
+            {visible.map((n) =>
+              n.isDir ? (
+                <div key={n.path} className="ws-fm-row" role="button" onClick={() => setDir(n.path)} title={n.path}>
+                  <span className="ws-fm-arrow" />
+                  <Icon name="folder" size={14} />
+                  <span className="ws-fm-name">{n.name}/</span>
+                </div>
+              ) : (
+                <div key={n.path} className="ws-fm-row" role="button" onClick={() => openFile(n)} title={n.path}>
+                  <span className="ws-fm-arrow" />
+                  <Icon name="file" size={14} />
+                  <span className="ws-fm-name mono">{n.name}</span>
+                  <span className="ws-fm-actions">
+                    <span className="ws-fm-open"><Icon name="eye" size={12} /></span>
+                    <button
+                      className="icon-btn ws-fm-delete"
+                      title={t('common.delete')}
+                      aria-label={t('common.delete')}
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        setPendingDelete(n);
+                      }}
+                    ><Icon name="trash" size={13} /></button>
+                  </span>
+                </div>
+              )
+            )}
+            {visible.length === 0 && <div className="ws-fm-empty">{t('header.fileManagerEmpty')}</div>}
+          </div>
+        )}
+      </div>
+      {pendingDelete && (
+        <DeleteConfirmDialog
+          title={t('header.fileManagerDeleteTitle')}
+          itemName={pendingDelete.path}
+          onCancel={() => setPendingDelete(null)}
+          onConfirm={confirmDelete}
+        />
+      )}
+    </Modal>
+  );
+}

package/src/components/shared.tsx

@@ -0,0 +1,369 @@
+import { Children, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import DOMPurify from 'dompurify';
+import { renderMarkdown, highlightMentions } from '../core/markdown';
+import { useT } from '../core/i18n';
+
+// ============================================================
+// 通用弹窗容器（Portal 到 body，避开祖先 backdrop-filter 产生的
+// 包含块，保证全页面居中、遮罩覆盖全屏、点击可用）
+// ============================================================
+
+export function Modal({
+  onClose,
+  width,
+  className,
+  children,
+}: {
+  onClose: () => void;
+  width?: string | number;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return createPortal(
+    <>
+      <div className="overlay" onClick={onClose} />
+      <div className="modal-root" onClick={(e) => e.stopPropagation()}>
+        <div className={`modal card fade-up ${className ?? ''}`.trim()} style={width != null ? { width } : undefined}>
+          {children}
+        </div>
+      </div>
+    </>,
+    document.body
+  );
+}
+
+// ============================================================
+// Markdown 渲染组件（支持数学公式 + 代码高亮）
+// ============================================================
+
+interface MdProps {
+  text: string;
+  mathEnabled?: boolean;
+  mentionNames?: string[];
+}
+
+export function Markdown({ text, mathEnabled = true, mentionNames = [] }: MdProps) {
+  const html = useMemo(() => {
+    let h = renderMarkdown(text, { mathEnabled });
+    if (mentionNames.length > 0) h = highlightMentions(h, mentionNames);
+    return DOMPurify.sanitize(h, {
+      USE_PROFILES: { html: true },
+      ALLOW_UNKNOWN_PROTOCOLS: false,
+    });
+  }, [text, mathEnabled, mentionNames]);
+
+  return <div className="md" dangerouslySetInnerHTML={{ __html: html }} />;
+}
+
+// ============================================================
+// 统一瀑布流（按当前最短列放置，避免浏览器多栏布局分配差异）
+// ============================================================
+
+function sameLayout(left: number[][], right: number[][]): boolean {
+  return left.length === right.length
+    && left.every((column, index) => column.length === right[index].length
+      && column.every((item, itemIndex) => item === right[index][itemIndex]));
+}
+
+export function MasonryGrid({ children }: { children: React.ReactNode }) {
+  const gridRef = useRef<HTMLDivElement>(null);
+  const items = Children.toArray(children);
+  const [columnCount, setColumnCount] = useState(1);
+  const [revision, setRevision] = useState(0);
+  const [layout, setLayout] = useState<number[][]>([]);
+
+  const updateColumnCount = useCallback(() => {
+    const grid = gridRef.current;
+    if (!grid) return;
+    const styles = getComputedStyle(grid);
+    const minColumnWidth = Number.parseFloat(styles.getPropertyValue('--masonry-column-min-width'));
+    const gap = Number.parseFloat(styles.getPropertyValue('--masonry-gap'));
+    if (!Number.isFinite(minColumnWidth) || !Number.isFinite(gap)) return;
+    setColumnCount(Math.max(1, Math.floor((grid.clientWidth + gap) / (minColumnWidth + gap))));
+  }, []);
+
+  useLayoutEffect(() => {
+    updateColumnCount();
+    const grid = gridRef.current;
+    if (!grid) return;
+    const observer = new ResizeObserver(updateColumnCount);
+    observer.observe(grid);
+    return () => observer.disconnect();
+  }, [updateColumnCount]);
+
+  useLayoutEffect(() => {
+    const grid = gridRef.current;
+    if (!grid) return;
+    const gap = Number.parseFloat(getComputedStyle(grid).getPropertyValue('--masonry-gap'));
+    const heights = Array.from({ length: columnCount }, () => 0);
+    const nextLayout = Array.from({ length: columnCount }, () => [] as number[]);
+    const elementsByIndex = new Map(
+      Array.from(grid.querySelectorAll<HTMLElement>('.masonry-item')).map((element) => [Number(element.dataset.index), element])
+    );
+    for (let index = 0; index < items.length; index += 1) {
+      const element = elementsByIndex.get(index);
+      if (!element) return;
+      const targetColumn = heights.reduce((shortest, height, column) => height < heights[shortest] ? column : shortest, 0);
+      nextLayout[targetColumn].push(index);
+      heights[targetColumn] += element.offsetHeight + gap;
+    }
+    setLayout((current) => sameLayout(current, nextLayout) ? current : nextLayout);
+  }, [children, columnCount, revision]);
+
+  useLayoutEffect(() => {
+    const grid = gridRef.current;
+    if (!grid) return;
+    const observer = new ResizeObserver(() => setRevision((current) => current + 1));
+    for (const item of grid.querySelectorAll('.masonry-item')) observer.observe(item);
+    return () => observer.disconnect();
+  }, [items.length, layout]);
+
+  const visibleLayout = layout.flat().length === items.length
+    ? layout
+    : [items.map((_, index) => index)];
+
+  return (
+    <div ref={gridRef} className="char-grid">
+      {visibleLayout.map((column, index) => (
+        <div key={index} className="char-grid-column">
+          {column.map((itemIndex) => (
+            <div key={itemIndex} className="masonry-item" data-index={itemIndex}>
+              {items[itemIndex]}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ============================================================
+// 头像（彩色首字母 / 图片）
+// ============================================================
+
+export function Avatar({
+  name,
+  colorOrdinal,
+  imageUrl,
+  size = 'sm',
+}: {
+  name: string;
+  colorOrdinal?: number;
+  imageUrl?: string | null;
+  size?: 'sm' | 'xs' | 'lg';
+}) {
+  const cls = size === 'lg' ? 'avatar' : size === 'xs' ? 'avatar xs' : 'avatar sm';
+  const hue = (colorOrdinal ?? 0) % 6;
+  if (imageUrl) {
+    return (
+      <div className={cls}>
+        <img src={imageUrl} alt={name} />
+      </div>
+    );
+  }
+  return <div className={`${cls} avatar-hue-${hue}`}>{name.slice(0, 1)}</div>;
+}
+
+// ============================================================
+// 附件卡片：仅展示文件名（去掉图片/视频缩略图）
+// ============================================================
+
+export function AttachCard({ name, onRemove }: { name: string; onRemove?: () => void }) {
+  const t = useT();
+  return (
+    <div className="attach-card">
+      <span className="attach-card-icon">📎</span>
+      <span className="attach-card-name" title={name}>{name}</span>
+      {onRemove && (
+        <button className="attach-rm" onClick={onRemove} title={t('common.removeAttachment')}>
+          <Icon name="x" size={11} />
+        </button>
+      )}
+    </div>
+  );
+}
+
+// ============================================================
+// 群聊头像拼贴（方框内嵌套至多 4 位参与角色头像）
+// ============================================================
+
+export interface SessionMember {
+  name: string;
+  colorOrdinal: number;
+  imageUrl?: string | null;
+}
+
+function GroupCollage({ members }: { members: SessionMember[] }) {
+  // 始终渲染 2×2 四宫格；成员不足 4 位时空余格子留空
+  return (
+    <div className="gcollage gcollage-m4">
+      {[0, 1, 2, 3].map((i) => {
+        const m = members[i];
+        return (
+          <div key={i} className="gslot">
+            {m ? <Avatar name={m.name} colorOrdinal={m.colorOrdinal} imageUrl={m.imageUrl} size="xs" /> : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ============================================================
+// 会话头像（模式图标 / 群聊拼贴）
+// ============================================================
+
+export function SessionVisual({
+  mode,
+  npcName,
+  hue,
+  imageUrl,
+  members,
+  size = 'sm',
+}: {
+  mode: string;
+  npcName?: string;
+  hue?: number;
+  imageUrl?: string | null;
+  members?: SessionMember[];
+  size?: 'sm' | 'lg';
+}) {
+  if (mode === 'STANDARD') {
+    return (
+      <div className="svc">
+        <span>💬</span>
+      </div>
+    );
+  }
+  if (mode === 'NPC') {
+    return (
+      <div className={`svc svc-single ${size === 'lg' ? 'svc-group-lg' : ''}`}>
+        <Avatar name={npcName ?? 'NPC'} colorOrdinal={hue ?? 0} imageUrl={imageUrl} />
+      </div>
+    );
+  }
+  // GROUP
+  return (
+    <div className={`svc svc-group ${size === 'lg' ? 'svc-group-lg' : ''}`}>
+      <GroupCollage members={members ?? []} />
+    </div>
+  );
+}
+
+// ============================================================
+// 折叠面板（Thinking / 工具调用卡片共用）
+// ============================================================
+
+export function Collapse({
+  title,
+  icon,
+  preview,
+  children,
+  accent = 'default',
+  defaultOpen = false,
+  live = false,
+}: {
+  title: string;
+  icon?: string;
+  preview?: string;
+  children: React.ReactNode;
+  accent?: 'think' | 'default';
+  defaultOpen?: boolean;
+  live?: boolean;
+}) {
+  const t = useT();
+  const [open, setOpen] = useState(defaultOpen);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [overflow, setOverflow] = useState(false);
+
+  useEffect(() => {
+    const el = contentRef.current;
+    if (el) {
+      setOverflow(el.scrollHeight > el.clientHeight + 4);
+      // 流式进行中：实时跟随最新内容（钉在底部，展示最新的一行/一段）
+      if (live && open) {
+        el.scrollTop = el.scrollHeight;
+      }
+    }
+  }, [preview, children, live, open]);
+
+  const cls = `collp ${accent !== 'default' ? `collp-${accent}` : ''}`;
+  return (
+    <div className={cls}>
+      <button className="collp-head" onClick={() => setOpen(!open)}>
+        {icon && <span className="collp-icon">{icon}</span>}
+        <span className="collp-title">{title}</span>
+        {live && <span className="collp-live"><span className="spinner" style={{ width: 12, height: 12 }} /></span>}
+        <span className="collp-arrow" style={{ transform: open ? 'rotate(180deg)' : undefined }}>▾</span>
+      </button>
+      {open && (
+        <div className="collp-body">
+          <div ref={contentRef} className="collp-content">{children}</div>
+          {overflow && !preview && <div className="collp-more">{t('chat.collpMore')}</div>}
+        </div>
+      )}
+      {!open && preview && (
+        <div className={`collp-preview ${live ? 'live' : ''}`}>
+          {/* 流式中只显示最新的一行内容，否则显示开头预览 */}
+          {live ? (preview.trim().split('\n').filter(Boolean).slice(-1)[0] ?? '') : preview.slice(0, 120)}
+          {!live && preview.length > 120 ? '…' : ''}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============================================================
+// 图标（轻量内联 SVG，避免依赖图标库）
+// ============================================================
+
+const ICONS: Record<string, React.ReactNode> = {
+  send: <path d="M3 11.5 21 3l-8.5 18-2.5-7.5L3 11.5z" />,
+  plus: <path d="M12 5v14M5 12h14" />,
+  stop: <rect x="6" y="6" width="12" height="12" rx="2" />,
+  trash: <path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3" />,
+  refresh: <path d="M21 12a9 9 0 1 1-3-6.7M21 3v6h-6" />,
+  settings: <path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h.01a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h.01a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v.01a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />,
+  users: <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />,
+  book: <><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" /><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" /></>,
+  file: <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 2v6h6" />,
+  trophy: <><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6M18 9h1.5a2.5 2.5 0 0 0 0-5H18" /><path d="M4 22h16M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22" /><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z" /></>,
+  more: <><circle cx="5" cy="12" r="1.6" /><circle cx="12" cy="12" r="1.6" /><circle cx="19" cy="12" r="1.6" /></>,
+  image: <><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="9" cy="9" r="2" /><path d="m21 15-5-5L5 21" /></>,
+  check: <path d="M20 6 9 17l-5-5" />,
+  cancel: <path d="M18 6 6 18M6 6l12 12" />,
+  x: <path d="M18 6 6 18M6 6l12 12" />,
+  share: <><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" /><path d="m16 6-4-4-4 4M12 2v13" /></>,
+  sort: <><path d="M11 5h10M11 9h7M11 13h4" /><path d="m3 17 3 3 3-3M6 20V4" /></>,
+  pencil: <><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5l-5 1 1-5Z" /><path d="m15 5 4 4" /></>,
+  upload: <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><path d="m17 8-5-5-5 5M12 3v12" /></>,
+  import: <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><path d="M17 14l-5 5-5-5M12 19V7" /></>,
+  pin: <><path d="M9 4h6M12 4v3l4 3v3h-8v-3l4-3" /><path d="M12 13v7" /></>,
+  'git-branch': <><path d="M6 3v12" /><circle cx="18" cy="6" r="3" /><circle cx="6" cy="18" r="3" /><path d="M18 9a9 9 0 0 1-9 9" /></>,
+  'zoom-in': <><circle cx="11" cy="11" r="7" /><path d="m21 21-4.35-4.35M11 8v6M8 11h6" /></>,
+  'zoom-out': <><circle cx="11" cy="11" r="7" /><path d="m21 21-4.35-4.35M8 11h6" /></>,
+  pip: <><rect x="3" y="5" width="18" height="14" rx="2" /><rect x="11" y="11" width="8" height="6" rx="1" /></>,
+  'pip-exit': <><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m14 14 5-5M15 9h4v4" /></>,
+  'text-wrap': <><path d="M4 6h13a4 4 0 0 1 0 8H9" /><path d="m12 11-3 3 3 3M4 18h3" /></>,
+  eye: <><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" /><circle cx="12" cy="12" r="3" /></>,
+  folder: <><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" /></>,
+};
+
+export function Icon({ name, size = 15 }: { name: string; size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{ flexShrink: 0 }}
+    >
+      {ICONS[name] ?? ICONS.more}
+    </svg>
+  );
+}

package/src/core/achievements.ts

@@ -0,0 +1,85 @@
+import { db } from '../db/database';
+
+// ============================================================
+// 成就系统（基于生涯总 Token 数的等级制成就）
+// ============================================================
+
+export interface AchievementDef {
+  id: string;
+  name: string;
+  icon: string;
+  /** 达成所需累计 Token 数（输入 + 输出） */
+  threshold: number;
+  description: string;
+}
+
+export const ACHIEVEMENTS: AchievementDef[] = [
+  { id: 'traveler', name: '旅人', icon: '🧭', threshold: 1_000, description: '累计使用 1,000 Token' },
+  { id: 'old-friend', name: '老友', icon: '🤝', threshold: 10_000, description: '累计使用 10,000 Token' },
+  { id: 'bard', name: '吟游诗人', icon: '🎻', threshold: 100_000, description: '累计使用 100,000 Token' },
+  { id: 'night-owl', name: '午夜不归人', icon: '🌙', threshold: 1_000_000, description: '累计使用 1,000,000 Token' },
+  { id: 'legend', name: '酒馆传奇', icon: '🏆', threshold: 100_000_000, description: '累计使用 100,000,000 Token' },
+];
+
+/** 生涯总 token（输入 + 输出） */
+async function getTotalTokens(): Promise<number> {
+  const stats = (await db.careerStats.get(1)) ?? { id: 1, inputTokens: 0, outputTokens: 0, totalRounds: 0 };
+  return stats.inputTokens + stats.outputTokens;
+}
+
+/** 已解锁的成就 id 集合 */
+async function getUnlockedAchievementIds(): Promise<Set<string>> {
+  const rows = await db.achievementUnlocks.toArray();
+  return new Set(rows.map((r) => r.achievementId));
+}
+
+const unlockDispatcher: { push: (ach: AchievementDef, total: number) => void | Promise<void> } = {
+  push: () => {},
+};
+
+/** 注册「解锁成就」回调（由 UI 层在启动时注入，用于弹窗撒花展示） */
+export function registerUnlockDispatcher(
+  dispatcher: (ach: AchievementDef, total: number) => void | Promise<void>,
+): void {
+  unlockDispatcher.push = dispatcher;
+}
+
+let checkLock: Promise<void> | null = null;
+
+/**
+ * 检测是否有新解锁的成就（幂等：已解锁的不会重复触发）。
+ * 并发安全：内部串行执行，避免多次流式回合同时触发重复弹窗。
+ */
+export async function checkAchievementUnlocks(): Promise<void> {
+  if (checkLock) {
+    await checkLock;
+    return;
+  }
+  const run = async (): Promise<void> => {
+    const total = await getTotalTokens();
+    const unlocked = await getUnlockedAchievementIds();
+    const newly: Array<{ def: AchievementDef; total: number }> = [];
+
+    for (const def of ACHIEVEMENTS) {
+      if (unlocked.has(def.id)) continue;
+      if (total >= def.threshold) {
+        await db.achievementUnlocks.add({ achievementId: def.id, unlockedAt: Date.now() });
+        newly.push({ def, total });
+      }
+    }
+    if (newly.length > 0) {
+      // 由高到低依次展示（若多级同时达成）
+      for (const { def, total } of newly.sort((a, b) => b.def.threshold - a.def.threshold)) {
+        try {
+          await unlockDispatcher.push(def, total);
+        } catch {
+          // 忽略 UI 展示层的错误，不影响统计与持久化
+        }
+      }
+    }
+  };
+  checkLock = run().finally(() => {
+    checkLock = null;
+  });
+  await checkLock;
+}