diff --git a/angular.json b/angular.json
index 812f38eaab..ab1dac87d1 100644
--- a/angular.json
+++ b/angular.json
@@ -20,11 +20,18 @@
       "framework": "express"
     },
     "@nrwl/angular:application": {
+      "style": "scss",
+      "linter": "eslint",
       "unitTestRunner": "jest",
       "e2eTestRunner": "cypress"
     },
     "@nrwl/angular:library": {
-      "unitTestRunner": "none"
+      "style": "scss",
+      "linter": "eslint",
+      "unitTestRunner": "jest"
+    },
+    "@nrwl/angular:component": {
+      "style": "scss"
     }
   },
   "projects": {
@@ -272,6 +279,31 @@
       },
       "schematics": {}
     },
+    "vscode-ui-argument-list": {
+      "projectType": "library",
+      "root": "libs/vscode-ui/argument-list",
+      "sourceRoot": "libs/vscode-ui/argument-list/src",
+      "prefix": "nx-console",
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/vscode-ui/argument-list/src/**/*.ts",
+              "libs/vscode-ui/argument-list/src/**/*.html"
+            ]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "outputs": ["coverage/libs/vscode-ui/argument-list"],
+          "options": {
+            "jestConfig": "libs/vscode-ui/argument-list/jest.config.js",
+            "passWithNoTests": true
+          }
+        }
+      }
+    },
     "vscode-ui-components": {
       "projectType": "library",
       "root": "libs/vscode-ui/components",
@@ -294,11 +326,6 @@
           },
           "outputs": ["coverage/libs/vscode-ui/components"]
         }
