Cyrene_v2/frontend/web/src/admin/modules/Sessions.tsx

import { useState } from "react";
import { useAsyncData } from "../../lib/useAsyncData";
import { adminListSessions, createSubSession } from "../../lib/api";
import type { SessionMeta } from "../../lib/types";
import { useAutoReload } from "../hooks";
import { useAuditStore } from "../audit";
import { AdminTable, Notice, PageHeader, type AdminColumn } from "../components";
import { Button, Surface, Tag } from "../../components/primitives";

function exportMeta(sess: SessionMeta): void {
  const blob = new Blob([JSON.stringify(sess, null, 2)], { type: "application/json" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = `session-${sess.id}.json`;
  a.click();
  URL.revokeObjectURL(url);
}

export function SessionsModule(): React.ReactNode {
  const { data, loading, error, reload } = useAsyncData(adminListSessions, []);
  useAutoReload(reload, 10000);
  const [query, setQuery] = useState("");
  const [busy, setBusy] = useState<string | null>(null);
  const [fail, setFail] = useState<string | null>(null);
  const log = useAuditStore((s) => s.log);

  const filtered = (data ?? []).filter((s) => {
    if (!query.trim()) return true;
    const q = query.toLowerCase();
    return (
      s.id.toLowerCase().includes(q) ||
      s.type.toLowerCase().includes(q) ||
      (s.title ?? "").toLowerCase().includes(q)
    );
  });

  const newSubSession = () => {
    setBusy("new");
    setFail(null);
    createSubSession()
      .then(() => {
        log("session.create", "ok");
        reload();
      })
      .catch((e: unknown) => {
        log("session.create", "error");
        setFail(e instanceof Error ? e.message : "新建次级会话失败");
      })
      .finally(() => setBusy(null));
  };

  const columns: AdminColumn<SessionMeta>[] = [
    { key: "type", title: "类型", render: (s) => <Tag tone={s.type === "main" ? "ok" : "accent"}>{s.type === "main" ? "主会话" : "次级会话"}</Tag> },
    { key: "title", title: "标题", render: (s) => <span>{s.title ? s.title : <span className="text-[var(--mu-text-lo)]">（未命名）</span>}</span> },
    {
      key: "id",
      title: "会话 ID",
      render: (s) => <span className="font-mono text-xs">{s.id}</span>,
    },
    {
      key: "createdAt",
      title: "创建时间",
      render: (s) => <span className="text-xs">{new Date(s.createdAt).toLocaleString()}</span>,
    },
    {
      key: "actions",
      title: "操作",
      render: (s) => (
        <Button size="sm" variant="ghost" disabled={busy !== null} onClick={() => exportMeta(s)}>
          导出
        </Button>
      ),
    },
  ];

  return (
    <div className="space-y-5">
      <PageHeader
        title="会话管理"
        subtitle="GET /api/v1/admin/sessions · 持久化主会话 + 次级会话（design/16 §2）· 主会话固定存在，次级会话独立保留上下文 · 身份识别靠 channel 层 actor 元数据"
        actions={
          <Button variant="soft" disabled={busy !== null} onClick={() => reload()}>
            刷新
          </Button>
        }
      />

      {fail ? <Notice tone="err">{fail}</Notice> : null}

      <Surface className="space-y-3">
        <div className="flex flex-wrap items-center gap-2">
          <input
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="按会话 ID / 类型 / 标题过滤…"
            className="min-w-0 flex-1 rounded-[var(--mu-radius)] bg-[var(--mu-surface-2)] px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-[var(--mu-accent)]"
          />
          <Button variant="primary" disabled={busy !== null} onClick={newSubSession}>
            新建次级会话
          </Button>
        </div>
        <AdminTable
          columns={columns}
          rows={loading ? null : filtered}
          loading={loading}
          error={error}
          emptyTitle="暂无会话：主会话 web 固定存在；用侧栏新建次级会话"
          rowKey={(s) => s.id}
        />
      </Surface>

      <Notice>
        列表来自后端持久化会话（主会话 + 次级会话），主会话 id 固定。导出为会话元数据 JSON；身份判定永远由 actor 元数据 + 白名单 + 策略引擎完成，不依赖提示词。
      </Notice>
    </div>
  );
}