apps/canvas/src/Tootls.tsx

import { Badge } from "./components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
import { Deployment } from "./Deployment";
import { useEnv, useMessages } from "./lib/state";
import { Messages } from "./Messages";

export function Tools() {
  const messages = useMessages();
  const env = useEnv();
  return (
    <Tabs defaultValue="messages" className="w-[400px] px-5 w-full h-full">
      <TabsList>
        <TabsTrigger value="messages" className="space-x-2">
          <div>Messages</div>
          <Badge>{messages.length}</Badge>
        </TabsTrigger>
        <TabsTrigger value="deployment">Deployment</TabsTrigger>
        <TabsTrigger value="deployKeys">Deploy keys</TabsTrigger>
      </TabsList>
      <TabsContent value="messages">
        <Messages />
      </TabsContent>
      <TabsContent value="deployment">
        <Deployment />
      </TabsContent>
      <TabsContent value="deployKeys">
        {env && (<>{env.deployKey}</>)}
      </TabsContent>
    </Tabs>
  );
}