diff --git a/src/components/ActivityList.svelte b/src/components/ActivityList.svelte
index 9e59dbac76..0438fcfbcf 100644
--- a/src/components/ActivityList.svelte
+++ b/src/components/ActivityList.svelte
@@ -1,10 +1,12 @@
 <svelte:options immutable={true} />
 
 <script lang="ts">
+  import { Button } from '@nasa-jpl/stellar-svelte';
   import CloseIcon from '@nasa-jpl/stellar/icons/close.svg?component';
   import UploadIcon from '@nasa-jpl/stellar/icons/upload.svg?component';
+  import { CirclePlus } from 'lucide-svelte';
   import { plan, planModelActivityTypes, subsystemTags } from '../stores/plan';
-  import type { ActivityType } from '../types/activity';
+  import type { ActivityDirectiveInsertInput, ActivityType } from '../types/activity';
   import type { User } from '../types/app';
   import type { TimelineItemType } from '../types/timeline';
   import effects from '../utilities/effects';
@@ -12,6 +14,7 @@
   import { featurePermissions } from '../utilities/permissions';
   import { tooltip } from '../utilities/tooltip';
   import TimelineItemList from './TimelineItemList.svelte';
+  import ActivityDirectiveBuilder from './activity/ActivityDirectiveBuilder.svelte';
   import Input from './form/Input.svelte';
 
   export let user: User | null;
@@ -22,6 +25,8 @@
   let isUploadVisible: boolean = false;
   let uploadFiles: FileList | undefined;
   let uploadFileInput: HTMLInputElement;
+  let directiveBuilder: ActivityDirectiveBuilder;
+  let activeDirectiveName: string = '';
 
   $: if (user !== null && $plan !== null) {
     hasUploadPermission = featurePermissions.activityDirective.canCreate(user, $plan);
@@ -49,8 +54,33 @@
       onHideUpload();
     }
   }
+
+  function onCreateActivityDirective(directive: ActivityDirectiveInsertInput) {
+    if ($plan !== null && $plan.model) {
+      effects.createActivityDirectivePredefined(directive, $plan, user);
+      directiveBuilder.toggle();
+    }
+  }
+
+  function onShowDirectiveBuilder() {
+    directiveBuilder.toggle();
+  }
 </script>
 
+<ActivityDirectiveBuilder
+  bind:this={directiveBuilder}
+  directiveName={activeDirectiveName}
+  directiveWidth={200}
+  on:visibilityChange={visibility => {
+    if (!visibility.detail.isShown) {
+      activeDirectiveName = '';
+    }
+  }}
+  on:createActivityDirective={directive => {
+    onCreateActivityDirective(directive.detail.directive);
+  }}
+  {user}
+/>
 <TimelineItemList
   items={$planModelActivityTypes}
   chartType="activity"
@@ -59,6 +89,7 @@
   {getFilterValueFromItem}
   filterOptions={$subsystemTags.map(s => ({ color: s.color || '', label: s.name, value: s.id }))}
   filterName="Subsystem"
+  {user}
 >
   <div slot="header" class="upload-container" hidden={!isUploadVisible}>
     <button class="close-upload" type="button" on:click={onHideUpload}>
@@ -105,6 +136,9 @@
     >
       <UploadIcon />
     </button>
+    <Button variant="ghost" size="icon-sm" aria-label="Add Activity" on:click={onShowDirectiveBuilder}>
+      <CirclePlus size={16} />
+    </Button>
   </svelte:fragment>
 </TimelineItemList>
 
diff --git a/src/components/ExternalEventTypeList.svelte b/src/components/ExternalEventTypeList.svelte
index 036d6701cf..21a070a605 100644
--- a/src/components/ExternalEventTypeList.svelte
+++ b/src/components/ExternalEventTypeList.svelte
@@ -18,4 +18,5 @@
   filterOptions={$externalEventTypes.map(t => ({ label: t.name, value: t.name }))}
   filterName="Event Type"
   {getFilterValueFromItem}
+  user={null}
 />
diff --git a/src/components/ResourceList.svelte b/src/components/ResourceList.svelte
index 81342c9781..5f4ce85aec 100644
--- a/src/components/ResourceList.svelte
+++ b/src/components/ResourceList.svelte
@@ -77,6 +77,7 @@
   {getFilterValueFromItem}
   {loading}
   let:prop={item}
