@promptbook/cli 0.114.0-14 → 0.114.0-18

package/apps/agents-server/src/app/admin/planned-messages/PlannedMessageManagerFiltersCard.tsx

@@ -0,0 +1,195 @@
+'use client';
+
+import { resolvePlannedMessageAgentOptionLabel } from '@/src/utils/plannedMessageManager/collectPlannedMessageAgentOptions';
+import { resolvePlannedMessageManagerViewCount } from '@/src/utils/plannedMessageManager/createPlannedMessageManagerCounters';
+import type { PlannedMessageManagerView } from '@/src/utils/plannedMessagesAdmin';
+import { Card } from '../../../components/Homepage/Card';
+import { AdminFilterField, AdminFilterSelectField, type AdminFilterSelectOption } from '../_components/AdminFilterFields';
+import { ANY_PLANNED_MESSAGE_FILTER_VALUE, type UsePlannedMessageManagerStateResult } from './usePlannedMessageManagerState';
+
+/**
+ * One view offered by the planned-message manager.
+ *
+ * @private function of PlannedMessageManagerFiltersCard
+ */
+type PlannedMessageViewOption = {
+    readonly id: PlannedMessageManagerView;
+    readonly label: string;
+    readonly description: string;
+};
+
+/**
+ * Views offered by the planned-message manager, in the order a plan moves through them.
+ *
+ * @private function of PlannedMessageManagerFiltersCard
+ */
+const PLANNED_MESSAGE_VIEW_OPTIONS: ReadonlyArray<PlannedMessageViewOption> = [
+    { id: 'active', label: 'Active', description: 'Everything still planned' },
+    { id: 'scheduled', label: 'Scheduled', description: 'Wake-up ahead' },
+    { id: 'not-started', label: 'Not started', description: 'Starts later' },
+    { id: 'ongoing', label: 'Ongoing', description: 'Waking an agent now' },
+    { id: 'paused', label: 'Paused', description: 'Held back' },
+    { id: 'finished', label: 'Finished', description: 'Cancelled or over' },
+    { id: 'all', label: 'All', description: 'Whole history' },
+];
+
+/**
+ * Frequency filter options.
+ *
+ * @private function of PlannedMessageManagerFiltersCard
+ */
+const PLANNED_MESSAGE_RECURRENCE_OPTIONS: ReadonlyArray<AdminFilterSelectOption> = [
+    { value: ANY_PLANNED_MESSAGE_FILTER_VALUE, label: 'Any frequency' },
+    { value: 'INTERVAL', label: 'Repeats on an interval' },
+    { value: 'CRON', label: 'Repeats on a cron' },
+    { value: 'ONCE', label: 'Wakes up once' },
+];
+
+/**
+ * Last-run filter options.
+ *
+ * @private function of PlannedMessageManagerFiltersCard
+ */
+const PLANNED_MESSAGE_LAST_RUN_OPTIONS: ReadonlyArray<AdminFilterSelectOption> = [
+    { value: ANY_PLANNED_MESSAGE_FILTER_VALUE, label: 'Any last run' },
+    { value: 'never', label: 'Never ran' },
+    { value: 'hour', label: 'Last hour' },
+    { value: 'day', label: 'Last 24 hours' },
+    { value: 'week', label: 'Last 7 days' },
+    { value: 'older', label: 'Older than 7 days' },
+];
+
+/**
+ * Page-size options.
+ *
+ * @private function of PlannedMessageManagerFiltersCard
+ */
+const PLANNED_MESSAGE_PAGE_SIZE_OPTIONS: ReadonlyArray<AdminFilterSelectOption> = [
+    { value: '25', label: '25' },
+    { value: '50', label: '50' },
+    { value: '100', label: '100' },
+];
+
+/**
+ * Auto-refresh presets.
+ *
+ * @private function of PlannedMessageManagerFiltersCard
+ */
+const PLANNED_MESSAGE_POLL_INTERVAL_OPTIONS: ReadonlyArray<AdminFilterSelectOption> = [
+    { value: '5000', label: '5s' },
+    { value: '10000', label: '10s' },
+    { value: '30000', label: '30s' },
+    { value: '0', label: 'Off' },
+];
+
+/**
+ * Props for the planned-message filter card.
+ *
+ * @private function of PlannedMessageManagerClient
+ */
+type PlannedMessageManagerFiltersCardProps = {
+    readonly state: UsePlannedMessageManagerStateResult;
+    readonly lastRefreshedLabel: string;
+};
+
+/**
+ * Renders the planned-message views and the parameters the listing is narrowed by.
+ *
+ * @private function of PlannedMessageManagerClient
+ */
+export function PlannedMessageManagerFiltersCard({ state, lastRefreshedLabel }: PlannedMessageManagerFiltersCardProps) {
+    const agentSelectOptions: ReadonlyArray<AdminFilterSelectOption> = [
+        { value: ANY_PLANNED_MESSAGE_FILTER_VALUE, label: 'Every agent' },
+        ...state.agentOptions.map((agentOption) => ({
+            value: agentOption.agentPermanentId,
+            label: `${resolvePlannedMessageAgentOptionLabel(agentOption)} (${agentOption.plannedMessageCount})`,
+        })),
+    ];
+
+    return (
+        <Card className="hover:border-gray-200 hover:shadow-md">
+            <div className="flex flex-col gap-4">
+                <div className="flex flex-wrap gap-2">
+                    {PLANNED_MESSAGE_VIEW_OPTIONS.map((viewOption) => (
+                        <button
+                            key={viewOption.id}
+                            type="button"
+                            onClick={() => state.selectView(viewOption.id)}
+                            className={`rounded-xl border px-4 py-2 text-left transition ${
+                                viewOption.id === state.filters.view
+                                    ? 'border-blue-500 bg-blue-50 text-blue-700 shadow-sm'
+                                    : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300 hover:bg-gray-50'
+                            }`}
+                        >
+                            <div className="text-sm font-semibold">
+                                {viewOption.label} ({resolvePlannedMessageManagerViewCount(state.counters, viewOption.id)})
+                            </div>
+                            <div className="text-[11px] text-current/70">{viewOption.description}</div>
+                        </button>
+                    ))}
+                </div>
+
+                <div className="grid gap-4 lg:grid-cols-[minmax(0,2fr)_repeat(5,minmax(0,1fr))]">
+                    <AdminFilterField label="Search" htmlFor="planned-message-search">
+                        <input
+                            id="planned-message-search"
+                            type="text"
+                            value={state.searchInput}
+                            onChange={(event) => state.updateSearchInput(event.target.value)}
+                            placeholder="Message / timeout id / agent / chat id / user"
+                            className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        />
+                    </AdminFilterField>
+
+                    <AdminFilterSelectField
+                        id="planned-message-agent"
+                        label="Agent"
+                        value={state.filters.agentPermanentId}
+                        onChange={state.updateAgentPermanentId}
+                        options={agentSelectOptions}
+                    />
+
+                    <AdminFilterSelectField
+                        id="planned-message-recurrence"
+                        label="Frequency"
+                        value={state.filters.recurrence}
+                        onChange={state.updateRecurrence}
+                        options={PLANNED_MESSAGE_RECURRENCE_OPTIONS}
+                    />
+
+                    <AdminFilterSelectField
+                        id="planned-message-last-run"
+                        label="Last run"
+                        value={state.filters.lastRun}
+                        onChange={state.updateLastRun}
+                        options={PLANNED_MESSAGE_LAST_RUN_OPTIONS}
+                    />
+
+                    <AdminFilterSelectField
+                        id="planned-message-page-size"
+                        label="Page size"
+                        value={String(state.pageSize)}
+                        onChange={state.updatePageSize}
+                        options={PLANNED_MESSAGE_PAGE_SIZE_OPTIONS}
+                    />
+
+                    <AdminFilterSelectField
+                        id="planned-message-poll-interval"
+                        label="Auto-refresh"
+                        value={String(state.data.pollIntervalMs)}
+                        onChange={state.data.updatePollIntervalMs}
+                        options={PLANNED_MESSAGE_POLL_INTERVAL_OPTIONS}
+                    />
+                </div>
+
+                <div className="flex flex-wrap items-center justify-between gap-2 text-xs text-gray-500">
+                    <span>{lastRefreshedLabel}</span>
+                    <span>
+                        A planned message is listed until it is cancelled or its plan is over, so a finished plan stays
+                        readable here.
+                    </span>
+                </div>
+            </div>
+        </Card>
+    );
+}

