feat(admin): add DO & reconcile events card to kiloclaw instance detail (#1392)

## Summary

Add a "DO & Reconcile Events" card to the KiloClaw admin instance detail
page that queries Cloudflare Analytics Engine for the 20 most recent
`do` and `reconcile` delivery events for a given instance.

- New API route (`/admin/api/kiloclaw-analytics`) queries the
`kiloclaw_events` AE dataset, reusing existing `R2_ACCOUNT_ID` and
`CF_ANALYTICS_ENGINE_TOKEN` credentials (same as gastown-analytics).
- New React Query hook (`useKiloclawInstanceEvents`) auto-refreshes
every 60s.
- The card renders a table with Time, Event, Delivery (color-coded
badge), Status, Label, Duration, and Error columns. Placed after the
"Live Worker Status" card on the instance detail page.
- `sandboxId` is validated against base64url charset before SQL
interpolation to prevent injection.

## Verification

- [x] `pnpm typecheck` — pass (root + all 29 workspace projects)
- [x] `pnpm format` — pass (oxfmt)
- [x] `pnpm lint` — pass (oxlint + eslint across all packages)
- [x] Pre-push hooks (format:check, lint, typecheck) — pass
- [ ] Manual verification against live Analytics Engine data

## Visual Changes

| Before | After |
| ------ | ----- |
| No events card on instance detail page | New "DO & Reconcile Events"
card with table between Live Worker Status and Machine Controls |

## Reviewer Notes

- Follows the established `gastown-analytics` pattern (API route + hooks
+ component) exactly.
- The query filters on `blob8` (sandboxId) and `blob3 IN ('do',
'reconcile')` with `LIMIT 20`.
- No new env vars needed — reuses the existing CF Analytics Engine
credentials.

Author: pandemicsyn

src/app/admin/api/kiloclaw-analytics/hooks.ts

@@ -0,0 +1,43 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+
+export type KiloclawEventRow = {
+  timestamp: string;
+  event: string;
+  delivery: string;
+  route: string;
+  error: string;
+  fly_app_name: string;
+  fly_machine_id: string;
+  status: string;
+  openclaw_version: string;
+  image_tag: string;
+  fly_region: string;
+  label: string;
+  duration_ms: number;
+  value: number;
+};
+
+type AnalyticsEngineResponse<T> = {
+  data: T[];
+  meta: { name: string; type: string }[];
+  rows: number;
+};
+
+export function useKiloclawInstanceEvents(sandboxId: string) {
+  return useQuery<AnalyticsEngineResponse<KiloclawEventRow>>({
+    queryKey: ['kiloclaw-analytics', 'instance-events', sandboxId],
+    queryFn: async () => {
+      const response = await fetch(
+        `/admin/api/kiloclaw-analytics?query=instance-events&sandboxId=${encodeURIComponent(sandboxId)}`
+      );
+      if (!response.ok) {
+        throw new Error('Failed to fetch kiloclaw instance events');
+      }
+      return response.json() as Promise<AnalyticsEngineResponse<KiloclawEventRow>>;
+    },
+    enabled: !!sandboxId,
+    refetchInterval: 60000,
+  });
+}

src/app/admin/api/kiloclaw-analytics/route.ts

@@ -0,0 +1,100 @@
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+import { getUserFromAuth } from '@/lib/user.server';
+import { getEnvVariable } from '@/lib/dotenvx';
+
+type QueryType = 'instance-events';
+
+const validQueryTypes = new Set<QueryType>(['instance-events']);
+
+function buildQuery(queryType: QueryType, sandboxId: string): string {
+  // sandboxId is validated as base64url [A-Za-z0-9_-]+ before reaching here
+  switch (queryType) {
+    case 'instance-events':
+      return `SELECT
+  timestamp,
+  blob1 AS event,
+  blob3 AS delivery,
+  blob4 AS route,
+  blob5 AS error,
+  blob6 AS fly_app_name,
+  blob7 AS fly_machine_id,
+  blob9 AS status,
+  blob10 AS openclaw_version,
+  blob11 AS image_tag,
+  blob12 AS fly_region,
+  blob13 AS label,
+  double1 AS duration_ms,
+  double2 AS value
+FROM kiloclaw_events
+WHERE
+  blob8 = '${sandboxId}'
+  AND (blob3 = 'do' OR blob3 = 'reconcile')
+ORDER BY timestamp DESC
+LIMIT 20
+FORMAT JSON`;
+  }
+}
+
+type AnalyticsEngineResponse = {
+  data: Record<string, unknown>[];
+  meta: { name: string; type: string }[];
+  rows: number;
+};
+
+export async function GET(
+  request: NextRequest
+): Promise<NextResponse<{ error: string } | AnalyticsEngineResponse>> {
+  const { authFailedResponse } = await getUserFromAuth({ adminOnly: true });
+  if (authFailedResponse) {
+    return authFailedResponse;
+  }
+
+  const { searchParams } = new URL(request.url);
+  const queryType = searchParams.get('query');
+  const sandboxId = searchParams.get('sandboxId');
+
+  if (!queryType || !validQueryTypes.has(queryType as QueryType)) {
+    return NextResponse.json(
+      { error: `Invalid query type. Must be one of: ${[...validQueryTypes].join(', ')}` },
+      { status: 400 }
+    );
+  }
+
+  if (!sandboxId || !/^[A-Za-z0-9_-]+$/.test(sandboxId)) {
+    return NextResponse.json({ error: 'Invalid or missing sandboxId' }, { status: 400 });
+  }
+
+  const accountId = getEnvVariable('R2_ACCOUNT_ID');
+  const token = getEnvVariable('CF_ANALYTICS_ENGINE_TOKEN');
+
+  if (!accountId || !token) {
+    return NextResponse.json(
+      { error: 'Missing Cloudflare Analytics Engine configuration' },
+      { status: 500 }
+    );
+  }
+
+  const sqlQuery = buildQuery(queryType as QueryType, sandboxId);
+
+  const response = await fetch(
+    `https://api.cloudflare.com/client/v4/accounts/${accountId}/analytics_engine/sql`,
+    {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${token}` },
+      body: sqlQuery,
+    }
+  );
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    console.error('Analytics Engine API error:', response.status, errorText);
+    return NextResponse.json(
+      { error: `Analytics Engine API error: ${response.status}` },
+      { status: 500 }
+    );
+  }
+
+  const result: AnalyticsEngineResponse = await response.json();
+  return NextResponse.json(result);
+}

src/app/admin/components/KiloclawInstances/KiloclawInstanceDetail.tsx

@@ -56,12 +56,17 @@ import {
   CheckCircle2,
   XCircle,
   ShieldAlert,
+  Activity,
 } from 'lucide-react';
 import Link from 'next/link';
 import { formatDistanceToNow } from 'date-fns';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { toast } from 'sonner';
 import { AdminFileEditor } from './AdminFileEditor';
+import {
+  useKiloclawInstanceEvents,
+  type KiloclawEventRow,
+} from '@/app/admin/api/kiloclaw-analytics/hooks';
 
 function formatRelativeTime(timestamp: string | null): string {
   if (!timestamp) return '—';
@@ -844,6 +849,135 @@ function VolumeReassociationCard({
   );
 }
 
+function DeliveryBadge({ delivery }: { delivery: string }) {
+  switch (delivery) {
+    case 'do':
+      return (
+        <Badge className="bg-blue-600 text-xs" variant="default">
+          do
+        </Badge>
+      );
+    case 'reconcile':
+      return (
+        <Badge className="bg-amber-600 text-xs" variant="default">
+          reconcile
+        </Badge>
+      );
+    default:
+      return <Badge variant="outline">{delivery}</Badge>;
+  }
+}
+
+function formatDuration(ms: number): string {
+  if (ms === 0) return '—';
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+function InstanceEventsCard({ sandboxId }: { sandboxId: string }) {
+  const { data, isLoading, error } = useKiloclawInstanceEvents(sandboxId);
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <Activity className="h-5 w-5" />
+          <div>
+            <CardTitle>DO & Reconcile Events</CardTitle>
+            <CardDescription>Recent events from Analytics Engine</CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {isLoading && (
+          <div className="flex items-center gap-2">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            <span className="text-muted-foreground text-sm">Loading events...</span>
+          </div>
+        )}
+
+        {error && (
+          <Alert>
+            <AlertTriangle className="h-4 w-4" />
+            <AlertDescription>
+              {error instanceof Error ? error.message : 'Failed to load events'}
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {data && data.data.length === 0 && (
+          <p className="text-muted-foreground text-sm">No DO or reconcile events found.</p>
+        )}
+
+        {data && data.data.length > 0 && (
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="text-muted-foreground border-b text-left text-xs">
+                  <th className="pr-4 pb-2">Time</th>
+                  <th className="pr-4 pb-2">Event</th>
+                  <th className="pr-4 pb-2">Delivery</th>
+                  <th className="pr-4 pb-2">Status</th>
+                  <th className="pr-4 pb-2">Label</th>
+                  <th className="pr-4 pb-2">Duration</th>
+                  <th className="pb-2">Error</th>
+                </tr>
+              </thead>
+              <tbody>
+                {data.data.map((row: KiloclawEventRow, i: number) => (
+                  <tr key={`${row.timestamp}-${i}`} className="border-b last:border-0">
+                    <td className="py-2 pr-4 whitespace-nowrap">
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <span className="text-xs">
+                            {formatDistanceToNow(new Date(row.timestamp), { addSuffix: true })}
+                          </span>
+                        </TooltipTrigger>
+                        <TooltipContent>{new Date(row.timestamp).toLocaleString()}</TooltipContent>
+                      </Tooltip>
+                    </td>
+                    <td className="py-2 pr-4">
+                      <code className="text-xs">{row.event}</code>
+                    </td>
+                    <td className="py-2 pr-4">
+                      <DeliveryBadge delivery={row.delivery} />
+                    </td>
+                    <td className="py-2 pr-4">
+                      <span className="text-xs">{row.status || '—'}</span>
+                    </td>
+                    <td className="py-2 pr-4">
+                      <span className="text-xs">{row.label || '—'}</span>
+                    </td>
+                    <td className="py-2 pr-4 whitespace-nowrap">
+                      <span className="text-xs">{formatDuration(row.duration_ms)}</span>
+                    </td>
+                    <td className="py-2">
+                      {row.error ? (
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <span className="text-destructive block max-w-[200px] truncate text-xs">
+                              {row.error}
+                            </span>
+                          </TooltipTrigger>
+                          <TooltipContent className="max-w-[400px]">
+                            <p className="break-words text-xs">{row.error}</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      ) : (
+                        <span className="text-muted-foreground text-xs">—</span>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
 /** Strip ANSI escape codes so raw terminal output can render in a browser &lt;pre&gt;. */
 function stripAnsi(raw: string): string {
   // eslint-disable-next-line no-control-regex
@@ -1422,6 +1556,9 @@ export function KiloclawInstanceDetail({ instanceId }: { instanceId: string }) {
           </CardContent>
         </Card>
 
+        {/* DO & Reconcile Events */}
+        {data.sandbox_id && <InstanceEventsCard sandboxId={data.sandbox_id} />}
+
         {/* Machine Controls */}
         {isActive && machineControlsEnabled && (
           <Card>