+  user={null}
 >
   <div slot="header" class="upload-container" hidden={!isUploadVisible}>
     <button class="close-upload" type="button" on:click={onHideUpload}>
diff --git a/src/components/TimelineItemList.svelte b/src/components/TimelineItemList.svelte
index d1107e5b4d..e82f6fd017 100644
--- a/src/components/TimelineItemList.svelte
+++ b/src/components/TimelineItemList.svelte
@@ -4,8 +4,11 @@
   import { Button } from '@nasa-jpl/stellar-svelte';
   import ChevronDownIcon from '@nasa-jpl/stellar/icons/chevron_down.svg?component';
   import { capitalize } from 'lodash-es';
-  import { CirclePlus, GripVertical } from 'lucide-svelte';
+  import { CirclePlus, Filter, GripVertical } from 'lucide-svelte';
+  import { plan } from '../stores/plan';
   import { view, viewAddFilterToRow } from '../stores/views';
+  import type { ActivityDirectiveInsertInput } from '../types/activity';
+  import type { User } from '../types/app';
   import type {
     ChartType,
     Layer,
@@ -14,7 +17,9 @@
     TimelineItemListFilterOption,
     TimelineItemType,
   } from '../types/timeline';
+  import effects from '../utilities/effects';
   import { tooltip } from '../utilities/tooltip';
+  import ActivityDirectiveBuilder from './activity/ActivityDirectiveBuilder.svelte';
   import Input from './form/Input.svelte';
   import LayerPicker from './LayerPicker.svelte';
   import Loading from './Loading.svelte';
@@ -31,6 +36,7 @@
   export let filterName: string = 'Filter';
   export let getFilterValueFromItem: (item: TimelineItemType) => string | number;
   export let loading: boolean = false;
+  export let user: User | null;
 
   let activeItemIndex: number = -1;
   let menu: Menu;
@@ -41,6 +47,8 @@
   let layerPicker: LayerPicker;
   let layerPickerIndividual: LayerPicker;
   let timelines: Timeline[] = [];
+  let directiveBuilder: ActivityDirectiveBuilder;
+  let activeDirectiveName: string = '';
 
   $: filteredItems = filterItems(items, filterText ? textFilters.concat(filterText) : textFilters, selectedFilters);
   $: timelines = $view?.definition.plan.timelines || [];
@@ -138,8 +146,34 @@
     }
     return undefined;
   }
+
+  function onCreateActivityDirective(directive: ActivityDirectiveInsertInput) {
+    if ($plan !== null && $plan.model) {
+      effects.createActivityDirectivePredefined(directive, $plan, user);
+      directiveBuilder.toggle();
+    }
+  }
+
+  function onShowDirectiveBuilder(activityType: string) {
+    directiveBuilder.setCurrentActivityType(activityType);
+    directiveBuilder.toggle();
+  }
 </script>
 
+<ActivityDirectiveBuilder
+  bind:this={directiveBuilder}
+  directiveName={activeDirectiveName}
+  directiveWidth={200}
+  on:visibilityChange={visibility => {
+    if (!visibility.detail.isShown) {
+      activeDirectiveName = '';
+    }
+  }}
+  on:createActivityDirective={directive => {
+    onCreateActivityDirective(directive.detail.directive);
+  }}
+  {user}
+/>
 <div class="timeline-item-list">
   <div class="timeline-item-list-filters">
     <input
@@ -299,10 +333,20 @@
                 let:builders
               >
                 <Button {builders} variant="ghost" size="icon-sm" aria-label="Add{capitalize(typeName)}-{item.name}">
-                  <CirclePlus size={16} />
+                  <Filter size={16} />
                 </Button>
               </LayerPicker>
             </div>
+            <div use:tooltip={{ content: 'Add New Directive', placement: 'top' }} class="flex items-center">
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                aria-label="Add{capitalize(typeName)}-{item.name}"
+                on:click={() => onShowDirectiveBuilder(item.name)}
+              >
+                <CirclePlus size={16} />
+              </Button>
+            </div>
             <div class="drag">
               <GripVertical size={16} />
             </div>
