@gravito/zenith 1.0.0-beta.1 → 1.0.1

package/docs/LARAVEL_ZENITH_ROADMAP.md

@@ -0,0 +1,109 @@
+# 🚀 Project Zenith: Laravel Integration Roadmap
+
+**Repository**: `gravito-framework/laravel-zenith`
+**Target Audience**: Laravel 10/11 Applications
+**Goal**: Provide deep, native introspection into Laravel applications for Gravito Zenith.
+
+---
+
+## 1. Vision & Architecture
+
+Unlike the **Quasar Agent** (which is a sidecar daemon for OS/Infrastructure monitoring), **Laravel Zenith** is a native Composer package that lives *inside* the application.
+
+*   **Role**: " The Reporter". It sees what the OS cannot see.
+*   **Transport**: Direct Redis connection (utilizing `swarrot` or standard `predis`/`phpredis`).
+*   **Philosophy**: Zero-blocking. All reporting should be "fire-and-forget" or queued to avoid slowing down the user request lifecycle.
+
+---
+
+## 2. Core Features (The "Why")
+
+### A. Live Operational Logs (`logs`)
+*   **Feature**: A custom `Log Channel` driver.
+*   **Goal**: Stream logs (Info/Error/Debug) directly to Zenith's Live Log view.
+*   **Implementation**:
+    *   `config/logging.php`: Add a `zenith` channel.
+    *   Push JSON payloads to `flux_console:logs` Redis channel.
+
+### B. Queue Lifecycle Events (`queues`)
+*   **Feature**: Listen to Laravel Queue Events (`JobProcessing`, `JobProcessed`, `JobFailed`).
+*   **Goal**: Provide granular job insight that `quasar-go` cannot (e.g., "Job X failed with Exception Y", "Job Z took 45s").
+*   **Implementation**:
+    *   Event Subscriber for `Illuminate\Queue\Events\*`.
+    *   Capture `job->getRawBody()`, `exception->getMessage()`.
+
+### C. Request Performance (`http`)
+*   **Feature**: Global Middleware (`ZenithMonitorMiddleware`).
+*   **Goal**: Track "Slow Requests", 500 Errors, and Throughput.
+*   **Metrics**:
+    *   Status Codes (2xx, 4xx, 5xx).
+    *   Duration (ms).
+    *   Route Name / Controller Action.
+
+### D. System Health Checks
+*   **Feature**: `php artisan zenith:check`
+*   **Goal**: Verify Redis connection and permissions.
+
+---
+
+## 3. Implementation Roadmap
+
+### Phase 1: The Foundation (Logs & Config)
+**Goal**: Get the package installed and streaming basic logs.
+- [ ] Initialize Repository `gravito-framework/laravel-zenith`.
+- [ ] Create `ZenithServiceProvider`.
+- [ ] Implement `ZenithLogger` (Monolog Handler).
+- [ ] Publishing `config/zenith.php` (Redis connection settings).
+- [ ] **Deliverable**: `Log::info('Hello Zenith')` appears in Zenith UI.
+
+### Phase 2: The Worker's Eye (Queues)
+**Goal**: Deep visibility into Queue Jobs.
+- [ ] Create `ZenithQueueSubscriber`.
+- [ ] Handle `JobFailed`: Serialize exception and push to Zenith Alerting.
+- [ ] Handle `JobProcessed`: Record metrics for "Jobs per minute".
+- [ ] **Deliverable**: Seeing real-time "Job Completed" toasts and Error details in Zenith.
+
+### Phase 3: The Watchtower (HTTP & Exceptions)
+**Goal**: Monitoring web requests.
+- [ ] Create `RecordRequestMetrics` Middleware.
+- [ ] Exception Handler integration (optional, for global error catching).
+- [ ] Filter logic (ignore `/nova`, `/telescope`, etc.).
+- [ ] **Deliverable**: HTTP Throughput graphs in Zenith.
+
+### Phase 4: The Bridge (Remote Control Hooks)
+**Goal**: Allow Zenith to trigger Laravel actions safely.
+- [ ] Expose internal hooks for `quasar-go` to call?
+    *   *Note*: `quasar-go` already calls `artisan`. Phase 4 might be about ensuring `artisan zenith:run-job {id}` exists if we need advanced job re-running that `queue:retry` can't handle.
+
+---
+
+## 4. Technical Specifications
+
+### Redis Protocol
+We will reuse the **Gravito Pulse Protocol (GPP)** used by `quasar-go`:
+*   **Logs**: `PUBLISH flux_console:logs`
+*   **Metrics**: `INCR flux_console:metrics:...`
+
+### Configuration (`zenith.php`)
+```php
+return [
+    'enabled' => env('ZENITH_ENABLED', true),
+    
+    'connection' => env('ZENITH_REDIS_CONNECTION', 'default'),
+    
+    'logging' => [
+        'enabled' => true,
+        'level' => 'debug',
+    ],
+    
+    'queues' => [
+        'monitor_all' => true,
+        'ignore_jobs' => [],
+    ],
+];
+```
+
+### Dependency Strategy
+*   **Support**: Laravel 10.x, 11.x
+*   **Php**: 8.1+
+*   **Driver**: `phpredis` (preferred) or `predis`.

