@donkeylabs/cli 0.1.1 → 0.4.0

package/templates/sveltekit-app/src/routes/+page.svelte

@@ -1,19 +1,38 @@
 <script lang="ts">
-  import { browser } from '$app/environment';
-  import { onMount } from 'svelte';
-  import { Button } from '$lib/components/ui/button';
-  import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card';
-  import { Input } from '$lib/components/ui/input';
-  import { Badge } from '$lib/components/ui/badge';
-  import { createApi, type CronTask } from '$lib/api';
+  import { browser } from "$app/environment";
+  import { onMount } from "svelte";
+  import { Button } from "$lib/components/ui/button";
+  import type { Routes } from "$lib/api";
+  import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+  } from "$lib/components/ui/card";
+  import { Input } from "$lib/components/ui/input";
+  import { Badge } from "$lib/components/ui/badge";
+  import { createApi } from "$lib/api";
+
+  // Type for cron tasks returned by the API
+  interface CronTask {
+    id: string;
+    name: string;
+    expression: string;
+    enabled: boolean;
+    lastRun?: string;
+    nextRun?: string;
+  }
 
   let { data } = $props();
 
   // Create typed API client (browser mode - no locals)
-  const api = createApi();
+  const client = createApi();
 
   // SSE Events state
-  let events = $state<Array<{ id: number; message: string; timestamp: string; source?: string }>>([]);
+  let events = $state<
+    Array<{ id: number; message: string; timestamp: string; source?: string }>
+  >([]);
   let sseConnected = $state(false);
   let sseClients = $state({ total: 0, byChannel: 0 });
 
@@ -22,20 +41,20 @@
   let counterLoading = $state(false);
 
   // Cache state
-  let cacheKey = $state('demo-key');
-  let cacheValue = $state('Hello World');
+  let cacheKey = $state("demo-key");
+  let cacheValue = $state("Hello World");
   let cacheTTL = $state(30000);
   let cacheResult = $state<any>(null);
   let cacheKeys = $state<string[]>([]);
 
   // Jobs state
-  let jobMessage = $state('Test job');
+  let jobMessage = $state("Test job");
   let jobDelay = $state(0);
   let jobStats = $state({ pending: 0, running: 0, completed: 0 });
   let lastJobId = $state<string | null>(null);
 
   // Rate Limiter state
-  let rateLimitKey = $state('demo');
+  let rateLimitKey = $state("demo");
   let rateLimitMax = $state(5);
   let rateLimitWindow = $state(60000);
   let rateLimitResult = $state<any>(null);
@@ -44,72 +63,79 @@
   let cronTasks = $state<CronTask[]>([]);
 
   // Events (pub/sub) state
-  let eventName = $state('demo.test');
+  let eventName = $state("demo.test");
   let eventData = $state('{"hello": "world"}');
 
   // Counter actions - using typed client