-      },
-      "schematics": {
-        "@nrwl/angular:component": {
-          "styleext": "scss"
-        }
       }
     },
     "vscode-ui-styles": {
diff --git a/apps/vscode-ui/src/styles.scss b/apps/vscode-ui/src/styles.scss
index 262e5eba49..bc9c27907a 100644
--- a/apps/vscode-ui/src/styles.scss
+++ b/apps/vscode-ui/src/styles.scss
@@ -1,5 +1,6 @@
 @import 'flex';
 @import 'variables';
+@import '~vscode-codicons/dist/codicon';
 
 html,
 body {
diff --git a/jest.config.js b/jest.config.js
index 1068d10a7e..dff135dc12 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -2,6 +2,7 @@ module.exports = {
   projects: [
     '<rootDir>/apps/vscode-ui',
     '<rootDir>/libs/server',
+    '<rootDir>/libs/vscode-ui/argument-list',
     '<rootDir>/libs/vscode-ui/components',
     '<rootDir>/libs/vscode-ui/feature-task-execution-form',
     '<rootDir>/libs/vscode/nx-project-view',
diff --git a/libs/vscode-ui/argument-list/.eslintrc.json b/libs/vscode-ui/argument-list/.eslintrc.json
new file mode 100644
index 0000000000..a8f03f4386
--- /dev/null
+++ b/libs/vscode-ui/argument-list/.eslintrc.json
@@ -0,0 +1,31 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nrwl/nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "parserOptions": {
+        "project": ["libs/vscode-ui/argument-list/tsconfig.*?.json"]
+      },
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          { "type": "attribute", "prefix": "nx-console", "style": "camelCase" }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          { "type": "element", "prefix": "nx-console", "style": "kebab-case" }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/libs/vscode-ui/argument-list/jest.config.js b/libs/vscode-ui/argument-list/jest.config.js
new file mode 100644
index 0000000000..1409af71cc
--- /dev/null
+++ b/libs/vscode-ui/argument-list/jest.config.js
@@ -0,0 +1,23 @@
+module.exports = {
+  displayName: 'vscode-ui-argument-list',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {
+    'ts-jest': {
+      tsConfig: '<rootDir>/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\.(html|svg)$',
+      astTransformers: {
+        before: [
+          'jest-preset-angular/build/InlineFilesTransformer',
+          'jest-preset-angular/build/StripStylesTransformer',
+        ],
+      },
+    },
+  },
+  coverageDirectory: '../../../coverage/libs/vscode-ui/argument-list',
+  snapshotSerializers: [
+    'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
+    'jest-preset-angular/build/AngularSnapshotSerializer.js',
+    'jest-preset-angular/build/HTMLCommentSerializer.js',
+  ],
+};
diff --git a/libs/vscode-ui/argument-list/src/index.ts b/libs/vscode-ui/argument-list/src/index.ts
new file mode 100644
index 0000000000..a294fb67aa
--- /dev/null
+++ b/libs/vscode-ui/argument-list/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/argument-list.module';
diff --git a/libs/vscode-ui/argument-list/src/lib/argument-list.component.html b/libs/vscode-ui/argument-list/src/lib/argument-list.component.html
new file mode 100644
index 0000000000..77e85b021b
--- /dev/null
+++ b/libs/vscode-ui/argument-list/src/lib/argument-list.component.html
@@ -0,0 +1 @@
+<div *ngFor="let arg of args" [innerHtml]="arg"></div>
diff --git a/libs/vscode-ui/argument-list/src/lib/argument-list.component.scss b/libs/vscode-ui/argument-list/src/lib/argument-list.component.scss
new file mode 100644
index 0000000000..80b5290b7a
--- /dev/null
+++ b/libs/vscode-ui/argument-list/src/lib/argument-list.component.scss
@@ -0,0 +1,5 @@
+div {
+  overflow-wrap: break-word;
+  margin-left: 1em;
+  text-indent: -1em;
+}
diff --git a/libs/vscode-ui/argument-list/src/lib/argument-list.component.spec.ts b/libs/vscode-ui/argument-list/src/lib/argument-list.component.spec.ts
new file mode 100644
index 0000000000..66e9036491
--- /dev/null
+++ b/libs/vscode-ui/argument-list/src/lib/argument-list.component.spec.ts
@@ -0,0 +1,34 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ArgumentListComponent } from './argument-list.component';
+
+describe('ArgumentListComponent', () => {
+  let component: ArgumentListComponent;
+  let fixture: ComponentFixture<ArgumentListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ArgumentListComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ArgumentListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should format arguments for multiline break-word', () => {
+    component.args = [
+      '--some-arg=withalistofoptions,that-may-not-fit-on-a-single-line',
+    ];
+    fixture.detectChanges();
+    expect(component.args).toEqual([
+      '--some-arg=<wbr>withalistofoptions,that-may-not-fit-on-a-single-line',
+    ]);
+  });
+});
diff --git a/libs/vscode-ui/argument-list/src/lib/argument-list.component.ts b/libs/vscode-ui/argument-list/src/lib/argument-list.component.ts
new file mode 100644
index 0000000000..21a2e3d792
--- /dev/null
+++ b/libs/vscode-ui/argument-list/src/lib/argument-list.component.ts
@@ -0,0 +1,36 @@
+import {
+  Component,
+  Input,
+  ChangeDetectionStrategy,
+  SecurityContext,
+} from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Component({
+  selector: 'nx-console-argument-list',
+  templateUrl: './argument-list.component.html',
+  styleUrls: ['./argument-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ArgumentListComponent {
+  private _formattedArgs: string[];
+  @Input()
+  get args(): string[] {
+    return this._formattedArgs;
+  }
+  set args(values: string[]) {
+    this._formattedArgs =
+      values &&
+      values.map(
+        (value) =>
+          this.domSanitizer.sanitize(
+            SecurityContext.HTML,
+            this.domSanitizer.bypassSecurityTrustHtml(
+              value.replace('=', '=<wbr>')
+            )
+          ) || ''
+      );
+  }
+
+  constructor(private readonly domSanitizer: DomSanitizer) {}
+}
diff --git a/libs/vscode-ui/argument-list/src/lib/argument-list.module.ts b/libs/vscode-ui/argument-list/src/lib/argument-list.module.ts
new file mode 100644
index 0000000000..1d4bc3ff47
--- /dev/null
+++ b/libs/vscode-ui/argument-list/src/lib/argument-list.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ArgumentListComponent } from './argument-list.component';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [ArgumentListComponent],
+  exports: [ArgumentListComponent],
+})
+export class ArgumentListModule {}
diff --git a/libs/vscode-ui/argument-list/src/test-setup.ts b/libs/vscode-ui/argument-list/src/test-setup.ts
new file mode 100644
index 0000000000..8d88704e8f
--- /dev/null
+++ b/libs/vscode-ui/argument-list/src/test-setup.ts
@@ -0,0 +1 @@
+import 'jest-preset-angular';
diff --git a/libs/vscode-ui/argument-list/tsconfig.json b/libs/vscode-ui/argument-list/tsconfig.json
new file mode 100644
index 0000000000..667a3463d1
--- /dev/null
+++ b/libs/vscode-ui/argument-list/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
diff --git a/libs/vscode-ui/argument-list/tsconfig.lib.json b/libs/vscode-ui/argument-list/tsconfig.lib.json
new file mode 100644
index 0000000000..890aaeb555
--- /dev/null
+++ b/libs/vscode-ui/argument-list/tsconfig.lib.json
@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "target": "es2015",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": ["dom", "es2018"]
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": true
+  },
+  "exclude": ["src/test-setup.ts", "**/*.spec.ts"],
+  "include": ["**/*.ts"]
+}
diff --git a/libs/vscode-ui/argument-list/tsconfig.spec.json b/libs/vscode-ui/argument-list/tsconfig.spec.json
new file mode 100644
index 0000000000..fd405a65ef
--- /dev/null
+++ b/libs/vscode-ui/argument-list/tsconfig.spec.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["**/*.spec.ts", "**/*.d.ts"]
+}
diff --git a/libs/vscode-ui/components/src/lib/field-tree/field-tree.component.html b/libs/vscode-ui/components/src/lib/field-tree/field-tree.component.html
index 56a3525b56..d1cdef359f 100644
--- a/libs/vscode-ui/components/src/lib/field-tree/field-tree.component.html
+++ b/libs/vscode-ui/components/src/lib/field-tree/field-tree.component.html
@@ -3,6 +3,8 @@
   *ngFor="let field of fields"
   (click)="scrollToField(field.name)"
   [class.active]="activeFieldName === field.name"
