@promptbook/cli 0.114.0-14 → 0.114.0-18

package/apps/agents-server/next.config.ts

@@ -137,6 +137,12 @@ const nextConfig: NextConfig = {
                 tls: false,
                 dns: false,
                 child_process: false,
+                // Note: The startup hooks of `instrumentation.ts` only run in the Node.js runtime, but the
+                //       whole graph behind them is still compiled into the edge bundle as dead code. Agent
+                //       project runtimes hash and identify processes and serve built projects over plain
+                //       HTTP, so both modules have to be stubbed there just like the other Node.js-only ones.
+                crypto: false,
+                http: false,
                 // jsdom and related dependencies that require Node.js APIs
                 canvas: false,
                 // Standalone VPS SQLite backend is Node-only; edge middleware never runs it

package/apps/agents-server/src/app/admin/_components/AdminFilterFields.tsx

@@ -0,0 +1,84 @@
+import type { ReactNode } from 'react';
+
+/**
+ * One option of a shared admin filter select.
+ *
+ * @private shared admin UI type
+ */
+export type AdminFilterSelectOption = {
+    readonly label: string;
+    readonly value: string;
+};
+
+/**
+ * Props for the shared admin filter field wrapper.
+ *
+ * @private shared admin UI type
+ */
+type AdminFilterFieldProps = {
+    readonly children: ReactNode;
+    readonly htmlFor: string;
+    readonly label: string;
+};
+
+/**
+ * Props for the shared admin filter select.
+ *
+ * @private shared admin UI type
+ */
+type AdminFilterSelectFieldProps = {
+    readonly disabled?: boolean;
+    readonly id: string;
+    readonly label: string;
+    readonly onChange: (value: string) => void;
+    readonly options: ReadonlyArray<AdminFilterSelectOption>;
+    readonly value: string;
+};
+
+/**
+ * Shared label-and-control wrapper for compact admin filter controls.
+ *
+ * @private shared admin UI component
+ */
+export function AdminFilterField({ children, htmlFor, label }: AdminFilterFieldProps) {
+    return (
+        <div className="flex flex-col gap-1">
+            <label htmlFor={htmlFor} className="text-sm font-medium text-gray-700">
+                {label}
+            </label>
+            {children}
+        </div>
+    );
+}
+
+/**
+ * Shared select control used in admin filter panels.
+ *
+ * @private shared admin UI component
+ */
+export function AdminFilterSelectField({
+    disabled,
+    id,
+    label,
+    onChange,
+    options,
+    value,
+}: AdminFilterSelectFieldProps) {
+    return (
+        <AdminFilterField label={label} htmlFor={id}>
+            <select
+                id={id}
+                value={value}
+                disabled={disabled}
+                onChange={(event) => onChange(event.target.value)}
+                className="rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400"
+            >
+                {options.map((option) => (
+                    <option key={option.value} value={option.value}>
+                        {option.label}
+                    </option>
+                ))}
+            </select>
+        </AdminFilterField>
+    );
+}

package/apps/agents-server/src/app/admin/_components/AdminMetricCard.tsx

@@ -0,0 +1,36 @@
+/**
+ * Props for one admin summary metric card.
+ *
+ * @private shared admin UI type
+ */
+type AdminMetricCardProps = {
+    /**
+     * Small heading naming the measured thing.
+     */
+    readonly label: string;
+
+    /**
+     * Measured value, already formatted.
+     */
+    readonly value: string;
+
+    /**
+     * Short sentence saying what the value means.
+     */
+    readonly caption: string;
+};
+
+/**
+ * Small metric card used in the summary header of admin dashboards.
+ *
+ * @private shared admin UI component
+ */
+export function AdminMetricCard({ caption, label, value }: AdminMetricCardProps) {
+    return (
+        <div className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
+            <div className="text-xs font-semibold uppercase tracking-wide text-gray-400">{label}</div>
+            <div className="mt-2 text-3xl font-light text-gray-900">{value}</div>
+            <div className="mt-1 text-sm text-gray-500">{caption}</div>
+        </div>
+    );
+}

package/apps/agents-server/src/app/admin/_components/AdminTaskManagerTabs.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { AdminRouteTabs, type AdminRouteTabItem } from './AdminRouteTabs';
+
+/**
+ * Sections of the admin background-work tab group.
+ *
+ * @private shared admin UI type
+ */
+export type AdminTaskManagerTabId = 'server' | 'vps' | 'planned-messages';
+
+/**
+ * Task-manager scope: one server, or the whole VPS.
+ *
+ * @private shared admin UI type
+ */
+export type TaskManagerScope = Exclude<AdminTaskManagerTabId, 'planned-messages'>;
+
+/**
+ * Route of the per-server task manager.
+ *
+ * @private shared admin UI constant
+ */
+export const SERVER_TASK_MANAGER_PATH = '/admin/task-manager';
+
+/**
+ * Route of the VPS-wide (superadmin) task manager.
+ *
+ * @private shared admin UI constant
+ */
+export const VPS_TASK_MANAGER_PATH = '/superadmin/task-manager';
+
+/**
+ * Route of the planned-message manager.
+ *
+ * @private shared admin UI constant
+ */
+export const PLANNED_MESSAGE_MANAGER_PATH = '/admin/planned-messages';
+
+/**
+ * Route-backed sections of the admin background-work tab group.
+ *
+ * The task managers show what background work is running right now; the planned-message manager shows
+ * the plans that keep creating some of that work. They belong to one tab group because an
+ * administrator answering "why does this agent keep waking up?" needs to move between the two.
+ *
+ * @private constant of AdminTaskManagerTabs
+ */
+const ADMIN_TASK_MANAGER_TAB_ITEMS: ReadonlyArray<AdminRouteTabItem<AdminTaskManagerTabId>> = [
+    {
+        id: 'server',
+        href: SERVER_TASK_MANAGER_PATH,
+        label: 'This server',
+    },
+    {
+        id: 'vps',
+        href: VPS_TASK_MANAGER_PATH,
+        label: 'All servers (VPS)',
+    },
+    {
+        id: 'planned-messages',
+        href: PLANNED_MESSAGE_MANAGER_PATH,
+        label: 'Planned messages',
+    },
+];
+
+/**
+ * Props for the admin background-work tabs.
+ *
+ * @private shared admin UI type
+ */
+type AdminTaskManagerTabsProps = {
+    /**
+     * Section the current page belongs to.
+     */
+    readonly activeTabId: AdminTaskManagerTabId;
+
+    /**
+     * Whether the VPS-wide tab is available to the current user (superadmin only).
+     */
+    readonly isSuperAdmin: boolean;
+};
+
+/**
+ * Renders the tabs interlinking the task managers and the planned-message manager.
+ *
+ * The VPS-wide tab is superadmin-only, so an ordinary admin moves between the two per-server sections.
+ *
+ * @private shared admin UI component
+ */
+export function AdminTaskManagerTabs({ activeTabId, isSuperAdmin }: AdminTaskManagerTabsProps) {
+    const visibleTabItems = ADMIN_TASK_MANAGER_TAB_ITEMS.filter(
+        (tabItem) => tabItem.id !== 'vps' || isSuperAdmin,
+    );
+
+    return <AdminRouteTabs activeTabId={activeTabId} items={visibleTabItems} />;
+}

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