package/{QUASAR_MASTER_PLAN.md → docs/QUASAR_MASTER_PLAN.md}

@@ -22,6 +22,7 @@ We employ a "Right Tool for the Job" strategy for deployment:
 | :--- | :--- | :--- | :--- |
 | **Node.js / Bun** | **SDK** | `@gravito/quasar` | **In-App Integration**. Directly imports into the app. Captures Event Loop, Heap, and Queues. |
 | **Legacy / Polyglot** | **Agent** | `gravito/quasar-agent` | **Sidecar / Daemon**. Standalone Go binary. Captures OS-level metrics and external Queue states via Redis/API. |
+| **PHP / Laravel** | **Package** | `gravito/laravel-zenith` | **Native Integration**. Laravel Service Provider. Captures Jobs, Logs, and Exceptions. |
 
 ### 🚀 Deployment Methods (Zero Friction)
 1.  **NPM**: `npm install @gravito/quasar` (For Node developers)
@@ -77,14 +78,14 @@ All agents/SDKs report to Redis using this unified schema.
 
 ---
 
-### Phase 2: Architecture Evolution - "The Brain-Hand Model" 🧠 🖐️
+### Phase 2: Architecture Evolution - "The Brain-Hand Model" 🧠 🖐️ - **Completed** ✅
 To support advanced features like **Queue Insights** (Phase 2) and **Remote Control** (Phase 3), we are adopting a bidirectional architecture.
 
 *   **Metric Transport (The Mouth)**: Agent sends metrics to Zenith (via shared Redis).
 *   **Local Insight (The Eyes)**: Agent inspects *its own* environment (Local Redis, Local Queue) to gather data. Zenith doesn't need to connect to the App DB directly.
 *   **Command execution (The Hand)**: Zenith publishes commands (Retry/Delete), and Agent listens and executes them locally.
 
-#### Revised Phase 2: Application Insights (Queues) - **In Progress** 🟡
+#### Revised Phase 2: Application Insights (Queues) - **Completed** ✅
 **Goal**: Enable Quasar Agent to "see" local queues and report their status.
 
 - [x] **SDK Architecture**: Update `QuasarAgent` to handle **Dual Connections**:
@@ -110,7 +111,7 @@ To support advanced features like **Queue Insights** (Phase 2) and **Remote Cont
 - [x] **UI**: Add "Retry/Delete" buttons in Zenith `PulsePage` for failed queue jobs.
 - [x] **Documentation**: Created `ALERTING_GUIDE.md` for configuration best practices.
 
-### Phase 4: Polyglot Agent - **In Progress** 🟡
+### Phase 4: Polyglot Agent - **Completed** ✅
 *   [x] Create `gravito-framework/quasar` repo (`quasar-go`).
 *   [x] Develop Go Agent core (utilizing `gopsutil`).
     *   [x] System Probe (CPU/RAM)
@@ -125,6 +126,8 @@ To support advanced features like **Queue Insights** (Phase 2) and **Remote Cont
     *   [x] **Laravel Deep Integration**:
         *   [x] `LARAVEL_ACTION` Executor (runs `artisan` safely).
         *   [x] Auto-discovery of Laravel project root via process inspection.
