@athenaintel/react 0.28.1 → 0.30.0

package/dist/threads/SessionsPage.js

@@ -0,0 +1,753 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SearchIcon, SlidersHorizontalIcon, DownloadIcon, RefreshCwIcon, PlusIcon, FilterIcon, XIcon, PinIcon, MailOpenIcon, MailIcon, ArchiveIcon, CheckIcon } from "lucide-react";
+import { useContext, useState, useEffect, useMemo, useRef } from "react";
+import { Popover, PopoverTrigger, PopoverContent } from "../ui/popover.js";
+import { SessionListSkeleton } from "./SessionList.js";
+import { sessionOriginLabel, pullRequestChip, relativeTime } from "./session-list-model.js";
+import { FOCUS_RING_CLASS, RowIconButton, PullRequestChip, StatusChip } from "./session-row-parts.js";
+import { sessionsFilterChips, groupSessionsBy, SESSIONS_COLUMNS, sessionsCsv, SESSIONS_DATE_PRESETS, datePresetBounds, runStatusLabel, agentLabel, channelLabel, sessionStatusChip, plainExcerpt, creatorLabel } from "./sessions-page-model.js";
+import { readSessionsPageSettings, writeSessionsPageSettings } from "./sessions-page-storage.js";
+import { normalizeSessionsQuery, DEFAULT_COLLAB_CHANNEL, sessionsQueryKey, SESSION_RUN_STATUSES } from "./sessions-query.js";
+import { useAthenaStatewireThreadList, AthenaSessionsLiveContext } from "./statewire-thread-list.js";
+import { useAthenaSessions } from "./use-athena-sessions.js";
+import { cn } from "cnfast";
+const FIELD_LABEL = {
+  search: "search",
+  collabAgentIds: "agent",
+  collabChannelIds: "mode",
+  startChannels: "origin",
+  createdAfter: "created date",
+  createdBefore: "created date",
+  updatedAfter: "updated date",
+  updatedBefore: "updated date",
+  favoritesOnly: "pinned",
+  unreadOnly: "unread",
+  runStatuses: "status",
+  sessionStatuses: "session status",
+  hasPullRequests: "pull requests",
+  createdByMe: "creator",
+  excludeDismissed: "dismissed",
+  excludeTriggered: "who started it",
+  sort: "sort",
+  direction: "sort direction"
+};
+function fieldList(fields) {
+  const names = [...new Set(fields.map((field) => FIELD_LABEL[field]))];
+  return names.length <= 1 ? names[0] ?? "" : `${names.slice(0, -1).join(", ")} and ${names.at(-1)}`;
+}
+const COLUMN_WIDTH = {
+  status: "w-56",
+  origin: "w-24",
+  mode: "w-28",
+  pullRequests: "w-24",
+  creator: "w-32",
+  created: "w-24",
+  updated: "w-24"
+};
+function downloadText(filename, text, type) {
+  if (typeof document === "undefined") return;
+  const url = URL.createObjectURL(new Blob([text], { type }));
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  anchor.rel = "noopener";
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+const SECTION_HEADING_CLASS = "px-3 pb-1 pt-3 text-left font-medium text-[11px] text-muted-foreground/70 uppercase tracking-wide";
+const MenuOption = ({ label, selected, onSelect, disabled = false, role = "menuitemcheckbox" }) => /* @__PURE__ */ jsxs(
+  "button",
+  {
+    type: "button",
+    role,
+    "aria-checked": selected,
+    disabled,
+    onClick: onSelect,
+    className: cn(
+      "flex w-full items-center gap-2 rounded-sm px-2 py-1 text-left text-xs transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50",
+      FOCUS_RING_CLASS
+    ),
+    children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn(
+            "flex size-3.5 shrink-0 items-center justify-center rounded-sm border border-border",
+            selected && "border-primary bg-primary text-primary-foreground"
+          ),
+          children: selected ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-3" }) : null
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
+    ]
+  }
+);
+const MenuSection = ({
+  title,
+  hint,
+  children
+}) => /* @__PURE__ */ jsxs("section", { "aria-label": title, className: "py-1", children: [
+  /* @__PURE__ */ jsx("h4", { className: "px-2 pb-0.5 font-medium text-[11px] text-muted-foreground uppercase tracking-wide", children: title }),
+  hint ? /* @__PURE__ */ jsx("p", { className: "px-2 pb-1 text-[11px] text-muted-foreground", children: hint }) : null,
+  children
+] });
+function toggleValue(values, value) {
+  const current = values ?? [];
+  return current.includes(value) ? current.filter((item) => item !== value) : [...current, value];
+}
+function datePresetOf(after, before, presets) {
+  for (const preset of SESSIONS_DATE_PRESETS) {
+    const bounds = presets[preset.id];
+    if ((bounds.after ?? void 0) === after && (bounds.before ?? void 0) === before) {
+      return preset.id;
+    }
+  }
+  return null;
+}
+const UNAVAILABLE_HINT = "This Athena server cannot filter by this yet.";
+const FilterMenu = ({
+  query,
+  setQuery,
+  unavailable,
+  agentOptions,
+  channelOptions,
+  originOptions,
+  labels
+}) => {
+  var _a;
+  const [presetBounds] = useState(
+    () => Object.fromEntries(
+      SESSIONS_DATE_PRESETS.map((preset) => [preset.id, datePresetBounds(preset.id)])
+    )
+  );
+  const createdPreset = datePresetOf(query.createdAfter, query.createdBefore, presetBounds);
+  const updatedPreset = datePresetOf(query.updatedAfter, query.updatedBefore, presetBounds);
+  const setPreset = (kind, preset) => setQuery((current) => {
+    const bounds = preset ? presetBounds[preset] : {};
+    return kind === "created" ? { ...current, createdAfter: bounds.after, createdBefore: bounds.before } : { ...current, updatedAfter: bounds.after, updatedBefore: bounds.before };
+  });
+  const disabledHint = (field) => unavailable.has(field) ? UNAVAILABLE_HINT : null;
+  return /* @__PURE__ */ jsxs("div", { role: "menu", "aria-label": "Filters", className: "max-h-[70vh] overflow-y-auto p-1", children: [
+    /* @__PURE__ */ jsx(MenuSection, { title: "Status", hint: disabledHint("runStatuses"), children: SESSION_RUN_STATUSES.map((status) => {
+      var _a2;
+      return /* @__PURE__ */ jsx(
+        MenuOption,
+        {
+          label: runStatusLabel(status),
+          selected: ((_a2 = query.runStatuses) == null ? void 0 : _a2.includes(status)) ?? false,
+          disabled: unavailable.has("runStatuses"),
+          onSelect: () => setQuery((current) => ({
+            ...current,
+            runStatuses: toggleValue(current.runStatuses, status)
+          }))
+        },
+        status
+      );
+    }) }),
+    /* @__PURE__ */ jsx(MenuSection, { title: "Pull requests", hint: disabledHint("hasPullRequests"), children: [
+      ["Has pull requests", true],
+      ["No pull requests", false]
+    ].map(([label, value]) => /* @__PURE__ */ jsx(
+      MenuOption,
+      {
+        role: "menuitemradio",
+        label,
+        selected: query.hasPullRequests === value,
+        disabled: unavailable.has("hasPullRequests"),
+        onSelect: () => setQuery((current) => ({
+          ...current,
+          hasPullRequests: current.hasPullRequests === value ? void 0 : value
+        }))
+      },
+      label
+    )) }),
+    /* @__PURE__ */ jsxs(MenuSection, { title: "Read and pinned", children: [
+      /* @__PURE__ */ jsx(
+        MenuOption,
+        {
+          label: "Unread",
+          selected: query.unreadOnly === true,
+          disabled: unavailable.has("unreadOnly"),
+          onSelect: () => setQuery((current) => ({ ...current, unreadOnly: !current.unreadOnly }))
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MenuOption,
+        {
+          label: "Pinned",
+          selected: query.favoritesOnly === true,
+          disabled: unavailable.has("favoritesOnly"),
+          onSelect: () => setQuery((current) => ({ ...current, favoritesOnly: !current.favoritesOnly }))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(MenuSection, { title: "Creator", hint: disabledHint("createdByMe"), children: [
+      [
+        ["You", true],
+        ["Shared with you", false]
+      ].map(([label, value]) => /* @__PURE__ */ jsx(
+        MenuOption,
+        {
+          role: "menuitemradio",
+          label,
+          selected: query.createdByMe === value,
+          disabled: unavailable.has("createdByMe"),
+          onSelect: () => setQuery((current) => ({
+            ...current,
+            createdByMe: current.createdByMe === value ? void 0 : value
+          }))
+        },
+        label
+      )),
+      /* @__PURE__ */ jsx(
+        MenuOption,
+        {
+          label: "Started by a person",
+          selected: query.excludeTriggered === true,
+          onSelect: () => setQuery((current) => ({ ...current, excludeTriggered: !current.excludeTriggered }))
+        }
+      )
+    ] }),
+    agentOptions.length > 0 ? /* @__PURE__ */ jsx(MenuSection, { title: "Agent", hint: disabledHint("collabAgentIds"), children: agentOptions.map((agentId) => {
+      var _a2;
+      return /* @__PURE__ */ jsx(
+        MenuOption,
+        {
+          label: agentLabel(agentId, labels),
+          selected: ((_a2 = query.collabAgentIds) == null ? void 0 : _a2.includes(agentId)) ?? false,
+          disabled: unavailable.has("collabAgentIds"),
+          onSelect: () => setQuery((current) => ({
+            ...current,
+            collabAgentIds: toggleValue(current.collabAgentIds, agentId)
+          }))
+        },
+        agentId
+      );
+    }) }) : null,
+    agentOptions.length > 0 ? /* @__PURE__ */ jsx(
+      MenuSection,
+      {
+        title: "Mode",
+        hint: disabledHint("collabChannelIds") ?? (((_a = query.collabAgentIds) == null ? void 0 : _a.length) ? null : "Pick an agent first: a mode is one of its channels."),
+        children: channelOptions.map((channelId) => {
+          var _a2, _b;
+          return /* @__PURE__ */ jsx(
+            MenuOption,
+            {
+              label: channelLabel(channelId, labels),
+              selected: ((_a2 = query.collabChannelIds) == null ? void 0 : _a2.includes(channelId)) ?? false,
+              disabled: unavailable.has("collabChannelIds") || !((_b = query.collabAgentIds) == null ? void 0 : _b.length),
+              onSelect: () => setQuery((current) => ({
+                ...current,
+                collabChannelIds: toggleValue(current.collabChannelIds, channelId)
+              }))
+            },
+            channelId
+          );
+        })
+      }
+    ) : null,
+    originOptions.length > 0 ? /* @__PURE__ */ jsx(MenuSection, { title: "Origin", hint: disabledHint("startChannels"), children: originOptions.map((channel) => {
+      var _a2;
+      return /* @__PURE__ */ jsx(
+        MenuOption,
+        {
+          label: sessionOriginLabel({ startChannel: channel, appId: null, triggerType: null }) ?? channel,
+          selected: ((_a2 = query.startChannels) == null ? void 0 : _a2.includes(channel)) ?? false,
+          disabled: unavailable.has("startChannels"),
+          onSelect: () => setQuery((current) => ({
+            ...current,
+            startChannels: toggleValue(current.startChannels, channel)
+          }))
+        },
+        channel
+      );
+    }) }) : null,
+    /* @__PURE__ */ jsx(MenuSection, { title: "Created", children: SESSIONS_DATE_PRESETS.map((preset) => /* @__PURE__ */ jsx(
+      MenuOption,
+      {
+        role: "menuitemradio",
+        label: preset.label,
+        selected: createdPreset === preset.id,
+        onSelect: () => setPreset("created", createdPreset === preset.id ? null : preset.id)
+      },
+      preset.id
+    )) }),
+    /* @__PURE__ */ jsx(MenuSection, { title: "Updated", children: SESSIONS_DATE_PRESETS.map((preset) => /* @__PURE__ */ jsx(
+      MenuOption,
+      {
+        role: "menuitemradio",
+        label: preset.label,
+        selected: updatedPreset === preset.id,
+        onSelect: () => setPreset("updated", updatedPreset === preset.id ? null : preset.id)
+      },
+      preset.id
+    )) })
+  ] });
+};
+const DisplayMenu = ({ query, setQuery, display, setDisplay }) => {
+  const sort = query.sort ?? "updated";
+  const direction = query.direction ?? "desc";
+  return /* @__PURE__ */ jsxs("div", { role: "menu", "aria-label": "Display options", className: "p-1", children: [
+    /* @__PURE__ */ jsx(MenuSection, { title: "Sort by", children: [
+      ["updated", "Last updated"],
+      ["created", "Created"]
+    ].map(([value, label]) => /* @__PURE__ */ jsx(
+      MenuOption,
+      {
+        role: "menuitemradio",
+        label,
+        selected: sort === value,
+        onSelect: () => setQuery((current) => ({ ...current, sort: value }))
+      },
+      value
+    )) }),
+    /* @__PURE__ */ jsx(MenuSection, { title: "Order", children: [
+      ["desc", "Newest first"],
+      ["asc", "Oldest first"]
+    ].map(([value, label]) => /* @__PURE__ */ jsx(
+      MenuOption,
+      {
+        role: "menuitemradio",
+        label,
+        selected: direction === value,
+        onSelect: () => setQuery((current) => ({ ...current, direction: value }))
+      },
+      value
+    )) }),
+    /* @__PURE__ */ jsx(MenuSection, { title: "Group by", children: [
+      ["attention", "What it needs"],
+      ["status", "Run status"],
+      ["none", "No grouping"]
+    ].map(([value, label]) => /* @__PURE__ */ jsx(
+      MenuOption,
+      {
+        role: "menuitemradio",
+        label,
+        selected: display.groupBy === value,
+        onSelect: () => setDisplay((current) => ({ ...current, groupBy: value }))
+      },
+      value
+    )) }),
+    /* @__PURE__ */ jsx(MenuSection, { title: "Columns", children: SESSIONS_COLUMNS.map((column) => /* @__PURE__ */ jsx(
+      MenuOption,
+      {
+        label: column.label,
+        selected: display.columns.includes(column.id),
+        onSelect: () => setDisplay((current) => ({
+          ...current,
+          columns: current.columns.includes(column.id) ? current.columns.filter((id) => id !== column.id) : SESSIONS_COLUMNS.map((candidate) => candidate.id).filter(
+            (id) => id === column.id || current.columns.includes(id)
+          )
+        }))
+      },
+      column.id
+    )) })
+  ] });
+};
+const HEADER_BUTTON_CLASS = cn(
+  "inline-flex h-8 items-center gap-1.5 rounded-md border border-border/60 px-2.5 font-medium text-muted-foreground text-xs transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50",
+  FOCUS_RING_CLASS
+);
+const SessionsRow = ({ row, columns, isActive, labels, list, onOpen }) => {
+  const status = sessionStatusChip(row);
+  const excerpt = plainExcerpt(row.preview);
+  const chip = pullRequestChip(row.pullRequests);
+  const origin = sessionOriginLabel(row);
+  const cell = (id) => {
+    switch (id) {
+      case "status":
+        return /* @__PURE__ */ jsx(StatusChip, { label: status.label, tone: status.tone, detail: status.detail });
+      case "origin":
+        return origin ? /* @__PURE__ */ jsx("span", { className: "rounded-full border border-border/60 px-1.5 py-px text-[10px] text-muted-foreground", children: origin }) : null;
+      case "mode":
+        return row.collabAgentId ? /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground text-xs", children: channelLabel(row.collabChannelId, labels) }) : null;
+      case "pullRequests":
+        return chip ? /* @__PURE__ */ jsx(PullRequestChip, { chip, pullRequests: row.pullRequests ?? [] }) : null;
+      case "creator":
+        return /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground text-xs", children: creatorLabel(row.createdByMe) });
+      case "created":
+        return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: row.createdAt ? relativeTime(row.createdAt) : "" });
+      case "updated":
+        return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: relativeTime(row.updatedAt) });
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "tr",
+    {
+      "data-thread-id": row.id,
+      "data-active": isActive || void 0,
+      "data-unread": row.isUnread || void 0,
+      onClick: () => onOpen(row),
+      className: cn(
+        "group cursor-pointer border-border/40 border-b transition-colors hover:bg-muted/40",
+        isActive && "bg-muted"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("td", { className: "min-w-0 py-2 pr-2 pl-3 align-top", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                role: row.isUnread ? "img" : void 0,
+                "aria-label": row.isUnread ? "Unread" : void 0,
+                "aria-hidden": row.isUnread ? void 0 : true,
+                className: cn("size-2 shrink-0 rounded-full", row.isUnread ? "bg-primary" : "bg-transparent")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  onOpen(row);
+                },
+                className: cn(
+                  "min-w-0 truncate text-left text-foreground text-sm",
+                  row.isUnread ? "font-semibold" : "font-medium",
+                  FOCUS_RING_CLASS
+                ),
+                children: row.title ?? "Untitled"
+              }
+            ),
+            row.isFavorited ? /* @__PURE__ */ jsx(PinIcon, { role: "img", "aria-label": "Pinned", className: "size-3 shrink-0 fill-current text-muted-foreground" }) : null
+          ] }),
+          excerpt ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate pl-4 text-muted-foreground text-xs", children: excerpt }) : null
+        ] }),
+        columns.map((id) => /* @__PURE__ */ jsx("td", { "data-column": id, className: "min-w-0 truncate px-2 py-2 align-top", children: cell(id) }, id)),
+        /* @__PURE__ */ jsx("td", { className: "py-1.5 pr-2 align-top", children: /* @__PURE__ */ jsxs("div", { "data-row-actions": true, className: "flex items-center justify-end gap-0.5", children: [
+          /* @__PURE__ */ jsx(
+            RowIconButton,
+            {
+              label: row.isUnread ? "Mark read" : "Mark unread",
+              action: "read-state",
+              pending: list.readStatePendingThreadIds.has(row.id),
+              onClick: () => list.setReadState({ threadId: row.id, isUnread: !row.isUnread, updatedAt: row.updatedAt }),
+              children: row.isUnread ? /* @__PURE__ */ jsx(MailOpenIcon, { className: "size-3.5", "aria-hidden": true }) : /* @__PURE__ */ jsx(MailIcon, { className: "size-3.5", "aria-hidden": true })
+            }
+          ),
+          list.favoriteToggleAvailable ? /* @__PURE__ */ jsx(
+            RowIconButton,
+            {
+              label: row.isFavorited ? "Unpin session" : "Pin session",
+              action: "pin",
+              pressed: row.isFavorited,
+              pending: list.favoritePendingThreadIds.has(row.id),
+              onClick: () => list.setFavorited({ threadId: row.id, isFavorited: !row.isFavorited }),
+              children: /* @__PURE__ */ jsx(PinIcon, { className: cn("size-3.5", row.isFavorited && "fill-current"), "aria-hidden": true })
+            }
+          ) : null,
+          list.archiveAvailable ? /* @__PURE__ */ jsx(
+            RowIconButton,
+            {
+              label: "Archive session",
+              action: "archive",
+              pending: list.archivePendingThreadIds.has(row.id),
+              onClick: () => list.archiveThread(row.id),
+              children: /* @__PURE__ */ jsx(ArchiveIcon, { className: "size-3.5", "aria-hidden": true })
+            }
+          ) : null
+        ] }) })
+      ]
+    }
+  );
+};
+function SessionsPageBody({
+  className,
+  title = "Sessions",
+  onOpenSession,
+  labels,
+  storageKey = "default",
+  defaultQuery,
+  pageSize,
+  showNewSession = true,
+  onNewSession,
+  list
+}) {
+  const [initial] = useState(() => readSessionsPageSettings(storageKey));
+  const [savedDefault, setSavedDefault] = useState(initial.defaultQuery);
+  const [query, setQueryState] = useState(
+    () => initial.defaultQuery ?? normalizeSessionsQuery(defaultQuery ?? {})
+  );
+  const [display, setDisplayState] = useState(initial.display);
+  const [searchInput, setSearchInput] = useState(query.search ?? "");
+  const setQuery = (update) => setQueryState((current) => normalizeSessionsQuery(update(current)));
+  const setDisplay = (update) => setDisplayState((current) => {
+    const next = update(current);
+    writeSessionsPageSettings(storageKey, { defaultQuery: savedDefault, display: next });
+    return next;
+  });
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      setQueryState((current) => {
+        const search = searchInput.trim();
+        if ((current.search ?? "") === search) return current;
+        return normalizeSessionsQuery({ ...current, search });
+      });
+    }, 250);
+    return () => clearTimeout(handle);
+  }, [searchInput]);
+  const sessions = useAthenaSessions({ query, ...pageSize ? { pageSize } : {} });
+  const unavailable = useMemo(
+    () => /* @__PURE__ */ new Set([...sessions.unsupportedFields, ...sessions.unavailableFields]),
+    [sessions.unsupportedFields, sessions.unavailableFields]
+  );
+  const seenRef = useRef({ agents: /* @__PURE__ */ new Set(), channels: /* @__PURE__ */ new Set(), origins: /* @__PURE__ */ new Set() });
+  for (const row of sessions.rows) {
+    if (row.collabAgentId) {
+      seenRef.current.agents.add(row.collabAgentId);
+      seenRef.current.channels.add(row.collabChannelId || DEFAULT_COLLAB_CHANNEL);
+    }
+    if (row.startChannel) seenRef.current.origins.add(row.startChannel);
+  }
+  const agentOptions = [
+    .../* @__PURE__ */ new Set([...Object.keys((labels == null ? void 0 : labels.agents) ?? {}), ...seenRef.current.agents, ...query.collabAgentIds ?? []])
+  ];
+  const channelOptions = [
+    .../* @__PURE__ */ new Set([
+      DEFAULT_COLLAB_CHANNEL,
+      ...Object.keys((labels == null ? void 0 : labels.channels) ?? {}),
+      ...seenRef.current.channels,
+      ...query.collabChannelIds ?? []
+    ])
+  ];
+  const originOptions = [.../* @__PURE__ */ new Set([...seenRef.current.origins, ...query.startChannels ?? []])];
+  const chips = sessionsFilterChips(query, labels);
+  const sections = groupSessionsBy(sessions.rows, display.groupBy);
+  const columns = SESSIONS_COLUMNS.map((column) => column.id).filter((id) => display.columns.includes(id));
+  const { search: _search, ...queryWithoutSearch } = query;
+  const isSavedDefault = savedDefault !== null && sessionsQueryKey(savedDefault) === sessionsQueryKey(queryWithoutSearch);
+  const hasFilters = chips.length > 0;
+  const open = (row) => {
+    list.selectThread(row.id);
+    onOpenSession == null ? void 0 : onOpenSession({ threadId: row.id, title: row.title });
+  };
+  const saveAsDefault = () => {
+    const saved = normalizeSessionsQuery(queryWithoutSearch);
+    setSavedDefault(saved);
+    writeSessionsPageSettings(storageKey, { defaultQuery: saved, display });
+  };
+  const resetToDefault = () => {
+    setQueryState({ ...savedDefault ?? normalizeSessionsQuery(defaultQuery ?? {}) });
+    setSearchInput("");
+  };
+  const clearFilters = () => {
+    setQuery((current) => ({ sort: current.sort, direction: current.direction, search: current.search }));
+  };
+  const removeChip = (field) => setQuery((current) => {
+    const next = { ...current, [field]: void 0 };
+    if (field === "collabAgentIds") next.collabChannelIds = void 0;
+    return next;
+  });
+  const exportCsv = () => downloadText(
+    `sessions-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}.csv`,
+    sessionsCsv(sessions.rows, labels),
+    "text/csv;charset=utf-8"
+  );
+  const showSkeleton = sessions.rows.length === 0 && (!sessions.hasResolvedFirstPage || sessions.isFetching);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "sessions-page",
+      className: cn("athena-sdk-chrome flex min-h-0 flex-col gap-3 p-4", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsx("h2", { className: "font-semibold text-base text-foreground", children: title }),
+          /* @__PURE__ */ jsxs("span", { "data-testid": "sessions-count", className: "text-muted-foreground text-xs", children: [
+            sessions.rows.length,
+            sessions.hasNextPage ? "+" : ""
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+          /* @__PURE__ */ jsxs("label", { className: "relative block w-64 max-w-full", children: [
+            /* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-muted-foreground" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Search sessions" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "search",
+                value: searchInput,
+                onChange: (event) => setSearchInput(event.target.value),
+                placeholder: "Search sessions…",
+                className: "h-8 w-full rounded-md border border-border/60 bg-muted/40 pr-2 pl-8 text-sm outline-none focus:border-primary focus:bg-background"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Popover, { children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { type: "button", className: HEADER_BUTTON_CLASS, "aria-label": "Display options", children: [
+              /* @__PURE__ */ jsx(SlidersHorizontalIcon, { className: "size-3.5", "aria-hidden": true }),
+              "Display"
+            ] }) }),
+            /* @__PURE__ */ jsx(PopoverContent, { align: "end", className: "w-56", children: /* @__PURE__ */ jsx(DisplayMenu, { query, setQuery, display, setDisplay }) })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: exportCsv,
+              disabled: sessions.rows.length === 0,
+              className: HEADER_BUTTON_CLASS,
+              title: "Export the loaded sessions as CSV",
+              children: [
+                /* @__PURE__ */ jsx(DownloadIcon, { className: "size-3.5", "aria-hidden": true }),
+                "Export CSV"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: sessions.refresh,
+              disabled: sessions.isFetching,
+              className: HEADER_BUTTON_CLASS,
+              "aria-label": "Refresh sessions",
+              title: "Refresh sessions",
+              children: /* @__PURE__ */ jsx(RefreshCwIcon, { className: cn("size-3.5", sessions.isFetching && "animate-spin"), "aria-hidden": true })
+            }
+          ),
+          showNewSession ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                list.newThread();
+                onNewSession == null ? void 0 : onNewSession();
+              },
+              className: cn(
+                "inline-flex h-8 items-center gap-1.5 rounded-md bg-primary px-3 font-medium text-primary-foreground text-xs transition-colors hover:bg-primary/90",
+                FOCUS_RING_CLASS
+              ),
+              children: [
+                /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5", "aria-hidden": true }),
+                "New session"
+              ]
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", "data-testid": "sessions-filters", children: [
+          /* @__PURE__ */ jsxs(Popover, { children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { type: "button", className: HEADER_BUTTON_CLASS, children: [
+              /* @__PURE__ */ jsx(FilterIcon, { className: "size-3.5", "aria-hidden": true }),
+              "Filter"
+            ] }) }),
+            /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "w-64", children: /* @__PURE__ */ jsx(
+              FilterMenu,
+              {
+                query,
+                setQuery,
+                unavailable,
+                agentOptions,
+                channelOptions,
+                originOptions,
+                labels
+              }
+            ) })
+          ] }),
+          chips.map((chip) => /* @__PURE__ */ jsxs(
+            "span",
+            {
+              "data-filter-chip": chip.field,
+              className: "inline-flex h-7 items-center gap-1 rounded-full border border-border/60 bg-muted/40 pr-1 pl-2.5 text-foreground text-xs",
+              children: [
+                chip.label,
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Remove filter ${chip.label}`,
+                    onClick: () => removeChip(chip.field),
+                    className: cn("rounded-full p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground", FOCUS_RING_CLASS),
+                    children: /* @__PURE__ */ jsx(XIcon, { className: "size-3", "aria-hidden": true })
+                  }
+                )
+              ]
+            },
+            chip.field + chip.label
+          )),
+          hasFilters ? /* @__PURE__ */ jsx("button", { type: "button", onClick: clearFilters, className: cn("px-1.5 text-muted-foreground text-xs hover:text-foreground", FOCUS_RING_CLASS), children: "Clear" }) : null,
+          /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+          savedDefault !== null && !isSavedDefault ? /* @__PURE__ */ jsx("button", { type: "button", onClick: resetToDefault, className: cn("px-1.5 text-muted-foreground text-xs hover:text-foreground", FOCUS_RING_CLASS), children: "Reset to default" }) : null,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: saveAsDefault,
+              disabled: isSavedDefault,
+              className: cn("px-1.5 text-muted-foreground text-xs hover:text-foreground disabled:opacity-50", FOCUS_RING_CLASS),
+              children: isSavedDefault ? "Saved as default" : "Save as default"
+            }
+          )
+        ] }),
+        sessions.degradedFields.length > 0 || sessions.unavailableFields.length > 0 ? /* @__PURE__ */ jsxs(
+          "p",
+          {
+            role: "status",
+            "data-testid": "sessions-degraded",
+            className: "rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-amber-900 text-xs",
+            children: [
+              sessions.degradedFields.length > 0 ? `This Athena server cannot filter by ${fieldList(sessions.degradedFields)} yet, so they apply to the sessions loaded so far. ` : "",
+              sessions.unavailableFields.length > 0 ? `Filtering by ${fieldList(sessions.unavailableFields)} is not available on this server yet and is off.` : ""
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-auto", children: [
+          showSkeleton ? /* @__PURE__ */ jsx(SessionListSkeleton, { rows: 6 }) : sections.length === 0 ? /* @__PURE__ */ jsxs("div", { "data-testid": "sessions-empty", className: "flex flex-col items-center gap-2 py-12 text-center", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: hasFilters || query.search ? "No sessions match these filters." : "No sessions yet." }),
+            hasFilters ? /* @__PURE__ */ jsx("button", { type: "button", onClick: clearFilters, className: HEADER_BUTTON_CLASS, children: "Clear filters" }) : null
+          ] }) : /* @__PURE__ */ jsxs("table", { className: "w-full table-fixed border-collapse text-sm", "aria-busy": sessions.isFetching || void 0, children: [
+            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-border/60 border-b text-left text-[11px] text-muted-foreground uppercase tracking-wide", children: [
+              /* @__PURE__ */ jsx("th", { scope: "col", className: "py-2 pl-7 font-medium", children: "Session" }),
+              columns.map((id) => {
+                var _a;
+                return /* @__PURE__ */ jsx("th", { scope: "col", className: cn("px-2 py-2 font-medium", COLUMN_WIDTH[id]), children: (_a = SESSIONS_COLUMNS.find((column) => column.id === id)) == null ? void 0 : _a.label }, id);
+              }),
+              /* @__PURE__ */ jsx("th", { scope: "col", className: "w-24 py-2 pr-2", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Actions" }) })
+            ] }) }),
+            sections.map((section) => /* @__PURE__ */ jsxs("tbody", { "data-group": section.label ?? void 0, children: [
+              section.label ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("th", { colSpan: columns.length + 2, scope: "colgroup", className: SECTION_HEADING_CLASS, children: [
+                section.label,
+                /* @__PURE__ */ jsx("span", { className: "ml-1.5 font-normal normal-case tracking-normal", children: section.items.length })
+              ] }) }) : null,
+              section.items.map((row) => /* @__PURE__ */ jsx(
+                SessionsRow,
+                {
+                  row,
+                  columns,
+                  isActive: row.id === list.activeThreadId,
+                  labels,
+                  list,
+                  onOpen: open
+                },
+                row.id
+              ))
+            ] }, section.key))
+          ] }),
+          sessions.hasNextPage && !showSkeleton ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: sessions.fetchNextPage,
+              disabled: sessions.isFetchingNextPage,
+              className: cn("mt-2 w-full rounded-md py-2 text-muted-foreground text-xs transition-colors hover:bg-muted disabled:opacity-50", FOCUS_RING_CLASS),
+              children: sessions.isFetchingNextPage ? "Loading…" : sessions.isFetchNextPageError ? "Retry loading more" : "Load more"
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+function SessionsPage(props) {
+  const list = useAthenaStatewireThreadList();
+  const live = useContext(AthenaSessionsLiveContext);
+  if (!list || !live) return null;
+  return /* @__PURE__ */ jsx(SessionsPageBody, { ...props, list });
+}
+export {
+  SessionsPage
+};
+//# sourceMappingURL=SessionsPage.js.map