khotan-data 0.0.1 → 0.1.1

package/dist/templates/var-panel.tsx

@@ -0,0 +1,276 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+// ============================================================================
+// Var Panel — UI for managing plug variables
+// Generated by khotan CLI · https://github.com/khotan-data
+//
+// This file is yours. Restyle, extend, or embed it however you like.
+// It uses shadcn/ui primitives and fetches from /api/khotan/variables.
+// ============================================================================
+
+interface VarField {
+  key: string;
+  label: string;
+  type: "text" | "password" | "url";
+  secret?: boolean;
+  hidden?: boolean;
+  required?: boolean;
+  placeholder?: string;
+  defaultValue?: string;
+}
+
+interface VarPanelProps {
+  plugName: string;
+  label?: string;
+  basePath?: string;
+}
+
+export function VarPanel({
+  plugName,
+  label,
+  basePath = "/api/khotan",
+}: VarPanelProps) {
+  const displayName = label ?? plugName;
+  const [fields, setFields] = useState<VarField[]>([]);
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [formValues, setFormValues] = useState<Record<string, string>>({});
+  const [configured, setConfigured] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+  const [editing, setEditing] = useState(false);
+  const [visibleSecrets, setVisibleSecrets] = useState<Record<string, boolean>>(
+    {},
+  );
+
+  const fetchVariables = useCallback(async () => {
+    try {
+      const res = await fetch(`${basePath}/variables/${plugName}`);
+      if (!res.ok) {
+        setFields([]);
+        setConfigured(false);
+        return;
+      }
+      const data = await res.json();
+      setFields((data.fields ?? []).filter((f: VarField) => !f.hidden));
+      setValues(data.values ?? {});
+      setConfigured(data.configured ?? false);
+      setFormValues(data.configured ? data.values : {});
+      setError(null);
+    } catch {
+      setError("Failed to load variables");
+    } finally {
+      setLoading(false);
+    }
+  }, [basePath, plugName]);
+
+  useEffect(() => {
+    fetchVariables();
+  }, [fetchVariables]);
+
+  async function handleSave() {
+    setSaving(true);
+    setError(null);
+    setSuccess(null);
+    try {
+      const res = await fetch(`${basePath}/variables/${plugName}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(formValues),
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        setError(data.error ?? "Failed to save variables");
+        return;
+      }
+
+      setSuccess("Variables saved");
+      setEditing(false);
+      await fetchVariables();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Network error");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleClear() {
+    setSaving(true);
+    setError(null);
+    setSuccess(null);
+    try {
+      const res = await fetch(`${basePath}/variables/${plugName}`, {
+        method: "DELETE",
+      });
+
+      if (!res.ok && res.status !== 204) {
+        const data = await res.json();
+        setError(data.error ?? "Failed to clear variables");
+        return;
+      }
+
+      setSuccess("Variables cleared");
+      setFormValues({});
+      setEditing(false);
+      await fetchVariables();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Network error");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (loading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm font-medium capitalize">
+            {displayName} Variables
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="h-4 w-2/3 animate-pulse rounded bg-muted" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (fields.length === 0) return null;
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium capitalize">
+          {displayName} Variables
+        </CardTitle>
+        <Badge variant={configured ? "default" : "outline"}>
+          {configured ? "Configured" : "Not Configured"}
+        </Badge>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {error && <p className="text-sm text-destructive">{error}</p>}
+        {success && <p className="text-sm text-green-600">{success}</p>}
+
+        {!editing && configured ? (
+          <div className="space-y-3">
+            <div className="text-xs text-muted-foreground space-y-1">
+              {fields.map((field) => (
+                <p key={field.key}>
+                  <span className="font-medium">{field.label}:</span>{" "}
+                  <code className="bg-muted px-1 py-0.5 rounded text-[11px]">
+                    {field.secret ? "••••••••" : (values[field.key] ?? "—")}
+                  </code>
+                </p>
+              ))}
+            </div>
+            <div className="flex gap-2">
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  setEditing(true);
+                  const prefilled: Record<string, string> = {};
+                  for (const field of fields) {
+                    if (!field.secret && values[field.key]) {
+                      prefilled[field.key] = values[field.key];
+                    }
+                  }
+                  setFormValues(prefilled);
+                  setVisibleSecrets({});
+                  setSuccess(null);
+                }}
+              >
+                Update
+              </Button>
+              <Button
+                size="sm"
+                variant="destructive"
+                onClick={handleClear}
+                disabled={saving}
+              >
+                {saving ? "Clearing..." : "Clear"}
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {fields.map((field) => (
+              <div key={field.key} className="space-y-1">
+                <Label
+                  htmlFor={`var-${plugName}-${field.key}`}
+                  className="text-xs"
+                >
+                  {field.label}
+                  {field.required !== false && (
+                    <span className="text-destructive ml-0.5">*</span>
+                  )}
+                </Label>
+                <div className="relative">
+                  <Input
+                    id={`var-${plugName}-${field.key}`}
+                    type={
+                      field.secret && !visibleSecrets[field.key]
+                        ? "password"
+                        : "text"
+                    }
+                    placeholder={
+                      field.placeholder ??
+                      (field.secret ? "Enter value..." : "")
+                    }
+                    value={formValues[field.key] ?? ""}
+                    onChange={(e) =>
+                      setFormValues((prev) => ({
+                        ...prev,
+                        [field.key]: e.target.value,
+                      }))
+                    }
+                  />
+                  {field.secret && (
+                    <button
+                      type="button"
+                      className="absolute right-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground hover:text-foreground"
+                      onClick={() =>
+                        setVisibleSecrets((prev) => ({
+                          ...prev,
+                          [field.key]: !prev[field.key],
+                        }))
+                      }
+                    >
+                      {visibleSecrets[field.key] ? "Hide" : "Show"}
+                    </button>
+                  )}
+                </div>
+              </div>
+            ))}
+            <div className="flex gap-2">
+              <Button size="sm" onClick={handleSave} disabled={saving}>
+                {saving ? "Saving..." : "Save Variables"}
+              </Button>
+              {editing && (
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    setEditing(false);
+                    setSuccess(null);
+                  }}
+                >
+                  Cancel
+                </Button>
+              )}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/dist/templates/webhook-events-table.tsx

@@ -0,0 +1,241 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+interface WebhookEventItem {
+  id: string;
+  khotanRunId: string;
+  eventType: string;
+  payload: Record<string, unknown>;
+  headers: Record<string, string>;
+  receivedAt: string;
+  handlerName: string | null;
+  handlerType: "catch" | "pass" | null;
+  plugName: string | null;
+  workflowRunId: string | null;
+  runStatus:
+    | "pending"
+    | "running"
+    | "completed"
+    | "partial"
+    | "failed"
+    | "cancelled"
+    | null;
+}
+
+interface PageResponse<T> {
+  items: T[];
+  page: {
+    limit: number;
+    offset: number;
+    hasMore: boolean;
+    prevOffset: number;
+    nextOffset: number;
+  };
+}
+
+const statusVariant = {
+  pending: "outline",
+  running: "secondary",
+  completed: "default",
+  partial: "secondary",
+  failed: "destructive",
+  cancelled: "outline",
+} as const;
+
+function formatDateTime(value: string): string {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date
+    .toISOString()
+    .replace("T", " ")
+    .replace(/\.\d{3}Z$/, " UTC");
+}
+
+function formatHandler(item: WebhookEventItem): string {
+  if (!item.handlerName) return "Unknown";
+  if (!item.handlerType) return item.handlerName;
+  return `${item.handlerType}:${item.handlerName}`;
+}
+
+export function KhotanWebhookEventsTable({
+  pageSize = 10,
+}: { pageSize?: number } = {}) {
+  const [data, setData] = useState<PageResponse<WebhookEventItem> | null>(null);
+  const [offset, setOffset] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function load() {
+      setLoading(true);
+      setError(null);
+      try {
+        const res = await fetch(
+          `/api/khotan/webhook-events?limit=${String(pageSize)}&offset=${String(offset)}`,
+        );
+        if (!res.ok) {
+          throw new Error("Failed to load webhook events");
+        }
+        const json = (await res.json()) as PageResponse<WebhookEventItem>;
+        if (!cancelled) {
+          setData(json);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : "Unknown error");
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, [offset, pageSize, refreshKey]);
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between gap-4">
+        <div>
+          <CardTitle>Webhook Events</CardTitle>
+          <p className="text-sm text-muted-foreground">
+            Recent inbound events captured by Khotan before workflow execution.
+          </p>
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setRefreshKey((v) => v + 1)}
+        >
+          Refresh
+        </Button>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {error ? (
+          <div className="rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">
+            {error}
+          </div>
+        ) : null}
+
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Received</TableHead>
+              <TableHead>Event</TableHead>
+              <TableHead>Handler</TableHead>
+              <TableHead>Plug</TableHead>
+              <TableHead>Run</TableHead>
+              <TableHead>Payload</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              <TableRow>
+                <TableCell
+                  colSpan={6}
+                  className="text-sm text-muted-foreground"
+                >
+                  Loading webhook events...
+                </TableCell>
+              </TableRow>
+            ) : data?.items.length ? (
+              data.items.map((item) => (
+                <TableRow key={item.id}>
+                  <TableCell className="text-sm text-muted-foreground">
+                    {formatDateTime(item.receivedAt)}
+                  </TableCell>
+                  <TableCell className="font-medium">
+                    {item.eventType}
+                  </TableCell>
+                  <TableCell className="text-sm text-muted-foreground">
+                    {formatHandler(item)}
+                  </TableCell>
+                  <TableCell className="text-muted-foreground">
+                    {item.plugName ?? "-"}
+                  </TableCell>
+                  <TableCell className="space-y-1 text-xs">
+                    <div className="font-mono text-muted-foreground">
+                      {item.khotanRunId}
+                    </div>
+                    <div className="flex flex-wrap items-center gap-2">
+                      {item.runStatus ? (
+                        <Badge variant={statusVariant[item.runStatus]}>
+                          {item.runStatus}
+                        </Badge>
+                      ) : null}
+                      <span className="font-mono text-muted-foreground">
+                        {item.workflowRunId ?? "-"}
+                      </span>
+                    </div>
+                  </TableCell>
+                  <TableCell className="max-w-80">
+                    <details>
+                      <summary className="cursor-pointer text-sm text-primary">
+                        View payload
+                      </summary>
+                      <pre className="mt-2 max-h-64 overflow-auto rounded-md bg-muted p-3 text-xs">
+                        {JSON.stringify(item.payload, null, 2)}
+                      </pre>
+                    </details>
+                  </TableCell>
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={6}
+                  className="text-sm text-muted-foreground"
+                >
+                  No webhook events recorded yet.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+
+        <div className="flex items-center justify-between gap-3">
+          <p className="text-sm text-muted-foreground">
+            Page {Math.floor(offset / pageSize) + 1}
+          </p>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={offset === 0 || loading}
+              onClick={() => setOffset(Math.max(offset - pageSize, 0))}
+            >
+              Previous
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={!data?.page.hasMore || loading}
+              onClick={() => setOffset(offset + pageSize)}
+            >
+              Next
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}