+  [class.valid]="isFieldValid(field.name)"
+  [class.error]="isFieldInvalid(field.name)"
   [id]="field.name + '-field-tree-item'"
   [style.display]="filteredFields.has(field.name) ? 'block' : 'none'"
 >
diff --git a/libs/vscode-ui/components/src/lib/field-tree/field-tree.component.scss b/libs/vscode-ui/components/src/lib/field-tree/field-tree.component.scss
index 8b92433be4..999f89c5c2 100644
--- a/libs/vscode-ui/components/src/lib/field-tree/field-tree.component.scss
+++ b/libs/vscode-ui/components/src/lib/field-tree/field-tree.component.scss
@@ -36,4 +36,11 @@
     font-weight: 700;
     opacity: 1;
   }
+
+  &.valid {
+    color: $modified-text-color;
+  }
+  &.error {
+    color: $error-text-color;
+  }
 }
diff --git a/libs/vscode-ui/components/src/lib/field-tree/field-tree.component.ts b/libs/vscode-ui/components/src/lib/field-tree/field-tree.component.ts
index 77c7cacc95..bf8413ce3e 100644
--- a/libs/vscode-ui/components/src/lib/field-tree/field-tree.component.ts
+++ b/libs/vscode-ui/components/src/lib/field-tree/field-tree.component.ts
@@ -19,6 +19,8 @@ export class FieldTreeComponent implements OnChanges {
   @Input() fields: Array<Option>;
   @Input() activeFieldName: string;
   @Input() filteredFields: Set<string>;
+  @Input() validFields: {[name: string]: string[] | string | number | boolean};
+  @Input() invalidFields: {[name: string]: string[] | string | number | boolean};
 
   userSelectedField?: string;
 
@@ -73,4 +75,12 @@ export class FieldTreeComponent implements OnChanges {
       });
     }
   }
+
+  isFieldValid(fieldName: string): boolean {
+    return this.validFields && !!this.validFields[fieldName];
+  }
+
+  isFieldInvalid(fieldName: string): boolean {
+    return this.invalidFields && this.invalidFields[fieldName] !== undefined;
+  }
 }
