@baimingtao/lbs-agent 1.0.0

package/interfaces/web/frontend/src/components/RichEditor.tsx

@@ -0,0 +1,129 @@
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Placeholder from '@tiptap/extension-placeholder';
+import Link from '@tiptap/extension-link';
+import Image from '@tiptap/extension-image';
+import TextAlign from '@tiptap/extension-text-align';
+import Underline from '@tiptap/extension-underline';
+import { TextStyle } from '@tiptap/extension-text-style';
+import Color from '@tiptap/extension-color';
+import Highlight from '@tiptap/extension-highlight';
+import TaskList from '@tiptap/extension-task-list';
+import TaskItem from '@tiptap/extension-task-item';
+import { Table } from '@tiptap/extension-table';
+import TableRow from '@tiptap/extension-table-row';
+import TableCell from '@tiptap/extension-table-cell';
+import TableHeader from '@tiptap/extension-table-header';
+
+interface Props {
+  value: string;
+  onChange: (html: string) => void;
+  placeholder?: string;
+}
+
+export function RichEditor({ value, onChange, placeholder = '输入内容…' }: Props) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Placeholder.configure({ placeholder }),
+      Underline,
+      Link.configure({
+        openOnClick: false,
+        HTMLAttributes: { class: 'tiptap-link' },
+      }),
+      Image.configure({ HTMLAttributes: { class: 'tiptap-image' } }),
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+      TextStyle,
+      Color,
+      Highlight.configure({ multicolor: true }),
+      TaskList,
+      TaskItem.configure({ nested: true }),
+      Table.configure({ resizable: true }),
+      TableRow,
+      TableHeader,
+      TableCell,
+    ],
+    content: value,
+    onUpdate: ({ editor }) => {
+      onChange(editor.getHTML());
+    },
+    editorProps: {
+      attributes: {
+        class: 'tiptap-content',
+      },
+    },
+  });
+
+  if (!editor) return null;
+
+  const Btn = ({ onClick, active, children, title }: { onClick: () => void; active?: boolean; children: React.ReactNode; title: string }) => (
+    <button type="button" onMouseDown={e => { e.preventDefault(); onClick(); }} title={title}
+      className={active ? 'is-active' : ''}>{children}</button>
+  );
+
+  return (
+    <div className="tiptap-wrapper">
+      {/* Toolbar Row 1: text formatting */}
+      <div className="tiptap-toolbar">
+        <Btn title="加粗" active={editor.isActive('bold')} onClick={() => editor.chain().focus().toggleBold().run()}><b>B</b></Btn>
+        <Btn title="斜体" active={editor.isActive('italic')} onClick={() => editor.chain().focus().toggleItalic().run()}><i style={{ fontStyle: 'italic' }}>I</i></Btn>
+        <Btn title="下划线" active={editor.isActive('underline')} onClick={() => editor.chain().focus().toggleUnderline().run()}><u>U</u></Btn>
+        <Btn title="删除线" active={editor.isActive('strike')} onClick={() => editor.chain().focus().toggleStrike().run()}><s>S</s></Btn>
+        <Btn title="高亮" active={editor.isActive('highlight')} onClick={() => editor.chain().focus().toggleHighlight().run()}>🔤</Btn>
+
+        <span className="tiptap-divider" />
+
+        {/* Headings */}
+        <Btn title="标题1" active={editor.isActive('heading', { level: 1 })} onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}>H1</Btn>
+        <Btn title="标题2" active={editor.isActive('heading', { level: 2 })} onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}>H2</Btn>
+        <Btn title="标题3" active={editor.isActive('heading', { level: 3 })} onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}>H3</Btn>
+
+        <span className="tiptap-divider" />
+
+        {/* Lists */}
+        <Btn title="无序列表" active={editor.isActive('bulletList')} onClick={() => editor.chain().focus().toggleBulletList().run()}>• 列表</Btn>
+        <Btn title="有序列表" active={editor.isActive('orderedList')} onClick={() => editor.chain().focus().toggleOrderedList().run()}>1. 列表</Btn>
+        <Btn title="任务列表" active={editor.isActive('taskList')} onClick={() => editor.chain().focus().toggleTaskList().run()}>☑ 任务</Btn>
+
+        <span className="tiptap-divider" />
+
+        {/* Blocks */}
+        <Btn title="引用" active={editor.isActive('blockquote')} onClick={() => editor.chain().focus().toggleBlockquote().run()}>❝</Btn>
+        <Btn title="代码块" active={editor.isActive('codeBlock')} onClick={() => editor.chain().focus().toggleCodeBlock().run()}>{'</>'}</Btn>
+        <Btn title="分割线" onClick={() => editor.chain().focus().setHorizontalRule().run()}>―</Btn>
+
+        <span className="tiptap-divider" />
+
+        {/* Table */}
+        <Btn title="插入表格" onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}>▦ 表格</Btn>
+
+        <span className="tiptap-divider" />
+
+        {/* Alignment */}
+        <Btn title="左对齐" active={editor.isActive({ textAlign: 'left' })} onClick={() => editor.chain().focus().setTextAlign('left').run()}>⬅</Btn>
+        <Btn title="居中" active={editor.isActive({ textAlign: 'center' })} onClick={() => editor.chain().focus().setTextAlign('center').run()}>↔</Btn>
+        <Btn title="右对齐" active={editor.isActive({ textAlign: 'right' })} onClick={() => editor.chain().focus().setTextAlign('right').run()}>➡</Btn>
+
+        <span className="tiptap-divider" />
+
+        {/* Link & Image */}
+        <Btn title="链接" active={editor.isActive('link')} onClick={() => {
+          const url = window.prompt('链接 URL');
+          if (url) editor.chain().focus().setLink({ href: url }).run();
+        }}>🔗</Btn>
+        <Btn title="图片" onClick={() => {
+          const url = window.prompt('图片 URL');
+          if (url) editor.chain().focus().setImage({ src: url }).run();
+        }}>🖼</Btn>
+
+        <span className="tiptap-divider" />
+
+        {/* Undo / Redo */}
+        <Btn title="撤销" onClick={() => editor.chain().focus().undo().run()}>↶</Btn>
+        <Btn title="重做" onClick={() => editor.chain().focus().redo().run()}>↷</Btn>
+      </div>
+
+      <EditorContent editor={editor} />
+    </div>
+  );
+}