+        *   [x] **Advanced Process Introspection**: Captures real-time CPU/RAM usage per Laravel Worker process.
+        *   [x] **Virtual Node Mapping**: Visualizes individual Laravel Workers as distinct nodes in Zenith UI.
         *   [x] Support for `retry-all`, `retry {id}`, and `restart` (graceful worker reload).
 *   [x] Docker & Makefile setup.
 *   [x] Binary Release pipeline (GitHub Actions).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravito/zenith",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.1",
   "description": "Gravito Zenith: Zero-config control plane for Gravito Flux & Stream",
   "type": "module",
   "bin": {

package/scripts/debug_redis_keys.ts

@@ -0,0 +1,24 @@
+import { Redis } from 'ioredis'
+
+const redis = new Redis('redis://localhost:6379')
+
+async function check() {
+  console.log('Connecting to Redis...')
+  try {
+    const keys = await redis.keys('gravito:quasar:node:*')
+    console.log('Keys found count:', keys.length)
+    console.log('Keys:', keys)
+
+    if (keys.length > 0) {
+      const val = await redis.get(keys[0])
+      console.log('--- Value of first key ---')
+      console.log(val)
+      console.log('--- End Value ---')
+    }
+  } catch (err) {
+    console.error('Redis Error:', err)
+  }
+  process.exit(0)
+}
+
+check()

package/src/client/App.tsx

@@ -8,11 +8,11 @@ import {
   LoginPage,
   MetricsPage,
   OverviewPage,
+  PulsePage,
   QueuesPage,
   SchedulesPage,
   SettingsPage,
   WorkersPage,
-  PulsePage,
 } from './pages'
 
 const queryClient = new QueryClient()

package/src/client/Layout.tsx

@@ -64,7 +64,7 @@ export function Layout({ children }: LayoutProps) {
     fetch('/api/system/status')
       .then((res) => res.json())
       .then(setSystemStatus)
-      .catch(() => { })
+      .catch(() => {})
   }, [])
 
   // Global SSE Stream Manager
@@ -116,7 +116,7 @@ export function Layout({ children }: LayoutProps) {
     fetch('/api/queues')
       .then((res) => res.json())
       .then(setQueueData)
-      .catch(() => { })
+      .catch(() => {})
 
     // Optional: Listen to global stats if available (from OverviewPage) to keep queue stats fresh in command palette
     const handler = (e: Event) => {
@@ -255,15 +255,15 @@ export function Layout({ children }: LayoutProps) {
     },
     ...(isAuthEnabled
       ? [
-        {
-          id: 'sys-logout',
-          title: 'Logout',
-          description: 'Sign out from the console',
-          icon: <LogOut size={18} />,
-          category: 'System' as const,
-          action: logout,
-        },
-      ]
+          {
+            id: 'sys-logout',
+            title: 'Logout',
+            description: 'Sign out from the console',
+            icon: <LogOut size={18} />,
+            category: 'System' as const,
+            action: logout,
+          },
+        ]
       : []),
   ]
 
@@ -537,7 +537,6 @@ export function Layout({ children }: LayoutProps) {
               <div className="p-6 border-b flex items-center gap-4 bg-muted/5">
                 <Command className="text-primary animate-pulse" size={24} />
                 <input
-                  autoFocus
                   type="text"
                   placeholder="Execute command or navigate..."
                   className="flex-1 bg-transparent border-none outline-none text-lg font-bold placeholder:text-muted-foreground/30"

package/src/client/WorkerStatus.tsx

@@ -1,13 +1,38 @@
 import { type ClassValue, clsx } from 'clsx'
-import { Activity, Cpu } from 'lucide-react'
+import { Activity, Cpu, Terminal } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 
 function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
 
+function formatBytes(bytes: number) {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / k ** i).toFixed(1)) + ' ' + sizes[i]
+}
+
+function getWorkerName(id: string, pid: number) {
+  // If ID contains Hostname+PID, try to simplify it
+  // Example: CarldeMacBook-Air.local-99401
+  const complexIdMatch = id.match(/^(.*)-(\d+)$/)
+  if (complexIdMatch && parseInt(complexIdMatch[2]) === pid) {
+    // Return just the hostname part, and maybe truncate if too long
+    let hostname = complexIdMatch[1]
+    if (hostname.endsWith('.local')) {
+      hostname = hostname.replace('.local', '')
+    }
+    return hostname
+  }
+  // Fallback
+  return id.replace('.local', '')
+}
+
 interface WorkerInfo {
   id: string
+  service?: string
   status: 'online' | 'offline'
   pid: number
   uptime: number
@@ -18,6 +43,12 @@ interface WorkerInfo {
       rss: number
     }
   }
