@checkstack/automation-frontend 0.5.0 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,76 @@
 # @checkstack/automation-frontend
 
+## 0.6.1
+
+### Patch Changes
+
+- @checkstack/script-packages-frontend@0.3.11
+
+## 0.6.0
+
+### Minor Changes
+
+- 6005271: Add AI "skills" - reusable prompt templates for the chat assistant and the
+  `ai_analyze` automation action. A skill bundles a system-prompt fragment, an
+  optional starter prompt, and (for analyze) suggested output fields, tagged with
+  the surfaces it targets.
+
+  Skills come from two sources merged into one catalogue: builtin skills
+  contributed by core/plugins via the new `aiSkillExtensionPoint`, and GLOBAL
+  user skills authored by operators (new `ai_skill` table) and visible to everyone
+  who can read skills. New access rules `ai.skill.read`, `ai.skill-create.manage`
+  (a dedicated create permission), and `ai.skill.manage` (edit/delete, author-only
+  with admin moderation) gate the feature - all default-on, admin-revocable.
+
+  The chat composer gains a skill picker (its system prompt seeds the turn, its
+  starter prompt seeds the message box); the `ai_analyze` action gains an optional
+  `skillId` that seeds the system prompt, prompt (when blank), and output fields
+  (when none) - explicit config always wins. A new "AI skills" settings page lets
+  operators browse, view full details (prompts + output fields), publish, edit,
+  and delete their global skills. Ships six builtin skills across chat and analyze.
+
+  To support rich pickers, `@checkstack/ui`'s `DynamicForm` gains a `catalog`
+  options style (`x-options-style: "catalog"`, with resolver options carrying an
+  optional `description`) that renders a browsable modal of cards instead of a
+  plain Select, and `@checkstack/backend-api` propagates the new annotation. The
+  shared `PageHeader` now wraps a long subtitle beside its actions instead of
+  letting them overlap.
+
+- 748268c: Add an example-automation template catalogue. Creating a new automation now
+  opens a picker (`/automation/new`) with curated, ready-to-use starting points
+  grouped by category, plus a "Blank automation" option. Selecting a template
+  seeds the editor (the operator still chooses a service account and saves).
+
+  Templates are an extensible registry: external plugins contribute their own via
+  the new `automationTemplateExtensionPoint`, exactly like actions / triggers /
+  artifact types. Every registered template is validated against the LIVE
+  trigger/action/artifact registries at server startup - a template that
+  references a capability that is not installed is withheld with a console
+  warning, and one whose definition no longer validates (interface drift) is
+  withheld with a console error - so a template can never silently drift when an
+  action, trigger, condition, or artifact interface changes.
+
+  Ships five built-in templates spanning incident response and alerting
+  (AI-triage-and-file-Jira-bug, close-Jira-on-recovery, AI-summarize-incident,
+  page-on-call-on-sustained-degradation, AI-severity-escalation).
+
+### Patch Changes
+
+- Updated dependencies [4134ed9]
+- Updated dependencies [6005271]
+- Updated dependencies [748268c]
+- Updated dependencies [4134ed9]
+- Updated dependencies [079369a]
+  - @checkstack/ai-common@0.4.0
+  - @checkstack/ui@1.16.0
+  - @checkstack/automation-common@0.6.0
+  - @checkstack/auth-common@0.9.1
+  - @checkstack/template-engine@0.4.4
+  - @checkstack/gitops-frontend@0.5.7
+  - @checkstack/script-packages-frontend@0.3.10
+  - @checkstack/secrets-frontend@0.2.6
+  - @checkstack/catalog-common@2.3.6
+
 ## 0.5.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/automation-frontend",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -13,18 +13,19 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/auth-common": "0.9.0",
-    "@checkstack/automation-common": "0.5.0",
-    "@checkstack/catalog-common": "2.3.5",
+    "@checkstack/auth-common": "0.9.1",
+    "@checkstack/automation-common": "0.6.0",
+    "@checkstack/ai-common": "0.4.0",
+    "@checkstack/catalog-common": "2.3.6",
     "@checkstack/common": "0.15.0",
     "@checkstack/frontend-api": "0.9.0",
