tavern-harness 0.1.0

package/src/App.tsx

@@ -0,0 +1,268 @@
+import { useEffect, useState } from 'react';
+import { useStore } from './store/store';
+import { Sidebar } from './components/Sidebar';
+import { ChatView, ChatInput, MessageMenu, TurnQueuePanel } from './components/ChatView';
+import { CharactersView } from './components/CharactersView';
+import { SettingsView } from './components/SettingsView';
+import { StatsView } from './components/StatsView';
+import { Dashboard } from './components/Dashboard';
+import { NewSessionMenu } from './components/NewSessionMenu';
+import { ConfirmationDialog } from './components/ConfirmationDialog';
+import { FileDisplayModal } from './components/FileDisplayModal';
+import { WorkspaceFileManagerModal } from './components/WorkspaceFileManagerModal';
+import { Toasts } from './components/Toasts';
+import { AchievementModal, showAchievementUnlock } from './components/AchievementModal';
+import { GameplayExportModal, GameplayImportModal } from './components/GameplayDialogs';
+import { Icon, SessionVisual, Modal } from './components/shared';
+import type { NpcCharacter } from './types/models';
+import { registerUnlockDispatcher } from './core/achievements';
+import { useT } from './core/i18n';
+import './theme/chat.css';
+import './theme/views.css';
+
+export default function App() {
+  const initialized = useStore((s) => s.initialized);
+  const init = useStore((s) => s.init);
+  const activeView = useStore((s) => s.activeView);
+  const activeSessionId = useStore((s) => s.activeSessionId);
+  const sessions = useStore((s) => s.sessions);
+  const messages = useStore((s) => s.messages);
+  const contextCompressions = useStore((s) => s.contextCompressions);
+  const participants = useStore((s) => s.participants);
+  const isStreaming = useStore((s) => s.streaming.sessionId != null);
+
+  useEffect(() => {
+    registerUnlockDispatcher(async (achievement, total) => {
+      await useStore.getState().refreshAchievements();
+      showAchievementUnlock(achievement, total);
+    });
+    return () => registerUnlockDispatcher(() => {});
+  }, []);
+
+  useEffect(() => {
+    init();
+  }, [init]);
+
+  useEffect(() => {
+    if (!isStreaming) return;
+    const confirmLeave = (event: BeforeUnloadEvent) => {
+      event.preventDefault();
+      event.returnValue = '';
+    };
+    window.addEventListener('beforeunload', confirmLeave);
+    return () => window.removeEventListener('beforeunload', confirmLeave);
+  }, [isStreaming]);
+
+  const activeSession = sessions.find((s) => s.id === activeSessionId) ?? null;
+  const sessionMessages = activeSessionId != null ? (messages[activeSessionId] ?? []) : [];
+  const sessionParticipants = activeSessionId != null ? (participants[activeSessionId] ?? []) : [];
+  const isStreamingSession = useStore((s) => s.streaming.sessionId === activeSessionId);
+
+  if (!initialized) {
+    return <div className="tav-bg" />;
+  }
+
+  return (
+    <>
+      <div className="tav-bg" />
+      <div className="app-shell">
+        <Sidebar />
+        <main className="main-area">
+          {activeView === 'chat' && activeSession && (
+            <>
+              <SessionHeader session={activeSession} participants={sessionParticipants} />
+              <div className="chat-main-row">
+                <div className="chat-main-col">
+                  <ChatView
+                    session={activeSession}
+                    messages={sessionMessages}
+                    participants={sessionParticipants}
+                    compressions={contextCompressions[activeSession.id!] ?? []}
+                    streaming={isStreamingSession}
+                  />
+                  <ChatInput sessionId={activeSession.id!} />
+                </div>
+                <TurnQueuePanel session={activeSession} participants={sessionParticipants} />
+              </div>
+            </>
+          )}
+          {activeView === 'chat' && !activeSession && <Dashboard />}
+          {activeView === 'characters' && <CharactersView />}
+          {activeView === 'settings' && <SettingsView />}
+          {activeView === 'stats' && <StatsView />}
+        </main>
+      </div>
+      <ConfirmationDialog />
+      <MessageMenu />
+      <Toasts />
+      <AchievementModal />
+      <FileDisplayModal />
+      {/* 游戏导出 / 导入的全局入口（会话右键菜单 / 侧边栏导入按钮共用） */}
+      <GameplayEntryDialogs />
+    </>
+  );
+}
+
+/** 全局注册的游戏导出/导入弹窗（供 Sidebar 与 SessionHeader 之外的入口使用） */
+function GameplayEntryDialogs() {
+  const [exportTarget, setExportTarget] = useState<{ sessionId: number; includeHistory: boolean } | null>(null);
+  const [importOpen, setImportOpen] = useState(false);
+
+  useEffect(() => {
+    const onExport = (e: CustomEvent<{ sessionId: number; includeHistory: boolean }>) => {
+      setImportOpen(false);
+      setExportTarget(e.detail);
+    };
+    const onImport = () => {
+      setExportTarget(null);
+      setImportOpen(true);
+    };
+    window.addEventListener('th-gameplay-export', onExport as EventListener);
+    window.addEventListener('th-gameplay-import', onImport as EventListener);
+    return () => {
+      window.removeEventListener('th-gameplay-export', onExport as EventListener);
+      window.removeEventListener('th-gameplay-import', onImport as EventListener);
+    };
+  }, []);
+
+  return (
+    <>
+      {exportTarget && (
+        <GameplayExportModal
+          sessionId={exportTarget.sessionId}
+          defaultIncludeHistory={exportTarget.includeHistory}
+          onClose={() => setExportTarget(null)}
+        />
+      )}
+      {importOpen && <GameplayImportModal onClose={() => setImportOpen(false)} />}
+    </>
+  );
+}
+
+function SessionHeader({
+  session,
+  participants,
+}: {
+  session: NonNullable<ReturnType<typeof useStore.getState>['sessions'][number]>;
+  participants: ReturnType<typeof useStore.getState>['participants'][number];
+}) {
+  const npcs = useStore((s) => s.npcs);
+  const addToast = useStore((s) => s.addToast);
+  const deleteSession = useStore((s) => s.deleteSession);
+  const resetSessionConversation = useStore((s) => s.resetSessionConversation);
+  const t = useT();
+  const [showEdit, setShowEdit] = useState(false);
+  const [confirmReset, setConfirmReset] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [exportOpen, setExportOpen] = useState(false);
+  const [showWorkspace, setShowWorkspace] = useState(false);
+
+  const modeLabel = session.mode === 'STANDARD' ? t('header.modeStandard') : session.mode === 'NPC' ? t('header.modeNpc') : t('header.modeGroup');
+  const npcRef = session.associatedId ? npcs.find((n) => n.id === session.associatedId) : null;
+  const usesPublicWorkspace = session.mode === 'NPC' && npcRef?.isBuiltIn === true;
+  const groupNpcs = participants.filter((p) => p.kind === 'NPC').map((p) => npcs.find((n) => n.id === p.npcId)).filter(Boolean);
+  const groupMemberAvatars = (groupNpcs as NpcCharacter[]).slice(0, 4).map((n) => ({
+    name: n.name,
+    colorOrdinal: n.avatarColorOrdinal,
+    imageUrl: n.avatarDataUrl,
+  }));
+
+  return (
+    <div className="chat-header">
+      <SessionVisual mode={session.mode} npcName={npcRef?.name ?? undefined} hue={npcRef?.avatarColorOrdinal ?? 0} imageUrl={npcRef?.avatarDataUrl} members={session.mode === 'GROUP' ? groupMemberAvatars : undefined} size="lg" />
+      <div className="tinfo">
+        <div className="ttitle">{session.title}</div>
+        <div className="tsub">
+          <span className="tsub-mode">{modeLabel}</span>
+          {session.mode === 'GROUP' && (
+            <span className="tsub-members">
+              {groupNpcs.map((n) => n!.name).join(' · ')}
+            </span>
+          )}
+        </div>
+      </div>
+      <div className="chat-actions">
+        <button className="btn-ghost icon-tooltip" title={t(usesPublicWorkspace ? 'header.workspaceRootHint' : 'header.workspaceHint')} onClick={() => setShowWorkspace(true)}>
+          <Icon name="folder" size={17} />
+        </button>
+        <button className="btn-ghost icon-tooltip" title={t('header.editSessionTip')} onClick={() => setShowEdit(true)}>
+          <Icon name="pencil" size={17} />
+        </button>
+        <button className="btn-ghost icon-tooltip" title={t('header.resetSessionTip')} onClick={() => setConfirmReset(true)}>
+          <Icon name="refresh" size={17} />
+        </button>
+        <button className="btn-ghost icon-tooltip" title={t('header.exportGameplayTip')} onClick={() => setExportOpen(true)}>
+          <Icon name="share" size={17} />
+        </button>
+        <button className="btn-ghost icon-tooltip danger" title={t('header.deleteTip')} onClick={() => setConfirmDelete(true)}>
+          <Icon name="trash" size={17} />
+        </button>
+      </div>
+
+      {showEdit && <NewSessionMenu editingSession={session} onClose={() => setShowEdit(false)} />}
+
+      {showWorkspace && (
+        <WorkspaceFileManagerModal sessionId={session.id!} onClose={() => setShowWorkspace(false)} />
+      )}
+
+      {exportOpen && (
+        <GameplayExportModal
+          sessionId={session.id!}
+          defaultIncludeHistory={true}
+          onClose={() => setExportOpen(false)}
+        />
+      )}
+
+      {confirmReset && (
+        <Modal onClose={() => setConfirmReset(false)} width="min(400px, calc(100vw - 32px))">
+          <div className="modal-head">
+            <span style={{ fontWeight: 800, fontSize: 15 }}>{t('header.resetSessionTitle')}</span>
+            <button className="icon-btn" onClick={() => setConfirmReset(false)}><Icon name="x" /></button>
+          </div>
+          <div className="modal-body">
+            {t('header.resetSessionConfirm', { title: session.title })}
+          </div>
+          <div className="modal-foot">
+            <button className="btn" onClick={() => setConfirmReset(false)}>{t('common.cancel')}</button>
+            <button
+              className="btn btn-primary"
+              onClick={async () => {
+                await resetSessionConversation(session.id!);
+                setConfirmReset(false);
+                addToast(t('toast.sessionReset'));
+              }}
+            >
+              <Icon name="refresh" size={13} /> {t('header.resetSessionAction')}
+            </button>
+          </div>
+        </Modal>
+      )}
+
+      {confirmDelete && (
+        <Modal onClose={() => setConfirmDelete(false)} width="min(400px, calc(100vw - 32px))">
+          <div className="modal-head">
+            <span style={{ fontWeight: 800, fontSize: 15 }}>{t('header.deleteTitle')}</span>
+            <button className="icon-btn" onClick={() => setConfirmDelete(false)}><Icon name="x" /></button>
+          </div>
+          <div className="modal-body">
+            {t('header.deleteConfirm', { title: session.title })}
+          </div>
+          <div className="modal-foot">
+            <button className="btn" onClick={() => setConfirmDelete(false)}>{t('common.cancel')}</button>
+            <button
+              className="btn btn-danger"
+              onClick={async () => {
+                await deleteSession(session.id!);
+                setConfirmDelete(false);
+                addToast(t('toast.sessionDeleted'));
+              }}
+            >
+              <Icon name="trash" size={13} /> {t('common.delete')}
+            </button>
+          </div>
+        </Modal>
+      )}
+
+    </div>
+  );
+}

