@data-club/ai-hub 0.0.1

package/src/components/DataClubAIHubAdmin/index.tsx

@@ -0,0 +1,277 @@
+/**
+ * `<DataClubAIHubAdmin />` — role-gated admin UI shell (§8.3,
+ * [04-admin-overview.md]).
+ *
+ * Step 11 ships the shell + the Users sub-page; Step 12 fills in Agents,
+ * Sessions overview, and Settings. Nav items the caller's role isn't
+ * authorized for are **hidden, not greyed** — per §8.3. When mounted by a
+ * `user`-role caller the component returns `null` outright.
+ *
+ * The shell **renders its own `<ShellHeader />`** so the user-menu (log
+ * out, theme toggle, Open Letta ADE, ← Back to chat) stays available
+ * from inside the admin view too — [00-shell.md] makes the shell header
+ * part of every authenticated page. The component is identical to the
+ * one ChatShell renders.
+ *
+ * The active sub-page is derived from the role + an optional explicit
+ * user click (see `activePage` below) — it is NOT eagerly initialized
+ * from the role because `auth.role` may be `null` during hydration.
+ *
+ * @see SPECIFICATIONS.md §8.3 — admin views
+ * @see ui-sketches/04-admin-overview.md — nav shell
+ * @see ui-sketches/05-admin-users.md — Users sub-page
+ * @see ui-sketches/00-shell.md — header chrome
+ */
+import { useMemo, useState, type ReactNode } from "react";
+
+import {
+  resolveAIHubTexts,
+  type AIHubTexts,
+  type DeepPartial,
+} from "../../auth/texts.js";
+import { useAIHub } from "../../context/useAIHub.js";
+import { useAIHubAuth } from "../../context/useAIHubAuth.js";
+import type { AIHubRole } from "../../types.js";
+
+import { ShellHeader } from "../ChatShell/ShellHeader.js";
+
+import { AdminAgentsPage } from "./AgentsPage.js";
+import { AdminRotatingMessagesPage } from "./RotatingMessagesPage.js";
+import { AdminSessionsOverviewPage } from "./SessionsOverviewPage.js";
+import { AdminSettingsPage } from "./SettingsPage.js";
+import { AdminUsersPage } from "./UsersPage.js";
+
+/**
+ * One of the admin sub-pages identified in [04-admin-overview.md]. `rotating`
+ * (rotating starting messages) was added alongside Agents — same `power_user`+
+ * visibility.
+ *
+ * @see ui-sketches/04-admin-overview.md
+ */
+export type AdminPage = "users" | "agents" | "rotating" | "sessions" | "settings";
+
+/**
+ * Props for `<DataClubAIHubAdmin />`.
+ *
+ * @see SPECIFICATIONS.md §8.3
+ */
+export interface DataClubAIHubAdminProps {
+  /** Wrapper-supplied i18n. Falls back to English defaults for missing keys. */
+  texts?: DeepPartial<AIHubTexts>;
+  /**
+   * Overrides the initial sub-page. Defaults to `users` for `admin` /
+   * `super_admin` and `agents` for `power_user` per [04-admin-overview.md].
+   * When the supplied initial sub-page isn't authorized for the caller's
+   * role, falls back to the same default-by-role logic.
+   */
+  initialPage?: AdminPage;
+  /**
+   * Optional callback fired when the user clicks back to chat. The monolith
+   * (`<DataClubAIHub />`) supplies one that swaps the admin view back out;
+   * standalone mounts can leave it unset.
+   */
+  onExit?: () => void;
+  /** Extra className merged onto the admin root. */
+  className?: string;
+  /**
+   * Default-logo source surfaced through the shell header when
+   * `customShellHeaderLeft` is unset. Defaults to `"ai-hub"`. The monolith
+   * forwards its own `productName` here so the admin shell brands
+   * consistently with chat.
+   */
+  productName?: string;
+  /**
+   * Wrapper-supplied logo / nav-links slot for the shell header. The
+   * monolith forwards `customShellHeaderLeft` here so the admin shell
+   * matches the chat shell's chrome.
+   */
+  customShellHeaderLeft?: ReactNode;
+}
+
+/**
+ * Per-role nav-item visibility per the §8.3 / [04-admin-overview.md] matrix.
+ *
+ * `super_admin` sees everything; `admin` loses Settings; `power_user` also
+ * loses Users; `user` returns `null` upstream.
+ */
+function navItemsForRole(role: AIHubRole | null): AdminPage[] {
+  if (role === "super_admin") {
+    return ["users", "agents", "rotating", "sessions", "settings"];
+  }
+  if (role === "admin") {
+    return ["users", "agents", "rotating", "sessions"];
+  }
+  if (role === "power_user") {
+    return ["agents", "rotating", "sessions"];
+  }
+  // `user` callers don't render this component at all (see early return).
+  return [];
+}
+
+/**
+ * Default landing page per role per [04-admin-overview.md] notes:
+ * `Users` for admin / super_admin, `Agents` for power_user.
+ */
+function defaultPageForRole(role: AIHubRole | null): AdminPage {
+  if (role === "power_user") return "agents";
+  return "users";
+}
+
+interface NavLabels {
+  heading: string;
+  users: string;
+  agents: string;
+  rotating: string;
+  sessions: string;
+  settings: string;
+}
+
+/**
+ * Renders the admin shell (nav + content) or `null` for unauthorized callers.
+ *
+ * Behavior at a glance:
+ *
+ * - Returns `null` when the caller is `user`-role or unauthenticated.
+ * - Defaults to `users` (admin / super_admin) or `agents` (power_user); the
+ *   `initialPage` prop overrides only when it's authorized for the caller.
+ * - Sub-pages other than Users render the "coming in Step 12" placeholder
+ *   for now — Step 12 fills them in.
+ *
+ * @param props - see `DataClubAIHubAdminProps`.
+ * @returns the rendered admin UI, or `null` when the caller can't see it.
+ */
+export function DataClubAIHubAdmin(
+  props: DataClubAIHubAdminProps,
+): ReactNode {
+  const auth = useAIHubAuth();
+  // `theme` is forwarded as `data-theme` on the admin root so the dark
+  // theme's `[data-theme="dark"]` selector matches here too — otherwise
+  // the root's own `.data-club-ai-hub-admin` rule re-sets the light
+  // custom-property values and overrides the dark cascade from the
+  // provider's outer wrapper.
+  const { theme } = useAIHub();
+  const texts = resolveAIHubTexts(props.texts);
+  const navItems = navItemsForRole(auth.role);
+  const productName = props.productName ?? "ai-hub";
+
+  // `explicitPage` is `null` until the user clicks a nav item. We DON'T
+  // initialize from `auth.role` because the role may still be `null` while
+  // the auth context is hydrating; deriving `activePage` inline below keeps
+  // the page in sync with the role even after late hydration.
+  const [explicitPage, setExplicitPage] = useState<AdminPage | null>(
+    props.initialPage ?? null,
+  );
+  // Derive the active page from (in order): explicit user click, `initialPage`
+  // prop, role-derived default. The final guard demotes a stale `explicitPage`
+  // that the caller no longer has access to (e.g. role demotion between
+  // clicks) — without it the AdminUsersPage would mount for a power_user.
+  const activePage: AdminPage =
+    explicitPage !== null && navItems.includes(explicitPage)
+      ? explicitPage
+      : defaultPageForRole(auth.role);
+  const setActivePage = (page: AdminPage): void => {
+    setExplicitPage(page);
+  };
+
+  const labels: NavLabels = useMemo(
+    () => ({
+      heading: texts.admin.navHeading,
+      users: texts.admin.navUsers,
+      agents: texts.admin.navAgents,
+      rotating: texts.admin.navRotatingMessages,
+      sessions: texts.admin.navSessionsOverview,
+      settings: texts.admin.navSettings,
+    }),
+    [texts],
+  );
+
+  // Hide entirely for unauthorized callers (and while the auth context is
+  // still hydrating — the shell would flash if rendered first).
+  if (auth.hydrating) return null;
+  if (!auth.user || auth.role === null) return null;
+  if (auth.role === "user") return null;
+
+  const rootClass = props.className
+    ? `data-club-ai-hub-admin ${props.className}`
+    : "data-club-ai-hub-admin";
+
+  return (
+    <div className={rootClass} data-testid="admin-root" data-theme={theme}>
+      <ShellHeader
+        productName={productName}
+        texts={texts.chat}
+        {...(props.customShellHeaderLeft !== undefined
+          ? { customShellHeaderLeft: props.customShellHeaderLeft }
+          : {})}
+      />
+      <div
+        className="data-club-ai-hub-admin__body"
+        data-testid="admin-body"
+      >
+      <aside
+        className="data-club-ai-hub-admin__nav"
+        data-testid="admin-nav"
+        aria-label={labels.heading}
+      >
+        <div className="data-club-ai-hub-admin__nav-heading">
+          {labels.heading}
+        </div>
+        <nav className="data-club-ai-hub-admin__nav-list" role="navigation">
+          {navItems.map((item) => (
+            <button
+              key={item}
+              type="button"
+              role="link"
+              className={`data-club-ai-hub-admin__nav-item${
+                activePage === item
+                  ? " data-club-ai-hub-admin__nav-item--active"
+                  : ""
+              }`}
+              data-testid={`admin-nav-${item}`}
+              aria-current={activePage === item ? "page" : undefined}
+              onClick={() => setActivePage(item)}
+            >
+              {item === "users"
+                ? labels.users
+                : item === "agents"
+                  ? labels.agents
+                  : item === "rotating"
+                    ? labels.rotating
+                    : item === "sessions"
+                      ? labels.sessions
+                      : labels.settings}
+            </button>
+          ))}
+        </nav>
+        {props.onExit ? (
+          <button
+            type="button"
+            className="data-club-ai-hub-admin__nav-exit"
+            data-testid="admin-nav-exit"
+            onClick={props.onExit}
+          >
+            ← {texts.admin.backToChatLink}
+          </button>
+        ) : null}
+      </aside>
+      <section
+        className="data-club-ai-hub-admin__content"
+        data-testid="admin-content"
+      >
+        {activePage === "users" ? (
+          <AdminUsersPage texts={texts.admin} />
+        ) : activePage === "agents" ? (
+          <AdminAgentsPage texts={texts.admin} />
+        ) : activePage === "rotating" ? (
+          <AdminRotatingMessagesPage texts={texts.admin} />
+        ) : activePage === "sessions" ? (
+          <AdminSessionsOverviewPage texts={texts.admin} />
+        ) : (
+          <AdminSettingsPage texts={texts.admin} />
+        )}
+      </section>
+      </div>
+    </div>
+  );
+}
+