diff --git a/libs/vscode-ui/components/src/lib/field/field.component.scss b/libs/vscode-ui/components/src/lib/field/field.component.scss
index a6165d6321..74e7d6af8b 100644
--- a/libs/vscode-ui/components/src/lib/field/field.component.scss
+++ b/libs/vscode-ui/components/src/lib/field/field.component.scss
@@ -3,7 +3,7 @@
 :host {
   display: block;
   position: relative;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
   white-space: normal;
 
   .field-title {
diff --git a/libs/vscode-ui/components/src/lib/vscode-ui-components.module.ts b/libs/vscode-ui/components/src/lib/vscode-ui-components.module.ts
index 9555f9b230..44423fecd9 100644
--- a/libs/vscode-ui/components/src/lib/vscode-ui-components.module.ts
+++ b/libs/vscode-ui/components/src/lib/vscode-ui-components.module.ts
@@ -8,7 +8,6 @@ import { CheckboxComponent } from './checkbox/checkbox.component';
 import { FieldComponent } from './field/field.component';
 import { FieldTreeComponent } from './field-tree/field-tree.component';
 import { MultipleSelectComponent } from './multiple-select/multiple-select.component';
-import { FormatTaskPipe } from './format-task/format-task.pipe';
 import { FieldItemsPipe } from './field-items/field-items.pipe';
 
 @NgModule({
@@ -21,7 +20,6 @@ import { FieldItemsPipe } from './field-items/field-items.pipe';
     FieldComponent,
     FieldTreeComponent,
     MultipleSelectComponent,
-    FormatTaskPipe,
     FieldItemsPipe,
   ],
   exports: [
@@ -32,7 +30,6 @@ import { FieldItemsPipe } from './field-items/field-items.pipe';
     FieldComponent,
     FieldTreeComponent,
     MultipleSelectComponent,
-    FormatTaskPipe,
   ],
 })
 export class VscodeUiComponentsModule {}
diff --git a/libs/vscode-ui/feature-task-execution-form/src/lib/format-task/format-task.pipe.spec.ts b/libs/vscode-ui/feature-task-execution-form/src/lib/format-task/format-task.pipe.spec.ts
new file mode 100644
index 0000000000..cb4ff5d380
--- /dev/null
+++ b/libs/vscode-ui/feature-task-execution-form/src/lib/format-task/format-task.pipe.spec.ts
@@ -0,0 +1,38 @@
+import { FormatTaskPipe } from './format-task.pipe';
+
+describe('FormatTaskPipe', () => {
+  const pipe = new FormatTaskPipe();
+
+  it('should reformat workspace generator commands', () => {
+    expect(
+      pipe.transform({
+        name: '',
+        cliName: 'ng',
+        description: '',
+        options: [],
+        command: 'generate',
+        positional: 'workspace-schematic:xyz-name',
+      })
+    ).toEqual('nx workspace-schematic xyz-name');
+    expect(
+      pipe.transform({
+        name: '',
+        cliName: 'ng',
+        description: '',
+        options: [],
+        command: 'generate',
+        positional: 'workspace-generator:xyz-name',
+      })
+    ).toEqual('nx workspace-generator xyz-name');
+    expect(
+      pipe.transform({
+        name: '',
+        cliName: 'ng',
+        description: '',
+        options: [],
+        command: 'generate',
+        positional: '@nrwl/angular:library',
+      })
+    ).toEqual('ng generate @nrwl/angular:library');
+  });
+});
diff --git a/libs/vscode-ui/feature-task-execution-form/src/lib/format-task/format-task.pipe.ts b/libs/vscode-ui/feature-task-execution-form/src/lib/format-task/format-task.pipe.ts
new file mode 100644
index 0000000000..2f994aa128
--- /dev/null
+++ b/libs/vscode-ui/feature-task-execution-form/src/lib/format-task/format-task.pipe.ts
@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { TaskExecutionSchema } from '@nx-console/schema';
+import { formatTask } from './format-task';
+
+@Pipe({
+  name: 'formatTask',
+})
+export class FormatTaskPipe implements PipeTransform {
+  transform(architect: TaskExecutionSchema): string {
+    return formatTask(architect);
+  }
+}
diff --git a/libs/vscode-ui/feature-task-execution-form/src/lib/format-task/format-task.ts b/libs/vscode-ui/feature-task-execution-form/src/lib/format-task/format-task.ts
new file mode 100644
index 0000000000..2fa6ed5e52
--- /dev/null
+++ b/libs/vscode-ui/feature-task-execution-form/src/lib/format-task/format-task.ts
@@ -0,0 +1,19 @@
+import {
+  TaskExecutionSchema,
+  WORKSPACE_GENERATOR_NAME_REGEX,
+} from '@nx-console/schema';
+
+export const formatTask = (architect: TaskExecutionSchema): string => {
+  const positionals = architect.positional.match(
+    WORKSPACE_GENERATOR_NAME_REGEX
+  );
+  if (architect.command === 'generate' && positionals && positionals.length) {
+    architect = {
+      ...architect,
+      cliName: 'nx',
+      command: `workspace-${positionals[1]}`,
+      positional: positionals[2],
+    };
+  }
+  return `${architect.cliName} ${architect.command} ${architect.positional}`;
+};
diff --git a/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.html b/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.html
index aa012a05dc..7d963c4cb8 100644
--- a/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.html
+++ b/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.html
@@ -7,8 +7,8 @@
   >
     <div class="form-header-container" #formHeaderContainer>
       <div class="form-header">
-        <div class="fx-align-start-center fx-row fx-flex">
-          <div class="filter-container fx-flex fx-align-start-center fx-row">
+        <div class="fx-align-start-center fx-row">
+          <div class="filter-container fx-align-start-center fx-flex">
             <input
               type="text"
               placeholder="Search flags"
@@ -51,10 +51,12 @@
           [activeFieldName]="activeFieldName$ | async"
           [fields]="taskExecForm.architect.options"
           [filteredFields]="filteredFields"
+          [validFields]="validFields$ | async"
+          [invalidFields]="invalidFields$ | async"
         ></vscode-ui-field-tree>
-        <form class="fields fx-flex" [formGroup]="taskExecForm.form">
-          <div class="title-container fx-row">
-            <span class="fx-flex title">
+        <form class="fields" [formGroup]="taskExecForm.form">
+          <div class="title-container">
+            <span class="title">
               {{ taskExecForm.architect | formatTask }}
               <ng-container
                 *ngIf="
@@ -68,42 +70,61 @@
                 }}
               </ng-container>
             </span>
