Correcting some bugs and working on responsive.

app/api/agent/[agentId]/status/route.ts

@@ -1,7 +1,7 @@
 import {prisma} from "@/prisma";
 import {NextResponse} from "next/server";
 
-export async function POST(
+export async function GET(
     request: Request,
     {params}: { params: Promise<{ agentId: string }> }
 ) {

src/components/wrappers/Agent/AgentModalKey/AgentModalKey.tsx

@@ -10,11 +10,10 @@ import {
     DialogTrigger,
 } from "@/components/ui/dialog"
 
-import {PropsWithChildren} from "types-react";
 import {CodeSnippet} from "@/components/wrappers/CodeSnippet/CodeSnippet";
 import {generateEdgeKey} from "@/utils/edge_key";
 import {Copy} from "lucide-react";
-import {useState} from "react";
+import {PropsWithChildren, useState} from "react";
 import {CopyButton} from "@/components/wrappers/copy-button";
 import {Agent} from "@prisma/client";
 import {getServerUrl} from "@/utils/get-server-url";
@@ -38,10 +37,10 @@ export function AgentModalKey(props: agentRegistrationDialogProps) {
                 <DialogHeader>
                     <DialogTitle>Agent Edge Key</DialogTitle>
                 </DialogHeader>
-                <div className="sm:max-w-[375px] w-full text-center">
+                <div className="sm:max-w-[375px] w-full">
                     <CodeSnippet
                         code={code}
-                        className="w-full overflow-x-auto break-words"
+                        // className="w-full overflow-x-auto break-words"
                     />
                 </div>
                 <DialogFooter>

src/components/wrappers/CodeSnippet/CodeSnippet.tsx

@@ -1,6 +1,6 @@
 import {PropsWithChildren} from "react";
-import {ClipboardCopy, Copy} from "lucide-react";
-
+import {ClipboardCopy, Copy, CopyIcon} from "lucide-react";
+import {Button} from "@/components/ui/button"
 
 export type CodeSnippetProps = PropsWithChildren<{
     code: string
@@ -11,12 +11,26 @@ export const CodeSnippet = (props: CodeSnippetProps) => {
 
 
     return (
-        <div className="flex items-center space-x-4 w-full">
-            <code
-                className="text-xs sm:text-sm inline-flex text-left bg-gray-800 text-white rounded-lg p-4 overflow-x-auto whitespace-nowrap max-w-full"
-            >
-                <span className="flex-1">{props.code}</span>
-            </code>
+        // <div className="flex items-center space-x-4 w-full">
+        //     <code
+        //         className="text-xs sm:text-sm inline-flex text-left bg-gray-800 text-white rounded-lg p-4 overflow-x-auto whitespace-nowrap max-w-full"
+        //     >
+        //         <span className="flex-1">{props.code}</span>
+        //     </code>
+        // </div>
+        <div className="rounded-lg border bg-background">
+            <div className="flex items-center justify-between border-b bg-muted px-4 py-2">
+                <div className="text-sm font-medium">.env</div>
+                <Button variant="ghost" size="icon" className="hover:bg-muted/50 text-muted-foreground">
+                    {/*<CopyIcon className="h-4 w-4"/>*/}
+                    {/*<span className="sr-only">Copy code</span>*/}
+                </Button>
+            </div>
+            <div className="p-4 font-mono text-sm leading-6 text-foreground truncate">
+        <pre className="language-javascript overflow-x-auto">
+          <code className="mb-6">{props.code}</code>
+        </pre>
+            </div>
         </div>
     );
 }