@data-club/ai-hub 0.0.1

package/src/components/DataClubAIHubAdmin/SessionsOverviewPage.tsx

@@ -0,0 +1,639 @@
+/**
+ * `<AdminSessionsOverviewPage />` — the read-only Sessions overview sub-page
+ * mounted inside `<DataClubAIHubAdmin />` ([07-admin-sessions-overview.md]).
+ *
+ * Two views:
+ *
+ * - **List view** — `[🔍 search]` + `Owner / Agent / Status` filters above a
+ *   paginated table of every session in the deployment. Each row has a
+ *   `[View]` button.
+ * - **Detail view** — read-only render of the session's messages using the
+ *   `<AdminMessagesReadOnly />` helper. No input area, no effort dropdown, no
+ *   send / stop. Reasoning + tool-call cards remain expandable.
+ *
+ * Pagination is cursor-based — the server returns `next_cursor` (or `null`
+ * on the last page). We keep the chain in `cursorStack` so the user can
+ * navigate forward (push) and backward (pop) without re-fetching from the
+ * top.
+ *
+ * Visible to `power_user`+ per §8.2; the parent shell gates on role.
+ *
+ * @see SPECIFICATIONS.md §6.3.4 / §8.3
+ * @see ui-sketches/07-admin-sessions-overview.md
+ */
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+
+import type { AIHubAdminTexts } from "../../auth/texts.js";
+import { AIHubRequestError } from "../../client/AIHubClient.js";
+import type {
+  AdminAgentView,
+  AdminSessionView,
+  AdminUserView,
+  ListAdminSessionsResponse,
+} from "../../client/AIHubClient.js";
+import { useAIHub } from "../../context/useAIHub.js";
+import { useAIHubAuth } from "../../context/useAIHubAuth.js";
+import type { AIHubMessage } from "../../types.js";
+import { ReasoningView } from "../ReasoningView/index.js";
+import { ToolCallView, type ToolCallStatus } from "../ToolCallView/index.js";
+
+/** What the user is looking at — list or one session's messages. */
+type View =
+  | { kind: "list" }
+  | { kind: "detail"; session: AdminSessionView };
+
+/** Server-accepted status filter values. */
+type StatusFilter = "active" | "archived" | "all";
+
+/** Page size — matches the spec's default of 50. */
+const PAGE_SIZE = 50;
+
+/** Format an ISO date as a short relative "x ago" string. */
+function formatLastMessage(iso: string): string {
+  const date = Date.parse(iso);
+  if (Number.isNaN(date)) return iso;
+  const diffMs = Date.now() - date;
+  if (diffMs < 60_000) return "just now";
+  const minutes = Math.floor(diffMs / 60_000);
+  if (minutes < 60) return `${minutes} min ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d ago`;
+  return new Date(date).toISOString().slice(0, 10);
+}
+
+/** Props for `<AdminSessionsOverviewPage />`. */
+export interface AdminSessionsOverviewPageProps {
+  /** Resolved admin texts. */
+  texts: AIHubAdminTexts;
+}
+
+/**
+ * Renders the sessions-overview sub-page.
+ *
+ * @param props - see {@link AdminSessionsOverviewPageProps}.
+ * @returns the rendered page.
+ */
+export function AdminSessionsOverviewPage(
+  props: AdminSessionsOverviewPageProps,
+): ReactNode {
+  const { client } = useAIHub();
+
+  const [view, setView] = useState<View>({ kind: "list" });
+
+  // List-view state.
+  const [page, setPage] = useState<ListAdminSessionsResponse | null>(null);
+  const [pageError, setPageError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  // Cursor for the page currently being viewed; null = page 1.
+  const [activeCursor, setActiveCursor] = useState<string | null>(null);
+  // Stack of previous cursors for back navigation. Entry at index i is the
+  // cursor that loaded page i+2 (we never push the page-1 cursor since
+  // that's just null).
+  const [cursorStack, setCursorStack] = useState<string[]>([]);
+
+  // Filters — server params.
+  const [search, setSearch] = useState("");
+  const [ownerId, setOwnerId] = useState<string>("");
+  const [agentId, setAgentId] = useState<string>("");
+  const [status, setStatus] = useState<StatusFilter>("active");
+
+  // Dropdown data for the filters.
+  const [owners, setOwners] = useState<AdminUserView[]>([]);
+  const [agents, setAgents] = useState<AdminAgentView[]>([]);
+
+  // Fetch the dropdown data once on mount. Owners can come back as 403 for
+  // power_user (they can't list users), in which case we render the dropdown
+  // disabled with "all users" only.
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const [u, a] = await Promise.allSettled([
+          client.listAdminUsers(),
+          client.listAdminAgents(),
+        ]);
+        if (cancelled) return;
+        if (u.status === "fulfilled") setOwners(u.value);
+        if (a.status === "fulfilled") setAgents(a.value);
+      } catch {
+        /* swallowed — the dropdowns just stay limited */
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [client]);
+
+  // Fetch the current page whenever the cursor or filters change. We debounce
+  // the search input via a separate effect that bumps a re-load token.
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setPageError(null);
+    void (async () => {
+      try {
+        const options: Parameters<typeof client.listAdminSessions>[0] = {
+          limit: PAGE_SIZE,
+          status,
+        };
+        if (activeCursor !== null) options.cursor = activeCursor;
+        if (ownerId !== "") options.ownerId = ownerId;
+        if (agentId !== "") options.agentId = agentId;
+        if (search.trim().length > 0) options.search = search.trim();
+        const result = await client.listAdminSessions(options);
+        if (!cancelled) {
+          setPage(result);
+          setLoading(false);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setPageError(
+            err instanceof Error && err.message.length > 0
+              ? err.message
+              : props.texts.sessionsOverviewGenericError,
+          );
+          setLoading(false);
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, activeCursor, ownerId, agentId, status, search]);
+
+  const pageNumber = cursorStack.length + 1;
+  const hasNext = page?.nextCursor !== null && page?.nextCursor !== undefined;
+  const hasPrev = cursorStack.length > 0;
+
+  function applyFilterAndReset(): void {
+    setActiveCursor(null);
+    setCursorStack([]);
+  }
+
+  function goNext(): void {
+    if (page?.nextCursor === null || page?.nextCursor === undefined) return;
+    setCursorStack((prev) =>
+      activeCursor === null ? prev : [...prev, activeCursor],
+    );
+    setActiveCursor(page.nextCursor);
+  }
+
+  function goPrev(): void {
+    setCursorStack((prev) => {
+      if (prev.length === 0) {
+        setActiveCursor(null);
+        return prev;
+      }
+      const next = [...prev];
+      next.pop();
+      setActiveCursor(next.length === 0 ? null : (next[next.length - 1] ?? null));
+      return next;
+    });
+  }
+
+  if (view.kind === "detail") {
+    return (
+      <AdminSessionDetail
+        session={view.session}
+        texts={props.texts}
+        onBack={() => setView({ kind: "list" })}
+      />
+    );
+  }
+
+  return (
+    <div
+      className="data-club-ai-hub-admin__sessions-page"
+      data-testid="admin-sessions-page"
+    >
+      <header className="data-club-ai-hub-admin__page-header">
+        <h1
+          className="data-club-ai-hub-admin__page-heading"
+          data-testid="admin-sessions-heading"
+        >
+          {props.texts.sessionsOverviewHeading}
+        </h1>
+        <input
+          type="search"
+          className="data-club-ai-hub-admin__search"
+          data-testid="admin-sessions-search"
+          placeholder={props.texts.sessionsOverviewSearchPlaceholder}
+          value={search}
+          onChange={(event) => {
+            setSearch(event.target.value);
+            applyFilterAndReset();
+          }}
+        />
+      </header>
+      <div
+        className="data-club-ai-hub-admin__filters"
+        data-testid="admin-sessions-filters"
+      >
+        <label className="data-club-ai-hub-admin__filter">
+          <span>{props.texts.sessionsOverviewOwnerFilterLabel}</span>
+          <select
+            data-testid="admin-sessions-filter-owner"
+            value={ownerId}
+            disabled={owners.length === 0}
+            onChange={(event) => {
+              setOwnerId(event.target.value);
+              applyFilterAndReset();
+            }}
+          >
+            <option value="">{props.texts.sessionsOverviewOwnerFilterAll}</option>
+            {owners.map((u) => (
+              <option key={u.id} value={u.id}>
+                {u.username}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="data-club-ai-hub-admin__filter">
+          <span>{props.texts.sessionsOverviewAgentFilterLabel}</span>
+          <select
+            data-testid="admin-sessions-filter-agent"
+            value={agentId}
+            disabled={agents.length === 0}
+            onChange={(event) => {
+              setAgentId(event.target.value);
+              applyFilterAndReset();
+            }}
+          >
+            <option value="">{props.texts.sessionsOverviewAgentFilterAll}</option>
+            {agents.map((a) => (
+              <option key={a.id} value={a.id}>
+                {a.display_name}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="data-club-ai-hub-admin__filter">
+          <span>{props.texts.sessionsOverviewStatusFilterLabel}</span>
+          <select
+            data-testid="admin-sessions-filter-status"
+            value={status}
+            onChange={(event) => {
+              setStatus(event.target.value as StatusFilter);
+              applyFilterAndReset();
+            }}
+          >
+            <option value="active">{props.texts.sessionsOverviewStatusActive}</option>
+            <option value="archived">
+              {props.texts.sessionsOverviewStatusArchived}
+            </option>
+            <option value="all">{props.texts.sessionsOverviewStatusAll}</option>
+          </select>
+        </label>
+      </div>
+      {pageError !== null ? (
+        <div
+          className="data-club-ai-hub-admin__error"
+          role="alert"
+          data-testid="admin-sessions-error"
+        >
+          {pageError}
+        </div>
+      ) : null}
+      {loading ? (
+        <p
+          className="data-club-ai-hub-admin__loading"
+          data-testid="admin-sessions-loading"
+        >
+          {props.texts.sessionsOverviewLoading}
+        </p>
+      ) : null}
+      {!loading && pageError === null && (page?.sessions.length ?? 0) === 0 ? (
+        <p
+          className="data-club-ai-hub-admin__empty"
+          data-testid="admin-sessions-empty"
+        >
+          {props.texts.sessionsOverviewEmpty}
+        </p>
+      ) : null}
+      {!loading && page !== null && page.sessions.length > 0 ? (
+        <>
+          <table
+            className="data-club-ai-hub-admin__sessions-table"
+            data-testid="admin-sessions-table"
+          >
+            <thead>
+              <tr>
+                <th>{props.texts.sessionsOverviewColumnTitle}</th>
+                <th>{props.texts.sessionsOverviewColumnOwner}</th>
+                <th>{props.texts.sessionsOverviewColumnAgent}</th>
+                <th>{props.texts.sessionsOverviewColumnLastMessage}</th>
+                <th>{props.texts.sessionsOverviewColumnActions}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {page.sessions.map((s) => (
+                <tr
+                  key={s.id}
+                  data-testid={`admin-session-row-${s.id}`}
+                  data-archived={s.is_archived ? "true" : "false"}
+                >
+                  <td>{s.title}</td>
+                  <td>{s.owner_username}</td>
+                  <td>{s.agent_display_name}</td>
+                  <td>{formatLastMessage(s.updated_at)}</td>
+                  <td>
+                    <button
+                      type="button"
+                      className="data-club-ai-hub-admin__row-action"
+                      data-testid={`admin-session-row-${s.id}-view`}
+                      onClick={() => setView({ kind: "detail", session: s })}
+                    >
+                      {props.texts.sessionsOverviewViewButton}
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          <div
+            className="data-club-ai-hub-admin__pagination"
+            data-testid="admin-sessions-pagination"
+          >
+            <button
+              type="button"
+              className="data-club-ai-hub-admin__button"
+              data-testid="admin-sessions-prev"
+              onClick={goPrev}
+              disabled={!hasPrev}
+            >
+              {props.texts.sessionsOverviewPrevPage}
+            </button>
+            <span
+              className="data-club-ai-hub-admin__page-number"
+              data-testid="admin-sessions-page-number"
+            >
+              {props.texts.sessionsOverviewPageNumber.replace(
+                "{n}",
+                String(pageNumber),
+              )}
+            </span>
+            <button
+              type="button"
+              className="data-club-ai-hub-admin__button"
+              data-testid="admin-sessions-next"
+              onClick={goNext}
+              disabled={!hasNext}
+            >
+              {props.texts.sessionsOverviewNextPage}
+            </button>
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}
+
+/** Props for the detail sub-view. */
+interface AdminSessionDetailProps {
+  session: AdminSessionView;
+  texts: AIHubAdminTexts;
+  onBack: () => void;
+}
+
+/**
+ * Renders the read-only session detail view. Fetches messages on mount,
+ * mounts `<MessageBubble />`-equivalent rendering without an input area.
+ *
+ * The bubble rendering is intentionally minimal in this admin context —
+ * no streaming dots, no send/stop, no retry. We don't reuse `<MessageList />`
+ * because it pulls data from `useAIHub()` (the active session); admin-side
+ * detail browses arbitrary sessions outside the chat context.
+ */
+function AdminSessionDetail(props: AdminSessionDetailProps): ReactNode {
+  const { client } = useAIHub();
+  const auth = useAIHubAuth();
+  const isSuperAdmin = auth.user?.role === "super_admin";
+  const { session, texts } = props;
+  const [messages, setMessages] = useState<AIHubMessage[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  // Step-12.5 — local mirror of the sandbox state so the footer + button
+  // can update without a refetch after a successful purge.
+  const [hasSandbox, setHasSandbox] = useState(session.has_sandbox);
+  const [purging, setPurging] = useState(false);
+  const [purgeError, setPurgeError] = useState<string | null>(null);
+  const [purgeFlash, setPurgeFlash] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const rows = await client.getAdminSessionMessages(session.id);
+        if (!cancelled) {
+          setMessages(rows);
+          setError(null);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(
+            err instanceof Error && err.message.length > 0
+              ? err.message
+              : texts.sessionsOverviewDetailGenericError,
+          );
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, session.id, texts.sessionsOverviewDetailGenericError]);
+
+  async function handlePurgeSandbox(): Promise<void> {
+    // Native window.confirm — consistent with the archive-confirm pattern
+    // used elsewhere in the admin UI ([06-admin-agents.md]).
+    // eslint-disable-next-line no-alert
+    const ok =
+      typeof window !== "undefined" && typeof window.confirm === "function"
+        ? window.confirm(texts.sessionsOverviewPurgeSandboxConfirmPrompt)
+        : true;
+    if (!ok) return;
+    setPurging(true);
+    setPurgeError(null);
+    setPurgeFlash(null);
+    try {
+      await client.purgeAdminSessionSandbox(session.id);
+      setHasSandbox(false);
+      setPurgeFlash(texts.sessionsOverviewPurgeSandboxSuccessFlash);
+    } catch (err) {
+      if (err instanceof AIHubRequestError && err.code === "turn_running") {
+        setPurgeError(texts.sessionsOverviewPurgeSandboxTurnRunningError);
+      } else {
+        setPurgeError(
+          err instanceof Error && err.message.length > 0
+            ? err.message
+            : texts.sessionsOverviewPurgeSandboxGenericError,
+        );
+      }
+    } finally {
+      setPurging(false);
+    }
+  }
+
+  const heading = useMemo(
+    () =>
+      texts.sessionsOverviewDetailHeading
+        .replace("{title}", session.title)
+        .replace("{owner}", session.owner_username)
+        .replace("{agent}", session.agent_display_name),
+    [
+      texts.sessionsOverviewDetailHeading,
+      session.title,
+      session.owner_username,
+      session.agent_display_name,
+    ],
+  );
+
+  return (
+    <div
+      className="data-club-ai-hub-admin__session-detail"
+      data-testid="admin-session-detail"
+    >
+      <header
+        className="data-club-ai-hub-admin__detail-header"
+        data-testid="admin-session-detail-header"
+      >
+        <button
+          type="button"
+          className="data-club-ai-hub-admin__back-link"
+          data-testid="admin-session-detail-back"
+          onClick={props.onBack}
+        >
+          {texts.sessionsOverviewBackLink}
+        </button>
+        <h1
+          className="data-club-ai-hub-admin__detail-heading"
+          data-testid="admin-session-detail-heading"
+        >
+          {heading}
+        </h1>
+      </header>
+      {error !== null ? (
+        <div
+          className="data-club-ai-hub-admin__error"
+          role="alert"
+          data-testid="admin-session-detail-error"
+        >
+          {error}
+        </div>
+      ) : null}
+      {messages === null && error === null ? (
+        <p
+          className="data-club-ai-hub-admin__loading"
+          data-testid="admin-session-detail-loading"
+        >
+          {texts.sessionsOverviewDetailLoading}
+        </p>
+      ) : null}
+      {messages !== null && messages.length === 0 ? (
+        <p
+          className="data-club-ai-hub-admin__empty"
+          data-testid="admin-session-detail-empty"
+        >
+          {texts.sessionsOverviewDetailEmpty}
+        </p>
+      ) : null}
+      {messages !== null && messages.length > 0 ? (
+        <ol
+          className="data-club-ai-hub-admin__readonly-messages"
+          data-testid="admin-session-detail-messages"
+        >
+          {messages.map((m) => (
+            <li
+              key={m.id}
+              className={`data-club-ai-hub-admin__readonly-bubble data-club-ai-hub-admin__readonly-bubble--${m.role}`}
+              data-testid={`admin-session-detail-message-${m.id}`}
+              data-role={m.role}
+            >
+              <div className="data-club-ai-hub-admin__readonly-meta">
+                <strong>{m.role}</strong>
+                <span>{formatLastMessage(m.created_at)}</span>
+              </div>
+              <div className="data-club-ai-hub-admin__readonly-content">
+                {m.content}
+              </div>
+              {m.reasoning !== null && m.reasoning !== undefined && m.reasoning.length > 0 ? (
+                <ReasoningView content={m.reasoning} />
+              ) : null}
+              {m.tool_calls && m.tool_calls.length > 0
+                ? m.tool_calls.map((tc) => {
+                    const statusValue: ToolCallStatus =
+                      tc.status === "error" ? "error" : "done";
+                    const props2: import("../ToolCallView/index.js").ToolCallViewProps =
+                      {
+                        toolName: tc.tool_name,
+                        status: statusValue,
+                        input: tc.input,
+                      };
+                    if (tc.output !== undefined && tc.output !== null) {
+                      props2.output = tc.output;
+                    }
+                    if (tc.error !== undefined && tc.error !== null) {
+                      props2.error = tc.error;
+                    }
+                    return <ToolCallView key={tc.tool_call_id} {...props2} />;
+                  })
+                : null}
+            </li>
+          ))}
+        </ol>
+      ) : null}
+
+      {isSuperAdmin ? (
+        <footer
+          className="data-club-ai-hub-admin__detail-footer"
+          data-testid="admin-session-detail-footer"
+        >
+          <div
+            className="data-club-ai-hub-admin__detail-sandbox"
+            data-testid="admin-session-detail-sandbox"
+          >
+            <strong>{texts.sessionsOverviewDetailSandboxLabel}</strong>{" "}
+            <span data-testid="admin-session-detail-sandbox-state">
+              {hasSandbox
+                ? texts.sessionsOverviewDetailSandboxPresent
+                : texts.sessionsOverviewDetailSandboxAbsent}
+            </span>
+            {hasSandbox ? (
+              <button
+                type="button"
+                className="data-club-ai-hub-admin__button"
+                data-testid="admin-session-detail-purge-sandbox"
+                onClick={() => {
+                  void handlePurgeSandbox();
+                }}
+                disabled={purging}
+              >
+                {purging
+                  ? texts.sessionsOverviewPurgeSandboxConfirming
+                  : texts.sessionsOverviewPurgeSandboxButton}
+              </button>
+            ) : null}
+          </div>
+          {purgeError !== null ? (
+            <div
+              className="data-club-ai-hub-admin__error"
+              role="alert"
+              data-testid="admin-session-detail-purge-error"
+            >
+              {purgeError}
+            </div>
+          ) : null}
+          {purgeFlash !== null ? (
+            <div
+              className="data-club-ai-hub-admin__flash"
+              data-testid="admin-session-detail-purge-flash"
+            >
+              {purgeFlash}
+            </div>
+          ) : null}
+        </footer>
+      ) : null}
+    </div>
+  );
+}