package/apps/agents-server/src/app/admin/planned-messages/PlannedMessageManagerRow.tsx

@@ -0,0 +1,189 @@
+'use client';
+
+import type { ServerLanguageCode } from '@/src/languages/ServerLanguageRegistry';
+import { buildAgentProfileHref, buildExistingAgentChatHref } from '@/src/utils/agentRouting/agentRouteHrefs';
+import { isPlannedMessageStillPlanned } from '@/src/utils/plannedMessageManager/isPlannedMessageStillPlanned';
+import type { PlannedMessageManagerRecord } from '@/src/utils/plannedMessagesAdmin';
+import { ArrowUpRight, MessageSquareText } from 'lucide-react';
+import Link from 'next/link';
+import type { PlannedMessageActionKind } from './usePlannedMessageManagerState';
+import {
+    describePlannedMessagePlan,
+    formatPlannedMessageDateTime,
+    formatPlannedMessageEndReason,
+    formatPlannedMessageFrequency,
+    formatPlannedMessageRunCount,
+    PlannedMessageGoalChatBadge,
+    PlannedMessageLifecycleBadge,
+    resolvePlannedMessageText,
+} from './plannedMessageManagerPresentation';
+
+/**
+ * Props for one planned-message table row.
+ *
+ * @private function of PlannedMessageManagerTableCard
+ */
+type PlannedMessageManagerRowProps = {
+    readonly plannedMessage: PlannedMessageManagerRecord;
+    readonly language: ServerLanguageCode;
+    readonly busyTimeoutId: string | null;
+    readonly busyAction: PlannedMessageActionKind | null;
+    readonly onEdit: (plannedMessage: PlannedMessageManagerRecord) => void;
+    readonly onTogglePaused: (plannedMessage: PlannedMessageManagerRecord) => Promise<void>;
+    readonly onCancel: (plannedMessage: PlannedMessageManagerRecord) => Promise<void>;
+};
+
+/**
+ * Shared classes of the small row action buttons.
+ *
+ * @private function of PlannedMessageManagerRow
+ */
+const PLANNED_MESSAGE_ACTION_BUTTON_CLASS_NAME =
+    'rounded-md border px-2.5 py-1 text-[11px] font-semibold disabled:cursor-not-allowed disabled:opacity-50';
+
+/**
+ * Renders one planned message with its plan, its state, and what can be done to it.
+ *
+ * @private function of PlannedMessageManagerTableCard
+ */
+export function PlannedMessageManagerRow({
+    plannedMessage,
+    language,
+    busyTimeoutId,
+    busyAction,
+    onEdit,
+    onTogglePaused,
+    onCancel,
+}: PlannedMessageManagerRowProps) {
+    const isStillPlanned = isPlannedMessageStillPlanned(plannedMessage.lifecycle);
+    const isFiringNow = plannedMessage.lifecycle === 'ONGOING';
+    const isBusy = busyTimeoutId === plannedMessage.timeoutId;
+    const isPaused = plannedMessage.pausedAt !== null;
+    const endReasonLabel = formatPlannedMessageEndReason(plannedMessage.endReason);
+
+    /**
+     * Says whether one action of this very row is running right now.
+     */
+    function isRunningAction(action: PlannedMessageActionKind): boolean {
+        return isBusy && busyAction === action;
+    }
+
+    return (
+        <tr className="align-top">
+            <td className="px-4 py-3">
+                <div className="max-w-md text-[12px] font-medium text-gray-900">
+                    {resolvePlannedMessageText(plannedMessage)}
+                </div>
+                <div className="mt-1 flex flex-wrap items-center gap-2">
+                    <span className="break-all font-mono text-[11px] text-gray-500">{plannedMessage.timeoutId}</span>
+                    <PlannedMessageGoalChatBadge plannedMessage={plannedMessage} />
+                </div>
+            </td>
+
+            <td className="px-4 py-3">
+                <div className="text-[12px] font-medium text-gray-900">
+                    {plannedMessage.agentName || plannedMessage.agentPermanentId}
+                </div>
+                <div className="break-all text-[11px] text-gray-500">{plannedMessage.agentPermanentId}</div>
+                <div className="mt-1 text-[11px] text-gray-500">
+                    {plannedMessage.username || `#${plannedMessage.userId}`}
+                </div>
+                <div className="mt-2 flex flex-wrap gap-2">
+                    <Link
+                        href={buildAgentProfileHref(plannedMessage.agentPermanentId)}
+                        className="inline-flex items-center gap-1 rounded-md border border-blue-200 bg-blue-50 px-2.5 py-1 text-[11px] font-semibold text-blue-700 hover:bg-blue-100"
+                        title="Open the agent this planned message belongs to"
+                    >
+                        <ArrowUpRight className="h-3.5 w-3.5" />
+                        Open agent
+                    </Link>
+                    <Link
+                        href={buildExistingAgentChatHref(plannedMessage.agentPermanentId, plannedMessage.chatId)}
+                        className="inline-flex items-center gap-1 rounded-md border border-gray-200 bg-white px-2.5 py-1 text-[11px] font-semibold text-gray-700 hover:bg-gray-50"
+                        title="Open the chat this planned message wakes up"
+                    >
+                        <MessageSquareText className="h-3.5 w-3.5" />
+                        Open chat
+                    </Link>
+                </div>
+            </td>
+
+            <td className="px-4 py-3">
+                <div className="text-[12px] text-gray-900">{formatPlannedMessageFrequency(plannedMessage)}</div>
+                <div className="mt-1 max-w-xs text-[11px] text-gray-500">
+                    {describePlannedMessagePlan(plannedMessage)}
+                </div>
+            </td>
+
+            <td className="px-4 py-3 text-[11px] text-gray-800">
+                {isStillPlanned ? formatPlannedMessageDateTime(plannedMessage.dueAt, language) : '-'}
+                {plannedMessage.startsAt !== null && (
+                    <div className="text-[11px] text-gray-500">
+                        from {formatPlannedMessageDateTime(plannedMessage.startsAt, language)}
+                    </div>
+                )}
+                {plannedMessage.endsAt !== null && (
+                    <div className="text-[11px] text-gray-500">
+                        until {formatPlannedMessageDateTime(plannedMessage.endsAt, language)}
+                    </div>
+                )}
+            </td>
+
+            <td className="px-4 py-3 text-[11px] text-gray-800">
+                {formatPlannedMessageDateTime(plannedMessage.lastFiredAt, language)}
+            </td>
+
+            <td className="px-4 py-3 text-[11px] text-gray-800">{formatPlannedMessageRunCount(plannedMessage)}</td>
+
+            <td className="px-4 py-3">
+                <PlannedMessageLifecycleBadge lifecycle={plannedMessage.lifecycle} />
+                {endReasonLabel !== null && <div className="mt-1 text-[11px] text-gray-500">{endReasonLabel}</div>}
+                {plannedMessage.failureReason !== null && (
+                    <div className="mt-1 max-w-xs break-words text-[11px] text-rose-700">
+                        {plannedMessage.failureReason}
+                    </div>
+                )}
+            </td>
+
+            <td className="px-4 py-3">
+                <div className="flex flex-wrap justify-end gap-2">
+                    <button
+                        type="button"
+                        onClick={() => onEdit(plannedMessage)}
+                        disabled={!isStillPlanned || isFiringNow || isBusy}
+                        className={`${PLANNED_MESSAGE_ACTION_BUTTON_CLASS_NAME} border-gray-300 bg-white text-gray-700 hover:bg-gray-50`}
+                        title={
+                            isFiringNow
+                                ? 'This planned message is waking its agent right now, so its plan cannot be changed'
+                                : 'Change the plan or the text of this planned message'
+                        }
+                    >
+                        Edit
+                    </button>
+                    <button
+                        type="button"
+                        onClick={() => void onTogglePaused(plannedMessage)}
+                        disabled={!isStillPlanned || isFiringNow || isBusy}
+                        className={`${PLANNED_MESSAGE_ACTION_BUTTON_CLASS_NAME} border-orange-200 bg-orange-50 text-orange-700 hover:bg-orange-100`}
+                        title={
+                            isPaused
+                                ? 'Let this planned message wake its agent again'
+                                : 'Hold this planned message back without cancelling it'
+                        }
+                    >
+                        {isRunningAction('pause') ? 'Working…' : isPaused ? 'Resume' : 'Pause'}
+                    </button>
+                    <button
+                        type="button"
+                        onClick={() => void onCancel(plannedMessage)}
+                        disabled={!isStillPlanned || isBusy}
+                        className={`${PLANNED_MESSAGE_ACTION_BUTTON_CLASS_NAME} border-red-200 bg-red-50 text-red-700 hover:bg-red-100`}
+                        title="Cancel this planned message so it never wakes its agent again"
+                    >
+                        {isRunningAction('cancel') ? 'Cancelling…' : 'Cancel'}
+                    </button>
+                </div>
+            </td>
+        </tr>
+    );
+}