diff --git a/src/components/activity/ActivityDirectiveBuilder.svelte b/src/components/activity/ActivityDirectiveBuilder.svelte
new file mode 100644
index 0000000000..73f87567f2
--- /dev/null
+++ b/src/components/activity/ActivityDirectiveBuilder.svelte
@@ -0,0 +1,438 @@
+<svelte:options immutable={true} />
+
+<script lang="ts">
+  import CloseIcon from '@nasa-jpl/stellar/icons/close.svg?component';
+  import SearchIcon from '@nasa-jpl/stellar/icons/search.svg?component';
+  import { createEventDispatcher } from 'svelte';
+  import { activityValidationErrors } from '../../stores/errors';
+  import { field } from '../../stores/form';
+  import { plan, planModelActivityTypes } from '../../stores/plan';
+  import { plugins } from '../../stores/plugins';
+  import type { ActivityDirectiveInsertInput, ActivityType } from '../../types/activity';
+  import type { User } from '../../types/app';
+  import type { FieldStore } from '../../types/form';
+  import type { FormParameter } from '../../types/parameter';
+  import { validateArguments } from '../../utilities/activities';
+  import { getTarget, lowercase } from '../../utilities/generic';
+  import { getFormParameters } from '../../utilities/parameters';
+  import { getDoyTime, getIntervalFromDoyRange } from '../../utilities/time';
+  import { required } from '../../utilities/validators';
+  import DatePickerField from '../form/DatePickerField.svelte';
+  import Input from '../form/Input.svelte';
+  import Menu from '../menus/Menu.svelte';
+  import MenuHeader from '../menus/MenuHeader.svelte';
+  import MenuItem from '../menus/MenuItem.svelte';
+  import Parameters from '../parameters/Parameters.svelte';
+  import Draggable from '../timeline/form/TimelineEditor/Draggable.svelte';
+
+  export let directiveWidth: number = 1000;
+  export let directiveHeight: number = 500;
+  export let directiveName: string = '';
+  export let currentActivityType: string = '';
+  export let user: User | null;
+
+  let planMinDate: Date | undefined;
+  let planMaxDate: Date | undefined;
+
+  let dirtyDirective: ActivityDirectiveInsertInput = {
+    anchor_id: null,
+    anchored_to_start: true,
+    arguments: {},
+    metadata: {},
+    name: '',
+    plan_id: $plan?.id ?? -1,
+    start_offset: '',
+    type: '',
+  };
+  let manualInputOpen: boolean = false;
+  let manualMenu: Menu;
+  let rootRef: HTMLDivElement;
+  let manualInputRef: HTMLInputElement;
+  let manualInputWidth: number = 200;
+  let shown: boolean = false;
+
+  let dirtyDirectiveErrorsMap: Record<string, string[]> = {};
+
+  let startTimeField: FieldStore<string>;
+  let startTime: string = $plan?.start_time_doy ?? '';
+
+  let currentActivityTypeFormParams: FormParameter[] = [];
+  let currentlySelectedActivityType: ActivityType | undefined;
+
+  const dispatch = createEventDispatcher<{
+    createActivityDirective: { directive: ActivityDirectiveInsertInput };
+    directiveChange: { directive: object };
+    rename: { name: string };
+    visibilityChange: { isShown: boolean };
+  }>();
+
+  export function setCurrentActivityType(newType: string) {
+    currentActivityType = newType;
+    selectActivityType(currentActivityType);
+  }
+
+  export function setCurrentActivityStart(newStartTime: string) {
+    startTime = newStartTime;
+  }
+
+  export function setActiveDirective(newDirective: ActivityDirectiveInsertInput) {
+    dirtyDirective = newDirective;
+  }
+
+  export function toggle() {
+    if (shown) {
+      hide();
+    } else {
+      show();
+    }
+    dispatch('visibilityChange', { isShown: shown });
+  }
+
+  export function show() {
+    shown = true;
+    dispatch('visibilityChange', { isShown: shown });
+  }
+
+  export function hide() {
+    shown = false;
+    dispatch('visibilityChange', { isShown: shown });
+  }
+
+  function selectActivityType(newType: string) {
+    dirtyDirective.arguments = {};
+    currentlySelectedActivityType = $planModelActivityTypes.find(activityType => activityType.name === newType);
+    dirtyDirective.type = newType;
+    getArgumentValidation();
+  }
+
+  function onTypeSelected(newType: string) {
+    selectActivityType(newType);
+    if (manualMenu !== undefined) {
+      manualMenu.hide();
+    }
+    manualInputRef.value = newType;
+  }
+
+  async function getArgumentValidation(): Promise<void> {
+    if ($plan && $plan.model_id && user) {
+      dirtyDirectiveErrorsMap = await validateArguments(
+        undefined,
+        dirtyDirective.type,
+        dirtyDirective.arguments,
+        $plan?.model_id,
+        user,
+      );
+    }
+  }
+
+  $: if (manualInputOpen) {
+    manualMenu?.show();
+  } else {
+    manualMenu?.hide();
+  }
+  $: filteredActivityTypes = $planModelActivityTypes.filter(type => {
+    if (!currentActivityType) {
+      return true;
+    }
+
+    return lowercase(type.name).indexOf(lowercase(currentActivityType)) > -1;
+  });
+  $: startTimeField = field<string>(startTime, [required, $plugins.time.primary.validate]);
+  $: startTimeField.validateAndSet(startTime);
+  $: if ($plan) {
+    const startTimeDate = $plugins.time.primary.parse($startTimeField.value);
+    if (startTimeDate) {
+      const startTimeDoy = getDoyTime(startTimeDate);
+      const startOffset = getIntervalFromDoyRange($plan.start_time_doy, startTimeDoy);
+      dirtyDirective.start_offset = startOffset;
+    }
+  }
+  $: if ($plan) {
+    planMinDate = $plugins.time.primary.parse($plan.start_time_doy) ?? undefined;
+    planMaxDate = $plugins.time.primary.parse($plan.end_time_doy) ?? undefined;
+  }
+  $: if (currentlySelectedActivityType && currentlySelectedActivityType.parameters) {
+    currentActivityTypeFormParams = getFormParameters(
+      currentlySelectedActivityType.parameters,
+      {},
+      currentlySelectedActivityType.required_parameters,
+    );
+  }
+
+  $: if (dirtyDirectiveErrorsMap || $activityValidationErrors.length) {
+    currentActivityTypeFormParams = currentActivityTypeFormParams.map((formParameter: FormParameter) => {
+      let errors = dirtyDirectiveErrorsMap[formParameter.name];
+      if (formParameter.required && formParameter.value === null) {
+        if (!errors) {
+          errors = [];
+        }
+        errors.push('Parameter not explicitly set');
+      }
+      return { ...formParameter, errors: errors || null };
+    });
+  }
+
+  function onDirectiveNameChange(event: Event) {
+    const { value } = getTarget(event);
+    dirtyDirective.name = value as string;
+    dispatch('rename', { name: value as string });
+  }
+
+  function getDefaultPosition() {
+    if (!rootRef) {
+      return { x: 0, y: 0 };
+    }
+    const { x, y, width, height } = rootRef.getBoundingClientRect();
+    let defaultX = 0;
+    let defaultY = 0;
+    const padding = 16;
+
+    if (x - directiveWidth > padding / 2) {
+      defaultX = x - directiveWidth - padding / 2;
+    } else if (x + width + directiveWidth < document.body.clientWidth - padding / 2) {
+      defaultX = x + width + padding / 2;
+    } else {
+      defaultX = Math.max(0, document.body.clientWidth / 2 - directiveWidth / 2);
+    }
+
+    if (y - directiveHeight / 2 > padding && y + directiveHeight < document.body.clientHeight - padding) {
+      defaultY = y - directiveHeight / 2;
+    } else if (y + directiveHeight < document.body.clientHeight - padding) {
+      // Show below
+      defaultY = y;
+    } else if (y + height - directiveHeight > padding) {
+      // Show above
+      defaultY = y + height - directiveHeight;
+    } else {
+      defaultY = Math.max(0, document.body.clientHeight / 2 - directiveHeight / 2);
+    }
+
+    return {
+      x: defaultX,
+      y: defaultY,
+    };
+  }
+</script>
+
+<div bind:this={rootRef} class="w-full" style:display="grid">
+  <slot name="trigger" />
+  {#if shown}
+    <Draggable
+      className="st-menu activity-directive-builder"
+      initialWidth={directiveWidth}
+      initialHeight={directiveHeight}
+      dragOptions={{ defaultPosition: getDefaultPosition() }}
+    >
+      <div slot="handle">
+        <MenuHeader title="Activity Directive Builder">
+          <button on:click|stopPropagation={hide} class="st-button icon" aria-label="close">
+            <CloseIcon />
+          </button>
+        </MenuHeader>
+      </div>
+      <div class="body">
+        <div class="filters w-full">
+          <div class="directive-section" aria-label="directive-name">
+            <div class="directive-section-header st-typography-medium">
+              <div class="directive-section-title">Directive Name</div>
+            </div>
+            <div class="directive-section-content directive-section-content-bordered">
+              <div bind:clientWidth={manualInputWidth}>
+                <Input>
+                  <input
+                    name="manual-types-filter-input"
+                    value={directiveName}
+                    class="st-input w-full"
+                    aria-label="directive-name"
+                    placeholder="Enter a name for this directives..."
+                    on:input={onDirectiveNameChange}
+                  />
+                </Input>
+              </div>
+            </div>
+          </div>
+          <div class="directive-section" aria-label="manual-types">
+            <div class="directive-section-header st-typography-medium">
+              <div class="directive-section-title">Activity Type</div>
+            </div>
+            <div class="directive-section-content directive-section-content-bordered">
+              <div bind:clientWidth={manualInputWidth}>
+                <Input>
+                  <div class="search-icon" slot="left"><SearchIcon /></div>
+                  <input
+                    autocomplete="off"
+                    bind:this={manualInputRef}
+                    name="manual-types-filter-input"
+                    class="st-input manual-types-filter-input w-full"
+                    placeholder="Select type"
+                    bind:value={currentActivityType}
+                    on:click={() => {
+                      requestAnimationFrame(() => {
+                        if (!manualInputOpen) {
+                          manualInputOpen = true;
+                        }
+                      });
+                    }}
+                  />
+                </Input>
+              </div>
+              <div style:position="relative" style:width="0px">
+                <Menu
+                  width={manualInputWidth}
+                  hideAfterClick={true}
+                  placement="right-start"
+                  bind:this={manualMenu}
+                  on:hide={() => (manualInputOpen = false)}
+                >
+                  <div class="manual-types-menu">
+                    {#if filteredActivityTypes.length > 0}
+                      {#each filteredActivityTypes as type}
+                        <MenuItem on:click={() => onTypeSelected(type.name)}>
+                          <div class="st-typography-body">{type.name}</div>
+                        </MenuItem>
+                      {/each}
+                    {:else}
+                      <MenuItem disabled>No activities matching your filter</MenuItem>
+                    {/if}
+                  </div>
+                </Menu>
+              </div>
+            </div>
+          </div>
+          <div class="directive-section" aria-label="start-time">
+            <div class="directive-section-header st-typography-medium">
+              <div class="directive-section-title">
+                Start Time
+                <div class="hint st-typography-body">
+                  ({$plugins.time.primary.label})
+                </div>
+              </div>
+            </div>
+            <div class="directive-section-content directive-section-content-bordered">
+              <DatePickerField
+                minDate={planMinDate}
+                maxDate={planMaxDate}
+                useFallback={!$plugins.time.enableDatePicker}
+                field={startTimeField}
+              />
+            </div>
+          </div>
+          <div class="directive-section" aria-label="other-filters">
+            <div class="directive-section-header st-typography-medium">
+              <div class="directive-section-title">Arguments</div>
+            </div>
+            <div class="directive-section-content directive-section-content-bordered">
+              <div class="activity-preset">
+                <Parameters
+                  disabled={false}
+                  formParameters={currentActivityTypeFormParams}
+                  on:change={event => {
+                    const { name, value } = event.detail;
+                    dirtyDirective.arguments[name] = value;
+                    getArgumentValidation();
+                  }}
+                />
+                {#if !currentActivityTypeFormParams || currentActivityTypeFormParams.length === 0}
+                  <div class="st-typography-label">No Parameters Found</div>
+                {/if}
+              </div>
+            </div>
+            <!-- </CssGrid> -->
+          </div>
+          <slot name="footer" />
+          <button
+            class="st-button primary"
+            on:click={() => {
+              dispatch('createActivityDirective', { directive: dirtyDirective });
+            }}>Create Activity Directive</button
+          >
+        </div>
+      </div>
+    </Draggable>
+  {/if}
+</div>
+
+<style>
+  :global(.activity-directive-builder) {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    max-height: 90vh;
+    max-width: 95vw;
+    min-height: 400px;
+    min-width: 600px;
+    width: 100%;
+  }
+
+  :global(.activity-directive-builder .header) {
+    cursor: inherit;
+  }
+
+  .body {
+    /* background: var(--st-gray-15); */
+    background: #f7f7f8; /* TODO: color not in design system */
+    display: flex;
+    flex: 1;
+    height: inherit;
+    overflow: hidden;
+  }
+
+  .directive-section {
+    background: white;
+    border: 1px solid var(--st-gray-20);
+    border-radius: 4px;
+  }
+
+  .directive-section-header {
+    align-items: center;
+    display: flex;
+    height: 40px;
+    justify-content: space-between;
+    padding: 16px 8px;
+  }
+
+  .directive-section-title {
+    display: flex;
+    gap: 8px;
+    user-select: none;
+  }
+
+  .directive-section-title .hint {
+    opacity: 0.5;
+  }
+
+  .directive-section-content {
+    padding: 0px 8px 8px;
+  }
+
+  .directive-section-content-bordered {
+    border-top: 1px solid var(--st-gray-20);
+    padding: 8px;
+  }
+
+  .filters {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: auto;
+    padding: 8px;
+  }
+
+  .manual-types-menu {
+    --aerie-menu-item-padding: 8px;
+    cursor: pointer;
+    max-height: 320px;
+    overflow: auto;
+    width: 100%;
+  }
+
+  .search-icon {
+    align-items: center;
+    color: var(--st-gray-50);
+    display: flex;
+  }
+
+  :global(.activity-directive-grid) {
+    width: 100%;
+  }
+</style>
diff --git a/src/components/activity/ActivityDirectiveForm.svelte b/src/components/activity/ActivityDirectiveForm.svelte
index 6ee1c38d3a..392fdef980 100644
--- a/src/components/activity/ActivityDirectiveForm.svelte
+++ b/src/components/activity/ActivityDirectiveForm.svelte
@@ -31,7 +31,7 @@
   import type { FieldStore } from '../../types/form';
   import type { Argument, ArgumentsMap, FormParameter, ParameterName } from '../../types/parameter';
   import type { ActivityDirectiveTagsInsertInput, Tag, TagsChangeEvent } from '../../types/tags';
-  import { getActivityMetadata } from '../../utilities/activities';
+  import { getActivityMetadata, validateArguments } from '../../utilities/activities';
   import effects from '../../utilities/effects';
   import { isInstantiationError } from '../../utilities/errors';
   import { classNames, keyByBoolean } from '../../utilities/generic';
@@ -119,7 +119,7 @@
       $activityArgumentDefaultsMap[activityType?.name || ''] ?? {},
     );
   }
-  $: validateArguments(revision ? revision.arguments : activityDirective.arguments);
+  $: getArgumentValidation(revision ? revision.arguments : activityDirective.arguments);
   $: numOfUserChanges = formParameters.reduce((previousHasChanges: number, formParameter) => {
     return /user/.test(formParameter.valueSource) ? previousHasChanges + 1 : previousHasChanges;
   }, 0);
@@ -402,6 +402,7 @@
       }
       const activityDirectiveTags: ActivityDirectiveTagsInsertInput[] = tagsToAdd.map(({ id: tag_id }) => ({
         directive_id: activityDirective.id,
+
         plan_id: activityDirective.plan_id,
         tag_id,
       }));
@@ -418,30 +419,15 @@
     }
   }
 
