From f933fbecf9f9b1d07bc132f8433b2239b450e1ab Mon Sep 17 00:00:00 2001
From: Frank Midigo <midigofrank@gmail.com>
Date: Mon, 17 Nov 2025 12:07:09 +0300
Subject: [PATCH 1/4] Add workflow template publishing feature to collaborative
 editor

Implement UI and backend integration for publishing workflows as templates
and updating existing templates. This feature is restricted to superusers
and requires workflows to be saved before publishing.

Frontend changes:
- Add TemplatePublishPanel component with form for name, description, and tags
- Add TextAreaField form component with tag management UI
- Add publish/update template button to CodeViewPanel
- Integrate workflow_template state into SessionContextStore
- Add template_updated channel listener
- Add useWorkflowTemplate hook for accessing template data
- Show button state based on unsaved changes and user permissions

Backend integration:
- Connect to publish_template channel request
- Send YAML workflow code and positions to backend
- Handle template_updated messages from server
- Support both create and update operations

Test updates:
- Add workflow_template field to session context mocks
- Mock useUser, useWorkflowTemplate, and useURLState in CodeViewPanel tests
- Update all session context factory functions with template support
---
 CHANGELOG.md                                  |   3 +
 .../components/WorkflowEditor.tsx             |   1 +
 .../components/form/index.tsx                 |   2 +
 .../components/form/text-field.tsx            |   3 +
 .../components/form/textarea-field.tsx        |  30 ++
 .../components/inspector/CodeViewPanel.tsx    |  48 +++
 .../inspector/TemplatePublishPanel.tsx        | 254 ++++++++++++++
 .../components/inspector/index.tsx            |  26 +-
 .../hooks/useSessionContext.ts                |  18 +
 .../stores/createSessionContextStore.ts       |  28 ++
 .../types/sessionContext.ts                   |  21 ++
 .../__helpers__/sessionContextFactory.ts      |   9 +
 .../inspector/CodeViewPanel.test.tsx          |  23 ++
 .../contexts/StoreProvider.test.tsx           |   1 +
 .../hooks/useJobDeleteValidation.test.tsx     |   1 +
 .../hooks/useSessionContext.test.tsx          |   8 +
 .../types/sessionContext.test.ts              |  26 ++
 .../channels/workflow_channel.ex              |  68 +++-
 .../channels/workflow_channel_test.exs        | 319 ++++++++++++++++++
 19 files changed, 885 insertions(+), 4 deletions(-)
 create mode 100644 assets/js/collaborative-editor/components/form/textarea-field.tsx
 create mode 100644 assets/js/collaborative-editor/components/inspector/TemplatePublishPanel.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c1918de03e..745e8294ba 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,9 @@ and this project adheres to
 
 ### Added
 
