@data-club/ai-hub 0.0.1

package/src/components/SessionsPanel/SessionTitleModal.tsx

@@ -0,0 +1,256 @@
+/**
+ * `<SessionTitleModal />` — the modal used for both new-session creation
+ * and edit-title flow on existing sessions.
+ *
+ * Single text input ("Chat title"), `[Cancel]` / `[Create]` (new) or
+ * `[Cancel]` / `[Save]` (edit). Title is required and 1..80 chars —
+ * validated client-side before submit (the server's Zod schema enforces
+ * the same bounds for defense-in-depth).
+ *
+ * The modal is uncontrolled state-wise — `onSubmit` resolves with the
+ * server's returned `Session` on success; the caller (`SessionsPanel`)
+ * decides whether to close. We close on a successful submit by tying
+ * `open` back to the parent's state.
+ *
+ * @see SPECIFICATIONS.md §6.3.1 — sessions
+ * @see ui-sketches/03-chat.md — new_session_modal / edit_session_title_modal
+ */
+
+import {
+  useEffect,
+  useRef,
+  useState,
+  type FormEvent,
+  type ReactNode,
+} from "react";
+
+import type { AIHubChatTexts } from "../../auth/texts.js";
+
+/**
+ * BEM class names emitted by `<SessionTitleModal />`. Shared with the
+ * generic-modal styles in the default stylesheet so admin / settings
+ * modals layered in Steps 11+ can reuse them.
+ */
+export interface SessionTitleModalClassNames {
+  /** Overlay backdrop. */
+  overlay: string;
+  /** The modal card. */
+  modal: string;
+  /** Title bar. */
+  title: string;
+  /** Form. */
+  form: string;
+  /** Field group (label + input). */
+  fieldGroup: string;
+  /** Field label. */
+  fieldLabel: string;
+  /** Text input. */
+  input: string;
+  /** Inline-validation error under the input. */
+  fieldError: string;
+  /** Button row at the bottom of the modal. */
+  actions: string;
+  /** Cancel button. */
+  cancelButton: string;
+  /** Submit button. */
+  submitButton: string;
+}
+
+const DEFAULT_CLASS_NAMES: SessionTitleModalClassNames = Object.freeze({
+  overlay: "data-club-ai-hub__modal-overlay",
+  modal: "data-club-ai-hub__modal",
+  title: "data-club-ai-hub__modal__title",
+  form: "data-club-ai-hub__modal__form",
+  fieldGroup: "data-club-ai-hub__modal__field",
+  fieldLabel: "data-club-ai-hub__modal__label",
+  input: "data-club-ai-hub__modal__input",
+  fieldError: "data-club-ai-hub__modal__field-error",
+  actions: "data-club-ai-hub__modal__actions",
+  cancelButton: "data-club-ai-hub__modal__cancel",
+  submitButton: "data-club-ai-hub__modal__confirm",
+}) as SessionTitleModalClassNames;
+
+/** The maximum title length enforced both server- and client-side. */
+const TITLE_MAX = 80;
+
+/**
+ * Props for `<SessionTitleModal />`.
+ */
+export interface SessionTitleModalProps {
+  /** Discriminates the title + submit-button label. */
+  mode: "create" | "edit";
+  /** Pre-filled value for edit-mode; empty string for create-mode. */
+  initialTitle?: string;
+  /** Whether the modal is currently visible. */
+  open: boolean;
+  /** Called when the user dismisses without saving. */
+  onCancel: () => void;
+  /**
+   * Submission handler. Should `await` the server call and throw on
+   * failure — the modal renders the error inline and stays open.
+   */
+  onSubmit: (title: string) => Promise<void>;
+  /** Resolved chat texts. */
+  texts: AIHubChatTexts;
+  /** Per-element class overrides. */
+  classNames?: Partial<SessionTitleModalClassNames>;
+}
+
+/**
+ * Renders the modal. Validates the input client-side and surfaces server
+ * errors inline.
+ *
+ * @param props - see `SessionTitleModalProps`.
+ * @returns the rendered modal, or `null` when `open === false`.
+ */
+export function SessionTitleModal(props: SessionTitleModalProps): ReactNode {
+  const {
+    mode,
+    initialTitle = "",
+    open,
+    onCancel,
+    onSubmit,
+    texts,
+  } = props;
+  const cls = { ...DEFAULT_CLASS_NAMES, ...(props.classNames ?? {}) };
+
+  const [title, setTitle] = useState<string>(initialTitle);
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const [serverError, setServerError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  // Re-seed on open / initialTitle change so reopening for a different
+  // session doesn't carry stale text.
+  useEffect(() => {
+    if (open) {
+      setTitle(initialTitle);
+      setValidationError(null);
+      setServerError(null);
+      setSubmitting(false);
+      // Defer focus to next tick so the input is mounted.
+      queueMicrotask(() => inputRef.current?.focus());
+    }
+  }, [open, initialTitle]);
+
+  if (!open) return null;
+
+  const trimmed = title.trim();
+  const isEmpty = trimmed.length === 0;
+  const tooLong = trimmed.length > TITLE_MAX;
+  const submitDisabled = isEmpty || tooLong || submitting;
+
+  function handleSubmit(e: FormEvent<HTMLFormElement>): void {
+    e.preventDefault();
+    if (isEmpty) {
+      setValidationError(texts.sessionTitleRequiredError);
+      return;
+    }
+    if (tooLong) {
+      setValidationError(texts.sessionTitleTooLongError);
+      return;
+    }
+    setValidationError(null);
+    setServerError(null);
+    setSubmitting(true);
+    onSubmit(trimmed)
+      .catch((err: unknown) => {
+        const msg = err instanceof Error ? err.message : String(err);
+        setServerError(msg || texts.genericRequestError);
+      })
+      .finally(() => setSubmitting(false));
+  }
+
+  const modalTitle =
+    mode === "create"
+      ? texts.newSessionModalTitle
+      : texts.editSessionModalTitle;
+  const submitLabel =
+    mode === "create" ? texts.modalCreateButton : texts.modalSaveButton;
+
+  return (
+    <div
+      className={cls.overlay}
+      role="presentation"
+      data-testid="session-title-modal-overlay"
+      onClick={(e) => {
+        // Click on the backdrop (not the modal itself) cancels.
+        if (e.target === e.currentTarget && !submitting) onCancel();
+      }}
+    >
+      <div
+        className={cls.modal}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="data-club-ai-hub__session-title-modal__heading"
+        data-testid="session-title-modal"
+        data-mode={mode}
+      >
+        <h2
+          id="data-club-ai-hub__session-title-modal__heading"
+          className={cls.title}
+        >
+          {modalTitle}
+        </h2>
+        <form className={cls.form} onSubmit={handleSubmit} noValidate>
+          <div className={cls.fieldGroup}>
+            <label className={cls.fieldLabel} htmlFor="session-title-input">
+              {texts.sessionTitleLabel}
+            </label>
+            <input
+              id="session-title-input"
+              ref={inputRef}
+              type="text"
+              className={cls.input}
+              value={title}
+              onChange={(e) => {
+                setTitle(e.target.value);
+                if (validationError) setValidationError(null);
+              }}
+              placeholder={texts.sessionTitlePlaceholder}
+              maxLength={TITLE_MAX + 16 /* let the user paste over, validate on submit */}
+              autoComplete="off"
+              disabled={submitting}
+              data-testid="session-title-input"
+            />
+            {validationError ? (
+              <p
+                className={cls.fieldError}
+                data-testid="session-title-validation-error"
+              >
+                {validationError}
+              </p>
+            ) : null}
+            {serverError ? (
+              <p
+                className={cls.fieldError}
+                data-testid="session-title-server-error"
+              >
+                {serverError}
+              </p>
+            ) : null}
+          </div>
+          <div className={cls.actions}>
+            <button
+              type="button"
+              className={cls.cancelButton}
+              onClick={onCancel}
+              disabled={submitting}
+              data-testid="session-title-cancel"
+            >
+              {texts.modalCancelButton}
+            </button>
+            <button
+              type="submit"
+              className={cls.submitButton}
+              disabled={submitDisabled}
+              data-testid="session-title-submit"
+            >
+              {submitLabel}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/components/SessionsPanel/index.tsx

@@ -0,0 +1,406 @@
+/**
+ * `<SessionsPanel />` — the left-side list of the caller's sessions for
+ * the currently-opened agent.
+ *
+ * Includes:
+ *
+ * - `new_session_button` → opens `SessionTitleModal` in create mode.
+ * - One `session_item` per row with hover-revealed `edit_title_button` +
+ *   `archive_session_button` actions. Edit opens the same modal in
+ *   `edit` mode pre-filled with the row's title. Archive uses a native
+ *   `confirm()` (v1; future polish is a styled modal).
+ * - `archived_filter_toggle` at the bottom of the panel — flipping it
+ *   re-fetches with `include_archived=true`. Archived rows render with
+ *   the `--archived` modifier and their hover-actions swap to an
+ *   Unarchive button.
+ * - Collapsible / resizable variants — Step 9 ships the collapsible
+ *   reveal strip; resizable drag is layout-only and uses a CSS gutter
+ *   the parent layout owns.
+ *
+ * **No delete action exists anywhere on this panel by design** — v1
+ * sessions are archive-only (§6.3.1).
+ *
+ * Exported under `AIHub.SessionsPanel`.
+ *
+ * @see SPECIFICATIONS.md §7.1 — exports
+ * @see SPECIFICATIONS.md §6.3.1 — sessions
+ * @see ui-sketches/03-chat.md — sessions_panel
+ */
+
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+
+import {
+  resolveAIHubTexts,
+  type AIHubTexts,
+  type DeepPartial,
+} from "../../auth/texts.js";
+import { useAIHub } from "../../context/useAIHub.js";
+import type { Session } from "../../types.js";
+
+import { SessionTitleModal } from "./SessionTitleModal.js";
+
+/**
+ * BEM class names emitted by `<SessionsPanel />`.
+ */
+export interface SessionsPanelClassNames {
+  /** Outer panel container (the column). */
+  root: string;
+  /** Modifier applied when the panel is collapsed. */
+  rootCollapsed: string;
+  /** Optional custom-header slot wrapper at the top of the panel. */
+  customHeader: string;
+  /** "+ New chat" button. */
+  newSessionButton: string;
+  /** Reveal-strip rendered when collapsed. */
+  reveal: string;
+  /** Collapse / expand toggle. */
+  collapseToggle: string;
+  /** Scrollable list region. */
+  list: string;
+  /** Empty-state line ("No chats yet."). */
+  empty: string;
+  /** Loading state. */
+  loading: string;
+  /** A session-list row. */
+  item: string;
+  /** Modifier applied to the currently-selected row. */
+  itemActive: string;
+  /** Modifier applied to archived rows. */
+  itemArchived: string;
+  /** Row title text. */
+  itemTitle: string;
+  /** Row meta (relative timestamp). */
+  itemMeta: string;
+  /** Row hover-action group wrapper. */
+  itemActions: string;
+  /** A single action button (edit / archive / unarchive). */
+  actionButton: string;
+  /** Footer wrapper holding the archived-filter toggle + custom footer. */
+  footer: string;
+  /** Show-archived toggle. */
+  archivedToggle: string;
+  /** Optional custom-footer slot wrapper. */
+  customFooter: string;
+}
+
+const DEFAULT_CLASS_NAMES: SessionsPanelClassNames = Object.freeze({
+  root: "data-club-ai-hub__sessions-panel",
+  rootCollapsed: "data-club-ai-hub__sessions-panel--collapsed",
+  customHeader: "data-club-ai-hub__sessions-panel__custom-header",
+  newSessionButton: "data-club-ai-hub__sessions-panel__new-button",
+  reveal: "data-club-ai-hub__sessions-panel__reveal",
+  collapseToggle: "data-club-ai-hub__sessions-panel__collapse-toggle",
+  list: "data-club-ai-hub__sessions-panel__list",
+  empty: "data-club-ai-hub__sessions-panel__empty",
+  loading: "data-club-ai-hub__sessions-panel__loading",
+  item: "data-club-ai-hub__sessions-panel__item",
+  itemActive: "data-club-ai-hub__sessions-panel__item--active",
+  itemArchived: "data-club-ai-hub__sessions-panel__item--archived",
+  itemTitle: "data-club-ai-hub__sessions-panel__item-title",
+  itemMeta: "data-club-ai-hub__sessions-panel__item-meta",
+  itemActions: "data-club-ai-hub__sessions-panel__item-actions",
+  actionButton: "data-club-ai-hub__sessions-panel__action-button",
+  footer: "data-club-ai-hub__sessions-panel__footer",
+  archivedToggle: "data-club-ai-hub__sessions-panel__archived-toggle",
+  customFooter: "data-club-ai-hub__sessions-panel__custom-footer",
+}) as SessionsPanelClassNames;
+
+/**
+ * Props for `<SessionsPanel />`.
+ */
+export interface SessionsPanelProps {
+  /** Whether to render the "+ New chat" button. Defaults to true. */
+  showCreateButton?: boolean;
+  /** Whether the panel can be collapsed. Defaults to true. */
+  collapsible?: boolean;
+  /** Top-of-panel slot. */
+  customHeader?: ReactNode;
+  /** Bottom-of-panel slot, rendered above the archived-filter toggle. */
+  customFooter?: ReactNode;
+  /** Extra class merged onto the root. */
+  className?: string;
+  /** Per-element class overrides. */
+  classNames?: Partial<SessionsPanelClassNames>;
+  /** Wrapper-supplied i18n. */
+  texts?: DeepPartial<AIHubTexts>;
+}
+
+/**
+ * Formats an ISO-8601 timestamp into a short "N min ago" / "yesterday" /
+ * "N days ago" line. Intentionally minimal — i18n libraries can take this
+ * over later via the `texts.*` map if needed.
+ *
+ * @param iso - ISO timestamp.
+ * @returns the short relative-time string.
+ */
+function formatRelative(iso: string): string {
+  const then = Date.parse(iso);
+  if (Number.isNaN(then)) return "";
+  const diffMs = Date.now() - then;
+  const minutes = Math.round(diffMs / 60_000);
+  if (minutes < 1) return "just now";
+  if (minutes === 1) return "1 min ago";
+  if (minutes < 60) return `${minutes} min ago`;
+  const hours = Math.round(minutes / 60);
+  if (hours === 1) return "1 hr ago";
+  if (hours < 24) return `${hours} hr ago`;
+  const days = Math.round(hours / 24);
+  if (days === 1) return "yesterday";
+  return `${days} days ago`;
+}
+
+/**
+ * Renders the sessions panel.
+ *
+ * @param props - see `SessionsPanelProps`.
+ * @returns the rendered panel.
+ */
+export function SessionsPanel(props: SessionsPanelProps): ReactNode {
+  const {
+    sessions,
+    sessionsLoading,
+    activeSessionId,
+    setActiveSession,
+    createSession,
+    patchSession,
+    includeArchivedSessions,
+    setIncludeArchivedSessions,
+  } = useAIHub();
+  const texts = resolveAIHubTexts(props.texts);
+  const cls = { ...DEFAULT_CLASS_NAMES, ...(props.classNames ?? {}) };
+  const showCreate = props.showCreateButton ?? true;
+  const collapsible = props.collapsible ?? true;
+
+  const [collapsed, setCollapsed] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editingSessionId, setEditingSessionId] = useState<string | null>(null);
+
+  const editingSession = useMemo<Session | null>(() => {
+    if (!editingSessionId) return null;
+    return sessions.find((s) => s.id === editingSessionId) ?? null;
+  }, [editingSessionId, sessions]);
+
+  // Stale-modal guard: if the row being edited gets archived/removed under
+  // us, close the modal so we don't submit edits against a stale id.
+  useEffect(() => {
+    if (editingSessionId && !editingSession) {
+      setEditingSessionId(null);
+    }
+  }, [editingSessionId, editingSession]);
+
+  if (collapsed) {
+    return (
+      <div
+        className={`${cls.root} ${cls.rootCollapsed}`}
+        data-testid="sessions-panel"
+        data-collapsed="true"
+      >
+        <button
+          type="button"
+          className={cls.reveal}
+          onClick={() => setCollapsed(false)}
+          aria-label={texts.chat.expandSessionsPanel}
+          data-testid="sessions-panel-reveal"
+        >
+          {/* "≫" — chevron-right glyph. SVG would be more polished, the
+              text glyph keeps the bundle small and is accessible via
+              aria-label. */}
+          ≫
+        </button>
+      </div>
+    );
+  }
+
+  const rootClass = [cls.root, props.className].filter(Boolean).join(" ");
+
+  async function handleArchive(session: Session): Promise<void> {
+    const prompt = texts.chat.archiveConfirmPrompt.replace(
+      "{title}",
+      session.title,
+    );
+    // eslint-disable-next-line no-alert
+    if (typeof window !== "undefined" && !window.confirm(prompt)) {
+      return;
+    }
+    try {
+      await patchSession(session.id, { isArchived: true });
+    } catch {
+      /* surfaced via provider's onError; row stays */
+    }
+  }
+
+  async function handleUnarchive(session: Session): Promise<void> {
+    try {
+      await patchSession(session.id, { isArchived: false });
+    } catch {
+      /* surfaced via provider's onError */
+    }
+  }
+
+  return (
+    <aside
+      className={rootClass}
+      data-testid="sessions-panel"
+      aria-label="Sessions"
+    >
+      {props.customHeader ? (
+        <div className={cls.customHeader} data-testid="sessions-panel-custom-header">
+          {props.customHeader}
+        </div>
+      ) : null}
+      {showCreate ? (
+        <button
+          type="button"
+          className={cls.newSessionButton}
+          onClick={() => {
+            setEditingSessionId(null);
+            setModalOpen(true);
+          }}
+          data-testid="sessions-panel-new-button"
+        >
+          {texts.chat.newSessionButton}
+        </button>
+      ) : null}
+      {collapsible ? (
+        <button
+          type="button"
+          className={cls.collapseToggle}
+          onClick={() => setCollapsed(true)}
+          aria-label={texts.chat.collapseSessionsPanel}
+          data-testid="sessions-panel-collapse"
+        >
+          ≪
+        </button>
+      ) : null}
+      {sessionsLoading && sessions.length === 0 ? (
+        <p className={cls.loading} data-testid="sessions-panel-loading">
+          {texts.chat.sessionsLoading}
+        </p>
+      ) : null}
+      {!sessionsLoading && sessions.length === 0 ? (
+        <p className={cls.empty} data-testid="sessions-panel-empty">
+          {texts.chat.sessionsEmpty}
+        </p>
+      ) : null}
+      <ul className={cls.list} data-testid="sessions-panel-list">
+        {sessions.map((session) => {
+          const isActive = session.id === activeSessionId;
+          const itemClasses = [
+            cls.item,
+            isActive ? cls.itemActive : "",
+            session.is_archived ? cls.itemArchived : "",
+          ]
+            .filter(Boolean)
+            .join(" ");
+          const displayTitle =
+            session.title.trim().length > 0
+              ? session.title
+              : texts.chat.untitledSessionFallback;
+          return (
+            <li
+              key={session.id}
+              className={itemClasses}
+              data-testid="session-item"
+              data-active={isActive ? "true" : "false"}
+              data-archived={session.is_archived ? "true" : "false"}
+              data-session-id={session.id}
+            >
+              <button
+                type="button"
+                className={cls.itemTitle}
+                onClick={() => setActiveSession(session.id)}
+                data-testid="session-item-open"
+              >
+                <span>{displayTitle}</span>
+                <span className={cls.itemMeta}>
+                  {formatRelative(session.updated_at)}
+                </span>
+              </button>
+              <div className={cls.itemActions} data-testid="session-item-actions">
+                {!session.is_archived ? (
+                  <>
+                    <button
+                      type="button"
+                      className={cls.actionButton}
+                      aria-label={texts.chat.editSessionTitleAriaLabel}
+                      onClick={() => {
+                        setEditingSessionId(session.id);
+                        setModalOpen(true);
+                      }}
+                      data-testid="session-item-edit"
+                    >
+                      ✎
+                    </button>
+                    <button
+                      type="button"
+                      className={cls.actionButton}
+                      aria-label={texts.chat.archiveSessionAriaLabel}
+                      onClick={() => {
+                        void handleArchive(session);
+                      }}
+                      data-testid="session-item-archive"
+                    >
+                      🗄
+                    </button>
+                  </>
+                ) : (
+                  <button
+                    type="button"
+                    className={cls.actionButton}
+                    aria-label={texts.chat.unarchiveSessionAriaLabel}
+                    onClick={() => {
+                      void handleUnarchive(session);
+                    }}
+                    data-testid="session-item-unarchive"
+                  >
+                    ⤴
+                  </button>
+                )}
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+      <div className={cls.footer}>
+        {props.customFooter ? (
+          <div
+            className={cls.customFooter}
+            data-testid="sessions-panel-custom-footer"
+          >
+            {props.customFooter}
+          </div>
+        ) : null}
+        <button
+          type="button"
+          className={cls.archivedToggle}
+          onClick={() => setIncludeArchivedSessions(!includeArchivedSessions)}
+          aria-pressed={includeArchivedSessions}
+          data-testid="sessions-panel-archived-toggle"
+        >
+          {includeArchivedSessions
+            ? texts.chat.hideArchivedToggle
+            : texts.chat.showArchivedToggle}
+        </button>
+      </div>
+      <SessionTitleModal
+        mode={editingSession ? "edit" : "create"}
+        open={modalOpen}
+        initialTitle={editingSession?.title ?? ""}
+        onCancel={() => {
+          setModalOpen(false);
+          setEditingSessionId(null);
+        }}
+        onSubmit={async (title) => {
+          if (editingSession) {
+            await patchSession(editingSession.id, { title });
+          } else {
+            await createSession(title);
+          }
+          setModalOpen(false);
+          setEditingSessionId(null);
+        }}
+        texts={texts.chat}
+      />
+    </aside>
+  );
+}