@promptbook/cli 0.114.0-3 → 0.114.0-31

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

@@ -0,0 +1,103 @@
+'use client';
+
+import { Card } from '../../../components/Homepage/Card';
+import { useServerLanguage } from '../../../components/ServerLanguage/ServerLanguageProvider';
+import { AdminTaskManagerTabs, PLANNED_MESSAGE_MANAGER_PATH } from '../_components/AdminTaskManagerTabs';
+import { PlannedMessageManagerEditDialog } from './PlannedMessageManagerEditDialog';
+import { PlannedMessageManagerFiltersCard } from './PlannedMessageManagerFiltersCard';
+import { formatPlannedMessageDateTime } from './plannedMessageManagerPresentation';
+import { PlannedMessageManagerSummaryMetrics } from './PlannedMessageManagerSummaryMetrics';
+import { PlannedMessageManagerTableCard } from './PlannedMessageManagerTableCard';
+import { usePlannedMessageManagerState } from './usePlannedMessageManagerState';
+
+/**
+ * Props for the admin planned-message manager client.
+ *
+ * @private route component of AdminPlannedMessagesPage
+ */
+type PlannedMessageManagerClientProps = {
+    /**
+     * Whether the current user may also reach the VPS-wide task manager.
+     */
+    readonly isSuperAdmin: boolean;
+};
+
+/**
+ * Admin manager of every planned message (durable chat timeout) on this server.
+ *
+ * @private route component of AdminPlannedMessagesPage
+ */
+export function PlannedMessageManagerClient({ isSuperAdmin }: PlannedMessageManagerClientProps) {
+    const { language } = useServerLanguage();
+    const state = usePlannedMessageManagerState();
+    const lastRefreshedLabel = state.data.generatedAt
+        ? `Last refreshed ${formatPlannedMessageDateTime(state.data.generatedAt, language)}`
+        : 'Waiting for first refresh…';
+
+    return (
+        <div className="container mx-auto space-y-6 px-4 py-8">
+            <div className="mt-20">
+                <AdminTaskManagerTabs activeTabId="planned-messages" isSuperAdmin={isSuperAdmin} />
+            </div>
+
+            <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
+                <div>
+                    <h1 className="text-3xl font-light text-gray-900">Planned messages</h1>
+                    <p className="mt-1 max-w-3xl text-sm text-gray-500">
+                        Admin-only view of every timeout an agent planned for itself or for one of its chats — the
+                        wake-ups still ahead, the ones starting later, the ones firing right now, and the ones that were
+                        cancelled or whose plan is over. Each of them can be re-planned, held back, or cancelled here.
+                    </p>
+                </div>
+                <div className="flex flex-wrap items-center gap-2 text-xs text-gray-500">
+                    <span className="rounded-full border border-gray-200 bg-white px-3 py-1.5">
+                        Route: <span className="font-mono text-gray-700">{PLANNED_MESSAGE_MANAGER_PATH}</span>
+                    </span>
+                    <button
+                        type="button"
+                        onClick={state.data.refreshNow}
+                        disabled={state.data.isRefreshing}
+                        className="rounded-full border border-blue-200 bg-blue-50 px-3 py-1.5 font-semibold text-blue-700 disabled:cursor-not-allowed disabled:opacity-60"
+                    >
+                        {state.data.isRefreshing ? 'Refreshing…' : 'Refresh now'}
+                    </button>
+                </div>
+            </div>
+
+            <PlannedMessageManagerSummaryMetrics
+                counters={state.counters}
+                isLoading={state.data.isLoading}
+                language={language}
+            />
+
+            <PlannedMessageManagerFiltersCard state={state} lastRefreshedLabel={lastRefreshedLabel} />
+
+            {state.data.error !== null && (
+                <Card className="border-red-200 bg-red-50 hover:border-red-200 hover:shadow-md">
+                    <p className="text-sm text-red-700">{state.data.error}</p>
+                </Card>
+            )}
+
+            {state.data.hasMore && (
+                <Card className="border-amber-200 bg-amber-50 hover:border-amber-200 hover:shadow-md">
+                    <p className="text-sm text-amber-800">
+                        This server has more planned messages than one listing shows. The most recently changed ones are
+                        listed — narrow the filters to find an older one.
+                    </p>
+                </Card>
+            )}
+
+            <PlannedMessageManagerTableCard language={language} state={state} />
+
+            {state.editedPlannedMessage !== null && (
+                <PlannedMessageManagerEditDialog
+                    key={state.editedPlannedMessage.timeoutId}
+                    plannedMessage={state.editedPlannedMessage}
+                    isSaving={state.busyAction === 'edit'}
+                    onClose={state.closePlannedMessageEditor}
+                    onSubmit={state.submitPlannedMessageEdit}
+                />
+            )}
+        </div>
+    );
+}

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