package/src/components/DataClubAIHubLogin/index.tsx

@@ -0,0 +1,282 @@
+/**
+ * `<DataClubAIHubLogin />` — the built-in login screen.
+ *
+ * Auto-rendered by `<DataClubAIHub />` (and `AIHub.AuthGate`) when no
+ * valid session token is present. Per §7.2.1 + §7.3 + §8.5, this screen
+ * is **library-owned** — there is no escape hatch in v1 to substitute a
+ * custom React component. Wrappers brand it via `productName` /
+ * `usernamePlaceholder` props, `texts` for localization, the BEM class
+ * contract, and CSS custom properties on `.data-club-ai-hub`.
+ *
+ * Behavior summary:
+ *
+ * - Submit → `useAIHubAuth().login(username, password)`.
+ * - On success with `mustChangePassword === false` → fires `onLoggedIn(user)`.
+ *   `AIHub.AuthGate` listens to `mustChangePassword` and routes to the
+ *   forced-change screen automatically; this component does not navigate
+ *   on its own.
+ * - On failure → shows the `error_message` banner above the form; inputs
+ *   stay editable.
+ * - No "Forgot password?" link, no "Sign up" link — per v1 spec; the
+ *   `forgot_password_note` is plain helper text.
+ *
+ * @see SPECIFICATIONS.md §7.2.1 — `<DataClubAIHubLogin />` props
+ * @see SPECIFICATIONS.md §8.5  — login flow + initial-password handling
+ * @see ui-sketches/01-login.md — visual contract for every region
+ */
+
+import { useState, type FormEvent, type ReactNode } from "react";
+
+import { useAIHubAuth } from "../../context/useAIHubAuth.js";
+import { AIHubRequestError } from "../../client/AIHubClient.js";
+import { resolveAIHubTexts, type AIHubTexts, type DeepPartial } from "../../auth/texts.js";
+import type { AIHubUser } from "../../types.js";
+import { PasswordInput } from "../internal/PasswordInput.js";
+
+/**
+ * BEM class names emitted by `<DataClubAIHubLogin />`. Per-customer wrappers
+ * pass a partial of this map via the `classNames` prop to override individual
+ * names for utility-CSS frameworks.
+ */
+export interface AIHubLoginClassNames {
+  /** Outer page wrapper (centers the card in the viewport). */
+  root: string;
+  /** The card itself. */
+  card: string;
+  /** Gradient title (product name). */
+  title: string;
+  /** Error banner shown above the form on failure. */
+  errorBanner: string;
+  /** Form container. */
+  form: string;
+  /** Label / field group wrapper. */
+  fieldGroup: string;
+  /** `<label>` for an input. */
+  fieldLabel: string;
+  /** Plain text inputs (username). */
+  textInput: string;
+  /** Password input wrapper (input + show toggle). */
+  passwordWrapper: string;
+  /** The password `<input>` itself. */
+  passwordInput: string;
+  /** The show/hide-password toggle button. */
+  passwordToggle: string;
+  /** Submit button. */
+  submitButton: string;
+  /** Spinner glyph rendered inside the submit button while submitting. */
+  spinner: string;
+  /** "Forgot password?" helper note below the submit button. */
+  forgotNote: string;
+}
+
+/**
+ * Default BEM class names. Stable, kebab-case, scoped under
+ * `data-club-ai-hub__login`. Wrappers override individual entries via
+ * the `classNames` prop.
+ */
+const DEFAULT_CLASS_NAMES: AIHubLoginClassNames = Object.freeze({
+  root: "data-club-ai-hub__login",
+  card: "data-club-ai-hub__login-card",
+  title: "data-club-ai-hub__login-card__title",
+  errorBanner: "data-club-ai-hub__login-card__error",
+  form: "data-club-ai-hub__login-card__form",
+  fieldGroup: "data-club-ai-hub__login-card__field",
+  fieldLabel: "data-club-ai-hub__login-card__label",
+  textInput: "data-club-ai-hub__login-card__input",
+  passwordWrapper: "data-club-ai-hub__login-card__password",
+  passwordInput: "data-club-ai-hub__login-card__input data-club-ai-hub__login-card__input--password",
+  passwordToggle: "data-club-ai-hub__login-card__toggle",
+  submitButton: "data-club-ai-hub__login-card__submit",
+  spinner: "data-club-ai-hub__spinner",
+  forgotNote: "data-club-ai-hub__login-card__forgot",
+}) as AIHubLoginClassNames;
+
+/**
+ * Props for `<DataClubAIHubLogin />`. See §7.2.1.
+ */
+export interface DataClubAIHubLoginProps {
+  /**
+   * Called after a successful login *only* when the server returned
+   * `mustChangePassword === false`. For the forced-change path,
+   * `useAIHubAuth().mustChangePassword` flips to `true` and `AuthGate`
+   * routes to the change-password screen — this callback is not fired.
+   */
+  onLoggedIn?: (user: AIHubUser) => void;
+  /** Extra class merged onto the root wrapper alongside the BEM defaults. */
+  className?: string;
+  /** Per-element class-name overrides for utility-CSS frameworks. */
+  classNames?: Partial<AIHubLoginClassNames>;
+  /**
+   * Title text shown at the top of the card. Defaults to `"ai-hub"`. The
+   * per-customer wrapper passes the brand label (e.g. `"BankXYZ Chat"`).
+   */
+  productName?: string;
+  /**
+   * Placeholder shown inside the username input. Defaults to empty.
+   * The seed-time hint `"DataClub"` is no longer baked in — operators
+   * who want it pass it explicitly during first-time-setup and remove it
+   * once the customer has rotated to their own users.
+   */
+  usernamePlaceholder?: string;
+  /**
+   * Wrapper-supplied i18n. Missing keys fall back to English defaults. Only
+   * the `login` namespace is consulted by this component; the
+   * `changePassword` namespace is consumed by the change-password screen.
+   *
+   * Accepts the full `AIHubTexts` shape (so a wrapper can pass one object
+   * to every built-in screen) — only the `login` keys are read here.
+   */
+  texts?: DeepPartial<AIHubTexts>;
+}
+
+/**
+ * Renders the login card.
+ *
+ * Always reads auth state from the nearest `<AIHubProvider>` — there is no
+ * "controlled" mode where a parent supplies the username / password / submit
+ * handler.
+ *
+ * @param props - see `DataClubAIHubLoginProps`.
+ * @returns the rendered card.
+ */
+export function DataClubAIHubLogin(props: DataClubAIHubLoginProps): ReactNode {
+  const auth = useAIHubAuth();
+  const classes = { ...DEFAULT_CLASS_NAMES, ...(props.classNames ?? {}) };
+  const texts = resolveAIHubTexts(props.texts).login;
+  const productName = props.productName ?? "ai-hub";
+
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>): Promise<void> => {
+    e.preventDefault();
+    if (submitting) return;
+    if (username.length === 0 || password.length === 0) return;
+
+    setSubmitting(true);
+    setErrorMessage(null);
+    try {
+      const result = await auth.login(username, password);
+      // AuthGate watches `mustChangePassword` to switch screens — this
+      // component just notifies the parent when the login was definitive.
+      // Reading the user from `result` (not from `auth.user`) avoids the
+      // stale-closure pitfall: the surrounding `auth` snapshot was taken
+      // before `setUser` re-rendered the provider, so `auth.user` here is
+      // still null.
+      if (!result.mustChangePassword && props.onLoggedIn) {
+        props.onLoggedIn(result.user);
+      }
+    } catch (err) {
+      if (err instanceof AIHubRequestError) {
+        // Map the wire error code to a localized banner.
+        if (err.code === "unauthorized" || err.status === 401) {
+          setErrorMessage(texts.invalidCredentialsError);
+        } else if (err.code === "network") {
+          setErrorMessage(texts.networkError);
+        } else {
+          // Fall back to the server's message — it's safe to surface per §9.
+          setErrorMessage(err.message || texts.invalidCredentialsError);
+        }
+      } else {
+        setErrorMessage(texts.networkError);
+      }
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const submitDisabled =
+    submitting || username.length === 0 || password.length === 0;
+
+  const rootClass =
+    props.className !== undefined
+      ? `${classes.root} ${props.className}`
+      : classes.root;
+
+  return (
+    <div className={rootClass} data-testid="login-root">
+      <div className={classes.card} role="form" aria-labelledby="dc-aih-login-title">
+        <h1 id="dc-aih-login-title" className={classes.title}>
+          {productName}
+        </h1>
+
+        {errorMessage !== null ? (
+          <div
+            className={classes.errorBanner}
+            role="alert"
+            aria-live="polite"
+            data-testid="login-error"
+          >
+            {errorMessage}
+          </div>
+        ) : null}
+
+        <form className={classes.form} onSubmit={handleSubmit} noValidate>
+          <div className={classes.fieldGroup}>
+            <label htmlFor="dc-aih-login-username" className={classes.fieldLabel}>
+              {texts.usernameLabel}
+            </label>
+            <input
+              id="dc-aih-login-username"
+              type="text"
+              name="username"
+              autoComplete="username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              {...(props.usernamePlaceholder
+                ? { placeholder: props.usernamePlaceholder }
+                : {})}
+              disabled={submitting}
+              required
+              autoFocus
+              className={classes.textInput}
+            />
+          </div>
+
+          <div className={classes.fieldGroup}>
+            <label htmlFor="dc-aih-login-password" className={classes.fieldLabel}>
+              {texts.passwordLabel}
+            </label>
+            <PasswordInput
+              id="dc-aih-login-password"
+              value={password}
+              onChange={setPassword}
+              name="password"
+              autoComplete="current-password"
+              disabled={submitting}
+              required
+              showAriaLabel={texts.showPasswordAriaLabel}
+              hideAriaLabel={texts.hidePasswordAriaLabel}
+              wrapperClassName={classes.passwordWrapper}
+              inputClassName={classes.passwordInput}
+              toggleClassName={classes.passwordToggle}
+              testId="login-password-field"
+            />
+          </div>
+
+          <button
+            type="submit"
+            className={classes.submitButton}
+            disabled={submitDisabled}
+            data-testid="login-submit"
+          >
+            {submitting ? (
+              <>
+                <span className={classes.spinner} aria-hidden="true" />
+                {texts.signingInButton}
+              </>
+            ) : (
+              texts.signInButton
+            )}
+          </button>
+        </form>
+
+        <p className={classes.forgotNote} data-testid="login-forgot-note">
+          {texts.forgotPasswordNote}
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/components/EffortControl/index.tsx

@@ -0,0 +1,138 @@
+/**
+ * `<EffortControl />` — the per-message reasoning-effort dropdown.
+ *
+ * Mirrors Letta's ADE enum exactly: `None | Minimal | Low | Medium | High |
+ * Extra High` (snake-cased on the wire — `extra_high`). **`None` is the
+ * off state** for reasoning; there is no separate thinking/reasoning
+ * toggle. Per-message: the user changes effort, the next `sendMessage`
+ * picks it up, and the value sticks until the user changes it again
+ * (within the session — `setEffort` lives on the provider).
+ *
+ * Renders nothing when `effortControlVisible === false` upstream
+ * (server toggle wins over the React prop per §8.4). The component
+ * accepts the resolved boolean as an explicit prop so the predicate
+ * isn't re-derived at every render site.
+ *
+ * Exported under `AIHub.EffortControl`.
+ *
+ * @see SPECIFICATIONS.md §7.4 — reasoning effort
+ * @see ui-sketches/03-chat.md — effort_control
+ */
+
+import { type ChangeEvent, type ReactNode } from "react";
+
+import {
+  resolveAIHubTexts,
+  type AIHubTexts,
+  type DeepPartial,
+} from "../../auth/texts.js";
+import type { AIHubEffort } from "../../client/AIHubClient.js";
+import { useAIHub } from "../../context/useAIHub.js";
+
+/** BEM class names emitted by `<EffortControl />`. */
+export interface EffortControlClassNames {
+  /** The label-wrapping container. */
+  root: string;
+  /** The label text. */
+  label: string;
+  /** The select element. */
+  select: string;
+}
+
+const DEFAULT_CLASS_NAMES: EffortControlClassNames = Object.freeze({
+  root: "data-club-ai-hub__effort-control",
+  label: "data-club-ai-hub__effort-control__label",
+  select: "data-club-ai-hub__effort-control__select",
+}) as EffortControlClassNames;
+
+/**
+ * Ordered list of every effort value — used by the renderer + by tests
+ * that want to assert the dropdown's option set without re-deriving the
+ * order.
+ */
+export const EFFORT_VALUES: ReadonlyArray<AIHubEffort> = Object.freeze([
+  "none",
+  "minimal",
+  "low",
+  "medium",
+  "high",
+  "extra_high",
+]);
+
+/**
+ * Resolves the i18n label for a given effort value.
+ *
+ * @param value - the effort enum value.
+ * @param texts - resolved chat texts.
+ * @returns the display label.
+ */
+function labelForEffort(
+  value: AIHubEffort,
+  texts: AIHubTexts["chat"],
+): string {
+  switch (value) {
+    case "none":
+      return texts.effortNone;
+    case "minimal":
+      return texts.effortMinimal;
+    case "low":
+      return texts.effortLow;
+    case "medium":
+      return texts.effortMedium;
+    case "high":
+      return texts.effortHigh;
+    case "extra_high":
+      return texts.effortExtraHigh;
+  }
+}
+
+/** Props for `<EffortControl />`. */
+export interface EffortControlProps {
+  /** Disable the control (e.g. while a turn is streaming). Default false. */
+  disabled?: boolean;
+  /** Wrapper-supplied i18n. */
+  texts?: DeepPartial<AIHubTexts>;
+  /** Extra class merged onto the root. */
+  className?: string;
+  /** Per-element class overrides. */
+  classNames?: Partial<EffortControlClassNames>;
+}
+
+/**
+ * Renders the effort dropdown.
+ *
+ * @param props - see `EffortControlProps`.
+ * @returns the rendered dropdown.
+ */
+export function EffortControl(props: EffortControlProps): ReactNode {
+  const { effort, setEffort } = useAIHub();
+  const texts = resolveAIHubTexts(props.texts);
+  const cls = { ...DEFAULT_CLASS_NAMES, ...(props.classNames ?? {}) };
+  const rootClass = props.className
+    ? `${cls.root} ${props.className}`
+    : cls.root;
+
+  function handleChange(e: ChangeEvent<HTMLSelectElement>): void {
+    setEffort(e.target.value as AIHubEffort);
+  }
+
+  return (
+    <label className={rootClass} data-testid="effort-control">
+      <span className={cls.label}>{texts.chat.effortLabel}</span>
+      <select
+        className={cls.select}
+        value={effort}
+        onChange={handleChange}
+        disabled={props.disabled}
+        data-testid="effort-control-select"
+        aria-label={texts.chat.effortLabel}
+      >
+        {EFFORT_VALUES.map((value) => (
+          <option key={value} value={value}>
+            {labelForEffort(value, texts.chat)}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}