diff --git a/client/src/components/SidePanel/Agents/Instructions.tsx b/client/src/components/SidePanel/Agents/Instructions.tsx
index e4b0ae58f6..347ad0a1d8 100644
--- a/client/src/components/SidePanel/Agents/Instructions.tsx
+++ b/client/src/components/SidePanel/Agents/Instructions.tsx
@@ -1,185 +1,42 @@
-import { useState, useId } from 'react';
-import * as Menu from '@ariakit/react/menu';
-import { PlusCircle, Maximize2 } from 'lucide-react';
-import { specialVariables } from 'librechat-data-provider';
 import { Controller, useFormContext } from 'react-hook-form';
-import {
-  Label,
-  Button,
-  OGDialog,
-  Textarea,
-  DropdownPopup,
-  OGDialogClose,
-  TooltipAnchor,
-  OGDialogTitle,
-  OGDialogHeader,
-  OGDialogContent,
-} from '@librechat/client';
-import type { TSpecialVarLabel } from 'librechat-data-provider';
 import type { AgentForm } from '~/common';
+import { VariableEditor } from '~/components/Variables';
 import { useLocalize } from '~/hooks';
 
-interface VariableOption {
-  label: TSpecialVarLabel;
-  value: string;
-}
-
-const variableOptions: VariableOption[] = Object.keys(specialVariables).map((key) => ({
-  label: `com_ui_special_var_${key}` as TSpecialVarLabel,
-  value: `{{${key}}}`,
-}));
-
 export default function Instructions() {
-  const menuId = useId();
-  const dialogMenuId = useId();
   const localize = useLocalize();
-  const methods = useFormContext<AgentForm>();
-  const { control, setValue, getValues } = methods;
-
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const [isDialogMenuOpen, setIsDialogMenuOpen] = useState(false);
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-
-  const handleAddVariable = (label: TSpecialVarLabel, value: string) => {
-    const currentInstructions = getValues('instructions') || '';
-    const spacer = currentInstructions.length > 0 ? '\n' : '';
-    const prefix = localize(label);
-    setValue('instructions', currentInstructions + spacer + prefix + ': ' + value);
-    setIsMenuOpen(false);
-    setIsDialogMenuOpen(false);
-  };
-
-  const variableItems = variableOptions.map((option) => ({
-    label: localize(option.label) || option.label,
-    onClick: () => handleAddVariable(option.label, option.value),
-  }));
+  const { control } = useFormContext<AgentForm>();
 
   return (
-    <div className="mb-3 flex flex-col">
-      <div className="mb-1 flex items-center justify-between">
-        <Label
-          className="block text-[11px] font-medium uppercase tracking-wide text-text-secondary"
-          htmlFor="instructions"
-        >
-          {localize('com_ui_instructions')}
-        </Label>
-        <div className="flex items-center gap-0.5">
-          <DropdownPopup
-            portal={true}
-            mountByState={true}
-            unmountOnHide={true}
-            preserveTabOrder={true}
-            isOpen={isMenuOpen}
-            setIsOpen={setIsMenuOpen}
-            trigger={
-              <Menu.MenuButton
-                id="variables-menu-button"
-                aria-label={localize('com_ui_variables')}
-                title={localize('com_ui_variables')}
-                className="inline-flex h-7 w-7 items-center justify-center rounded-lg text-text-secondary transition-colors hover:bg-surface-secondary hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-primary"
-              >
-                <PlusCircle className="h-4 w-4" strokeWidth={1.75} aria-hidden={true} />
-              </Menu.MenuButton>
-            }
-            items={variableItems}
-            menuId={menuId}
-            className="pointer-events-auto z-30"
-          />
-          <TooltipAnchor
-            description={localize('com_ui_expand_editor')}
-            render={
-              <Button
-                variant="ghost"
-                onClick={() => setIsDialogOpen(true)}
-                aria-label={localize('com_ui_expand_editor')}
-                className="h-7 w-7 p-0 text-text-secondary hover:bg-surface-secondary hover:text-text-primary"
-              >
-                <Maximize2 className="h-4 w-4" strokeWidth={1.75} aria-hidden={true} />
-              </Button>
-            }
+    <Controller
+      name="instructions"
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <div className="mb-3 flex flex-col">
+          <VariableEditor
+            id="instructions"
+            label={localize('com_ui_instructions')}
+            value={field.value ?? ''}
+            onChange={field.onChange}
+            onBlur={field.onBlur}
+            inputRef={field.ref}
+            placeholder={localize('com_agents_instructions_placeholder')}
+            className="min-h-[88px] resize-y"
+            labelClassName="block text-[11px] font-medium uppercase tracking-wide text-text-secondary"
+            rows={3}
+            required={true}
+            invalid={error != null}
           />
+          {error && (
+            <span
+              className="mt-1 text-xs text-text-destructive transition duration-300 ease-in-out"
+              role="alert"
+            >
+              {localize('com_ui_field_required')}
+            </span>
+          )}
         </div>
-      </div>
-      <Controller
-        name="instructions"
-        control={control}
-        render={({ field, fieldState: { error } }) => (
-          <>
-            <Textarea
-              {...field}
-              value={field.value ?? ''}
-              className="min-h-[88px] resize-y"
-              id="instructions"
-              placeholder={localize('com_agents_instructions_placeholder')}
-              rows={3}
-              aria-label={localize('com_ui_instructions')}
-              aria-required="true"
-              aria-invalid={error ? 'true' : 'false'}
-            />
-            {error && (
-              <span
-                className="mt-1 text-xs text-text-destructive transition duration-300 ease-in-out"
-                role="alert"
-              >
-                {localize('com_ui_field_required')}
-              </span>
-            )}
-          </>
-        )}
-      />
-
-      <OGDialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-        <OGDialogContent
-          className="flex h-[85vh] max-h-[85vh] w-11/12 max-w-6xl flex-col gap-4 p-6"
-          showCloseButton={false}
-        >
-          <OGDialogHeader className="mb-2 pr-14">
-            <OGDialogTitle className="text-left text-2xl font-semibold">
-              {localize('com_ui_instructions')}
-            </OGDialogTitle>
-          </OGDialogHeader>
-          <Controller
-            name="instructions"
-            control={control}
-            render={({ field }) => (
-              <Textarea
-                {...field}
-                value={field.value ?? ''}
-                className="min-h-0 flex-1 resize-none text-base leading-relaxed"
-                placeholder={localize('com_agents_instructions_placeholder')}
-                aria-label={localize('com_ui_instructions')}
-              />
-            )}
-          />
-          <div className="flex items-center justify-between">
-            <DropdownPopup
-              portal={true}
-              mountByState={true}
-              unmountOnHide={true}
-              preserveTabOrder={true}
-              isOpen={isDialogMenuOpen}
-              setIsOpen={setIsDialogMenuOpen}
-              trigger={
-                <Menu.MenuButton
-                  id="variables-menu-button-dialog"
-                  render={
-                    <Button variant="outline" className="gap-1.5">
-                      <PlusCircle className="h-4 w-4" strokeWidth={1.75} aria-hidden={true} />
-                      {localize('com_ui_variables')}
-                    </Button>
-                  }
-                />
-              }
-              items={variableItems}
-              menuId={dialogMenuId}
-              className="pointer-events-auto z-[200]"
-            />
-            <OGDialogClose asChild>
-              <Button>{localize('com_ui_done')}</Button>
-            </OGDialogClose>
-          </div>
-        </OGDialogContent>
-      </OGDialog>
-    </div>
+      )}
+    />
   );
 }
