RedditBot/apps/dashboard/src/features/settings/pacing-card.tsx

import type { ConfigResponse } from '../../../../../packages/api-contracts/src/index.js';
import { NumberField, SwitchField } from '../../components/form-fields.js';
import { SettingsCard } from './settings-card.js';
import {
  createPacingDraft,
  estimateThroughput,
  pacingRisks,
  validatePacingDraft,
  type PacingDraft,
} from './settings-model.js';
import { useConfigCard } from './use-config-card.js';

function ThroughputReadout({ draft }: { draft: PacingDraft }) {
  const estimate = estimateThroughput(draft);
  if (!estimate) {
    return <p className="throughput-readout is-unknown">Enter valid numbers to see the effective sending rate.</p>;
  }
  return (
    <p aria-live="polite" className="throughput-readout">
      <strong>{estimate.effectivePerHour} messages per hour</strong>
      <span>
        {estimate.spacingLabel}
        {estimate.isDelayBound
          ? ' — the minimum delay is the binding limit, so raising the hourly limit alone changes nothing.'
          : ' — the hourly limit is the binding limit.'}
      </span>
    </p>
  );
}

export function PacingCard({ config }: { config: ConfigResponse }) {
  const card = useConfigCard<PacingDraft>(config, {
    id: 'pacing',
    toDraft: createPacingDraft,
    validate: validatePacingDraft,
    risks: pacingRisks,
  });
  const { draft, errors } = card;

  return (
    <SettingsCard
      anchor="pacing"
      card={card}
      description="How fast the bot sends, and how it picks which posts to act on. Both limits apply at once."
      eyebrow="Throughput"
      saveLabel="Save pacing"
      title="Pacing"
    >
      <fieldset className="field-group">
        <legend>Sending pace</legend>
        <div className="field-row">
          <NumberField
            error={errors.minDelayMinutes}
            hint="Shortest gap between two messages."
            label="Minimum delay"
            min={0}
            name="minimum-delay"
            onChange={(minDelayMinutes) => card.update({ ...draft, minDelayMinutes })}
            suffix="min"
            value={draft.minDelayMinutes}
          />
          <NumberField
            error={errors.maxMessagesPerHour}
            hint="Hard ceiling per rolling hour."
            label="Hourly limit"
            min={1}
            name="hourly-limit"
            onChange={(maxMessagesPerHour) => card.update({ ...draft, maxMessagesPerHour })}
            suffix="msg/hr"
            value={draft.maxMessagesPerHour}
          />
          <NumberField
            error={errors.jitterSeconds}
            hint="Random padding so timing looks human."
            label="Random jitter"
            min={0}
            name="jitter"
            onChange={(jitterSeconds) => card.update({ ...draft, jitterSeconds })}
            suffix="sec"
            value={draft.jitterSeconds}
          />
        </div>
        <ThroughputReadout draft={draft} />
      </fieldset>

      <fieldset className="field-group">
        <legend>Post discovery</legend>
        <SwitchField
          checked={draft.prioritizeRecentPosts}
          description="Act on posts inside the recent window before older ones."
          label="Prioritise recent posts"
          onChange={(prioritizeRecentPosts) => card.update({ ...draft, prioritizeRecentPosts })}
        />
        <div className="field-row">
          <NumberField
            error={errors.recentWindowMinutes}
            hint="How new a post must be to count as recent."
            label="Recent window"
            min={1}
            name="recent-window"
            onChange={(recentWindowMinutes) => card.update({ ...draft, recentWindowMinutes })}
            suffix="min"
            value={draft.recentWindowMinutes}
          />
          <NumberField
            error={errors.maxReadyCandidates}
            hint="Queue depth of posts waiting to be actioned (1–500)."
            label="Maximum ready posts"
            max={500}
            min={1}
            name="maximum-ready-posts"
            onChange={(maxReadyCandidates) => card.update({ ...draft, maxReadyCandidates })}
            suffix="posts"
            value={draft.maxReadyCandidates}
          />
        </div>
      </fieldset>
    </SettingsCard>
  );
}