feat(console/ai): group the conversations list by date (Today / Yesterday / …) (#1709)

The conversations list was a flat, undated stream. Group it into recency
sections like ChatGPT/Claude — Today, Yesterday, Previous 7 days, Previous 30
days, Older — with section headers, newest-first within each, empty sections
omitted. Boundaries are calendar-day based (local midnight), so Today/Yesterday
track the real day rather than a rolling 24h.

The bucketing is a pure exported `groupConversationsByDate(conversations, nowMs?)`
(nowMs defaults to now, kept out of the render path) and unit-tested. Search,
active highlight, rename/delete, and the per-row relative time are unchanged.

Test: 506 pass (4 new — ordered buckets, empty omitted, newest-first +
unparseable-as-oldest, createdAt fallback). tsc clean; no new lint errors.

Co-authored-by: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: 3 people

packages/app-shell/src/console/ai/ConversationsSidebar.tsx

@@ -49,6 +49,61 @@ function formatTimestamp(
   return d.toLocaleDateString();
 }
 
+export type ConversationGroupKey = 'today' | 'yesterday' | 'previous7Days' | 'previous30Days' | 'older';
+
+export interface ConversationGroup {
+  key: ConversationGroupKey;
+  items: ConversationSummary[];
+}
+
+const GROUP_ORDER: ConversationGroupKey[] = ['today', 'yesterday', 'previous7Days', 'previous30Days', 'older'];
+
+/** English fallbacks for the section headers (overridable via i18n). */
+export const CONVERSATION_GROUP_LABELS: Record<ConversationGroupKey, string> = {
+  today: 'Today',
+  yesterday: 'Yesterday',
+  previous7Days: 'Previous 7 days',
+  previous30Days: 'Previous 30 days',
+  older: 'Older',
+};
+
+/**
+ * Bucket conversations into recency sections (ChatGPT/Claude-style), newest
+ * first within each. Boundaries are calendar-day based off local midnight, so
+ * "Today"/"Yesterday" track the actual day rather than a rolling 24h. Pure +
+ * exported for tests; `nowMs` defaults to the current time (kept out of the
+ * component's render path). Empty sections are omitted.
+ */
+export function groupConversationsByDate(
+  conversations: ConversationSummary[],
+  nowMs: number = Date.now(),
+): ConversationGroup[] {
+  const startOfToday = new Date(nowMs);
+  startOfToday.setHours(0, 0, 0, 0);
+  const todayMs = startOfToday.getTime();
+  const DAY = 24 * 60 * 60 * 1000;
+  const stamp = (c: ConversationSummary): number => {
+    const v = new Date(c.updatedAt ?? c.createdAt ?? 0).getTime();
+    return Number.isNaN(v) ? 0 : v;
+  };
+  const buckets: Record<ConversationGroupKey, ConversationSummary[]> = {
+    today: [],
+    yesterday: [],
+    previous7Days: [],
+    previous30Days: [],
+    older: [],
+  };
+  for (const c of [...conversations].sort((a, b) => stamp(b) - stamp(a))) {
+    const v = stamp(c);
+    if (v >= todayMs) buckets.today.push(c);
+    else if (v >= todayMs - DAY) buckets.yesterday.push(c);
+    else if (v >= todayMs - 7 * DAY) buckets.previous7Days.push(c);
+    else if (v >= todayMs - 30 * DAY) buckets.previous30Days.push(c);
+    else buckets.older.push(c);
+  }
+  return GROUP_ORDER.filter((k) => buckets[k].length > 0).map((key) => ({ key, items: buckets[key] }));
+}
+
 export function ConversationsSidebar({
   userId,
   apiBase,
@@ -165,24 +220,33 @@ export function ConversationsSidebar({
         ) : visible.length === 0 ? (
           <div className="px-3 py-4 text-xs text-muted-foreground">{t('console.ai.noMatchingChats')}</div>
         ) : (
-          <ul className="flex flex-col py-1">
-            {visible.map((c) => (
-              <ConversationRow
-                key={c.id}
-                conversation={c}
-                active={c.id === activeId}
-                renaming={c.id === renamingId}
-                onSelect={() => {
-                  navigate(`/ai/${c.id}`);
-                  onNavigate?.();
-                }}
-                onDelete={(e) => handleDelete(e, c.id)}
-                onStartRename={() => setRenamingId(c.id)}
-                onCancelRename={() => setRenamingId(undefined)}
-                onSubmitRename={(title) => handleRenameSubmit(c.id, title)}
-              />
+          <div className="flex flex-col py-1">
+            {groupConversationsByDate(visible).map((group) => (
+              <section key={group.key} data-testid={`ai-conversation-group-${group.key}`}>
+                <h3 className="px-3 pb-1 pt-3 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+                  {t(`console.ai.group.${group.key}`, { defaultValue: CONVERSATION_GROUP_LABELS[group.key] })}
+                </h3>
+                <ul className="flex flex-col">
+                  {group.items.map((c) => (
+                    <ConversationRow
+                      key={c.id}
+                      conversation={c}
+                      active={c.id === activeId}
+                      renaming={c.id === renamingId}
+                      onSelect={() => {
+                        navigate(`/ai/${c.id}`);
+                        onNavigate?.();
+                      }}
+                      onDelete={(e) => handleDelete(e, c.id)}
+                      onStartRename={() => setRenamingId(c.id)}
+                      onCancelRename={() => setRenamingId(undefined)}
+                      onSubmitRename={(title) => handleRenameSubmit(c.id, title)}
+                    />
+                  ))}
+                </ul>
+              </section>
             ))}
-          </ul>
+          </div>
         )}
       </ScrollArea>
     </aside>

packages/app-shell/src/console/ai/__tests__/groupConversationsByDate.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from 'vitest';
+import { groupConversationsByDate } from '../ConversationsSidebar';
+import type { ConversationSummary } from '../../../hooks/useConversationList';
+
+const DAY = 24 * 60 * 60 * 1000;
+// Fixed reference time. Offsets are chosen to land squarely in their bucket
+// regardless of the test runner's timezone (0 = today; exactly 24h = yesterday;
+// 4/15/60 days are unambiguous), so the calendar-midnight boundary can't flake.
+const now = Date.UTC(2026, 5, 13, 12, 0, 0);
+const conv = (id: string, offset: number): ConversationSummary =>
+  ({ id, updatedAt: new Date(now - offset).toISOString() }) as ConversationSummary;
+
+describe('groupConversationsByDate', () => {
+  it('buckets into ordered recency sections', () => {
+    const groups = groupConversationsByDate(
+      [conv('older', 60 * DAY), conv('today', 0), conv('week', 4 * DAY), conv('yesterday', DAY), conv('month', 15 * DAY)],
+      now,
+    );
+    expect(groups.map((g) => g.key)).toEqual(['today', 'yesterday', 'previous7Days', 'previous30Days', 'older']);
+    expect(groups.map((g) => g.items[0].id)).toEqual(['today', 'yesterday', 'week', 'month', 'older']);
+  });
+
+  it('omits empty sections', () => {
+    const groups = groupConversationsByDate([conv('a', 0), conv('b', 0)], now);
+    expect(groups).toHaveLength(1);
+    expect(groups[0].key).toBe('today');
+    expect(groups[0].items).toHaveLength(2);
+  });
+
+  it('sorts newest-first within a section and treats unparseable timestamps as oldest', () => {
+    const groups = groupConversationsByDate(
+      [
+        conv('o2', 61 * DAY),
+        conv('o1', 60 * DAY),
+        { id: 'bad', updatedAt: 'not-a-date' } as ConversationSummary,
+      ],
+      now,
+    );
+    const older = groups.find((g) => g.key === 'older');
+    expect(older?.items.map((i) => i.id)).toEqual(['o1', 'o2', 'bad']);
+  });
+
+  it('falls back to createdAt when updatedAt is absent', () => {
+    const groups = groupConversationsByDate(
+      [{ id: 'c', createdAt: new Date(now).toISOString() } as ConversationSummary],
+      now,
+    );
+    expect(groups[0]?.key).toBe('today');
+  });
+});