zidane-ui 9.0.4 → 9.1.3

package/src/chat/SessionList.tsx

@@ -1,413 +0,0 @@
-/**
- * The sessions list, wired to a `ChatHost`: grouped and sorted rows, inline
- * rename, archive and delete (each only when the host can), "show more" for
- * long groups, a title search, arrow-key navigation, live relative times.
- *
- *   <ChatProvider host={host}>
- *     <SessionList activeId={id} onSelect={setId} groupBy="project" />
- *   </ChatProvider>
- *
- * Built from `SessionListRow` and `SessionGroupHeader`, the same parts the
- * desktop app's sidebar renders. Per-session extras (badges, a second line,
- * more menu items) come through `rowProps`.
- */
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type CSSProperties,
-  type KeyboardEvent,
-  type ReactNode,
-} from 'react';
-
-import { buttonClass } from '../components/button';
-import { ConfirmDialog } from '../components/ConfirmDialog';
-import { Overlay } from '../components/Overlay';
-import { PanelEmpty } from '../components/PanelEmpty';
-import { useChatHost, useHostSessions } from './ChatProvider';
-import type { ChatSession } from './headless/host';
-import {
-  buildSessionRows,
-  filterSessions,
-  relativeTime,
-  type CalendarOptions,
-  type SessionGroupBy,
-  type SessionSortBy,
-} from './headless/session-list';
-import { GroupGlyph, SessionGroupHeader, ShowMoreRow } from './SessionGroupHeader';
-import { SessionListRow, type RowActionItem, type SessionListRowProps } from './SessionListRow';
-import { dotStateFor } from './StatusDot';
-import { useChatLabels } from './useChatLabels';
-
-type RowExtras = Partial<Pick<SessionListRowProps, 'status' | 'dot' | 'titleDisplay' | 'badges' | 'meta' | 'sub'>> & {
-  /** Added before the built-in Delete. */
-  menuItems?: RowActionItem[];
-};
-
-/** Props for {@link SessionList}. */
-export interface SessionListProps {
-  /**
-   * Id of the session shown as selected. `null` or omitted marks none.
-   * @default null
-   */
-  activeId?: string | null;
-  /** Called with the session id when the user clicks a row or activates it with the keyboard. */
-  onSelect: (id: string) => void;
-  /** Override the host's list (a filtered or merged view). */
-  sessions?: readonly ChatSession[];
-  /**
-   * How rows are grouped: `project`, `date`, `state`, or `none` for a flat list.
-   * @default 'none'
-   */
-  groupBy?: SessionGroupBy;
-  /**
-   * Row order inside a group: `recency`, `createdTime`, or `alphabetical`.
-   * @default 'recency'
-   */
-  sortBy?: SessionSortBy;
-  /** Show the title search field above the list. */
-  search?: boolean;
-  /** Shows a "New session" button (and is called by it). */
-  onNewSession?: () => void;
-  /** Called with the group's path when the user clicks "+" on a group header. The app creates the session. */
-  onNewSessionIn?: (group: string) => void;
-  /** Per-session additions: badges, meta, a second line, menu items. */
-  rowProps?: (session: ChatSession) => RowExtras;
-  /** Ask before deleting (default true). */
-  confirmDelete?: boolean;
-  /** Shown when the host has no sessions at all. */
-  empty?: ReactNode;
-  /** Pin the clock (screenshots, server renders); live minute ticks otherwise. */
-  now?: number;
-  /** Pin the zone and locale of date labels; set it with `now` when a server renders the list too. */
-  calendar?: CalendarOptions;
-  /** The list's landmark name (default: the `sessions` label); set it when a page shows several. */
-  'aria-label'?: string;
-  /** Extra class names for the list's root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/** Re-renders once a minute, for relative times. */
-function useMinuteClock(): number {
-  const [now, setNow] = useState(() => Date.now());
-  useEffect(() => {
-    const id = setInterval(() => setNow(Date.now()), 60_000);
-    return () => clearInterval(id);
-  }, []);
-  return now;
-}
-
-const toggleIn = (set: ReadonlySet<string>, id: string) => {
-  const next = new Set(set);
-  if (next.has(id)) next.delete(id);
-  else next.add(id);
-  return next;
-};
-
-/**
- * Renders the session list for the {@link ChatHost} in context: grouped and sorted rows with rename, archive, and delete when the host supports them.
- *
- * @param props - The {@link SessionListProps}.
- */
-export function SessionList({
-  activeId = null,
-  onSelect,
-  sessions: sessionsProp,
-  groupBy = 'none',
-  sortBy = 'recency',
-  search = false,
-  onNewSession,
-  onNewSessionIn,
-  rowProps,
-  confirmDelete = true,
-  empty,
-  now: nowProp,
-  calendar,
-  'aria-label': ariaLabel,
-  className = '',
-  style,
-}: SessionListProps) {
-  const host = useChatHost();
-  const hostSessions = useHostSessions();
-  const sessions = sessionsProp ?? hostSessions;
-  const labels = useChatLabels();
-  const clock = useMinuteClock();
-  const now = nowProp ?? clock;
-  const listRef = useRef<HTMLUListElement>(null);
-
-  const [query, setQuery] = useState('');
-  const [collapsed, setCollapsed] = useState<ReadonlySet<string>>(new Set());
-  const [expanded, setExpanded] = useState<ReadonlySet<string>>(new Set());
-  const [renaming, setRenaming] = useState<{ id: string; value: string } | null>(null);
-  const [menuFor, setMenuFor] = useState<string | null>(null);
-  const [deleting, setDeleting] = useState<ChatSession | null>(null);
-
-  const groupLabels = useMemo(() => {
-    const out = new Map<string, string>();
-    for (const s of sessions) if (s.group && s.groupLabel && !out.has(s.group)) out.set(s.group, s.groupLabel);
-    return out;
-  }, [sessions]);
-
-  const visible = useMemo(() => filterSessions(sessions, query), [sessions, query]);
-  const pinned = useMemo(() => visible.filter((s) => s.pinned), [visible]);
-  const rows = useMemo(
-    () =>
-      buildSessionRows(
-        visible.filter((s) => !s.pinned),
-        {
-          groupBy,
-          sortBy,
-          collapsedGroups: collapsed,
-          showMoreExpanded: expanded,
-          project: (s) => s.group,
-          isFavorite: (s) => s.favorite === true,
-          labels,
-          now,
-          calendar,
-        },
-      ),
-    [visible, groupBy, sortBy, collapsed, expanded, labels, now, calendar],
-  );
-
-  const commitRename = useCallback(async () => {
-    if (!renaming) return;
-    const { id, value } = renaming;
-    setRenaming(null);
-    const title = value.trim();
-    const before = sessions.find((s) => s.id === id)?.title;
-    if (title && title !== before) await host.sessions?.rename?.(id, title);
-  }, [renaming, sessions, host]);
-
-  const remove = useCallback(
-    (s: ChatSession) => {
-      if (confirmDelete) setDeleting(s);
-      else void host.sessions?.remove?.(s.id);
-    },
-    [confirmDelete, host],
-  );
-
-  const itemsFor = useCallback(
-    (s: ChatSession, extra: RowActionItem[] | undefined): RowActionItem[] => {
-      const api = host.sessions;
-      return [
-        ...(api?.rename
-          ? [
-              {
-                id: 'rename',
-                label: labels.rename,
-                shortcut: 'R',
-                onSelect: () => setRenaming({ id: s.id, value: s.title }),
-              },
-            ]
-          : []),
-        ...(api?.setFavorite
-          ? [
-              {
-                id: 'favorite',
-                label: s.favorite ? labels.removeFavorite : labels.addFavorite,
-                shortcut: 'F',
-                onSelect: () => void api.setFavorite?.(s.id, !s.favorite),
-              },
-            ]
-          : []),
-        ...(api?.setArchived
-          ? [
-              {
-                id: 'archive',
-                label: s.archived ? labels.unarchive : labels.archive,
-                shortcut: 'A',
-                onSelect: () => void api.setArchived?.(s.id, !s.archived),
-              },
-            ]
-          : []),
-        ...(extra ?? []),
-        ...(api?.remove
-          ? [{ id: 'delete', label: labels.delete, destructive: true, shortcut: 'D', onSelect: () => remove(s) }]
-          : []),
-      ];
-    },
-    [host, labels, remove],
-  );
-
-  // ↑ / ↓ / Home / End move between rows; Enter (native button) opens one.
-  const onKeyDown = (e: KeyboardEvent<HTMLUListElement>) => {
-    if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key) || renaming) return;
-    const buttons = [...(listRef.current?.querySelectorAll<HTMLButtonElement>('[data-row-select]') ?? [])];
-    if (!buttons.length) return;
-    const at = buttons.indexOf(document.activeElement as HTMLButtonElement);
-    const next =
-      e.key === 'Home'
-        ? 0
-        : e.key === 'End'
-          ? buttons.length - 1
-          : Math.max(0, Math.min(buttons.length - 1, at + (e.key === 'ArrowDown' ? 1 : -1)));
-    e.preventDefault();
-    buttons[at < 0 && e.key === 'ArrowUp' ? buttons.length - 1 : next]?.focus();
-  };
-
-  const row = (s: ChatSession) => {
-    const extras = rowProps?.(s) ?? {};
-    const { menuItems: extraItems, ...slots } = extras;
-    const isRenaming = renaming?.id === s.id;
-    return (
-      <SessionListRow
-        key={s.id}
-        id={s.id}
-        title={s.title}
-        active={s.id === activeId}
-        archived={s.archived}
-        dot={slots.dot ?? dotStateFor(s.status)}
-        meta={
-          slots.meta ?? (
-            <span
-              className="zg-row-meta zg-meta shrink-0 tabular-nums"
-              title={new Date(s.updatedAt).toLocaleString(calendar?.locale, { timeZone: calendar?.timeZone })}
-            >
-              {relativeTime(s.updatedAt, now, labels, calendar)}
-            </span>
-          )
-        }
-        status={slots.status}
-        titleDisplay={slots.titleDisplay}
-        badges={slots.badges}
-        sub={slots.sub}
-        onSelect={onSelect}
-        renaming={isRenaming}
-        renameValue={isRenaming ? renaming.value : ''}
-        onStartRename={host.sessions?.rename ? (id, title) => setRenaming({ id, value: title }) : undefined}
-        onRenameChange={(value) => setRenaming((r) => (r ? { ...r, value } : r))}
-        onRenameCommit={commitRename}
-        onRenameCancel={() => setRenaming(null)}
-        menuItems={itemsFor(s, extraItems)}
-        menuOpen={menuFor === s.id}
-        onOpenMenu={setMenuFor}
-        onCloseMenu={() => setMenuFor(null)}
-      />
-    );
-  };
-
-  const nothing = sessions.length === 0;
-  return (
-    <nav aria-label={ariaLabel ?? labels.sessions} className={`flex flex-col min-h-0 ${className}`} style={style}>
-      {(onNewSession || search) && (
-        <div className="flex flex-col gap-2 px-2 pb-2">
-          {onNewSession && (
-            <button type="button" onClick={onNewSession} className={`${buttonClass({ size: 'sm' })} justify-start`}>
-              <span className="i-ph-plus text-[13px]" aria-hidden />
-              {labels.newSession}
-            </button>
-          )}
-          {search && !nothing && (
-            <label className="zg-well h-8 flex items-center gap-2 px-2.5 text-[13px]">
-              <span className="i-ph-magnifying-glass text-[13px] text-[var(--zg-text-muted)] shrink-0" aria-hidden />
-              <input
-                type="search"
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                placeholder={labels.searchSessions}
-                aria-label={labels.searchSessions}
-                className="flex-1 min-w-0 bg-transparent border-0 outline-none text-[var(--zg-text)] placeholder:text-[var(--zg-text-subtle)]"
-              />
-            </label>
-          )}
-        </div>
-      )}
-      {nothing ? (
-        (empty ?? <PanelEmpty icon="i-ph-chats-circle-duotone" title={labels.noSessions} />)
-      ) : visible.length === 0 ? (
-        <PanelEmpty icon="i-ph-magnifying-glass-duotone" title={labels.noMatches(query)} />
-      ) : (
-        // Arrow-key roving between the row buttons, delegated to the list: the rows are the interactive elements.
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-        <ul ref={listRef} className="list-none m-0 p-0 px-2 overflow-y-auto" onKeyDown={onKeyDown}>
-          {pinned.map(row)}
-          {rows.map((r) => {
-            if (r.kind === 'header') {
-              const label = (!r.chats && r.fullPath && groupLabels.get(r.fullPath)) || r.label;
-              return (
-                <SessionGroupHeader
-                  key={r.id}
-                  id={r.id}
-                  label={label}
-                  collapsed={r.collapsed}
-                  onToggle={(id) => setCollapsed((c) => toggleIn(c, id))}
-                  icon={
-                    <GroupGlyph
-                      icon={
-                        r.favorites
-                          ? 'i-ph-star'
-                          : groupBy === 'date'
-                            ? 'i-ph-calendar-blank'
-                            : groupBy === 'state'
-                              ? 'i-ph-lightning'
-                              : r.chats
-                                ? 'i-ph-chats'
-                                : 'i-ph-folder'
-                      }
-                    />
-                  }
-                  action={
-                    onNewSessionIn && r.fullPath ? (
-                      <button
-                        type="button"
-                        aria-label={labels.newSessionIn(label)}
-                        title={labels.newSessionIn(label)}
-                        onClick={() => onNewSessionIn(r.fullPath!)}
-                        className="zg-row-dots zg-segment-item zg-press-soft inline-flex items-center justify-center w-5 h-5 rounded-[var(--zg-radius-sm)] border-0 bg-transparent cursor-pointer p-0 text-[11px] text-[var(--zg-text-muted)]"
-                      >
-                        <span className="i-ph-plus" aria-hidden />
-                      </button>
-                    ) : undefined
-                  }
-                />
-              );
-            }
-            if (r.kind === 'showMore') {
-              return (
-                <ShowMoreRow
-                  key={r.id}
-                  hiddenCount={r.hiddenCount}
-                  onExpand={() => setExpanded((x) => toggleIn(x, r.groupId))}
-                />
-              );
-            }
-            return row(r.session);
-          })}
-        </ul>
-      )}
-      <Overlay
-        open={deleting !== null}
-        onClose={() => setDeleting(null)}
-        className="fixed inset-0 z-50 flex items-start justify-center pt-[15vh] px-4"
-      >
-        {(state) => (
-          <div data-state={state} className="contents">
-            <div
-              className="relative"
-              style={{
-                opacity: state === 'open' ? 1 : 0,
-                transition: `opacity var(--zg-motion-${state === 'open' ? 'fade' : 'fade-out'})`,
-              }}
-            >
-              <ConfirmDialog
-                title={deleting ? `${labels.delete} “${deleting.title}”?` : ''}
-                destructive
-                confirmLabel={labels.delete}
-                onCancel={() => setDeleting(null)}
-                onConfirm={() => {
-                  const s = deleting;
-                  setDeleting(null);
-                  if (s) void host.sessions?.remove?.(s.id);
-                }}
-              />
-            </div>
-          </div>
-        )}
-      </Overlay>
-    </nav>
-  );
-}

