Adopt the shared interface pattern language

webui/src/features/workflow/WorkflowPage.tsx

@@ -27,6 +27,7 @@ import {
   Button,
   ConfirmDialog,
   Dialog,
+  DocumentationHelpLink,
   DismissibleAlert,
   FormField,
   IconButton,
@@ -74,6 +75,7 @@ import WorkflowRunsDialog from "./WorkflowRunsDialog";
 import {
   FALLBACK_WORKFLOW_LIBRARY,
   draftFromDefinition,
+  newWorkflowNode,
   sampleWorkflowDraft,
   workflowFingerprint,
   workflowPayload,
@@ -564,6 +566,21 @@ export default function WorkflowPage({
     setSelectedEdgeId(null);
   };
 
+  const addNodeFromPalette = (nodeType: string) => {
+    if (!draft || graphReadOnly) return;
+    const index = draft.graph.nodes.length;
+    const node = newWorkflowNode(
+      nodeType,
+      {
+        x: 80 + (index % 4) * 220,
+        y: 80 + Math.floor(index / 4) * 150
+      },
+      nodeLibrary
+    );
+    updateGraph({ ...draft.graph, nodes: [...draft.graph.nodes, node] });
+    setSelectedNodeId(node.id);
+  };
+
   return (
     <main className="workflow-page">
       <div className="workflow-shell">
@@ -571,6 +588,10 @@ export default function WorkflowPage({
           <div className="workflow-panel-toolbar">
             <strong>Workflows</strong>
             <span className="workflow-toolbar-actions">
+              <DocumentationHelpLink
+                reference={{ topicId: "workflow.editor", documentationType: "user" }}
+                label="Open Workflow documentation"
+              />
               <IconButton
                 label="Refresh"
                 icon={<RefreshCw size={16} />}
@@ -593,6 +614,7 @@ export default function WorkflowPage({
                 variant="primary"
                 onClick={createNew}
                 disabled={!canWrite}
+                disabledReason={!canWrite ? "Workflow definition write permission is required." : undefined}
               />
             </span>
           </div>
@@ -870,6 +892,7 @@ export default function WorkflowPage({
                               onDragStart={(event) =>
                                 startPaletteDrag(event, nodeType.type)
                               }
+                              onClick={() => addNodeFromPalette(nodeType.type)}
                               title={nodeType.description}
                             >
                               <GitFork size={16} />
@@ -1195,6 +1218,7 @@ function WorkflowDefinitionSettingsDialog({
           <FormField
             label="Scope"
             help="The scope determines ownership, visibility, and the Policy inheritance path."
+            documentation={{ topicId: "workflow.editor", documentationType: "admin" }}
           >
             <select
               value={draft.scopeType}
@@ -1241,6 +1265,7 @@ function WorkflowDefinitionSettingsDialog({
           <FormField
             label="Definition kind"
             help="Templates can be reused or derived, but cannot be activated or started."
+            documentation={{ topicId: "workflow.editor", documentationType: "user" }}
           >
             <select
               value={draft.definitionKind}
@@ -1257,6 +1282,7 @@ function WorkflowDefinitionSettingsDialog({
           <FormField
             label="Execution mode"
             help="Guided flows require a user; automated flows cannot contain human handoffs; hybrid flows can combine both."
+            documentation={{ topicId: "workflow.editor", documentationType: "user" }}
           >
             <select
               value={draft.executionMode}
@@ -1278,6 +1304,7 @@ function WorkflowDefinitionSettingsDialog({
           <FormField
             label="Workflow View"
             help="The selected immutable View revision is applied for active runs. Individual steps may narrow it further."
+            documentation={{ topicId: "workflow.editor", documentationType: "user" }}
           >
             <select
               value={draft.viewId}