Add features & update project

apps/next/src/components/settings/worker-health-panel.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { useMutation, useQuery } from 'convex/react';
-import { RefreshCw, Trash2, Wrench } from 'lucide-react';
+import { Copy, RefreshCw, Trash2, Wrench } from 'lucide-react';
 import { toast } from 'sonner';
 
 import { api } from '@spoon/backend/convex/_generated/api.js';
@@ -47,6 +47,25 @@ export const WorkerHealthPanel = () => {
     useQuery(api.agentJobs.countOldWorkspaces, { olderThanDays }) ?? 0;
   const deleteOldWorkspaces = useMutation(api.agentJobs.deleteOldWorkspaces);
 
+  const copy = async (value: string) => {
+    await navigator.clipboard.writeText(value);
+    toast.success('Copied.');
+  };
+
+  const DiagnosticValue = ({ value }: { value: string }) => (
+    <dd className='flex items-center gap-2 font-mono break-all'>
+      <span>{value}</span>
+      <Button
+        type='button'
+        variant='ghost'
+        size='icon'
+        onClick={() => void copy(value)}
+      >
+        <Copy className='size-3' />
+      </Button>
+    </dd>
+  );
+
   const refreshHealth = async () => {
     setLoadingHealth(true);
     setHealthError(undefined);
@@ -151,15 +170,15 @@ export const WorkerHealthPanel = () => {
               <dl className='grid gap-3 text-sm md:grid-cols-2'>
                 <div>
                   <dt className='text-muted-foreground'>Convex</dt>
-                  <dd className='font-mono break-all'>{health.convexUrl}</dd>
+                  <DiagnosticValue value={health.convexUrl} />
                 </div>
                 <div>
                   <dt className='text-muted-foreground'>Job image</dt>
-                  <dd className='font-mono break-all'>{health.jobImage}</dd>
+                  <DiagnosticValue value={health.jobImage} />
                 </div>
                 <div>
                   <dt className='text-muted-foreground'>Workdir</dt>
-                  <dd className='font-mono break-all'>{health.workdir}</dd>
+                  <DiagnosticValue value={health.workdir} />
                 </div>
                 <div>
                   <dt className='text-muted-foreground'>Network</dt>