+- Add workflow template publishing to collaborative editor
+  [#3921](https://github.com/OpenFn/lightning/issues/3921)
+
 ### Changed
 
 - Enable usage limit checks across the whole application
diff --git a/assets/js/collaborative-editor/components/WorkflowEditor.tsx b/assets/js/collaborative-editor/components/WorkflowEditor.tsx
index a43d17bd6b..9a6b1967ac 100644
--- a/assets/js/collaborative-editor/components/WorkflowEditor.tsx
+++ b/assets/js/collaborative-editor/components/WorkflowEditor.tsx
@@ -203,6 +203,7 @@ export function WorkflowEditor({
   const showInspector =
     searchParams.get('panel') === 'settings' ||
     searchParams.get('panel') === 'code' ||
+    searchParams.get('panel') === 'publish-template' ||
     Boolean(currentNode.node);
 
   const handleMethodChange = (method: 'template' | 'import' | 'ai' | null) => {
diff --git a/assets/js/collaborative-editor/components/form/index.tsx b/assets/js/collaborative-editor/components/form/index.tsx
index fb0f1506d1..b60a7915ee 100644
--- a/assets/js/collaborative-editor/components/form/index.tsx
+++ b/assets/js/collaborative-editor/components/form/index.tsx
@@ -6,6 +6,7 @@ import { useValidation } from '#/collaborative-editor/hooks/useValidation';
 import { NumberField } from './number-field';
 import { SelectField } from './select-field';
 import { TextField } from './text-field';
+import { TextAreaField } from './textarea-field';
 import { ToggleField } from './toggle-field';
 
 export const { fieldContext, formContext, useFieldContext } =
@@ -17,6 +18,7 @@ const { useAppForm: useBaseAppForm } = createFormHook({
   formContext,
   fieldComponents: {
     TextField,
+    TextAreaField,
     SelectField,
     ToggleField,
     NumberField,
diff --git a/assets/js/collaborative-editor/components/form/text-field.tsx b/assets/js/collaborative-editor/components/form/text-field.tsx
index bbd4b5b5ce..6afbf49db2 100644
--- a/assets/js/collaborative-editor/components/form/text-field.tsx
+++ b/assets/js/collaborative-editor/components/form/text-field.tsx
@@ -5,9 +5,11 @@ import { useFieldContext } from '.';
 export function TextField({
   label,
   disabled = false,
+  placeholder,
 }: {
   label: string;
   disabled?: boolean;
+  placeholder?: string;
 }) {
   const field = useFieldContext<string>();
   return (
@@ -18,6 +20,7 @@ export function TextField({
         value={field.state.value || ''}
         onChange={e => field.handleChange(e.target.value)}
         disabled={disabled}
+        placeholder={placeholder}
         className={INPUT_CLASSES}
       />
     </FormField>
diff --git a/assets/js/collaborative-editor/components/form/textarea-field.tsx b/assets/js/collaborative-editor/components/form/textarea-field.tsx
new file mode 100644
index 0000000000..6b2a019726
--- /dev/null
+++ b/assets/js/collaborative-editor/components/form/textarea-field.tsx
@@ -0,0 +1,30 @@
+import { FormField, INPUT_CLASSES } from './form-field';
+
+import { useFieldContext } from '.';
+
+export function TextAreaField({
+  label,
+  disabled = false,
+  placeholder,
+  rows = 4,
+}: {
+  label: string;
+  disabled?: boolean;
+  placeholder?: string;
+  rows?: number;
+}) {
+  const field = useFieldContext<string>();
+  return (
+    <FormField name={field.name} label={label} meta={field.state.meta}>
+      <textarea
+        id={field.name}
+        value={field.state.value || ''}
+        onChange={e => field.handleChange(e.target.value)}
+        disabled={disabled}
+        placeholder={placeholder}
+        rows={rows}
+        className={INPUT_CLASSES}
+      />
+    </FormField>
+  );
+}
diff --git a/assets/js/collaborative-editor/components/inspector/CodeViewPanel.tsx b/assets/js/collaborative-editor/components/inspector/CodeViewPanel.tsx
index c77166d3b4..1445b57885 100644
--- a/assets/js/collaborative-editor/components/inspector/CodeViewPanel.tsx
+++ b/assets/js/collaborative-editor/components/inspector/CodeViewPanel.tsx
@@ -5,6 +5,13 @@ import { useWorkflowState } from '#/collaborative-editor/hooks/useWorkflow';
 import { notifications } from '#/collaborative-editor/lib/notifications';
 import type { WorkflowState as YAMLWorkflowState } from '#/yaml/types';
 import { convertWorkflowStateToSpec } from '#/yaml/util';
+import {
+  useUser,
+  useWorkflowTemplate,
+  useLatestSnapshotLockVersion,
+} from '#/collaborative-editor/hooks/useSessionContext';
+import { useURLState } from '#/react/lib/use-url-state';
+import { cn } from '#/utils/cn';
 
 export function CodeViewPanel() {
   // Read workflow data from store - LoadingBoundary guarantees non-null
@@ -78,6 +85,30 @@ export function CodeViewPanel() {
     }
   };
 
+  // Template publishing state and handlers
+  const user = useUser();
+  const workflowTemplate = useWorkflowTemplate();
+  const latestSnapshotLockVersion = useLatestSnapshotLockVersion();
+  const { updateSearchParams } = useURLState();
+
+  // Check if workflow has unsaved changes by comparing lock versions
+  const hasUnsavedChanges =
+    workflow?.lock_version !== latestSnapshotLockVersion;
+
+  const handlePublishTemplate = () => {
+    updateSearchParams({ panel: 'publish-template' });
+  };
+
+  const buttonText = workflowTemplate ? 'Update Template' : 'Publish Template';
+
+  const buttonDisabled = hasUnsavedChanges || !user?.support_user;
+
+  const tooltipMessage = hasUnsavedChanges
+    ? `You must save your workflow first before ${workflowTemplate ? 'updating' : 'publishing'} a template.`
+    : !user?.support_user
+      ? 'Only superusers can publish templates'
+      : undefined;
+
   if (!workflow) {
     return <div className="px-4 py-5 text-gray-500">Loading...</div>;
   }
@@ -125,6 +156,23 @@ export function CodeViewPanel() {
           >
             Copy Code
           </button>
+          {user?.support_user && (
+            <button
+              id="publish-template-btn"
+              type="button"
+              onClick={handlePublishTemplate}
+              disabled={buttonDisabled}
+              title={tooltipMessage}
+              className={cn(
+                'rounded-md px-3 py-2 text-sm font-semibold shadow-xs min-w-[8rem]',
+                buttonDisabled
+                  ? 'bg-primary-300 text-white cursor-not-allowed'
+                  : 'bg-primary-600 text-white hover:bg-primary-700 cursor-pointer'
+              )}
+            >
+              {buttonText}
+            </button>
+          )}
         </div>
       </div>
     </>
diff --git a/assets/js/collaborative-editor/components/inspector/TemplatePublishPanel.tsx b/assets/js/collaborative-editor/components/inspector/TemplatePublishPanel.tsx
new file mode 100644
index 0000000000..d8233948e7
--- /dev/null
+++ b/assets/js/collaborative-editor/components/inspector/TemplatePublishPanel.tsx
@@ -0,0 +1,254 @@
+import { useMemo, useState } from 'react';
+import { z } from 'zod';
+import YAML from 'yaml';
+import { useAppForm } from '#/collaborative-editor/components/form';
+import { createZodValidator } from '#/collaborative-editor/components/form/createZodValidator';
+import { useWorkflowTemplate } from '#/collaborative-editor/hooks/useSessionContext';
+import { useWorkflowState } from '#/collaborative-editor/hooks/useWorkflow';
+import { notifications } from '#/collaborative-editor/lib/notifications';
+import { useURLState } from '#/react/lib/use-url-state';
+import { useSession } from '#/collaborative-editor/hooks/useSession';
+import { channelRequest } from '#/collaborative-editor/hooks/useChannel';
+import { cn } from '#/utils/cn';
+import { convertWorkflowStateToSpec } from '#/yaml/util';
+import type { WorkflowState as YAMLWorkflowState } from '#/yaml/types';
+
+// Validation schema matching backend constraints
+const TemplatePublishSchema = z.object({
+  name: z
+    .string()
+    .min(1, 'Name is required')
+    .max(255, 'Name must be less than 255 characters'),
+  description: z
+    .string()
+    .max(1000, 'Description must be less than 1000 characters')
+    .optional()
+    .default(''),
+  tags: z.string().optional().default(''),
+});
+
+type TemplateFormValues = z.infer<typeof TemplatePublishSchema>;
+
+export function TemplatePublishPanel() {
+  const workflow = useWorkflowState(state => state.workflow);
+  const jobs = useWorkflowState(state => state.jobs);
+  const triggers = useWorkflowState(state => state.triggers);
+  const edges = useWorkflowState(state => state.edges);
+  const positions = useWorkflowState(state => state.positions);
+  const workflowTemplate = useWorkflowTemplate();
+  const { updateSearchParams } = useURLState();
+  const { provider } = useSession();
+  const channel = provider?.channel;
+  const [isPublishing, setIsPublishing] = useState(false);
+
+  // Determine if this is create or update
+  const isUpdate = Boolean(workflowTemplate?.id);
+  const submitButtonText = isUpdate ? 'Update Template' : 'Publish Template';
+
+  // Default form values
+  const defaultValues = useMemo<TemplateFormValues>(() => {
+    if (workflowTemplate) {
+      // Update mode: pre-fill with existing template data
+      return {
+        name: workflowTemplate.name || '',
+        description: workflowTemplate.description || '',
+        tags: workflowTemplate.tags?.join(', ') || '',
+      };
+    } else {
+      // Create mode: pre-fill name with workflow name
+      return {
+        name: workflow?.name || '',
+        description: '',
+        tags: '',
+      };
+    }
+  }, [workflow, workflowTemplate]);
+
+  const form = useAppForm({
+    defaultValues,
+    validators: {
+      onChange: createZodValidator(TemplatePublishSchema),
+    },
+  });
+
+  const handlePublish = async () => {
+    // Validate form
+    const errors = form.state.errors;
+    if (errors.length > 0) {
+      notifications.alert({
+        title: 'Validation errors',
+        description: 'Please fix all errors before publishing',
+      });
+      return;
+    }
+
+    if (!channel || !workflow?.id) {
+      notifications.alert({
+        title: 'Cannot publish template',
+        description: 'Channel not connected or workflow not saved',
+      });
+      return;
+    }
+
+    setIsPublishing(true);
+
+    try {
+      // Generate YAML code from current workflow state
+      const workflowState: YAMLWorkflowState = {
+        id: workflow.id,
+        name: workflow.name,
+        jobs: jobs as YAMLWorkflowState['jobs'],
+        triggers: triggers as YAMLWorkflowState['triggers'],
+        edges: edges as YAMLWorkflowState['edges'],
+        positions,
+      };
+
+      const spec = convertWorkflowStateToSpec(workflowState, false);
+      const workflowCode = YAML.stringify(spec);
+
+      // Parse comma-separated tags into array
+      const formValues = form.state.values as TemplateFormValues;
+      const tags = formValues.tags
+        .split(',')
+        .map((tag: string) => tag.trim())
+        .filter((tag: string) => tag.length > 0);
+
+      // Call backend to publish/update template
+      await channelRequest(channel, 'publish_template', {
+        name: formValues.name,
+        description: formValues.description || undefined,
+        tags,
+        code: workflowCode, // Send the YAML code
+        positions, // Send the workflow positions
+      });
+
+      // Show success notification
+      notifications.info({
+        title: isUpdate ? 'Template updated' : 'Workflow published as template',
+        description: isUpdate
+          ? 'Your changes have been saved'
+          : 'Your workflow is now available as a template',
+      });
+
+      // Navigate back to code view
+      updateSearchParams({ panel: 'code' });
+    } catch (error) {
+      console.error('Failed to publish template:', error);
+      notifications.alert({
+        title: 'Failed to publish template',
+        description:
+          error instanceof Error
+            ? error.message
+            : 'An unexpected error occurred. Please try again.',
+      });
+    } finally {
+      setIsPublishing(false);
+    }
+  };
+
+  const handleCancel = () => {
+    // Navigate back to code view
+    updateSearchParams({ panel: 'code' });
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Form Content */}
+      <div className="flex-1 overflow-y-auto px-4 py-5 sm:p-6">
+        <div className="space-y-4 bg-white">
+          <form.AppField name="name">
+            {field => <field.TextField label="Name" disabled={isPublishing} />}
+          </form.AppField>
+
+          <form.AppField name="description">
+            {field => (
+              <field.TextAreaField
+                label="Description"
+                rows={6}
+                disabled={isPublishing}
+                placeholder="A detailed description of what this template does"
+              />
+            )}
+          </form.AppField>
+
+          <form.AppField name="tags">
+            {field => {
+              // Parse existing tags from comma-separated value
+              const tagsValue = (field.state.value as string) || '';
+              const existingTags = tagsValue
+                .split(',')
+                .map((tag: string) => tag.trim())
+                .filter((tag: string) => tag.length > 0);
+
+              // Remove a specific tag
+              const handleRemoveTag = (tagToRemove: string) => {
+                const updatedTags = existingTags.filter(
+                  tag => tag !== tagToRemove
+                );
+                field.handleChange(updatedTags.join(', '));
+              };
+
+              return (
+                <div>
+                  <field.TextField
+                    label="Tags"
+                    disabled={isPublishing}
+                    placeholder="Separate tags with commas (,)"
+                  />
+                  {existingTags.length > 0 && (
+                    <div className="flex flex-wrap gap-2 mt-2">
+                      {existingTags.map((tag: string, index: number) => (
+                        <span
+                          key={`${tag}-${index}`}
+                          className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-primary-100 text-primary-700 ring-1 ring-inset ring-primary-600/20"
+                        >
+                          {tag}
+                          <button
+                            type="button"
+                            onClick={() => handleRemoveTag(tag)}
+                            disabled={isPublishing}
+                            className="inline-flex items-center justify-center w-4 h-4 rounded-full hover:bg-primary-200 focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                            aria-label={`Remove ${tag} tag`}
+                          >
+                            <span className="hero-x-mark-micro h-3 w-3" />
+                          </button>
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              );
+            }}
+          </form.AppField>
+        </div>
+      </div>
+
+      {/* Footer with action buttons */}
+      <div className="shrink-0 border-t border-gray-200 p-3">
+        <div className="flex flex-row-reverse gap-3">
+          <button
+            type="button"
+            onClick={handlePublish}
+            disabled={isPublishing || form.state.errors.length > 0}
+            className={cn(
+              'rounded-md px-3 py-2 text-sm font-semibold shadow-xs',
+              isPublishing || form.state.errors.length > 0
+                ? 'bg-primary-300 text-white cursor-not-allowed'
+                : 'bg-primary-600 text-white hover:bg-primary-700 cursor-pointer'
+            )}
+          >
+            {isPublishing ? 'Publishing...' : submitButtonText}
+          </button>
+          <button
+            type="button"
+            onClick={handleCancel}
+            disabled={isPublishing}
+            className="rounded-md px-3 py-2 text-sm font-semibold bg-white hover:bg-gray-50 text-gray-900 ring-1 ring-inset ring-gray-300 shadow-xs"
+          >
+            Back
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/assets/js/collaborative-editor/components/inspector/index.tsx b/assets/js/collaborative-editor/components/inspector/index.tsx
index 8ac85f9d34..307791ae42 100644
--- a/assets/js/collaborative-editor/components/inspector/index.tsx
+++ b/assets/js/collaborative-editor/components/inspector/index.tsx
@@ -13,6 +13,8 @@ import { InspectorLayout } from './InspectorLayout';
 import { JobInspector } from './JobInspector';
 import { TriggerInspector } from './TriggerInspector';
 import { WorkflowSettings } from './WorkflowSettings';
+import { TemplatePublishPanel } from './TemplatePublishPanel';
+import { useWorkflowTemplate } from '../../hooks/useSessionContext';
 
 export { InspectorLayout } from './InspectorLayout';
 
@@ -35,6 +37,7 @@ export function Inspector({
   onOpenRunPanel,
 }: InspectorProps) {
   const { searchParams, updateSearchParams } = useURLState();
+  const workflowTemplate = useWorkflowTemplate();
 
   const hasSelectedNode = currentNode.node && currentNode.type;
 
@@ -44,14 +47,18 @@ export function Inspector({
       ? 'settings'
       : searchParams.get('panel') === 'code'
         ? 'code'
-        : hasSelectedNode
-          ? 'node'
-          : null;
+        : searchParams.get('panel') === 'publish-template'
+          ? 'publish-template'
+          : hasSelectedNode
+            ? 'node'
+            : null;
 
   const handleClose = () => {
     if (mode === 'code') {
       // When closing code view, go back to settings
       updateSearchParams({ panel: 'settings' });
+    } else if (mode === 'publish-template') {
+      updateSearchParams({ panel: 'code' });
     } else if (mode === 'settings') {
       updateSearchParams({ panel: null });
     } else {
@@ -96,6 +103,19 @@ export function Inspector({
     );
   }
 
+  // Publish template mode
+  if (mode === 'publish-template') {
+    const title = workflowTemplate
+      ? 'Update Template'
+      : 'Publish Workflow as Template';
+
+    return (
+      <InspectorLayout title={title} onClose={handleClose}>
+        <TemplatePublishPanel />
+      </InspectorLayout>
+    );
+  }
+
   // Node inspector mode
   if (currentNode.type === 'job') {
     return (
diff --git a/assets/js/collaborative-editor/hooks/useSessionContext.ts b/assets/js/collaborative-editor/hooks/useSessionContext.ts
index b34a734b52..8a9afba494 100644
--- a/assets/js/collaborative-editor/hooks/useSessionContext.ts
+++ b/assets/js/collaborative-editor/hooks/useSessionContext.ts
@@ -42,6 +42,7 @@ import type {
   ProjectContext,
   ProjectRepoConnection,
   UserContext,
+  WorkflowTemplate,
 } from '../types/sessionContext';
 
 /**
@@ -254,3 +255,20 @@ export const useRequestVersions = () => {
 
   return sessionContextStore.requestVersions;
 };
+
+/**
+ * Hook to get workflow template data
+ * Returns null if no template is published for this workflow
+ */
+export const useWorkflowTemplate = (): WorkflowTemplate | null => {
+  const sessionContextStore = useSessionContextStore();
+
+  const selectWorkflowTemplate = sessionContextStore.withSelector(
+    state => state.workflow_template
+  );
+
+  return useSyncExternalStore(
+    sessionContextStore.subscribe,
+    selectWorkflowTemplate
+  );
+};
diff --git a/assets/js/collaborative-editor/stores/createSessionContextStore.ts b/assets/js/collaborative-editor/stores/createSessionContextStore.ts
index e5526a822d..e7871be4ed 100644
--- a/assets/js/collaborative-editor/stores/createSessionContextStore.ts
+++ b/assets/js/collaborative-editor/stores/createSessionContextStore.ts
@@ -92,6 +92,7 @@ import {
   SessionContextResponseSchema,
   VersionSchema,
   WebhookAuthMethodSchema,
+  WorkflowTemplateSchema,
 } from '../types/sessionContext';
 
 import { createWithSelector } from './common';
@@ -118,6 +119,7 @@ export const createSessionContextStore = (
       versions: [],
       versionsLoading: false,
       versionsError: null,
+      workflow_template: null,
       isNewWorkflow,
       isLoading: false,
       error: null,
@@ -180,6 +182,7 @@ export const createSessionContextStore = (
           sessionContext.latest_snapshot_lock_version;
         draft.projectRepoConnection = sessionContext.project_repo_connection;
         draft.webhookAuthMethods = sessionContext.webhook_auth_methods;
+        draft.workflow_template = sessionContext.workflow_template;
         draft.isLoading = false;
         draft.error = null;
         draft.lastUpdated = Date.now();
@@ -413,6 +416,29 @@ export const createSessionContextStore = (
       handleWebhookAuthMethodsUpdated(message);
     };
 
+    const templateUpdatedHandler = (message: unknown) => {
+      logger.debug('Received template_updated message', message);
+
+      const result = z
+        .object({
+          workflow_template: WorkflowTemplateSchema.nullable(),
+        })
+        .safeParse(message);
+
+      if (result.success) {
+        state = produce(state, draft => {
+          draft.workflow_template = result.data.workflow_template;
+          draft.lastUpdated = Date.now();
+        });
+        notify('templateUpdated');
+      } else {
+        logger.error('Failed to parse template_updated message', {
+          error: result.error,
+          message,
+        });
+      }
+    };
+
     // Set up channel listeners
     if (channel) {
       channel.on('session_context', sessionContextHandler);
@@ -422,6 +448,7 @@ export const createSessionContextStore = (
         'webhook_auth_methods_updated',
         webhookAuthMethodsUpdatedHandler
       );
+      channel.on('template_updated', templateUpdatedHandler);
     }
 
     devtools.connect();
@@ -438,6 +465,7 @@ export const createSessionContextStore = (
           'webhook_auth_methods_updated',
           webhookAuthMethodsUpdatedHandler
         );
+        channel.off('template_updated', templateUpdatedHandler);
       }
       _channelProvider = null;
     };
diff --git a/assets/js/collaborative-editor/types/sessionContext.ts b/assets/js/collaborative-editor/types/sessionContext.ts
index d77b8abb60..d604fdb402 100644
--- a/assets/js/collaborative-editor/types/sessionContext.ts
+++ b/assets/js/collaborative-editor/types/sessionContext.ts
@@ -9,6 +9,7 @@ export const UserContextSchema = z.object({
   last_name: z.string(),
   email: z.string().email(),
   email_confirmed: z.boolean(),
+  support_user: z.boolean(),
   inserted_at: isoDateTimeSchema,
 });
 
@@ -53,6 +54,24 @@ export const VersionSchema = z.object({
 
 export type Version = z.infer<typeof VersionSchema>;
 
+export const WorkflowTemplateSchema = z.object({
+  id: uuidSchema,
+  name: z.string(),
+  description: z.string().nullable(),
+  tags: z.array(z.string()),
+  workflow_id: uuidSchema,
+  code: z.string(),
+  positions: z.record(
+    z.string(),
+    z.object({
+      x: z.number(),
+      y: z.number(),
+    })
+  ),
+});
+
+export type WorkflowTemplate = z.infer<typeof WorkflowTemplateSchema>;
+
 export const SessionContextResponseSchema = z.object({
   user: UserContextSchema.nullable(),
   project: ProjectContextSchema.nullable(),
@@ -61,6 +80,7 @@ export const SessionContextResponseSchema = z.object({
   latest_snapshot_lock_version: z.number().int(),
   project_repo_connection: ProjectRepoConnectionSchema.nullable(),
   webhook_auth_methods: z.array(WebhookAuthMethodSchema),
+  workflow_template: WorkflowTemplateSchema.nullable(),
 });
 
 export type UserContext = z.infer<typeof UserContextSchema>;
@@ -79,6 +99,7 @@ export interface SessionContextState {
   versions: Version[];
   versionsLoading: boolean;
   versionsError: string | null;
+  workflow_template: WorkflowTemplate | null;
   isNewWorkflow: boolean;
   isLoading: boolean;
   error: string | null;
diff --git a/assets/test/collaborative-editor/__helpers__/sessionContextFactory.ts b/assets/test/collaborative-editor/__helpers__/sessionContextFactory.ts
index 988d856f49..72f7919e99 100644
--- a/assets/test/collaborative-editor/__helpers__/sessionContextFactory.ts
+++ b/assets/test/collaborative-editor/__helpers__/sessionContextFactory.ts
@@ -36,6 +36,7 @@ export const mockUserContext: UserContext = {
   last_name: 'User',
   email: 'test@example.com',
   email_confirmed: true,
+  support_user: false,
   inserted_at: '2024-01-15T10:30:00Z',
 };
 
@@ -72,6 +73,7 @@ export const mockAlternativeUserContext: UserContext = {
   last_name: 'Smith',
   email: 'jane@example.com',
   email_confirmed: false,
+  support_user: false,
   inserted_at: '2024-01-20T15:45:00Z',
 };
 
@@ -98,6 +100,7 @@ export interface SessionContextResponse {
   latest_snapshot_lock_version: number;
   project_repo_connection: ProjectRepoConnection | null;
   webhook_auth_methods: WebhookAuthMethod[];
+  workflow_template: any | null;
 }
 
 /**
@@ -111,6 +114,7 @@ export const mockSessionContextResponse: SessionContextResponse = {
   latest_snapshot_lock_version: 1,
   project_repo_connection: null,
   webhook_auth_methods: [],
+  workflow_template: null,
 };
 
 /**
@@ -124,6 +128,7 @@ export const mockUnauthenticatedSessionContext: SessionContextResponse = {
   latest_snapshot_lock_version: 1,
   project_repo_connection: null,
   webhook_auth_methods: [],
+  workflow_template: null,
 };
 
 /**
@@ -137,6 +142,7 @@ export const mockUpdatedSessionContext: SessionContextResponse = {
   latest_snapshot_lock_version: 2,
   project_repo_connection: null,
   webhook_auth_methods: [],
+  workflow_template: null,
 };
 
 // =============================================================================
@@ -294,6 +300,7 @@ export function createSessionContext(
           last_name: 'User',
           email: 'test@example.com',
           email_confirmed: true,
+          support_user: false,
           inserted_at: '2025-01-13T10:30:00Z',
           ...options.user,
         };
@@ -345,6 +352,7 @@ export function createSessionContext(
     latest_snapshot_lock_version: options.latest_snapshot_lock_version ?? 1,
     project_repo_connection,
     webhook_auth_methods: options.webhook_auth_methods ?? [],
+    workflow_template: null,
   };
 }
 
@@ -459,6 +467,7 @@ export function createMockUser(
     first_name: 'Test',
     last_name: 'User',
     email_confirmed: true,
+    support_user: false,
     inserted_at: '2025-01-13T10:30:00Z',
     ...overrides,
   };
diff --git a/assets/test/collaborative-editor/components/inspector/CodeViewPanel.test.tsx b/assets/test/collaborative-editor/components/inspector/CodeViewPanel.test.tsx
index e898c8b82c..e37409fa09 100644
--- a/assets/test/collaborative-editor/components/inspector/CodeViewPanel.test.tsx
+++ b/assets/test/collaborative-editor/components/inspector/CodeViewPanel.test.tsx
@@ -66,6 +66,29 @@ vi.mock('../../../../js/collaborative-editor/hooks/useWorkflow', () => ({
   }),
 }));
 
+// Mock useSessionContext hooks
+vi.mock('../../../../js/collaborative-editor/hooks/useSessionContext', () => ({
+  useUser: vi.fn(() => ({
+    id: 'test-user-id',
+    email: 'test@example.com',
+    first_name: 'Test',
+    last_name: 'User',
+    email_confirmed: true,
+    support_user: true, // Make user a superuser for template functionality
+    inserted_at: '2024-01-01T00:00:00Z',
+  })),
+  useWorkflowTemplate: vi.fn(() => null), // No template by default
+  useLatestSnapshotLockVersion: vi.fn(() => 1),
+}));
+
+// Mock useURLState hook
+vi.mock('../../../../js/react/lib/use-url-state', () => ({
+  useURLState: vi.fn(() => ({
+    updateSearchParams: vi.fn(),
+    getSearchParam: vi.fn(),
+  })),
+}));
+
 describe('CodeViewPanel', () => {
   beforeEach(() => {
     // Reset all mocks
diff --git a/assets/test/collaborative-editor/contexts/StoreProvider.test.tsx b/assets/test/collaborative-editor/contexts/StoreProvider.test.tsx
index 615aa5c812..9c8c28d5fd 100644
--- a/assets/test/collaborative-editor/contexts/StoreProvider.test.tsx
+++ b/assets/test/collaborative-editor/contexts/StoreProvider.test.tsx
@@ -228,6 +228,7 @@ describe('StoreProvider', () => {
           latest_snapshot_lock_version: 1,
           project_repo_connection: null,
           webhook_auth_methods: [],
+          workflow_template: null,
         });
       });
 
diff --git a/assets/test/collaborative-editor/hooks/useJobDeleteValidation.test.tsx b/assets/test/collaborative-editor/hooks/useJobDeleteValidation.test.tsx
index 9addd8d14b..fb752e523b 100644
--- a/assets/test/collaborative-editor/hooks/useJobDeleteValidation.test.tsx
+++ b/assets/test/collaborative-editor/hooks/useJobDeleteValidation.test.tsx
@@ -52,6 +52,7 @@ function setPermissions(channelMock: any, can_edit_workflow: boolean) {
       latest_snapshot_lock_version: 1,
       project_repo_connection: null,
       webhook_auth_methods: [],
+      workflow_template: null,
     });
   });
 }
diff --git a/assets/test/collaborative-editor/hooks/useSessionContext.test.tsx b/assets/test/collaborative-editor/hooks/useSessionContext.test.tsx
index a0d1a128be..05ef28b172 100644
--- a/assets/test/collaborative-editor/hooks/useSessionContext.test.tsx
+++ b/assets/test/collaborative-editor/hooks/useSessionContext.test.tsx
@@ -56,6 +56,7 @@ function createMockUser(): UserContext {
     last_name: 'User',
     email: 'test@example.com',
     email_confirmed: true,
+    support_user: false,
     inserted_at: new Date().toISOString(),
   };
 }
@@ -121,6 +122,7 @@ describe('useUser()', () => {
         latest_snapshot_lock_version: 1,
         project_repo_connection: null,
         webhook_auth_methods: [],
+        workflow_template: null,
       });
     });
 
@@ -136,6 +138,7 @@ describe('useUser()', () => {
         latest_snapshot_lock_version: 1,
         project_repo_connection: null,
         webhook_auth_methods: [],
+        workflow_template: null,
       });
     });
 
@@ -169,6 +172,7 @@ describe('useProject()', () => {
         latest_snapshot_lock_version: 1,
         project_repo_connection: null,
         webhook_auth_methods: [],
+        workflow_template: null,
       });
     });
 
@@ -184,6 +188,7 @@ describe('useProject()', () => {
         latest_snapshot_lock_version: 1,
         project_repo_connection: null,
         webhook_auth_methods: [],
+        workflow_template: null,
       });
     });
 
@@ -217,6 +222,7 @@ describe('useAppConfig()', () => {
         latest_snapshot_lock_version: 1,
         project_repo_connection: null,
         webhook_auth_methods: [],
+        workflow_template: null,
       });
     });
 
@@ -232,6 +238,7 @@ describe('useAppConfig()', () => {
         latest_snapshot_lock_version: 1,
         project_repo_connection: null,
         webhook_auth_methods: [],
+        workflow_template: null,
       });
     });
 
@@ -317,6 +324,7 @@ describe('Hook Integration', () => {
         latest_snapshot_lock_version: 1,
         project_repo_connection: null,
         webhook_auth_methods: [],
+        workflow_template: null,
       });
     });
 
diff --git a/assets/test/collaborative-editor/types/sessionContext.test.ts b/assets/test/collaborative-editor/types/sessionContext.test.ts
index e8c8368bd6..63ad88e92b 100644
--- a/assets/test/collaborative-editor/types/sessionContext.test.ts
+++ b/assets/test/collaborative-editor/types/sessionContext.test.ts
@@ -19,6 +19,7 @@ describe.concurrent('UserContextSchema', () => {
       last_name: 'Doe',
       email: 'john.doe@example.com',
       email_confirmed: true,
+      support_user: false,
       inserted_at: '2024-01-15T10:30:00.000Z',
     };
 
@@ -37,6 +38,7 @@ describe.concurrent('UserContextSchema', () => {
       last_name: 'Smith',
       email: 'jane.smith@test.com',
       email_confirmed: false,
+      support_user: false,
       inserted_at: '2024-01-15T10:30:00.000Z',
     };
 
@@ -52,6 +54,7 @@ describe.concurrent('UserContextSchema', () => {
       last_name: 'Doe',
       email: 'john.doe@example.com',
       email_confirmed: true,
+      support_user: false,
       inserted_at: '2024-01-15T10:30:00.000Z',
     };
 
@@ -70,6 +73,7 @@ describe.concurrent('UserContextSchema', () => {
       last_name: 'Doe',
       email: 'not-an-email',
       email_confirmed: true,
+      support_user: false,
       inserted_at: '2024-01-15T10:30:00.000Z',
     };
 
@@ -87,6 +91,7 @@ describe.concurrent('UserContextSchema', () => {
       last_name: 'Doe',
       email: 'john.doe@example.com',
       email_confirmed: true,
+      support_user: false,
       inserted_at: '2024-01-15T10:30:00.000Z',
     };
 
@@ -104,6 +109,7 @@ describe.concurrent('UserContextSchema', () => {
       first_name: 'John',
       email: 'john.doe@example.com',
       email_confirmed: true,
+      support_user: false,
       inserted_at: '2024-01-15T10:30:00.000Z',
     };
 
@@ -140,6 +146,7 @@ describe.concurrent('UserContextSchema', () => {
       last_name: 'Doe',
       email: 'john.doe@example.com',
       email_confirmed: true,
+      support_user: false,
       inserted_at: '2024-01-15',
     };
 
@@ -158,6 +165,7 @@ describe.concurrent('UserContextSchema', () => {
       last_name: 'Doe',
       email: 'john.doe@example.com',
       email_confirmed: true,
+      support_user: false,
       inserted_at: '2024-01-15T10:30:00.000Z',
     };
 
@@ -173,6 +181,7 @@ describe.concurrent('UserContextSchema', () => {
       last_name: 'Doe',
       email: 'john.doe@example.com',
       email_confirmed: true,
+      support_user: false,
       inserted_at: '2024-01-15T10:30:00.000Z',
     };
 
@@ -326,6 +335,7 @@ describe.concurrent('SessionContextResponseSchema', () => {
         last_name: 'Doe',
         email: 'john.doe@example.com',
         email_confirmed: true,
+        support_user: false,
         inserted_at: '2024-01-15T10:30:00.000Z',
       },
       project: {
@@ -343,6 +353,7 @@ describe.concurrent('SessionContextResponseSchema', () => {
       latest_snapshot_lock_version: 1,
       project_repo_connection: null,
       webhook_auth_methods: [],
+      workflow_template: null,
     };
 
     const result = SessionContextResponseSchema.safeParse(validResponse);
@@ -371,6 +382,7 @@ describe.concurrent('SessionContextResponseSchema', () => {
       latest_snapshot_lock_version: 1,
       project_repo_connection: null,
       webhook_auth_methods: [],
+      workflow_template: null,
     };
 
     const result = SessionContextResponseSchema.safeParse(validResponse);
@@ -389,6 +401,7 @@ describe.concurrent('SessionContextResponseSchema', () => {
         last_name: 'Doe',
         email: 'john.doe@example.com',
         email_confirmed: false,
+        support_user: false,
         inserted_at: '2024-01-15T10:30:00.000Z',
       },
       project: null,
@@ -403,6 +416,7 @@ describe.concurrent('SessionContextResponseSchema', () => {
       latest_snapshot_lock_version: 1,
       project_repo_connection: null,
       webhook_auth_methods: [],
+      workflow_template: null,
     };
 
     const result = SessionContextResponseSchema.safeParse(validResponse);
@@ -428,6 +442,7 @@ describe.concurrent('SessionContextResponseSchema', () => {
       latest_snapshot_lock_version: 1,
       project_repo_connection: null,
       webhook_auth_methods: [],
+      workflow_template: null,
     };
 
     const result = SessionContextResponseSchema.safeParse(validResponse);
@@ -452,6 +467,7 @@ describe.concurrent('SessionContextResponseSchema', () => {
       latest_snapshot_lock_version: 1,
       project_repo_connection: null,
       webhook_auth_methods: [],
+      workflow_template: null,
     };
 
     const result = SessionContextResponseSchema.safeParse(invalidResponse);
@@ -470,6 +486,7 @@ describe.concurrent('SessionContextResponseSchema', () => {
         last_name: 'Doe',
         email: 'john.doe@example.com',
         email_confirmed: true,
+        support_user: false,
         inserted_at: '2024-01-15T10:30:00.000Z',
       },
       project: null,
@@ -484,6 +501,7 @@ describe.concurrent('SessionContextResponseSchema', () => {
       latest_snapshot_lock_version: 1,
       project_repo_connection: null,
       webhook_auth_methods: [],
+      workflow_template: null,
     };
 
     const result = SessionContextResponseSchema.safeParse(invalidResponse);
@@ -512,6 +530,7 @@ describe.concurrent('SessionContextResponseSchema', () => {
       latest_snapshot_lock_version: 1,
       project_repo_connection: null,
       webhook_auth_methods: [],
+      workflow_template: null,
     };
 
     const result = SessionContextResponseSchema.safeParse(invalidResponse);
@@ -537,6 +556,7 @@ describe.concurrent('SessionContextResponseSchema', () => {
       latest_snapshot_lock_version: 1,
       project_repo_connection: null,
       webhook_auth_methods: [],
+      workflow_template: null,
     };
 
     const result = SessionContextResponseSchema.safeParse(invalidResponse);
@@ -557,6 +577,7 @@ describe.concurrent('SessionContextResponseSchema', () => {
       latest_snapshot_lock_version: 1,
       project_repo_connection: null,
       webhook_auth_methods: [],
+      workflow_template: null,
     };
 
     const result = SessionContextResponseSchema.safeParse(invalidResponse);
@@ -579,6 +600,7 @@ describe.concurrent('SessionContextResponseSchema', () => {
       latest_snapshot_lock_version: 1,
       project_repo_connection: null,
       webhook_auth_methods: [],
+      workflow_template: null,
     };
 
     const result = SessionContextResponseSchema.safeParse(invalidResponse);
@@ -599,6 +621,7 @@ describe.concurrent('SessionContext edge cases', () => {
       last_name: "O'Brien-Smith",
       email: 'jean.francois@example.com',
       email_confirmed: true,
+      support_user: false,
       inserted_at: '2024-01-15T10:30:00.000Z',
     };
 
@@ -625,6 +648,7 @@ describe.concurrent('SessionContext edge cases', () => {
       last_name: 'User',
       email: 'test+tag@example.com',
       email_confirmed: true,
+      support_user: false,
       inserted_at: '2024-01-15T10:30:00.000Z',
     };
 
@@ -640,6 +664,7 @@ describe.concurrent('SessionContext edge cases', () => {
       last_name: 'Doe',
       email: 'john@example.com',
       email_confirmed: true,
+      support_user: false,
       inserted_at: '2024-01-15T10:30:00.123Z',
     };
 
@@ -655,6 +680,7 @@ describe.concurrent('SessionContext edge cases', () => {
       last_name: 'Doe',
       email: 'john@example.com',
       email_confirmed: true,
+      support_user: false,
       inserted_at: '2024-01-15T10:30:00.000Z',
       unexpected_field: 'should be stripped',
     };
diff --git a/lib/lightning_web/channels/workflow_channel.ex b/lib/lightning_web/channels/workflow_channel.ex
index 0349396373..4545134826 100644
--- a/lib/lightning_web/channels/workflow_channel.ex
+++ b/lib/lightning_web/channels/workflow_channel.ex
@@ -177,6 +177,9 @@ defmodule LightningWeb.WorkflowChannel do
       webhook_auth_methods =
         Lightning.WebhookAuthMethods.list_for_project(project)
 
+      workflow_template =
+        Lightning.WorkflowTemplates.get_template_by_workflow_id(workflow.id)
+
       %{
         user: render_user_context(user),
         project: render_project_context(project),
@@ -184,7 +187,8 @@ defmodule LightningWeb.WorkflowChannel do
         permissions: render_permissions(user, project_user),
         latest_snapshot_lock_version: fresh_workflow.lock_version,
         project_repo_connection: render_repo_connection(project_repo_connection),
-        webhook_auth_methods: render_webhook_auth_methods(webhook_auth_methods)
+        webhook_auth_methods: render_webhook_auth_methods(webhook_auth_methods),
+        workflow_template: render_workflow_template(workflow_template)
       }
     end)
   end
@@ -496,6 +500,22 @@ defmodule LightningWeb.WorkflowChannel do
     end
   end
 
+  @impl true
+  def handle_in("publish_template", params, socket) do
+    with :ok <- can_publish_template(socket),
+         {:ok, template} <- publish_template(socket, params) do
+      broadcast_from!(socket, "template_updated", %{
+        workflow_template: render_workflow_template(template)
+      })
+
+      {:reply,
+       {:ok,
+        %{
+          template: render_workflow_template(template)
+        }}, socket}
+    end
+  end
+
   @impl true
   def handle_info({:yjs, chunk}, socket) do
     push(socket, "yjs", {:binary, chunk})
@@ -704,6 +724,7 @@ defmodule LightningWeb.WorkflowChannel do
       first_name: user.first_name,
       last_name: user.last_name,
       email_confirmed: !is_nil(user.confirmed_at),
+      support_user: user.support_user,
       inserted_at: user.inserted_at
     }
   end
@@ -775,6 +796,51 @@ defmodule LightningWeb.WorkflowChannel do
     end)
   end
 
+  defp render_workflow_template(nil), do: nil
+
+  defp render_workflow_template(template) do
+    Map.take(template, [
+      :id,
+      :name,
+      :description,
+      :code,
+      :positions,
+      :tags,
+      :workflow_id
+    ])
+  end
+
+  defp can_publish_template(socket) do
+    if socket.assigns.current_user.support_user do
+      :ok
+    else
+      {:reply,
+       {:error,
+        %{
+          errors: %{base: ["Only superusers can publish templates"]},
+          type: "unauthorized"
+        }}, socket}
+    end
+  end
+
+  defp publish_template(socket, params) do
+    workflow = socket.assigns.workflow
+    template_params = Map.put(params, "workflow_id", workflow.id)
+
+    case Lightning.WorkflowTemplates.create_template(template_params) do
+      {:ok, template} ->
+        {:ok, template}
+
+      {:error, %Ecto.Changeset{} = changeset} ->
+        {:reply,
+         {:error,
+          %{
+            errors: format_changeset_errors(changeset),
+            type: "validation_error"
+          }}, socket}
+    end
+  end
+
   # Private helper functions for save_workflow and reset_workflow
 
   defp workflow_error_reply(socket, {:error, %{type: type, message: message}}) do
diff --git a/test/lightning_web/channels/workflow_channel_test.exs b/test/lightning_web/channels/workflow_channel_test.exs
index cdede19a09..91b50b8e47 100644
--- a/test/lightning_web/channels/workflow_channel_test.exs
+++ b/test/lightning_web/channels/workflow_channel_test.exs
@@ -2253,4 +2253,323 @@ defmodule LightningWeb.WorkflowChannelTest do
       }
     end
   end
+
+  describe "publish_template" do
+    test "successfully publishes new template as superuser", %{
+      workflow: workflow,
+      project: project
+    } do
+      # Create a superuser
+      superuser = insert(:user, support_user: true)
+      insert(:project_user, project: project, user: superuser, role: :editor)
+
+      {:ok, _, socket} =
+        LightningWeb.UserSocket
+        |> socket("user_#{superuser.id}", %{current_user: superuser})
+        |> subscribe_and_join(
+          LightningWeb.WorkflowChannel,
+          "workflow:collaborate:#{workflow.id}",
+          %{"project_id" => project.id, "action" => "edit"}
+        )
+
+      ref =
+        push(socket, "publish_template", %{
+          "name" => "Test Template",
+          "description" => "A test template description",
+          "tags" => ["test", "demo"],
+          "code" => "workflow:\n  name: Test",
+          "positions" => %{"job1" => %{"x" => 100, "y" => 200}}
+        })
+
+      assert_reply ref, :ok, %{
+        template: template
+      }
+
+      assert %{
+               name: "Test Template",
+               description: "A test template description",
+               tags: ["test", "demo"],
+               workflow_id: workflow_id
+             } = template
+
+      assert workflow_id == workflow.id
+
+      # Verify template was saved to database
+      saved_template =
+        Lightning.WorkflowTemplates.get_template_by_workflow_id(workflow.id)
+
+      assert saved_template.name == "Test Template"
+      assert saved_template.code == "workflow:\n  name: Test"
+
+      # Verify broadcast was sent
+      assert_broadcast "template_updated", %{
+        workflow_template: broadcast_template
+      }
+
+      assert broadcast_template.name == "Test Template"
+    end
+
+    test "successfully updates existing template as suport user", %{
+      workflow: workflow,
+      project: project
+    } do
+      # Create a suport user
+      superuser = insert(:user, support_user: true)
+      insert(:project_user, project: project, user: superuser, role: :editor)
+
+      {:ok, _, socket} =
+        LightningWeb.UserSocket
+        |> socket("user_#{superuser.id}", %{current_user: superuser})
+        |> subscribe_and_join(
+          LightningWeb.WorkflowChannel,
+          "workflow:collaborate:#{workflow.id}",
+          %{"project_id" => project.id, "action" => "edit"}
+        )
+
+      # Create initial template
+      {:ok, _initial_template} =
+        Lightning.WorkflowTemplates.create_template(%{
+          "name" => "Initial Name",
+          "description" => "Initial description",
+          "tags" => ["initial"],
+          "code" => "initial code",
+          "positions" => %{},
+          "workflow_id" => workflow.id
+        })
+
+      # Update the template
+      ref =
+        push(socket, "publish_template", %{
+          "name" => "Updated Template",
+          "description" => "Updated description",
+          "tags" => ["updated"],
+          "code" => "updated code",
+          "positions" => %{"job1" => %{"x" => 100, "y" => 200}}
+        })
+
+      assert_reply ref, :ok, %{
+        template: template
+      }
+
+      assert template.name == "Updated Template"
+
+      # Verify only one template exists for the workflow
+      templates =
+        Lightning.WorkflowTemplates.list_workflow_templates(workflow)
+
+      assert length(templates) == 1
+      assert hd(templates).name == "Updated Template"
+    end
+
+    test "rejects unauthorized user (non-superuser)", %{socket: socket} do
+      # Default test user is not a superuser
+      ref =
+        push(socket, "publish_template", %{
+          "name" => "Test Template",
+          "tags" => ["test"],
+          "code" => "workflow code",
+          "positions" => %{}
+        })
+
+      assert_reply ref, :error, %{
+        errors: %{base: ["Only superusers can publish templates"]},
+        type: "unauthorized"
+      }
+
+      # Verify no template was created
+      template =
+        Lightning.WorkflowTemplates.get_template_by_workflow_id(
+          socket.assigns.workflow.id
+        )
+
+      assert is_nil(template)
+    end
+
+    test "returns validation error for missing name", %{
+      workflow: workflow,
+      project: project
+    } do
+      # Create a superuser
+      superuser = insert(:user, support_user: true)
+      insert(:project_user, project: project, user: superuser, role: :editor)
+
+      {:ok, _, socket} =
+        LightningWeb.UserSocket
+        |> socket("user_#{superuser.id}", %{current_user: superuser})
+        |> subscribe_and_join(
+          LightningWeb.WorkflowChannel,
+          "workflow:collaborate:#{workflow.id}",
+          %{"project_id" => project.id, "action" => "edit"}
+        )
+
+      ref =
+        push(socket, "publish_template", %{
+          "name" => "",
+          "tags" => ["test"],
+          "code" => "workflow code",
+          "positions" => %{}
+        })
+
+      assert_reply ref, :error, %{
+        errors: errors,
+        type: "validation_error"
+      }
+
+      assert is_map(errors)
+      assert Map.has_key?(errors, :name)
+    end
+
+    test "allows empty tags array", %{
+      workflow: workflow,
+      project: project
+    } do
+      # Create a superuser
+      superuser = insert(:user, support_user: true)
+      insert(:project_user, project: project, user: superuser, role: :editor)
+
+      {:ok, _, socket} =
+        LightningWeb.UserSocket
+        |> socket("user_#{superuser.id}", %{current_user: superuser})
+        |> subscribe_and_join(
+          LightningWeb.WorkflowChannel,
+          "workflow:collaborate:#{workflow.id}",
+          %{"project_id" => project.id, "action" => "edit"}
+        )
+
+      ref =
+        push(socket, "publish_template", %{
+          "name" => "Test Template",
+          "code" => "workflow code",
+          "positions" => %{},
+          "tags" => []
+        })
+
+      assert_reply ref, :ok, %{
+        template: template
+      }
+
+      assert template.name == "Test Template"
+      assert template.tags == []
+    end
+
+    test "returns validation error for name exceeding max length", %{
+      workflow: workflow,
+      project: project
+    } do
+      # Create a superuser
+      superuser = insert(:user, support_user: true)
+      insert(:project_user, project: project, user: superuser, role: :editor)
+
+      {:ok, _, socket} =
+        LightningWeb.UserSocket
+        |> socket("user_#{superuser.id}", %{current_user: superuser})
+        |> subscribe_and_join(
+          LightningWeb.WorkflowChannel,
+          "workflow:collaborate:#{workflow.id}",
+          %{"project_id" => project.id, "action" => "edit"}
+        )
+
+      long_name = String.duplicate("a", 256)
+
+      ref =
+        push(socket, "publish_template", %{
+          "name" => long_name,
+          "tags" => ["test"],
+          "code" => "workflow code",
+          "positions" => %{}
+        })
+
+      assert_reply ref, :error, %{
+        errors: errors,
+        type: "validation_error"
+      }
+
+      assert is_map(errors)
+      assert Map.has_key?(errors, :name)
+    end
+
+    test "broadcasts template update to all connected clients", %{
+      workflow: workflow,
+      project: project
+    } do
+      # Create a superuser
+      superuser = insert(:user, support_user: true)
+      insert(:project_user, project: project, user: superuser, role: :editor)
+
+      # Create a second socket for another collaborator
+      {:ok, _, socket1} =
+        LightningWeb.UserSocket
+        |> socket("user_#{superuser.id}_1", %{current_user: superuser})
+        |> subscribe_and_join(
+          LightningWeb.WorkflowChannel,
+          "workflow:collaborate:#{workflow.id}",
+          %{"project_id" => project.id, "action" => "edit"}
+        )
+
+      {:ok, _, _socket2} =
+        LightningWeb.UserSocket
+        |> socket("user_#{superuser.id}_2", %{current_user: superuser})
+        |> subscribe_and_join(
+          LightningWeb.WorkflowChannel,
+          "workflow:collaborate:#{workflow.id}",
+          %{"project_id" => project.id, "action" => "edit"}
+        )
+
+      # User 1 publishes template
+      push(socket1, "publish_template", %{
+        "name" => "Collaborative Template",
+        "description" => "Published by user 1",
+        "tags" => ["collab"],
+        "code" => "workflow code",
+        "positions" => %{}
+      })
+
+      # Both sockets should receive the broadcast
+      assert_broadcast "template_updated", %{workflow_template: template}
+      assert template.name == "Collaborative Template"
+    end
+  end
+
+  describe "get_context with workflow_template" do
+    test "includes null workflow_template when none exists", %{socket: socket} do
+      ref = push(socket, "get_context", %{})
+
+      assert_reply ref, :ok, response
+
+      assert %{workflow_template: nil} = response
+    end
+
+    test "includes workflow_template when one exists", %{
+      socket: socket,
+      workflow: workflow
+    } do
+      # Create a template for this workflow
+      {:ok, template} =
+        Lightning.WorkflowTemplates.create_template(%{
+          "name" => "Existing Template",
+          "description" => "Template description",
+          "tags" => ["existing"],
+          "code" => "workflow code",
+          "positions" => %{},
+          "workflow_id" => workflow.id
+        })
+
+      ref = push(socket, "get_context", %{})
+
+      assert_reply ref, :ok, response
+
+      assert %{
+               workflow_template: %{
+                 id: template_id,
+                 name: "Existing Template",
+                 description: "Template description",
+                 tags: ["existing"],
+                 workflow_id: workflow_id
+               }
+             } = response
+
+      assert template_id == template.id
+      assert workflow_id == workflow.id
+    end
+  end
 end

From dea8f97f210824d9b813cde874dc8b9032e380be Mon Sep 17 00:00:00 2001
From: Stuart Corbishley <corbish@gmail.com>
Date: Wed, 26 Nov 2025 14:52:30 +0200
Subject: [PATCH 2/4] Add tests for TemplatePublishPanel component

Add 22 unit tests covering:
- Form validation (name required, max lengths)
- Create vs update mode (button text, pre-fill logic)
- Tag management (parsing, removal)
- Publish flow (channelRequest, notifications)
- Button disabled states during publishing
- Navigation (back button)

Extend test helpers with createMockWorkflowTemplate factory and
workflow_template support in createSessionContext.

Fix failing tests in EdgeInspector and TemplatePublishPanel

EdgeInspector test was failing because session context was missing the
required workflow_template field, causing validation errors and preventing
read-only mode from being properly applied.
---
 .../inspector/TemplatePublishPanel.tsx        |  18 +-
 .../collaborative-editor/__helpers__/index.ts |  15 +
 .../__helpers__/sessionContextFactory.ts      |  45 +-
 .../inspector/EdgeInspector.test.tsx          |   2 +
 .../inspector/TemplatePublishPanel.test.tsx   | 566 ++++++++++++++++++
 5 files changed, 638 insertions(+), 8 deletions(-)
 create mode 100644 assets/test/collaborative-editor/components/inspector/TemplatePublishPanel.test.tsx

diff --git a/assets/js/collaborative-editor/components/inspector/TemplatePublishPanel.tsx b/assets/js/collaborative-editor/components/inspector/TemplatePublishPanel.tsx
index d8233948e7..05f4c0c462 100644
--- a/assets/js/collaborative-editor/components/inspector/TemplatePublishPanel.tsx
+++ b/assets/js/collaborative-editor/components/inspector/TemplatePublishPanel.tsx
@@ -1,17 +1,21 @@
-import { useMemo, useState } from 'react';
-import { z } from 'zod';
-import YAML from 'yaml';
 import { useAppForm } from '#/collaborative-editor/components/form';
 import { createZodValidator } from '#/collaborative-editor/components/form/createZodValidator';
+import { channelRequest } from '#/collaborative-editor/hooks/useChannel';
+import { useSession } from '#/collaborative-editor/hooks/useSession';
 import { useWorkflowTemplate } from '#/collaborative-editor/hooks/useSessionContext';
 import { useWorkflowState } from '#/collaborative-editor/hooks/useWorkflow';
 import { notifications } from '#/collaborative-editor/lib/notifications';
 import { useURLState } from '#/react/lib/use-url-state';
-import { useSession } from '#/collaborative-editor/hooks/useSession';
-import { channelRequest } from '#/collaborative-editor/hooks/useChannel';
 import { cn } from '#/utils/cn';
-import { convertWorkflowStateToSpec } from '#/yaml/util';
 import type { WorkflowState as YAMLWorkflowState } from '#/yaml/types';
+import { convertWorkflowStateToSpec } from '#/yaml/util';
+import { useMemo, useState } from 'react';
+import YAML from 'yaml';
+import { z } from 'zod';
+
+import logger from '#/utils/logger';
+
+logger.ns('TemplatePublishPanel').seal();
 
 // Validation schema matching backend constraints
 const TemplatePublishSchema = z.object({
@@ -133,7 +137,7 @@ export function TemplatePublishPanel() {
       // Navigate back to code view
       updateSearchParams({ panel: 'code' });
     } catch (error) {
-      console.error('Failed to publish template:', error);
+      logger.error('Failed to publish template:', error);
       notifications.alert({
         title: 'Failed to publish template',
         description:
diff --git a/assets/test/collaborative-editor/__helpers__/index.ts b/assets/test/collaborative-editor/__helpers__/index.ts
index 2f76d82499..17dadd53f3 100644
--- a/assets/test/collaborative-editor/__helpers__/index.ts
+++ b/assets/test/collaborative-editor/__helpers__/index.ts
@@ -108,3 +108,18 @@ export {
   createEdgeCaseTestData,
   type BreadcrumbItem,
 } from './breadcrumbHelpers';
+
+// Session context factory
+export {
+  createSessionContext,
+  createMockWorkflowTemplate,
+  createMockUser,
+  createMockConfig,
+  mockWorkflowTemplate,
+  mockUserContext,
+  mockProjectContext,
+  mockAppConfig,
+  mockPermissions,
+  type SessionContextResponse,
+  type CreateSessionContextOptions,
+} from './sessionContextFactory';
diff --git a/assets/test/collaborative-editor/__helpers__/sessionContextFactory.ts b/assets/test/collaborative-editor/__helpers__/sessionContextFactory.ts
index 72f7919e99..daa442d813 100644
--- a/assets/test/collaborative-editor/__helpers__/sessionContextFactory.ts
+++ b/assets/test/collaborative-editor/__helpers__/sessionContextFactory.ts
@@ -21,6 +21,7 @@ import type {
   ProjectRepoConnection,
   UserContext,
   WebhookAuthMethod,
+  WorkflowTemplate,
 } from '../../../js/collaborative-editor/types/sessionContext';
 
 // =============================================================================
@@ -64,6 +65,19 @@ export const mockPermissions: Permissions = {
   can_write_webhook_auth_method: true,
 };
 
+/**
+ * Sample workflow template for testing
+ */
+export const mockWorkflowTemplate: WorkflowTemplate = {
+  id: '990e8400-e29b-41d4-a716-446655440000',
+  name: 'Existing Template',
+  description: 'An existing template description',
+  tags: ['tag1', 'tag2'],
+  workflow_id: '660e8400-e29b-41d4-a716-446655440000',
+  code: 'name: Test Workflow\njobs:\n  test-job:\n    adaptor: "@openfn/language-common@latest"',
+  positions: { 'job-1': { x: 100, y: 100 } },
+};
+
 /**
  * Alternative user for testing updates
  */
@@ -254,6 +268,7 @@ export interface CreateSessionContextOptions {
   latest_snapshot_lock_version?: number;
   project_repo_connection?: Partial<ProjectRepoConnection> | null;
   webhook_auth_methods?: WebhookAuthMethod[];
+  workflow_template?: WorkflowTemplate | null;
 }
 
 /**
@@ -352,7 +367,7 @@ export function createSessionContext(
     latest_snapshot_lock_version: options.latest_snapshot_lock_version ?? 1,
     project_repo_connection,
     webhook_auth_methods: options.webhook_auth_methods ?? [],
-    workflow_template: null,
+    workflow_template: options.workflow_template ?? null,
   };
 }
 
@@ -515,6 +530,34 @@ export function createMockProject(
   };
 }
 
+/**
+ * Helper to create a mock WorkflowTemplate with custom properties
+ *
+ * Creates a workflow template object with sensible defaults that can be
+ * overridden for specific test scenarios.
+ *
+ * @param overrides - Partial WorkflowTemplate to override defaults
+ * @returns Complete WorkflowTemplate object
+ *
+ * @example
+ * const template = createMockWorkflowTemplate({ name: "My Template" });
+ * expect(template.name).toBe("My Template");
+ *
+ * @example
+ * // Use with session context
+ * const context = createSessionContext({
+ *   workflow_template: createMockWorkflowTemplate({ name: "Test Template" })
+ * });
+ */
+export function createMockWorkflowTemplate(
+  overrides: Partial<WorkflowTemplate> = {}
+): WorkflowTemplate {
+  return {
+    ...mockWorkflowTemplate,
+    ...overrides,
+  };
+}
+
 /**
  * Helper to create session context with specific characteristics
  * (Alias for createSessionContext for backward compatibility)
diff --git a/assets/test/collaborative-editor/components/inspector/EdgeInspector.test.tsx b/assets/test/collaborative-editor/components/inspector/EdgeInspector.test.tsx
index 0b7c01685d..78ea94460e 100644
--- a/assets/test/collaborative-editor/components/inspector/EdgeInspector.test.tsx
+++ b/assets/test/collaborative-editor/components/inspector/EdgeInspector.test.tsx
@@ -161,6 +161,7 @@ describe('EdgeInspector - Footer Button States', () => {
         latest_snapshot_lock_version: 1,
         project_repo_connection: null,
         webhook_auth_methods: [],
+        workflow_template: null,
       });
     });
   });
@@ -255,6 +256,7 @@ describe('EdgeInspector - Footer Button States', () => {
         latest_snapshot_lock_version: 1,
         project_repo_connection: null,
         webhook_auth_methods: [],
+        workflow_template: null,
       });
     });
 
diff --git a/assets/test/collaborative-editor/components/inspector/TemplatePublishPanel.test.tsx b/assets/test/collaborative-editor/components/inspector/TemplatePublishPanel.test.tsx
new file mode 100644
index 0000000000..da5a69531f
--- /dev/null
+++ b/assets/test/collaborative-editor/components/inspector/TemplatePublishPanel.test.tsx
@@ -0,0 +1,566 @@
+/**
+ * TemplatePublishPanel Component Tests
+ *
+ * Tests for the template publishing panel that allows superusers to publish
+ * workflows as templates or update existing templates.
+ *
+ * Test Coverage:
+ * - Form validation (name required, max lengths)
+ * - Publish flow success/failure
+ * - Update vs create mode
+ * - Tag parsing and removal
+ * - Button disabled states
+ */
+
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { toast } from 'sonner';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+
+import { TemplatePublishPanel } from '../../../../js/collaborative-editor/components/inspector/TemplatePublishPanel';
+import * as useChannelModule from '../../../../js/collaborative-editor/hooks/useChannel';
+import * as useSessionModule from '../../../../js/collaborative-editor/hooks/useSession';
+import * as useSessionContextModule from '../../../../js/collaborative-editor/hooks/useSessionContext';
+import * as useWorkflowModule from '../../../../js/collaborative-editor/hooks/useWorkflow';
+import { createMockWorkflowTemplate } from '../../__helpers__';
+
+// Mock Sonner (used by notifications)
+vi.mock('sonner', () => ({
+  toast: {
+    info: vi.fn(),
+    error: vi.fn(),
+    success: vi.fn(),
+    warning: vi.fn(),
+    dismiss: vi.fn(),
+  },
+}));
+
+// Mock useURLState
+const mockUpdateSearchParams = vi.fn();
+vi.mock('../../../../js/react/lib/use-url-state', () => ({
+  useURLState: () => ({
+    searchParams: new URLSearchParams(),
+    updateSearchParams: mockUpdateSearchParams,
+  }),
+}));
+
+// Mock channelRequest
+vi.spyOn(useChannelModule, 'channelRequest');
+
+// Mock useWorkflow hooks - needed for useAppForm which uses useValidation
+vi.mock('../../../../js/collaborative-editor/hooks/useWorkflow', () => ({
+  useWorkflowState: vi.fn(),
+  useWorkflowActions: vi.fn(() => ({
+    setClientErrors: vi.fn(),
+  })),
+}));
+
+// Mock hooks
+const mockUseSession = vi.spyOn(useSessionModule, 'useSession');
+const mockUseWorkflowTemplate = vi.spyOn(
+  useSessionContextModule,
+  'useWorkflowTemplate'
+);
+const mockUseWorkflowState = vi.mocked(useWorkflowModule.useWorkflowState);
+
+// Mock channel
+const createMockChannel = () => ({
+  topic: 'workflow:w-1',
+  on: vi.fn(),
+  off: vi.fn(),
+  push: vi.fn(),
+});
+
+// Mock workflow state factory
+const createMockWorkflowState = () => ({
+  workflow: { id: 'w-1', name: 'Test Workflow' },
+  jobs: [
+    {
+      id: 'job-1',
+      name: 'Test Job',
+      adaptor: '@openfn/language-common@latest',
+      body: 'fn(state => state)',
+    },
+  ],
+  triggers: [{ id: 'trigger-1', type: 'webhook', enabled: true }],
+  edges: [
+    {
+      id: 'edge-1',
+      source_trigger_id: 'trigger-1',
+      target_job_id: 'job-1',
+      condition_type: 'always',
+    },
+  ],
+  positions: { 'job-1': { x: 100, y: 100 } },
+});
+
+describe('TemplatePublishPanel', () => {
+  let mockChannel: ReturnType<typeof createMockChannel>;
+  let mockWorkflowState: ReturnType<typeof createMockWorkflowState>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mockChannel = createMockChannel();
+    mockWorkflowState = createMockWorkflowState();
+
+    // Default mock implementations
+    mockUseWorkflowState.mockImplementation(((selector: any) => {
+      // Also include errors for form validation
+      const stateWithErrors = {
+        ...mockWorkflowState,
+        workflow: { ...mockWorkflowState.workflow, errors: {} },
+      };
+      return selector(stateWithErrors);
+    }) as any);
+
+    mockUseWorkflowTemplate.mockReturnValue(null);
+
+    mockUseSession.mockReturnValue({
+      provider: { channel: mockChannel } as any,
+      ydoc: null,
+      awareness: null,
+      userData: null,
+      isConnected: true,
+      isSynced: true,
+      settled: true,
+      lastStatus: null,
+    });
+
+    vi.mocked(useChannelModule.channelRequest).mockResolvedValue({});
+  });
+
+  describe('Create Mode', () => {
+    test('pre-fills name with workflow name', () => {
+      render(<TemplatePublishPanel />);
+
+      const nameInput = screen.getByLabelText('Name');
+      expect(nameInput).toHaveValue('Test Workflow');
+    });
+
+    test('starts with empty description and tags', () => {
+      render(<TemplatePublishPanel />);
+
+      const descriptionInput = screen.getByLabelText('Description');
+      const tagsInput = screen.getByLabelText('Tags');
+
+      expect(descriptionInput).toHaveValue('');
+      expect(tagsInput).toHaveValue('');
+    });
+
+    test('renders Publish Template button', () => {
+      render(<TemplatePublishPanel />);
+
+      expect(
+        screen.getByRole('button', { name: 'Publish Template' })
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('Update Mode', () => {
+    beforeEach(() => {
+      mockUseWorkflowTemplate.mockReturnValue(
+        createMockWorkflowTemplate({
+          name: 'Existing Template',
+          description: 'Template description',
+          tags: ['tag1', 'tag2'],
+        })
+      );
+    });
+
+    test('pre-fills form from existing template', () => {
+      render(<TemplatePublishPanel />);
+
+      const nameInput = screen.getByLabelText('Name');
+      const descriptionInput = screen.getByLabelText('Description');
+      const tagsInput = screen.getByLabelText('Tags');
+
+      expect(nameInput).toHaveValue('Existing Template');
+      expect(descriptionInput).toHaveValue('Template description');
+      expect(tagsInput).toHaveValue('tag1, tag2');
+    });
+
+    test('renders Update Template button', () => {
+      render(<TemplatePublishPanel />);
+
+      expect(
+        screen.getByRole('button', { name: 'Update Template' })
+      ).toBeInTheDocument();
+    });
+
+    test('displays existing tags as removable chips', () => {
+      render(<TemplatePublishPanel />);
+
+      // Check tags are displayed as chips
+      expect(screen.getByText('tag1')).toBeInTheDocument();
+      expect(screen.getByText('tag2')).toBeInTheDocument();
+
+      // Check remove buttons are present
+      expect(
+        screen.getByRole('button', { name: 'Remove tag1 tag' })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: 'Remove tag2 tag' })
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('Form Validation', () => {
+    test('shows required error when name is empty', async () => {
+      const user = userEvent.setup();
+      render(<TemplatePublishPanel />);
+
+      const nameInput = screen.getByLabelText('Name');
+
+      // Clear the name field
+      await user.clear(nameInput);
+
+      // Error message should be shown
+      await waitFor(() => {
+        expect(screen.getByText('Name is required')).toBeInTheDocument();
+      });
+    });
+
+    test('shows error when name exceeds 255 characters', async () => {
+      const user = userEvent.setup();
+      render(<TemplatePublishPanel />);
+
+      const nameInput = screen.getByLabelText('Name');
+      const longName = 'a'.repeat(256);
+
+      await user.clear(nameInput);
+      await user.type(nameInput, longName);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText('Name must be less than 255 characters')
+        ).toBeInTheDocument();
+      });
+    });
+
+    test('shows error when description exceeds 1000 characters', async () => {
+      const user = userEvent.setup();
+      render(<TemplatePublishPanel />);
+
+      const descriptionInput = screen.getByLabelText('Description');
+      const longDescription = 'a'.repeat(1001);
+
+      // Use paste instead of type for large text to avoid timeout on CI
+      await user.click(descriptionInput);
+      await user.paste(longDescription);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText('Description must be less than 1000 characters')
+        ).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Tag Management', () => {
+    test('parses comma-separated tags and trims whitespace', async () => {
+      const user = userEvent.setup();
+      render(<TemplatePublishPanel />);
+
+      const tagsInput = screen.getByLabelText('Tags');
+      // Use paste for faster execution on CI
+      await user.click(tagsInput);
+      await user.paste('tag1, tag2 , tag3');
+
+      // Tags should be displayed as chips
+      await waitFor(() => {
+        expect(screen.getByText('tag1')).toBeInTheDocument();
+        expect(screen.getByText('tag2')).toBeInTheDocument();
+        expect(screen.getByText('tag3')).toBeInTheDocument();
+      });
+    });
+
+    test('removes tag when X button clicked', async () => {
+      const user = userEvent.setup();
+      mockUseWorkflowTemplate.mockReturnValue(
+        createMockWorkflowTemplate({
+          tags: ['keep', 'remove'],
+        })
+      );
+
+      render(<TemplatePublishPanel />);
+
+      // Verify both tags exist
+      expect(screen.getByText('keep')).toBeInTheDocument();
+      expect(screen.getByText('remove')).toBeInTheDocument();
+
+      // Click remove button for 'remove' tag
+      const removeButton = screen.getByRole('button', {
+        name: 'Remove remove tag',
+      });
+      await user.click(removeButton);
+
+      // Tag should be removed
+      await waitFor(() => {
+        expect(screen.queryByText('remove')).not.toBeInTheDocument();
+      });
+      expect(screen.getByText('keep')).toBeInTheDocument();
+    });
+
+    test('filters out empty tags', async () => {
+      const user = userEvent.setup();
+      render(<TemplatePublishPanel />);
+
+      const tagsInput = screen.getByLabelText('Tags');
+      // Use paste for faster execution on CI
+      await user.click(tagsInput);
+      await user.paste('tag1,,tag2, ,tag3');
+
+      // Only non-empty tags should be displayed
+      await waitFor(() => {
+        expect(screen.getByText('tag1')).toBeInTheDocument();
+        expect(screen.getByText('tag2')).toBeInTheDocument();
+        expect(screen.getByText('tag3')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Publish Flow', () => {
+    test('calls channelRequest with correct payload on publish', async () => {
+      const user = userEvent.setup();
+      render(<TemplatePublishPanel />);
+
+      const publishButton = screen.getByRole('button', {
+        name: 'Publish Template',
+      });
+      await user.click(publishButton);
+
+      await waitFor(() => {
+        expect(useChannelModule.channelRequest).toHaveBeenCalledWith(
+          mockChannel,
+          'publish_template',
+          expect.objectContaining({
+            name: 'Test Workflow',
+            description: undefined,
+            tags: [],
+            code: expect.any(String),
+            positions: { 'job-1': { x: 100, y: 100 } },
+          })
+        );
+      });
+    });
+
+    test('shows success notification and navigates on success', async () => {
+      const user = userEvent.setup();
+      render(<TemplatePublishPanel />);
+
+      const publishButton = screen.getByRole('button', {
+        name: 'Publish Template',
+      });
+      await user.click(publishButton);
+
+      await waitFor(() => {
+        expect(toast.info).toHaveBeenCalledWith(
+          'Workflow published as template',
+          expect.objectContaining({
+            description: 'Your workflow is now available as a template',
+          })
+        );
+      });
+
+      expect(mockUpdateSearchParams).toHaveBeenCalledWith({ panel: 'code' });
+    });
+
+    test('shows update success notification in update mode', async () => {
+      const user = userEvent.setup();
+      mockUseWorkflowTemplate.mockReturnValue(
+        createMockWorkflowTemplate({ name: 'Existing Template' })
+      );
+
+      render(<TemplatePublishPanel />);
+
+      const updateButton = screen.getByRole('button', {
+        name: 'Update Template',
+      });
+      await user.click(updateButton);
+
+      await waitFor(() => {
+        expect(toast.info).toHaveBeenCalledWith(
+          'Template updated',
+          expect.objectContaining({
+            description: 'Your changes have been saved',
+          })
+        );
+      });
+    });
+
+    test('shows error notification on channel error', async () => {
+      const user = userEvent.setup();
+      vi.mocked(useChannelModule.channelRequest).mockRejectedValue(
+        new Error('Publish failed')
+      );
+
+      render(<TemplatePublishPanel />);
+
+      const publishButton = screen.getByRole('button', {
+        name: 'Publish Template',
+      });
+      await user.click(publishButton);
+
+      await waitFor(() => {
+        expect(toast.error).toHaveBeenCalledWith(
+          'Failed to publish template',
+          expect.objectContaining({
+            description: 'Publish failed',
+          })
+        );
+      });
+    });
+
+    test('shows error when channel not connected', async () => {
+      const user = userEvent.setup();
+      mockUseSession.mockReturnValue({
+        provider: null,
+        ydoc: null,
+        awareness: null,
+        userData: null,
+        isConnected: false,
+        isSynced: false,
+        settled: false,
+        lastStatus: null,
+      });
+
+      render(<TemplatePublishPanel />);
+
+      const publishButton = screen.getByRole('button', {
+        name: 'Publish Template',
+      });
+      await user.click(publishButton);
+
+      await waitFor(() => {
+        expect(toast.error).toHaveBeenCalledWith(
+          'Cannot publish template',
+          expect.objectContaining({
+            description: 'Channel not connected or workflow not saved',
+          })
+        );
+      });
+    });
+  });
+
+  describe('Button Disabled States', () => {
+    test('disables publish button during publishing', async () => {
+      const user = userEvent.setup();
+
+      // Create a promise we can control
+      let resolvePublish: () => void;
+      const publishPromise = new Promise<void>(resolve => {
+        resolvePublish = resolve;
+      });
+      vi.mocked(useChannelModule.channelRequest).mockReturnValue(
+        publishPromise as any
+      );
+
+      render(<TemplatePublishPanel />);
+
+      const publishButton = screen.getByRole('button', {
+        name: 'Publish Template',
+      });
+      await user.click(publishButton);
+
+      // Button should show "Publishing..." and be disabled
+      await waitFor(() => {
+        expect(
+          screen.getByRole('button', { name: 'Publishing...' })
+        ).toBeDisabled();
+      });
+
+      // Resolve the promise
+      resolvePublish!();
+    });
+
+    test('disables form fields during publishing', async () => {
+      const user = userEvent.setup();
+
+      let resolvePublish: () => void;
+      const publishPromise = new Promise<void>(resolve => {
+        resolvePublish = resolve;
+      });
+      vi.mocked(useChannelModule.channelRequest).mockReturnValue(
+        publishPromise as any
+      );
+
+      render(<TemplatePublishPanel />);
+
+      const publishButton = screen.getByRole('button', {
+        name: 'Publish Template',
+      });
+      await user.click(publishButton);
+
+      // Form fields should be disabled
+      await waitFor(() => {
+        expect(screen.getByLabelText('Name')).toBeDisabled();
+        expect(screen.getByLabelText('Description')).toBeDisabled();
+        expect(screen.getByLabelText('Tags')).toBeDisabled();
+      });
+
+      // Resolve the promise
+      resolvePublish!();
+    });
+
+    test('disables Back button during publishing', async () => {
+      const user = userEvent.setup();
+
+      let resolvePublish: () => void;
+      const publishPromise = new Promise<void>(resolve => {
+        resolvePublish = resolve;
+      });
+      vi.mocked(useChannelModule.channelRequest).mockReturnValue(
+        publishPromise as any
+      );
+
+      render(<TemplatePublishPanel />);
+
+      const publishButton = screen.getByRole('button', {
+        name: 'Publish Template',
+      });
+      await user.click(publishButton);
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: 'Back' })).toBeDisabled();
+      });
+
+      resolvePublish!();
+    });
+
+    test('re-enables form after error', async () => {
+      const user = userEvent.setup();
+      vi.mocked(useChannelModule.channelRequest).mockRejectedValue(
+        new Error('Publish failed')
+      );
+
+      render(<TemplatePublishPanel />);
+
+      const publishButton = screen.getByRole('button', {
+        name: 'Publish Template',
+      });
+      await user.click(publishButton);
+
+      // Wait for error and re-enable
+      await waitFor(() => {
+        expect(
+          screen.getByRole('button', { name: 'Publish Template' })
+        ).not.toBeDisabled();
+      });
+
+      expect(screen.getByLabelText('Name')).not.toBeDisabled();
+    });
+  });
+
+  describe('Navigation', () => {
+    test('Back button navigates to code panel', async () => {
+      const user = userEvent.setup();
+      render(<TemplatePublishPanel />);
+
+      const backButton = screen.getByRole('button', { name: 'Back' });
+      await user.click(backButton);
+
+      expect(mockUpdateSearchParams).toHaveBeenCalledWith({ panel: 'code' });
+    });
+  });
+});

From ff08f3f06722edeec92c909e86db19943b832055 Mon Sep 17 00:00:00 2001
From: Stuart Corbishley <corbish@gmail.com>
Date: Wed, 26 Nov 2025 15:46:01 +0200
Subject: [PATCH 3/4] Refactor template publishing permission logic into
 useCanPublishTemplate hook

Extract scattered permission checks from CodeViewPanel into a dedicated hook
following the pattern of useCanSave and useCanRun. This fixes redundant logic
where buttonDisabled checked support_user even though the button was already
hidden for non-superusers.

The hook returns canPublish (visibility), buttonDisabled (unsaved changes only),
tooltipMessage, and buttonText.

Add 13 tests covering button visibility, disabled state, tooltip messages,
button text, click handler, and styling.
---
 .../components/inspector/CodeViewPanel.tsx    |  33 +--
 .../collaborative-editor/hooks/useWorkflow.ts |  51 ++++
 .../inspector/CodeViewPanel.test.tsx          | 233 ++++++++++++++++--
 3 files changed, 277 insertions(+), 40 deletions(-)

diff --git a/assets/js/collaborative-editor/components/inspector/CodeViewPanel.tsx b/assets/js/collaborative-editor/components/inspector/CodeViewPanel.tsx
index 1445b57885..60d473cb86 100644
--- a/assets/js/collaborative-editor/components/inspector/CodeViewPanel.tsx
+++ b/assets/js/collaborative-editor/components/inspector/CodeViewPanel.tsx
@@ -1,15 +1,13 @@
 import { useMemo } from 'react';
 import YAML from 'yaml';
 
-import { useWorkflowState } from '#/collaborative-editor/hooks/useWorkflow';
+import {
+  useWorkflowState,
+  useCanPublishTemplate,
+} from '#/collaborative-editor/hooks/useWorkflow';
 import { notifications } from '#/collaborative-editor/lib/notifications';
 import type { WorkflowState as YAMLWorkflowState } from '#/yaml/types';
 import { convertWorkflowStateToSpec } from '#/yaml/util';
-import {
-  useUser,
-  useWorkflowTemplate,
-  useLatestSnapshotLockVersion,
-} from '#/collaborative-editor/hooks/useSessionContext';
 import { useURLState } from '#/react/lib/use-url-state';
 import { cn } from '#/utils/cn';
 
@@ -86,29 +84,14 @@ export function CodeViewPanel() {
   };
 
   // Template publishing state and handlers
-  const user = useUser();
-  const workflowTemplate = useWorkflowTemplate();
-  const latestSnapshotLockVersion = useLatestSnapshotLockVersion();
+  const { canPublish, buttonDisabled, tooltipMessage, buttonText } =
+    useCanPublishTemplate();
   const { updateSearchParams } = useURLState();
 
-  // Check if workflow has unsaved changes by comparing lock versions
-  const hasUnsavedChanges =
-    workflow?.lock_version !== latestSnapshotLockVersion;
-
   const handlePublishTemplate = () => {
     updateSearchParams({ panel: 'publish-template' });
   };
 
-  const buttonText = workflowTemplate ? 'Update Template' : 'Publish Template';
-
-  const buttonDisabled = hasUnsavedChanges || !user?.support_user;
-
-  const tooltipMessage = hasUnsavedChanges
-    ? `You must save your workflow first before ${workflowTemplate ? 'updating' : 'publishing'} a template.`
-    : !user?.support_user
-      ? 'Only superusers can publish templates'
-      : undefined;
-
   if (!workflow) {
     return <div className="px-4 py-5 text-gray-500">Loading...</div>;
   }
@@ -156,13 +139,13 @@ export function CodeViewPanel() {
           >
             Copy Code
           </button>
-          {user?.support_user && (
+          {canPublish && (
             <button
               id="publish-template-btn"
               type="button"
               onClick={handlePublishTemplate}
               disabled={buttonDisabled}
-              title={tooltipMessage}
+              {...(tooltipMessage && { title: tooltipMessage })}
               className={cn(
                 'rounded-md px-3 py-2 text-sm font-semibold shadow-xs min-w-[8rem]',
                 buttonDisabled
diff --git a/assets/js/collaborative-editor/hooks/useWorkflow.ts b/assets/js/collaborative-editor/hooks/useWorkflow.ts
index fcea4771b6..1517bfc04a 100644
--- a/assets/js/collaborative-editor/hooks/useWorkflow.ts
+++ b/assets/js/collaborative-editor/hooks/useWorkflow.ts
@@ -47,6 +47,8 @@ import { useSession } from './useSession';
 import {
   useLatestSnapshotLockVersion,
   usePermissions,
+  useUser,
+  useWorkflowTemplate,
 } from './useSessionContext';
 
 // import _logger from "#/utils/logger";
@@ -812,3 +814,52 @@ export const useWorkflowSettingsErrors = (): {
 
   return { hasErrors, errors: validationErrors };
 };
+
+/**
+ * Hook to determine if user can publish workflow as template
+ *
+ * Returns object with:
+ * - canPublish: boolean - whether publish action is available
+ *   (based on support_user)
+ * - buttonDisabled: boolean - whether button should be disabled
+ *   (based on unsaved changes)
+ * - tooltipMessage: string - message explaining button state
+ * - buttonText: string - "Publish Template" or "Update Template"
+ *
+ * Template publishing is only available to support users (superusers).
+ * The button is disabled when there are unsaved changes (workflow
+ * lock_version differs from latestSnapshotLockVersion).
+ */
+export const useCanPublishTemplate = (): {
+  canPublish: boolean;
+  buttonDisabled: boolean;
+  tooltipMessage: string;
+  buttonText: string;
+} => {
+  const user = useUser();
+  const workflowTemplate = useWorkflowTemplate();
+  const latestSnapshotLockVersion = useLatestSnapshotLockVersion();
+  const workflow = useWorkflowState(state => state.workflow);
+
+  // Only support users can publish templates
+  const canPublish = user?.support_user ?? false;
+
+  // Check if workflow has unsaved changes by comparing lock versions
+  const hasUnsavedChanges =
+    workflow?.lock_version !== latestSnapshotLockVersion;
+
+  const buttonText = workflowTemplate ? 'Update Template' : 'Publish Template';
+
+  const buttonDisabled = hasUnsavedChanges;
+
+  const tooltipMessage = hasUnsavedChanges
+    ? `You must save your workflow first before ${workflowTemplate ? 'updating' : 'publishing'} a template.`
+    : '';
+
+  return {
+    canPublish,
+    buttonDisabled,
+    tooltipMessage,
+    buttonText,
+  };
+};
diff --git a/assets/test/collaborative-editor/components/inspector/CodeViewPanel.test.tsx b/assets/test/collaborative-editor/components/inspector/CodeViewPanel.test.tsx
index e37409fa09..2b3e5b50fa 100644
--- a/assets/test/collaborative-editor/components/inspector/CodeViewPanel.test.tsx
+++ b/assets/test/collaborative-editor/components/inspector/CodeViewPanel.test.tsx
@@ -1,23 +1,30 @@
 /**
  * CodeViewPanel Component Tests
  *
- * Tests for CodeViewPanel component that displays workflow as YAML code.
- * Focuses on core YAML generation and error handling logic.
+ * Tests for CodeViewPanel component that displays workflow as YAML code
+ * and provides template publishing functionality.
  *
  * Test coverage:
  * - YAML generation from workflow state
  * - Loading states
  * - Error handling for YAML generation failures
+ * - Template publishing button visibility and state
+ * - Button text based on template existence
+ * - Tooltip messages for different states
+ * - Click handler for opening publish panel
+ * - Button styling based on enabled/disabled state
  *
  * Note: Download and copy functionality require manual testing due to jsdom
  * limitations with DOM manipulation and clipboard API.
  */
 
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, test, vi } from 'vitest';
 import YAML from 'yaml';
 
 import { CodeViewPanel } from '../../../../js/collaborative-editor/components/inspector/CodeViewPanel';
+import { useURLState } from '../../../../js/react/lib/use-url-state';
 import * as yamlUtil from '../../../../js/yaml/util';
 
 // Mock yaml/util with simple pass-through
@@ -64,28 +71,81 @@ vi.mock('../../../../js/collaborative-editor/hooks/useWorkflow', () => ({
     };
     return selector(state);
   }),
+  useCanPublishTemplate: vi.fn(() => {
+    // Calculate based on current mock state
+    const hasUnsavedChanges =
+      mockWorkflowState.workflow?.lock_version !==
+      mockLatestSnapshotLockVersion;
+
+    return {
+      canPublish: mockUser.support_user,
+      buttonDisabled: hasUnsavedChanges,
+      tooltipMessage: hasUnsavedChanges
+        ? `You must save your workflow first before ${mockWorkflowTemplate ? 'updating' : 'publishing'} a template.`
+        : '',
+      buttonText: mockWorkflowTemplate ? 'Update Template' : 'Publish Template',
+    };
+  }),
 }));
 
+// Mock state for useSessionContext hooks
+const mockUser = {
+  id: 'test-user-id',
+  email: 'test@example.com',
+  first_name: 'Test',
+  last_name: 'User',
+  email_confirmed: true,
+  support_user: true, // Make user a superuser for template functionality
+  inserted_at: '2024-01-01T00:00:00Z',
+};
+
+let mockWorkflowTemplate: any = null;
+let mockLatestSnapshotLockVersion = 1;
+
+// Helper functions for tests to manipulate session context mocks
+const setMockUser = (newUser: any) => {
+  Object.assign(mockUser, newUser);
+};
+
+const resetMockUser = () => {
+  mockUser.id = 'test-user-id';
+  mockUser.email = 'test@example.com';
+  mockUser.first_name = 'Test';
+  mockUser.last_name = 'User';
+  mockUser.email_confirmed = true;
+  mockUser.support_user = true;
+  mockUser.inserted_at = '2024-01-01T00:00:00Z';
+};
+
+const setMockWorkflowTemplate = (template: any) => {
+  mockWorkflowTemplate = template;
+};
+
+const setMockLatestSnapshotLockVersion = (version: number) => {
+  mockLatestSnapshotLockVersion = version;
+};
+
+const resetSessionContextMocks = () => {
+  resetMockUser();
+  mockWorkflowTemplate = null;
+  mockLatestSnapshotLockVersion = 1;
+};
+
 // Mock useSessionContext hooks
 vi.mock('../../../../js/collaborative-editor/hooks/useSessionContext', () => ({
-  useUser: vi.fn(() => ({
-    id: 'test-user-id',
-    email: 'test@example.com',
-    first_name: 'Test',
-    last_name: 'User',
-    email_confirmed: true,
-    support_user: true, // Make user a superuser for template functionality
-    inserted_at: '2024-01-01T00:00:00Z',
-  })),
-  useWorkflowTemplate: vi.fn(() => null), // No template by default
-  useLatestSnapshotLockVersion: vi.fn(() => 1),
+  useUser: vi.fn(() => mockUser),
+  useWorkflowTemplate: vi.fn(() => mockWorkflowTemplate),
+  useLatestSnapshotLockVersion: vi.fn(() => mockLatestSnapshotLockVersion),
 }));
 
 // Mock useURLState hook
+const mockUpdateSearchParams = vi.fn();
+const mockGetSearchParam = vi.fn();
+
 vi.mock('../../../../js/react/lib/use-url-state', () => ({
   useURLState: vi.fn(() => ({
-    updateSearchParams: vi.fn(),
-    getSearchParam: vi.fn(),
+    updateSearchParams: mockUpdateSearchParams,
+    getSearchParam: mockGetSearchParam,
   })),
 }));
 
@@ -96,6 +156,9 @@ describe('CodeViewPanel', () => {
 
     // Reset workflow state
     resetMockWorkflowState();
+
+    // Reset session context mocks
+    resetSessionContextMocks();
   });
 
   describe('rendering and YAML generation', () => {
@@ -168,4 +231,144 @@ describe('CodeViewPanel', () => {
       consoleErrorSpy.mockRestore();
     });
   });
+
+  describe('template publishing button', () => {
+    beforeEach(() => {
+      // Need a workflow to be loaded for button to show
+      setMockWorkflowState({
+        workflow: { id: 'w1', name: 'Test Workflow', lock_version: 1 },
+      });
+    });
+
+    test('renders publish template button when user is superuser', () => {
+      setMockUser({ support_user: true });
+      render(<CodeViewPanel />);
+      expect(
+        screen.getByRole('button', { name: /publish template/i })
+      ).toBeInTheDocument();
+    });
+
+    test('hides publish template button when user is not superuser', () => {
+      setMockUser({ support_user: false });
+      render(<CodeViewPanel />);
+      expect(
+        screen.queryByRole('button', { name: /publish template/i })
+      ).not.toBeInTheDocument();
+    });
+
+    test('disables button when workflow has unsaved changes', () => {
+      // Workflow lock_version is 1, but latest snapshot is 2
+      setMockLatestSnapshotLockVersion(2);
+      render(<CodeViewPanel />);
+
+      const button = screen.getByRole('button', { name: /publish template/i });
+      expect(button).toBeDisabled();
+    });
+
+    test('enables button when workflow is saved and user is superuser', () => {
+      // Lock versions match - no unsaved changes
+      setMockLatestSnapshotLockVersion(1);
+      setMockUser({ support_user: true });
+      render(<CodeViewPanel />);
+
+      const button = screen.getByRole('button', { name: /publish template/i });
+      expect(button).toBeEnabled();
+    });
+
+    test('shows "Publish Template" text when no template exists', () => {
+      setMockWorkflowTemplate(null);
+      render(<CodeViewPanel />);
+
+      expect(
+        screen.getByRole('button', { name: /publish template/i })
+      ).toBeInTheDocument();
+    });
+
+    test('shows "Update Template" text when template exists', () => {
+      setMockWorkflowTemplate({ id: 'template-1', name: 'Existing Template' });
+      render(<CodeViewPanel />);
+
+      expect(
+        screen.getByRole('button', { name: /update template/i })
+      ).toBeInTheDocument();
+    });
+
+    test('shows tooltip about unsaved changes when workflow is not saved', () => {
+      setMockLatestSnapshotLockVersion(2);
+      setMockWorkflowTemplate(null);
+      render(<CodeViewPanel />);
+
+      const button = screen.getByRole('button', { name: /publish template/i });
+      expect(button).toHaveAttribute(
+        'title',
+        'You must save your workflow first before publishing a template.'
+      );
+    });
+
+    test('shows tooltip about unsaved changes for updating when template exists', () => {
+      setMockLatestSnapshotLockVersion(2);
+      setMockWorkflowTemplate({ id: 'template-1', name: 'Existing Template' });
+      render(<CodeViewPanel />);
+
+      const button = screen.getByRole('button', { name: /update template/i });
+      expect(button).toHaveAttribute(
+        'title',
+        'You must save your workflow first before updating a template.'
+      );
+    });
+
+    test('no tooltip shown when button is enabled', () => {
+      setMockLatestSnapshotLockVersion(1); // No unsaved changes
+      setMockUser({ support_user: true });
+      render(<CodeViewPanel />);
+
+      const button = screen.getByRole('button', { name: /publish template/i });
+      // When enabled, title attribute should not be present (tooltip is undefined)
+      expect(button).not.toHaveAttribute('title');
+    });
+
+    test('calls updateSearchParams with publish-template panel on click', async () => {
+      const user = userEvent.setup();
+      setMockLatestSnapshotLockVersion(1); // No unsaved changes
+      render(<CodeViewPanel />);
+
+      const button = screen.getByRole('button', { name: /publish template/i });
+      await user.click(button);
+
+      expect(mockUpdateSearchParams).toHaveBeenCalledWith({
+        panel: 'publish-template',
+      });
+    });
+
+    test('does not call updateSearchParams when button is disabled', async () => {
+      const user = userEvent.setup();
+      setMockLatestSnapshotLockVersion(2); // Unsaved changes
+      render(<CodeViewPanel />);
+
+      const button = screen.getByRole('button', { name: /publish template/i });
+      // Button is disabled, click should not trigger handler
+      await user.click(button);
+
+      expect(mockUpdateSearchParams).not.toHaveBeenCalled();
+    });
+
+    test('button has correct styling when enabled', () => {
+      setMockLatestSnapshotLockVersion(1); // No unsaved changes
+      render(<CodeViewPanel />);
+
+      const button = screen.getByRole('button', { name: /publish template/i });
+      expect(button).toHaveClass('bg-primary-600');
+      expect(button).toHaveClass('hover:bg-primary-700');
+      expect(button).not.toHaveClass('cursor-not-allowed');
+    });
+
+    test('button has correct styling when disabled', () => {
+      setMockLatestSnapshotLockVersion(2); // Unsaved changes
+      render(<CodeViewPanel />);
+
+      const button = screen.getByRole('button', { name: /publish template/i });
+      expect(button).toHaveClass('bg-primary-300');
+      expect(button).toHaveClass('cursor-not-allowed');
+    });
+  });
 });

From 5bffa39a41fedfe2b26e577f709412d7ce1914d0 Mon Sep 17 00:00:00 2001
From: Stuart Corbishley <corbish@gmail.com>
Date: Wed, 26 Nov 2025 16:43:29 +0200
Subject: [PATCH 4/4] Refactor publish_template authorization to use Bodyguard
 policy

- Add :publish_template action to ProjectUsers policy requiring
  support_user AND (project member OR support access enabled)
- Refactor channel handler to use authorize_publish_template/1
  following the same pattern as authorize_edit_workflow/1
- Return standard {:ok, _}/{:error, _} tuples from publish_template/2
- Add else clause with workflow_error_reply/2 for error handling
- Remove old can_publish_template/1 function
- Add policy tests covering all authorization scenarios
- Fix typo "suport" -> "support" in channel test
---
 lib/lightning/policies/project_users.ex       |  7 +++
 .../channels/workflow_channel.ex              | 52 ++++++++-----------
 .../project_user_permissions_test.exs         | 36 +++++++++++++
 .../channels/workflow_channel_test.exs        |  6 +--
 4 files changed, 69 insertions(+), 32 deletions(-)

diff --git a/lib/lightning/policies/project_users.ex b/lib/lightning/policies/project_users.ex
index 0d1f7b23b8..507cc20120 100644
--- a/lib/lightning/policies/project_users.ex
+++ b/lib/lightning/policies/project_users.ex
@@ -27,6 +27,7 @@ defmodule Lightning.Policies.ProjectUsers do
           | :write_github_connection
           | :initiate_github_sync
           | :create_collection
+          | :publish_template
 
   @doc """
   authorize/3 takes an action, a user, and a project. It checks the user's role
@@ -59,6 +60,12 @@ defmodule Lightning.Policies.ProjectUsers do
   def authorize(:delete_project, %User{} = user, %Project{} = project),
     do: Projects.get_project_user_role(user, project) == :owner
 
+  def authorize(:publish_template, %User{} = user, %Project{} = project) do
+    user.support_user and
+      (Projects.member_of?(project, user) or
+         allow_as_support_user?(user, project))
+  end
+
   def authorize(action, %User{} = user, %Project{} = project) do
     project_user = Projects.get_project_user(project, user)
     authorize(action, user, project_user)
diff --git a/lib/lightning_web/channels/workflow_channel.ex b/lib/lightning_web/channels/workflow_channel.ex
index 4545134826..8dbd050887 100644
--- a/lib/lightning_web/channels/workflow_channel.ex
+++ b/lib/lightning_web/channels/workflow_channel.ex
@@ -502,17 +502,15 @@ defmodule LightningWeb.WorkflowChannel do
 
   @impl true
   def handle_in("publish_template", params, socket) do
-    with :ok <- can_publish_template(socket),
+    with :ok <- authorize_publish_template(socket),
          {:ok, template} <- publish_template(socket, params) do
       broadcast_from!(socket, "template_updated", %{
         workflow_template: render_workflow_template(template)
       })
 
-      {:reply,
-       {:ok,
-        %{
-          template: render_workflow_template(template)
-        }}, socket}
+      {:reply, {:ok, %{template: render_workflow_template(template)}}, socket}
+    else
+      error -> workflow_error_reply(socket, error)
     end
   end
 
@@ -810,34 +808,13 @@ defmodule LightningWeb.WorkflowChannel do
     ])
   end
 
-  defp can_publish_template(socket) do
-    if socket.assigns.current_user.support_user do
-      :ok
-    else
-      {:reply,
-       {:error,
-        %{
-          errors: %{base: ["Only superusers can publish templates"]},
-          type: "unauthorized"
-        }}, socket}
-    end
-  end
-
   defp publish_template(socket, params) do
     workflow = socket.assigns.workflow
     template_params = Map.put(params, "workflow_id", workflow.id)
 
     case Lightning.WorkflowTemplates.create_template(template_params) do
-      {:ok, template} ->
-        {:ok, template}
-
-      {:error, %Ecto.Changeset{} = changeset} ->
-        {:reply,
-         {:error,
-          %{
-            errors: format_changeset_errors(changeset),
-            type: "validation_error"
-          }}, socket}
+      {:ok, template} -> {:ok, template}
+      {:error, changeset} -> {:error, changeset}
     end
   end
 
@@ -934,6 +911,23 @@ defmodule LightningWeb.WorkflowChannel do
     end
   end
 
+  defp authorize_publish_template(socket) do
+    user = socket.assigns.current_user
+    project = socket.assigns.project
+
+    case Permissions.can(:project_users, :publish_template, user, project) do
+      :ok ->
+        :ok
+
+      {:error, :unauthorized} ->
+        {:error,
+         %{
+           type: "unauthorized",
+           message: "You don't have permission to publish templates"
+         }}
+    end
+  end
+
   defp ensure_unique_name(params, project) do
     workflow_name =
       params["name"]
diff --git a/test/lightning/policies/project_user_permissions_test.exs b/test/lightning/policies/project_user_permissions_test.exs
index 557efeead1..3258926261 100644
--- a/test/lightning/policies/project_user_permissions_test.exs
+++ b/test/lightning/policies/project_user_permissions_test.exs
@@ -248,6 +248,42 @@ defmodule Lightning.Policies.ProjectUserPermissionsTest do
         initiate_github_sync
       )a |> (&refute_can(ProjectUsers, &1, regular_user, nil)).()
     end
+
+    test "can publish template when project member", %{project: project} do
+      support_user = insert(:user, support_user: true)
+      insert(:project_user, project: project, user: support_user, role: :editor)
+
+      assert ProjectUsers
+             |> Permissions.can?(:publish_template, support_user, project)
+    end
+
+    test "can publish template with support access enabled", %{
+      project: project
+    } do
+      support_user = insert(:user, support_user: true)
+      project = %{project | allow_support_access: true}
+
+      assert ProjectUsers
+             |> Permissions.can?(:publish_template, support_user, project)
+    end
+
+    test "cannot publish template without project membership and support access disabled",
+         %{project: project} do
+      support_user = insert(:user, support_user: true)
+      project = %{project | allow_support_access: false}
+
+      refute ProjectUsers
+             |> Permissions.can?(:publish_template, support_user, project)
+    end
+
+    test "non-support user cannot publish template even if project member",
+         %{project: project} do
+      regular_user = insert(:user, support_user: false)
+      insert(:project_user, project: project, user: regular_user, role: :editor)
+
+      refute ProjectUsers
+             |> Permissions.can?(:publish_template, regular_user, project)
+    end
   end
 
   defp assert_can(module, actions, user, subject) when is_list(actions) do
diff --git a/test/lightning_web/channels/workflow_channel_test.exs b/test/lightning_web/channels/workflow_channel_test.exs
index 91b50b8e47..994b67d3ba 100644
--- a/test/lightning_web/channels/workflow_channel_test.exs
+++ b/test/lightning_web/channels/workflow_channel_test.exs
@@ -2309,11 +2309,11 @@ defmodule LightningWeb.WorkflowChannelTest do
       assert broadcast_template.name == "Test Template"
     end
 
-    test "successfully updates existing template as suport user", %{
+    test "successfully updates existing template as support user", %{
       workflow: workflow,
       project: project
     } do
-      # Create a suport user
+      # Create a support user
       superuser = insert(:user, support_user: true)
       insert(:project_user, project: project, user: superuser, role: :editor)
 
@@ -2372,7 +2372,7 @@ defmodule LightningWeb.WorkflowChannelTest do
         })
 
       assert_reply ref, :error, %{
-        errors: %{base: ["Only superusers can publish templates"]},
+        errors: %{base: ["You don't have permission to publish templates"]},
         type: "unauthorized"
       }