Repository: Significant-Gravitas/Auto-GPT
File: autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/NewAgentLibraryView.tsx (TypeScript)

Code before:
  function onRunInitiated(newRun: GraphExecutionMeta) {
    if (!agent) return;
    if (!hasAnyItems)
      handleCountsChange({
        runsCount: 1,
        schedulesCount: 0,
        templatesCount: 0,
        triggersCount: 0,
      });

    handleSelectRun(newRun.id, "runs");
  }

  function onScheduleCreated(newSchedule: GraphExecutionJobInfo) {
    if (!agent) return;
    if (!hasAnyItems)
      handleCountsChange({
        schedulesCount: 1,
        runsCount: 0,
        templatesCount: 0,
        triggersCount: 0,
      });

    handleSelectRun(newSchedule.id, "scheduled");
  }

  function onTriggerSetup(newTrigger: LibraryAgentPreset) {
    if (!agent) return;
    if (!hasAnyItems)
      handleCountsChange({
        triggersCount: 1,
        runsCount: 0,
        schedulesCount: 0,
        templatesCount: 0,
      });

    handleSelectRun(newTrigger.id, "triggers");
  }

  if (error) {
    return (
      <ErrorCard
        isSuccess={false}
        responseError={error || undefined}
        context="agent"
        onRetry={() => window.location.reload()}
      />
    );
  }

  if (!ready || !agent) {

Review comment (suggestion):
These can be a single function:
```ts
  type ItemCreated =
    | { type: "runs"; item: GraphExecutionMeta }
    | { type: "scheduled"; item: GraphExecutionJobInfo }
    | { type: "triggers"; item: LibraryAgentPreset };

  function handleItemCreated(created: ItemCreated) {
    if (!hasAnyItems) {
      const counts = {
        runsCount: created.type === "runs" ? 1 : 0,
        schedulesCount: created.type === "scheduled" ? 1 : 0,
        templatesCount: 0,
        triggersCount: created.type === "triggers" ? 1 : 0,
      };
      handleCountsChange(counts);
    }

    handleSelectRun(created.item.id, created.type);
  }
```

It should also be moved to `useNewAgentLibraryView.ts` so we keep callbacks and hook logic tidy there 💭 

Not sure why we have `if (!agent) return;`. Given how the logic is structured, these callbacks won't be called in the UI if there is no agent.

Ideally, it's called `handle...` as well, so we can easily differentiate from actual events, given this is a handler.

Code after:
  if (error) {
    return (
      <ErrorCard
        isSuccess={false}
        responseError={error || undefined}
        context="agent"
        onRetry={() => window.location.reload()}
      />
    );
  }

  if (!ready || !agent) {
    return <AgentRunsLoading />;
  }

  if (!sidebarLoading && !hasAnyItems) {
    return (
      <div className="flex h-full flex-col">
        <div className="mx-6 pt-4">
          <Breadcrumbs
            items={[
              { name: "My Library", link: "/library" },
              { name: agent.name, link: `/library/agents/${agentId}` },
            ]}
          />
        </div>
        <div className="flex min-h-0 flex-1">
          <EmptyTasks
            agent={agent}
            onRun={onRunInitiated}
            onTriggerSetup={onTriggerSetup}
            onScheduleCreated={onScheduleCreated}
          />
        </div>
      </div>
    );
  }

  return (
    <div className="mx-4 grid h-full grid-cols-1 gap-0 pt-3 md:ml-4 md:mr-0 md:gap-4 lg:grid-cols-[25%_70%]">
      <SectionWrap className="mb-3 block">
        <div
          className={cn(
            "border-b border-zinc-100 pb-5",
            AGENT_LIBRARY_SECTION_PADDING_X,
          )}
        >
          <RunAgentModal
            triggerSlot={
              <Button
                variant="primary"