diff --git a/apps/web/src/components/settings/DeploymentTimeZoneSetting.tsx b/apps/web/src/components/settings/DeploymentTimeZoneSetting.tsx
index e152c9441..6f39e6445 100644
--- a/apps/web/src/components/settings/DeploymentTimeZoneSetting.tsx
+++ b/apps/web/src/components/settings/DeploymentTimeZoneSetting.tsx
@@ -21,6 +21,7 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
+  Skeleton,
 } from '@/components/system';
 
 const FALLBACK_TIME_ZONES = [
@@ -83,6 +84,10 @@ export function DeploymentTimeZoneSetting() {
 
   const effectiveTimeZone = settings.data?.effectiveTimeZone ?? 'UTC';
 
+  if (settings.isPending) {
+    return <Skeleton className="h-5 w-64" />;
+  }
+
   if (!isEditing) {
     return (
       <p className="text-sm text-muted-foreground">
diff --git a/apps/web/src/components/settings/automations/AutomationsSettings.render.client.test.tsx b/apps/web/src/components/settings/automations/AutomationsSettings.render.client.test.tsx
index 18219b032..eede21ef9 100644
--- a/apps/web/src/components/settings/automations/AutomationsSettings.render.client.test.tsx
+++ b/apps/web/src/components/settings/automations/AutomationsSettings.render.client.test.tsx
@@ -10,6 +10,7 @@ const managerInstructionsPlaceholder =
   /Optional guidance for which ideas to prioritize or avoid/;
 
 const state = vi.hoisted(() => ({
+  customAutomationsPending: false,
   customAutomations: [] as Array<{
     id: string;
     name: string;
@@ -284,7 +285,10 @@ vi.mock('@tanstack/react-query', () => ({
     }
 
     if (key1 === 'listCustomAutomations') {
-      return { isPending: false, data: state.customAutomations };
+      return {
+        isPending: state.customAutomationsPending,
+        data: state.customAutomations,
+      };
     }
 
     if (queryOptions.queryKey?.[0] === 'taskModels') {
@@ -522,6 +526,8 @@ describe('AutomationsSettings', () => {
     state.settingsQuery.data.reviewer.relayReviewResultsToTask = false;
     state.settingsQuery.data.reviewer.relayUsers = [];
     state.customAutomations = [];
+    state.customAutomationsPending = false;
+    state.settingsQuery.isPending = false;
     state.environments = [];
     for (const key of Object.keys(
       state.settingsQuery.data.resolvedDestinations,
@@ -776,6 +782,50 @@ describe('AutomationsSettings', () => {
     expect(screen.queryByText('Meta automations')).toBeNull();
   });
 
+  it('filters available automations by category and provider-aware search', async () => {
+    render(<AutomationsSettings />);
+
+    const categoryFilter = await screen.findByRole('combobox', {
+      name: 'Filter available automations by category',
+    });
+    expect(categoryFilter).toHaveTextContent('All');
+
+    fireEvent.change(
+      screen.getByRole('textbox', { name: 'Search available automations' }),
+      { target: { value: 'Discord' } },
+    );
+
+    expect(screen.getByText('Auto-respond to channels')).toBeInTheDocument();
+    expect(screen.queryByText('Review Code')).not.toBeInTheDocument();
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Clear automation filters' }),
+    );
+    expect(screen.getByText('Review Code')).toBeInTheDocument();
+
+    fireEvent.click(categoryFilter);
+    fireEvent.click(await screen.findByRole('option', { name: 'Operations' }));
+    expect(screen.getByText('Triage Sentry Issues')).toBeInTheDocument();
+    expect(screen.queryByText('Review Code')).not.toBeInTheDocument();
+  });
+
+  it('shows independent structural skeletons for custom and built-in automations', () => {
+    state.customAutomationsPending = true;
+    state.settingsQuery.isPending = true;
+
+    render(<AutomationsSettings />);
+
+    expect(
+      screen
+        .getByTestId('custom-automations-skeleton')
+        .querySelectorAll('[data-slot="skeleton"]'),
+    ).toHaveLength(6);
+    expect(
+      screen
+        .getByTestId('built-in-automations-skeleton')
+        .querySelectorAll('[data-slot="skeleton"]'),
+    ).toHaveLength(17);
+  });
+
   it('uses plain text empty states for built-in and custom automations', async () => {
     state.settingsQuery.data.settings.channelAutoStartSlackChannels = [];
     state.settingsQuery.data.settings.managerSlackChannelId = null as never;
@@ -857,6 +907,17 @@ describe('AutomationsSettings', () => {
     expect(
       await screen.findByRole('dialog', { name: 'Edit custom automation' }),
     ).toBeInTheDocument();
+    expect(screen.getByText('Schedule')).toBeInTheDocument();
+    expect(screen.getByText('Destination')).toBeInTheDocument();
+    expect(screen.getByText('Channel')).toBeInTheDocument();
+    expect(screen.queryByText('Cadence')).not.toBeInTheDocument();
+    expect(screen.queryByText('Frequency')).not.toBeInTheDocument();
+    expect(screen.queryByText('Destination provider')).not.toBeInTheDocument();
+    expect(
+      screen.queryByText(
+        'Configure what runs, when it runs, and where the result is sent.',
+      ),
+    ).not.toBeInTheDocument();
   });
 
   it('reflects the reviewer all-author setting in the review scope copy', async () => {
diff --git a/apps/web/src/components/settings/automations/AutomationsSettings.tsx b/apps/web/src/components/settings/automations/AutomationsSettings.tsx
index da31d3ca0..e054eff12 100644
--- a/apps/web/src/components/settings/automations/AutomationsSettings.tsx
+++ b/apps/web/src/components/settings/automations/AutomationsSettings.tsx
@@ -95,6 +95,7 @@ import {
   Play,
   Plus,
   RefreshCcw,
+  Search,
   Select,
   SelectContent,
   SelectItem,
@@ -111,6 +112,7 @@ import {
   Textarea,
   TriangleAlert,
   Users,
+  X,
 } from '@/components/system';
 
 type FieldErrors = Partial<
@@ -228,12 +230,26 @@ type AutomationDefinition = {
   label: string;
   description: string;
   icon: ComponentType<{ className?: string }>;
+  category: AutomationCategory;
+  searchTerms?: string[];
   /** Compact label for the chat surfaces the automation can report to. */
   commsBadge?: string;
   /** Compact label for the source-control providers the automation supports. */
   scmBadge?: string;
 };
 
+type AutomationCategory = 'source-code' | 'communication' | 'operations';
+
+const AUTOMATION_CATEGORY_OPTIONS: Array<{
+  value: AutomationCategory | 'all';
+  label: string;
+}> = [
+  { value: 'all', label: 'All' },
+  { value: 'source-code', label: 'Source code' },
+  { value: 'communication', label: 'Communication' },
+  { value: 'operations', label: 'Operations' },
+];
+
 /**
  * Where an automation's next run will report, as resolved server-side through
  * the destination waterfall (own target -> Manager Channel -> primary
@@ -335,12 +351,12 @@ const TRIGGERABLE_AUTOMATION_SCHEDULE_LABELS = {
  */
 function getAutomationCapabilityBadges(
   automationKey: BackgroundAutomationKey,
-): Pick<AutomationDefinition, 'commsBadge' | 'scmBadge'> {
+): Pick<AutomationDefinition, 'commsBadge' | 'scmBadge' | 'searchTerms'> {
   const descriptor =
     getTriggerableBackgroundAutomationDescriptorByKey(automationKey);
 
   if (!descriptor) {
-    return {};
+    return { searchTerms: [] };
   }
 
   const comms: readonly CommunicationProvider[] =
@@ -364,6 +380,10 @@ function getAutomationCapabilityBadges(
     : undefined;
 
   return {
+    searchTerms: [
+      ...comms.map(getCommunicationProviderDisplayName),
+      ...scm.map(getSourceControlProviderLabel),
+    ],
     ...(commsBadge ? { commsBadge } : {}),
     ...(scmBadge ? { scmBadge } : {}),
   };
@@ -386,6 +406,7 @@ function getAutomationDefinition(
     label: descriptor.label,
     description: TRIGGERABLE_AUTOMATION_DESCRIPTIONS[automationKey],
     icon,
+    category: automationKey === 'sentry_triage' ? 'operations' : 'source-code',
     ...getAutomationCapabilityBadges(automationKey),
   };
 }
@@ -450,6 +471,7 @@ const SCHEDULE_ONLY_AUTOMATION_DEFINITIONS = Object.fromEntries(
       description:
         SCHEDULE_ONLY_AUTOMATION_UI_DEFINITIONS[automation.id].description,
       icon: SCHEDULE_ONLY_AUTOMATION_UI_DEFINITIONS[automation.id].icon,
+      category: 'source-code',
       ...getAutomationCapabilityBadges(automation.automationKey),
     },
   ]),
@@ -475,6 +497,8 @@ const AUTOMATION_DEFINITIONS: Record<AutomationId, AutomationDefinition> = {
     description:
       'Start tasks from selected Slack or Discord channels, each with its own custom instructions.',
     icon: MessagesSquare,
+    category: 'communication',
+    searchTerms: ['Slack', 'Discord'],
   },
   managerChannel: {
     id: 'managerChannel',
@@ -482,6 +506,8 @@ const AUTOMATION_DEFINITIONS: Record<AutomationId, AutomationDefinition> = {
     description:
       'Shared Slack or Discord channel for manager-facing Roomote asks, summaries, and alerts.',
     icon: Users,
+    category: 'communication',
+    searchTerms: ['Slack', 'Discord'],
   },
   managerStats: {
     ...getAutomationDefinition(
@@ -489,6 +515,7 @@ const AUTOMATION_DEFINITIONS: Record<AutomationId, AutomationDefinition> = {
       'manager_stats',
       ChartColumnIncreasing,
     ),
+    category: 'communication',
   },
   sentryTriage: {
     ...getAutomationDefinition('sentryTriage', 'sentry_triage', SentryIcon),
@@ -509,6 +536,8 @@ const AUTOMATION_DEFINITIONS: Record<AutomationId, AutomationDefinition> = {
     label: 'Review Code',
     description: `Review PRs automatically and on-demand.`,
     icon: GitPullRequest,
+    category: 'source-code',
+    searchTerms: sourceControlProviders.map(getSourceControlProviderLabel),
   },
   conflictResolver: {
     ...getAutomationDefinition(
@@ -519,9 +548,11 @@ const AUTOMATION_DEFINITIONS: Record<AutomationId, AutomationDefinition> = {
   },
   suggester: {
     ...getAutomationDefinition('suggester', 'suggester', Lightbulb),
+    category: 'communication',
   },
   announcer: {
     ...getAutomationDefinition('announcer', 'announcer', Megaphone),
+    category: 'communication',
   },
   platformIssueAlerts: {
     id: 'platformIssueAlerts',
@@ -529,6 +560,8 @@ const AUTOMATION_DEFINITIONS: Record<AutomationId, AutomationDefinition> = {
     description:
       'Alert on Slack or Discord when a task runs into admin-fixable issues.',
     icon: BellElectric,
+    category: 'operations',
+    searchTerms: ['Slack', 'Discord'],
   },
 };
 
@@ -1176,8 +1209,12 @@ function shouldShowChannelAutoStartWarning(params: {
 
 function LoadingSkeleton() {
   return (
-    <div className="space-y-4">
-      {Array.from({ length: 6 }).map((_, index) => (
+    <div
+      className="grid gap-4 md:grid-cols-2"
+      data-testid="built-in-automations-skeleton"
+    >
+      <Skeleton className="col-span-full h-5 w-20" />
+      {Array.from({ length: 4 }).map((_, index) => (
         <Card key={index} className="gap-0 overflow-hidden py-4">
           <CardHeader className="p-0">
             <div className="flex items-start gap-3">
@@ -1434,6 +1471,7 @@ function AutomationCard({
   isOpen,
   onOpenChange,
   iconEnabled,
+  isAvailableMatch = true,
   runAction,
   debugSection,
   footer,
@@ -1445,6 +1483,7 @@ function AutomationCard({
   isOpen: boolean;
   onOpenChange: (open: boolean) => void;
   iconEnabled: boolean;
+  isAvailableMatch?: boolean;
   runAction?: React.ReactNode;
   debugSection?: React.ReactNode;
   footer?: React.ReactNode;
@@ -1458,6 +1497,10 @@ function AutomationCard({
     ? `Configure ${automation.label}`
     : `Set up ${automation.label}`;
 
+  if (!iconEnabled && !isAvailableMatch) {
+    return null;
+  }
+
   return (
     <div
       id={automation.id}
@@ -1535,6 +1578,7 @@ function ScheduledAutomationCard<TFrequency extends string>({
   isOpen,
   onOpenChange,
   iconEnabled,
+  isAvailableMatch,
   disabled = false,
   debugSection,
   runTooltip,
@@ -1556,6 +1600,7 @@ function ScheduledAutomationCard<TFrequency extends string>({
   isOpen: boolean;
   onOpenChange: (open: boolean) => void;
   iconEnabled: boolean;
+  isAvailableMatch: boolean;
   disabled?: boolean;
   debugSection?: React.ReactNode;
   runTooltip: string;
@@ -1579,6 +1624,7 @@ function ScheduledAutomationCard<TFrequency extends string>({
       isOpen={isOpen}
       onOpenChange={onOpenChange}
       iconEnabled={iconEnabled}
+      isAvailableMatch={isAvailableMatch}
       disabled={disabled}
       debugSection={debugSection}
       runAction={
@@ -1655,6 +1701,10 @@ export function AutomationsSettings() {
   const [isEditingManagerChannel, setIsEditingManagerChannel] = useState(false);
   const [isEnteringCustomManagerChannel, setIsEnteringCustomManagerChannel] =
     useState(false);
+  const [availableCategory, setAvailableCategory] = useState<
+    AutomationCategory | 'all'
+  >('all');
+  const [availableSearch, setAvailableSearch] = useState('');
   const formStateRef = useRef<FormState | null>(null);
   const savedStateRef = useRef<FormState | null>(null);
   const didApplyInitialHashRef = useRef(false);
@@ -2539,6 +2589,28 @@ export function AutomationsSettings() {
     announcer: announcerIsEnabled,
     platformIssueAlerts: isPlatformIssueAlertsEnabled(formState),
   } satisfies Record<AutomationId, boolean>;
+  const normalizedAvailableSearch = availableSearch.trim().toLowerCase();
+  const availableAutomationMatches = new Set(
+    Object.values(AUTOMATION_DEFINITIONS)
+      .filter(
+        (automation) =>
+          !iconEnabled[automation.id] &&
+          (availableCategory === 'all' ||
+            automation.category === availableCategory) &&
+          (!normalizedAvailableSearch ||
+            [
+              automation.label,
+              automation.description,
+              ...(automation.searchTerms ?? []),
+            ]
+              .join(' ')
+              .toLowerCase()
+              .includes(normalizedAvailableSearch)),
+      )
+      .map((automation) => automation.id),
+  );
+  const hasAvailableFilters =
+    availableCategory !== 'all' || Boolean(normalizedAvailableSearch);
 
   const isAutomationSaving = (automationId: AutomationId) =>
     updateMutation.isPending && savingAutomation === automationId;
@@ -2652,6 +2724,8 @@ export function AutomationsSettings() {
         </Alert>
       ) : null}
 
+      <CustomAutomationsSection />
+
       {settingsQuery.isPending || !formState ? (
         <LoadingSkeleton />
       ) : (
@@ -2665,11 +2739,71 @@ export function AutomationsSettings() {
                 No built-in automations enabled yet.
               </p>
             )}
-            <h2 className="order-[-10] col-span-full text-sm font-semibold text-foreground">
-              Available
-            </h2>
+            <div className="order-[-10] col-span-full flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+              <h2 className="text-sm font-semibold text-foreground">
+                Available
+              </h2>
+              <div className="flex flex-wrap items-center gap-2">
+                <Select
+                  value={availableCategory}
+                  onValueChange={(value) =>
+                    setAvailableCategory(value as AutomationCategory | 'all')
+                  }
+                >
+                  <SelectTrigger
+                    size="sm"
+                    aria-label="Filter available automations by category"
+                    className="w-36"
+                  >
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {AUTOMATION_CATEGORY_OPTIONS.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <div className="relative">
+                  <Search className="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
+                  <Input
+                    value={availableSearch}
+                    onChange={(event) =>
+                      setAvailableSearch(event.currentTarget.value)
+                    }
+                    placeholder="Search"
+                    aria-label="Search available automations"
+                    className="h-8 w-36 pl-8 text-sm"
+                  />
+                </div>
+                {hasAvailableFilters ? (
+                  <BasicTooltip content="Clear filters">
+                    <Button
+                      type="button"
+                      size="icon"
+                      className="size-8"
+                      variant="ghost"
+                      aria-label="Clear automation filters"
+                      onClick={() => {
+                        setAvailableCategory('all');
+                        setAvailableSearch('');
+                      }}
+                    >
+                      <X />
+                    </Button>
+                  </BasicTooltip>
+                ) : null}
+              </div>
+            </div>
+            {availableAutomationMatches.size === 0 ? (
+              <p className="order-0 col-span-full text-sm text-muted-foreground">
+                No available automations match these filters.
+              </p>
+            ) : null}
             <AutomationCard
               automation={AUTOMATION_DEFINITIONS.reviewer}
+              isAvailableMatch={availableAutomationMatches.has('reviewer')}
               isOpen={openAutomationIds.has('reviewer')}
               onOpenChange={(open) => setAutomationOpen('reviewer', open)}
               iconEnabled={iconEnabled.reviewer}
@@ -2818,6 +2952,9 @@ export function AutomationsSettings() {
                 <AutomationCard
                   key={automation.id}
                   automation={AUTOMATION_DEFINITIONS[automation.id]}
+                  isAvailableMatch={availableAutomationMatches.has(
+                    automation.id,
+                  )}
                   isOpen={openAutomationIds.has(automation.id)}
                   onOpenChange={(open) =>
                     setAutomationOpen(automation.id, open)
@@ -2894,6 +3031,9 @@ export function AutomationsSettings() {
 
             <AutomationCard
               automation={AUTOMATION_DEFINITIONS.conflictResolver}
+              isAvailableMatch={availableAutomationMatches.has(
+                'conflictResolver',
+              )}
               isOpen={openAutomationIds.has('conflictResolver')}
               onOpenChange={(open) =>
                 setAutomationOpen('conflictResolver', open)
@@ -3100,6 +3240,9 @@ export function AutomationsSettings() {
                 <AutomationCard
                   key={automation.id}
                   automation={AUTOMATION_DEFINITIONS[automation.id]}
+                  isAvailableMatch={availableAutomationMatches.has(
+                    automation.id,
+                  )}
                   isOpen={openAutomationIds.has(automation.id)}
                   onOpenChange={(open) =>
                     setAutomationOpen(automation.id, open)
@@ -3212,6 +3355,9 @@ export function AutomationsSettings() {
 
             <ScheduledAutomationCard
               automation={AUTOMATION_DEFINITIONS.dependabotTriage}
+              isAvailableMatch={availableAutomationMatches.has(
+                'dependabotTriage',
+              )}
               isOpen={openAutomationIds.has('dependabotTriage')}
               onOpenChange={(open) =>
                 setAutomationOpen('dependabotTriage', open)
@@ -3287,6 +3433,7 @@ export function AutomationsSettings() {
 
             <ScheduledAutomationCard
               automation={AUTOMATION_DEFINITIONS.codeqlTriage}
+              isAvailableMatch={availableAutomationMatches.has('codeqlTriage')}
               isOpen={openAutomationIds.has('codeqlTriage')}
               onOpenChange={(open) => setAutomationOpen('codeqlTriage', open)}
               iconEnabled={iconEnabled.codeqlTriage}
@@ -3377,6 +3524,9 @@ export function AutomationsSettings() {
                 <AutomationCard
                   key={automation.id}
                   automation={AUTOMATION_DEFINITIONS[automation.id]}
+                  isAvailableMatch={availableAutomationMatches.has(
+                    automation.id,
+                  )}
                   isOpen={openAutomationIds.has(automation.id)}
                   onOpenChange={(open) =>
                     setAutomationOpen(automation.id, open)
@@ -3487,10 +3637,11 @@ export function AutomationsSettings() {
               );
             })}
 
-            <CustomAutomationsSection />
-
             <AutomationCard
               automation={AUTOMATION_DEFINITIONS.channelAutoStart}
+              isAvailableMatch={availableAutomationMatches.has(
+                'channelAutoStart',
+              )}
               isOpen={openAutomationIds.has('channelAutoStart')}
               onOpenChange={(open) =>
                 setAutomationOpen('channelAutoStart', open)
@@ -3546,6 +3697,9 @@ export function AutomationsSettings() {
 
             <AutomationCard
               automation={AUTOMATION_DEFINITIONS.managerChannel}
+              isAvailableMatch={availableAutomationMatches.has(
+                'managerChannel',
+              )}
               isOpen={openAutomationIds.has('managerChannel')}
               onOpenChange={(open) => setAutomationOpen('managerChannel', open)}
               iconEnabled={iconEnabled.managerChannel}
@@ -3814,6 +3968,7 @@ export function AutomationsSettings() {
 
             <AutomationCard
               automation={AUTOMATION_DEFINITIONS.managerStats}
+              isAvailableMatch={availableAutomationMatches.has('managerStats')}
               isOpen={openAutomationIds.has('managerStats')}
               onOpenChange={(open) => setAutomationOpen('managerStats', open)}
               iconEnabled={iconEnabled.managerStats}
@@ -3826,7 +3981,9 @@ export function AutomationsSettings() {
                     variant="ghost"
                     size="icon"
                     onClick={() =>
-                      triggerMutation.mutate({ automationKey: 'manager_stats' })
+                      triggerMutation.mutate({
+                        automationKey: 'manager_stats',
+                      })
                     }
                     disabled={isRunDisabled(
                       'managerStats',
@@ -3898,6 +4055,7 @@ export function AutomationsSettings() {
 
             <AutomationCard
               automation={AUTOMATION_DEFINITIONS.sentryTriage}
+              isAvailableMatch={availableAutomationMatches.has('sentryTriage')}
               isOpen={openAutomationIds.has('sentryTriage')}
               onOpenChange={(open) => setAutomationOpen('sentryTriage', open)}
               iconEnabled={iconEnabled.sentryTriage}
@@ -3914,7 +4072,9 @@ export function AutomationsSettings() {
                     variant="ghost"
                     size="icon"
                     onClick={() =>
-                      triggerMutation.mutate({ automationKey: 'sentry_triage' })
+                      triggerMutation.mutate({
+                        automationKey: 'sentry_triage',
+                      })
                     }
                     disabled={isRunDisabled(
                       'sentryTriage',
@@ -4074,6 +4234,7 @@ export function AutomationsSettings() {
 
             <AutomationCard
               automation={AUTOMATION_DEFINITIONS.suggester}
+              isAvailableMatch={availableAutomationMatches.has('suggester')}
               isOpen={openAutomationIds.has('suggester')}
               onOpenChange={(open) => setAutomationOpen('suggester', open)}
               iconEnabled={iconEnabled.suggester}
@@ -4197,6 +4358,7 @@ export function AutomationsSettings() {
 
             <AutomationCard
               automation={AUTOMATION_DEFINITIONS.announcer}
+              isAvailableMatch={availableAutomationMatches.has('announcer')}
               isOpen={openAutomationIds.has('announcer')}
               onOpenChange={(open) => setAutomationOpen('announcer', open)}
               iconEnabled={iconEnabled.announcer}
@@ -4310,6 +4472,9 @@ export function AutomationsSettings() {
 
             <AutomationCard
               automation={AUTOMATION_DEFINITIONS.platformIssueAlerts}
+              isAvailableMatch={availableAutomationMatches.has(
+                'platformIssueAlerts',
+              )}
               isOpen={openAutomationIds.has('platformIssueAlerts')}
               onOpenChange={(open) =>
                 setAutomationOpen('platformIssueAlerts', open)
diff --git a/apps/web/src/components/settings/automations/CustomAutomationsSection.tsx b/apps/web/src/components/settings/automations/CustomAutomationsSection.tsx
index a4673d6ff..e23fff447 100644
--- a/apps/web/src/components/settings/automations/CustomAutomationsSection.tsx
+++ b/apps/web/src/components/settings/automations/CustomAutomationsSection.tsx
@@ -20,7 +20,6 @@ import {
   CardContent,
   Dialog,
   DialogContent,
-  DialogDescription,
   DialogHeader,
   DialogTitle,
   Input,
@@ -31,7 +30,8 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-  SlidersHorizontal,
+  Settings2,
+  Skeleton,
   Switch,
   Textarea,
   Trash2,
@@ -440,14 +440,11 @@ export function CustomAutomationsSection() {
   };
 
   const renderEditor = () => (
-    <DialogContent size="lg">
+    <DialogContent size="4xl" aria-describedby={undefined}>
       <DialogHeader>
         <DialogTitle>
           {editingId ? 'Edit custom automation' : 'New custom automation'}
         </DialogTitle>
-        <DialogDescription>
-          Configure what runs, when it runs, and where the result is sent.
-        </DialogDescription>
       </DialogHeader>
       <div className="space-y-4">
         <div className="space-y-2">
@@ -482,9 +479,9 @@ export function CustomAutomationsSection() {
           />
         </div>
 
-        <div className="grid gap-4 sm:grid-cols-2">
-          <div className="space-y-2">
-            <Label>Cadence</Label>
+        <div className="space-y-2">
+          <Label htmlFor="custom-automation-schedule">Schedule</Label>
+          <div className="flex flex-col gap-2 sm:flex-row">
             <Select
               value={form.scheduleMode}
               disabled={busy}
@@ -497,7 +494,10 @@ export function CustomAutomationsSection() {
                 }));
               }}
             >
-              <SelectTrigger>
+              <SelectTrigger
+                id="custom-automation-schedule"
+                className="w-full sm:w-52"
+              >
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
@@ -508,13 +508,12 @@ export function CustomAutomationsSection() {
                 ))}
               </SelectContent>
             </Select>
-          </div>
 
-          {form.scheduleMode === 'cron' ? (
-            <div className="space-y-2">
-              <Label htmlFor="custom-automation-cron">Custom schedule</Label>
+            {form.scheduleMode === 'cron' ? (
               <Input
                 id="custom-automation-cron"
+                aria-label="Custom schedule"
+                className="flex-1"
                 value={form.cronExpression}
                 disabled={busy}
                 placeholder="Weekdays at 9am or 0 9 * * 1-5"
@@ -543,22 +542,22 @@ export function CustomAutomationsSection() {
                   }
                 }}
               />
-              {resolveScheduleMutation.isPending ? (
-                <p className="text-sm text-muted-foreground">
-                  Interpreting schedule...
-                </p>
-              ) : effectiveScheduleSummary ? (
-                <p className="text-sm text-muted-foreground">
-                  {effectiveScheduleSummary}
-                </p>
-              ) : null}
-            </div>
+            ) : null}
+          </div>
+          {resolveScheduleMutation.isPending ? (
+            <p className="text-sm text-muted-foreground">
+              Interpreting schedule...
+            </p>
+          ) : effectiveScheduleSummary ? (
+            <p className="text-sm text-muted-foreground">
+              {effectiveScheduleSummary}
+            </p>
           ) : null}
         </div>
 
-        <div className="grid gap-4 sm:grid-cols-2">
-          <div className="space-y-2">
-            <Label>Environment</Label>
+        <div className="flex flex-col gap-4 sm:flex-row">
+          <div className="space-y-2 sm:w-52">
+            <Label htmlFor="custom-automation-environment">Environment</Label>
             <Select
               value={form.environmentId || undefined}
               disabled={busy || environmentOptions.length === 0}
@@ -569,7 +568,10 @@ export function CustomAutomationsSection() {
                 }))
               }
             >
-              <SelectTrigger>
+              <SelectTrigger
+                id="custom-automation-environment"
+                className="w-full"
+              >
                 <SelectValue placeholder="Select environment" />
               </SelectTrigger>
               <SelectContent>
@@ -585,7 +587,6 @@ export function CustomAutomationsSection() {
           <div className="space-y-2">
             <Label>Model</Label>
             <ModelSelect
-              className="w-full"
               size="default"
               ariaLabel="Automation model"
               value={form.model}
@@ -598,9 +599,9 @@ export function CustomAutomationsSection() {
           </div>
         </div>
 
-        <div className="grid gap-4 sm:grid-cols-2">
-          <div className="space-y-2">
-            <Label>Destination provider</Label>
+        <div className="space-y-2">
+          <Label htmlFor="custom-automation-destination">Destination</Label>
+          <div className="flex flex-col gap-2 sm:flex-row">
             <Select
               value={form.targetProvider}
               disabled={busy}
@@ -619,7 +620,11 @@ export function CustomAutomationsSection() {
                 }))
               }
             >
-              <SelectTrigger>
+              <SelectTrigger
+                id="custom-automation-destination"
+                aria-label="Destination provider"
+                className="w-full sm:w-52"
+              >
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
@@ -630,20 +635,22 @@ export function CustomAutomationsSection() {
                 <SelectItem value="telegram">Telegram</SelectItem>
               </SelectContent>
             </Select>
-          </div>
 
-          {form.targetProvider === 'none' ? (
-            <div className="space-y-2">
-              <Label>Destination channel</Label>
-              <p className="pt-2 text-sm text-muted-foreground">
+            {form.targetProvider === 'none' ? (
+              <p className="self-center text-sm text-muted-foreground">
                 Results appear only in the task view.
               </p>
-            </div>
-          ) : (
-            <div className="space-y-2">
-              <Label>Destination channel</Label>
-              {form.targetProvider === 'slack' ? (
+            ) : form.targetProvider === 'slack' ? (
+              <div className="flex min-w-0 flex-1 items-center gap-2">
+                <Label
+                  htmlFor="custom-automation-destination-channel"
+                  className="shrink-0"
+                >
+                  Channel
+                </Label>
                 <SlackChannelSelect
+                  id="custom-automation-destination-channel"
+                  className="flex-1"
                   value={form.targetChannelId || null}
                   options={slackOptions}
                   disabled={busy}
@@ -654,7 +661,10 @@ export function CustomAutomationsSection() {
                     }))
                   }
                 />
-              ) : form.targetProvider === 'discord' ? (
+              </div>
+            ) : form.targetProvider === 'discord' ? (
+              <div className="flex min-w-0 flex-1 items-center gap-2">
+                <Label className="shrink-0">Channel</Label>
                 <Select
                   value={form.targetChannelId || undefined}
                   disabled={busy}
@@ -665,7 +675,10 @@ export function CustomAutomationsSection() {
                     }))
                   }
                 >
-                  <SelectTrigger>
+                  <SelectTrigger
+                    aria-label="Destination channel"
+                    className="flex-1"
+                  >
                     <SelectValue placeholder="Select Discord channel" />
                   </SelectTrigger>
                   <SelectContent>
@@ -676,8 +689,13 @@ export function CustomAutomationsSection() {
                     ))}
                   </SelectContent>
                 </Select>
-              ) : (
+              </div>
+            ) : (
+              <div className="flex min-w-0 flex-1 items-center gap-2">
+                <Label className="shrink-0">Channel</Label>
                 <Input
+                  aria-label="Destination channel"
+                  className="flex-1"
                   value={form.targetChannelId}
                   disabled={busy}
                   onChange={(event) =>
@@ -692,30 +710,33 @@ export function CustomAutomationsSection() {
                       : 'Telegram chat ID'
                   }
                 />
-              )}
-            </div>
-          )}
-        </div>
-
-        {form.targetProvider === 'teams' ? (
-          <div className="space-y-2">
-            <Label htmlFor="custom-automation-service-url">
-              Teams service URL (optional)
-            </Label>
-            <Input
-              id="custom-automation-service-url"
-              value={form.targetServiceUrl}
-              disabled={busy}
-              onChange={(event) =>
-                setForm((current) => ({
-                  ...current,
-                  targetServiceUrl: event.target.value,
-                }))
-              }
-              placeholder="https://smba.trafficmanager.net/..."
-            />
+              </div>
+            )}
+            {form.targetProvider === 'teams' ? (
+              <div className="flex min-w-0 flex-1 items-center gap-2">
+                <Label
+                  htmlFor="custom-automation-service-url"
+                  className="shrink-0"
+                >
+                  Service URL
+                </Label>
+                <Input
+                  id="custom-automation-service-url"
+                  className="flex-1"
+                  value={form.targetServiceUrl}
+                  disabled={busy}
+                  onChange={(event) =>
+                    setForm((current) => ({
+                      ...current,
+                      targetServiceUrl: event.target.value,
+                    }))
+                  }
+                  placeholder="Optional"
+                />
+              </div>
+            ) : null}
           </div>
-        ) : null}
+        </div>
 
         <div className="flex items-center justify-between gap-3">
           <div className="flex items-center gap-2">
@@ -747,10 +768,7 @@ export function CustomAutomationsSection() {
   );
 
   return (
-    <section
-      className="order-[-40] col-span-full space-y-3"
-      aria-labelledby="custom-automations-heading"
-    >
+    <section className="space-y-3" aria-labelledby="custom-automations-heading">
       <div className="flex items-start justify-between gap-3 pt-2">
         <div className="space-y-1">
           <h2
@@ -760,7 +778,7 @@ export function CustomAutomationsSection() {
             Custom
           </h2>
           <p className="text-sm text-muted-foreground">
-            Create your own scheduled agent runs with a prompt, cadence,
+            Create your own scheduled agent runs with a prompt, frequency,
             environment, and optional report channel.
           </p>
         </div>
@@ -801,9 +819,24 @@ export function CustomAutomationsSection() {
       </Dialog>
 
       {listQuery.isPending ? (
-        <p className="text-sm text-muted-foreground">
-          Loading custom automations…
-        </p>
+        <Card variant="snug" data-testid="custom-automations-skeleton">
+          <CardContent>
+            <div className="divide-y divide-background">
+              {Array.from({ length: 2 }).map((_, index) => (
+                <div
+                  key={index}
+                  className="flex items-start gap-3 py-3 first:pt-0 last:pb-0"
+                >
+                  <Skeleton className="mt-0.5 h-5 w-9 rounded-full" />
+                  <div className="flex-1 space-y-2">
+                    <Skeleton className="h-4 w-48" />
+                    <Skeleton className="h-3 w-full max-w-lg" />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
       ) : rows.length === 0 && !isCreating ? (
         <p className="text-sm text-muted-foreground">
           No custom automations created yet.
@@ -836,37 +869,35 @@ export function CustomAutomationsSection() {
                 return (
                   <div
                     key={row.id}
-                    className="flex flex-col gap-3 py-3 first:pt-0 last:pb-0 sm:flex-row sm:items-start sm:justify-between"
+                    className="grid grid-cols-[1fr_auto] gap-3 py-3 first:pt-0 last:pb-0 sm:grid-cols-[auto_1fr_auto] sm:items-start"
                   >
-                    <div className="flex min-w-0 items-start gap-3">
-                      <Switch
-                        aria-label={`Toggle ${row.name}`}
-                        checked={row.enabled}
-                        disabled={busy}
-                        className="mt-0.5"
-                        onCheckedChange={(enabled) =>
-                          toggleMutation.mutate({
-                            id: row.id,
-                            ...writeInputFromRow(row),
-                            enabled,
-                          })
-                        }
-                      />
-                      <div className="min-w-0 space-y-1">
-                        <p className="text-sm font-semibold">{row.name}</p>
-                        <p className="text-xs text-muted-foreground">
-                          {row.scheduleMode === 'cron'
-                            ? row.cronExpression
-                            : scheduleLabel(row.scheduleMode)}{' '}
-                          · {environmentName} ·{' '}
-                          {target.provider === 'none'
-                            ? destinationLabel
-                            : `${target.provider}:${destinationLabel}`}{' '}
-                          · Created by {row.createdByName ?? 'Unknown'}
-                        </p>
-                      </div>
+                    <Switch
+                      aria-label={`Toggle ${row.name}`}
+                      checked={row.enabled}
+                      disabled={busy}
+                      className="col-start-1 row-start-2 mt-0.5 sm:row-start-1"
+                      onCheckedChange={(enabled) =>
+                        toggleMutation.mutate({
+                          id: row.id,
+                          ...writeInputFromRow(row),
+                          enabled,
+                        })
+                      }
+                    />
+                    <div className="col-span-2 row-start-1 min-w-0 space-y-1 sm:col-span-1 sm:col-start-2">
+                      <p className="text-sm font-semibold">{row.name}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {row.scheduleMode === 'cron'
+                          ? row.cronExpression
+                          : scheduleLabel(row.scheduleMode)}{' '}
+                        · {environmentName} ·{' '}
+                        {target.provider === 'none'
+                          ? destinationLabel
+                          : `${target.provider}:${destinationLabel}`}{' '}
+                        · Created by {row.createdByName ?? 'Unknown'}
+                      </p>
                     </div>
-                    <div className="flex shrink-0 items-center gap-1 self-end sm:self-auto">
+                    <div className="col-start-2 row-start-2 flex shrink-0 items-center gap-1 sm:col-start-3 sm:row-start-1">
                       <BasicTooltip content="Configure">
                         <Button
                           type="button"
@@ -876,7 +907,7 @@ export function CustomAutomationsSection() {
                           aria-label={`Configure ${row.name}`}
                           onClick={() => editAutomation(row)}
                         >
-                          <SlidersHorizontal />
+                          <Settings2 />
                         </Button>
                       </BasicTooltip>
                       <BasicTooltip content="Delete">
diff --git a/apps/web/src/components/system/primitives/icons.ts b/apps/web/src/components/system/primitives/icons.ts
index 9ee447ac7..bac8767c1 100644
--- a/apps/web/src/components/system/primitives/icons.ts
+++ b/apps/web/src/components/system/primitives/icons.ts
@@ -169,7 +169,6 @@ export {
   Shapes,
   Slack,
   Slash,
-  SlidersHorizontal,
   Sparkles,
   Square,
   SquareArrowOutUpRight,