feat(canvas): "Set up a workflow" suggestion on the new-task surfaces

Workflow builds were only discoverable via + > New canvas. Add a canvas-kind
starter card to the channel task suggestions, shown on both new-task surfaces:

- Channel home: selecting it prefills the composer AND arms canvas mode, so
  the submit runs canvas generation (whose unified prompt handles workflow
  intent) instead of creating a plain task.
- New-task screen: TaskInput hands canvas suggestions to the surface, which
  creates a canvas in the channel and opens it with the starter prompt
  dropped into the hero composer (one-shot prefill handoff), ready to edit.

Generated-By: PostHog Code
Task-Id: 3b50883f-cab5-443a-8b92-3d0c948688da

Author: mayteio

packages/shared/src/analytics-events.ts

@@ -866,6 +866,7 @@ export type ChannelActionType =
   | "edit_context_open"
   | "new_task_open"
   | "new_task_suggestion"
+  | "new_task_canvas_suggestion"
   | "view_context"
   | "view_history"
   | "view_artifacts"

packages/ui/src/features/canvas/canvasPrefill.ts

@@ -0,0 +1,21 @@
+// One-shot handoff of a starter instruction into a just-created canvas's hero
+// composer. A surface that creates a canvas on behalf of a suggestion (e.g. the
+// new-task screen's "Set up a workflow" card) stashes the prompt here BEFORE
+// navigating; the hero takes (and clears) it on mount. Ephemeral by design —
+// nothing is persisted, and an entry survives at most one navigation.
+const pending = new Map<string, string>();
+
+export function setPendingCanvasPrefill(
+  dashboardId: string,
+  instruction: string,
+): void {
+  pending.set(dashboardId, instruction);
+}
+
+// Returns the stashed instruction for this canvas and removes it, so a
+// remount (or another canvas) can never replay it.
+export function takePendingCanvasPrefill(dashboardId: string): string | null {
+  const instruction = pending.get(dashboardId) ?? null;
+  pending.delete(dashboardId);
+  return instruction;
+}

packages/ui/src/features/canvas/channelTaskSuggestions.ts

@@ -6,6 +6,7 @@ import {
   Cube,
   CurrencyDollar,
   Flask,
+  Lightning,
   Wrench,
 } from "@phosphor-icons/react";
 import type { SuggestedPrompt } from "@posthog/ui/features/task-detail/components/SuggestedPromptCard";
