upd: added gaps

client/src/components/chat.tsx

@@ -21,6 +21,7 @@ import { useToast } from "@/hooks/use-toast";
 import AIWriter from "react-aiwriter";
 import { IAttachment } from "@/types";
 import { AudioRecorder } from "./audio-recorder";
+import { Badge } from "./ui/badge";
 
 interface ExtraContentFields {
     user: string;
@@ -233,19 +234,32 @@ export default function Page({ agentId }: { agentId: UUID }) {
                                                     />
                                                 </div>
                                             ) : null}
-
-                                            {message?.createdAt ? (
-                                                <ChatBubbleTimestamp
-                                                    timestamp={moment(
-                                                        message?.createdAt
-                                                    ).format("LT")}
-                                                    className={cn([
-                                                        message?.isLoading
-                                                            ? "mt-2"
-                                                            : "",
-                                                    ])}
-                                                />
-                                            ) : null}
+                                            <div
+                                                className={cn([
+                                                    message?.isLoading
+                                                        ? "mt-2"
+                                                        : "",
+                                                    "flex items-center justify-between gap-4 select-none",
+                                                ])}
+                                            >
+                                                {message?.source ? (
+                                                    <Badge variant="outline">
+                                                        {message.source}
+                                                    </Badge>
+                                                ) : null}
+                                                {message?.action ? (
+                                                    <Badge variant="outline">
+                                                        {message.action}
+                                                    </Badge>
+                                                ) : null}
+                                                {message?.createdAt ? (
+                                                    <ChatBubbleTimestamp
+                                                        timestamp={moment(
+                                                            message?.createdAt
+                                                        ).format("LT")}
+                                                    />
+                                                ) : null}
+                                            </div>
                                         </div>
                                     </div>
                                 </ChatBubble>

client/src/components/connection-status.tsx

@@ -54,7 +54,7 @@ export default function ConnectionStatus() {
                                     ])}
                                 >
                                     {isLoading
-                                        ? "Loading..."
+                                        ? "Connecting..."
                                         : connected
                                           ? "Connected"
                                           : "Disconnected"}

client/src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

client/src/components/ui/chat/chat-tts-button.tsx

@@ -105,7 +105,7 @@ export default function ChatTtsButton({
                     </Button>
                 </TooltipTrigger>
                 <TooltipContent side="bottom">
-                    <p>Read aloud</p>
+                    <p>{playing ? "Stop" : "Read aloud"}</p>
                 </TooltipContent>
             </Tooltip>
         </div>

client/src/routes/home.tsx

@@ -26,7 +26,7 @@ export default function Home() {
     return (
         <div className="flex flex-col gap-4 h-full p-4">
             <PageTitle title="Agents" />
-            <div className="grid grid-cols-2 md:grid-cols-4">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                 {agents?.map((agent: { id: UUID; name: string }) => (
                     <Card key={agent.id}>
                         <CardHeader>