package/interfaces/web/frontend/src/components/SakuraParticles.tsx

@@ -0,0 +1,70 @@
+import { memo, useRef, useEffect } from 'react';
+
+function SakuraParticlesBase() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const resize = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    };
+    resize();
+    window.addEventListener('resize', resize);
+
+    const particles = Array.from({ length: 35 }, () => ({
+      x: Math.random() * canvas.width,
+      y: Math.random() * canvas.height,
+      size: Math.random() * 8 + 6,
+      speedY: Math.random() * 0.5 + 0.3,
+      speedX: Math.random() * 0.4 - 0.2,
+      rotation: Math.random() * Math.PI * 2,
+      rotSpeed: (Math.random() - 0.5) * 0.02,
+      opacity: Math.random() * 0.3 + 0.15,
+    }));
+
+    let raf = 0;
+    const drawPetal = (x: number, y: number, size: number, rotation: number, opacity: number) => {
+      ctx.save();
+      ctx.translate(x, y);
+      ctx.rotate(rotation);
+      ctx.globalAlpha = opacity;
+      ctx.fillStyle = '#FFB7C5';
+      ctx.beginPath();
+      ctx.moveTo(0, 0);
+      ctx.bezierCurveTo(size / 2, -size / 3, size, 0, 0, size);
+      ctx.bezierCurveTo(-size, 0, -size / 2, -size / 3, 0, 0);
+      ctx.fill();
+      ctx.restore();
+    };
+
+    const animate = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      particles.forEach(p => {
+        p.y += p.speedY;
+        p.x += p.speedX + Math.sin(p.y * 0.01) * 0.3;
+        p.rotation += p.rotSpeed;
+        if (p.y > canvas.height + 20) {
+          p.y = -20;
+          p.x = Math.random() * canvas.width;
+        }
+        drawPetal(p.x, p.y, p.size, p.rotation, p.opacity);
+      });
+      raf = requestAnimationFrame(animate);
+    };
+    animate();
+
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener('resize', resize);
+    };
+  }, []);
+
+  return <canvas ref={canvasRef} className="fixed top-0 left-0 w-full h-full pointer-events-none z-0 opacity-50" />;
+}
+
+export const SakuraParticles = memo(SakuraParticlesBase);