+  meta?: {
+    laravel?: {
+      workerCount: number
+      roots: string[]
+    }
+  }
 }
 
 export function WorkerStatus({
@@ -27,12 +58,6 @@ export function WorkerStatus({
   highlightedWorkerId?: string | null
   workers?: WorkerInfo[]
 }) {
-  // Legacy polling removed, now using passed props
-  // const { data: workerData } = useQuery<{ workers: any[] }>({ ... })
-
-  // Fallback if not passed (though it should be)
-  // const workers = workerData?.workers || []
-
   const onlineCount = workers.filter((w) => w.status === 'online').length
 
   return (
@@ -66,10 +91,10 @@ export function WorkerStatus({
           <div
             key={worker.id}
             className={cn(
-              'flex items-center justify-between p-4 rounded-2xl bg-muted/10 border transition-all group overflow-hidden relative shrink-0',
+              'relative flex items-center gap-4 p-4 rounded-2xl border transition-all group overflow-hidden shrink-0',
               worker.id === highlightedWorkerId
-                ? 'border-primary/50 bg-primary/5 shadow-[0_0_20px_rgba(var(--primary-rgb),0.1)] -translate-y-1 scale-[1.02] z-10'
-                : 'border-transparent hover:border-primary/20 hover:bg-muted/20'
+                ? 'bg-primary/5 border-primary/50 shadow-[0_0_20px_rgba(var(--primary-rgb),0.1)] -translate-y-1 scale-[1.02] z-10'
+                : 'bg-card hover:bg-muted/10 border-border/50 hover:border-primary/20'
             )}
           >
             {/* Status bar */}
@@ -80,80 +105,96 @@ export function WorkerStatus({
               )}
             />
 
-            <div className="flex items-center gap-4">
-              <div className="relative">
-                <div
-                  className={cn(
-                    'w-3 h-3 rounded-full',
-                    worker.status === 'online'
-                      ? 'bg-green-500 animate-pulse shadow-[0_0_12px_rgba(34,197,94,0.6)]'
-                      : 'bg-muted-foreground/40'
-                  )}
-                ></div>
-              </div>
-              <div>
-                <p className="text-sm font-black tracking-tight group-hover:text-primary transition-colors">
-                  {worker.id}
-                </p>
-                <div className="flex items-center gap-2">
-                  <span className="text-[9px] font-black uppercase tracking-tighter opacity-50">
-                    {worker.status}
+            {/* Icon/Dot */}
+            <div className="relative shrink-0 ml-1">
+              <div
+                className={cn(
+                  'w-3 h-3 rounded-full',
+                  worker.status === 'online'
+                    ? 'bg-green-500 animate-pulse shadow-[0_0_12px_rgba(34,197,94,0.6)]'
+                    : 'bg-muted-foreground/40'
+                )}
+              />
+            </div>
+
+            {/* Main Info */}
+            <div className="flex-1 min-w-0 flex flex-col justify-center mr-2">
+              {worker.service && (
+                <span className="text-[10px] font-black text-primary/80 uppercase tracking-widest mb-0.5 whitespace-nowrap">
+                  {worker.service}
+                </span>
+              )}
+              <h4
+                className="text-sm font-black tracking-tight text-foreground truncate"
+                title={worker.id}
+              >
+                {getWorkerName(worker.id, worker.pid) || worker.id}
+              </h4>
+              <div className="flex items-center gap-2 mt-1">
+                <span className="text-[9px] font-bold text-muted-foreground uppercase tracking-wider whitespace-nowrap">
+                  PID {worker.pid}
+                </span>
+                {worker.meta?.laravel && worker.meta.laravel.workerCount > 0 && (
+                  <span className="inline-flex items-center gap-1 text-[9px] font-black text-white bg-red-500 px-1.5 py-0.5 rounded shadow-sm uppercase tracking-widest leading-none whitespace-nowrap">
+                    <Terminal size={8} />
+                    {worker.meta.laravel.workerCount} PHP
                   </span>
-                  <span className="text-[9px] font-black text-primary/60">PID {worker.pid}</span>
-                </div>
+                )}
               </div>
             </div>
 
-            <div className="flex items-center gap-6">
+            {/* Metrics (Right Side) */}
+            <div className="flex items-center gap-3 text-right shrink-0">
               {worker.metrics && (
-                <div className="flex gap-4">
-                  <div className="space-y-1.5 w-20">
+                <>
+                  <div className="hidden sm:block space-y-1 w-12">
                     <div className="flex justify-between text-[8px] font-black text-muted-foreground uppercase tracking-tighter">
-                      <span>LOAD ({worker.metrics.cores || '-'})</span>
+                      <span>CPU</span>
                       <span
                         className={cn(
-                          worker.metrics.cpu > (worker.metrics.cores || 4) && 'text-red-500'
+                          worker.metrics.cpu > (worker.metrics.cores || 1) * 100 && 'text-red-500'
                         )}
                       >
-                        {worker.metrics.cpu.toFixed(2)}
+                        {worker.metrics.cpu.toFixed(0)}%
                       </span>
                     </div>
                     <div className="h-1 w-full bg-muted rounded-full overflow-hidden">
                       <div
-                        className={cn(
-                          'h-full transition-all duration-700',
-                          worker.metrics.cpu > (worker.metrics.cores || 4)
-                            ? 'bg-red-500'
-                            : worker.metrics.cpu > (worker.metrics.cores || 4) * 0.7
-                              ? 'bg-amber-500'
-                              : 'bg-green-500'
-                        )}
-                        style={{
-                          width: `${Math.min(100, (worker.metrics.cpu / (worker.metrics.cores || 1)) * 100)}%`,
-                        }}
-                      />
+                        className="h-full bg-foreground transition-all duration-700"
+                        style={{ width: `${Math.min(100, worker.metrics.cpu)}%` }}
+                      ></div>
                     </div>
                   </div>
-                  <div className="space-y-1.5 w-16">
+
+                  <div className="hidden sm:block space-y-1 w-12">
                     <div className="flex justify-between text-[8px] font-black text-muted-foreground uppercase tracking-tighter">
                       <span>RAM</span>
-                      <span>{Math.round(worker.metrics.ram.rss / 1024)}G</span>
+                      <span className="truncate ml-1">
+                        {formatBytes(worker.metrics.ram.rss).split(' ')[0]}
+                      </span>
                     </div>
                     <div className="h-1 w-full bg-muted rounded-full overflow-hidden">
                       <div
                         className="h-full bg-indigo-500 transition-all duration-700"
                         style={{
-                          width: `${Math.min(100, (worker.metrics.ram.rss / 2048) * 100)}%`,
+                          width: `${Math.min(100, (worker.metrics.ram.rss / 2000000000) * 100)}%`,
                         }}
-                      />
+                      ></div>
                     </div>
                   </div>
-                </div>
+                </>
               )}
-              <div className="text-right whitespace-nowrap hidden sm:block">
-                <p className="text-sm font-black tracking-tighter">{worker.uptime}s</p>
+
+              <div className="w-12">
+                <p className="text-xs font-black tracking-tighter tabular-nums text-foreground">
+                  {worker.uptime > 3600
+                    ? `${(worker.uptime / 3600).toFixed(1)}h`
+                    : worker.uptime > 60
+                      ? `${(worker.uptime / 60).toFixed(0)}m`
+                      : `${worker.uptime.toFixed(0)}s`}
+                </p>
                 <p className="text-[8px] text-muted-foreground uppercase font-black tracking-widest opacity-50">
-                  UPTIME
+                  UP
                 </p>
               </div>
             </div>

package/src/client/components/BrandIcons.tsx

@@ -1,63 +1,138 @@
-import { SVGProps } from 'react'
+import type { SVGProps } from 'react'
 
 export function NodeIcon(props: SVGProps<SVGSVGElement>) {
-    return (
-        <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-            <path d="M16 2L2.1 9.9v12.2L16 30l13.9-7.9V9.9L16 2zm11.9 19.1L16 27.8l-11.9-6.7V11.1L16 4.2l11.9 6.9v10z" fill="#339933" />
-            <path d="M16 22.5l-6-3.4v-6.8l6-3.4 6 3.4v6.8l-6 3.4z" fill="#339933" />
-        </svg>
-    )
+  return (
+    <svg
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Node.js"
+      {...props}
+    >
+      <path
+        d="M16 2L2.1 9.9v12.2L16 30l13.9-7.9V9.9L16 2zm11.9 19.1L16 27.8l-11.9-6.7V11.1L16 4.2l11.9 6.9v10z"
+        fill="#339933"
+      />
+      <path d="M16 22.5l-6-3.4v-6.8l6-3.4 6 3.4v6.8l-6 3.4z" fill="#339933" />
+    </svg>
+  )
 }
 
 export function BunIcon(props: SVGProps<SVGSVGElement>) {
-    return (
-        <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-            {/* Outer Outline/Shadow for contrast on light bg */}
-            <path d="M30 17.045a9.8 9.8 0 0 0-.32-2.306l-.004.034a11.2 11.2 0 0 0-5.762-6.786c-3.495-1.89-5.243-3.326-6.8-3.811h.003c-1.95-.695-3.949.82-5.825 1.927-4.52 2.481-9.573 5.45-9.28 11.417.008-.029.017-.052.026-.08a9.97 9.97 0 0 0 3.934 7.257l-.01-.006C13.747 31.473 30.05 27.292 30 17.045" fill="#fbf0df" stroke="#4a4a4a" strokeWidth="1.5" />
+  return (
+    <svg
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Bun"
+      {...props}
+    >
+      {/* Outer Outline/Shadow for contrast on light bg */}
+      <path
+        d="M30 17.045a9.8 9.8 0 0 0-.32-2.306l-.004.034a11.2 11.2 0 0 0-5.762-6.786c-3.495-1.89-5.243-3.326-6.8-3.811h.003c-1.95-.695-3.949.82-5.825 1.927-4.52 2.481-9.573 5.45-9.28 11.417.008-.029.017-.052.026-.08a9.97 9.97 0 0 0 3.934 7.257l-.01-.006C13.747 31.473 30.05 27.292 30 17.045"
+        fill="#fbf0df"
+        stroke="#4a4a4a"
+        strokeWidth="1.5"
+      />
 
-            <path fill="#37474f" d="M19.855 20.236A.8.8 0 0 0 19.26 20h-6.514a.8.8 0 0 0-.596.236.51.51 0 0 0-.137.463 4.37 4.37 0 0 0 1.641 2.339 4.2 4.2 0 0 0 2.349.926 4.2 4.2 0 0 0 2.343-.926 4.37 4.37 0 0 0 1.642-2.339.5.5 0 0 0-.132-.463Z" />
-            <ellipse cx="22.5" cy="18.5" fill="#f8bbd0" rx="2.5" ry="1.5" />
-            <ellipse cx="9.5" cy="18.5" fill="#f8bbd0" rx="2.5" ry="1.5" />
-            <circle cx="10" cy="16" r="2" fill="#37474f" />
-            <circle cx="22" cy="16" r="2" fill="#37474f" />
-        </svg>
-    )
+      <path
+        fill="#37474f"
+        d="M19.855 20.236A.8.8 0 0 0 19.26 20h-6.514a.8.8 0 0 0-.596.236.51.51 0 0 0-.137.463 4.37 4.37 0 0 0 1.641 2.339 4.2 4.2 0 0 0 2.349.926 4.2 4.2 0 0 0 2.343-.926 4.37 4.37 0 0 0 1.642-2.339.5.5 0 0 0-.132-.463Z"
+      />
+      <ellipse cx="22.5" cy="18.5" fill="#f8bbd0" rx="2.5" ry="1.5" />
+      <ellipse cx="9.5" cy="18.5" fill="#f8bbd0" rx="2.5" ry="1.5" />
+      <circle cx="10" cy="16" r="2" fill="#37474f" />
+      <circle cx="22" cy="16" r="2" fill="#37474f" />
+    </svg>
+  )
 }
 
 export function DenoIcon(props: SVGProps<SVGSVGElement>) {
-    return (
-        <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-            <circle cx="16" cy="16" r="14" fill="currentColor" />
-            <path d="M16 6C16 6 24 10 24 18C24 23.5228 19.5228 28 14 28C8.47715 28 4 23.5228 4 18C4 10 16 6 16 6Z" fill="white" />
-            <circle cx="12" cy="18" r="2" fill="black" />
-        </svg>
-    )
+  return (
+    <svg
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Deno"
+      {...props}
+    >
+      <circle cx="16" cy="16" r="14" fill="currentColor" />
+      <path
+        d="M16 6C16 6 24 10 24 18C24 23.5228 19.5228 28 14 28C8.47715 28 4 23.5228 4 18C4 10 16 6 16 6Z"
+        fill="white"
+      />
+      <circle cx="12" cy="18" r="2" fill="black" />
+    </svg>
+  )
 }
 
 export function PhpIcon(props: SVGProps<SVGSVGElement>) {
-    return (
-        <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-            <ellipse cx="16" cy="16" rx="14" ry="10" fill="#777BB4" />
-            <text x="50%" y="54%" dominantBaseline="middle" textAnchor="middle" fill="white" fontSize="9" fontWeight="bold">PHP</text>
-        </svg>
-    )
+  return (
+    <svg
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="PHP"
+      {...props}
+    >
+      <ellipse cx="16" cy="16" rx="14" ry="10" fill="#777BB4" />
+      <text
+        x="50%"
+        y="54%"
+        dominantBaseline="middle"
+        textAnchor="middle"
+        fill="white"
+        fontSize="9"
+        fontWeight="bold"
+      >
+        PHP
+      </text>
+    </svg>
+  )
 }
 
 export function GoIcon(props: SVGProps<SVGSVGElement>) {
-    return (
-        <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-            <path d="M5 16C5 10 10 5 16 5H24V13H16C14.3431 13 13 14.3431 13 16C13 17.6569 14.3431 19 16 19H27V27H16C10 27 5 22 5 16Z" fill="#00ADD8" />
-            <circle cx="9" cy="16" r="2" fill="white" />
-            <circle cx="23" cy="9" r="2" fill="white" />
-        </svg>
-    )
+  return (
+    <svg
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Go"
+      {...props}
+    >
+      <path
+        d="M5 16C5 10 10 5 16 5H24V13H16C14.3431 13 13 14.3431 13 16C13 17.6569 14.3431 19 16 19H27V27H16C10 27 5 22 5 16Z"
+        fill="#00ADD8"
+      />
+      <circle cx="9" cy="16" r="2" fill="white" />
+      <circle cx="23" cy="9" r="2" fill="white" />
+    </svg>
+  )
 }
 
 export function PythonIcon(props: SVGProps<SVGSVGElement>) {
-    return (
-        <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-            <path d="M16 2C10 2 10 5 10 5L10 9L18 9L18 11L8 11L8 20L12 20L12 14L22 14C22 14 22 12 16 2Z" fill="#3776AB" />
-            <path d="M16 30C22 30 22 27 22 27L22 23L14 23L14 21L24 21L24 12L20 12L20 18L10 18C10 18 10 20 16 30Z" fill="#FFD43B" />
-        </svg>
-    )
+  return (
+    <svg
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Python"
+      {...props}
+    >
+      <path
+        d="M16 2C10 2 10 5 10 5L10 9L18 9L18 11L8 11L8 20L12 20L12 14L22 14C22 14 22 12 16 2Z"
+        fill="#3776AB"
+      />
+      <path
+        d="M16 30C22 30 22 27 22 27L22 23L14 23L14 21L24 21L24 12L20 12L20 18L10 18C10 18 10 20 16 30Z"
+        fill="#FFD43B"
+      />
+    </svg>
+  )
 }