tavern-harness 0.1.0

package/src/components/ConfirmationDialog.tsx

@@ -0,0 +1,56 @@
+import { useStore } from '../store/store';
+import { Icon } from './shared';
+import { useT } from '../core/i18n';
+import { prettyJson } from '../core/strings';
+
+// ============================================================
+// 工具确认门控弹窗（更新/删除类操作）
+// ============================================================
+
+export function ConfirmationDialog() {
+  const pending = useStore((s) => s.pendingConfirmation);
+  const resolve = useStore((s) => s.resolveConfirmation);
+  const t = useT();
+
+  if (!pending) return null;
+  const isLimit = pending.kind === 'limit';
+
+  const argsText = prettyJson(pending.argsJson);
+
+  return (
+    <>
+      <div className="overlay" />
+      <div className="modal-root">
+        <div className="modal card confirm fade-up">
+          <div className="modal-head">
+            <span style={{ fontWeight: 800, fontSize: 14, display: 'flex', alignItems: 'center', gap: 8 }}>
+              <Icon name="settings" size={15} /> {isLimit ? pending.title : t('confirm.title')}
+            </span>
+          </div>
+          <div className="modal-body" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+            {!isLimit && <div style={{ fontSize: 13, fontWeight: 700 }}>{t('confirm.tool')}<span className="mono" style={{ color: 'var(--primary)' }}>{pending.toolName}</span></div>}
+            {!pending.inlineCode && <pre className="confirm-args mono">{argsText}</pre>}
+            <div className={isLimit ? undefined : 'confirm-reason'}>
+              {!isLimit && <div className="confirm-reason-title">{pending.title}</div>}
+              <div style={{ fontSize: 13, color: 'var(--text-dim)', lineHeight: 1.6, whiteSpace: 'pre-line' }}>
+                {pending.inlineCode && <code className="confirm-inline-code">{pending.inlineCode}</code>}
+                {pending.message || (isLimit ? '' : t('confirm.modify'))}
+              </div>
+            </div>
+          </div>
+          <div className="modal-foot">
+            <button
+              className="btn"
+              onClick={() => resolve(false)}
+            >
+              {isLimit ? t('confirm.stop') : t('confirm.reject')}
+            </button>
+            <button className="btn btn-primary" onClick={() => resolve(true)}>
+              {isLimit ? t('confirm.continue') : t('confirm.allow')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/Dashboard.tsx

@@ -0,0 +1,180 @@
+import { useEffect, useMemo, useState } from 'react';
+import { createSession, useStore } from '../store/store';
+import { db } from '../db/database';
+import { Icon, MasonryGrid, SessionVisual } from './shared';
+import { NewSessionMenu } from './NewSessionMenu';
+import { useT, currentLocale } from '../core/i18n';
+import type { SessionMember } from './shared';
+import type { NpcCharacter } from '../types/models';
+
+// ============================================================
+// 仪表盘（无活动会话时的起始页）
+// ============================================================
+
+export function Dashboard() {
+  const npcs = useStore((s) => s.npcs);
+  const sessions = useStore((s) => s.sessions);
+  const t = useT();
+  const [showNew, setShowNew] = useState(false);
+
+  const startNpc = async (id: number) => {
+    const sid = await createSession('NPC', { associatedId: id });
+    await useStore.getState().refreshSessions();
+    useStore.getState().setActiveSession(sid);
+  };
+
+  // 群聊会话 → 参与者中的 NPC 角色（用于群头像拼贴，每个会话一次）
+  const [groupMembers, setGroupMembers] = useState<Record<number, NpcCharacter[]>>({});
+  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]);
+
+  // 与角色继续对话：最近按 updatedAt 排序的 3 个有实际内容的会话（最新在前）
+  const recentSessions = useMemo(() => {
+    return sessions
+      .filter((s) => s.mode !== 'STANDARD')
+      .sort((a, b) => b.updatedAt - a.updatedAt)
+      .slice(0, 3);
+  }, [sessions]);
+
+  // 会话缩略标题：使用最后一条消息的首行，截断到 42 字符
+  const sessionPreview = (s: (typeof sessions)[number]) => {
+    const text = s.lastMessage || (s.mode === 'GROUP' ? t('dash.groupSession') : t('dash.newSession'));
+    const line = text.trim().split('\n').find(Boolean) ?? '';
+    return line.length > 42 ? `${line.slice(0, 42)}…` : line;
+  };
+
+  // 会话相对时间（刚刚 / N 分钟前 / N 小时前 / N 天前），与界面语言一致
+  const sessionTime = (ts: number) => {
+    const diff = Date.now() - ts;
+    const min = Math.floor(diff / 60000);
+    const hour = Math.floor(diff / 3600000);
+    const day = Math.floor(diff / 86400000);
+    if (min < 1) return t('dash.timeJustNow');
+    if (min < 60) return t('dash.timeMinAgo', { n: min });
+    if (hour < 24) return t('dash.timeHourAgo', { n: hour });
+    if (day < 30) return t('dash.timeDayAgo', { n: day });
+    return new Date(ts).toLocaleDateString(currentLocale());
+  };
+
+  return (
+    <div className="dash-scroll">
+      <div className="dash">
+        <div className="dash-hero fade-up">
+          <h1>{t('dash.welcome')}</h1>
+          <p>
+            {t('dash.hero')}
+            <span className="dash-hero-accent">{t('dash.heroAccent')}</span>
+          </p>
+          <div className="actions">
+            <button className="btn btn-primary" onClick={() => setShowNew(true)}>
+              <Icon name="plus" size={14} /> {t('dash.newChat')}
+            </button>
+            <button
+              className="btn"
+              onClick={() => {
+                useStore.getState().setActiveView('characters');
+              }}
+            >
+              <Icon name="users" size={14} /> {t('dash.goCharacters')}
+            </button>
+            <a className="btn" href="https://rannichan.github.io/Tavern-Harness/wiki.html" target="_blank" rel="noreferrer">
+              <Icon name="book" size={14} /> {t('dash.openWiki')}
+            </a>
+          </div>
+        </div>
+
+        <div>
+          <span className="section-title">{t('dash.continue')}</span>
+          {recentSessions.length === 0 ? (
+            <div className="card empty-state">
+              <div className="big">🍺</div>
+              <span>{t('dash.noCharConv')}</span>
+            </div>
+          ) : (
+            <div className="recent-list">
+              {recentSessions.map((s) => {
+                const npc = npcs.find((n) => n.id === s.associatedId);
+                const members: SessionMember[] | undefined =
+                  s.mode === 'GROUP'
+                    ? (groupMembers[s.id!] ?? []).slice(0, 4).map((n) => ({
+                        name: n.name,
+                        colorOrdinal: n.avatarColorOrdinal,
+                        imageUrl: n.avatarDataUrl,
+                      }))
+                    : undefined;
+                return (
+                  <button
+                    key={s.id}
+                    className="recent-item"
+                    onClick={() => useStore.getState().setActiveSession(s.id!)}
+                  >
+                    <SessionVisual
+                      mode={s.mode}
+                      npcName={npc?.name}
+                      hue={npc?.avatarColorOrdinal}
+                      imageUrl={npc?.avatarDataUrl}
+                      members={members}
+                    />
+                    <div className="recent-meta">
+                      <div className="recent-title">
+                        <span className="recent-title-text">{s.title}</span>
+                        <span className="recent-time">{sessionTime(s.updatedAt)}</span>
+                      </div>
+                      <div className="recent-preview">{sessionPreview(s)}</div>
+                    </div>
+                    <span className="recent-go">
+                      <Icon name="send" size={13} />
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        <div>
+          <span className="section-title">{t('dash.regulars')}</span>
+          <MasonryGrid>
+            {npcs.map((n) => (
+              <div key={n.id} className="char-card">
+                <div className="cname">
+                  <span className="avatar xs" style={{ background: `linear-gradient(135deg, var(--grad-from), var(--grad-to))` }}>
+                    {n.name.slice(0, 1)}
+                  </span>
+                  {n.name}
+                  {n.isBuiltIn && <span className="tag">{t('common.builtin')}</span>}
+                </div>
+                <div className="cgreet">{n.greeting}</div>
+                <div className="cactions">
+                  <button className="btn btn-sm btn-primary" onClick={() => startNpc(n.id!)}>{t('dash.startChat')}</button>
+                </div>
+              </div>
+            ))}
+          </MasonryGrid>
+        </div>
+      </div>
+
+      {showNew && <NewSessionMenu onClose={() => setShowNew(false)} />}
+    </div>
+  );
+}

package/src/components/DeleteConfirmDialog.tsx

@@ -0,0 +1,48 @@
+import { Icon } from './shared';
+import { Modal } from './shared';
+import { useT } from '../core/i18n';
+
+// ============================================================
+// 通用删除确认弹窗（与对话删除弹窗样式一致）
+// 用法：把「待删除项」放进 state，渲染本组件，onConfirm 里执行删除
+// ============================================================
+
+export function DeleteConfirmDialog({
+  title,
+  itemName,
+  onCancel,
+  onConfirm,
+  dangerText,
+}: {
+  title: string;
+  itemName: string;
+  onCancel: () => void;
+  onConfirm: () => void | Promise<void>;
+  dangerText?: string;
+}) {
+  const t = useT();
+  const danger = dangerText ?? t('common.delete');
+  return (
+    <Modal onClose={onCancel} width="min(400px, calc(100vw - 32px))">
+      <div className="modal-head">
+        <span style={{ fontWeight: 800, fontSize: 15 }}>{title}</span>
+        <button className="icon-btn" onClick={onCancel}><Icon name="x" /></button>
+      </div>
+      <div className="modal-body">
+        {t('common.confirmDelete', { name: itemName })}
+      </div>
+      <div className="modal-foot">
+        <button className="btn" onClick={onCancel}>{t('common.cancel')}</button>
+        <button
+          className="btn btn-danger"
+          onClick={async () => {
+            await onConfirm();
+            onCancel();
+          }}
+        >
+          <Icon name="trash" size={13} /> {danger}
+        </button>
+      </div>
+    </Modal>
+  );
+}