Function Sessions

studio/src/pages/Sessions.tsx:20–157

()

import type { SessionStatus } from '../api/types';

export function Sessions() {
  const navigate = useNavigate();
  const [statusFilter, setStatusFilter] = useState<string>('');
  const [searchQuery, setSearchQuery] = useState('');

  const { data, isLoading, refetch, isFetching } = useSessions({
    status: statusFilter || undefined,
    limit: 50,
  });

  const filteredSessions = data?.sessions?.filter((session) => {
    if (!searchQuery) return true;
    return (
      session.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
      session.agent_id?.toLowerCase().includes(searchQuery.toLowerCase()) ||
      session.agent_name?.toLowerCase().includes(searchQuery.toLowerCase())
    );
  });

  return (
    <div className="flex flex-col h-full">
      <Header
        title="Sessions"
        subtitle="会话历史记录"
        isRefreshing={isFetching}
        onRefresh={() => refetch()}
      />

      <div className="flex-1 overflow-auto">
        {/* Filters */}
        <div className="p-4 border-b border-[var(--color-border)] bg-[var(--color-surface)]">
          <div className="flex items-center gap-4">
            {/* Search */}
            <div className="flex-1 relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--color-text-muted)]" />
              <input
                type="text"
                placeholder="搜索 Session ID、Agent..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-10 pr-4 py-2 bg-[var(--color-background)] border border-[var(--color-border)] rounded-lg text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] focus:outline-none focus:border-[var(--color-primary)]"
              />
            </div>

            {/* Status Filter */}
            <div className="flex items-center gap-2">
              <Filter className="w-4 h-4 text-[var(--color-text-muted)]" />
              <select
                value={statusFilter}
                onChange={(e) => setStatusFilter(e.target.value)}
                className="px-3 py-2 bg-[var(--color-background)] border border-[var(--color-border)] rounded-lg text-sm text-[var(--color-text-primary)] focus:outline-none focus:border-[var(--color-primary)]"
              >
                <option value="">全部状态</option>
                <option value="active">活跃</option>
                <option value="completed">已完成</option>
                <option value="suspended">暂停</option>
              </select>
            </div>