@data-club/ai-hub 0.0.1

package/src/components/DataClubAIHubAdmin/RotatingMessagesPage.tsx

@@ -0,0 +1,373 @@
+/**
+ * `<AdminRotatingMessagesPage />` — the Rotating messages sub-page mounted
+ * inside `<DataClubAIHubAdmin />`.
+ *
+ * Lists rotating starting messages with per-row `[Edit]`, `[Rotate now]`, and
+ * `[Archive]` / `[Unarchive]` actions, a top-right `[+ Create]`, and a
+ * `[☐ Show archived]` toggle. Each row exposes its `rmsg-…` reference id
+ * (copyable) — that's what an admin pastes / picks in an agent's Base
+ * conversation field. Archive-only, like Agents (no hard delete).
+ *
+ * Visible to `power_user`+ per §8.2; the shell does the gating.
+ *
+ * @see docs/server/rotating-messages.md
+ */
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+
+import type { AIHubAdminTexts } from "../../auth/texts.js";
+import type { AdminRotatingMessageView } from "../../client/AIHubClient.js";
+import { useAIHub } from "../../context/useAIHub.js";
+
+import {
+  RotatingMessageEditorModal,
+  type RotatingEditorMode,
+  type RotatingEditorSubmitBody,
+} from "./RotatingMessageEditorModal.js";
+
+/** Editor modal state. */
+type EditorState =
+  | { kind: "closed" }
+  | { kind: "create" }
+  | { kind: "edit"; row: AdminRotatingMessageView };
+
+/** Alphabetical by display_name. */
+function byDisplayName(a: AdminRotatingMessageView, b: AdminRotatingMessageView): number {
+  return a.display_name.localeCompare(b.display_name);
+}
+
+/** Human-readable one-line schedule summary. */
+function scheduleSummary(row: AdminRotatingMessageView, texts: AIHubAdminTexts): string {
+  if (row.schedule_kind === "every" && row.interval_seconds) {
+    const s = row.interval_seconds;
+    if (s % 86_400 === 0) return `${texts.rotatingScheduleEveryOption} ${s / 86_400} ${texts.rotatingIntervalUnitDays}`;
+    if (s % 3_600 === 0) return `${texts.rotatingScheduleEveryOption} ${s / 3_600} ${texts.rotatingIntervalUnitHours}`;
+    return `${texts.rotatingScheduleEveryOption} ${Math.round(s / 60)} min`;
+  }
+  if (row.schedule_kind === "daily" && row.daily_time) {
+    return `${texts.rotatingScheduleDailyOption} ${row.daily_time} UTC`;
+  }
+  if (row.schedule_kind === "cron" && row.cron_expression) {
+    return `cron: ${row.cron_expression}`;
+  }
+  return "—";
+}
+
+/** Status pill label. */
+function statusLabel(row: AdminRotatingMessageView, texts: AIHubAdminTexts): string {
+  if (row.is_archived) return texts.rotatingStatusArchived;
+  switch (row.last_status) {
+    case "ok":
+      return texts.rotatingStatusOk;
+    case "error":
+      return texts.rotatingStatusError;
+    default:
+      return texts.rotatingStatusPending;
+  }
+}
+
+/** Props for `<AdminRotatingMessagesPage />`. */
+export interface AdminRotatingMessagesPageProps {
+  /** Resolved admin texts. */
+  texts: AIHubAdminTexts;
+}
+
+/**
+ * Renders the Rotating messages sub-page.
+ *
+ * @param props - see {@link AdminRotatingMessagesPageProps}.
+ * @returns the rendered page.
+ */
+export function AdminRotatingMessagesPage(
+  props: AdminRotatingMessagesPageProps,
+): ReactNode {
+  const { client } = useAIHub();
+
+  const [rows, setRows] = useState<AdminRotatingMessageView[] | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [showArchived, setShowArchived] = useState(false);
+  const [editor, setEditor] = useState<EditorState>({ kind: "closed" });
+  const [rotatingNow, setRotatingNow] = useState<ReadonlySet<string>>(new Set());
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const fetched = await client.listAdminRotatingMessages();
+        if (!cancelled) {
+          setRows([...fetched].sort(byDisplayName));
+          setLoadError(null);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setLoadError(
+            err instanceof Error && err.message.length > 0
+              ? err.message
+              : props.texts.rotatingGenericError,
+          );
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, props.texts.rotatingGenericError]);
+
+  const visibleRows = useMemo(() => {
+    if (rows === null) return null;
+    return showArchived ? rows : rows.filter((r) => !r.is_archived);
+  }, [rows, showArchived]);
+
+  function upsert(row: AdminRotatingMessageView): void {
+    setRows((prev) => {
+      if (prev === null) return [row];
+      const exists = prev.some((r) => r.id === row.id);
+      const next = exists ? prev.map((r) => (r.id === row.id ? row : r)) : [...prev, row];
+      return next.sort(byDisplayName);
+    });
+  }
+
+  async function handleCreateSubmit(body: RotatingEditorSubmitBody): Promise<void> {
+    const created = await client.createAdminRotatingMessage({
+      displayName: body.displayName,
+      prompt: body.prompt,
+      lettaAgentId: body.lettaAgentId,
+      scheduleKind: body.scheduleKind,
+      intervalSeconds: body.intervalSeconds,
+      dailyTime: body.dailyTime,
+      cronExpression: body.cronExpression,
+    });
+    upsert(created);
+    setEditor({ kind: "closed" });
+  }
+
+  async function handleEditSubmit(
+    target: AdminRotatingMessageView,
+    body: RotatingEditorSubmitBody,
+  ): Promise<void> {
+    const updated = await client.patchAdminRotatingMessage(target.id, {
+      displayName: body.displayName,
+      prompt: body.prompt,
+      lettaAgentId: body.lettaAgentId,
+      scheduleKind: body.scheduleKind,
+      intervalSeconds: body.intervalSeconds,
+      dailyTime: body.dailyTime,
+      cronExpression: body.cronExpression,
+    });
+    upsert(updated);
+    setEditor({ kind: "closed" });
+  }
+
+  async function handleRotateNow(target: AdminRotatingMessageView): Promise<void> {
+    setRotatingNow((prev) => new Set(prev).add(target.id));
+    try {
+      const res = await client.rotateAdminRotatingMessageNow(target.id);
+      upsert(res.rotating_message);
+    } catch (err) {
+      setLoadError(
+        err instanceof Error && err.message.length > 0
+          ? err.message
+          : props.texts.rotatingGenericError,
+      );
+    } finally {
+      setRotatingNow((prev) => {
+        const next = new Set(prev);
+        next.delete(target.id);
+        return next;
+      });
+    }
+  }
+
+  async function handleArchiveToggle(
+    target: AdminRotatingMessageView,
+    archive: boolean,
+  ): Promise<void> {
+    if (archive) {
+      const prompt = props.texts.rotatingArchiveConfirmPrompt.replace("{name}", target.display_name);
+      // eslint-disable-next-line no-alert
+      const ok =
+        typeof window !== "undefined" && typeof window.confirm === "function"
+          ? window.confirm(prompt)
+          : true;
+      if (!ok) return;
+    }
+    const updated = await client.patchAdminRotatingMessage(target.id, { isArchived: archive });
+    upsert(updated);
+  }
+
+  function copyId(id: string): void {
+    if (typeof navigator !== "undefined" && navigator.clipboard) {
+      void navigator.clipboard.writeText(id);
+    }
+  }
+
+  return (
+    <div className="data-club-ai-hub-admin__rotating-page" data-testid="admin-rotating-page">
+      <header className="data-club-ai-hub-admin__page-header">
+        <h1 className="data-club-ai-hub-admin__page-heading" data-testid="admin-rotating-heading">
+          {props.texts.rotatingHeading}
+        </h1>
+        <div className="data-club-ai-hub-admin__page-header-actions">
+          <button
+            type="button"
+            className="data-club-ai-hub-admin__button data-club-ai-hub-admin__button--primary"
+            data-testid="admin-rotating-create"
+            onClick={() => setEditor({ kind: "create" })}
+          >
+            {props.texts.rotatingCreateButton}
+          </button>
+        </div>
+      </header>
+
+      {loadError !== null ? (
+        <div className="data-club-ai-hub-admin__error" data-testid="admin-rotating-error" role="alert">
+          {loadError}
+        </div>
+      ) : null}
+      {rows === null && loadError === null ? (
+        <p className="data-club-ai-hub-admin__loading" data-testid="admin-rotating-loading">
+          {props.texts.rotatingLoading}
+        </p>
+      ) : null}
+      {visibleRows !== null && visibleRows.length === 0 ? (
+        <p className="data-club-ai-hub-admin__empty" data-testid="admin-rotating-empty">
+          {props.texts.rotatingEmpty}
+        </p>
+      ) : null}
+
+      {visibleRows !== null && visibleRows.length > 0 ? (
+        <table className="data-club-ai-hub-admin__rotating-table" data-testid="admin-rotating-table">
+          <thead>
+            <tr>
+              <th>{props.texts.rotatingColumnName}</th>
+              <th>{props.texts.rotatingColumnAgent}</th>
+              <th>{props.texts.rotatingColumnSchedule}</th>
+              <th>{props.texts.rotatingColumnStatus}</th>
+              <th>{props.texts.rotatingColumnId}</th>
+              <th>{props.texts.rotatingColumnActions}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {visibleRows.map((r) => {
+              const isRotating = rotatingNow.has(r.id);
+              return (
+                <tr
+                  key={r.id}
+                  data-testid={`admin-rotating-row-${r.id}`}
+                  data-archived={r.is_archived ? "true" : "false"}
+                  className={
+                    r.is_archived
+                      ? "data-club-ai-hub-admin__rotating-row data-club-ai-hub-admin__rotating-row--archived"
+                      : "data-club-ai-hub-admin__rotating-row"
+                  }
+                >
+                  <td>{r.display_name}</td>
+                  <td>
+                    <code className="data-club-ai-hub-admin__mono">{r.letta_agent_id}</code>
+                  </td>
+                  <td>{scheduleSummary(r, props.texts)}</td>
+                  <td>
+                    <span
+                      className={
+                        r.last_status === "error" && !r.is_archived
+                          ? "data-club-ai-hub-admin__status-pill data-club-ai-hub-admin__status-pill--archived"
+                          : "data-club-ai-hub-admin__status-pill data-club-ai-hub-admin__status-pill--active"
+                      }
+                      title={r.last_error ?? undefined}
+                    >
+                      {statusLabel(r, props.texts)}
+                    </span>
+                  </td>
+                  <td>
+                    <button
+                      type="button"
+                      className="data-club-ai-hub-admin__mono data-club-ai-hub-admin__row-action"
+                      data-testid={`admin-rotating-row-${r.id}-copy-id`}
+                      onClick={() => copyId(r.id)}
+                      title={r.id}
+                    >
+                      {r.id}
+                    </button>
+                  </td>
+                  <td>
+                    <button
+                      type="button"
+                      className="data-club-ai-hub-admin__row-action"
+                      data-testid={`admin-rotating-row-${r.id}-edit`}
+                      onClick={() => setEditor({ kind: "edit", row: r })}
+                    >
+                      {props.texts.rotatingEditButton}
+                    </button>
+                    <button
+                      type="button"
+                      className="data-club-ai-hub-admin__row-action"
+                      data-testid={`admin-rotating-row-${r.id}-rotate-now`}
+                      onClick={() => void handleRotateNow(r)}
+                      disabled={isRotating}
+                    >
+                      {isRotating ? props.texts.rotatingRotateNowRunning : props.texts.rotatingRotateNowButton}
+                    </button>
+                    {r.is_archived ? (
+                      <button
+                        type="button"
+                        className="data-club-ai-hub-admin__row-action"
+                        data-testid={`admin-rotating-row-${r.id}-unarchive`}
+                        onClick={() => void handleArchiveToggle(r, false)}
+                      >
+                        {props.texts.rotatingUnarchiveButton}
+                      </button>
+                    ) : (
+                      <button
+                        type="button"
+                        className="data-club-ai-hub-admin__row-action"
+                        data-testid={`admin-rotating-row-${r.id}-archive`}
+                        onClick={() => void handleArchiveToggle(r, true)}
+                      >
+                        {props.texts.rotatingArchiveButton}
+                      </button>
+                    )}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      ) : null}
+
+      <label className="data-club-ai-hub-admin__filter-toggle">
+        <input
+          type="checkbox"
+          data-testid="admin-rotating-show-archived"
+          checked={showArchived}
+          onChange={(event) => setShowArchived(event.target.checked)}
+        />
+        <span>{props.texts.rotatingShowArchivedToggle}</span>
+      </label>
+
+      {editor.kind === "create" ? (
+        <RotatingMessageEditorModal
+          mode={"create" satisfies RotatingEditorMode}
+          texts={props.texts}
+          onSubmit={handleCreateSubmit}
+          onCancel={() => setEditor({ kind: "closed" })}
+        />
+      ) : null}
+      {editor.kind === "edit" ? (
+        <RotatingMessageEditorModal
+          mode={"edit" satisfies RotatingEditorMode}
+          initial={{
+            displayName: editor.row.display_name,
+            prompt: editor.row.prompt,
+            lettaAgentId: editor.row.letta_agent_id,
+            scheduleKind: editor.row.schedule_kind,
+            intervalSeconds: editor.row.interval_seconds,
+            dailyTime: editor.row.daily_time,
+            cronExpression: editor.row.cron_expression,
+          }}
+          texts={props.texts}
+          onSubmit={(body) => handleEditSubmit(editor.row, body)}
+          onCancel={() => setEditor({ kind: "closed" })}
+        />
+      ) : null}
+    </div>
+  );
+}