package/apps/agents-server/src/app/admin/planned-messages/PlannedMessageManagerSummaryMetrics.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import type { ServerLanguageCode } from '@/src/languages/ServerLanguageRegistry';
+import type { PlannedMessageManagerCounters } from '@/src/utils/plannedMessageManager/createPlannedMessageManagerCounters';
+import { AdminMetricCard } from '../_components/AdminMetricCard';
+import { formatPlannedMessageDateTime } from './plannedMessageManagerPresentation';
+
+/**
+ * Props for the planned-message summary metrics grid.
+ *
+ * @private function of PlannedMessageManagerClient
+ */
+type PlannedMessageManagerSummaryMetricsProps = {
+    readonly counters: PlannedMessageManagerCounters;
+    readonly isLoading: boolean;
+    readonly language: ServerLanguageCode;
+};
+
+/**
+ * Renders the summary counters above the planned-message table.
+ *
+ * @private function of PlannedMessageManagerClient
+ */
+export function PlannedMessageManagerSummaryMetrics({
+    counters,
+    isLoading,
+    language,
+}: PlannedMessageManagerSummaryMetricsProps) {
+    /**
+     * Formats one counter, keeping the loading placeholder until the first listing arrives.
+     */
+    function formatCounter(count: number): string {
+        return isLoading ? '...' : count.toLocaleString();
+    }
+
+    return (
+        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+            <AdminMetricCard
+                label="Ongoing"
+                value={formatCounter(counters.countByLifecycle.ONGOING)}
+                caption="Waking their agent right now"
+            />
+            <AdminMetricCard
+                label="Scheduled"
+                value={formatCounter(counters.countByLifecycle.SCHEDULED + counters.countByLifecycle.NOT_STARTED)}
+                caption="Wake-ups still ahead"
+            />
+            <AdminMetricCard
+                label="Paused"
+                value={formatCounter(counters.countByLifecycle.PAUSED)}
+                caption="Held back until resumed"
+            />
+            <AdminMetricCard
+                label="Next wake-up"
+                value={isLoading ? '...' : formatPlannedMessageDateTime(counters.nextDueAt, language)}
+                caption="Earliest planned wake-up"
+            />
+        </div>
+    );
+}

