Function SessionDetail

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

()

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

export function SessionDetail() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const { data: session, isLoading, refetch, isFetching } = useSession(id || '');

  if (!id) {
    return <div>Invalid session ID</div>;
  }

  return (
    <div className="flex flex-col h-full">
      <Header
        title={`Session: ${id.slice(0, 8)}...`}
        subtitle={session?.agent_name || session?.agent_id}
        isRefreshing={isFetching}
        onRefresh={() => refetch()}
      />

      <div className="flex-1 overflow-auto p-6">
        {/* Back Button */}
        <button
          onClick={() => navigate('/sessions')}
          className="flex items-center gap-2 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] mb-4 transition-colors"
        >
          <ArrowLeft className="w-4 h-4" />
          返回列表
        </button>

        {isLoading ? (
          <div className="space-y-4">
            <div className="h-32 bg-[var(--color-surface)] rounded-lg animate-pulse-slow" />
            <div className="h-64 bg-[var(--color-surface)] rounded-lg animate-pulse-slow" />
          </div>
        ) : session ? (
          <div className="space-y-6">
            {/* Summary Card */}
            <div className="card">
              <div className="flex items-start justify-between mb-4">
                <div className="flex items-center gap-3">
                  <div className={cn(
                    'w-10 h-10 rounded-lg flex items-center justify-center',
                    session.status === 'active' && 'bg-[var(--color-accent)]/20',
                    session.status === 'completed' && 'bg-[var(--color-success)]/20',
                    session.status === 'suspended' && 'bg-[var(--color-warning)]/20'
                  )}>
                    <MessageSquare className={cn(
                      'w-5 h-5',
                      session.status === 'active' && 'text-[var(--color-accent)]',
                      session.status === 'completed' && 'text-[var(--color-success)]',
                      session.status === 'suspended' && 'text-[var(--color-warning)]'
                    )} />
                  </div>
                  <div>
                    <h2 className="text-xl font-semibold text-[var(--color-text-primary)]">
                      {session.agent_name || session.agent_id || 'Unknown Agent'}
                    </h2>
                    <p className="text-sm text-[var(--color-text-muted)]">
                      {formatDate(session.created_at)}