feat(loops): attach a loop to a context in the create form

charlesvien · charlesvien · commit aebc65a99283 · 2026-07-15T23:38:13.000-07:00
diff --git a/packages/api-client/src/loops.ts b/packages/api-client/src/loops.ts
@@ -89,6 +89,33 @@ export namespace LoopSchemas {
     slack: LoopNotificationChannelWrite;
   }>;
 
+  /** What a context-attached loop maintains each run. */
+  export type LoopContextOutputs = {
+    /** File each run into the context's feed as a card. */
+    post_to_feed: boolean;
+    /** Read and republish the context's context.md each run. */
+    update_context: boolean;
+    /** Id of a canvas in this context to keep up to date, or null. */
+    canvas_id: string | null;
+  };
+
+  export type LoopContextOutputsWrite = Partial<LoopContextOutputs>;
+
+  /** The context (a "#channel" / desktop folder) a loop is attached to, plus what it maintains. */
+  export type LoopContextTarget = {
+    /** Desktop folder id of the attached context. */
+    folder_id: string;
+    /** Context (channel) name, used to file runs into its feed. */
+    name: string;
+    outputs: LoopContextOutputs;
+  };
+
+  export type LoopContextTargetWrite = {
+    folder_id: string;
+    name: string;
+    outputs?: LoopContextOutputsWrite;
+  };
+
   export type LoopScheduleTriggerConfig = {
     cron_expression?: string;
     timezone?: string;
@@ -155,6 +182,8 @@ export namespace LoopSchemas {
     behaviors: LoopBehaviors;
     connectors: LoopConnectors;
     notifications: LoopNotifications;
+    /** Context this loop is attached to, or null when unattached. */
+    context_target: LoopContextTarget | null;
     /** Backend-set: internal loops are hidden from the UI (never returned by the
      * list/detail API), so this is effectively always false for loops a client can see. */
     internal: boolean;
@@ -189,6 +218,8 @@ export namespace LoopSchemas {
     behaviors?: LoopBehaviorsWrite;
     connectors?: LoopConnectorsWrite;
     notifications?: LoopNotificationsWrite;
+    /** Context to attach this loop to, or null to detach. */
+    context_target?: LoopContextTargetWrite | null;
     triggers?: Array<LoopTriggerWrite>;
   };
 
diff --git a/packages/ui/src/features/loops/components/LoopContextFields.tsx b/packages/ui/src/features/loops/components/LoopContextFields.tsx
@@ -0,0 +1,152 @@
+import type { LoopSchemas } from "@posthog/api-client/loops";
+import { Switch } from "@posthog/quill";
+import { SettingsOptionSelect } from "@posthog/ui/features/settings/SettingsOptionSelect";
+import { Flex, Text } from "@radix-ui/themes";
+import { useChannels } from "../../canvas/hooks/useChannels";
+import { useDashboards } from "../../canvas/hooks/useDashboards";
+import {
+  defaultLoopContextOutputs,
+  type LoopContextTargetDraft,
+} from "../loopFormTypes";
+
+const NOT_ATTACHED_VALUE = "__none__";
+
+interface LoopContextFieldsProps {
+  value: LoopContextTargetDraft | null;
+  onChange: (value: LoopContextTargetDraft | null) => void;
+  disabled?: boolean;
+}
+
+export function LoopContextFields({
+  value,
+  onChange,
+  disabled,
+}: LoopContextFieldsProps) {
+  const { channels } = useChannels();
+  const { dashboards } = useDashboards(value?.folderId);
+  const hasCanvases = dashboards.length > 0;
+
+  const selectContext = (folderId: string) => {
+    if (folderId === NOT_ATTACHED_VALUE) {
+      onChange(null);
+      return;
+    }
+    const channel = channels.find((c) => c.id === folderId);
+    if (!channel) return;
+    // Carry the output toggles across contexts, but drop a canvas that belonged to the old one.
+    onChange({
+      folderId: channel.id,
+      name: channel.name,
+      outputs: {
+        ...(value?.outputs ?? defaultLoopContextOutputs()),
+        canvas_id: null,
+      },
+    });
+  };
+
+  const patchOutputs = (outputs: Partial<LoopSchemas.LoopContextOutputs>) => {
+    if (!value) return;
+    onChange({ ...value, outputs: { ...value.outputs, ...outputs } });
+  };
+
+  const contextOptions = [
+    { value: NOT_ATTACHED_VALUE, label: "Not attached" },
+    ...channels.map((channel) => ({
+      value: channel.id,
+      label: `#${channel.name}`,
+    })),
+  ];
+
+  return (
+    <Flex direction="column" gap="3">
+      <SettingsOptionSelect
+        value={value?.folderId ?? NOT_ATTACHED_VALUE}
+        options={contextOptions}
+        disabled={disabled}
+        ariaLabel="Context"
+        onValueChange={selectContext}
+      />
+
+      {value ? (
+        <Flex
+          direction="column"
+          gap="3"
+          className="rounded-(--radius-2) border border-border bg-(--color-panel-solid) p-3"
+        >
+          <ToggleRow
+            title="Show runs in the feed"
+            description="Each run appears as a card in this context's feed."
+            checked={value.outputs.post_to_feed}
+            disabled={disabled}
+            onChange={(checked) => patchOutputs({ post_to_feed: checked })}
+          />
+          <ToggleRow
+            title="Keep context.md updated"
+            description="Each run reads this context's context.md and republishes it with the latest state."
+            checked={value.outputs.update_context}
+            disabled={disabled}
+            onChange={(checked) => patchOutputs({ update_context: checked })}
+          />
+          <ToggleRow
+            title="Maintain a canvas"
+            description={
+              hasCanvases
+                ? "Each run rewrites a canvas in this context with fresh content."
+                : "This context has no canvases yet. Create one to keep it up to date here."
+            }
+            checked={!!value.outputs.canvas_id}
+            disabled={disabled || !hasCanvases}
+            onChange={(checked) =>
+              patchOutputs({
+                canvas_id: checked ? (dashboards[0]?.id ?? null) : null,
+              })
+            }
+          />
+          {value.outputs.canvas_id ? (
+            <SettingsOptionSelect
+              value={value.outputs.canvas_id}
+              options={dashboards.map((dashboard) => ({
+                value: dashboard.id,
+                label: dashboard.name,
+              }))}
+              disabled={disabled}
+              ariaLabel="Canvas"
+              onValueChange={(canvasId) =>
+                patchOutputs({ canvas_id: canvasId })
+              }
+            />
+          ) : null}
+        </Flex>
+      ) : null}
+    </Flex>
+  );
+}
+
+function ToggleRow({
+  title,
+  description,
+  checked,
+  onChange,
+  disabled,
+}: {
+  title: string;
+  description: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+}) {
+  return (
+    <Flex align="center" justify="between" gap="3">
+      <Flex direction="column" gap="0" className="min-w-0">
+        <Text className="font-medium text-[13px] text-gray-12">{title}</Text>
+        <Text className="text-[12px] text-gray-10">{description}</Text>
+      </Flex>
+      <Switch
+        checked={checked}
+        disabled={disabled}
+        aria-label={title}
+        onCheckedChange={onChange}
+      />
+    </Flex>
+  );
+}
diff --git a/packages/ui/src/features/loops/components/LoopForm.tsx b/packages/ui/src/features/loops/components/LoopForm.tsx
@@ -24,10 +24,12 @@ import {
   isAutoFixEnabled,
   isLoopFormValid,
   isTriggerDraftValid,
+  type LoopContextTargetDraft,
   type LoopFormValues,
   loopToFormValues,
 } from "../loopFormTypes";
 import { LoopBehaviorFields } from "./LoopBehaviorFields";
+import { LoopContextFields } from "./LoopContextFields";
 import { Field } from "./LoopFormPrimitives";
 import { LoopModelFields } from "./LoopModelFields";
 import { LoopNotificationsFields } from "./LoopNotificationsFields";
@@ -214,6 +216,19 @@ export function LoopForm({ loop }: LoopFormProps) {
 
               <Divider />
 
+              <Field
+                label="Context"
+                hint="Attach this loop to a context to file its runs in the feed and keep its context.md or a canvas up to date."
+              >
+                <LoopContextFields
+                  value={values.contextTarget}
+                  disabled={isSubmitting}
+                  onChange={(contextTarget) => patch({ contextTarget })}
+                />
+              </Field>
+
+              <Divider />
+
               <Field
                 label="Repository"
                 hint={
@@ -477,6 +492,10 @@ function ReviewList({ values }: { values: LoopFormValues }) {
           values.model || "Default model"
         } · ${reasoning} reasoning`}
       />
+      <ReviewRow
+        label="Context"
+        value={describeContext(values.contextTarget)}
+      />
       <ReviewRow
         label="Repository"
         value={
@@ -528,6 +547,17 @@ function ReviewRow({
   );
 }
 
+function describeContext(target: LoopContextTargetDraft | null): string {
+  if (!target) return "Not attached";
+  const outputs: string[] = [];
+  if (target.outputs.post_to_feed) outputs.push("feed");
+  if (target.outputs.update_context) outputs.push("context.md");
+  if (target.outputs.canvas_id) outputs.push("canvas");
+  return outputs.length > 0
+    ? `#${target.name} (${outputs.join(", ")})`
+    : `#${target.name}`;
+}
+
 function describeTrigger(trigger: LoopFormValues["triggers"][number]): string {
   if (trigger.type === "schedule") {
     const config = trigger.config as LoopSchemas.LoopScheduleTriggerConfig;
diff --git a/packages/ui/src/features/loops/loopFormTypes.ts b/packages/ui/src/features/loops/loopFormTypes.ts
@@ -16,6 +16,14 @@ export interface LoopTriggerDraft {
   config: LoopSchemas.LoopTriggerConfig;
 }
 
+/** The context a loop is attached to in the form. `null` on `LoopFormValues.contextTarget`
+ * means the loop isn't attached to any context. */
+export interface LoopContextTargetDraft {
+  folderId: string;
+  name: string;
+  outputs: LoopSchemas.LoopContextOutputs;
+}
+
 export interface LoopFormValues {
   name: string;
   description: string;
@@ -33,6 +41,7 @@ export interface LoopFormValues {
   triggers: LoopTriggerDraft[];
   behaviors: LoopSchemas.LoopBehaviors;
   notifications: LoopSchemas.LoopNotifications;
+  contextTarget: LoopContextTargetDraft | null;
 }
 
 export function emptyLoopScheduleTriggerConfig(): LoopSchemas.LoopScheduleTriggerConfig {
@@ -61,6 +70,12 @@ export function defaultLoopBehaviors(): LoopSchemas.LoopBehaviors {
   };
 }
 
+/** Sensible defaults when a loop is first attached to a context: file its runs into the
+ * feed, but don't touch context.md or a canvas until the user opts in. */
+export function defaultLoopContextOutputs(): LoopSchemas.LoopContextOutputs {
+  return { post_to_feed: true, update_context: false, canvas_id: null };
+}
+
 /** The single "Auto-fix pull requests" toggle drives both CI-watching and
  * review-comment fixing; it reads as on only when both are on. */
 export function isAutoFixEnabled(
@@ -96,6 +111,7 @@ export function emptyLoopFormValues(): LoopFormValues {
     triggers: [],
     behaviors: defaultLoopBehaviors(),
     notifications: defaultLoopNotifications(),
+    contextTarget: null,
   };
 }
 
@@ -118,6 +134,13 @@ export function loopToFormValues(loop: LoopSchemas.Loop): LoopFormValues {
     })),
     behaviors: loop.behaviors,
     notifications: loop.notifications,
+    contextTarget: loop.context_target
+      ? {
+          folderId: loop.context_target.folder_id,
+          name: loop.context_target.name,
+          outputs: loop.context_target.outputs,
+        }
+      : null,
   };
 }
 
@@ -141,6 +164,13 @@ export function formValuesToLoopWrite(
     })),
     behaviors: values.behaviors,
     notifications: values.notifications,
+    context_target: values.contextTarget
+      ? {
+          folder_id: values.contextTarget.folderId,
+          name: values.contextTarget.name,
+          outputs: values.contextTarget.outputs,
+        }
+      : null,
   };
 }
 