package/apps/agents-server/src/app/admin/planned-messages/PlannedMessageManagerTableCard.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import type { ServerLanguageCode } from '@/src/languages/ServerLanguageRegistry';
+import type { PlannedMessageManagerSortField } from '@/src/utils/plannedMessagesAdmin';
+import { Card } from '../../../components/Homepage/Card';
+import { AdminSortableTableHeaderCell } from '../_components/AdminSortableTableHeaderCell';
+import { PlannedMessageManagerRow } from './PlannedMessageManagerRow';
+import type { UsePlannedMessageManagerStateResult } from './usePlannedMessageManagerState';
+
+/**
+ * Sortable columns of the planned-message table, with the label used in their sort tooltip.
+ *
+ * @private function of PlannedMessageManagerTableCard
+ */
+const PLANNED_MESSAGE_SORT_COLUMNS: ReadonlyArray<{
+    readonly sortBy: PlannedMessageManagerSortField;
+    readonly heading: string;
+    readonly label: string;
+}> = [
+    { sortBy: 'plannedMessage', heading: 'Planned message', label: 'planned message' },
+    { sortBy: 'agent', heading: 'Agent', label: 'agent' },
+    { sortBy: 'frequency', heading: 'Frequency', label: 'frequency' },
+    { sortBy: 'nextRun', heading: 'Next run', label: 'next run' },
+    { sortBy: 'lastRun', heading: 'Last run', label: 'last run' },
+    { sortBy: 'runs', heading: 'Runs', label: 'runs' },
+    { sortBy: 'state', heading: 'State', label: 'state' },
+];
+
+/**
+ * Props for the planned-message table card.
+ *
+ * @private function of PlannedMessageManagerClient
+ */
+type PlannedMessageManagerTableCardProps = {
+    readonly language: ServerLanguageCode;
+    readonly state: UsePlannedMessageManagerStateResult;
+};
+
+/**
+ * Renders the planned-message table with its loading, empty, and paging states.
+ *
+ * @private function of PlannedMessageManagerClient
+ */
+export function PlannedMessageManagerTableCard({ language, state }: PlannedMessageManagerTableCardProps) {
+    const firstVisibleIndex = Math.min((state.page - 1) * state.pageSize + 1, state.matchedCount);
+    const lastVisibleIndex = Math.min(state.page * state.pageSize, state.matchedCount);
+
+    return (
+        <Card className="hover:border-gray-200 hover:shadow-md">
+            <div className="flex items-center justify-between gap-4">
+                <div>
+                    <h2 className="text-lg font-medium text-gray-900">
+                        Planned messages ({state.matchedCount.toLocaleString()})
+                    </h2>
+                    <p className="mt-1 text-sm text-gray-500">
+                        Every wake-up an agent planned for itself or for one of its chats.
+                    </p>
+                </div>
+                {state.data.isRefreshing ? (
+                    <span className="text-xs font-medium text-blue-600">Refreshing…</span>
+                ) : null}
+            </div>
+
+            {state.data.isLoading ? (
+                <div className="py-10 text-center text-sm text-gray-500">Loading planned messages…</div>
+            ) : state.visiblePlannedMessages.length === 0 ? (
+                <div className="py-10 text-center text-sm text-gray-500">
+                    No planned message matches the selected filters.
+                </div>
+            ) : (
+                <div className="mt-4 overflow-x-auto">
+                    <table className="min-w-full divide-y divide-gray-200 text-xs">
+                        <thead className="bg-gray-50 text-gray-500">
+                            <tr>
+                                {PLANNED_MESSAGE_SORT_COLUMNS.map((column) => (
+                                    <AdminSortableTableHeaderCell
+                                        key={column.sortBy}
+                                        className="px-4 py-3 text-left font-semibold"
+                                        label={column.label}
+                                        sortBy={column.sortBy}
+                                        activeSortBy={state.sortBy}
+                                        sortOrder={state.sortOrder}
+                                        onSortChange={state.handleSortChange}
+                                    >
+                                        {column.heading}
+                                    </AdminSortableTableHeaderCell>
+                                ))}
+                                <th className="px-4 py-3 text-right font-semibold">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody className="divide-y divide-gray-200 bg-white">
+                            {state.visiblePlannedMessages.map((plannedMessage) => (
+                                <PlannedMessageManagerRow
+                                    key={plannedMessage.timeoutId}
+                                    plannedMessage={plannedMessage}
+                                    language={language}
+                                    busyTimeoutId={state.busyTimeoutId}
+                                    busyAction={state.busyAction}
+                                    onEdit={state.openPlannedMessageEditor}
+                                    onTogglePaused={state.togglePlannedMessagePaused}
+                                    onCancel={state.cancelPlannedMessage}
+                                />
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            )}
+
+            <div className="mt-4 flex flex-col items-center justify-between gap-3 border-t border-gray-100 pt-4 text-xs text-gray-600 md:flex-row">
+                <div>
+                    {state.matchedCount > 0 ? (
+                        <>
+                            Showing <span className="font-semibold">{firstVisibleIndex}</span> –{' '}
+                            <span className="font-semibold">{lastVisibleIndex}</span> of{' '}
+                            <span className="font-semibold">{state.matchedCount}</span> planned messages
+                        </>
+                    ) : (
+                        'No planned messages'
+                    )}
+                </div>
+
+                <div className="flex items-center gap-2">
+                    <button
+                        type="button"
+                        onClick={state.goToPreviousPage}
+                        disabled={state.isPreviousPageDisabled}
+                        className="rounded-md border border-gray-300 px-3 py-1.5 font-medium text-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
+                    >
+                        Previous
+                    </button>
+                    <span>
+                        Page <span className="font-semibold">{state.page}</span> of{' '}
+                        <span className="font-semibold">{state.totalPages}</span>
+                    </span>
+                    <button
+                        type="button"
+                        onClick={state.goToNextPage}
+                        disabled={state.isNextPageDisabled}
+                        className="rounded-md border border-gray-300 px-3 py-1.5 font-medium text-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
+                    >
+                        Next
+                    </button>
+                </div>
+            </div>
+        </Card>
+    );
+}

package/apps/agents-server/src/app/admin/planned-messages/page.tsx

@@ -0,0 +1,17 @@
+import { ForbiddenPage } from '../../../components/ForbiddenPage/ForbiddenPage';
+import { isUserAdmin } from '../../../utils/isUserAdmin';
+import { isUserGlobalAdmin } from '../../../utils/isUserGlobalAdmin';
+import { PlannedMessageManagerClient } from './PlannedMessageManagerClient';
+
+/**
+ * Admin page managing every planned message (durable chat timeout) of the server.
+ */
+export default async function AdminPlannedMessagesPage() {
+    const [isAdmin, isSuperAdmin] = await Promise.all([isUserAdmin(), isUserGlobalAdmin()]);
+
+    if (!isAdmin) {
+        return <ForbiddenPage />;
+    }
+
+    return <PlannedMessageManagerClient isSuperAdmin={isSuperAdmin} />;
+}