package/interfaces/web/frontend/src/components/SidebarLeft.tsx

@@ -0,0 +1,100 @@
+import { memo, useState } from 'react';
+import type { CommandGroupItem } from '../types';
+import { useTheme } from '../contexts/useTheme';
+
+interface Props {
+  groups: CommandGroupItem[];
+  selected: string;
+  onSelect: (name: string) => void;
+  loading?: boolean;
+}
+
+function SidebarLeftBase({ groups, selected, onSelect, loading }: Props) {
+  const { theme, toggleTheme, lang, toggleLang, t } = useTheme();
+  const [search, setSearch] = useState('');
+  const keyword = search.trim().toLowerCase();
+  const visibleCount = groups.reduce((sum, group) => sum + group.commands.filter(command => !keyword || `${command.name} ${command.label} ${command.description}`.toLowerCase().includes(keyword)).length, 0);
+
+  return (
+    <aside className="relative z-10 h-screen w-[280px] min-w-[280px] border-r border-white/50 bg-cream/62 backdrop-blur-2xl flex flex-col overflow-hidden">
+      <div className="hero-surface mx-4 mt-4 mb-4 shrink-0 rounded-[28px] p-4">
+        <div className="flex items-center gap-3">
+          <span className="grid h-10 w-10 shrink-0 place-items-center rounded-[16px] bg-gradient-to-br from-sakura to-mint text-xl shadow-glow-sakura ring-1 ring-white/70">🐾</span>
+          <div className="min-w-0 flex-1">
+            <div className="font-display text-lg leading-tight text-berry">LBS Agent</div>
+            <div className="text-[10px] text-berry/45">{t('brand.subtitle')}</div>
+          </div>
+        </div>
+        <div className="mt-3 flex items-center gap-2">
+          {/* Theme toggle */}
+          <button
+            onClick={toggleTheme}
+            className="flex h-8 w-8 items-center justify-center rounded-xl bg-white/55 text-sm transition hover:scale-110 hover:bg-white/80"
+            title={theme === 'light' ? 'Switch to dark' : 'Switch to light'}
+          >
+            {theme === 'light' ? '🌙' : '☀️'}
+          </button>
+          {/* Lang toggle */}
+          <button
+            onClick={toggleLang}
+            className="flex h-8 px-2.5 items-center justify-center rounded-xl bg-white/55 text-[10px] font-bold text-berry/70 transition hover:scale-105 hover:bg-white/80"
+            title="Toggle language"
+          >
+            {lang === 'zh' ? '中' : 'EN'}
+          </button>
+          <div className="ml-auto hidden gap-1.5 sm:flex">
+            <span className="hero-chip justify-center">Chat</span>
+            <span className="hero-chip justify-center">Tools</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="mx-4 mb-4 relative shrink-0">
+        <span className="absolute left-3 top-1/2 -translate-y-1/2 text-sm opacity-50">⌕</span>
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder={t('nav.search')}
+          aria-label="搜索命令"
+          className="pretty-input pl-9 shadow-[0_8px_22px_rgba(43,24,40,0.045)]"
+        />
+        {keyword && <span className="absolute right-3 top-1/2 -translate-y-1/2 rounded-full bg-mint/20 px-2 py-0.5 text-[9px] font-bold text-mint-dark">{visibleCount}</span>}
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto px-3 pb-4">
+        {loading && <div className="hero-card px-3 py-4 text-[12px] text-berry/45">{t('nav.loading')}</div>}
+        {!loading && groups.map(group => {
+          const filtered = group.commands.filter(command =>
+            !keyword || `${command.name} ${command.label} ${command.description}`.toLowerCase().includes(keyword),
+          );
+          if (!filtered.length) return null;
+          return (
+            <section key={group.key} className="hero-float-in">
+              <div className="font-mono text-[10px] font-bold uppercase tracking-widest text-berry/40 px-3 pt-3 pb-2">{group.title}</div>
+              {filtered.map((command, index) => (
+                <button
+                  type="button"
+                  key={command.name}
+                  className={`cmd-pill group w-full text-left ${selected === command.name ? 'active' : ''}`}
+                  onClick={() => onSelect(command.name)}
+                  title={command.description}
+                >
+                  <span className="grid h-8 w-8 place-items-center rounded-xl bg-white/55 text-base shadow-[inset_0_1px_0_rgba(255,255,255,0.8)] transition group-hover:scale-105">{command.icon}</span>
+                  <span className="text-[13px] flex-1">
+                    <span className="block font-semibold">{command.label}</span>
+                    <span className="block font-mono text-[9px] opacity-55">{command.name}</span>
+                  </span>
+                  {index < 2 && <span className="hero-kbd opacity-70">⌘{index === 0 ? 'N' : 'E'}</span>}
+                </button>
+              ))}
+            </section>
+          );
+        })}
+        {!loading && groups.length === 0 && <div className="hero-card px-3 py-4 text-[12px] text-honey">{t('nav.loadFailed')}</div>}
+      </div>
+    </aside>
+  );
+}
+
+export const SidebarLeft = memo(SidebarLeftBase);