diff --git a/client/src/components/SidePanel/Schedules/ScheduleDialog.tsx b/client/src/components/SidePanel/Schedules/ScheduleDialog.tsx
index adcf0de2e6..d701568f49 100644
--- a/client/src/components/SidePanel/Schedules/ScheduleDialog.tsx
+++ b/client/src/components/SidePanel/Schedules/ScheduleDialog.tsx
@@ -6,10 +6,10 @@ import { PermissionBits, scheduleFrequencies } from 'librechat-data-provider';
 import {
   Input,
   Label,
+  Radio,
   Button,
   FieldMessage,
   Spinner,
-  Textarea,
   Dropdown,
   OGDialog,
   ControlCombobox,
@@ -30,6 +30,7 @@ import {
   useUpdateScheduleMutation,
 } from '~/data-provider';
 import { to12Hour, to24Hour, describeCadence, formatScheduleDay } from './cadence';
+import { VariableEditor } from '~/components/Variables';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 
@@ -60,6 +61,11 @@ const FREQUENCY_LABELS: Record<ScheduleFrequency, TranslationKeys> = {
 
 const BASE_MINUTES = [0, 15, 30, 45];
 
+const FORM_ID = 'schedule-form';
+
+/** Matches the Input primitive so every control in the form reads as one field set. */
+const FIELD_CLASS = 'h-10 w-full rounded-lg border border-border-light bg-transparent';
+
 const getDefaultValues = (schedule?: TSchedule): ScheduleFormValues => {
   if (!schedule) {
     return {
@@ -152,6 +158,15 @@ export default function ScheduleDialog({
     [agents],
   );
 
+  const frequencyOptions = useMemo(
+    () =>
+      scheduleFrequencies.map((value) => ({
+        value,
+        label: localize(FREQUENCY_LABELS[value]),
+      })),
+    [localize],
+  );
+
   const hourOptions = useMemo(
     () => Array.from({ length: 12 }, (_, index) => String(index + 1)),
     [],
@@ -322,193 +337,235 @@ export default function ScheduleDialog({
       <OGDialogTemplate
         title={localize(schedule ? 'com_ui_schedule_edit' : 'com_ui_schedule_new')}
         showCloseButton={false}
-        className="w-11/12 md:max-w-lg"
+        // The agent and time popovers cannot portal out of a focus-trapping dialog
+        // (see below), so `overflow-visible` keeps them from being clipped. Only from
+        // `md` up: the two-column layout fits well inside 90vh there, while narrow
+        // viewports keep the template's scrolling so the footer stays reachable.
+        className="w-11/12 md:max-w-3xl md:overflow-visible"
         main={
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="schedule-name" className="text-sm font-medium text-text-primary">
-                {localize('com_ui_name')}
-              </Label>
-              <Input
-                id="schedule-name"
-                className="w-full"
-                aria-invalid={errors.name != null}
-                aria-describedby="schedule-name-message"
-                {...register('name', { required: localize('com_ui_field_required') })}
-              />
-              <FieldMessage id="schedule-name-message" message={errors.name?.message} />
+          <form id={FORM_ID} onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <div className="grid gap-4 md:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="schedule-name" className="text-sm font-medium text-text-primary">
+                  {localize('com_ui_name')}
+                </Label>
+                <Input
+                  id="schedule-name"
+                  className="w-full"
+                  placeholder={localize('com_ui_schedule_name_placeholder')}
+                  aria-invalid={errors.name != null}
+                  aria-describedby="schedule-name-message"
+                  {...register('name', { required: localize('com_ui_field_required') })}
+                />
+                <FieldMessage id="schedule-name-message" message={errors.name?.message} />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="schedule-agent" className="text-sm font-medium text-text-primary">
+                  {localize('com_ui_agent')}
+                </Label>
+                <Controller
+                  name="agent_id"
+                  control={control}
+                  rules={{ required: localize('com_ui_field_required') }}
+                  render={({ field }) => (
+                    <ControlCombobox
+                      selectedValue={field.value}
+                      displayValue={
+                        agentItems.find((item) => item.value === field.value)?.label ?? ''
+                      }
+                      selectPlaceholder={localize('com_ui_select_agent')}
+                      searchPlaceholder={localize('com_agents_search_name')}
+                      setValue={field.onChange}
+                      onBlur={field.onBlur}
+                      items={agentItems}
+                      ariaLabel={localize('com_ui_agent')}
+                      ariaInvalid={errors.agent_id != null}
+                      ariaDescribedBy="schedule-agent-message"
+                      selectId="schedule-agent"
+                      isCollapsed={false}
+                      showCarat={true}
+                      placement="bottom-start"
+                      // Radix traps focus inside the dialog, so a popover portaled to
+                      // the body cannot be clicked, tabbed into, or typed in — and the
+                      // trap fighting Ariakit for focus locks the page up.
+                      portal={false}
+                      matchTriggerWidth={true}
+                      containerClassName="w-full px-0"
+                      className={cn(
+                        FIELD_CLASS,
+                        'justify-start px-3 text-sm hover:bg-surface-hover',
+                      )}
+                    />
+                  )}
+                />
+                <FieldMessage id="schedule-agent-message" message={errors.agent_id?.message} />
+                <p className="text-xs text-text-secondary">
+                  {localize('com_ui_schedule_target_new_chat')}
+                </p>
+              </div>
             </div>
-            <div className="space-y-2">
-              <Label htmlFor="schedule-prompt" className="text-sm font-medium text-text-primary">
-                {localize('com_ui_prompt')}
-              </Label>
-              <Textarea
-                id="schedule-prompt"
-                rows={4}
-                className="min-h-[100px] w-full resize-none"
-                aria-invalid={errors.prompt != null}
-                aria-describedby="schedule-prompt-message"
-                {...register('prompt', { required: localize('com_ui_field_required') })}
-              />
-              <FieldMessage id="schedule-prompt-message" message={errors.prompt?.message} />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="schedule-agent" className="text-sm font-medium text-text-primary">
-                {localize('com_ui_agent')}
-              </Label>
-              <Controller
-                name="agent_id"
-                control={control}
-                rules={{ required: localize('com_ui_field_required') }}
-                render={({ field }) => (
-                  <ControlCombobox
-                    selectedValue={field.value}
-                    displayValue={
-                      agentItems.find((item) => item.value === field.value)?.label ?? ''
-                    }
-                    selectPlaceholder={localize('com_ui_select_agent')}
-                    searchPlaceholder={localize('com_agents_search_name')}
-                    setValue={field.onChange}
+
+            <Controller
+              name="prompt"
+              control={control}
+              rules={{ required: localize('com_ui_field_required') }}
+              render={({ field }) => (
+                <div className="space-y-2">
+                  <VariableEditor
+                    id="schedule-prompt"
+                    label={localize('com_ui_prompt')}
+                    value={field.value}
+                    onChange={field.onChange}
                     onBlur={field.onBlur}
-                    items={agentItems}
-                    ariaLabel={localize('com_ui_agent')}
-                    ariaInvalid={errors.agent_id != null}
-                    ariaDescribedBy="schedule-agent-message"
-                    selectId="schedule-agent"
-                    isCollapsed={false}
-                    showCarat={true}
-                    containerClassName="px-0"
-                    className="h-9 w-full rounded-md border border-border-light bg-transparent"
+                    inputRef={field.ref}
+                    placeholder={localize('com_ui_schedule_prompt_placeholder')}
+                    className="min-h-[120px] resize-none bg-transparent"
+                    labelClassName="text-sm font-medium text-text-primary"
+                    rows={4}
+                    required={true}
+                    invalid={errors.prompt != null}
+                    describedBy="schedule-prompt-message"
+                    portal={false}
                   />
-                )}
-              />
-              <FieldMessage id="schedule-agent-message" message={errors.agent_id?.message} />
-              <p className="text-xs text-text-secondary">
-                {localize('com_ui_schedule_target_new_chat')}
-              </p>
-            </div>
-            <div className="space-y-2">
-              <Label className="text-sm font-medium text-text-primary">
-                {localize('com_ui_schedule_frequency')}
-              </Label>
+                  <FieldMessage id="schedule-prompt-message" message={errors.prompt?.message} />
+                </div>
+              )}
+            />
+
+            <fieldset className="space-y-2">
+              <legend>
+                <Label
+                  id="schedule-frequency-label"
+                  className="text-sm font-medium text-text-primary"
+                >
+                  {localize('com_ui_schedule_frequency')}
+                </Label>
+              </legend>
               <Controller
                 name="frequency"
                 control={control}
                 render={({ field }) => (
-                  <div
-                    className="grid grid-cols-2 gap-1 sm:grid-cols-4"
-                    role="group"
-                    aria-label={localize('com_ui_schedule_frequency')}
-                  >
-                    {scheduleFrequencies.map((frequency) => (
-                      <Button
-                        key={frequency}
-                        type="button"
-                        size="sm"
-                        variant="outline"
-                        aria-pressed={field.value === frequency}
-                        className={cn(
-                          'flex-1',
-                          field.value === frequency
-                            ? 'bg-surface-hover hover:bg-surface-hover'
-                            : 'bg-transparent',
-                        )}
-                        onClick={() => field.onChange(frequency)}
-                      >
-                        {localize(FREQUENCY_LABELS[frequency])}
-                      </Button>
-                    ))}
-                  </div>
+                  <Radio
+                    options={frequencyOptions}
+                    value={field.value}
+                    onChange={(value) => field.onChange(value as ScheduleFrequency)}
+                    fullWidth
+                    aria-labelledby="schedule-frequency-label"
+                  />
                 )}
               />
-            </div>
-            {frequency === 'weekly' && (
-              <div className="space-y-2">
-                <Label className="text-sm font-medium text-text-primary">
-                  {localize('com_ui_schedule_day')}
-                </Label>
-                <Controller
-                  name="dayOfWeek"
-                  control={control}
-                  render={({ field }) => (
-                    <Dropdown
-                      value={String(field.value)}
-                      onChange={(value) => field.onChange(Number(value))}
-                      options={dayOptions}
-                      className="w-full"
-                      ariaLabel={localize('com_ui_schedule_day')}
-                      testId="schedule-day-select"
-                    />
-                  )}
-                />
-              </div>
-            )}
-            <div className="space-y-2">
-              <Label className="text-sm font-medium text-text-primary">
-                {localize('com_ui_schedule_time')}
-              </Label>
-              <div
-                className={cn(
-                  'grid gap-2',
-                  frequency === 'hourly' ? 'grid-cols-1' : 'grid-cols-2 sm:grid-cols-3',
-                )}
-              >
-                {frequency !== 'hourly' && (
+            </fieldset>
+
+            <div className="grid gap-4 md:grid-cols-2">
+              {frequency === 'weekly' && (
+                <fieldset className="space-y-2">
+                  <legend>
+                    <Label
+                      id="schedule-day-label"
+                      className="text-sm font-medium text-text-primary"
+                    >
+                      {localize('com_ui_schedule_day')}
+                    </Label>
+                  </legend>
                   <Controller
-                    name="hour12"
+                    name="dayOfWeek"
                     control={control}
                     render={({ field }) => (
                       <Dropdown
                         value={String(field.value)}
                         onChange={(value) => field.onChange(Number(value))}
-                        options={hourOptions}
-                        className="w-full"
-                        ariaLabel={localize('com_ui_schedule_hour')}
-                        testId="schedule-hour-select"
+                        options={dayOptions}
+                        className={FIELD_CLASS}
+                        portal={false}
+                        aria-labelledby="schedule-day-label"
+                        testId="schedule-day-select"
                       />
                     )}
                   />
-                )}
-                <Controller
-                  name="minute"
-                  control={control}
-                  render={({ field }) => (
-                    <Dropdown
-                      value={String(field.value)}
-                      onChange={(value) => field.onChange(Number(value))}
-                      options={minuteOptions}
-                      className="w-full"
-                      ariaLabel={localize('com_ui_schedule_minute')}
-                      testId="schedule-minute-select"
+                </fieldset>
+              )}
+              <fieldset className="space-y-2">
+                <legend>
+                  <Label id="schedule-time-label" className="text-sm font-medium text-text-primary">
+                    {localize(
+                      frequency === 'hourly'
+                        ? 'com_ui_schedule_minutes_past_hour'
+                        : 'com_ui_schedule_time',
+                    )}
+                  </Label>
+                </legend>
+                <div
+                  className={cn(
+                    'grid gap-2',
+                    frequency === 'hourly' ? 'max-w-[8rem] grid-cols-1' : 'grid-cols-3',
+                  )}
+                >
+                  {frequency !== 'hourly' && (
+                    <Controller
+                      name="hour12"
+                      control={control}
+                      render={({ field }) => (
+                        <Dropdown
+                          value={String(field.value)}
+                          onChange={(value) => field.onChange(Number(value))}
+                          options={hourOptions}
+                          className={FIELD_CLASS}
+                          portal={false}
+                          ariaLabel={localize('com_ui_schedule_hour')}
+                          testId="schedule-hour-select"
+                        />
+                      )}
                     />
                   )}
-                />
-                {frequency !== 'hourly' && (
                   <Controller
-                    name="meridiem"
+                    name="minute"
                     control={control}
                     render={({ field }) => (
                       <Dropdown
-                        value={field.value}
-                        onChange={field.onChange}
-                        options={meridiemOptions}
-                        className="w-full"
-                        ariaLabel={localize('com_ui_schedule_meridiem')}
-                        testId="schedule-meridiem-select"
+                        value={String(field.value)}
+                        onChange={(value) => field.onChange(Number(value))}
+                        options={minuteOptions}
+                        className={FIELD_CLASS}
+                        portal={false}
+                        ariaLabel={localize('com_ui_schedule_minute')}
+                        testId="schedule-minute-select"
                       />
                     )}
                   />
-                )}
-              </div>
+                  {frequency !== 'hourly' && (
+                    <Controller
+                      name="meridiem"
+                      control={control}
+                      render={({ field }) => (
+                        <Dropdown
+                          value={field.value}
+                          onChange={field.onChange}
+                          options={meridiemOptions}
+                          className={FIELD_CLASS}
+                          portal={false}
+                          ariaLabel={localize('com_ui_schedule_meridiem')}
+                          testId="schedule-meridiem-select"
+                        />
+                      )}
+                    />
+                  )}
+                </div>
+              </fieldset>
             </div>
-            <p className="break-words text-sm text-text-secondary">{summary}</p>
-          </div>
+
+            <p
+              className="break-words rounded-lg bg-surface-secondary px-3 py-2 text-sm text-text-secondary"
+              data-testid="schedule-summary"
+            >
+              {summary}
+            </p>
+          </form>
         }
         buttons={
           <Button
-            type="button"
+            type="submit"
+            form={FORM_ID}
             variant="submit"
-            onClick={handleSubmit(onSubmit)}
             disabled={isLoading}
             aria-label={localize(schedule ? 'com_ui_save' : 'com_ui_create')}
           >
diff --git a/client/src/components/SidePanel/Schedules/__tests__/ScheduleDialog.spec.tsx b/client/src/components/SidePanel/Schedules/__tests__/ScheduleDialog.spec.tsx
new file mode 100644
index 0000000000..1facc9e110
--- /dev/null
+++ b/client/src/components/SidePanel/Schedules/__tests__/ScheduleDialog.spec.tsx
@@ -0,0 +1,109 @@
+import { createElement } from 'react';
+import { ToastProvider } from '@librechat/client';
+import userEvent from '@testing-library/user-event';
+import { render, screen, within } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+import ScheduleDialog from '../ScheduleDialog';
+
+jest.mock('~/hooks', () => ({
+  useLocalize: () => (key: string) => key,
+}));
+
+/** `@librechat/client` primitives localize through their own `useLocalize`, so the
+ *  shared `t` has to resolve too — not just the `i18n` this dialog reads for locale. */
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key, i18n: { language: 'en-US' } }),
+}));
+
+const mockMutate = jest.fn();
+
+jest.mock('~/data-provider', () => ({
+  useListAgentsQuery: () => ({
+    data: [
+      { id: 'agent-1', name: 'Research Agent' },
+      { id: 'agent-2', name: 'Digest Agent' },
+    ],
+  }),
+  useCreateScheduleMutation: () => ({ mutate: mockMutate, isLoading: false }),
+  useUpdateScheduleMutation: () => ({ mutate: mockMutate, isLoading: false }),
+}));
+
+const renderDialog = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+  });
+  function Wrapper({ children }: { children: ReactNode }) {
+    return createElement(
+      QueryClientProvider,
+      { client: queryClient },
+      createElement(ToastProvider, null, children),
+    );
+  }
+  return render(<ScheduleDialog open={true} onOpenChange={jest.fn()} />, { wrapper: Wrapper });
+};
+
+describe('ScheduleDialog', () => {
+  afterEach(() => jest.clearAllMocks());
+
+  /**
+   * The agent list must render INSIDE the dialog. Portaled to the body it lands
+   * outside Radix's focus trap, where it cannot be clicked, tabbed into, or typed
+   * in — and the trap fighting Ariakit for focus locks the page up.
+   */
+  it('opens the agent list inside the dialog rather than portaling it away', async () => {
+    const user = userEvent.setup();
+    renderDialog();
+
+    const dialog = screen.getByRole('dialog');
+    await user.click(within(dialog).getByRole('combobox', { name: 'com_ui_agent' }));
+
+    expect(within(dialog).getByPlaceholderText('com_agents_search_name')).toBeInTheDocument();
+  });
+
+  it('exposes frequency as a radiogroup with the default selected', () => {
+    renderDialog();
+
+    const group = screen.getByRole('radiogroup', { name: 'com_ui_schedule_frequency' });
+    expect(within(group).getByRole('radio', { name: 'com_ui_schedule_daily' })).toBeChecked();
+    expect(within(group).getByRole('radio', { name: 'com_ui_schedule_weekly' })).not.toBeChecked();
+  });
+
+  it('switches the day picker on only for weekly schedules', async () => {
+    const user = userEvent.setup();
+    renderDialog();
+
+    expect(screen.queryByTestId('schedule-day-select')).not.toBeInTheDocument();
+    await user.click(screen.getByRole('radio', { name: 'com_ui_schedule_weekly' }));
+    expect(screen.getByTestId('schedule-day-select')).toBeInTheDocument();
+  });
+
+  /** The submit button sits in the dialog footer, outside the <form>, so it has to
+   *  reach it by id — that association is what lets Enter submit from a text field. */
+  it('wires the footer submit button to the form', () => {
+    renderDialog();
+
+    const form = document.getElementById('schedule-form');
+    expect(form).toBeInstanceOf(HTMLFormElement);
+    const submit = screen.getByRole('button', { name: 'com_ui_create' });
+    expect(submit).toHaveAttribute('type', 'submit');
+    expect(submit).toHaveAttribute('form', 'schedule-form');
+  });
+
+  it('describes both text fields with placeholders', () => {
+    renderDialog();
+
+    expect(screen.getByPlaceholderText('com_ui_schedule_name_placeholder')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('com_ui_schedule_prompt_placeholder')).toBeInTheDocument();
+  });
+
+  it('offers the special-variable menu on the prompt field', async () => {
+    const user = userEvent.setup();
+    renderDialog();
+
+    await user.click(screen.getByRole('button', { name: 'com_ui_variables' }));
+    expect(
+      await screen.findByRole('menuitem', { name: 'com_ui_special_var_current_date' }),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/client/src/components/Variables/Editor.tsx b/client/src/components/Variables/Editor.tsx
new file mode 100644
index 0000000000..27b5820bcb
--- /dev/null
+++ b/client/src/components/Variables/Editor.tsx
@@ -0,0 +1,203 @@
+import { useId, useState } from 'react';
+import * as Menu from '@ariakit/react/menu';
+import { PlusCircle, Maximize2 } from 'lucide-react';
+import { specialVariables } from 'librechat-data-provider';
+import {
+  Label,
+  Button,
+  OGDialog,
+  Textarea,
+  DropdownPopup,
+  OGDialogClose,
+  TooltipAnchor,
+  OGDialogTitle,
+  OGDialogHeader,
+  OGDialogContent,
+} from '@librechat/client';
+import type { TSpecialVarLabel } from 'librechat-data-provider';
+import { useLocalize } from '~/hooks';
+import { cn } from '~/utils';
+
+interface VariableOption {
+  label: TSpecialVarLabel;
+  value: string;
+}
+
+const variableOptions: VariableOption[] = Object.keys(specialVariables).map((key) => ({
+  label: `com_ui_special_var_${key}` as TSpecialVarLabel,
+  value: `{{${key}}}`,
+}));
+
+interface VariableEditorProps {
+  id: string;
+  /** Already-localized heading rendered above the field. */
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  onBlur?: () => void;
+  inputRef?: React.Ref<HTMLTextAreaElement>;
+  placeholder?: string;
+  rows?: number;
+  required?: boolean;
+  invalid?: boolean;
+  describedBy?: string;
+  className?: string;
+  labelClassName?: string;
+  containerClassName?: string;
+  /**
+   * Ariakit popovers portal to the body by default, which puts them outside a Radix
+   * dialog's focus trap. Pass `false` from inside a dialog, and give that dialog
+   * `overflow-visible` so the inline menu is not clipped.
+   */
+  portal?: boolean;
+}
+
+/**
+ * A textarea for model-facing text with a menu that appends special variables
+ * (`{{current_date}}` and friends) and an expand-to-fullscreen editor. Controlled so
+ * each caller binds it to its own form field — insertions go through `onChange`, which
+ * keeps them visible to react-hook-form's dirty tracking.
+ */
+export default function VariableEditor({
+  id,
+  label,
+  value,
+  onChange,
+  onBlur,
+  inputRef,
+  placeholder,
+  rows = 3,
+  required,
+  invalid,
+  describedBy,
+  className,
+  labelClassName,
+  containerClassName,
+  portal = true,
+}: VariableEditorProps) {
+  const menuId = useId();
+  const dialogMenuId = useId();
+  const localize = useLocalize();
+
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isDialogMenuOpen, setIsDialogMenuOpen] = useState(false);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  const handleAddVariable = (variableLabel: TSpecialVarLabel, variableValue: string) => {
+    const spacer = value.length > 0 ? '\n' : '';
+    onChange(value + spacer + localize(variableLabel) + ': ' + variableValue);
+    setIsMenuOpen(false);
+    setIsDialogMenuOpen(false);
+  };
+
+  const variableItems = variableOptions.map((option) => ({
+    label: localize(option.label) || option.label,
+    onClick: () => handleAddVariable(option.label, option.value),
+  }));
+
+  return (
+    <div className={cn('flex flex-col', containerClassName)}>
+      <div className="mb-1 flex items-center justify-between">
+        <Label className={labelClassName} htmlFor={id}>
+          {label}
+        </Label>
+        <div className="flex items-center gap-0.5">
+          <DropdownPopup
+            portal={portal}
+            mountByState={true}
+            unmountOnHide={true}
+            preserveTabOrder={true}
+            isOpen={isMenuOpen}
+            setIsOpen={setIsMenuOpen}
+            trigger={
+              <Menu.MenuButton
+                id={`${id}-variables-menu-button`}
+                aria-label={localize('com_ui_variables')}
+                title={localize('com_ui_variables')}
+                className="inline-flex h-7 w-7 items-center justify-center rounded-lg text-text-secondary transition-colors hover:bg-surface-secondary hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-primary"
+              >
+                <PlusCircle className="h-4 w-4" strokeWidth={1.75} aria-hidden={true} />
+              </Menu.MenuButton>
+            }
+            items={variableItems}
+            menuId={menuId}
+            className="pointer-events-auto z-30"
+          />
+          <TooltipAnchor
+            description={localize('com_ui_expand_editor')}
+            render={
+              <Button
+                type="button"
+                variant="ghost"
+                onClick={() => setIsDialogOpen(true)}
+                aria-label={localize('com_ui_expand_editor')}
+                className="h-7 w-7 p-0 text-text-secondary hover:bg-surface-secondary hover:text-text-primary"
+              >
+                <Maximize2 className="h-4 w-4" strokeWidth={1.75} aria-hidden={true} />
+              </Button>
+            }
+          />
+        </div>
+      </div>
+      <Textarea
+        id={id}
+        ref={inputRef}
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        onBlur={onBlur}
+        className={className}
+        placeholder={placeholder}
+        rows={rows}
+        aria-label={label}
+        aria-required={required}
+        aria-invalid={invalid}
+        aria-describedby={describedBy}
+      />
+
+      <OGDialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <OGDialogContent
+          className="flex h-[85vh] max-h-[85vh] w-11/12 max-w-6xl flex-col gap-4 p-6"
+          showCloseButton={false}
+        >
+          <OGDialogHeader className="mb-2 pr-14">
+            <OGDialogTitle className="text-left text-2xl font-semibold">{label}</OGDialogTitle>
+          </OGDialogHeader>
+          <Textarea
+            value={value}
+            onChange={(event) => onChange(event.target.value)}
+            className="min-h-0 flex-1 resize-none text-base leading-relaxed"
+            placeholder={placeholder}
+            aria-label={label}
+          />
+          <div className="flex items-center justify-between">
+            <DropdownPopup
+              portal={portal}
+              mountByState={true}
+              unmountOnHide={true}
+              preserveTabOrder={true}
+              isOpen={isDialogMenuOpen}
+              setIsOpen={setIsDialogMenuOpen}
+              trigger={
+                <Menu.MenuButton
+                  id={`${id}-variables-menu-button-dialog`}
+                  render={
+                    <Button type="button" variant="outline" className="gap-1.5">
+                      <PlusCircle className="h-4 w-4" strokeWidth={1.75} aria-hidden={true} />
+                      {localize('com_ui_variables')}
+                    </Button>
+                  }
+                />
+              }
+              items={variableItems}
+              menuId={dialogMenuId}
+              className="pointer-events-auto z-[200]"
+            />
+            <OGDialogClose asChild>
+              <Button type="button">{localize('com_ui_done')}</Button>
+            </OGDialogClose>
+          </div>
+        </OGDialogContent>
+      </OGDialog>
+    </div>
+  );
+}
diff --git a/client/src/components/Variables/index.ts b/client/src/components/Variables/index.ts
new file mode 100644
index 0000000000..59c4636d36
--- /dev/null
+++ b/client/src/components/Variables/index.ts
@@ -0,0 +1 @@
+export { default as VariableEditor } from './Editor';
diff --git a/client/src/hooks/Nav/useSideNavLinks.ts b/client/src/hooks/Nav/useSideNavLinks.ts
index 6426ab5156..20ccf3c321 100644
--- a/client/src/hooks/Nav/useSideNavLinks.ts
+++ b/client/src/hooks/Nav/useSideNavLinks.ts
@@ -146,26 +146,6 @@ export default function useSideNavLinks({
       });
     }
 
-    if (hasAccessToPrompts) {
-      links.push({
-        title: 'com_ui_prompts',
-        label: '',
-        icon: NotebookPen,
-        id: 'prompts',
-        Component: PromptsAccordion,
-      });
-    }
-
-    if (hasAccessToMemories && hasAccessToReadMemories) {
-      links.push({
-        title: 'com_ui_memories',
-        label: '',
-        icon: Brain,
-        id: 'memories',
-        Component: MemoryPanel,
-      });
-    }
-
     // Scheduled chats are EXPERIMENTAL and default-OFF: the server enables them only
     // when an admin opts in explicitly, so ABSENT config means disabled here too.
     // Mirrors getLimits exactly — absent/null/`false` are all off, `true` is on, and the
@@ -186,6 +166,26 @@ export default function useSideNavLinks({
       });
     }
 
+    if (hasAccessToPrompts) {
+      links.push({
+        title: 'com_ui_prompts',
+        label: '',
+        icon: NotebookPen,
+        id: 'prompts',
+        Component: PromptsAccordion,
+      });
+    }
+
+    if (hasAccessToMemories && hasAccessToReadMemories) {
+      links.push({
+        title: 'com_ui_memories',
+        label: '',
+        icon: Brain,
+        id: 'memories',
+        Component: MemoryPanel,
+      });
+    }
+
     if (hasAccessToBookmarks) {
       links.push({
         title: 'com_sidepanel_conversation_tags',
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index 6195aa55a6..e89c082e16 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -1869,11 +1869,14 @@
   "com_ui_schedule_last_run_failed": "Last run failed",
   "com_ui_schedule_meridiem": "AM or PM",
   "com_ui_schedule_minute": "Minute",
+  "com_ui_schedule_minutes_past_hour": "Minutes past the hour",
+  "com_ui_schedule_name_placeholder": "Morning news briefing",
   "com_ui_schedule_needs_approval": "Needs approval",
   "com_ui_schedule_new": "New schedule",
   "com_ui_schedule_next_run": "Next run {{time}}",
   "com_ui_schedule_options": "Schedule options",
   "com_ui_schedule_pm": "PM",
+  "com_ui_schedule_prompt_placeholder": "Summarize the top AI news from the last 24 hours and highlight anything worth acting on.",
   "com_ui_schedule_run_now": "Run now",
   "com_ui_schedule_run_now_started": "Run started",
   "com_ui_schedule_run_skipped": "Skipped",
diff --git a/e2e/specs/mock/schedules-execution.spec.ts b/e2e/specs/mock/schedules-execution.spec.ts
index e82de5d203..bfad84e4fb 100644
--- a/e2e/specs/mock/schedules-execution.spec.ts
+++ b/e2e/specs/mock/schedules-execution.spec.ts
@@ -225,7 +225,7 @@ test.describe('scheduled chat execution', () => {
     const editDialog = page.getByRole('dialog');
     const renamed = `${name} edited`;
     await editDialog.locator('#schedule-name').fill(renamed);
-    await editDialog.getByRole('group', { name: 'Frequency' }).getByText('Daily').click();
+    await editDialog.getByRole('radio', { name: 'Daily' }).click();
     await editDialog.getByRole('button', { name: 'Save' }).click();
 
     await page.reload();