app.tsx

export const App = () => {
  const [tickets, setTickets] = useState<Ticket[]>([]);
  const [agentName, setAgentName] = useState<{ name: string }>({ name: '' });

  useEffect(() => {
    fetch('/api/tickets')
      .then(t => t.json())
      .then(setTickets);
  }, []);

  useEffect(() => {
    fetch('/agent')
      .then(t => t.json())
      .then(setAgentName);
  }, []);

  return (
    <StyledApp>
      <header className="flex">
        <h1>Welcome to agent!</h1>
      </header>
      <main>
        <TicketList tickets={tickets} />

        <section>
          <p>Agent {agentName.name}</p>
          <button>Agent Action</button>
        </section>
      </main>
    </StyledApp>
  );
};

export default App;