-  async function validateArguments(newArguments: ArgumentsMap | null): Promise<void> {
-    if (newArguments) {
-      const { type } = activityDirective;
-      const { errors, success } = await effects.validateActivityArguments(
-        type,
+  async function getArgumentValidation(newArguments: ArgumentsMap | null): Promise<void> {
+    if (newArguments && user) {
+      parameterErrorMap = await validateArguments(
         activityDirective.id,
-        modelId,
+        activityDirective.type,
         newArguments,
+        modelId,
         user,
       );
-
-      if (!success && errors) {
-        parameterErrorMap = errors.reduce((map: Record<string, string[]>, error) => {
-          error.subjects?.forEach(subject => {
-            if (!map[subject]) {
-              map[subject] = [];
-            }
-            map[subject].push(error.message);
-          });
-          return map;
-        }, {});
-      } else {
-        parameterErrorMap = {};
-      }
     }
   }
 
diff --git a/src/components/timeline/Row.svelte b/src/components/timeline/Row.svelte
index 4c8ab3eac7..d394601878 100644
--- a/src/components/timeline/Row.svelte
+++ b/src/components/timeline/Row.svelte
@@ -141,6 +141,7 @@
   export let user: User | null;
 
   const dispatch = createEventDispatcher<{
+    buildDirective: { startTime: string; type: string };
     discreteTreeExpansionChange: DiscreteTreeExpansionMap;
     mouseDown: MouseDown;
     mouseOver: MouseOver;
@@ -760,7 +761,7 @@
 
           const createActivities = () => {
             items.forEach(item => {
-              effects.createActivityDirective({}, start_time, item.name, item.name, {}, plan, user);
+              dispatch('buildDirective', { startTime: start_time, type: item.name });
             });
           };
 
diff --git a/src/components/timeline/Timeline.svelte b/src/components/timeline/Timeline.svelte
index 73f75aaf3b..2e2f8d7a93 100644
--- a/src/components/timeline/Timeline.svelte
+++ b/src/components/timeline/Timeline.svelte
@@ -10,7 +10,7 @@
   import { planDerivationGroupLinks } from '../../stores/external-source';
   import { plugins } from '../../stores/plugins';
   import { viewAddTimelineRow, viewUpdateTimeline } from '../../stores/views';
-  import type { ActivityDirectiveId, ActivityDirectivesMap } from '../../types/activity';
+  import type { ActivityDirectiveId, ActivityDirectiveInsertInput, ActivityDirectivesMap } from '../../types/activity';
   import type { User } from '../../types/app';
   import type { ConstraintResultWithName } from '../../types/constraint';
   import type { ExternalEvent, ExternalEventId } from '../../types/external-event';
@@ -33,9 +33,11 @@
     Timeline,
     XAxisTick,
   } from '../../types/timeline';
+  import effects from '../../utilities/effects';
   import { clamp } from '../../utilities/generic';
   import { formatDate } from '../../utilities/time';
   import { MAX_CANVAS_SIZE, TimelineInteractionMode, TimelineLockStatus, getXScale } from '../../utilities/timeline';
+  import ActivityDirectiveBuilder from '../activity/ActivityDirectiveBuilder.svelte';
   import TimelineRow from './Row.svelte';
   import RowHeaderDragHandleWidth from './RowHeaderDragHandleWidth.svelte';
   import TimelineContextMenu from './TimelineContextMenu.svelte';
@@ -115,6 +117,8 @@
   let xAxisDrawHeight: number = 64;
   let xTicksView: XAxisTick[] = [];
   let derivationGroups: string[] = [];
+  let directiveBuilder: ActivityDirectiveBuilder;
+  let activeDirectiveName = '';
 
   let throttledZoom = throttle(onZoom, 16, {
     leading: true,
@@ -382,10 +386,38 @@
       tooltip.hide();
     }
   }
+
+  function onBuildActivityDirective(startTime: string, activityType: string) {
+    directiveBuilder.setCurrentActivityType(activityType);
+    directiveBuilder.setCurrentActivityStart(startTime);
+    directiveBuilder.show();
+  }
+
+  function onCreateActivityDirective(directive: ActivityDirectiveInsertInput) {
+    if (plan !== null && plan.model) {
+      effects.createActivityDirectivePredefined(directive, plan, user);
+      directiveBuilder.toggle();
+    }
+  }
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
 
+<ActivityDirectiveBuilder
+  bind:this={directiveBuilder}
+  directiveName={activeDirectiveName}
+  directiveWidth={200}
+  on:visibilityChange={visibility => {
+    if (!visibility.detail.isShown) {
+      activeDirectiveName = '';
+    }
+  }}
+  on:createActivityDirective={directive => {
+    onCreateActivityDirective(directive.detail.directive);
+  }}
+  {user}
+/>
+
 <div bind:this={timelineDiv} bind:clientWidth class="timeline" id={`timeline-${timeline?.id}`}>
   <div bind:this={timelineHistogramDiv} class="timeline-time-row">
     {#if plan}
@@ -513,6 +545,7 @@
             yAxes={row.yAxes}
             {timelineZoomTransform}
             on:contextMenu={e => onContextMenu(e, row)}
+            on:buildDirective={e => onBuildActivityDirective(e.detail.startTime, e.detail.type)}
             on:dblClick
             on:deleteActivityDirective
             on:mouseDown={onMouseDown}
diff --git a/src/utilities/activities.ts b/src/utilities/activities.ts
index 9a3f3fa7be..6d79d6c18b 100644
--- a/src/utilities/activities.ts
+++ b/src/utilities/activities.ts
@@ -6,6 +6,8 @@ import type {
   ActivityDirectivesMap,
 } from '../types/activity';
 import type { ActivityMetadata, ActivityMetadataKey, ActivityMetadataValue } from '../types/activity-metadata';
+import type { User } from '../types/app';
+import type { ArgumentsMap } from '../types/parameter';
 import type {
   Plan,
   PlanMergeActivityDirectiveDB,
@@ -17,6 +19,7 @@ import type {
 import type { Span, SpanId, SpanUtilityMaps, SpansMap } from '../types/simulation';
 import type { ActivityTransformDirection } from '../types/time';
 import { getClipboardContent, setClipboardContent } from './clipboard';
+import effects from './effects';
 import { compare, isEmpty } from './generic';
 import { pluralize } from './text';
 import {
@@ -564,3 +567,35 @@ export function packActivityDirectivesInPlan(
 
   return result;
 }
+
+export async function validateArguments(
+  activityId: number | undefined,
+  activityType: string,
+  activityArguments: ArgumentsMap,
+  modelId: number,
+  user: User,
+): Promise<Record<string, string[]>> {
+  let errorsMap: Record<string, string[]> = {};
+  const { errors, success } = await effects.validateActivityArguments(
+    activityType,
+    activityId,
+    modelId,
+    activityArguments,
+    user,
+  );
+
+  if (!success && errors) {
+    errorsMap = errors.reduce((map: Record<string, string[]>, error) => {
+      error.subjects?.forEach(subject => {
+        if (!map[subject]) {
+          map[subject] = [];
+        }
+        map[subject].push(error.message);
+      });
+      return map;
+    }, {});
+  } else {
+    errorsMap = {};
+  }
+  return errorsMap;
+}
diff --git a/src/utilities/effects.ts b/src/utilities/effects.ts
index 879bb63059..efc7e4b383 100644
--- a/src/utilities/effects.ts
+++ b/src/utilities/effects.ts
@@ -1095,6 +1095,52 @@ const effects = {
     }
   },
 
+  async createActivityDirectivePredefined(
+    activityDirective: ActivityDirectiveInsertInput,
+    plan: Plan | null,
+    user: User | null,
+  ): Promise<void> {
+    try {
+      if ((plan && !queryPermissions.CREATE_ACTIVITY_DIRECTIVE(user, plan)) || !plan) {
+        throwPermissionError('add a directive to the plan');
+      }
+
+      if (plan !== null) {
+        const data = await reqHasura<ActivityDirectiveDB>(
+          gql.CREATE_ACTIVITY_DIRECTIVE,
+          {
+            activityDirectiveInsertInput: activityDirective,
+          },
+          user,
+        );
+        const { insert_activity_directive_one: newActivityDirective } = data;
+        if (newActivityDirective != null) {
+          const { id } = newActivityDirective;
+          activityDirectivesDBStore.updateValue(directives => {
+            return (directives || []).map(directive => {
+              if (directive.id === id) {
+                return newActivityDirective;
+              }
+              return directive;
+            });
+          });
+          selectedActivityDirectiveIdStore.set(id);
+          selectedSpanIdStore.set(null);
+
+          showSuccessToast('Activity Directive Created Successfully');
+          logMessage(`Created activity directive "${name}" (ID=${id}).`);
+        } else {
+          throw Error(`Unable to create activity directive "${activityDirective.name}" on plan with ID ${plan.id}`);
+        }
+      } else {
+        throw Error('Plan is not defined.');
+      }
+    } catch (e) {
+      catchError('Activity Directive Create Failed', e as Error);
+      showFailureToast('Activity Directive Create Failed');
+    }
+  },
+
   async createActivityDirectiveTags(
     tags: ActivityDirectiveTagsInsertInput[],
     user: User | null,
@@ -8758,7 +8804,7 @@ const effects = {
 
   async validateActivityArguments(
     activityTypeName: string,
-    activityId: number,
+    activityId: number | undefined,
     modelId: number,
     argumentsMap: ArgumentsMap,
     user: User | null,
@@ -8776,7 +8822,11 @@ const effects = {
 
       const { validateActivityArguments } = data;
       if (validateActivityArguments != null) {
-        logMessage(`Validated activity arguments for "${activityTypeName}" (ID=${activityId}).`);
+        if (activityId) {
+          logMessage(`Validated activity arguments for "${activityTypeName}" (ID=${activityId}).`);
+        } else {
+          logMessage(`Validated activity arguments for pending directive of "${activityTypeName}"`);
+        }
         return validateActivityArguments;
       } else {
         throw Error('Unable to validate activity arguments');