@@ -18,6 +19,18 @@ import type { SuggestedPrompt } from "@posthog/ui/features/task-detail/component
 // (icon badge + title + description); the icon/color follow the same
 // `var(--<color>-N)` token scheme.
 export const CHANNEL_TASK_SUGGESTIONS: SuggestedPrompt[] = [
+  {
+    label: "Set up a workflow",
+    description: "Automate an action, with a live board tracking it",
+    icon: Lightning,
+    color: "amber",
+    // Workflows build through canvas generation (the canvas is the workflow's
+    // observability board), so this suggestion arms the canvas path rather
+    // than creating a plain task.
+    canvas: true,
+    prompt:
+      "Set up a workflow that runs automatically — send an email, post to Slack, or fire a webhook when something happens — and build a live dashboard tracking it.\n\n\nUser input:\n- What should happen, and when (e.g. send a welcome email after signup):",
+  },
   {
     label: "Debug a user issue",
     description: "Trace a specific user's events, replays, and errors",

packages/ui/src/features/canvas/components/ChannelHomeComposer.tsx

@@ -48,8 +48,14 @@ import {
 import type { PendingKickoff } from "./ChannelFeedView";
 
 export interface ChannelHomeComposerHandle {
-  /** Drop a starter prompt into the editor and apply its mode, if any. */
-  applySuggestion: (prompt: string, mode?: string) => void;
+  /** Drop a starter prompt into the editor and apply its mode, if any. A
+   *  `canvas` suggestion also arms canvas mode, so the submit runs canvas
+   *  generation (canvas + workflow builds) instead of creating a plain task. */
+  applySuggestion: (
+    prompt: string,
+    mode?: string,
+    opts?: { canvas?: boolean },
+  ) => void;
 }
 
 interface ChannelHomeComposerProps {
@@ -351,7 +357,11 @@ export const ChannelHomeComposer = forwardRef<
   useImperativeHandle(
     ref,
     () => ({
-      applySuggestion: (prompt: string, mode?: string) => {
+      applySuggestion: (
+        prompt: string,
+        mode?: string,
+        opts?: { canvas?: boolean },
+      ) => {
         // Pending content (not setContent) preserves the multi-line template's
         // line breaks and focuses at the end; mirrors the new-task screen.
         useDraftStore.getState().actions.setPendingContent(sessionId, {
@@ -360,6 +370,9 @@ export const ChannelHomeComposer = forwardRef<
         if (mode && isValidConfigValue(modeOption, mode)) {
           setConfigOption(modeOption.id, mode);
         }
+        // Canvas suggestions (canvas + workflow builds) flip the composer into
+        // canvas mode so the submit runs canvas generation for this prompt.
+        setCanvasArmed(opts?.canvas ?? false);
       },
     }),
     [sessionId, modeOption, setConfigOption],

packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx

@@ -123,8 +123,8 @@ export function WebsiteChannelHome({ channelId }: { channelId: string }) {
   const closeThread = useThreadPanelStore((s) => s.closeThread);
 
   const handleSuggestionSelect = useCallback(
-    (prompt: string, mode?: string) => {
-      composerRef.current?.applySuggestion(prompt, mode);
+    (prompt: string, mode?: string, opts?: { canvas?: boolean }) => {
+      composerRef.current?.applySuggestion(prompt, mode, opts);
     },
     [],
   );
@@ -256,7 +256,9 @@ export function WebsiteChannelHome({ channelId }: { channelId: string }) {
               key={suggestion.label}
               suggestion={suggestion}
               onSelect={() =>
-                handleSuggestionSelect(suggestion.prompt, suggestion.mode)
+                handleSuggestionSelect(suggestion.prompt, suggestion.mode, {
+                  canvas: suggestion.canvas,
+                })
               }
             />
           ))}

packages/ui/src/features/canvas/components/WebsiteNewTask.test.tsx

@@ -39,6 +39,10 @@ vi.mock("@posthog/ui/features/canvas/hooks/useChannels", () => ({
 vi.mock("@posthog/ui/features/canvas/hooks/useChannelTasks", () => ({
   useChannelTaskMutations: () => ({ fileTask: vi.fn() }),
 }));
+// Needs a TRPCProvider at render; the canvas-suggestion path isn't under test.
+vi.mock("@posthog/ui/features/canvas/hooks/useDashboards", () => ({
+  useCreateAndOpenDashboard: () => vi.fn(),
+}));
 vi.mock("@posthog/ui/features/canvas/hooks/useFolderInstructions", () => ({
   useFolderInstructions,
 }));

packages/ui/src/features/canvas/components/WebsiteNewTask.tsx

@@ -5,6 +5,7 @@ import { ChannelBreadcrumb } from "@posthog/ui/features/canvas/components/Channe
 import { ChannelContextPanel } from "@posthog/ui/features/canvas/components/ChannelContextPanel";
 import { useChannels } from "@posthog/ui/features/canvas/hooks/useChannels";
 import { useChannelTaskMutations } from "@posthog/ui/features/canvas/hooks/useChannelTasks";
+import { useCreateAndOpenDashboard } from "@posthog/ui/features/canvas/hooks/useDashboards";
 import { useFolderInstructions } from "@posthog/ui/features/canvas/hooks/useFolderInstructions";
 import { TaskInput } from "@posthog/ui/features/task-detail/components/TaskInput";
 import { taskDetailQuery } from "@posthog/ui/features/tasks/queries";
@@ -68,6 +69,23 @@ export function WebsiteNewTask({ channelId }: { channelId: string }) {
     }
   }, [channelId, contextPanelOpen]);
 
+  // Canvas suggestions (e.g. "Set up a workflow") don't fill this composer —
+  // it creates plain tasks — they open a fresh canvas in the channel with the
+  // starter prompt dropped into its hero composer, ready to edit/send.
+  const createAndOpenCanvas = useCreateAndOpenDashboard(channelId);
+  const onCanvasSuggestionSelect = useCallback(
+    (suggestion: { label: string; prompt: string }) => {
+      track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
+        action_type: "new_task_canvas_suggestion",
+        surface: "new_task",
+        channel_id: channelId,
+        suggestion_label: suggestion.label,
+      });
+      void createAndOpenCanvas({ prefillInstruction: suggestion.prompt });
+    },
+    [channelId, createAndOpenCanvas],
+  );
+
   const onTaskCreated = useCallback(
     (task: Task) => {
       // Seed the detail cache so the destination route resolves instantly
@@ -120,6 +138,7 @@ export function WebsiteNewTask({ channelId }: { channelId: string }) {
               suggestion_label: label,
             })
           }
+          onCanvasSuggestionSelect={onCanvasSuggestionSelect}
           onContextChipClick={
             channelContext ? handleContextChipClick : undefined
           }

packages/ui/src/features/canvas/freeform/CanvasGenerateHero.tsx

@@ -1,11 +1,12 @@
 import { ShapesIcon } from "@phosphor-icons/react";
+import { takePendingCanvasPrefill } from "@posthog/ui/features/canvas/canvasPrefill";
 import { CANVAS_GENERATE_SUGGESTIONS } from "@posthog/ui/features/canvas/freeform/canvasGenerateSuggestions";
 import { FreeformGenerateBar } from "@posthog/ui/features/canvas/freeform/FreeformGenerateBar";
 import type { EditorHandle } from "@posthog/ui/features/message-editor/types";
 import { SuggestedPromptCard } from "@posthog/ui/features/task-detail/components/SuggestedPromptCard";
 import { DotPatternBackground } from "@posthog/ui/primitives/DotPatternBackground";
 import { Flex, Text } from "@radix-ui/themes";
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 
 // The empty-canvas landing state: a centered composer with starter-prompt
 // suggestions below it. Once the user submits, the canvas record records a
@@ -35,6 +36,17 @@ export function CanvasGenerateHero({
   // Lets a suggestion card drop its prompt straight into the editor.
   const editorRef = useRef<EditorHandle>(null);
 
+  // A surface that created this canvas on behalf of a suggestion (e.g. the
+  // new-task screen's "Set up a workflow" card) stashes the starter prompt
+  // before navigating here; drop it into the composer ready to edit/send.
+  useEffect(() => {
+    const prefill = takePendingCanvasPrefill(dashboardId);
+    if (prefill) {
+      editorRef.current?.setContent(prefill);
+      editorRef.current?.focus();
+    }
+  }, [dashboardId]);
+
   return (
     <Flex
       direction="column"

packages/ui/src/features/canvas/hooks/useDashboards.ts

@@ -5,6 +5,7 @@ import type {
 } from "@posthog/core/canvas/dashboardSchemas";
 import type { FreeformVersion } from "@posthog/core/canvas/freeformSchemas";
 import { useHostTRPC } from "@posthog/host-router/react";
+import { setPendingCanvasPrefill } from "@posthog/ui/features/canvas/canvasPrefill";
 import { useDashboardEditStore } from "@posthog/ui/features/canvas/stores/dashboardEditStore";
 import { toast } from "@posthog/ui/primitives/toast";
 import { logger } from "@posthog/ui/shell/logger";
@@ -221,6 +222,9 @@ export function useCreateAndOpenDashboard(
   templateId?: string;
   name?: string;
   channelId?: string;
+  /** Starter instruction dropped into the new canvas's hero composer, ready to
+   *  edit/send (stashed before navigating so the hero finds it on mount). */
+  prefillInstruction?: string;
 }) => Promise<void> {
   const navigate = useNavigate();
   const { createDashboard } = useDashboardMutations();
@@ -235,6 +239,9 @@ export function useCreateAndOpenDashboard(
       try {
         const record = await createDashboard(targetChannelId, name, templateId);
         setEditing(record.id, true);
+        if (opts?.prefillInstruction) {
+          setPendingCanvasPrefill(record.id, opts.prefillInstruction);
+        }
         await navigate({
           to: "/website/$channelId/dashboards/$dashboardId",
           params: { channelId: targetChannelId, dashboardId: record.id },

packages/ui/src/features/task-detail/components/SuggestedPromptCard.tsx

@@ -10,6 +10,9 @@ export interface SuggestedPrompt {
   color: string;
   /** Task mode to apply when this suggestion is selected, if it implies one. */
   mode?: ExecutionMode;
+  /** Routes into canvas generation (canvas + workflow builds) instead of a
+   *  plain task — the surface arms its canvas path when selecting this. */
+  canvas?: boolean;
 }
 
 export interface SuggestedPromptCardProps {