-          </div>
-
-          <ng-container *ngIf="defaultValues$ | async as defaultValues">
-            <nx-console-field
-              [id]="field.name + '-nx-console-field'"
-              *ngFor="let field of taskExecForm.architect.options"
-              [class.changed-from-default]="
-                defaultValues[field.name] !==
-                taskExecForm.form.value[field.name]
-              "
-              [field]="field"
-              [formControlName]="field.name"
-              [style.display]="
-                filteredFields.has(field.name) ? 'block' : 'none'
+            <button
+              (click)="
+                copyCommandToClipboard(
+                  taskExecForm.form,
+                  taskExecForm.architect
+                )
               "
-            ></nx-console-field>
-          </ng-container>
+              title="Copy to clipboard"
+            >
+              <i class="codicon codicon-clippy"></i>
+            </button>
+          </div>
+          <div class="fx-row-reverse">
+            <nx-console-argument-list
+              [args]="runCommandArguments$ | async"
+            ></nx-console-argument-list>
+            <div class ="fields-container">
+              <ng-container *ngIf="defaultValues$ | async as defaultValues">
+                <nx-console-field
+                  [id]="field.name + '-nx-console-field'"
+                  *ngFor="let field of taskExecForm.architect.options"
+                  [class.changed-from-default]="
+                    defaultValues[field.name] !==
+                    taskExecForm.form.value[field.name]
+                  "
+                  [field]="field"
+                  [formControlName]="field.name"
+                  [style.display]="
+                    filteredFields.has(field.name) ? 'block' : 'none'
+                  "
+                ></nx-console-field>
+              </ng-container>
 
-          <div
-            class="filter-flags-message"
-            *ngIf="filteredFields.size === 0"
-            #noMatch
-          >
-            <div *ngIf="taskExecForm.architect.options.length; else noFlags">
-              No flags found -
-              <span
-                class="clear-search"
-                (click)="filterFieldsControl.setValue('')"
+              <div
+                class="filter-flags-message"
+                *ngIf="filteredFields.size === 0"
+                #noMatch
               >
-                Clear search
-              </span>
-            </div>
+                <div
+                  *ngIf="taskExecForm.architect.options.length; else noFlags"
+                >
+                  No flags found -
+                  <span
+                    class="clear-search"
+                    (click)="filterFieldsControl.setValue('')"
+                  >
+                    Clear search
+                  </span>
+                </div>
 
-            <ng-template #noFlags>
-              This command has no flags to set
-            </ng-template>
+                <ng-template #noFlags>
+                  This command has no flags to set
+                </ng-template>
+              </div>
+            </div>
           </div>
         </form>
       </div>
diff --git a/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.scss b/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.scss
index 256e37f402..0442dc81b0 100644
--- a/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.scss
+++ b/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.scss
@@ -28,7 +28,6 @@ $offset-with-configurations: $offset-without-configurations +
   border: $input-border-width solid var(--vscode-settings-textInputBorder);
   color: #fff;
   text-align: center;
-  line-height: 30px;
   cursor: pointer;
   transition: background ease-in-out 0.1s;
   margin-left: 1rem;
@@ -66,7 +65,7 @@ vscode-ui-field-tree {
 }
 
 form {
-  margin-left: 206px;
+  margin-left: 190px;
   padding-right: $host-padding-right - $scrollbar-width;
 }
 
@@ -82,6 +81,15 @@ form {
   margin: auto;
 }
 
+nx-console-argument-list {
+  flex: 1 1 140px;
+  padding-left: $host-padding-left;
+}
+
+.fields-container {
+  flex: 1 1 $input-width;
+}
+
 .filter-container {
   border-width: 1px;
   border-style: solid;
@@ -146,6 +154,19 @@ nx-console-field {
     line-height: 21px;
   }
 
+  button {
+    background-color: $button-secondary-color;
+    color: $secondary-text-color;
+    padding: 2px 2px 1px 2px;
+    border: none;
+    margin-left: 0.5em;
+
+    &:hover,
+    &:focus {
+      background-color: $button-secondary-hover-color;
+    }
+  }
+
   margin-bottom: 1rem;
 }
 
