feat(loops): add operations template category and sidebar alpha badge

Author: charlesvien

packages/ui/src/features/loops/components/LoopsListView.tsx

@@ -13,7 +13,12 @@ import { Flex, Heading, IconButton, Text } from "@radix-ui/themes";
 import { useMemo, useState } from "react";
 import { useLoops } from "../hooks/useLoops";
 import { useLoopDraftStore } from "../loopDraftStore";
-import { LOOP_TEMPLATES, type LoopTemplate } from "../loopTemplates";
+import {
+  LOOP_TEMPLATE_CATEGORIES,
+  LOOP_TEMPLATES,
+  type LoopTemplate,
+  type LoopTemplateCategory,
+} from "../loopTemplates";
 import { LoopRow } from "./LoopRow";
 
 const EXAMPLE_PROMPTS = [
@@ -25,6 +30,8 @@ const EXAMPLE_PROMPTS = [
 export function LoopsListView() {
   const { data: loops, isLoading, isError, error } = useLoops();
   const [prompt, setPrompt] = useState("");
+  const [templateCategory, setTemplateCategory] =
+    useState<LoopTemplateCategory>("engineering");
 
   const headerContent = useMemo(
     () => (
@@ -114,11 +121,31 @@ export function LoopsListView() {
           )}
 
           <Flex direction="column" gap="3">
-            <Text className="font-medium text-[12px] text-gray-10 uppercase tracking-wide">
-              Start from a template
-            </Text>
+            <Flex align="center" justify="between" gap="3">
+              <Text className="font-medium text-[12px] text-gray-10 uppercase tracking-wide">
+                Start from a template
+              </Text>
+              <Flex className="gap-0.5 rounded-full border border-gray-5 bg-gray-2 p-0.5">
+                {LOOP_TEMPLATE_CATEGORIES.map((option) => (
+                  <button
+                    key={option.value}
+                    type="button"
+                    onClick={() => setTemplateCategory(option.value)}
+                    className={`rounded-full px-3 py-1 text-xs transition-colors ${
+                      templateCategory === option.value
+                        ? "bg-(--gray-4) text-gray-12"
+                        : "text-gray-10 hover:text-gray-12"
+                    }`}
+                  >
+                    {option.label}
+                  </button>
+                ))}
+              </Flex>
+            </Flex>
             <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-              {LOOP_TEMPLATES.map((template) => (
+              {LOOP_TEMPLATES.filter(
+                (template) => template.category === templateCategory,
+              ).map((template) => (
                 <TemplateCard
                   key={template.id}
                   template={template}

packages/ui/src/features/loops/loopTemplates.ts

@@ -1,11 +1,16 @@
 import {
   Bug,
+  ChartLine,
+  ChatCircleText,
   GitPullRequest,
   type Icon,
+  Lifebuoy,
   ListChecks,
   NotePencil,
   Package,
+  Sun,
   TestTube,
+  Warning,
 } from "@phosphor-icons/react";
 import type { LoopSchemas } from "@posthog/api-client/loops";
 import {
@@ -14,8 +19,19 @@ import {
   nextDraftTriggerKey,
 } from "./loopFormTypes";
 
+export type LoopTemplateCategory = "engineering" | "operations";
+
+export const LOOP_TEMPLATE_CATEGORIES: {
+  value: LoopTemplateCategory;
+  label: string;
+}[] = [
+  { value: "engineering", label: "Engineering" },
+  { value: "operations", label: "Operations" },
+];
+
 export interface LoopTemplate {
   id: string;
+  category: LoopTemplateCategory;
   icon: Icon;
   name: string;
   description: string;
@@ -51,6 +67,7 @@ function githubDraft(
 export const LOOP_TEMPLATES: LoopTemplate[] = [
   {
     id: "pr-review-digest",
+    category: "engineering",
     icon: GitPullRequest,
     name: "PR review digest",
     description:
@@ -67,6 +84,7 @@ export const LOOP_TEMPLATES: LoopTemplate[] = [
   },
   {
     id: "ci-failure-summary",
+    category: "engineering",
     icon: Bug,
     name: "CI failure summary",
     description:
@@ -83,6 +101,7 @@ export const LOOP_TEMPLATES: LoopTemplate[] = [
   },
   {
     id: "flaky-test-tracker",
+    category: "engineering",
     icon: TestTube,
     name: "Flaky test tracker",
     description:
@@ -99,6 +118,7 @@ export const LOOP_TEMPLATES: LoopTemplate[] = [
   },
   {
     id: "dependency-update-check",
+    category: "engineering",
     icon: Package,
     name: "Dependency update check",
     description:
@@ -115,6 +135,7 @@ export const LOOP_TEMPLATES: LoopTemplate[] = [
   },
   {
     id: "release-notes-drafter",
+    category: "engineering",
     icon: NotePencil,
     name: "Release notes drafter",
     description:
@@ -131,6 +152,7 @@ export const LOOP_TEMPLATES: LoopTemplate[] = [
   },
   {
     id: "issue-triage",
+    category: "engineering",
     icon: ListChecks,
     name: "Issue triage",
     description:
@@ -145,4 +167,106 @@ export const LOOP_TEMPLATES: LoopTemplate[] = [
       triggers: [githubDraft(["issues"])],
     }),
   },
+  {
+    id: "standup-summary",
+    category: "operations",
+    icon: Sun,
+    name: "Standup summary",
+    description:
+      "Post a morning summary of what the team shipped yesterday and what's in progress.",
+    triggerLabel: "Runs weekdays at 9:00",
+    worksWith: ["GitHub", "Slack"],
+    tone: "amber",
+    build: () => ({
+      name: "Standup summary",
+      instructions:
+        "Summarize what the team shipped yesterday (merged PRs, closed issues) and what is currently in progress. Keep it short and skimmable, then post it to the standup channel.",
+      triggers: [scheduleDraft("0 9 * * 1-5")],
+    }),
+  },
+  {
+    id: "weekly-review",
+    category: "operations",
+    icon: ChartLine,
+    name: "Weekly review",
+    description:
+      "A Friday summary of the week's shipped work and what's carrying into next week.",
+    triggerLabel: "Runs Fridays at 16:00",
+    worksWith: ["GitHub", "Slack"],
+    tone: "blue",
+    build: () => ({
+      name: "Weekly review",
+      instructions:
+        "Write a review of the week: the PRs merged, issues closed, and notable changes, plus what is still open and carrying into next week. Post it to the team channel.",
+      triggers: [scheduleDraft("0 16 * * 5")],
+    }),
+  },
+  {
+    id: "support-ticket-triage",
+    category: "operations",
+    icon: Lifebuoy,
+    name: "Support ticket triage",
+    description:
+      "Triage new support tickets: categorize, set priority, and draft a reply for approval.",
+    triggerLabel: "Runs every hour",
+    worksWith: ["Linear", "Slack"],
+    tone: "teal",
+    build: () => ({
+      name: "Support ticket triage",
+      instructions:
+        "Review support tickets opened since the last run. Categorize each, set a priority, link any related issue, and draft a reply for a human to approve before it's sent.",
+      triggers: [scheduleDraft("0 * * * *")],
+    }),
+  },
+  {
+    id: "incident-digest",
+    category: "operations",
+    icon: Warning,
+    name: "Incident digest",
+    description:
+      "Summarize open incidents and alerts and their current status each morning.",
+    triggerLabel: "Runs daily at 8:00",
+    worksWith: ["Sentry", "Slack"],
+    tone: "red",
+    build: () => ({
+      name: "Incident digest",
+      instructions:
+        "Summarize the open incidents and active alerts, their severity, and current status. Flag anything that has been open too long, then post the digest to the on-call channel.",
+      triggers: [scheduleDraft("0 8 * * *")],
+    }),
+  },
+  {
+    id: "metrics-digest",
+    category: "operations",
+    icon: ChartLine,
+    name: "Metrics digest",
+    description:
+      "Summarize key product metrics week over week and flag notable changes.",
+    triggerLabel: "Runs Mondays at 9:00",
+    worksWith: ["PostHog", "Slack"],
+    tone: "purple",
+    build: () => ({
+      name: "Metrics digest",
+      instructions:
+        "Pull the key product metrics for the last week, compare them to the prior week, and call out anything that moved notably. Post a short digest to the team channel.",
+      triggers: [scheduleDraft("0 9 * * 1")],
+    }),
+  },
+  {
+    id: "changelog-drafter",
+    category: "operations",
+    icon: ChatCircleText,
+    name: "Changelog drafter",
+    description:
+      "Draft a weekly customer-facing changelog from the changes that shipped.",
+    triggerLabel: "Runs Fridays at 15:00",
+    worksWith: ["GitHub"],
+    tone: "green",
+    build: () => ({
+      name: "Changelog drafter",
+      instructions:
+        "From the pull requests merged this week, draft a customer-facing changelog: group related changes, write plain-language entries, and leave anything internal out. Save it as a draft for review.",
+      triggers: [scheduleDraft("0 15 * * 5")],
+    }),
+  },
 ];