tavern-harness 0.1.0

package/src/components/Sidebar.tsx

@@ -0,0 +1,392 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useStore } from '../store/store';
+import { db } from '../db/database';
+import { Icon, Modal, SessionVisual } from './shared';
+import type { SessionMember } from './shared';
+import type { ChatSession, NpcCharacter } from '../types/models';
+import { NewSessionMenu } from './NewSessionMenu';
+import { useT } from '../core/i18n';
+
+const SIDEBAR_MIN = 240;
+const SIDEBAR_MAX = 520;
+
+/** 触发 App 级全局游戏导出弹窗（会话右键菜单共用） */
+function openGlobalGameplayExport(sessionId: number, includeHistory: boolean) {
+  window.dispatchEvent(
+    new CustomEvent('th-gameplay-export', { detail: { sessionId, includeHistory } })
+  );
+}
+
+export function Sidebar() {
+  const sessions = useStore((s) => s.sessions);
+  const npcs = useStore((s) => s.npcs);
+  const activeSessionId = useStore((s) => s.activeSessionId);
+  const activeView = useStore((s) => s.activeView);
+  const streamingSessionId = useStore((s) => s.streaming.sessionId);
+  const activitySessionIds = useStore((s) => s.activitySessionIds);
+  const setActiveSession = useStore((s) => s.setActiveSession);
+  const setActiveView = useStore((s) => s.setActiveView);
+  const deleteSession = useStore((s) => s.deleteSession);
+  const togglePin = useStore((s) => s.togglePin);
+  const addToast = useStore((s) => s.addToast);
+  const t = useT();
+
+  const [showNew, setShowNew] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState<ChatSession | null>(null);
+  const [editTarget, setEditTarget] = useState<ChatSession | null>(null);
+  const [sessionMenu, setSessionMenu] = useState<{ session: ChatSession; x: number; y: number } | null>(null);
+  const [query, setQuery] = useState('');
+  // 搜索命中的会话 id 集合（null = 未在搜索中）
+  const [searchHits, setSearchHits] = useState<Set<number> | null>(null);
+  // 群聊会话 → 参与者中的 NPC 角色
+  const [groupMembers, setGroupMembers] = useState<Record<number, NpcCharacter[]>>({});
+
+  // 可拖拽侧边栏宽度
+  const [sidebarW, setSidebarW] = useState<number>(() => {
+    const saved = parseFloat(localStorage.getItem('tav-sidebar-w') || '0');
+    return saved >= SIDEBAR_MIN && saved <= SIDEBAR_MAX ? saved : 356;
+  });
+  const dragRef = useRef<{ startX: number; startW: number } | null>(null);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.style.setProperty('--sidebar-w', `${sidebarW}px`);
+    localStorage.setItem('tav-sidebar-w', String(sidebarW));
+  }, [sidebarW]);
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      const d = dragRef.current;
+      if (!d) return;
+      const w = Math.min(SIDEBAR_MAX, Math.max(SIDEBAR_MIN, d.startW + (e.clientX - d.startX)));
+      setSidebarW(w);
+    };
+    const onUp = () => {
+      dragRef.current = null;
+      document.body.classList.remove('resizing');
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+  }, []);
+
+  const npcById = (id: number | null) => (id != null ? npcs.find((n) => n.id === id) : null);
+
+  const handleDelete = async () => {
+    if (!confirmDelete) return;
+    const sid = confirmDelete.id!;
+    await deleteSession(sid);
+    addToast(t('toast.sessionDeleted'));
+    setConfirmDelete(null);
+  };
+
+  const openEdit = (session: ChatSession) => {
+    setSessionMenu(null);
+    setEditTarget(session);
+  };
+
+  useEffect(() => {
+    if (!sessionMenu && !editTarget) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setSessionMenu(null);
+        setEditTarget(null);
+      }
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [sessionMenu, editTarget]);
+
+  // 搜索：标题 / 消息内容关键词匹配
+  useEffect(() => {
+    const keyword = query.trim().toLowerCase();
+    if (!keyword) {
+      setSearchHits(null);
+      return;
+    }
+    let cancelled = false;
+    (async () => {
+      // 标题匹配
+      const titleHits = new Set(
+        sessions.filter((s) => s.title.toLowerCase().includes(keyword)).map((s) => s.id!)
+      );
+      // 消息内容匹配（分页扫描，避免大结果集）
+      const contentHits = new Set<number>();
+      let offset = 0;
+      const pageSize = 500;
+      while (true) {
+        const page = await db.messages.orderBy('timestamp').offset(offset).limit(pageSize).toArray();
+        if (page.length === 0) break;
+        for (const m of page) {
+          const text = (m.content || '').toLowerCase();
+          if (text.includes(keyword)) contentHits.add(m.sessionId);
+        }
+        if (page.length < pageSize) break;
+        offset += pageSize;
+      }
+      if (!cancelled) {
+        const merged = new Set([...titleHits, ...contentHits]);
+        setSearchHits(merged);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [query, sessions]);
+
+  const visibleSessions = useMemo(() => {
+    const list = [...sessions];
+    if (searchHits != null) {
+      return list.filter((s) => searchHits.has(s.id!));
+    }
+    return list;
+  }, [sessions, searchHits]);
+
+  const searching = searchHits != null;
+
+  // 加载各群聊会话的参与角色（用于群头像拼贴，每个会话一次即可）
+  useEffect(() => {
+    const groupSessions = sessions.filter((s) => s.mode === 'GROUP');
+    if (groupSessions.length === 0) return;
+    let cancelled = false;
+    (async () => {
+      const loaded: Record<number, NpcCharacter[]> = {};
+      await Promise.all(
+        groupSessions.map(async (s) => {
+          const parts = await db.participants.where('sessionId').equals(s.id!).toArray();
+          const npcs1 = parts
+            .filter((p) => p.kind === 'NPC' && p.npcId != null)
+            .map((p) => npcs.find((n) => n.id === p.npcId))
+            .filter((n): n is NpcCharacter => Boolean(n));
+          loaded[s.id!] = npcs1;
+        })
+      );
+      if (!cancelled) setGroupMembers(loaded);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [sessions, npcs]);
+
+  const sessionMembers = (s: ChatSession): SessionMember[] | undefined =>
+    (groupMembers[s.id!] ?? []).slice(0, 4).map((n) => ({
+      name: n.name,
+      colorOrdinal: n.avatarColorOrdinal,
+      imageUrl: n.avatarDataUrl,
+    }));
+
+  return (
+    <aside className="sidebar">
+      <div className="sidebar-head">
+        <div
+          className="brand"
+          role="button"
+          tabIndex={0}
+          title={t('nav.home')}
+          onClick={() => setActiveSession(null)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              setActiveSession(null);
+            }
+          }}
+        >
+          <div className="brand-logo">
+            <img src="/tavern-harness-logo.png" alt="Tavern Harness" style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: '50%' }} />
+          </div>
+          <div>
+            <div className="brand-name">Tavern Harness</div>
+            <div className="brand-sub">{t('nav.brandSub')}</div>
+          </div>
+        </div>
+        <div className="side-nav" data-hscroll>
+          <button className={`nav-chip ${activeView === 'chat' ? 'active' : ''}`} onClick={() => setActiveView('chat')}>
+            <Icon name="send" size={13} /> {t('nav.chat')}
+          </button>
+          <button className={`nav-chip ${activeView === 'characters' ? 'active' : ''}`} onClick={() => setActiveView('characters')}>
+            <Icon name="users" size={13} /> {t('nav.characters')}
+          </button>
+          <button className={`nav-chip ${activeView === 'stats' ? 'active' : ''}`} onClick={() => setActiveView('stats')}>
+            <Icon name="trophy" size={13} /> {t('nav.achievements')}
+          </button>
+          <button className={`nav-chip ${activeView === 'settings' ? 'active' : ''}`} onClick={() => setActiveView('settings')}>
+            <Icon name="settings" size={13} /> {t('nav.settings')}
+          </button>
+        </div>
+      </div>
+
+<div className="session-section">
+        {/* 会话列表头部：标题 + 新建按钮（固定不滚动） */}
+        <div className="session-list-head">
+          <span className="section-title" style={{ margin: 0 }}>{t('nav.sessions')}</span>
+          <div className="session-head-actions">
+            <button
+              className="session-new-btn"
+              onClick={() => window.dispatchEvent(new CustomEvent('th-gameplay-import'))}
+              title={t('nav.importGameplayTitle')}
+            >
+              <Icon name="import" size={13} /> {t('nav.importGameplay')}
+            </button>
+            <button className="session-new-btn" onClick={() => setShowNew(true)} title={t('nav.newChatTitle')}>
+              <Icon name="plus" size={13} /> {t('nav.newChat')}
+            </button>
+          </div>
+        </div>
+        {/* 可滚动的会话列表 */}
+        <div className="session-list">
+        {visibleSessions.map((s) => {
+          const npc = npcById(s.associatedId);
+          const hasActivity = streamingSessionId === s.id || Boolean(activitySessionIds[s.id!]);
+          return (
+            <button
+              key={s.id}
+              className={`session-item ${s.id === activeSessionId && activeView === 'chat' ? 'active' : ''}`}
+              onClick={() => setActiveSession(s.id!)}
+              onContextMenu={(e) => {
+                e.preventDefault();
+                setSessionMenu({ session: s, x: e.clientX, y: e.clientY });
+              }}
+            >
+              {s.mode === 'NPC' ? (
+                <SessionVisual mode="NPC" npcName={npc?.name ?? 'NPC'} hue={npc?.avatarColorOrdinal ?? 0} imageUrl={npc?.avatarDataUrl} />
+              ) : (
+                <SessionVisual mode={s.mode} members={s.mode === 'GROUP' ? sessionMembers(s) : undefined} />
+              )}
+              <div className="smeta">
+                <div className="stitle">
+                  {!!(s as { pinned?: unknown }).pinned && (
+                    <span className="spinned" title={t('nav.pinSession')}><Icon name="pin" size={11} /></span>
+                  )}
+                  <span className="stitle-text">{s.title}</span>
+                  {hasActivity && <span className="session-activity-dot" aria-label={t('nav.sessionActive')} />}
+                </div>
+                <div className="sprev">{s.lastMessage || t('nav.newConversation')}</div>
+              </div>
+            </button>
+          );
+        })}
+        {!searching && sessions.length === 0 && (
+          <div className="empty-state" style={{ padding: 30 }}>
+            <div className="big">🍺</div>
+            <span>{t('nav.empty')}</span>
+          </div>
+        )}
+        {searching && visibleSessions.length === 0 && (
+          <div className="empty-state" style={{ padding: 30 }}>
+            <div className="big">🔍</div>
+            <span>{t('nav.noMatch')}</span>
+          </div>
+        )}
+      </div>
+      </div>
+
+      {/* 底部：搜索框 */}
+      <div className="sidebar-search">
+        <input
+          className="input search-input"
+          type="text"
+          placeholder={t('nav.searchPh')}
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+        />
+        {query && (
+          <button className="search-clear" onClick={() => setQuery('')} title={t('common.clear')}>
+            <Icon name="x" size={13} />
+          </button>
+        )}
+      </div>
+
+      {showNew && <NewSessionMenu onClose={() => setShowNew(false)} />}
+      {editTarget && <NewSessionMenu editingSession={editTarget} onClose={() => setEditTarget(null)} />}
+
+      {sessionMenu &&
+        createPortal(
+          <>
+            <div className="overlay-msg" onClick={() => setSessionMenu(null)} />
+            <div
+              className="msg-menu card"
+              style={{
+                left: Math.max(8, Math.min(sessionMenu.x, window.innerWidth - 196)),
+                top: Math.max(8, Math.min(sessionMenu.y, window.innerHeight - 132)),
+              }}
+            >
+              <button className="msg-menu-item" onClick={() => openEdit(sessionMenu.session)}>
+                <Icon name="pencil" size={13} /> {t('nav.editSession')}
+              </button>
+              <button
+                className="msg-menu-item"
+                onClick={async () => {
+                  await togglePin(sessionMenu.session.id!);
+                  setSessionMenu(null);
+                  addToast(
+                    (sessionMenu.session as { pinned?: unknown }).pinned
+                      ? t('toast.sessionUnpinned')
+                      : t('toast.sessionPinned')
+                  );
+                }}
+              >
+                <Icon name="pin" size={13} /> {(sessionMenu.session as { pinned?: unknown }).pinned ? t('nav.unpinSession') : t('nav.pinSession')}
+              </button>
+              <button
+                className="msg-menu-item"
+                onClick={() => {
+                  const target = sessionMenu.session;
+                  setSessionMenu(null);
+                  openGlobalGameplayExport(target.id!, true);
+                }}
+              >
+                <Icon name="share" size={13} /> {t('nav.exportGameplay')}
+              </button>
+              <button
+                className="msg-menu-item danger"
+                onClick={() => {
+                  setConfirmDelete(sessionMenu.session);
+                  setSessionMenu(null);
+                }}
+              >
+                <Icon name="trash" size={13} /> {t('nav.deleteSession')}
+              </button>
+            </div>
+          </>,
+          document.body
+        )}
+
+      {/* 删除会话确认弹窗 */}
+      {confirmDelete && (
+        <Modal onClose={() => setConfirmDelete(null)} width="min(400px, calc(100vw - 32px))">
+          <div className="modal-head">
+            <span style={{ fontWeight: 800, fontSize: 15, display: 'flex', alignItems: 'center', gap: 8 }}>
+              <Icon name="trash" size={15} /> {t('nav.deleteSession')}
+            </span>
+            <button className="icon-btn" onClick={() => setConfirmDelete(null)}><Icon name="x" /></button>
+          </div>
+          <div className="modal-body">
+            <div style={{ fontSize: 13.5, lineHeight: 1.7 }}>
+              {t('nav.deleteSessionConfirm', { title: confirmDelete.title })}
+            </div>
+          </div>
+          <div className="modal-foot">
+            <button className="btn" onClick={() => setConfirmDelete(null)}>{t('common.cancel')}</button>
+            <button className="btn btn-danger" onClick={handleDelete}>
+              <Icon name="trash" size={13} /> {t('common.delete')}
+            </button>
+          </div>
+        </Modal>
+      )}
+
+      {/* 拖拽手柄：调整侧边栏宽度 */}
+      <div
+        className="sidebar-resizer"
+        title={t('nav.resize')}
+        onMouseDown={(e) => {
+          dragRef.current = { startX: e.clientX, startW: sidebarW };
+          document.body.classList.add('resizing');
+        }}
+      />
+    </aside>
+  );
+}

package/src/components/StatsView.tsx

@@ -0,0 +1,189 @@
+import { useEffect, useState } from 'react';
+import { useStore } from '../store/store';
+import { getCareerStats, resetCareerStats } from '../core/stats';
+import { Icon } from './shared';
+import type { AchievementState } from '../store/store';
+import { useT, currentLocale } from '../core/i18n';
+import { idToKey } from '../core/strings';
+
+// ============================================================
+// 生涯统计 + 成就陈列
+// ============================================================
+
+interface StatsData {
+  inputTokens: number;
+  outputTokens: number;
+  totalRounds: number;
+  sessionCount: number;
+  npcStats: Array<{ npcId: number; npcName: string; rounds: number }>;
+}
+
+export function StatsView() {
+  const addToast = useStore((s) => s.addToast);
+  const t = useT();
+  const [data, setData] = useState<StatsData | null>(null);
+
+  const refresh = async () => {
+    const d = await getCareerStats();
+    setData(d);
+  };
+
+  useEffect(() => {
+    refresh();
+  }, []);
+
+  if (!data) {
+    return <div className="view-page"><div className="spinner" /></div>;
+  }
+
+  return (
+    <div className="view-page">
+      <div className="view-col">
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
+          <div>
+            <h2 className="view-title">{t('stats.title')}</h2>
+            <p className="view-sub">{t('stats.sub')}</p>
+          </div>
+          <button
+            className="btn btn-sm btn-danger"
+            onClick={async () => {
+              if (!confirm(t('stats.resetConfirm'))) return;
+              await resetCareerStats();
+              await refresh();
+              addToast(t('toast.statsReset'));
+            }}
+          >
+            <Icon name="refresh" size={12} /> {t('stats.resetBtn')}
+          </button>
+        </div>
+
+        {/* 成就陈列柜 */}
+        <AchievementShelf />
+
+        {/* 生涯统计 */}
+        <StatCards data={data} />
+      </div>
+    </div>
+  );
+}
+
+/** 成就陈列柜：已解锁的奖杯点亮，未解锁的只展示锁定状态 */
+function AchievementShelf() {
+  const achievements = useStore((s) => s.achievements);
+  const t = useT();
+  const unlockedCount = achievements.filter((a) => a.unlockedAt != null).length;
+
+  return (
+    <div className="set-section">
+      <h3>{t('stats.shelfTitle')}</h3>
+      <div className="ach-shelf">
+        {achievements.map((a) => (
+          <AchievementCard key={a.def.id} data={a} />
+        ))}
+      </div>
+      <div className="ach-shelf-summary">
+        {t('stats.unlocked')} <b>{unlockedCount}</b> / {achievements.length} {t('stats.trophies')}
+      </div>
+    </div>
+  );
+}
+
+function AchievementCard({ data }: { data: AchievementState }) {
+  const t = useT();
+  const unlocked = data.unlockedAt != null;
+
+  return (
+    <div className={`ach-card ${unlocked ? 'unlocked' : ''}`} title={unlocked ? t('stats.unlockedStatus') : t('stats.locked')}>
+      <div className="ach-card-head">
+        <span className="ach-card-icon">{unlocked ? data.def.icon : '🔒'}</span>
+        <span className="ach-card-status">{unlocked ? t('stats.unlockedStatus') : t('stats.locked')}</span>
+      </div>
+      <div className="ach-card-name">{unlocked ? t(`ach.${idToKey(data.def.id)}.name`) : t('stats.hidden')}</div>
+      {unlocked && (
+        <div className="ach-card-desc">{t(`ach.${idToKey(data.def.id)}.desc`)}</div>
+      )}
+      {unlocked && data.unlockedAt && (
+        <div className="ach-card-time">
+          {new Date(data.unlockedAt).toLocaleDateString(currentLocale(), { year: 'numeric', month: '2-digit', day: '2-digit' })} {t('stats.unlockedAt')}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StatCards({ data }: { data: StatsData }) {
+  const t = useT();
+  const totalTokens = data.inputTokens + data.outputTokens;
+
+  return (
+    <>
+      <div className="stat-grid">
+        <div className="stat-card">
+          <div className="v">{totalTokens.toLocaleString()}</div>
+          <div className="k">{t('stats.totalTokens')}</div>
+        </div>
+        <div className="stat-card">
+          <div className="v">{data.inputTokens.toLocaleString()}</div>
+          <div className="k">{t('stats.inputTokens')}</div>
+        </div>
+        <div className="stat-card">
+          <div className="v">{data.outputTokens.toLocaleString()}</div>
+          <div className="k">{t('stats.outputTokens')}</div>
+        </div>
+        <div className="stat-card">
+          <div className="v">{data.totalRounds}</div>
+          <div className="k">{t('stats.rounds')}</div>
+        </div>
+        <div className="stat-card">
+          <div className="v">{data.sessionCount}</div>
+          <div className="k">{t('stats.sessions')}</div>
+        </div>
+        <div className="stat-card">
+          <div className="v">{data.totalRounds && data.sessionCount ? (data.totalRounds / data.sessionCount).toFixed(1) : '0'}</div>
+          <div className="k">{t('stats.avgRounds')}</div>
+        </div>
+      </div>
+
+      <div className="set-section">
+        <h3>{t('stats.mostActive')}</h3>
+        {data.npcStats.length > 0 ? (
+          <>
+            {(() => {
+              const mostActive = [...data.npcStats].sort((a, b) => b.rounds - a.rounds)[0];
+              return (
+                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+                  <div style={{ fontSize: 26 }}>🎭</div>
+                  <div>
+                    <div style={{ fontWeight: 800 }}>{mostActive.npcName}</div>
+                    <div style={{ fontSize: 12, color: 'var(--text-faint)' }}>{t('stats.roundsCount', { n: mostActive.rounds })}</div>
+                  </div>
+                </div>
+              );
+            })()}
+          </>
+        ) : (
+          <div style={{ color: 'var(--text-faint)', fontSize: 13 }}>{t('stats.noData')}</div>
+        )}
+      </div>
+
+      {data.npcStats.length > 0 && (
+        <div className="set-section">
+          <h3>{t('stats.ranking')}</h3>
+          <table className="table">
+            <thead>
+              <tr><th>{t('stats.colChar')}</th><th>{t('stats.colRounds')}</th></tr>
+            </thead>
+            <tbody>
+              {[...data.npcStats].sort((a, b) => b.rounds - a.rounds).map((n) => (
+                <tr key={n.npcId}>
+                  <td>{n.npcName}</td>
+                  <td>{n.rounds}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </>
+  );
+}

package/src/components/Toasts.tsx

@@ -0,0 +1,20 @@
+import { useStore } from '../store/store';
+
+// ============================================================
+// Toast 通知
+// ============================================================
+
+export function Toasts() {
+  const toasts = useStore((s) => s.toasts);
+  const remove = useStore((s) => s.removeToast);
+
+  return (
+    <div className="toast-wrap">
+      {toasts.map((t) => (
+        <div key={t.id} className={`toast ${t.kind === 'error' ? 'err' : ''}`} onClick={() => remove(t.id)}>
+          {t.kind === 'error' ? '⚠️ ' : '✓ '}{t.message}
+        </div>
+      ))}
+    </div>
+  );
+}