-    "@checkstack/gitops-frontend": "0.5.6",
+    "@checkstack/gitops-frontend": "0.5.7",
     "@checkstack/integration-common": "0.9.0",
-    "@checkstack/script-packages-frontend": "0.3.9",
-    "@checkstack/secrets-frontend": "0.2.5",
+    "@checkstack/script-packages-frontend": "0.3.11",
+    "@checkstack/secrets-frontend": "0.2.6",
     "@checkstack/signal-frontend": "0.2.4",
-    "@checkstack/template-engine": "0.4.3",
-    "@checkstack/ui": "1.15.1",
+    "@checkstack/template-engine": "0.4.4",
+    "@checkstack/ui": "1.16.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",

package/src/editor/action-leaf-cards.tsx

@@ -32,7 +32,7 @@ import type {
 import { useAutomationRegistry } from "./registry-context";
 import { ItemPicker } from "./ItemPicker";
 import { ConditionEditor } from "./ConditionEditor";
-import { useConnectionOptionResolvers } from "./useConnectionOptionResolvers";
+import { useActionOptionResolvers } from "./useActionOptionResolvers";
 import { automationScriptTestRenderer } from "./ScriptTestRenderer";
 import {
   useScriptPackageTypeAcquisition,
@@ -127,7 +127,7 @@ export const ProviderActionBody: React.FC<{
   // `connectionProviderId`; the bridge turns their `x-options-resolver`
   // fields into a live connection picker + cascading provider dropdowns.
   // Non-connection actions get an empty map (no-op) since the id is absent.
-  const optionsResolvers = useConnectionOptionResolvers(
+  const optionsResolvers = useActionOptionResolvers(
     selected?.connectionProviderId,
   );
 

package/src/editor/useActionOptionResolvers.ts

@@ -0,0 +1,51 @@
+import React from "react";
+import { usePluginClient } from "@checkstack/frontend-api";
+import { AiApi } from "@checkstack/ai-common";
+import type { OptionsResolver } from "@checkstack/ui";
+import { useConnectionOptionResolvers } from "./useConnectionOptionResolvers";
+
+/**
+ * The `x-options-resolver` name the `ai_analyze` action declares for its
+ * `skillId` field. Resolved here (NOT through the connection bridge) because
+ * skills are not connection-scoped: the connection bridge returns `[]` whenever
+ * no `connectionId` is selected, which would wrongly empty the skill dropdown.
+ */
+const AI_SKILL_RESOLVER_NAME = "aiSkillOptions";
+
+/**
+ * Resolver map for an action editor's `x-options-resolver` config fields.
+ *
+ * Composes the connection-backed resolvers (connection picker + cascading
+ * provider dropdowns) with non-connection resolvers that need their own data
+ * source. Today the only non-connection resolver is `aiSkillOptions`, which
+ * lists the AI skills targeting the `ai_analyze` action via `listSkills` -
+ * independent of any selected connection.
+ */
+export function useActionOptionResolvers(
+  connectionProviderId?: string,
+): Record<string, OptionsResolver> {
+  const connectionResolvers = useConnectionOptionResolvers(connectionProviderId);
+  const aiClient = usePluginClient(AiApi);
+
+  return React.useMemo(() => {
+    const skillResolver: OptionsResolver = async () => {
+      const { skills } = await aiClient.listSkills.call({ target: "ai_analyze" });
+      return skills.map((skill) => ({
+        value: skill.id,
+        label: skill.name,
+        description: skill.description,
+      }));
+    };
+
+    return new Proxy<Record<string, OptionsResolver>>(
+      {},
+      {
+        get: (_target, prop) => {
+          if (prop === AI_SKILL_RESOLVER_NAME) return skillResolver;
+          if (typeof prop !== "string") return;
+          return connectionResolvers[prop];
+        },
+      },
+    );
+  }, [connectionResolvers, aiClient]);
+}

package/src/index.tsx

@@ -20,7 +20,8 @@ export {
  * Routes:
  *
  *   - `/automation/`                          → list view
- *   - `/automation/new`                       → blank edit page (create)
+ *   - `/automation/new`                       → template picker (create)
+ *   - `/automation/new/blank`                 → blank / template-seeded editor
  *   - `/automation/:automationId`             → edit page
  *   - `/automation/:automationId/runs`        → run history
  *   - `/automation/:automationId/runs/:runId` → single run drill-down
@@ -53,6 +54,15 @@ export default createFrontendPlugin({
     },
     {
       route: automationRoutes.routes.create,
+      load: () =>
+        import("./pages/AutomationTemplatePickerPage").then((m) => ({
+          default: m.AutomationTemplatePickerPage,
+        })),
+      title: "New automation",
+      accessRule: automationAccess.manage,
+    },
+    {
+      route: automationRoutes.routes.createBlank,
       load: () =>
         import("./pages/AutomationEditPage").then((m) => ({
           default: m.AutomationEditPage,

package/src/pages/AutomationEditPage.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link, useNavigate, useParams } from "react-router-dom";
+import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
 import {
   ChevronLeft,
   History as HistoryIcon,
@@ -99,6 +99,7 @@ type EditTab = "visual" | "yaml";
  */
 const AutomationEditContent: React.FC = () => {
   const { automationId } = useParams<{ automationId: string }>();
+  const [searchParams] = useSearchParams();
   const isNew = !automationId || automationId === "new";
   const client = usePluginClient(AutomationApi);
   const accessApi = useApi(accessApiRef);
@@ -183,6 +184,35 @@ const AutomationEditContent: React.FC = () => {
     },
   );
 
+  // Template seeding (new automations only): `/automation/new/blank?template=<id>`
+  // pre-fills the editor from a curated example template. The template's
+  // `definition` seeds the canonical state once; the operator still picks a
+  // `runAs` service account and saves. `enabled: false` on the query keeps it
+  // off the wire for blank (no-template) and existing-automation editors.
+  const templateId = isNew ? searchParams.get("template") : null;
+  const templatesQuery = client.listAutomationTemplates.useQuery(undefined, {
+    enabled: Boolean(templateId),
+    gcTime: 0,
+  });
+  const selectedTemplate = templateId
+    ? templatesQuery.data?.items.find((t) => t.id === templateId)
+    : undefined;
+  useInitOnceForKey(
+    templatesQuery.isFetchedAfterMount ? selectedTemplate : undefined,
+    selectedTemplate?.id,
+    (template) => {
+      const normalized: AutomationDefinition = {
+        ...template.definition,
+        triggers: assignDefaultTriggerIds(template.definition.triggers),
+        actions: assignDefaultIds(template.definition.actions, new Set()),
+      };
+      setName(template.definition.name);
+      setDescription(template.definition.description ?? "");
+      setDefinition(normalized);
+      setYamlText(stringifyYaml(normalized));
+    },
+  );
+
   // Keep the YAML mirror in sync with definition while the visual editor
   // is active — the YAML tab needs a non-stale starting point when the
   // operator switches over.

package/src/pages/AutomationTemplatePickerPage.tsx

@@ -0,0 +1,152 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { Workflow, FilePlus2, ArrowRight } from "lucide-react";
+import {
+  usePluginClient,
+  accessApiRef,
+  useApi,
+  wrapInSuspense,
+} from "@checkstack/frontend-api";
+import {
+  AutomationApi,
+  automationAccess,
+  automationRoutes,
+  type AutomationTemplate,
+} from "@checkstack/automation-common";
+import {
+  PageLayout,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Button,
+  Badge,
+  DynamicIcon,
+  LoadingSpinner,
+  QueryErrorState,
+} from "@checkstack/ui";
+import { resolveRoute } from "@checkstack/common";
+
+/**
+ * Landing page for "create a new automation". Presents a "Blank automation"
+ * option plus a gallery of curated example templates (grouped by category)
+ * contributed by core + plugins. Picking a template opens the blank editor
+ * pre-seeded from it (`/automation/new/blank?template=<id>`); the operator
+ * still chooses a service account and saves.
+ */
+const AutomationTemplatePickerContent: React.FC = () => {
+  const client = usePluginClient(AutomationApi);
+  const accessApi = useApi(accessApiRef);
+  const navigate = useNavigate();
+
+  const { allowed: canManage, loading: accessLoading } = accessApi.useAccess(
+    automationAccess.manage,
+  );
+
+  const query = client.listAutomationTemplates.useQuery();
+
+  const startBlank = () =>
+    navigate(resolveRoute(automationRoutes.routes.createBlank));
+
+  const openTemplate = (template: AutomationTemplate) =>
+    navigate(
+      `${resolveRoute(automationRoutes.routes.createBlank)}?template=${encodeURIComponent(
+        template.id,
+      )}`,
+    );
+
+  // Group templates by category, preserving first-seen category order.
+  const grouped = React.useMemo(() => {
+    const byCategory = new Map<string, AutomationTemplate[]>();
+    for (const template of query.data?.items ?? []) {
+      const list = byCategory.get(template.category) ?? [];
+      list.push(template);
+      byCategory.set(template.category, list);
+    }
+    return [...byCategory.entries()];
+  }, [query.data]);
+
+  return (
+    <PageLayout
+      title="New automation"
+      subtitle="Start from a curated example or build your own from scratch"
+      icon={Workflow}
+      loading={accessLoading}
+      allowed={canManage}
+    >
+      <div className="space-y-6">
+        <Card>
+          <CardContent className="flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:justify-between">
+            <div className="flex items-center gap-3">
+              <div className="flex h-10 w-10 items-center justify-center rounded-md bg-muted">
+                <FilePlus2 className="h-5 w-5 text-muted-foreground" />
+              </div>
+              <div>
+                <div className="font-medium">Blank automation</div>
+                <div className="text-sm text-muted-foreground">
+                  Start with an empty editor and add triggers and actions yourself.
+                </div>
+              </div>
+            </div>
+            <Button onClick={startBlank}>
+              Start blank
+              <ArrowRight className="ml-1 h-4 w-4" />
+            </Button>
+          </CardContent>
+        </Card>
+
+        {query.isLoading ? (
+          <div className="p-6">
+            <LoadingSpinner />
+          </div>
+        ) : query.isError ? (
+          <QueryErrorState error={query.error} onRetry={() => query.refetch()} />
+        ) : (
+          grouped.map(([category, items]) => (
+            <section key={category} className="space-y-3">
+              <h2 className="text-sm font-semibold text-muted-foreground">
+                {category}
+              </h2>
+              <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+                {items.map((template) => (
+                  <Card
+                    key={template.id}
+                    className="flex h-full cursor-pointer flex-col transition-colors hover:border-primary"
+                    onClick={() => openTemplate(template)}
+                  >
+                    <CardHeader className="flex-row items-start gap-3 space-y-0">
+                      <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+                        <DynamicIcon name={template.icon} className="h-5 w-5" />
+                      </div>
+                      <CardTitle className="text-base leading-snug">
+                        {template.name}
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent className="flex flex-1 flex-col justify-between gap-3">
+                      <p className="text-sm text-muted-foreground">
+                        {template.description}
+                      </p>
+                      <div className="flex items-center justify-between">
+                        <Badge variant="secondary" className="font-normal">
+                          {template.ownerPluginId}
+                        </Badge>
+                        <span className="flex items-center text-sm font-medium text-primary">
+                          Use template
+                          <ArrowRight className="ml-1 h-4 w-4" />
+                        </span>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </section>
+          ))
+        )}
+      </div>
+    </PageLayout>
+  );
+};
+
+export const AutomationTemplatePickerPage = wrapInSuspense(
+  AutomationTemplatePickerContent,
+);

package/tsconfig.json

@@ -4,6 +4,9 @@
     "src"
   ],
   "references": [
+    {
+      "path": "../ai-common"
+    },
     {
       "path": "../auth-common"
     },