@@ -157,6 +178,9 @@ nx-console-field {
   vscode-ui-field-tree {
     display: none;
   }
+  nx-console-argument-list {
+    display: none;
+  }
 }
 
 .configurations-container {
diff --git a/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.spec.ts b/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.spec.ts
index c111d58d3d..08d230e747 100644
--- a/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.spec.ts
+++ b/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.spec.ts
@@ -5,6 +5,8 @@ import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TaskExecutionSchema } from '@nx-console/schema';
 import { TASK_EXECUTION_SCHEMA } from './task-execution-form.schema';
 import { VscodeUiComponentsModule } from '@nx-console/vscode-ui/components';
+import { ArgumentListModule } from '@nx-console/vscode-ui/argument-list';
+import { FormatTaskPipe } from './format-task/format-task.pipe';
 import { TaskExecutionFormComponent } from './task-execution-form.component';
 
 const initialSchema: TaskExecutionSchema = {
@@ -52,8 +54,12 @@ describe('TaskExecutionFormComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        declarations: [TaskExecutionFormComponent],
-        imports: [ReactiveFormsModule, VscodeUiComponentsModule],
+        declarations: [TaskExecutionFormComponent, FormatTaskPipe],
+        imports: [
+          ReactiveFormsModule,
+          VscodeUiComponentsModule,
+          ArgumentListModule,
+        ],
         providers: [
           { provide: TASK_EXECUTION_SCHEMA, useValue: initialSchema },
         ],
@@ -74,7 +80,9 @@ describe('TaskExecutionFormComponent', () => {
 
   describe('validators', () => {
     it('should set validator for valid options', () => {
-      const formControl = formGroup.get('option-items-with-enum') as FormControl;
+      const formControl = formGroup.get(
+        'option-items-with-enum'
+      ) as FormControl;
       expect(formControl?.validator).toBeDefined();
       formControl.setValue('not a valid option');
       expect(formControl.invalid).toBeTruthy();
@@ -92,7 +100,9 @@ describe('TaskExecutionFormComponent', () => {
     });
 
     it('should set validator for long form options', () => {
-      const formControl = formGroup.get('a-long-form-multiselect-option') as FormControl;
+      const formControl = formGroup.get(
+        'a-long-form-multiselect-option'
+      ) as FormControl;
       expect(formControl?.validator).toBeDefined();
       formControl.setValue(['not valid']);
       expect(formControl.invalid).toBeTruthy();
diff --git a/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.ts b/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.ts
index ae74809cd0..cad3fd45d1 100644
--- a/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.ts
+++ b/libs/vscode-ui/feature-task-execution-form/src/lib/task-execution-form.component.ts
@@ -9,6 +9,7 @@ import {
   OnInit,
   ViewChild,
 } from '@angular/core';
+import { Clipboard } from '@angular/cdk/clipboard';
 import {
   FormBuilder,
   FormControl,
@@ -19,6 +20,7 @@ import {
 import {
   BehaviorSubject,
   combineLatest,
+  merge,
   Observable,
   ReplaySubject,
   Subscription,
@@ -32,8 +34,11 @@ import {
   tap,
   flatMap,
   mapTo,
+  mergeMap,
   filter,
+  withLatestFrom,
 } from 'rxjs/operators';
+import { formatTask } from './format-task/format-task';
 
 import { TASK_EXECUTION_SCHEMA } from './task-execution-form.schema';
 import {
@@ -160,13 +165,28 @@ export class TaskExecutionFormComponent implements OnInit, AfterViewChecked {
     shareReplay()
   );
 
+  runCommandArguments$ = this.taskExecForm$.pipe(
+    mergeMap((taskExecForm) =>
+      taskExecForm.form.valueChanges.pipe(
+        startWith(taskExecForm.form.value),
+        map(() => taskExecForm)
+      )
+    ),
+    map(({ architect, form }) => this.serializeArgs(form.value, architect))
+  );
+
+  validFields$ = this.getValidFields$(true);
+
+  invalidFields$ = this.getValidFields$(false);
+
   dryRunSubscription?: Subscription;
 
   constructor(
     private readonly fb: FormBuilder,
     @Inject(TASK_EXECUTION_SCHEMA) public initialSchema: TaskExecutionSchema,
     private readonly ngZone: NgZone,
-    private readonly changeDetectorRef: ChangeDetectorRef
+    private readonly changeDetectorRef: ChangeDetectorRef,
+    private readonly clipboard: Clipboard
   ) {}
 
   ngOnInit() {
@@ -356,7 +376,44 @@ export class TaskExecutionFormComponent implements OnInit, AfterViewChecked {
     });
   }
 
+  getValidFields$(
+    valid: boolean
+  ): Observable<{ [name: string]: string[] | string | number | boolean }> {
+    return this.taskExecForm$.pipe(
+      mergeMap((taskExecForm) =>
+        merge(
+          taskExecForm.form.valueChanges,
+          taskExecForm.form.statusChanges
+        ).pipe(
+          startWith(taskExecForm),
+          map(() => taskExecForm)
+        )
+      ),
+      withLatestFrom(this.defaultValues$),
+      map(([{ form, architect }, defaultValues]) => {
+        return architect.options
+          .filter((option) => {
+            const control = form.controls[option.name];
+            return (
+              (valid &&
+                control.valid &&
+                // touched is not working with checkbox, so ignore touched and just check !== defaultValue
+                // control.touched &&
+                control.value !== defaultValues[option.name]) ||
+              // invalid and touched (checkbox is always valid as true/false)
+              (!valid && control.touched && control.invalid)
+            );
+          })
+          .reduce((options, option) => ({
+            ...options,
+            [option.name]: form.controls[option.name].value,
+          }), {});
+      })
+    );
+  }
+
   private serializeArgs(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     value: { [p: string]: any },
     architect: TaskExecutionSchema,
     configurationName?: string
@@ -387,6 +444,17 @@ export class TaskExecutionFormComponent implements OnInit, AfterViewChecked {
     });
     return args;
   }
+
+  copyCommandToClipboard(form: FormGroup, architect: TaskExecutionSchema) {
+    const configuration = form.get('configuration')?.value;
+    this.clipboard.copy(
+      `${formatTask(architect)} ${this.serializeArgs(
+        form.value,
+        architect,
+        configuration
+      ).join(' ')}`
+    );
+  }
 }
 
 function sanitizeWhitespace(value: string) {
diff --git a/libs/vscode-ui/feature-task-execution-form/src/lib/vscode-ui-feature-task-execution-form.module.ts b/libs/vscode-ui/feature-task-execution-form/src/lib/vscode-ui-feature-task-execution-form.module.ts
index 80955a39e6..6c265a03d4 100644
--- a/libs/vscode-ui/feature-task-execution-form/src/lib/vscode-ui-feature-task-execution-form.module.ts
+++ b/libs/vscode-ui/feature-task-execution-form/src/lib/vscode-ui-feature-task-execution-form.module.ts
@@ -1,8 +1,11 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { ClipboardModule } from '@angular/cdk/clipboard';
 import { ReactiveFormsModule } from '@angular/forms';
 import { TaskExecutionFormComponent } from './task-execution-form.component';
+import { FormatTaskPipe } from './format-task/format-task.pipe';
 import { VscodeUiComponentsModule } from '@nx-console/vscode-ui/components';
+import { ArgumentListModule } from '@nx-console/vscode-ui/argument-list';
 
 import { TASK_EXECUTION_SCHEMA } from './task-execution-form.schema';
 import { TaskExecutionSchema } from '@nx-console/schema';
@@ -18,8 +21,14 @@ export function getSchema() {
 }
 
 @NgModule({
-  imports: [CommonModule, VscodeUiComponentsModule, ReactiveFormsModule],
-  declarations: [TaskExecutionFormComponent],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    ClipboardModule,
+    VscodeUiComponentsModule,
+    ArgumentListModule,
+  ],
+  declarations: [TaskExecutionFormComponent, FormatTaskPipe],
   exports: [TaskExecutionFormComponent],
   providers: [
     {
diff --git a/libs/vscode-ui/styles/src/lib/_flex.scss b/libs/vscode-ui/styles/src/lib/_flex.scss
index 7a3df9505b..8218e5f598 100644
--- a/libs/vscode-ui/styles/src/lib/_flex.scss
+++ b/libs/vscode-ui/styles/src/lib/_flex.scss
@@ -1,18 +1,27 @@
 .fx-row,
-.fx-row-wrap {
-  flex-direction: row;
+.fx-row-wrap,
+.fx-row-reverse,
+.fx-column {
   box-sizing: border-box;
   display: flex;
 }
 
+.fx-row,
+.fx-row-wrap {
+  flex-direction: row;
+}
+
 .fx-row-wrap {
   flex-flow: row wrap;
 }
 
+.fx-row-reverse {
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+}
+
 .fx-column {
   flex-direction: column;
-  box-sizing: border-box;
-  display: flex;
 }
 
 .fx-align-start-center {
diff --git a/libs/vscode-ui/styles/src/lib/_variables.scss b/libs/vscode-ui/styles/src/lib/_variables.scss
index 3971a1b76b..25e7c2c810 100644
--- a/libs/vscode-ui/styles/src/lib/_variables.scss
+++ b/libs/vscode-ui/styles/src/lib/_variables.scss
@@ -9,9 +9,16 @@ $button-primary-color: var(
   --vscode-statusBarItem-remoteBackground,
   #45bc98
 );
+$button-secondary-color: var(--vscode-button-secondaryBackground);
+$button-secondary-hover-color: var(--vscode-button-secondaryHoverBackground);
 $scroll-bar-width: 12px;
 
 $primary-text-color: var(--vscode-settings-headerForeground);
+$secondary-text-color: var(--vscode-button-secondaryForeground);
+$modified-text-color: var(
+  --vscode-gitDecoration-modifiedResourceForeground,
+  #e2c08d
+);
 $error-text-color: var(--vscode-errorForeground, #f00);
 
 $error-border-color: var(--vscode-inputValidation-errorBorder, #f00);
diff --git a/nx.json b/nx.json
index c86fa89f73..d7e02bee9b 100644
--- a/nx.json
+++ b/nx.json
@@ -30,6 +30,7 @@
     "server": { "tags": [] },
     "vscode-ui": { "tags": [] },
     "vscode-ui-feature-task-execution-form": { "tags": [] },
+    "vscode-ui-argument-list": { "tags": [] },
     "vscode-ui-components": { "tags": [] },
     "vscode-ui-styles": { "tags": [] },
     "vscode-ui-feature-task-execution-form-e2e": {
diff --git a/package.json b/package.json
index ac51a62048..14beae41f9 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "@angular-eslint/eslint-plugin": "~1.0.0",
     "@angular-eslint/eslint-plugin-template": "~1.0.0",
     "@angular-eslint/template-parser": "~1.0.0",
+    "@angular/cdk": "11.2.1",
     "@angular/cli": "11.2.1",
     "@angular/common": "11.2.1",
     "@angular/compiler": "11.2.1",
@@ -92,6 +93,7 @@
     "typescript": "4.0.7",
     "universal-analytics": "0.4.20",
     "vsce": "^1.69.0",
+    "vscode-codicons": "^0.0.16",
     "zlib": "^1.0.5",
     "zone.js": "0.10.3"
   }
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 559ffc930b..9cc8a07148 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -26,6 +26,9 @@
       "@nx-console/vscode-ui/feature-task-execution-form": [
         "libs/vscode-ui/feature-task-execution-form/src/index.ts"
       ],
+      "@nx-console/vscode-ui/argument-list": [
+        "libs/vscode-ui/argument-list/src/index.ts"
+      ],
       "@nx-console/vscode-ui/components": [
         "libs/vscode-ui/components/src/index.ts"
       ],
diff --git a/yarn.lock b/yarn.lock
index 15c381361c..1833719f4f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -170,6 +170,15 @@
   dependencies:
     eslint-scope "^5.1.0"
 
+"@angular/cdk@11.2.1":
+  version "11.2.1"
+  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-11.2.1.tgz#c06aa5b0ac76706240a4851ff704d70cbc6f3bf5"
+  integrity sha512-d+ERvvWqGykBm5ooWG8TmMjL6q6aOpUd13ha1sx960EfKJqNyideYUfPMp6xprTyxmUIUZ/G9AQ/pxnzrLGnsA==
+  dependencies:
+    tslib "^2.0.0"
+  optionalDependencies:
+    parse5 "^5.0.0"
+
 "@angular/cli@11.2.1":
   version "11.2.1"
   resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-11.2.1.tgz#5b7d1b3608c63b6a08b66275a830798d36613ff5"
@@ -12297,7 +12306,7 @@ parse5-sax-parser@^6.0.1:
   dependencies:
     parse5 "^6.0.1"
 
-parse5@5.1.1:
+parse5@5.1.1, parse5@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
   integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
@@ -16593,6 +16602,11 @@ vsce@^1.69.0:
     yauzl "^2.3.1"
     yazl "^2.2.2"
 
+vscode-codicons@^0.0.16:
+  version "0.0.16"
+  resolved "https://registry.yarnpkg.com/vscode-codicons/-/vscode-codicons-0.0.16.tgz#0bef18bfc0e9378ceb77213326495960cb53561f"
+  integrity sha512-OUijQNEJ78cmipWUR/LlUeTF9xAUW3/23YhgF3fNOKXKbajGTctUL8+sarVY1dZzv1ii7ilHXYkSJwh/d90XuA==
+
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"