package/src/chat/SessionListRow.tsx

@@ -1,279 +0,0 @@
-/**
- * One session in a list: status dot, title (inline rename), trailing badges
- * and meta, an optional second line, and an actions menu behind a 3-dots
- * trigger and right-click.
- *
- * Every app-specific part is a slot (`status`, `titleDisplay`, `badges`,
- * `meta`, `sub`) and the actions are data (`menuItems`), so a host adds its
- * own (an environment badge, a commits line, "open in new window") without
- * forking the row. Paint (hover, active, renaming, archived) lives on
- * `.zg-session-row` data attributes (styles/chat.css), so a keyboard cursor
- * can move without a React render.
- */
-import { memo, useCallback, useRef, useState, type CSSProperties, type ReactNode } from 'react';
-
-import { EditableTitle } from '../components/EditableTitle';
-import { IconButton } from '../components/IconButton';
-import { RowActionsMenu, type RowActionItem } from '../components/RowActionsMenu';
-import { StatusDot, type SessionDotState } from './StatusDot';
-import { useChatLabels } from './useChatLabels';
-
-/**
- * The hovered title's right edge stays clear of the 3-dots trigger: the
- * text is fully visible up to this many pixels before the line's end
- * (`.zg-title-clip`'s hover mask in styles/chat.css spells the same 32px).
- */
-const TITLE_HOVER_FADE = 32;
-/** Reading pace of the hover slide, in pixels a second. */
-const TITLE_SLIDE_SPEED = 50;
-
-/**
- * Arms the hover slide of a long title: how far it must travel for its end
- * to show, and how long that takes at a reading pace. Measured when the
- * pointer or the keyboard arrives, against the room the line will have
- * once the trailing meta folds away (its width plus the title's).
- */
-function armTitleSlide(clip: HTMLElement | null): void {
-  const title = clip?.firstElementChild as HTMLElement | null;
-  if (!clip || !title) return;
-  const meta = clip.parentElement?.querySelector<HTMLElement>(':scope > .zg-row-meta');
-  const room = clip.clientWidth + (meta?.offsetWidth ?? 0) - TITLE_HOVER_FADE;
-  const shift = Math.ceil(title.scrollWidth - room);
-  if (shift <= 0) {
-    title.removeAttribute('data-slide');
-    return;
-  }
-  title.style.setProperty('--zg-title-shift', `${-shift}px`);
-  title.style.setProperty(
-    '--zg-title-slide',
-    `${Math.round(Math.min(6000, Math.max(500, (shift / TITLE_SLIDE_SPEED) * 1000)))}ms`,
-  );
-  title.setAttribute('data-slide', '');
-}
-
-export type { RowActionItem };
-
-/** Props for {@link SessionListRow}. Every app-specific part is a slot (`status`, `titleDisplay`, `badges`, `meta`, `sub`) or data (`menuItems`). */
-export interface SessionListRowProps {
-  /** Session id, passed to `onSelect`, `onStartRename`, and the menu callbacks. */
-  id: string;
-  /** Session title. Shown unless `titleDisplay` replaces it, and used as the rename field's text. */
-  title: string;
-  /**
-   * Marks the row as the selected session.
-   * @default false
-   */
-  active?: boolean;
-  /**
-   * Marks the session as archived. The default glyph becomes an archive icon.
-   * @default false
-   */
-  archived?: boolean;
-  /** Leading glyph. Default: a `StatusDot` for `dot` (an archive glyph when archived). */
-  status?: ReactNode;
-  /**
-   * State drawn by the default `StatusDot` when `status` is not set.
-   * @default 'idle'
-   */
-  dot?: SessionDotState;
-  /** What the title shows when not renaming (badges inside a title, highlighting). Default: the title. */
-  titleDisplay?: ReactNode;
-  /** After the title, on its line (an environment badge). Hidden while renaming. */
-  badges?: ReactNode;
-  /** Trailing, on the title's line (`now`, `3h`, a run's elapsed time). Hidden while renaming. */
-  meta?: ReactNode;
-  /** A second line (a search excerpt, commits). */
-  sub?: ReactNode;
-  /** Extra classes on the second line's box. */
-  subClassName?: string;
-  /** Called with `id` when the user clicks the row. Not called while renaming. */
-  onSelect: (id: string) => void;
-
-  /**
-   * Replaces the title with an inline text field.
-   * @default false
-   */
-  renaming?: boolean;
-  /**
-   * Current text of the rename field. Only used while `renaming`.
-   * @default ''
-   */
-  renameValue?: string;
-  /** Called with `id` and `title` when the user asks to edit the title in place. */
-  onStartRename?: (id: string, title: string) => void;
-  /** Called with the new text as the user types in the rename field. */
-  onRenameChange?: (value: string) => void;
-  /** Called when the user confirms the rename. */
-  onRenameCommit?: () => void | Promise<void>;
-  /** Called when the user abandons the rename. */
-  onRenameCancel?: () => void;
-
-  /** Row actions; none hides the trigger. */
-  menuItems?: readonly RowActionItem[];
-  /** Controlled menu (one open menu across a list); uncontrolled when omitted. */
-  menuOpen?: boolean;
-  /** Called with `id` when the row asks to open its actions menu. Used with a controlled `menuOpen`. */
-  onOpenMenu?: (id: string) => void;
-  /** Called with `id` when the actions menu closes. Used with a controlled `menuOpen`. */
-  onCloseMenu?: (id: string) => void;
-
-  /** Plays the row's arrival sweep (`data-arrived`, styles/chat.css). */
-  arrived?: boolean;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/** Renders one session in a list: status dot, title with inline rename, badges, meta, an optional second line, and an actions menu behind a 3-dots trigger and right-click. */
-export const SessionListRow = memo(function SessionListRow({
-  id,
-  title,
-  active = false,
-  archived = false,
-  status,
-  dot = 'idle',
-  titleDisplay,
-  badges,
-  meta,
-  sub,
-  subClassName = '',
-  onSelect,
-  renaming = false,
-  renameValue = '',
-  onStartRename,
-  onRenameChange,
-  onRenameCommit,
-  onRenameCancel,
-  menuItems,
-  menuOpen: menuOpenProp,
-  onOpenMenu,
-  onCloseMenu,
-  arrived = false,
-  className,
-  style,
-}: SessionListRowProps) {
-  const labels = useChatLabels();
-  const trigger = useRef<HTMLButtonElement | null>(null);
-  const [ownOpen, setOwnOpen] = useState(false);
-  const [contextPos, setContextPos] = useState<{ x: number; y: number } | null>(null);
-  const controlled = menuOpenProp !== undefined;
-  const menuOpen = controlled ? menuOpenProp : ownOpen;
-  const hasMenu = Boolean(menuItems && menuItems.length > 0);
-
-  const open = useCallback(() => (controlled ? onOpenMenu?.(id) : setOwnOpen(true)), [controlled, onOpenMenu, id]);
-  const close = useCallback(() => {
-    setContextPos(null);
-    if (controlled) onCloseMenu?.(id);
-    else setOwnOpen(false);
-  }, [controlled, onCloseMenu, id]);
-
-  const onContextMenu = useCallback(
-    (event: React.MouseEvent<HTMLLIElement>) => {
-      if (!hasMenu) return;
-      event.preventDefault();
-      setContextPos({ x: event.clientX, y: event.clientY });
-      open();
-    },
-    [hasMenu, open],
-  );
-
-  const SelectBox = renaming ? 'div' : 'button';
-  const clipRef = useRef<HTMLDivElement | null>(null);
-  const armSlide = useCallback(() => armTitleSlide(clipRef.current), []);
-  return (
-    <li
-      className={['zg-session-row zg-press-host group relative rounded-[var(--zg-radius-md)] mb-1', className]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-      data-session-id={id}
-      data-active={active ? 'true' : undefined}
-      data-renaming={renaming ? 'true' : undefined}
-      data-archived={archived ? 'true' : undefined}
-      data-arrived={arrived ? '' : undefined}
-      aria-current={active ? 'true' : undefined}
-      onContextMenu={onContextMenu}
-      onPointerEnter={renaming ? undefined : armSlide}
-      onFocus={renaming ? undefined : armSlide}
-    >
-      {/* The select button and the actions trigger are siblings (never nested). While renaming the
-          row is a plain box: the title's editor is a textbox, and a textbox inside a button is
-          nested interactive content (the caret, Space and Enter would belong to the button). */}
-      <div className="py-1 pr-2 pl-1">
-        <SelectBox
-          {...(renaming ? {} : { type: 'button' as const, 'data-row-select': true, onClick: () => onSelect(id) })}
-          className={`block w-full text-left bg-transparent border-0 rounded-[var(--zg-radius-md)] p-0 ${
-            renaming ? '' : 'zg-press-subtle cursor-pointer'
-          }`}
-        >
-          <div className="zg-sidebar-fade flex items-baseline gap-1.5 pr-2">
-            {/* On the title's line (20px), however many lines the row has. */}
-            <span className="w-[18px] h-5 shrink-0 inline-flex items-center justify-center self-start">
-              {status ??
-                (archived ? (
-                  <span
-                    role="img"
-                    aria-label={labels.archived}
-                    title={labels.archived}
-                    className="i-ph-archive text-sm text-[var(--zg-text-muted)] translate-y-[1px]"
-                  />
-                ) : (
-                  <StatusDot state={dot} />
-                ))}
-            </span>
-            {/* The clip masks the title's end; the title inside slides on hover to show the rest. */}
-            <div ref={clipRef} className="zg-title-clip min-w-[45%] flex-1 overflow-hidden">
-              <EditableTitle
-                text={renaming ? renameValue : title}
-                display={titleDisplay ?? title}
-                editing={renaming}
-                onStartEdit={() => onStartRename?.(id, title)}
-                onChange={(v) => onRenameChange?.(v)}
-                onCommit={() => onRenameCommit?.()}
-                onCancel={() => onRenameCancel?.()}
-                className={`zg-session-title text-sm whitespace-nowrap text-[var(--zg-text)] ${
-                  renaming ? 'overflow-hidden' : 'zg-title-slide w-max'
-                }`}
-              />
-            </div>
-            {!renaming && badges}
-            {!renaming && meta}
-          </div>
-          {sub !== undefined && sub !== null && sub !== false && (
-            <div className={`zg-session-sub pl-6 pr-2 ${subClassName}`.trim()}>{sub}</div>
-          )}
-        </SelectBox>
-        {hasMenu && (
-          <>
-            {/* `.zg-row-dots` owns the hover / focus reveal. */}
-            <IconButton
-              ref={trigger}
-              icon="i-ph-dots-three"
-              label={labels.sessionActions}
-              title={labels.moreActions}
-              size="sm"
-              active={menuOpen}
-              aria-haspopup="menu"
-              aria-expanded={menuOpen}
-              data-open={menuOpen ? '' : undefined}
-              className="zg-row-dots zg-hit-extend absolute top-0.5 right-1.5"
-              onClick={(e) => {
-                e.stopPropagation();
-                if (menuOpen) close();
-                else open();
-              }}
-            />
-            <RowActionsMenu
-              open={menuOpen}
-              anchorRef={trigger}
-              position={contextPos}
-              onClose={close}
-              items={menuItems as RowActionItem[]}
-            />
-          </>
-        )}
-      </div>
-    </li>
-  );
-});