@sentry/junior-dashboard 0.273.0 → 0.274.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.273.0",
+  "version": "0.274.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -39,10 +39,10 @@
     "remark-gfm": "^4.0.1",
     "shiki": "4.1.0",
     "zod": "^4.5.4",
-    "@sentry/junior-plugin-api": "0.273.0"
+    "@sentry/junior-plugin-api": "0.274.0"
   },
   "peerDependencies": {
-    "@sentry/junior": "0.273.0"
+    "@sentry/junior": "0.274.0"
   },
   "devDependencies": {
     "@oxlint/plugins": "1.79.0",
@@ -63,7 +63,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "^7.0.2",
     "vitest": "^4.1.12",
-    "@sentry/junior": "0.273.0"
+    "@sentry/junior": "0.274.0"
   },
   "scripts": {
     "build": "pnpm --filter @sentry/junior-plugin-api build && pnpm --filter @sentry/junior build && pnpm run build:client && pnpm run build:css && pnpm run build:server",

package/src/client/conversations/ConversationComposer.tsx

@@ -26,6 +26,7 @@ import {
 } from "../components/ui/tooltip";
 import { useDashboardOnline } from "../connection";
 import { cn, dashboardComposerSurfaceClass } from "../styles";
+import { useComposerAutocorrect } from "./composerAutocorrect";
 
 const DRAFT_STORAGE_PREFIX = "junior:dashboard:conversation-draft:";
 // Keep keystrokes off the storage path. Mobile Safari pays for every write.
@@ -132,6 +133,7 @@ export const ConversationComposer = memo(function ConversationComposer(
   const [dragging, setDragging] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const online = useDashboardOnline();
+  const [autocorrect] = useComposerAutocorrect();
   const id = useId();
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const draftRef = useRef(initialDraft);
@@ -490,10 +492,11 @@ export const ConversationComposer = memo(function ConversationComposer(
         </label>
         <textarea
           // Chat is technical: ids, paths, code. Keep the keyboard chat-like
-          // (Send) and suppress browser IME assist that fights identifiers.
-          autoCapitalize="off"
+          // (Send) and suppress browser IME assist that fights identifiers,
+          // unless the user turns autocorrect on in settings.
+          autoCapitalize={autocorrect ? "sentences" : "off"}
           autoComplete="off"
-          autoCorrect="off"
+          autoCorrect={autocorrect ? "on" : "off"}
           className="min-h-12 max-h-28 w-full resize-none overflow-y-auto border-0 bg-transparent px-3 py-3 font-sans text-base leading-relaxed text-dashboard-text outline-none placeholder:text-dashboard-text-muted/65 md:min-h-14 md:max-h-[min(calc(12lh_+_1.5rem),40dvh)] md:px-4 md:py-3"
           disabled={Boolean(props.restoreDraftOnError && createPending)}
           enterKeyHint="send"
@@ -510,7 +513,7 @@ export const ConversationComposer = memo(function ConversationComposer(
           placeholder="Message Junior…"
           ref={textareaRef}
           rows={1}
-          spellCheck={false}
+          spellCheck={autocorrect}
         />
         <div
           className={cn(

package/src/client/conversations/ConversationSidebar.tsx

@@ -1,20 +1,27 @@
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
-import { Archive, ArchiveRestore, CircleAlert, SquarePen } from "lucide-react";
+import {
+  Archive,
+  ArchiveRestore,
+  ChevronRight,
+  CircleAlert,
+  Inbox,
+  LockKeyhole,
+  SquarePen,
+} from "lucide-react";
 import { Link } from "react-router";
 
 import { useArchiveConversation } from "./queries";
 import { conversationPath } from "./conversationRoutes";
 import {
   conversationDisplayTitle,
-  slackLocationLabel,
   visualStatusForConversation,
 } from "../format";
+import { formatCompactAge } from "./conversationAge";
 import { cn } from "../styles";
 import type { Conversation } from "../types";
 import { Notice, NoticeAction } from "../components/Notice";
 import { AnimatedList } from "./AnimatedList";
 import {
-  attentionConversationIds,
   buildConversationSections,
   type ConversationSection,
 } from "./conversationSections";
@@ -29,8 +36,8 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "../components/ui/tooltip";
-import { ConversationSidebarAnnotations } from "./ConversationMeta";
-import { ConversationListStatusIcon } from "./ConversationListStatusIcon";
+import { ShimmerText } from "../components/ShimmerText";
+import type { WaitingConversation } from "../review-desk/queries";
 
 type ConversationSidebarEntry =
   | {
@@ -55,11 +62,13 @@ export function ConversationSidebar(props: {
   conversations: Conversation[];
   error?: string;
   finishedConversationIds: ReadonlySet<string>;
+  /** Opened while unread; keeps its unread place until another one opens. */
+  heldConversationId?: string;
   loading: boolean;
   query: string;
   selectedId?: string;
   timeZone: string;
-  waitingConversationIds: ReadonlySet<string>;
+  waitingConversations: ReadonlyMap<string, WaitingConversation>;
   /**
    * `panel` = split-pane dock with internal scroll.
    * `landing` = flow nav under create compose (parent owns scroll).
@@ -97,10 +106,11 @@ export function ConversationSidebar(props: {
     () =>
       conversationSidebarEntries(
         buildConversationSections(props.conversations, {
-          attentionIds: attentionConversationIds(
-            props.waitingConversationIds,
-            props.finishedConversationIds,
-          ),
+          attentionIds: new Set([
+            ...props.waitingConversations.keys(),
+            ...props.finishedConversationIds,
+            ...(props.heldConversationId ? [props.heldConversationId] : []),
+          ]),
           nowMs: Date.now(),
           timeZone: props.timeZone,
         }),
@@ -110,8 +120,9 @@ export function ConversationSidebar(props: {
       collapsedKeys,
       props.conversations,
       props.finishedConversationIds,
+      props.heldConversationId,
       props.timeZone,
-      props.waitingConversationIds,
+      props.waitingConversations,
     ],
   );
   return (
@@ -204,13 +215,13 @@ export function ConversationSidebar(props: {
               ) : (
                 <ConversationSidebarRow
                   conversation={entry.conversation}
-                  finishedSinceSeen={props.finishedConversationIds.has(
-                    entry.conversation.id,
-                  )}
                   onArchiveError={handleArchiveError}
                   onArchived={handleArchived}
                   selected={entry.conversation.id === props.selectedId}
-                  waitingOnViewer={props.waitingConversationIds.has(
+                  unread={props.finishedConversationIds.has(
+                    entry.conversation.id,
+                  )}
+                  waiting={props.waitingConversations.get(
                     entry.conversation.id,
                   )}
                 />
@@ -262,12 +273,15 @@ function ConversationRowsLoading() {
     >
       <span className="sr-only">Loading your conversations</span>
       <Skeleton className="mb-1 ml-2.5 mt-1.5 h-2.5 w-12" />
-      {Array.from({ length: 7 }, (_, index) => (
-        <div className="grid gap-1 rounded-lg px-3 py-2" key={index}>
+      {Array.from({ length: 10 }, (_, index) => (
+        <div
+          className="flex items-center justify-between gap-3 rounded-lg py-2 pl-[1.625rem] pr-3"
+          key={index}
+        >
           <Skeleton
             className={cn("h-4", index % 3 === 0 ? "w-4/5" : "w-3/5")}
           />
-          <Skeleton className="h-3 w-2/5 opacity-70" />
+          <Skeleton className="h-3 w-6 opacity-70" />
         </div>
       ))}
     </div>
@@ -301,11 +315,11 @@ function conversationSidebarEntries(
 
 const ConversationSidebarRow = memo(function ConversationSidebarRow(props: {
   conversation: Conversation;
-  finishedSinceSeen: boolean;
   onArchiveError(conversation: Conversation, wasArchiving: boolean): void;
   onArchived(conversation: Conversation): void;
   selected: boolean;
-  waitingOnViewer: boolean;
+  unread: boolean;
+  waiting?: WaitingConversation;
 }) {
   const archive = useArchiveConversation(props.conversation.id, {
     // Read the attempted direction from the mutation call, not the (possibly
@@ -321,60 +335,82 @@ const ConversationSidebarRow = memo(function ConversationSidebarRow(props: {
     },
   });
   const status = visualStatusForConversation(props.conversation);
-  const location = slackLocationLabel(props.conversation, {
-    includeId: false,
-  });
   const title = conversationDisplayTitle(props.conversation);
-  const hasAnnotations = Boolean(props.conversation.sidebarAnnotations?.length);
-  const isPrivate = props.conversation.visibility === "private";
-  // Linked work is denser and more actionable than channel; hide channel when
-  // annotations own the meta row. Also skip a location that only restates the
-  // title (common for redacted private destinations).
-  const showLocation =
-    Boolean(location) &&
-    !hasAnnotations &&
-    location?.toLocaleLowerCase() !== title.toLocaleLowerCase();
-  const hasMeta = showLocation || hasAnnotations;
+  // Unread and waiting rows read like unread mail: a dot and a bold title.
+  const emphasized = props.unread || Boolean(props.waiting);
   return (
-    <div className="mobile-conversation-row group relative min-w-0">
+    <div
+      className={cn(
+        "mobile-conversation-row group relative min-w-0 rounded-lg transition-colors hover:bg-dashboard-fill-hover",
+        props.selected && "bg-dashboard-surface-active",
+      )}
+    >
       <Link
         aria-current={props.selected ? "page" : undefined}
-        className={cn(
-          "block min-w-0 rounded-lg px-3 py-2 text-inherit no-underline transition-colors hover:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus max-sm:pr-10",
-          props.selected && "bg-dashboard-surface-active",
-        )}
+        className="grid min-w-0 grid-cols-[0.375rem_minmax(0,1fr)_auto] items-center gap-x-2 rounded-lg px-3 py-1.5 text-inherit no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus max-sm:pr-10"
         to={conversationPath(props.conversation.id)}
       >
-        <div className="grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-start gap-x-1.5">
-          <div className="col-start-1 row-start-1 mt-[0.3rem] grid size-3 shrink-0 place-items-center">
-            <ConversationListStatusIcon
-              finishedSinceSeen={props.finishedSinceSeen}
-              isPrivate={isPrivate}
-              status={status}
-              waitingOnViewer={props.waitingOnViewer}
+        <span className="grid place-items-center">
+          {emphasized ? (
+            <span
+              aria-label={props.waiting ? "Waiting on you" : "Unread"}
+              className="size-1.5 shrink-0 rounded-full bg-dashboard-accent"
+              role="img"
+            />
+          ) : props.conversation.visibility === "private" ? (
+            <LockKeyhole
+              aria-label="Private conversation"
+              className="size-3 shrink-0 text-dashboard-text-faint"
             />
-          </div>
-          <div className="col-start-2 row-start-1 min-w-0 truncate font-sans text-sm font-medium leading-snug text-dashboard-text">
-            {title}
-          </div>
-          {hasMeta ? (
-            <div className="col-start-2 row-start-2 mt-1 flex min-w-0 items-center gap-1.5 font-sans text-xs leading-tight text-dashboard-text-muted">
-              {showLocation ? (
-                <span className="truncate">{location}</span>
-              ) : null}
-              <ConversationSidebarAnnotations
-                annotations={props.conversation.sidebarAnnotations}
-              />
-            </div>
           ) : null}
-        </div>
+        </span>
+        <span
+          className={cn(
+            "min-w-0 truncate font-sans text-sm leading-snug",
+            emphasized
+              ? "font-semibold text-dashboard-text"
+              : status === "active"
+                ? "text-dashboard-text"
+                : "text-dashboard-text-muted",
+          )}
+        >
+          {title}
+        </span>
+        <ConversationRowState
+          lastSeenAt={props.conversation.lastSeenAt}
+          status={status}
+        />
       </Link>
+      {props.waiting ? (
+        <Link
+          className="mb-1.5 ml-[1.625rem] mr-3 flex min-w-0 items-center gap-1.5 rounded-md border border-dashboard-border-strong bg-dashboard-surface-raised px-2 py-1 font-sans text-xs text-dashboard-text no-underline transition-colors hover:border-dashboard-border-interactive focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus"
+          to={conversationPath(props.conversation.id, { reviewItems: true })}
+        >
+          <Inbox
+            aria-hidden="true"
+            className="size-3 shrink-0 text-dashboard-text-muted"
+          />
+          <span className="min-w-0 truncate">{props.waiting.title}</span>
+          {props.waiting.count > 1 ? (
+            <span className="ml-auto shrink-0 text-dashboard-text-faint">
+              +{props.waiting.count - 1} more
+            </span>
+          ) : null}
+          <ChevronRight
+            aria-hidden="true"
+            className={cn(
+              "size-3 shrink-0 text-dashboard-text-muted",
+              props.waiting.count > 1 ? undefined : "ml-auto",
+            )}
+          />
+        </Link>
+      ) : null}
       <Tooltip>
         <TooltipTrigger
           render={
             <button
               aria-label={`${props.conversation.archivedAt ? "Restore" : "Archive"} ${title}`}
-              className="absolute right-1.5 top-1/2 z-10 grid size-7 -translate-y-1/2 cursor-pointer place-items-center rounded-md bg-dashboard-surface-active text-dashboard-text-muted transition hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus sm:pointer-events-none sm:opacity-0 sm:focus:pointer-events-auto sm:focus:opacity-100 sm:group-focus-within:pointer-events-auto sm:group-focus-within:opacity-100 sm:group-hover:pointer-events-auto sm:group-hover:opacity-100 disabled:cursor-not-allowed"
+              className="absolute right-1.5 top-0.5 z-10 grid size-7 cursor-pointer place-items-center rounded-md bg-dashboard-surface-active text-dashboard-text-muted transition hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus sm:pointer-events-none sm:opacity-0 sm:focus:pointer-events-auto sm:focus:opacity-100 sm:group-focus-within:pointer-events-auto sm:group-focus-within:opacity-100 sm:group-hover:pointer-events-auto sm:group-hover:opacity-100 disabled:cursor-not-allowed"
               disabled={archive.isPending}
               onClick={() =>
                 archive.mutate({
@@ -400,6 +436,31 @@ const ConversationSidebarRow = memo(function ConversationSidebarRow(props: {
   );
 });
 
+/** Show the row age, or the status when the conversation runs or failed. */
+function ConversationRowState(props: {
+  lastSeenAt: string;
+  status: ReturnType<typeof visualStatusForConversation>;
+}) {
+  if (props.status === "active") {
+    return (
+      <ShimmerText
+        active
+        className="font-sans text-xs text-dashboard-text-muted"
+      >
+        Running
+      </ShimmerText>
+    );
+  }
+  if (props.status === "failed") {
+    return <span className="font-sans text-xs text-rose-400">Failed</span>;
+  }
+  return (
+    <span className="font-sans text-xs tabular-nums text-dashboard-text-faint">
+      {formatCompactAge(props.lastSeenAt)}
+    </span>
+  );
+}
+
 function ArchiveConversationErrorNotice(props: {
   conversation: Conversation;
   onDismiss(): void;

package/src/client/conversations/ConversationWorkspace.tsx

@@ -24,7 +24,10 @@ import { buildConversations, getDashboardTimeZone } from "../format";
 import { useDebouncedValue } from "../debouncedValue";
 import type { Conversation } from "../types";
 import { ConversationPage } from "./ConversationPage";
-import { useWaitingConversationIds } from "../review-desk/queries";
+import {
+  useWaitingConversationIds,
+  useWaitingConversations,
+} from "../review-desk/queries";
 import { UnsentAnswersProvider } from "../review-desk/UnsentAnswers";
 import { useConversationFinishedIndicators } from "./useConversationFinishedIndicators";
 
@@ -56,8 +59,9 @@ export function ConversationWorkspace() {
     if (selectedId) navigate(NEW_CONVERSATION_PATH);
   };
 
+  const waitingConversations = useWaitingConversations();
   const waitingConversationIds = useWaitingConversationIds();
-  const { finishedConversationIds, markRead } =
+  const { finishedConversationIds, heldConversationId, markRead } =
     useConversationFinishedIndicators(
       conversations,
       selectedId,
@@ -149,13 +153,14 @@ export function ConversationWorkspace() {
           conversations={conversations}
           error={feed.error?.message}
           finishedConversationIds={finishedConversationIds}
+          heldConversationId={heldConversationId}
           loading={feed.isPending}
           onNewConversation={openCreate}
           onQueryChange={setQuery}
           query={query}
           selectedId={selectedId}
           timeZone={getDashboardTimeZone()}
-          waitingConversationIds={waitingConversationIds}
+          waitingConversations={waitingConversations}
         />
       </div>
       <section

package/src/client/conversations/composerAutocorrect.ts

@@ -0,0 +1,12 @@
+import { useLocalStorage } from "@uidotdev/usehooks";
+
+const AUTOCORRECT_STORAGE_KEY = "junior:composer:autocorrect";
+
+/**
+ * Edit the browser-only choice to let the keyboard autocorrect, spell check,
+ * and capitalize the message composer. Off by default because these change
+ * ids, paths, and code.
+ */
+export function useComposerAutocorrect() {
+  return useLocalStorage<boolean>(AUTOCORRECT_STORAGE_KEY, false);
+}

package/src/client/conversations/conversationAge.ts

@@ -0,0 +1,24 @@
+import { getDashboardTimeZone } from "../format";
+
+/**
+ * Format an activity time as a short age for dense lists: `now`, `12m`, `3h`,
+ * `2d`, `3w`, then a month and day.
+ */
+export function formatCompactAge(value: string, nowMs = Date.now()): string {
+  const time = Date.parse(value);
+  if (!Number.isFinite(time)) return "";
+
+  const minutes = Math.floor(Math.max(0, nowMs - time) / 60_000);
+  if (minutes < 1) return "now";
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d`;
+  if (days < 30) return `${Math.floor(days / 7)}w`;
+  return new Date(time).toLocaleDateString("en-US", {
+    day: "numeric",
+    month: "short",
+    timeZone: getDashboardTimeZone(),
+  });
+}

package/src/client/conversations/conversationRoutes.ts

@@ -2,16 +2,21 @@ import type { ConversationReportEvent } from "@sentry/junior/api/schema";
 
 /**
  * Build the dashboard route for a conversation id. A `turnId` opens the
- * start of that Turn in the event log.
+ * start of that Turn in the event log. `reviewItems` opens the Review items
+ * panel.
  */
 export function conversationPath(
   conversationId: string,
-  options?: { turnId?: string },
+  options?: { reviewItems?: boolean; turnId?: string },
 ): string {
   const path = `/conversations/${encodeURIComponent(conversationId)}`;
-  return options?.turnId
-    ? `${path}?${CONVERSATION_TURN_PARAM}=${encodeURIComponent(options.turnId)}`
-    : path;
+  const params = new URLSearchParams();
+  if (options?.turnId) params.set(CONVERSATION_TURN_PARAM, options.turnId);
+  if (options?.reviewItems) {
+    params.set(CONVERSATION_REVIEW_PARAM, CONVERSATION_REVIEW_OPEN);
+  }
+  const search = params.toString();
+  return search ? `${path}?${search}` : path;
 }
 
 /** Dashboard home route. Legacy `/conversations/new` redirects here. */
@@ -32,6 +37,10 @@ export function parseConversationEventSeq(
   return value && /^\d+$/.test(value) ? Number(value) : undefined;
 }
 
+/** Query param that opens the Review items panel of a Conversation. */
+export const CONVERSATION_REVIEW_PARAM = "review";
+export const CONVERSATION_REVIEW_OPEN = "open";
+
 /** Query param that opens the start of one Turn in the event log. */
 export const CONVERSATION_TURN_PARAM = "turn";
 

package/src/client/conversations/conversationSections.ts

@@ -7,21 +7,13 @@ export type ConversationSection = {
 };
 
 const DAY_MS = 24 * 60 * 60 * 1000;
-const SECTION_ORDER = [
-  "attention",
-  "priority",
-  "today",
-  "yesterday",
-  "last-week",
-  "2-weeks",
-  "3-weeks",
-  "older",
-] as const;
 
 /**
- * Group conversations into progressively broader activity sections.
+ * Group conversations by last activity: Today, Yesterday, Previous 7 days,
+ * Previous 30 days, then one section per month.
  *
- * Conversations in `attentionIds` go to the first section, before Priority.
+ * Conversations in `attentionIds` lead their section, so unread and waiting
+ * rows sit above read rows without leaving their time group.
  */
 export function buildConversationSections(
   conversations: Conversation[],
@@ -32,16 +24,21 @@ export function buildConversationSections(
   },
 ): ConversationSection[] {
   const nowDay = calendarDay(options.nowMs, options.timeZone);
-  const sections = new Map<string, ConversationSection>();
-  const sorted = [...conversations].sort(
+  const sections = new Map<string, ConversationSection & { order: number }>();
+  const byActivity = [...conversations].sort(
     (left, right) => activityTime(right) - activityTime(left),
   );
+  const sorted = options.attentionIds
+    ? attentionFirst(byActivity, options.attentionIds)
+    : byActivity;
 
   for (const conversation of sorted) {
-    const time = activityTime(conversation);
-    const section = options.attentionIds?.has(conversation.id)
-      ? { key: "attention", label: "Needs attention" }
-      : conversationSection(conversation, time, nowDay, options.timeZone);
+    const section = conversationSection(
+      activityTime(conversation),
+      nowDay,
+      options.nowMs,
+      options.timeZone,
+    );
     const existing = sections.get(section.key);
     if (existing) {
       existing.conversations.push(conversation);
@@ -50,9 +47,9 @@ export function buildConversationSections(
     }
   }
 
-  return [...sections.values()].sort(
-    (left, right) => sectionRank(left.key) - sectionRank(right.key),
-  );
+  return [...sections.values()]
+    .sort((left, right) => left.order - right.order)
+    .map(({ order: _order, ...section }) => section);
 }
 
 /** Join the conversations that wait on the viewer or finished unseen. */
@@ -82,44 +79,61 @@ function activityTime(conversation: Conversation): number {
   return Number.isFinite(time) ? time : Number.NEGATIVE_INFINITY;
 }
 
+/**
+ * Pick the section for an activity time. `order` sorts sections newest
+ * first.
+ */
 function conversationSection(
-  conversation: Conversation,
   time: number,
   nowDay: number,
+  nowMs: number,
   timeZone: string,
-): Pick<ConversationSection, "key" | "label"> {
-  if (!Number.isFinite(time)) return { key: "older", label: "Older" };
-
-  // Priority membership is decided by the conversation feed API.
-  if (conversation.isPriority) {
-    return { key: "priority", label: "Priority" };
+): Pick<ConversationSection, "key" | "label"> & { order: number } {
+  if (!Number.isFinite(time)) {
+    return { key: "older", label: "Older", order: Number.POSITIVE_INFINITY };
   }
 
-  const day = calendarDay(time, timeZone);
-  const ageInDays = Math.max(0, Math.floor((nowDay - day) / DAY_MS));
-  if (ageInDays === 0) return { key: "today", label: "Today" };
-  if (ageInDays === 1) return { key: "yesterday", label: "Yesterday" };
-  if (ageInDays < 7) {
-    return {
-      key: `day-${day}`,
-      label: new Intl.DateTimeFormat("en-US", {
-        timeZone,
-        weekday: "long",
-      }).format(time),
-    };
+  const ageInDays = Math.max(
+    0,
+    Math.round((nowDay - calendarDay(time, timeZone)) / DAY_MS),
+  );
+  if (ageInDays === 0) return { key: "today", label: "Today", order: 0 };
+  if (ageInDays === 1) {
+    return { key: "yesterday", label: "Yesterday", order: 1 };
+  }
+  if (ageInDays <= 7) {
+    return { key: "previous-7-days", label: "Previous 7 days", order: 2 };
   }
-  if (ageInDays < 14) return { key: "last-week", label: "Last week" };
-  if (ageInDays < 21) return { key: "2-weeks", label: "2 weeks ago" };
-  if (ageInDays < 28) return { key: "3-weeks", label: "3 weeks ago" };
-  return { key: "older", label: "Older" };
+  if (ageInDays <= 30) {
+    return { key: "previous-30-days", label: "Previous 30 days", order: 3 };
+  }
+
+  const month = yearMonth(time, timeZone);
+  const nowMonth = yearMonth(nowMs, timeZone);
+  return {
+    key: `month-${month.year}-${month.month}`,
+    label: new Intl.DateTimeFormat("en-US", {
+      month: "long",
+      timeZone,
+      ...(month.year === nowMonth.year ? undefined : { year: "numeric" }),
+    }).format(time),
+    // Month sections follow the rolling windows, newest month first.
+    order:
+      4 + (nowMonth.year - month.year) * 12 + (nowMonth.month - month.month),
+  };
 }
 
-function sectionRank(key: string): number {
-  const known = SECTION_ORDER.indexOf(key as (typeof SECTION_ORDER)[number]);
-  if (known >= 0) return known;
-  // Weekday buckets sit between Yesterday and Last week.
-  if (key.startsWith("day-")) return SECTION_ORDER.indexOf("yesterday") + 0.5;
-  return SECTION_ORDER.length;
+function yearMonth(
+  time: number,
+  timeZone: string,
+): { month: number; year: number } {
+  const parts = new Intl.DateTimeFormat("en-US", {
+    month: "numeric",
+    timeZone,
+    year: "numeric",
+  }).formatToParts(time);
+  const values = new Map(parts.map((part) => [part.type, Number(part.value)]));
+  return { month: values.get("month") ?? 1, year: values.get("year") ?? 0 };
 }
 
 function calendarDay(time: number, timeZone: string): number {