-  async function counterAction(action: 'get' | 'increment' | 'decrement' | 'reset') {
+  async function counterAction(
+    action: "get" | "increment" | "decrement" | "reset",
+  ) {
     counterLoading = true;
-    const result = await api.counter[action]();
+
+    const result = await client.counter[action]({});
     count = result.count;
     counterLoading = false;
   }
 
   // Cache actions - using typed client
   async function cacheSet() {
-    await api.cache.set({ key: cacheKey, value: cacheValue, ttl: cacheTTL });
-    cacheResult = { action: 'set', success: true };
+    await client.cache.set({ key: cacheKey, value: cacheValue, ttl: cacheTTL });
+    cacheResult = { action: "set", success: true };
     refreshCacheKeys();
   }
 
   async function cacheGet() {
-    cacheResult = await api.cache.get({ key: cacheKey });
+    cacheResult = await client.cache.get({ key: cacheKey });
     refreshCacheKeys();
   }
 
   async function cacheDelete() {
-    await api.cache.delete({ key: cacheKey });
-    cacheResult = { action: 'deleted', success: true };
+    await client.cache.delete({ key: cacheKey });
+    cacheResult = { action: "deleted", success: true };
     refreshCacheKeys();
   }
 
   async function refreshCacheKeys() {
-    const result = await api.cache.keys();
+    const result = await client.cache.keys({});
     cacheKeys = result.keys || [];
   }
 
   // Jobs actions - using typed client
   async function enqueueJob() {
-    const result = await api.jobs.enqueue({
-      name: 'demo-job',
+    const result = (await client.jobs.enqueue({
+      name: "demo-job",
       data: { message: jobMessage },
-      delay: jobDelay > 0 ? jobDelay : undefined
-    });
+      delay: jobDelay > 0 ? jobDelay : undefined,
+    })) as { jobId: string };
     lastJobId = result.jobId;
     refreshJobStats();
   }
 
   async function refreshJobStats() {
-    jobStats = await api.jobs.stats();
+    jobStats = (await client.jobs.stats({})) as {
+      pending: number;
+      running: number;
+      completed: number;
+    };
   }
 
   // Rate limiter actions - using typed client
   async function checkRateLimit() {
-    rateLimitResult = await api.ratelimit.check({
+    rateLimitResult = await client.ratelimit.check({
       key: rateLimitKey,
       limit: rateLimitMax,
-      window: rateLimitWindow
+      window: rateLimitWindow,
     });
   }
 
   async function resetRateLimit() {
-    await api.ratelimit.reset({ key: rateLimitKey });
-    rateLimitResult = { reset: true, message: 'Rate limit reset' };
+    await client.ratelimit.reset({ key: rateLimitKey });
+    rateLimitResult = { reset: true, message: "Rate limit reset" };
   }
 
   // Cron actions - using typed client
   async function refreshCronTasks() {
-    const result = await api.cron.list();
+    const result = (await client.cron.list({})) as { tasks: CronTask[] };
     cronTasks = result.tasks;
   }
 
@@ -117,28 +143,31 @@
   async function emitEvent() {
     try {
       const parsedData = JSON.parse(eventData);
-      await api.events.emit({ event: eventName, data: parsedData });
+      await client.events.emit({ event: eventName, data: parsedData });
     } catch (e) {
-      console.error('Invalid JSON:', e);
+      console.error("Invalid JSON:", e);
     }
   }
 
   // SSE actions - using typed client
   async function manualBroadcast() {
-    await api.sseRoutes.broadcast({
-      channel: 'events',
-      event: 'manual',
+    await client.sseRoutes.broadcast({
+      channel: "events",
+      event: "manual",
       data: {
         id: Date.now(),
-        message: 'Manual broadcast!',
+        message: "Manual broadcast!",
         timestamp: new Date().toISOString(),
-        source: 'manual'
-      }
+        source: "manual",
+      },
     });
   }
 
   async function refreshSSEClients() {
-    sseClients = await api.sseRoutes.clients();
+    sseClients = (await client.sseRoutes.clients({})) as {
+      total: number;
+      byChannel: number;
+    };
   }
 
   onMount(() => {
@@ -151,17 +180,24 @@
     refreshSSEClients();
 
     // SSE subscription using the typed client
-    const unsubscribe = api.sse.subscribe(['events'], (eventType, eventData) => {
-      // Handle all event types
-      if (['cron-event', 'job-completed', 'internal-event', 'manual'].includes(eventType)) {
-        // Simple prepend - CSS handles animation via :first-child or key-based animation
-        events = [{ ...eventData }, ...events].slice(0, 15);
-
-        if (eventType === 'job-completed') {
-          refreshJobStats();
+    const unsubscribe = client.sse.subscribe(
+      ["events"],
+      (eventType, eventData) => {
+        // Handle all event types
+        if (
+          ["cron-event", "job-completed", "internal-event", "manual"].includes(
+            eventType,
+          )
+        ) {
+          // Simple prepend - CSS handles animation via :first-child or key-based animation
+          events = [{ ...eventData }, ...events].slice(0, 15);
+
+          if (eventType === "job-completed") {
+            refreshJobStats();
+          }
         }
-      }
-    });
+      },
+    );
 
     // Track connection status
     const checkConnection = setInterval(() => {
@@ -184,21 +220,31 @@
     };
   });
 
-  function getSourceColor(source?: string): "default" | "secondary" | "destructive" | "outline" | "success" {
+  function getSourceColor(
+    source?: string,
+  ): "default" | "secondary" | "destructive" | "outline" | "success" {
     switch (source) {
-      case 'cron': return 'default';
-      case 'manual': return 'secondary';
-      case 'events': return 'outline';
-      default: return 'success';
+      case "cron":
+        return "default";
+      case "manual":
+        return "secondary";
+      case "events":
+        return "outline";
+      default:
+        return "success";
     }
   }
 
   function getSourceLabel(source?: string) {
     switch (source) {
-      case 'cron': return 'CRON';
-      case 'manual': return 'MANUAL';
-      case 'events': return 'PUB/SUB';
-      default: return 'JOB';
+      case "cron":
+        return "CRON";
+      case "manual":
+        return "MANUAL";
+      case "events":
+        return "PUB/SUB";
+      default:
+        return "JOB";
     }
   }
 </script>
@@ -208,9 +254,11 @@
     <!-- Header -->
     <div class="text-center mb-8">
       <h1 class="text-3xl font-bold tracking-tight">@donkeylabs/server Demo</h1>
-      <p class="text-muted-foreground mt-2">SvelteKit Adapter — All Core Services</p>
+      <p class="text-muted-foreground mt-2">
+        SvelteKit Adapter — All Core Services
+      </p>
       <Badge variant="outline" class="mt-3">
-        SSR: {data.isSSR ? 'Yes' : 'No'} | Loaded: {data.loadedAt}
+        SSR: {data.isSSR ? "Yes" : "No"} | Loaded: {data.loadedAt}
       </Badge>
     </div>
 
@@ -220,17 +268,37 @@
       <Card>
         <CardHeader>
           <CardTitle>RPC Routes</CardTitle>
-          <CardDescription>Type-safe API calls with Zod validation</CardDescription>
+          <CardDescription
+            >Type-safe API calls with Zod validation</CardDescription
+          >
         </CardHeader>
         <CardContent>
           <div class="text-center py-4">
             <span class="text-5xl font-bold text-primary">{count}</span>
           </div>
           <div class="flex gap-2 justify-center">
-            <Button variant="outline" size="icon" onclick={() => counterAction('decrement')} disabled={counterLoading}>−</Button>
-            <Button variant="secondary" onclick={() => counterAction('get')} disabled={counterLoading}>Refresh</Button>
-            <Button variant="outline" size="icon" onclick={() => counterAction('increment')} disabled={counterLoading}>+</Button>
-            <Button variant="ghost" onclick={() => counterAction('reset')} disabled={counterLoading}>Reset</Button>
+            <Button
+              variant="outline"
+              size="icon"
+              onclick={() => counterAction("decrement")}
+              disabled={counterLoading}>−</Button
+            >
+            <Button
+              variant="secondary"
+              onclick={() => counterAction("get")}
+              disabled={counterLoading}>Refresh</Button
+            >
+            <Button
+              variant="outline"
+              size="icon"
+              onclick={() => counterAction("increment")}
+              disabled={counterLoading}>+</Button
+            >
+            <Button
+              variant="ghost"
+              onclick={() => counterAction("reset")}
+              disabled={counterLoading}>Reset</Button
+            >
           </div>
         </CardContent>
       </Card>
@@ -248,14 +316,24 @@
           </div>
           <div class="flex gap-2">
             <Button onclick={cacheSet} size="sm">Set</Button>
-            <Button onclick={cacheGet} size="sm" variant="secondary">Get</Button>
-            <Button onclick={cacheDelete} size="sm" variant="outline">Delete</Button>
+            <Button onclick={cacheGet} size="sm" variant="secondary">Get</Button
+            >
+            <Button onclick={cacheDelete} size="sm" variant="outline"
+              >Delete</Button
+            >
           </div>
           {#if cacheResult}
-            <pre class="text-xs bg-muted p-2 rounded-md overflow-auto">{JSON.stringify(cacheResult, null, 2)}</pre>
+            <pre
+              class="text-xs bg-muted p-2 rounded-md overflow-auto">{JSON.stringify(
+                cacheResult,
+                null,
+                2,
+              )}</pre>
           {/if}
           <p class="text-xs text-muted-foreground">
-            Keys ({cacheKeys.length}): {cacheKeys.length > 0 ? cacheKeys.join(', ') : 'none'}
+            Keys ({cacheKeys.length}): {cacheKeys.length > 0
+              ? cacheKeys.join(", ")
+              : "none"}
           </p>
         </CardContent>
       </Card>
@@ -268,15 +346,28 @@
         </CardHeader>
         <CardContent class="space-y-3">
           <div class="flex gap-2">
-            <Input bind:value={jobMessage} placeholder="Job message" class="flex-1" />
-            <Input bind:value={jobDelay} type="number" placeholder="Delay" class="w-20" />
+            <Input
+              bind:value={jobMessage}
+              placeholder="Job message"
+              class="flex-1"
+            />
+            <Input
+              bind:value={jobDelay}
+              type="number"
+              placeholder="Delay"
+              class="w-20"
+            />
           </div>
           <div class="flex gap-2">
             <Button onclick={enqueueJob} size="sm">Enqueue</Button>
-            <Button onclick={refreshJobStats} size="sm" variant="outline">Refresh</Button>
+            <Button onclick={refreshJobStats} size="sm" variant="outline"
+              >Refresh</Button
+            >
           </div>
           {#if lastJobId}
-            <p class="text-xs text-muted-foreground">Last Job: <code class="bg-muted px-1 rounded">{lastJobId}</code></p>
+            <p class="text-xs text-muted-foreground">
+              Last Job: <code class="bg-muted px-1 rounded">{lastJobId}</code>
+            </p>
           {/if}
           <div class="flex gap-3 text-xs text-muted-foreground">
             <span>Pending: {jobStats.pending}</span>
@@ -295,15 +386,31 @@
         <CardContent class="space-y-3">
           <div class="flex gap-2">
             <Input bind:value={rateLimitKey} placeholder="Key" class="flex-1" />
-            <Input bind:value={rateLimitMax} type="number" placeholder="Limit" class="w-16" />
-            <Input bind:value={rateLimitWindow} type="number" placeholder="Window" class="w-20" />
+            <Input
+              bind:value={rateLimitMax}
+              type="number"
+              placeholder="Limit"
+              class="w-16"
+            />
+            <Input
+              bind:value={rateLimitWindow}
+              type="number"
+              placeholder="Window"
+              class="w-20"
+            />
           </div>
           <div class="flex gap-2">
             <Button onclick={checkRateLimit} size="sm">Check</Button>
-            <Button onclick={resetRateLimit} size="sm" variant="outline">Reset</Button>
+            <Button onclick={resetRateLimit} size="sm" variant="outline"
+              >Reset</Button
+            >
           </div>
           {#if rateLimitResult}
-            <pre class="text-xs p-2 rounded-md overflow-auto {rateLimitResult.allowed === false ? 'bg-destructive/10 text-destructive' : 'bg-muted'}">{JSON.stringify(rateLimitResult, null, 2)}</pre>
+            <pre
+              class="text-xs p-2 rounded-md overflow-auto {rateLimitResult.allowed ===
+              false
+                ? 'bg-destructive/10 text-destructive'
+                : 'bg-muted'}">{JSON.stringify(rateLimitResult, null, 2)}</pre>
           {/if}
         </CardContent>
       </Card>
@@ -312,24 +419,35 @@
       <Card>
         <CardHeader>
           <CardTitle>Cron Jobs</CardTitle>
-          <CardDescription>Scheduled tasks with cron expressions</CardDescription>
+          <CardDescription
+            >Scheduled tasks with cron expressions</CardDescription
+          >
         </CardHeader>
         <CardContent class="space-y-3">
-          <Button onclick={refreshCronTasks} size="sm" variant="outline">Refresh Tasks</Button>
+          <Button onclick={refreshCronTasks} size="sm" variant="outline"
+            >Refresh Tasks</Button
+          >
           {#if cronTasks.length > 0}
             <ul class="space-y-2">
               {#each cronTasks as task}
                 <li class="flex items-center gap-2 text-sm">
                   <span class="font-medium">{task.name}</span>
-                  <code class="text-xs bg-muted px-1 rounded">{task.expression}</code>
-                  <Badge variant={task.enabled ? 'success' : 'secondary'} class="text-xs">
-                    {task.enabled ? 'Active' : 'Paused'}
+                  <code class="text-xs bg-muted px-1 rounded"
+                    >{task.expression}</code
+                  >
+                  <Badge
+                    variant={task.enabled ? "success" : "secondary"}
+                    class="text-xs"
+                  >
+                    {task.enabled ? "Active" : "Paused"}
                   </Badge>
                 </li>
               {/each}
             </ul>
           {:else}
-            <p class="text-sm text-muted-foreground italic">No scheduled tasks</p>
+            <p class="text-sm text-muted-foreground italic">
+              No scheduled tasks
+            </p>
           {/if}
         </CardContent>
       </Card>
@@ -338,10 +456,14 @@
       <Card>
         <CardHeader>
           <CardTitle>Events (Pub/Sub)</CardTitle>
-          <CardDescription>Internal event system with wildcards</CardDescription>
+          <CardDescription>Internal event system with wildcards</CardDescription
+          >
         </CardHeader>
         <CardContent class="space-y-3">
-          <Input bind:value={eventName} placeholder="Event name (e.g., demo.test)" />
+          <Input
+            bind:value={eventName}
+            placeholder="Event name (e.g., demo.test)"
+          />
           <textarea
             bind:value={eventData}
             placeholder="JSON data"
@@ -349,7 +471,9 @@
             class="flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           ></textarea>
           <Button onclick={emitEvent} size="sm">Emit Event</Button>
-          <p class="text-xs text-muted-foreground italic">Events matching "demo.*" broadcast to SSE</p>
+          <p class="text-xs text-muted-foreground italic">
+            Events matching "demo.*" broadcast to SSE
+          </p>
         </CardContent>
       </Card>
     </div>
@@ -364,33 +488,48 @@
         <div class="flex items-center gap-2">
           <span class="relative flex h-3 w-3">
             {#if sseConnected}
-              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
-              <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
+              <span
+                class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
+              ></span>
+              <span
+                class="relative inline-flex rounded-full h-3 w-3 bg-green-500"
+              ></span>
             {:else}
-              <span class="relative inline-flex rounded-full h-3 w-3 bg-gray-400"></span>
+              <span
+                class="relative inline-flex rounded-full h-3 w-3 bg-gray-400"
+              ></span>
             {/if}
           </span>
           <span class="text-sm text-muted-foreground">
-            {sseConnected ? 'Connected' : 'Disconnected'} ({sseClients.byChannel} clients)
+            {sseConnected ? "Connected" : "Disconnected"} ({sseClients.byChannel}
+            clients)
           </span>
         </div>
       </CardHeader>
       <CardContent>
         <div class="flex gap-2 mb-4">
           <Button onclick={manualBroadcast} size="sm">Manual Broadcast</Button>
-          <Button onclick={refreshSSEClients} size="sm" variant="outline">Refresh Clients</Button>
+          <Button onclick={refreshSSEClients} size="sm" variant="outline"
+            >Refresh Clients</Button
+          >
         </div>
         {#if events.length === 0}
-          <p class="text-sm text-muted-foreground italic">Waiting for events... (cron broadcasts every 5s)</p>
+          <p class="text-sm text-muted-foreground italic">
+            Waiting for events... (cron broadcasts every 5s)
+          </p>
         {:else}
           <ul class="space-y-2 max-h-80 overflow-y-auto">
             {#each events as event}
               <li
                 class="flex items-center gap-3 p-3 rounded-lg border bg-muted/50 animate-in slide-in-from-left-2 duration-300"
               >
-                <Badge variant={getSourceColor(event.source)}>{getSourceLabel(event.source)}</Badge>
+                <Badge variant={getSourceColor(event.source)}
+                  >{getSourceLabel(event.source)}</Badge
+                >
                 <span class="flex-1 text-sm font-medium">{event.message}</span>
-                <span class="text-xs text-muted-foreground">{new Date(event.timestamp).toLocaleTimeString()}</span>
+                <span class="text-xs text-muted-foreground"
+                  >{new Date(event.timestamp).toLocaleTimeString()}</span
+                >
               </li>
             {/each}
           </ul>