@checkstack/automation-frontend 0.2.0

package/src/pages/RunsPage.tsx

@@ -0,0 +1,233 @@
+import React from "react";
+import { Link, useParams } from "react-router-dom";
+import { History, ChevronLeft } from "lucide-react";
+import {
+  usePluginClient,
+  accessApiRef,
+  useApi,
+  wrapInSuspense,
+} from "@checkstack/frontend-api";
+import {
+  AutomationApi,
+  automationAccess,
+  automationRoutes,
+} from "@checkstack/automation-common";
+import type { RunStatus } from "@checkstack/automation-common";
+import {
+  PageLayout,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Badge,
+  Button,
+  Table,
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell,
+  LoadingSpinner,
+  QueryErrorState,
+  EmptyState,
+} from "@checkstack/ui";
+import { resolveRoute } from "@checkstack/common";
+import { formatDistanceToNow } from "date-fns";
+
+const RUN_STATUS_VARIANT: Record<
+  RunStatus,
+  "default" | "secondary" | "outline" | "destructive" | "success" | "warning"
+> = {
+  pending: "outline",
+  running: "secondary",
+  waiting: "warning",
+  success: "success",
+  failed: "destructive",
+  cancelled: "outline",
+  skipped: "outline",
+};
+
+/**
+ * Run history for a single automation. Status filter pinned to the top;
+ * rows link to the run detail page. We also surface a `← Back to
+ * automation` link in the header — the most common navigation from this
+ * page is back to the parent edit page, not back to the list.
+ */
+const RunsPageContent: React.FC = () => {
+  const { automationId } = useParams<{ automationId: string }>();
+  const client = usePluginClient(AutomationApi);
+  const accessApi = useApi(accessApiRef);
+  const { allowed, loading: accessLoading } = accessApi.useAccess(
+    automationAccess.read,
+  );
+  const [statusFilter, setStatusFilter] = React.useState<RunStatus | "all">(
+    "all",
+  );
+
+  const automationQuery = client.getAutomation.useQuery(
+    { id: automationId ?? "" },
+    // Drop the cache entry as soon as this page unmounts: the editor seeds its
+    // form from this same `getAutomation` cache key once, and a lingering entry
+    // here would let it seed pre-edit (stale) data. See AutomationEditPage.
+    { enabled: Boolean(automationId), gcTime: 0 },
+  );
+
+  const runsQuery = client.listRuns.useQuery(
+    {
+      automationId: automationId ?? "",
+      limit: 50,
+      ...(statusFilter === "all" ? {} : { status: statusFilter }),
+    },
+    { enabled: Boolean(automationId) },
+  );
+
+  const runs = runsQuery.data?.items ?? [];
+
+  return (
+    <PageLayout
+      title={
+        automationQuery.data
+          ? `${automationQuery.data.name} — runs`
+          : "Run history"
+      }
+      subtitle="Past executions of this automation"
+      icon={History}
+      loading={accessLoading}
+      allowed={allowed}
+      actions={
+        automationId && (
+          <Link
+            to={resolveRoute(automationRoutes.routes.edit, { automationId })}
+          >
+            <Button variant="outline" size="sm">
+              <ChevronLeft className="mr-1 h-4 w-4" />
+              Back to automation
+            </Button>
+          </Link>
+        )
+      }
+    >
+      <Card>
+        <CardHeader className="border-b">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+            <CardTitle className="text-base">Runs</CardTitle>
+            <div className="flex flex-wrap items-center gap-1">
+              {(
+                [
+                  "all",
+                  "running",
+                  "success",
+                  "failed",
+                  "cancelled",
+                  "waiting",
+                ] as const
+              ).map((option) => (
+                <Button
+                  key={option}
+                  size="sm"
+                  variant={statusFilter === option ? "primary" : "outline"}
+                  onClick={() => setStatusFilter(option)}
+                  className="capitalize"
+                >
+                  {option}
+                </Button>
+              ))}
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="p-0">
+          {runsQuery.isLoading ? (
+            <div className="p-6">
+              <LoadingSpinner />
+            </div>
+          ) : runsQuery.isError ? (
+            <QueryErrorState
+              error={runsQuery.error}
+              onRetry={() => runsQuery.refetch()}
+            />
+          ) : runs.length === 0 ? (
+            <EmptyState
+              icon={<History className="h-8 w-8 text-muted-foreground" />}
+              title="No runs match this filter"
+              description="Manually trigger the automation from the edit page to generate a run."
+            />
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Trigger</TableHead>
+                  <TableHead>Started</TableHead>
+                  <TableHead>Duration</TableHead>
+                  <TableHead className="w-24 text-right" />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {runs.map((run) => (
+                  <TableRow key={run.id}>
+                    <TableCell>
+                      <Badge
+                        variant={RUN_STATUS_VARIANT[run.status] ?? "outline"}
+                        className="capitalize"
+                      >
+                        {run.status}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>
+                      <code className="font-mono text-xs">
+                        {run.triggerEventId || "manual"}
+                      </code>
+                    </TableCell>
+                    <TableCell>
+                      <span className="text-xs text-muted-foreground">
+                        {formatDistanceToNow(new Date(run.startedAt), {
+                          addSuffix: true,
+                        })}
+                      </span>
+                    </TableCell>
+                    <TableCell>
+                      <span className="text-xs text-muted-foreground">
+                        {formatDuration(run.startedAt, run.finishedAt)}
+                      </span>
+                    </TableCell>
+                    <TableCell className="text-right">
+                      {automationId && (
+                        <Link
+                          to={resolveRoute(
+                            automationRoutes.routes.runDetail,
+                            {
+                              automationId,
+                              runId: run.id,
+                            },
+                          )}
+                        >
+                          <Button variant="ghost" size="sm">
+                            Open
+                          </Button>
+                        </Link>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+    </PageLayout>
+  );
+};
+
+function formatDuration(
+  startedAt: Date | string,
+  finishedAt: Date | string | null | undefined,
+): string {
+  if (!finishedAt) return "—";
+  const ms =
+    new Date(finishedAt).getTime() - new Date(startedAt).getTime();
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${Math.round(ms / 60_000)}m`;
+}
+
+export const RunsPage = wrapInSuspense(RunsPageContent);

package/src/pages/TemplatePlaygroundPage.tsx

@@ -0,0 +1,224 @@
+import React from "react";
+import { FlaskConical } from "lucide-react";
+import {
+  usePluginClient,
+  accessApiRef,
+  useApi,
+  wrapInSuspense,
+} from "@checkstack/frontend-api";
+import {
+  AutomationApi,
+  automationAccess,
+} from "@checkstack/automation-common";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Button,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  CodeEditor,
+  PageLayout,
+  Alert,
+  AlertTitle,
+  AlertDescription,
+  Label,
+} from "@checkstack/ui";
+import { extractErrorMessage } from "@checkstack/common";
+
+const DEFAULT_TEMPLATE = `Hello {{ trigger.payload.title }}!
+
+The incident severity is {{ trigger.payload.severity | upper }}.`;
+
+const DEFAULT_CONTEXT = `{
+  "trigger": {
+    "event": "incident.created",
+    "payload": {
+      "incidentId": "INC-42",
+      "title": "API latency spike",
+      "severity": "high"
+    }
+  }
+}`;
+
+/**
+ * Live template-engine playground. Two editors on top — template body
+ * (with `{{ }}` syntax) and sample JSON context — and a button that
+ * sends both to the `renderTemplate` RPC; the result drops into the
+ * output card at the bottom.
+ *
+ * Switching the mode between `template` and `condition` swaps which
+ * field on the response is rendered (`output` for templates,
+ * `booleanResult` for conditions). Parse errors come back with a
+ * `line` / `column` so the alert can point the operator at the right
+ * spot — Monaco doesn't get inline markers yet (that's a Phase 12.x
+ * polish), but the message text is precise.
+ */
+const TemplatePlaygroundContent: React.FC = () => {
+  const client = usePluginClient(AutomationApi);
+  const accessApi = useApi(accessApiRef);
+  const { allowed, loading: accessLoading } = accessApi.useAccess(
+    automationAccess.read,
+  );
+
+  const [template, setTemplate] = React.useState(DEFAULT_TEMPLATE);
+  const [contextText, setContextText] = React.useState(DEFAULT_CONTEXT);
+  const [mode, setMode] = React.useState<"template" | "condition">("template");
+  const [result, setResult] = React.useState<
+    | { kind: "ok"; output?: string; booleanResult?: boolean }
+    | { kind: "err"; message: string; line?: number; column?: number }
+    | null
+  >(null);
+
+  const renderMutation = client.renderTemplate.useMutation({
+    onSuccess: (data) => {
+      if (data.success) {
+        setResult({
+          kind: "ok",
+          output: data.output,
+          booleanResult: data.booleanResult,
+        });
+      } else if (data.error) {
+        setResult({
+          kind: "err",
+          message: data.error.message,
+          line: data.error.line,
+          column: data.error.column,
+        });
+      } else {
+        setResult({ kind: "err", message: "Unknown rendering error" });
+      }
+    },
+    onError: (error) => {
+      setResult({ kind: "err", message: extractErrorMessage(error) });
+    },
+  });
+
+  const handleRender = () => {
+    let parsedContext: Record<string, unknown> = {};
+    try {
+      parsedContext = JSON.parse(contextText) as Record<string, unknown>;
+    } catch (error) {
+      setResult({
+        kind: "err",
+        message: `Sample context is not valid JSON: ${extractErrorMessage(error)}`,
+      });
+      return;
+    }
+    renderMutation.mutate({
+      template,
+      context: parsedContext,
+      mode,
+    });
+  };
+
+  return (
+    <PageLayout
+      title="Template Playground"
+      subtitle="Test templates and conditions against a sample trigger payload"
+      icon={FlaskConical}
+      loading={accessLoading}
+      allowed={allowed}
+    >
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card>
+          <CardHeader className="border-b">
+            <CardTitle className="text-base flex items-center gap-2">
+              Template
+              <Select
+                value={mode}
+                onValueChange={(value) =>
+                  setMode(value as "template" | "condition")
+                }
+              >
+                <SelectTrigger className="ml-auto h-7 w-36 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="template">Template</SelectItem>
+                  <SelectItem value="condition">Condition</SelectItem>
+                </SelectContent>
+              </Select>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="p-0">
+            <CodeEditor
+              value={template}
+              onChange={setTemplate}
+              language="markdown"
+              minHeight="320px"
+            />
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="border-b">
+            <CardTitle className="text-base">Sample context (JSON)</CardTitle>
+          </CardHeader>
+          <CardContent className="p-0">
+            <CodeEditor
+              value={contextText}
+              onChange={setContextText}
+              language="json"
+              minHeight="320px"
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="mt-4 flex items-center gap-2">
+        <Button
+          type="button"
+          onClick={handleRender}
+          disabled={renderMutation.isPending}
+        >
+          {renderMutation.isPending ? "Rendering…" : "Render"}
+        </Button>
+      </div>
+
+      <Card className="mt-4">
+        <CardHeader className="border-b">
+          <CardTitle className="text-base">Result</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {!result && (
+            <p className="text-sm text-muted-foreground italic">
+              Click Render to evaluate.
+            </p>
+          )}
+          {result?.kind === "ok" && mode === "template" && (
+            <pre className="whitespace-pre-wrap font-mono text-sm">
+              {result.output ?? ""}
+            </pre>
+          )}
+          {result?.kind === "ok" && mode === "condition" && (
+            <Label className="text-sm">
+              Result:{" "}
+              <span className="font-mono">
+                {result.booleanResult === true ? "true" : "false"}
+              </span>
+            </Label>
+          )}
+          {result?.kind === "err" && (
+            <Alert variant="error">
+              <AlertTitle>Render failed</AlertTitle>
+              <AlertDescription>
+                {result.message}
+                {result.line !== undefined && (
+                  <span className="ml-2 text-xs font-mono opacity-70">
+                    (line {result.line}, column {result.column})
+                  </span>
+                )}
+              </AlertDescription>
+            </Alert>
+          )}
+        </CardContent>
+      </Card>
+    </PageLayout>
+  );
+};
+
+export const TemplatePlaygroundPage = wrapInSuspense(TemplatePlaygroundContent);

package/src/script-context.test.ts

@@ -0,0 +1,247 @@
+/**
+ * Tests for the automation-context type-declaration generator.
+ *
+ * Each scenario builds a tiny definition + registry fixture, runs
+ * `generateAutomationContextTypes`, and asserts on key fragments of the
+ * emitted TS source. Full source-equivalence is brittle (whitespace +
+ * field ordering shift with stylistic changes), so the assertions
+ * target the load-bearing semantic invariants.
+ */
+import { describe, expect, it } from "bun:test";
+import type {
+  ArtifactTypeInfo,
+  AutomationDefinition,
+  TriggerInfo,
+} from "@checkstack/automation-common";
+import { generateAutomationContextTypes } from "./script-context";
+
+const incidentCreated: TriggerInfo = {
+  qualifiedId: "incident.created",
+  displayName: "Incident Created",
+  category: "Incidents",
+  ownerPluginId: "incident",
+  payloadSchema: {
+    type: "object",
+    properties: {
+      incidentId: { type: "string" },
+      title: { type: "string" },
+    },
+    required: ["incidentId", "title"],
+  },
+};
+
+const incidentResolved: TriggerInfo = {
+  qualifiedId: "incident.resolved",
+  displayName: "Incident Resolved",
+  category: "Incidents",
+  ownerPluginId: "incident",
+  payloadSchema: {
+    type: "object",
+    properties: {
+      incidentId: { type: "string" },
+      resolvedAt: { type: "string" },
+    },
+    required: ["incidentId"],
+  },
+};
+
+const jiraIssue: ArtifactTypeInfo = {
+  // Qualified id as the registry emits it: `${ownerPluginId}.${localId}`.
+  qualifiedId: "integration-jira.issue",
+  displayName: "Jira Issue",
+  ownerPluginId: "integration-jira",
+  schema: {
+    type: "object",
+    properties: {
+      key: { type: "string" },
+      url: { type: "string" },
+    },
+    required: ["key"],
+  },
+};
+
+function baseDef(
+  overrides: Partial<AutomationDefinition> = {},
+): AutomationDefinition {
+  return {
+    name: "Test",
+    triggers: [{ event: "incident.created" }],
+    conditions: [],
+    actions: [],
+    mode: "single",
+    max_runs: 1,
+    ...overrides,
+  };
+}
+
+describe("generateAutomationContextTypes", () => {
+  it("emits a single-variant trigger union for one subscribed trigger", () => {
+    const { typeDefinitions } = generateAutomationContextTypes({
+      definition: baseDef(),
+      triggers: [incidentCreated, incidentResolved],
+      artifactTypes: [],
+      path: [{ slot: "root", index: 0 }],
+    });
+    expect(typeDefinitions).toContain('readonly event: "incident.created"');
+    // The other registered trigger must NOT appear in the union — it
+    // isn't subscribed by this automation.
+    expect(typeDefinitions).not.toContain('readonly event: "incident.resolved"');
+  });
+
+  it("carries trigger.id (derived) and a shared actor on the trigger union", () => {
+    const { typeDefinitions } = generateAutomationContextTypes({
+      definition: baseDef(),
+      triggers: [incidentCreated, incidentResolved],
+      artifactTypes: [],
+      path: [{ slot: "root", index: 0 }],
+    });
+    // id is a literal, derived from the event when no explicit id is set.
+    expect(typeDefinitions).toContain('readonly id: "incident_created"');
+    // actor is shared across every variant (intersected onto the union).
+    expect(typeDefinitions).toContain("type AutomationActor =");
+    expect(typeDefinitions).toContain("readonly actor: AutomationActor");
+  });
+
+  it("uses explicit trigger ids to discriminate two triggers on the same event", () => {
+    const def = baseDef({
+      triggers: [
+        { event: "incident.created", id: "majors" },
+        { event: "incident.created", id: "minors" },
+      ],
+    });
+    const { typeDefinitions } = generateAutomationContextTypes({
+      definition: def,
+      triggers: [incidentCreated],
+      artifactTypes: [],
+      path: [{ slot: "root", index: 0 }],
+    });
+    expect(typeDefinitions).toContain('readonly id: "majors"');
+    expect(typeDefinitions).toContain('readonly id: "minors"');
+  });
+
+  it("emits a multi-variant discriminated union when multiple triggers are subscribed", () => {
+    const def = baseDef({
+      triggers: [{ event: "incident.created" }, { event: "incident.resolved" }],
+    });
+    const { typeDefinitions } = generateAutomationContextTypes({
+      definition: def,
+      triggers: [incidentCreated, incidentResolved],
+      artifactTypes: [],
+      path: [{ slot: "root", index: 0 }],
+    });
+    expect(typeDefinitions).toContain('readonly event: "incident.created"');
+    expect(typeDefinitions).toContain('readonly event: "incident.resolved"');
+    // Each variant carries its own payload — `title` only appears in the
+    // incident.created arm; `resolvedAt` only in incident.resolved.
+    expect(typeDefinitions).toContain("title");
+    expect(typeDefinitions).toContain("resolvedAt");
+  });
+
+  it("emits artifacts keyed by producing action id, nested by local name", () => {
+    const def = baseDef({
+      actions: [
+        {
+          id: "open_jira",
+          action: "integration-jira.create_issue",
+          config: {},
+          enabled: true,
+          continue_on_error: false,
+        },
+        {
+          action: "automation.notify_user",
+          config: {},
+          enabled: true,
+          continue_on_error: false,
+        },
+      ],
+    });
+    const { typeDefinitions } = generateAutomationContextTypes({
+      definition: def,
+      triggers: [incidentCreated],
+      artifactTypes: [jiraIssue],
+      actions: [
+        // `produces` from listActions is the QUALIFIED artifact type id
+        // (the registry qualifies it on registration), matching `jiraIssue`.
+        {
+          qualifiedId: "integration-jira.create_issue",
+          produces: "integration-jira.issue",
+        },
+        { qualifiedId: "automation.notify_user" },
+      ],
+      path: [{ slot: "root", index: 1 }],
+    });
+    // Keyed by the producing action's id, nested by local artifact name -
+    // mirrors the runtime `artifacts.open_jira.issue.key`.
+    expect(typeDefinitions).toContain('readonly "open_jira"');
+    expect(typeDefinitions).toContain('readonly "issue"');
+    expect(typeDefinitions).toContain("key");
+    expect(typeDefinitions).toContain("url");
+  });
+
+  it("falls back to Record<string, unknown> for artifacts when no producing actions are upstream", () => {
+    const { typeDefinitions } = generateAutomationContextTypes({
+      definition: baseDef(),
+      triggers: [incidentCreated],
+      artifactTypes: [jiraIssue],
+      actions: [],
+      path: [{ slot: "root", index: 0 }],
+    });
+    expect(typeDefinitions).toContain(
+      "readonly artifacts: Record<string, unknown>",
+    );
+  });
+
+  it("emits a repeat context only when the path descends through a repeat", () => {
+    const def = baseDef({
+      actions: [
+        {
+          repeat: {
+            for_each: "{{ trigger.payload.items }}",
+            sequence: [
+              {
+                action: "automation.notify_user",
+                config: {},
+                enabled: true,
+                continue_on_error: false,
+              },
+            ],
+          },
+          enabled: true,
+          continue_on_error: false,
+        },
+      ],
+    });
+    const inside = generateAutomationContextTypes({
+      definition: def,
+      triggers: [incidentCreated],
+      artifactTypes: [],
+      actions: [{ qualifiedId: "automation.notify_user" }],
+      path: [
+        { slot: "root", index: 0 },
+        { slot: "repeat", index: 0 },
+      ],
+    });
+    expect(inside.typeDefinitions).toContain("readonly repeat:");
+    expect(inside.typeDefinitions).toContain("readonly index: number");
+    expect(inside.typeDefinitions).toContain("readonly item: unknown");
+
+    const outside = generateAutomationContextTypes({
+      definition: def,
+      triggers: [incidentCreated],
+      artifactTypes: [],
+      actions: [{ qualifiedId: "automation.notify_user" }],
+      path: [{ slot: "root", index: 0 }],
+    });
+    expect(outside.typeDefinitions).not.toContain("readonly repeat:");
+  });
+
+  it("returns the resolved scope alongside the type definitions for picker reuse", () => {
+    const { scope } = generateAutomationContextTypes({
+      definition: baseDef(),
+      triggers: [incidentCreated],
+      artifactTypes: [],
+      path: [{ slot: "root", index: 0 }],
+    });
+    expect(scope.entries.some((e) => e.path === "trigger")).toBe(true);
+  });
+});