package/interfaces/web/frontend/src/components/SidebarRight.tsx

@@ -0,0 +1,333 @@
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import type { AgentOption, CronItem, ModelHealth, Session, SoulProfile, Usage } from '../types';
+import { AgentAvatar } from './AgentAvatar';
+import { NiceSelect } from './NiceSelect';
+import { DateTimePicker } from './DateTimePicker';
+
+interface Props {
+  agents: AgentOption[];
+  models: ModelHealth[];
+  sessions: Session[];
+  cron: CronItem[];
+  souls: SoulProfile[];
+  usage: Usage;
+  currentSoul: string;
+  selectedAgent: string;
+  onAgentChange: (name: string) => void;
+  onRefresh: () => Promise<void>;
+  onSessionSelect: (id: string) => void;
+  onSessionChange?: (id: string) => void;
+  onSessionDelete?: (id: string) => Promise<void>;
+}
+
+import { API_BASE } from '../api/client';
+
+async function request(path: string, init?: RequestInit) {
+  const response = await fetch(`${API_BASE}${path}`, { headers: { 'Content-Type': 'application/json' }, ...init });
+  if (!response.ok) {
+    const data = await response.json().catch(() => ({}));
+    throw new Error(data.detail || `请求失败 (${response.status})`);
+  }
+  return response.json();
+}
+
+type TabKey = 'sessions' | 'model' | 'cron' | 'role';
+
+export const SidebarRight = memo(function SidebarRight({ agents, models, sessions, cron, souls, usage, currentSoul, selectedAgent, onAgentChange, onRefresh, onSessionSelect, onSessionChange, onSessionDelete }: Props) {
+  const [tab, setTab] = useState<TabKey>('sessions');
+  const [notice, setNotice] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [cronForm, setCronForm] = useState({ name: '', schedule: '0 9 * * *', scheduleType: 'daily', startTime: '', endTime: '', task: '', agent: selectedAgent });
+  const [agentBinding, setAgentBinding] = useState({ provider: '', model: '' });
+  const [sessionLimit, setSessionLimit] = useState(50);
+  const sessionSentinelRef = useRef<HTMLDivElement | null>(null);
+
+  const selected = agents.find(a => a.name === selectedAgent);
+  const defaultModel = models.find(m => m.isDefault);
+  const providerNames = useMemo(() => Array.from(new Set(models.map(m => m.provider))), [models]);
+  const modelsByProvider = useMemo(() => {
+    const map: Record<string, string[]> = {};
+    for (const item of models) {
+      if (!map[item.provider]) map[item.provider] = [];
+      if (!map[item.provider].includes(item.name)) map[item.provider].push(item.name);
+    }
+    return map;
+  }, [models]);
+
+  useEffect(() => { setCronForm(v => ({ ...v, agent: selectedAgent })); }, [selectedAgent]);
+  useEffect(() => {
+    setAgentBinding({ provider: selected?.provider || '', model: selected?.model || '' });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedAgent]);
+  useEffect(() => {
+    if (tab !== 'sessions' || sessionLimit >= sessions.length) return;
+    const node = sessionSentinelRef.current;
+    if (!node) return;
+    const observer = new IntersectionObserver(entries => {
+      if (entries.some(entry => entry.isIntersecting)) setSessionLimit(limit => Math.min(limit + 50, sessions.length));
+    }, { rootMargin: '160px' });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [tab, sessionLimit, sessions.length]);
+
+  const act = async (work: () => Promise<unknown>, ok: string) => {
+    setBusy(true); setNotice('');
+    try { await work(); await onRefresh(); setNotice(ok); }
+    catch (e) { setNotice(e instanceof Error ? e.message : '操作失败'); }
+    finally { setBusy(false); }
+  };
+
+  const switchDefaultModel = (value: string) => {
+    const [provider, model] = value.split('::');
+    return act(() => request('/models/default', { method: 'POST', body: JSON.stringify({ provider, model }) }), `默认模型：${model}`);
+  };
+  const saveAgentBinding = async () => {
+    if (!agentBinding.provider || !agentBinding.model) return;
+    await act(
+      () => request(`/agents/${selectedAgent}/model`, { method: 'POST', body: JSON.stringify(agentBinding) }),
+      `已保存：${agentBinding.model}`,
+    );
+  };
+  const createCron = () => {
+    let cronSchedule = cronForm.schedule;
+    if (cronForm.scheduleType !== 'custom' && cronForm.startTime) {
+      const dt = new Date(cronForm.startTime);
+      const min = dt.getMinutes();
+      const hour = dt.getHours();
+      const day = dt.getDate();
+      const weekday = dt.getDay();
+      switch (cronForm.scheduleType) {
+        case 'daily': cronSchedule = `${min} ${hour} * * *`; break;
+        case 'workday': cronSchedule = `${min} ${hour} * * 1-5`; break;
+        case 'weekly': cronSchedule = `${min} ${hour} * * ${weekday || 0}`; break;
+        case 'monthly': cronSchedule = `${min} ${hour} ${day} * *`; break;
+        case 'once': cronSchedule = `${min} ${hour} ${day} ${dt.getMonth() + 1} *`; break;
+      }
+    }
+    const payload = { name: cronForm.name, schedule: cronSchedule, task: cronForm.task, agent: cronForm.agent };
+    return act(() => request('/cron', { method: 'POST', body: JSON.stringify(payload) }), '定时任务已创建').then(() => setCronForm(v => ({ ...v, name: '', task: '' })));
+  };
+  const cronAction = (id: string, action: string) => act(() => request(`/cron/${id}/${action}`, { method: 'POST' }), action === 'remove' ? '已删除' : '已更新');
+  const switchSoul = (name: string) => act(() => request(`/soul/switch?name=${encodeURIComponent(name)}`, { method: 'POST' }), `已切换：${name}`);
+
+  const tabs: { key: TabKey; label: string; badge?: string }[] = [
+    { key: 'sessions', label: '会话', badge: sessions.length ? `${sessions.length}` : undefined },
+    { key: 'model', label: '模型' },
+    { key: 'cron', label: 'Cron', badge: cron.length ? `${cron.length}` : undefined },
+    { key: 'role', label: '角色' },
+  ];
+
+  const visibleSessions = sessions.slice(0, sessionLimit);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<Session[] | null>(null);
+  const displayedSessions = searchResults ?? visibleSessions;
+
+  const handleSearch = async (q: string) => {
+    setSearchQuery(q);
+    if (!q.trim()) { setSearchResults(null); return; }
+    try {
+      const res = await fetch(`${API_BASE}/sessions?q=${encodeURIComponent(q)}`, { headers: { 'Content-Type': 'application/json' } });
+      if (res.ok) {
+        const data = await res.json();
+        setSearchResults((data.sessions || []).map((item: any) => ({
+          name: item.title || item.task || item.agent_name || '未命名会话',
+          title: item.title, status: item.status || (item.success ? 'completed' : 'error'),
+          statusLabel: item.status === 'running' ? '运行中' : item.success ? '已完成' : '失败',
+          id: item.session_id, createdAt: item.created_at, updatedAt: item.updated_at,
+          metrics: '',
+        })));
+      }
+    } catch { /* ignore */ }
+  };
+
+  return (
+    <aside className="hidden w-[320px] min-w-[320px] overflow-hidden border-l border-white/50 bg-cream/62 backdrop-blur-2xl lg:flex lg:flex-col">
+      {/* Tab bar */}
+      <div className="shrink-0 p-3">
+        <div className="flex rounded-full bg-white/60 p-1 ring-1 ring-sakura/25">
+          {tabs.map(t => (
+            <button key={t.key}
+              className={`flex-1 rounded-full px-2 py-1.5 text-[10px] font-bold transition ${tab === t.key ? 'bg-gradient-to-r from-sakura to-mint text-white shadow-sm' : 'text-berry/55'}`}
+              onClick={() => setTab(t.key)}
+            >
+              {t.label}{t.badge ? ` ${t.badge}` : ''}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {notice && <div className={`mx-3 mb-2 rounded-xl px-3 py-2 text-[11px] ${notice.includes('失败') || notice.includes('不存在') ? 'bg-honey/10 text-honey' : 'bg-mint/10 text-mint-dark'}`}>{notice}</div>}
+
+      {/* Tab content — scrollable */}
+      <div className="min-h-0 flex-1 overflow-y-auto px-3 pb-4">
+
+        {tab === 'sessions' && (
+          <div className="space-y-1.5">
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={e => void handleSearch(e.target.value)}
+              placeholder="搜索会话..."
+              className="mb-2 w-full rounded-xl border border-sakura/25 bg-white/70 px-3 py-1.5 text-[11px] text-berry outline-none placeholder:text-berry/30 focus:border-mint/50"
+            />
+            {displayedSessions.map(s => (
+              <div key={s.id} className="group flex w-full items-center gap-2 rounded-xl border border-sakura/25 bg-white/60 px-2.5 py-2 text-left transition hover:border-mint/50">
+                <button onClick={() => { onSessionSelect(s.id); onSessionChange?.(s.id); }} className="flex min-w-0 flex-1 items-center gap-2">
+                  <AgentAvatar name={s.name} size={28} />
+                  <span className="min-w-0 flex-1">
+                    <b className="block truncate text-[11px] text-berry/80">{s.name}</b>
+                    <span className="mt-0.5 block text-[9px] text-berry/40">{s.statusLabel} · {s.metrics}</span>
+                  </span>
+                </button>
+                {onSessionDelete && (
+                  <button onClick={() => onSessionDelete(s.id)} title="删除会话"
+                    className="shrink-0 rounded-lg px-1.5 py-1 text-[11px] text-berry/20 opacity-0 transition hover:bg-honey/10 hover:text-honey group-hover:opacity-100">
+                    ✕
+                  </button>
+                )}
+              </div>
+            ))}
+            {sessionLimit < sessions.length && <div ref={sessionSentinelRef} className="h-2" aria-hidden="true" />}
+            {!sessions.length && <p className="py-8 text-center text-[11px] text-berry/40">暂无会话</p>}
+          </div>
+        )}
+
+        {tab === 'model' && (
+          <div className="space-y-3">
+            {/* Usage inline */}
+            <div className="flex items-center justify-between rounded-xl bg-white/60 px-3 py-2 text-[10px] text-berry/55">
+              <span>输入 <b className="text-berry">{(Number(usage.input) || 0).toFixed(1)}k</b></span>
+              <span>输出 <b className="text-berry">{(Number(usage.output) || 0).toFixed(1)}k</b></span>
+              <span>缓存 <b className="text-berry">{(Number(usage.cache) || 0).toFixed(1)}k</b></span>
+              <span className="font-bold text-violet">${Number(usage.cost || 0).toFixed(5)}</span>
+            </div>
+
+            {/* Default model switch */}
+            <div className="rounded-xl bg-white/60 p-3">
+              <div className="mb-2 text-[10px] font-bold text-berry/60">默认模型 <span className="ml-1 font-mono text-violet">{defaultModel?.provider || ''}</span></div>
+              <NiceSelect
+                value={defaultModel ? `${defaultModel.provider}::${defaultModel.name}` : ''}
+                options={models.map(m => ({ value: `${m.provider}::${m.name}`, label: m.name, hint: m.provider }))}
+                onChange={switchDefaultModel}
+                disabled={busy}
+              />
+              <div className="mt-2 space-y-0.5">
+                {models.filter(m => m.provider === (defaultModel?.provider || '')).slice(0, 6).map(m => (
+                  <div key={`${m.provider}-${m.name}`} className="flex items-center justify-between text-[10px]">
+                    <span className="flex items-center gap-1.5 text-berry/60"><i className={`h-1.5 w-1.5 rounded-full ${m.health === 'warn' ? 'bg-honey' : 'bg-mint-dark'}`} />{m.name}</span>
+                    <span className="text-berry/35">{m.isDefault ? '默认' : m.statusLabel}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Agent binding */}
+            <div className="rounded-xl bg-white/60 p-3">
+              <div className="mb-2 text-[10px] font-bold text-berry/60">Agent 模型 <span className="ml-1 font-mono text-violet">{selected?.displayName || ''}</span></div>
+              <NiceSelect
+                className="mb-2"
+                value={selectedAgent}
+                options={agents.map(a => ({ value: a.name, label: a.displayName }))}
+                onChange={onAgentChange}
+                disabled={busy}
+              />
+              <div className="space-y-2">
+                <NiceSelect
+                  value={agentBinding.provider}
+                  placeholder="供应商"
+                  options={providerNames.map(p => ({ value: p, label: p }))}
+                  onChange={val => setAgentBinding({ provider: val, model: (modelsByProvider[val] || [])[0] || '' })}
+                  disabled={busy || providerNames.length === 0}
+                />
+                <NiceSelect
+                  value={agentBinding.model}
+                  placeholder="模型"
+                  options={(modelsByProvider[agentBinding.provider] || []).map(m => ({ value: m, label: m }))}
+                  onChange={val => setAgentBinding(c => ({ ...c, model: val }))}
+                  disabled={busy || !agentBinding.provider}
+                />
+                <button className="hero-btn w-full py-2 text-xs font-bold disabled:opacity-40"
+                  disabled={busy || !agentBinding.provider || !agentBinding.model}
+                  onClick={() => void saveAgentBinding()}>
+                  {busy ? '保存中…' : '保存'}
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {tab === 'cron' && (
+          <div className="space-y-3">
+            <div className="rounded-xl bg-white/60 p-3">
+              <div className="mb-2 text-[10px] font-bold text-berry/60">新建定时任务</div>
+              <div className="space-y-2">
+                <input className="pretty-input" placeholder="任务名称" value={cronForm.name} onChange={e => setCronForm({ ...cronForm, name: e.target.value })} />
+                <NiceSelect
+                  value={cronForm.agent}
+                  options={agents.map(a => ({ value: a.name, label: a.displayName }))}
+                  onChange={val => setCronForm({ ...cronForm, agent: val })}
+                />
+                <div>
+                  <div className="mb-1 text-[9px] font-semibold text-berry/40">周期</div>
+                  <NiceSelect
+                    value={cronForm.scheduleType}
+                    options={[
+                      { value: 'daily', label: '每天' },
+                      { value: 'workday', label: '工作日' },
+                      { value: 'weekly', label: '每周' },
+                      { value: 'monthly', label: '每月' },
+                      { value: 'once', label: '仅一次' },
+                      { value: 'custom', label: '自定义 (Cron)' },
+                    ]}
+                    onChange={val => setCronForm({ ...cronForm, scheduleType: val })}
+                  />
+                </div>
+                {cronForm.scheduleType === 'custom' && (
+                  <input className="pretty-input font-mono" placeholder="0 9 * * * / 30m / every 2h" value={cronForm.schedule} onChange={e => setCronForm({ ...cronForm, schedule: e.target.value })} />
+                )}
+                <div className="space-y-2">
+                    <DateTimePicker label="开始时间" value={cronForm.startTime} onChange={val => setCronForm({ ...cronForm, startTime: val })} placeholder="选择开始时间" />
+                    <DateTimePicker label="结束时间（可选）" value={cronForm.endTime} onChange={val => setCronForm({ ...cronForm, endTime: val })} placeholder="不选则永久" />
+                  </div>
+                <textarea className="pretty-input min-h-16 resize-y" placeholder="定时执行的任务描述" value={cronForm.task} onChange={e => setCronForm({ ...cronForm, task: e.target.value })} />
+                <button className="hero-btn w-full py-2 text-xs font-bold" disabled={busy || !cronForm.name.trim() || !cronForm.task.trim()} onClick={createCron}>{busy ? '保存中…' : '创建任务'}</button>
+              </div>
+            </div>
+            {cron.length > 0 && (
+              <div className="space-y-2">
+                {cron.map(job => (
+                  <div key={job.jobId || job.name} className="rounded-xl border border-sakura/25 bg-white/60 p-2.5">
+                    <div className="flex items-center justify-between">
+                      <b className="text-[11px] text-berry">{job.name}</b>
+                      <span className={`text-[9px] ${job.enabled ? 'text-mint-dark' : 'text-berry/40'}`}>{job.enabled ? '运行中' : '已暂停'}</span>
+                    </div>
+                    <p className="mt-0.5 font-mono text-[9px] text-violet">{job.schedule}</p>
+                    <p className="mt-0.5 line-clamp-2 text-[10px] text-berry/50">{job.task || job.agentName}</p>
+                    <div className="mt-1.5 flex gap-1">
+                      <button onClick={() => cronAction(job.jobId, job.enabled ? 'pause' : 'resume')} className="rounded-lg bg-sakura/15 px-2 py-0.5 text-[9px] font-semibold text-berry/65 hover:bg-sakura/25">{job.enabled ? '暂停' : '恢复'}</button>
+                      <button onClick={() => cronAction(job.jobId, 'trigger')} className="rounded-lg bg-sakura/15 px-2 py-0.5 text-[9px] font-semibold text-berry/65 hover:bg-sakura/25">立即运行</button>
+                      <button onClick={() => cronAction(job.jobId, 'remove')} className="rounded-lg bg-honey/15 px-2 py-0.5 text-[9px] font-semibold text-honey hover:bg-honey/25">删除</button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        {tab === 'role' && (
+          <div className="space-y-1.5">
+            {souls.map(s => (
+              <button key={s.name} disabled={busy} onClick={() => switchSoul(s.name)}
+                className={`w-full rounded-xl border px-3 py-2.5 text-left text-[11px] transition ${s.name === currentSoul ? 'border-mint bg-mint/15 text-mint-dark' : 'border-sakura/25 bg-white/60 text-berry/65 hover:border-mint/50'}`}>
+                <b className="block truncate">{s.name}</b>
+                <span className="mt-0.5 block truncate text-[9px] opacity-60">{s.desc}</span>
+              </button>
+            ))}
+            {!souls.length && <p className="py-8 text-center text-[11px] text-berry/40">暂无角色</p>}
+          </div>
+        )}
+      </div>
+    </aside>
+  );
+});

package/interfaces/web/frontend/src/components/Toggle.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+
+interface Props {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  label?: string;
+  disabled?: boolean;
+  children?: ReactNode;
+}
+
+export function Toggle({ checked, onChange, label, disabled, children }: Props) {
+  return (
+    <label className={`toggle-switch ${disabled ? 'opacity-60' : ''}`}>
+      <input type="checkbox" checked={checked} disabled={disabled} onChange={e => onChange(e.target.checked)} />
+      <span className="toggle-track" />
+      <span className="toggle-label">{label || children}</span>
+    </label>
+  );
+}