package/src/assets/tavern-handbook.md

@@ -0,0 +1,39 @@
+# Tavern Operations Handbook (Essentials)
+
+## Service Principles
+
+- **Understand before acting**: Confirm the goal, current state, constraints, and acceptance criteria before making changes. Do not modify content based on assumptions.
+- **Minimal yet complete**: Change only what is necessary to meet the requirement, while fixing issues directly caused by the change.
+- **State uncertainty clearly**: When information is insufficient, rules are unclear, or several reasonable options exist, state the assumptions and ask for a decision.
+
+## Standard Workflow
+
+1. **Clarify the requirement**
+   - Restate the outcome the guest wants to achieve.
+   - Identify inputs, outputs, scope, compatibility requirements, and completion criteria.
+   - If a key decision would substantially affect implementation, provide clear options and wait for a choice.
+
+2. **Understand the current state**
+   - Review the relevant characters, World Info entries, skill definitions, and configuration.
+   - Identify affected files, behaviors, and potential risks. Do not treat unverified assumptions as facts.
+
+3. **Plan the solution**
+   - Choose the smallest solution that works within the tavern's current capabilities.
+   - Define the required changes, expected behavior, and validation approach.
+   - When multiple approaches are reasonable, explain the trade-offs—cost, risk, maintainability, performance, and compatibility—and let the guest decide.
+
+4. **Implement and validate**
+   - Make precise changes only to relevant content; avoid incidental, unrelated changes.
+   - Run the smallest test or check that covers the change first, expanding validation only when needed.
+   - If validation fails, accurately report the failed command, relevant output, impact, and recommended next steps.
+
+5. **Close out: delivery summary**
+   - Briefly state what was completed, why it was done that way, and what was validated.
+   - Link relevant files or symbols and disclose anything not yet validated and any known limitations.
+
+## Common Scenarios and Considerations
+
+### Game Creation
+1. **Create the minimum number of skills**: Assess responsibilities against the user's needs. If one skill can accomplish the goal, do not split it into or add multiple redundant skills.
+2. **Document skill usage and workflows clearly**: In both World Info and the character persona, clearly record each skill's trigger conditions and usage steps so the character can invoke it as required.
+3. **Verify character skill equipment**: After creating or configuring a game, confirm that each relevant character has every skill required by the workflow. In particular, verify that relevant built-in skills are enabled.