@@ -0,0 +1,232 @@
+'use client';
+
+import { Dialog } from '@/src/components/Portal/Dialog';
+import type { PlannedMessageRecurrenceKind } from '@/src/utils/plannedMessageManager/resolvePlannedMessageRecurrenceKind';
+import type { PlannedMessageManagerRecord } from '@/src/utils/plannedMessagesAdmin';
+import { X } from 'lucide-react';
+import { useState } from 'react';
+import {
+    createPlannedMessageEditForm,
+    type PlannedMessageEditForm,
+    type PlannedMessageIntervalUnit,
+} from './plannedMessageEditForm';
+
+/**
+ * Frequency choices offered by the editor, with what each of them needs.
+ *
+ * @private function of PlannedMessageManagerEditDialog
+ */
+const PLANNED_MESSAGE_RECURRENCE_CHOICES: ReadonlyArray<{
+    readonly id: PlannedMessageRecurrenceKind;
+    readonly label: string;
+    readonly description: string;
+}> = [
+    { id: 'INTERVAL', label: 'Every', description: 'Repeats at a fixed interval' },
+    { id: 'CRON', label: 'On a cron', description: 'Repeats on a five-field cron expression' },
+    { id: 'ONCE', label: 'Once', description: 'Wakes the agent a single time, at the starting date' },
+];
+
+/**
+ * Interval units offered by the editor.
+ *
+ * @private function of PlannedMessageManagerEditDialog
+ */
+const PLANNED_MESSAGE_INTERVAL_UNITS: ReadonlyArray<PlannedMessageIntervalUnit> = ['minutes', 'hours', 'days'];
+
+/**
+ * Shared classes of the editor text inputs.
+ *
+ * @private function of PlannedMessageManagerEditDialog
+ */
+const PLANNED_MESSAGE_EDITOR_INPUT_CLASS_NAME =
+    'w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500';
+
+/**
+ * Props for the planned-message editor.
+ *
+ * @private function of PlannedMessageManagerClient
+ */
+type PlannedMessageManagerEditDialogProps = {
+    readonly plannedMessage: PlannedMessageManagerRecord;
+    readonly isSaving: boolean;
+    readonly onClose: () => void;
+    readonly onSubmit: (form: PlannedMessageEditForm) => Promise<boolean>;
+};
+
+/**
+ * Dialog changing the whole plan of one planned message.
+ *
+ * The form always describes the complete plan, so emptying a bound really removes it. What the plan is
+ * allowed to be is decided by the server, which holds an administrator to the very same rules an agent
+ * planning for itself is held to.
+ *
+ * @private function of PlannedMessageManagerClient
+ */
+export function PlannedMessageManagerEditDialog({
+    plannedMessage,
+    isSaving,
+    onClose,
+    onSubmit,
+}: PlannedMessageManagerEditDialogProps) {
+    const [form, setForm] = useState<PlannedMessageEditForm>(() => createPlannedMessageEditForm(plannedMessage));
+
+    /**
+     * Applies one field change to the edited plan.
+     */
+    function updateForm(change: Partial<PlannedMessageEditForm>): void {
+        setForm((currentForm) => ({ ...currentForm, ...change }));
+    }
+
+    return (
+        <Dialog onClose={onClose} className="w-[min(44rem,92vw)] p-6" ariaLabel="Edit planned message">
+            <div className="flex items-start justify-between gap-4">
+                <div>
+                    <h2 className="text-lg font-medium text-gray-900">Edit planned message</h2>
+                    <p className="mt-1 text-sm text-gray-500">
+                        Of {plannedMessage.agentName || plannedMessage.agentPermanentId}
+                    </p>
+                </div>
+                <button
+                    type="button"
+                    onClick={onClose}
+                    className="rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
+                    title="Close"
+                    aria-label="Close"
+                >
+                    <X className="h-4 w-4" />
+                </button>
+            </div>
+
+            <form
+                className="mt-4 flex flex-col gap-4"
+                onSubmit={(event) => {
+                    event.preventDefault();
+                    void onSubmit(form);
+                }}
+            >
+                <label className="flex flex-col gap-1">
+                    <span className="text-sm font-medium text-gray-700">Message</span>
+                    <textarea
+                        value={form.message}
+                        rows={3}
+                        onChange={(event) => updateForm({ message: event.target.value })}
+                        className={PLANNED_MESSAGE_EDITOR_INPUT_CLASS_NAME}
+                        placeholder="What the agent is woken up to do"
+                    />
+                </label>
+
+                <fieldset className="flex flex-col gap-2">
+                    <legend className="text-sm font-medium text-gray-700">Frequency</legend>
+                    {PLANNED_MESSAGE_RECURRENCE_CHOICES.map((choice) => (
+                        <label key={choice.id} className="flex flex-wrap items-center gap-2 text-sm text-gray-700">
+                            <input
+                                type="radio"
+                                name="planned-message-recurrence-kind"
+                                checked={form.recurrenceKind === choice.id}
+                                onChange={() => updateForm({ recurrenceKind: choice.id })}
+                            />
+                            <span className="font-medium">{choice.label}</span>
+
+                            {choice.id === 'INTERVAL' && (
+                                <>
+                                    <input
+                                        type="number"
+                                        min={1}
+                                        value={form.intervalValue}
+                                        onChange={(event) => updateForm({ intervalValue: event.target.value })}
+                                        disabled={form.recurrenceKind !== 'INTERVAL'}
+                                        className="w-24 rounded-md border border-gray-300 px-2 py-1 text-sm disabled:bg-gray-100"
+                                    />
+                                    <select
+                                        value={form.intervalUnit}
+                                        onChange={(event) =>
+                                            updateForm({
+                                                intervalUnit: event.target.value as PlannedMessageIntervalUnit,
+                                            })
+                                        }
+                                        disabled={form.recurrenceKind !== 'INTERVAL'}
+                                        className="rounded-md border border-gray-300 px-2 py-1 text-sm disabled:bg-gray-100"
+                                    >
+                                        {PLANNED_MESSAGE_INTERVAL_UNITS.map((unit) => (
+                                            <option key={unit} value={unit}>
+                                                {unit}
+                                            </option>
+                                        ))}
+                                    </select>
+                                </>
+                            )}
+
+                            {choice.id === 'CRON' && (
+                                <input
+                                    type="text"
+                                    value={form.cronExpression}
+                                    onChange={(event) => updateForm({ cronExpression: event.target.value })}
+                                    disabled={form.recurrenceKind !== 'CRON'}
+                                    placeholder="0 9 * * 1-5"
+                                    className="w-44 rounded-md border border-gray-300 px-2 py-1 font-mono text-sm disabled:bg-gray-100"
+                                />
+                            )}
+
+                            <span className="text-xs text-gray-500">{choice.description}</span>
+                        </label>
+                    ))}
+                </fieldset>
+
+                <div className="grid gap-4 sm:grid-cols-3">
+                    <label className="flex flex-col gap-1">
+                        <span className="text-sm font-medium text-gray-700">Starts at</span>
+                        <input
+                            type="datetime-local"
+                            value={form.startsAtLocal}
+                            onChange={(event) => updateForm({ startsAtLocal: event.target.value })}
+                            className={PLANNED_MESSAGE_EDITOR_INPUT_CLASS_NAME}
+                        />
+                        <span className="text-xs text-gray-500">Empty means it may wake the agent right away.</span>
+                    </label>
+
+                    <label className="flex flex-col gap-1">
+                        <span className="text-sm font-medium text-gray-700">Ends at</span>
+                        <input
+                            type="datetime-local"
+                            value={form.endsAtLocal}
+                            onChange={(event) => updateForm({ endsAtLocal: event.target.value })}
+                            className={PLANNED_MESSAGE_EDITOR_INPUT_CLASS_NAME}
+                        />
+                        <span className="text-xs text-gray-500">Empty means it has no ending date.</span>
+                    </label>
+
+                    <label className="flex flex-col gap-1">
+                        <span className="text-sm font-medium text-gray-700">Total runs</span>
+                        <input
+                            type="number"
+                            min={1}
+                            value={form.maxRunCount}
+                            onChange={(event) => updateForm({ maxRunCount: event.target.value })}
+                            className={PLANNED_MESSAGE_EDITOR_INPUT_CLASS_NAME}
+                        />
+                        <span className="text-xs text-gray-500">
+                            Empty means it repeats until cancelled. Already done: {plannedMessage.runCount}.
+                        </span>
+                    </label>
+                </div>
+
+                <div className="mt-2 flex items-center justify-end gap-2">
+                    <button
+                        type="button"
+                        onClick={onClose}
+                        className="rounded-md border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50"
+                    >
+                        Close
+                    </button>
+                    <button
+                        type="submit"
+                        disabled={isSaving}
+                        className="rounded-md border border-blue-200 bg-blue-50 px-3 py-1.5 text-sm font-semibold text-blue-700 hover:bg-blue-100 disabled:cursor-not-allowed disabled:opacity-60"
+                    >
+                        {isSaving ? 'Saving…' : 'Save plan'}
+                    </button>
+                </div>
+            </form>
+        </Dialog>
+    );
+}

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>
+    );
+}