package/src/components/AchievementModal.tsx

@@ -0,0 +1,158 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import type { AchievementDef } from '../core/achievements';
+import { useT, currentLocale } from '../core/i18n';
+import { idToKey } from '../core/strings';
+
+// ============================================================
+// 成就解锁庆祝弹窗（奖杯 + 撒花）
+// 全局单例：core 层解锁成就时通过 showAchievementUnlock 触发
+// ============================================================
+
+interface QueueItem {
+  id: number;
+  ach: AchievementDef;
+  total: number;
+}
+
+let seq = 0;
+let currentItem: QueueItem | null = null;
+const pendingQueue: QueueItem[] = [];
+const listeners = new Set<() => void>();
+
+function notify() {
+  listeners.forEach((l) => l());
+}
+
+/** 展示成就解锁弹窗（core 层调用；同一时刻只展示一个，其余排队） */
+export function showAchievementUnlock(ach: AchievementDef, total: number): void {
+  const item: QueueItem = { id: ++seq, ach, total };
+  if (currentItem) {
+    pendingQueue.push(item);
+    return;
+  }
+  currentItem = item;
+  notify();
+}
+
+function next(): void {
+  currentItem = pendingQueue.shift() ?? null;
+  notify();
+}
+
+const CONFETTI_COLORS = ['#ff5e7d', '#ffb84d', '#53d769', '#42a5f5', '#c56cf0', '#ffd166', '#7f9ad9'];
+
+interface ConfettiPiece {
+  id: number;
+  left: number; // vw
+  delay: number; // s
+  duration: number; // s
+  size: number; // px
+  color: string;
+  rotate: number;
+  drift: number;
+  round: boolean;
+}
+
+function makeConfetti(count: number): ConfettiPiece[] {
+  return Array.from({ length: count }, (_, i) => ({
+    id: i,
+    left: Math.random() * 100,
+    delay: Math.random() * 0.9 + 0.35,
+    duration: 2.6 + Math.random() * 1.8,
+    size: 6 + Math.random() * 7,
+    color: CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)],
+    rotate: Math.random() * 360,
+    drift: (Math.random() - 0.5) * 120,
+    round: Math.random() < 0.3,
+  }));
+}
+
+function AchievementCelebration() {
+  const [, force] = useState(0);
+  useEffect(() => {
+    listeners.add(() => force((n) => n + 1));
+    return () => {
+      listeners.delete(() => force((n) => n + 1));
+    };
+  }, []);
+
+  return currentItem ? <CelebrationOverlay key={currentItem.id} item={currentItem} /> : null;
+}
+
+function CelebrationOverlay({ item }: { item: QueueItem }) {
+  const t = useT();
+  const confetti = useMemo(() => makeConfetti(90), [item.id]);
+  const [leaving, setLeaving] = useState(false);
+  const closeTimer = useRef<number | null>(null);
+
+  const dismiss = (queueNext = true) => {
+    setLeaving(true);
+    window.setTimeout(() => {
+      if (queueNext) {
+        next();
+      } else {
+        // 关闭整个展示链（清空队列）
+        pendingQueue.length = 0;
+        currentItem = null;
+        next();
+      }
+    }, 260);
+  };
+
+  useEffect(() => {
+    closeTimer.current = window.setTimeout(() => dismiss(true), 5800);
+    return () => {
+      if (closeTimer.current != null) window.clearTimeout(closeTimer.current);
+    };
+  }, [item.id]);
+
+  const fmt = (n: number) => n.toLocaleString(currentLocale());
+
+  return createPortal(
+    <>
+      <div className="ach-overlay" onClick={() => dismiss(true)} />
+      <div className="ach-celebration">
+        <div className={`ach-rain ${leaving ? 'leave' : ''}`}>
+          {confetti.map((c) => (
+            <i
+              key={c.id}
+              className={c.round ? 'round' : ''}
+              style={{
+                left: `${c.left}vw`,
+                width: c.size,
+                height: c.round ? c.size : c.size * 1.45,
+                background: c.color,
+                animationDelay: `${c.delay}s`,
+                animationDuration: `${c.duration}s`,
+                ['--drift' as string]: `${c.drift}px`,
+                ['--rot' as string]: `${c.rotate}deg`,
+              }}
+            />
+          ))}
+        </div>
+        <div className={`ach-trophy ${leaving ? 'leave' : ''}`}>
+          <div className="ach-trophy-badge">{item.ach.icon}</div>
+          <div className="ach-trophy-glow" />
+        </div>
+        <div className={`ach-caption ${leaving ? 'leave' : ''}`}>
+          <div className="ach-caption-title">{t('achModal.title')}</div>
+          <div className="ach-caption-name">{t(`ach.${idToKey(item.ach.id)}.name`)}</div>
+          <div className="ach-caption-desc">
+            {t(`ach.${idToKey(item.ach.id)}.desc`)}
+            <br />
+            <span className="ach-caption-total">{t('achModal.total', { n: fmt(item.total) })}</span>
+          </div>
+          <button className="btn btn-sm" onClick={() => dismiss(true)}>
+            {t('achModal.accept')}
+          </button>
+        </div>
+      </div>
+    </>,
+    document.body
+  );
+}
+
+export function AchievementModal() {
+  return <AchievementCelebration />;
+}