Sort the Overview by when something last happened

The Overview has always been ordered by the tree: the sidebar's arrangement,
groups as capsules. That answers "where is this agent" and nothing else. Two
questions it could not answer are now a control in the bottom bar:

prompt — where did I last type something
answer — who answered most recently

Both read timestamps `/api/meta` already returns (`lastPromptTs`,
`lastAssistantTs`); no server change. `manual` is the default and is byte-for-
byte today's feed, so nobody's Overview moves unless they ask it to. The choice
persists in localStorage next to `am-ov-view`, per browser.

Three rules decide whether the ordering is any good, and they live in
web/src/lib/overviewSort.ts with their own tests rather than inline in the
component:

A RUNNING AGENT IS NOT RANKED. Its last message is whatever it said BEFORE it
started working, so ranking it by that buries the one agent that is doing
something under a wall of finished ones. Running agents come out in their own
block, pinned above the sorted list. "Running" is the rule the card already
draws with — `digest.running || state === 'working'` — minus remote agents,
whose digest reports `running` for a machine that is merely connected; there
the terminal-derived state is the honest signal.

A MISSING TIMESTAMP SINKS, AND SAYS WHY. `0` means "we do not know": a session
that never started, one with no transcript, a harness that writes none. Those
go to a labelled block at the bottom — `nothing sent yet` / `no reply yet` —
so a zero cannot pass itself off as "oldest" and nothing silently vanishes.

TIES KEEP THE MANUAL ORDER. The component walks the tree to build the list and
the sort is stable, so equal timestamps — and the whole undated tail — read as
the sidebar reads.

Sorting FLATTENS the grouping rather than ordering inside each capsule.
"Where did I last type something" is a question about the whole fleet; an
answer split across five capsules still has to be scanned capsule by capsule,
and the first card — the one place the eye lands — would only be the newest
agent of whichever group happens to sit first. The group is not lost, it moves
onto the card as `[Group] name`, exactly as a pane header spells it, and it is
the part that shrinks when the row runs out of room.

Sort and filter are independent: the filter says WHICH agents you are looking
at, the sort says WHERE each one is. The four filters are left as they are —
see the PR for why "done" earns its place next to a sort control.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/package.json

@@ -13,7 +13,7 @@
     "dev": "vite",
     "build": "tsc --noEmit && vite build",
     "typecheck": "tsc --noEmit",
-    "test": "node test/exchanges.test.mjs && node test/sessionTitle.test.mjs",
+    "test": "node test/exchanges.test.mjs && node test/sessionTitle.test.mjs && node test/overviewSort.test.mjs",
     "preview": "vite preview"
   },
   "dependencies": {

web/src/App.tsx

@@ -14,10 +14,10 @@ import Locked from './components/Locked';
 import BackupBanner from './components/BackupBanner';
 import Welcome from './components/Welcome';
 import * as api from './api';
-import type { Cli, GridSpec, MoveTarget, OverviewFilter, Session, Tree } from './types';
+import type { Cli, GridSpec, MoveTarget, OverviewFilter, OverviewSort, Session, Tree } from './types';
 import { onPaneMode, readPaneMode, writePaneMode } from './lib/paneMode';
 import { isPassive, isRemote } from './types';
-import { GridGlyph, ListGlyph } from './components/icons';
+import { GridGlyph, ListGlyph, SortGlyph } from './components/icons';
 
 // `?vvdebug=1` — a phone has no devtools, and the keyboard layout is a guess
 // when the app is embedded cross-origin. Read once: it never changes mid-run,
@@ -80,6 +80,15 @@ export default function App() {
   const [ovView, setOvViewRaw] = useState<'tiles' | 'list'>(() =>
     (localStorage.getItem('am-ov-view') === 'list' ? 'list' : 'tiles'));
   const setOvView = (v: 'tiles' | 'list') => { setOvViewRaw(v); localStorage.setItem('am-ov-view', v); };
+  // Overview order: the tree's own arrangement (default) or ranked by a
+  // timestamp. A view preference like the two above it — per browser, and it
+  // survives a reload, because re-picking your order on every visit is the
+  // thing that makes a sort control feel like a toy.
+  const [ovSort, setOvSortRaw] = useState<OverviewSort>(() => {
+    const s = localStorage.getItem('am-ov-sort');
+    return s === 'prompt' || s === 'answer' ? s : 'manual';
+  });
+  const setOvSort = (v: OverviewSort) => { setOvSortRaw(v); localStorage.setItem('am-ov-sort', v); };
   // Archiving: sessions quiet for longer than the configured window are hidden
   // from the sidebar and overview unless "archived" is checked. Derived, never
   // stored — flipping the setting instantly (un)archives.
@@ -926,6 +935,7 @@ export default function App() {
               clis={clis}
               tree={tree}
               filter={ovFilter}
+              sort={ovSort}
               view={ovView}
               archived={archivedIds}
               showArchived={showArchived}
@@ -968,6 +978,17 @@ export default function App() {
                 </button>
               ))}
             </div>
+            {/* Sort, independent of the filter beside it: one says WHICH agents
+                you are looking at, the other WHERE each one is in the feed. */}
+            <div className="seg ov-seg ov-sortseg">
+              <span className="ov-sortmark" aria-hidden="true"><SortGlyph /></span>
+              <button className={ovSort === 'manual' ? 'on' : ''} title="Your own order — the sidebar's groups and arrangement"
+                onClick={() => setOvSort('manual')}>manual</button>
+              <button className={ovSort === 'prompt' ? 'on' : ''} title="Newest message from you first"
+                onClick={() => setOvSort('prompt')}>prompt</button>
+              <button className={ovSort === 'answer' ? 'on' : ''} title="Newest reply from an agent first"
+                onClick={() => setOvSort('answer')}>answer</button>
+            </div>
             <div className="seg ov-seg ov-viewseg">
               <button className={ovView === 'tiles' ? 'on' : ''} title="Tiles" onClick={() => setOvView('tiles')}><GridGlyph /></button>
               <button className={ovView === 'list' ? 'on' : ''} title="List" onClick={() => setOvView('list')}><ListGlyph /></button>

web/src/components/Overview.tsx

@@ -2,9 +2,11 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } fr
 import type { CSSProperties, ReactNode } from 'react';
 import * as api from '../api';
 import type { MetaSession, TraceTurn } from '../api';
-import type { Cli, OverviewFilter, Session, SessionState, Tree } from '../types';
-import { isPassive } from '../types';
+import type { Cli, OverviewFilter, OverviewSort, Session, SessionState, Tree } from '../types';
+import { isPassive, isRemote } from '../types';
 import { renderMarkdown } from '../lib/markdown';
+import { rankSessions, sortLabel } from '../lib/overviewSort';
+import type { Rankable } from '../lib/overviewSort';
 import Logo from './Logo';
 import { SendGlyph } from './icons';
 import ExchangeView from './conversation/Exchange';
@@ -26,6 +28,20 @@ const eligible = (s: Session) => s.cli !== 'shell' && !isPassive(s.cli);
 const bucket = (state: SessionState): OverviewFilter =>
   state === 'working' ? 'working' : state === 'waiting' ? 'waiting' : 'quiet';
 
+/**
+ * Is this agent at work right now — the fact the sorted feed pins on.
+ *
+ * The card's own rule (`digest.running || state === 'working'`) with one
+ * exception. A remote agent's digest reports `running` for a machine that is
+ * merely *connected* (`server/src/remote.js` — `isListening && !paused`), which
+ * is presence, not work; on that rule every laptop with the bridge open would
+ * sit pinned at the top of the feed forever. Its terminal-derived state is the
+ * honest signal there: `working` means it was handed a message it has not
+ * answered (see REMOTE_STATE_LABEL in types.ts).
+ */
+const atWork = (m: MetaSession) =>
+  m.state === 'working' || (!isRemote(m.cli) && !!m.digest?.running);
+
 /** How much of the conversation the card reads. Cheap: one page, from the end. */
 const CARD_TAIL = 120;
 const CARD_TURNS = 5;   // past this the card is the wrong tool, and says so
@@ -90,9 +106,12 @@ const Caret = () => (
  * two, and history grows one turn at a time instead of a stepper that replaced
  * the answer with an older one.
  */
-export function Card({ s, color, pending, isMobile, onOpen, onClose }: {
+export function Card({ s, color, group, pending, isMobile, onOpen, onClose }: {
   s: MetaSession;
   color?: string;
+  // The group this agent belongs to, when the feed is not already drawing one
+  // around it (a sorted feed is flat). Same `[Group] name` a pane header uses.
+  group?: string | null;
   pending?: boolean; // digest still loading — show a shimmer instead of "no prompt yet"
   isMobile?: boolean;
   onOpen: (sid: string) => void;
@@ -199,6 +218,7 @@ export function Card({ s, color, pending, isMobile, onOpen, onClose }: {
       <div className="ov-id" onClick={() => onOpen(s.id)} title="Open pane">
         <span className={`status ${s.state}`} />
         <Logo cli={s.cli} size={12} tint={color} />
+        {group && <span className="ov-gtag mono">[{group}]</span>}
         <span className="ov-name mono">{s.name}</span>
         {ago && <span className="ov-ago">· {ago}</span>}
         <span className="spacer" />
@@ -315,7 +335,7 @@ export function Card({ s, color, pending, isMobile, onOpen, onClose }: {
 }
 
 /** Compact tile: status + prompt + state; click opens the conversation window. */
-function Tile({ s, color, dim, pending, onOpen }: { s: MetaSession; color?: string; dim?: boolean; pending?: boolean; onOpen: () => void }) {
+function Tile({ s, color, group, dim, pending, onOpen }: { s: MetaSession; color?: string; group?: string | null; dim?: boolean; pending?: boolean; onOpen: () => void }) {
   const d = s.digest;
   const running = !!d?.running || s.state === 'working';
   const last = Math.max(d?.lastAssistantTs || 0, d?.lastPromptTs || 0) || Date.parse(s.createdAt) || 0;
@@ -327,6 +347,7 @@ function Tile({ s, color, dim, pending, onOpen }: { s: MetaSession; color?: stri
       <div className="ovt-head">
         <span className={`status ${s.state}`} />
         <Logo cli={s.cli} size={12} tint={color} />
+        {group && <span className="ov-gtag mono">[{group}]</span>}
         <span className="ovt-name mono">{s.name}</span>
         <span className="ovt-ago">{pending ? '' : fmtAgo(last)}</span>
       </div>
@@ -354,11 +375,13 @@ function Tile({ s, color, dim, pending, onOpen }: { s: MetaSession; color?: stri
 }
 
 /** Mission control: one reading column — group capsules with their agents as
- *  slabs, loose agents as standalone panels. */
-export default function Overview({ clis, tree, filter, view, archived, showArchived, meta, metaReady, isMobile, onOpen }: {
+ *  slabs, loose agents as standalone panels. Unless a sort is on, in which case
+ *  it is one flat ranked column instead (see §"sorted feed" below). */
+export default function Overview({ clis, tree, filter, sort, view, archived, showArchived, meta, metaReady, isMobile, onOpen }: {
   clis: Cli[];
   tree: Tree;
   filter: OverviewFilter; // controlled by the bottom bar in App
+  sort: OverviewSort;     // ditto, and independent of the filter
   view: 'tiles' | 'list'; // controlled by the bottom bar in App
   archived: Set<string>;
   showArchived: boolean;
@@ -388,6 +411,51 @@ export default function Overview({ clis, tree, filter, view, archived, showArchi
   const visible = (s: MetaSession) =>
     (filter === 'all' || bucket(s.state) === filter) && (showArchived || !archived.has(s.id));
 
+  // Which group each agent is in, by name. Only the sorted feed needs it: the
+  // manual feed draws the group as a frame around its members and would be
+  // saying it twice (the same rule the sidebar and pane headers follow —
+  // web/src/lib/sessionTitle.ts).
+  const groupNameOf = useMemo(() => {
+    const m: Record<string, string> = {};
+    for (const g of tree.groups) for (const id of g.sessionIds) m[id] = g.name;
+    return m;
+  }, [tree.groups]);
+
+  // ---- sorted feed: flat, ranked, groups become a prefix ----
+  //
+  // Sorting FLATTENS the grouping rather than ordering inside each capsule.
+  // "Where did I last type something" is a question about the whole fleet; an
+  // answer split across five capsules still has to be scanned capsule by
+  // capsule, and the first card of the feed — the one place the eye lands —
+  // would only be the newest agent *of whichever group happens to be first in
+  // the sidebar*. Which group an agent is in is not lost, it moves onto the
+  // card as `[Group] name`, exactly as a pane header spells it.
+  const sorted = sort !== 'manual';
+  const sections = useMemo(() => {
+    if (!sorted) return null;
+    // Walk the tree so ties (and the whole undated tail) come out in the order
+    // you arranged them in the sidebar.
+    const items: (Rankable & { m: MetaSession })[] = [];
+    for (const ref of tree.order) {
+      const ids = ref.startsWith('s:') ? [ref.slice(2)] : groupById[ref.slice(2)]?.sessionIds ?? [];
+      for (const id of ids) {
+        const s = sessById[id];
+        if (!s || !eligible(s)) continue;
+        const m = dataFor(s);
+        if (!visible(m)) continue;
+        items.push({
+          id,
+          m,
+          lastPromptTs: m.digest?.lastPromptTs || 0,
+          lastAssistantTs: m.digest?.lastAssistantTs || 0,
+          running: atWork(m),
+        });
+      }
+    }
+    return rankSessions(items, sort);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sorted, sort, tree.order, sessById, groupById, meta, metaReady, filter, archived, showArchived]);
+
   // Collapse at constant velocity: duration follows the group's height.
   const toggleGroup = (gid: string, el: HTMLElement) => {
     const inner = el.closest('.ov-sec')?.querySelector('.ov-drawer-in') as HTMLElement | null;
@@ -418,26 +486,68 @@ export default function Overview({ clis, tree, filter, view, archived, showArchi
     if (looseTiles.length) tileBlocks.push(<div className="ovt-grid" key={`loose-${tileBlocks.length}`}>{looseTiles}</div>);
     looseTiles = [];
   };
-  for (const ref of tree.order) {
-    if (ref.startsWith('s:')) {
-      const s = sessById[ref.slice(2)];
-      if (s && eligible(s)) { const t = tileFor(s); if (t) looseTiles.push(t); }
-    } else {
-      const g = groupById[ref.slice(2)];
-      if (!g) continue;
-      const members = g.sessionIds.map((id) => sessById[id]).filter(Boolean).filter(eligible) as Session[];
-      const shown = members.map(tileFor).filter(Boolean);
-      if (!shown.length) continue;
-      flushLoose();
-      tileBlocks.push(
-        <div key={g.id} className="ovt-group">
-          <span className="ovt-glabel mono">{g.name}<span className="ovt-gn"> {shown.length}</span></span>
-          <div className="ovt-grid">{shown}</div>
-        </div>,
-      );
+  if (!sorted) {
+    for (const ref of tree.order) {
+      if (ref.startsWith('s:')) {
+        const s = sessById[ref.slice(2)];
+        if (s && eligible(s)) { const t = tileFor(s); if (t) looseTiles.push(t); }
+      } else {
+        const g = groupById[ref.slice(2)];
+        if (!g) continue;
+        const members = g.sessionIds.map((id) => sessById[id]).filter(Boolean).filter(eligible) as Session[];
+        const shown = members.map(tileFor).filter(Boolean);
+        if (!shown.length) continue;
+        flushLoose();
+        tileBlocks.push(
+          <div key={g.id} className="ovt-group">
+            <span className="ovt-glabel mono">{g.name}<span className="ovt-gn"> {shown.length}</span></span>
+            <div className="ovt-grid">{shown}</div>
+          </div>,
+        );
+      }
     }
+    flushLoose();
   }
-  flushLoose();
+
+  /**
+   * The ranked feed: at most three labelled blocks, in this order.
+   *
+   *  · running now — pinned, because a working agent's last message is whatever
+   *    it said BEFORE it started, and ranking it by that buries the one agent
+   *    that is doing something under a wall of finished ones.
+   *  · the sort itself — what you asked for, newest first.
+   *  · the tail — an agent with no such message at all (never started, no
+   *    transcript, a harness that writes none). Last, and labelled, so a 0
+   *    timestamp cannot pass itself off as "oldest".
+   *
+   * Every block is the same card or tile the manual feed draws; only the order
+   * and the `[Group]` prefix change.
+   */
+  const rankedBlocks = (): ReactNode[] => {
+    if (!sections) return [];
+    type Row = { id: string; m: MetaSession };
+    const body = (rows: Row[]) => (view === 'tiles'
+      ? <div className="ovt-grid">{rows.map(({ m }) => (
+          <Tile key={m.id} s={m} color={colorOf[m.cli]} group={groupNameOf[m.id]} dim={archived.has(m.id)}
+            pending={pending(m.id)} onOpen={() => setOpenId(m.id)} />
+        ))}</div>
+      : rows.map(({ m }) => (
+          <div key={m.id} className="ov-panel">
+            <Card s={m} color={colorOf[m.cli]} group={groupNameOf[m.id]} pending={pending(m.id)} isMobile={isMobile} onOpen={onOpen} />
+          </div>
+        )));
+    const block = (key: string, label: string, rows: Row[]) => rows.length === 0 ? null : (
+      <div className="ov-sortsec" key={key}>
+        <div className="ov-sortlbl mono"><span>{label}</span><span className="ov-sortrule" /><span className="ov-sortn">{rows.length}</span></div>
+        {body(rows)}
+      </div>
+    );
+    return [
+      block('running', 'running now', sections.running),
+      block('dated', sortLabel(sort), sections.dated),
+      block('undated', sort === 'prompt' ? 'nothing sent yet' : 'no reply yet', sections.undated),
+    ].filter(Boolean) as ReactNode[];
+  };
 
   const openSess = openId ? sessById[openId] : null;
   const windowEl = openSess && (
@@ -448,20 +558,23 @@ export default function Overview({ clis, tree, filter, view, archived, showArchi
     </div>
   );
 
+  const empty = <div className="usage-msg mono">{filter === 'all' ? 'no agents yet — shells and file panes don’t appear here.' : 'nothing in this state.'}</div>;
+
   if (view === 'tiles') {
+    const content = sorted ? rankedBlocks() : tileBlocks;
     return (
       <div className="ov-wrap">
         <div className="ov-feed ovt-feed">
-          {tileBlocks.length === 0 && <div className="usage-msg mono">{filter === 'all' ? 'no agents yet — shells and file panes don’t appear here.' : 'nothing in this state.'}</div>}
-          {tileBlocks}
+          {content.length === 0 && empty}
+          {content}
         </div>
         {windowEl}
       </div>
     );
   }
 
-  const blocks: ReactNode[] = [];
-  for (const ref of tree.order) {
+  const blocks: ReactNode[] = sorted ? rankedBlocks() : [];
+  if (!sorted) for (const ref of tree.order) {
     if (ref.startsWith('s:')) {
       const s = sessById[ref.slice(2)];
       if (s && eligible(s)) {
@@ -497,7 +610,7 @@ export default function Overview({ clis, tree, filter, view, archived, showArchi
   return (
     <div className="ov-wrap">
       <div className="ov-feed">
-        {blocks.length === 0 && <div className="usage-msg mono">{filter === 'all' ? 'no agents yet — shells and file panes don’t appear here.' : 'nothing in this state.'}</div>}
+        {blocks.length === 0 && empty}
         {blocks}
       </div>
     </div>

web/src/components/icons.tsx

@@ -229,6 +229,13 @@ export const GridGlyph = ({ className }: { className?: string }) => (
   </G>
 );
 
+// Overview order: lines stepping down, longest first — a list that is ranked.
+export const SortGlyph = ({ className }: { className?: string }) => (
+  <G className={className}>
+    <path d="M2.6 4h10.8M2.6 8h7.2M2.6 12h3.6" />
+  </G>
+);
+
 export const PlusGlyph = ({ className }: { className?: string }) => (
   <G className={className}>
     <path d="M8 3.2v9.6M3.2 8h9.6" />

web/src/lib/overviewSort.ts

@@ -0,0 +1,77 @@
+// Ordering the Overview by when something last happened.
+//
+// The Overview's own order is the sidebar's: the tree, hand-arranged, groups as
+// capsules. That answers "where is this agent" and nothing else. The two
+// questions it cannot answer are "where did I last type something" and "who
+// answered most recently", and both are a timestamp the digest already carries
+// (`lastPromptTs` / `lastAssistantTs`, ms epoch, 0 when unknown).
+//
+// Three rules, all of them here rather than in the component, because they are
+// the part that can be wrong:
+//
+//  1. **A running agent is not ranked.** Its last message is whatever it said
+//     before it started working, so ranking it by that buries the agent that is
+//     doing something right now under agents that are done. They come out in
+//     their own section, and the caller pins it above the sorted list.
+//  2. **A missing timestamp sinks.** `0` means "we do not know" — a session
+//     that never started, has no transcript, or runs a harness that writes
+//     none. Sorting descending on a number would float those to the bottom
+//     anyway, but only by accident of arithmetic; they get their own section so
+//     the caller can say what they are instead of implying they are stale.
+//  3. **Ties keep the manual order.** The caller passes items in tree order and
+//     the sort is stable, so equal timestamps — and the whole undated section —
+//     read as the sidebar reads.
+
+import type { OverviewSort } from '../types';
+
+/** What ordering needs to know about a session. Deliberately not `MetaSession`:
+ *  the three facts, so this is testable without a digest or a React tree. */
+export interface Rankable {
+  id: string;
+  lastPromptTs: number;     // ms epoch, 0 = unknown
+  lastAssistantTs: number;  // ms epoch, 0 = unknown
+  running: boolean;
+}
+
+/** The timestamp a given sort reads. 0 for the manual order, which reads none. */
+export function sortTs(s: Rankable, sort: OverviewSort): number {
+  if (sort === 'prompt') return s.lastPromptTs || 0;
+  if (sort === 'answer') return s.lastAssistantTs || 0;
+  return 0;
+}
+
+export interface Sections<T> {
+  /** At work now — pinned above the sorted list, in the caller's order. */
+  running: T[];
+  /** The answer to the question, newest first. */
+  dated: T[];
+  /** No such message ever: never started, no transcript, unsupported harness. */
+  undated: T[];
+}
+
+/**
+ * Split into the three sections above and sort the middle one, newest first.
+ *
+ * `manual` is the identity: everything lands in `dated` untouched, so a caller
+ * that renders the sections in order still gets the tree's own arrangement.
+ */
+export function rankSessions<T extends Rankable>(items: T[], sort: OverviewSort): Sections<T> {
+  if (sort === 'manual') return { running: [], dated: items.slice(), undated: [] };
+  const running: T[] = [];
+  const dated: T[] = [];
+  const undated: T[] = [];
+  for (const it of items) {
+    if (it.running) running.push(it);
+    else if (sortTs(it, sort) > 0) dated.push(it);
+    else undated.push(it);
+  }
+  // Stable (ES2019+): equal timestamps stay in the order they arrived, which is
+  // the tree's.
+  dated.sort((a, b) => sortTs(b, sort) - sortTs(a, sort));
+  return { running, dated, undated };
+}
+
+/** What the sorted block is sorted BY, spelled out above it in the feed. */
+export function sortLabel(sort: OverviewSort): string {
+  return sort === 'prompt' ? 'by your last message' : sort === 'answer' ? 'by the last reply' : '';
+}

web/src/styles.css

@@ -81,8 +81,13 @@ body {
 .bkfail-link:hover { color: var(--danger); text-decoration-style: solid; }
 .zoombar { display: flex; align-items: center; gap: 4px; padding: 4px 8px; margin-top: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); flex: none; }
 .zoombar .spacer { flex: 1; }
-/* overview bottom bar: filter + view segments, centered */
-.zoombar.ov-bar { justify-content: center; gap: 8px; }
+/* overview bottom bar: filter · sort · view segments, centered — three of them
+   don't fit a phone on one line, so it wraps rather than overflowing */
+.zoombar.ov-bar { justify-content: center; gap: 8px; flex-wrap: wrap; row-gap: 5px; }
+/* the sort segment says what it is, since "prompt"/"answer" next to a row of
+   filter words would otherwise read as two more filters */
+.ov-sortmark { display: inline-flex; align-items: center; padding: 0 5px 0 7px; color: var(--muted); }
+.ov-sortmark svg { width: 12px; height: 12px; display: block; }
 .ov-viewseg button { display: inline-flex; align-items: center; padding: 4.5px 9px; }
 .ov-viewseg svg { width: 13px; height: 13px; }
 
@@ -235,6 +240,21 @@ body {
 
 .ov-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-xl); }
 
+/* ---- sorted feed: labelled blocks instead of group capsules ---- */
+/* In the list the cards keep the feed's own spacing; tiles pack tighter, as
+   they do inside a group box. */
+.ov-sortsec { display: flex; flex-direction: column; gap: 18px; }
+.ovt-feed .ov-sortsec { gap: 8px; }
+.ovt-feed .ov-sortsec > .ovt-grid { margin: 0 11px; }
+.ov-sortlbl { display: flex; align-items: center; gap: 9px; padding: 0 12px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--muted); }
+.ov-sortrule { flex: 1; height: 1px; background: var(--border); }
+.ov-sortn { color: var(--border-strong); }
+/* The group an agent is in, when the feed is flat and no capsule says it. It
+   gives up its pixels first (shrink 5×, and never more than half the row): the
+   prefix is context, the name is the thing you are looking for. */
+.ov-gtag { flex: 0 5 auto; min-width: 0; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: 500; font-size: 11.5px; }
+.ovt-head .ov-gtag { font-size: 10.5px; }
+
 /* group capsule: header bar / spaced flat slabs / footer strip that merges away */
 .ov-sec { display: flex; flex-direction: column; }
 .ov-sechead { display: flex; align-items: center; gap: 7px; width: 100%; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 8px 14px; font: inherit; color: var(--text); cursor: pointer; text-align: left; transition: border-radius var(--dur, 0.36s) ease; }

web/src/types.ts

@@ -103,6 +103,11 @@ export interface RemoteInfo {
 
 export type OverviewFilter = 'all' | 'waiting' | 'working' | 'quiet';
 
+// How the Overview is ordered. `manual` is the tree's own arrangement — groups
+// as capsules, agents where you put them; the other two flatten that and rank
+// every agent by a timestamp from its digest. See web/src/lib/overviewSort.ts.
+export type OverviewSort = 'manual' | 'prompt' | 'answer';
+
 export type MoveTarget =
   | { kind: 'into'; groupId: string }
   | { kind: 'pair'; sessionId: string }

web/test/overviewSort.test.mjs

@@ -0,0 +1,117 @@
+// The three rules the Overview's ordering lives or dies by: a running agent is
+// not ranked, a missing timestamp sinks (and is never mistaken for "oldest"),
+// and ties keep the order the caller passed — the sidebar's.
+//
+// Same shape as sessionTitle.test.mjs — no test runner, esbuild transpiles the
+// module and we import it. Run with:  node test/overviewSort.test.mjs
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { build } from 'esbuild';
+
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+const out = path.join(fs.mkdtempSync(path.join(os.tmpdir(), 'ovsort-')), 'overviewSort.mjs');
+await build({
+  entryPoints: [path.join(HERE, '../src/lib/overviewSort.ts')],
+  outfile: out, format: 'esm', bundle: false, logLevel: 'error',
+});
+const { rankSessions, sortTs, sortLabel } = await import(pathToFileURL(out).href);
+
+let failed = 0;
+const check = (what, fn) => {
+  try { fn(); console.log(`  ok  ${what}`); } catch (e) {
+    failed++;
+    console.log(`  FAIL ${what}\n       ${e.message.split('\n')[0]}`);
+  }
+};
+
+const a = (id, p, ans, running = false) => ({ id, lastPromptTs: p, lastAssistantTs: ans, running });
+const ids = (xs) => xs.map((x) => x.id);
+
+// A fleet with every awkward case in it, in "sidebar order".
+const fleet = [
+  a('old', 1_000, 2_000),          // answered long ago
+  a('busy', 5_000, 4_000, true),   // at work right now
+  a('fresh', 9_000, 3_000),        // you typed here last
+  a('blank', 0, 0),                // no digest at all
+  a('unanswered', 8_000, 0),       // you asked, nothing came back yet
+  a('replied', 6_000, 9_500),      // the newest reply
+];
+
+console.log('sortTs');
+check('reads the field the sort names', () => {
+  assert.equal(sortTs(fleet[0], 'prompt'), 1_000);
+  assert.equal(sortTs(fleet[0], 'answer'), 2_000);
+});
+check('the manual order reads no clock', () => assert.equal(sortTs(fleet[0], 'manual'), 0));
+
+console.log('rankSessions · manual');
+check('is the identity — the tree, untouched, one block', () => {
+  const r = rankSessions(fleet, 'manual');
+  assert.deepEqual(ids(r.dated), ids(fleet));
+  assert.deepEqual(r.running, []);
+  assert.deepEqual(r.undated, []);
+});
+check('does not mutate the caller\'s array', () => {
+  const input = fleet.slice();
+  rankSessions(input, 'answer');
+  assert.deepEqual(ids(input), ids(fleet));
+});
+
+console.log('rankSessions · by last prompt');
+check('newest message from you first', () => {
+  const r = rankSessions(fleet, 'prompt');
+  assert.deepEqual(ids(r.dated), ['fresh', 'unanswered', 'replied', 'old']);
+});
+check('the running agent is pinned out of the ranking, not into the top', () => {
+  const r = rankSessions(fleet, 'prompt');
+  assert.deepEqual(ids(r.running), ['busy']);
+  assert.ok(!ids(r.dated).includes('busy'));
+});
+check('no timestamp sinks into its own block, and is still there', () => {
+  const r = rankSessions(fleet, 'prompt');
+  assert.deepEqual(ids(r.undated), ['blank']);
+  const all = [...ids(r.running), ...ids(r.dated), ...ids(r.undated)].sort();
+  assert.deepEqual(all, ids(fleet).sort());
+});
+
+console.log('rankSessions · by last answer');
+check('newest reply first', () => {
+  const r = rankSessions(fleet, 'answer');
+  assert.deepEqual(ids(r.dated), ['replied', 'fresh', 'old']);
+});
+check('asked-but-never-answered is undated here, dated under prompt', () => {
+  assert.deepEqual(ids(rankSessions(fleet, 'answer').undated), ['blank', 'unanswered']);
+  assert.ok(ids(rankSessions(fleet, 'prompt').dated).includes('unanswered'));
+});
+
+console.log('rankSessions · ties and edges');
+check('equal timestamps keep the order they came in', () => {
+  const tied = [a('c', 5, 5), a('a', 5, 5), a('b', 5, 5)];
+  assert.deepEqual(ids(rankSessions(tied, 'prompt').dated), ['c', 'a', 'b']);
+});
+check('the undated tail keeps the order it came in', () => {
+  const none = [a('z', 0, 0), a('y', 0, 0)];
+  assert.deepEqual(ids(rankSessions(none, 'answer').undated), ['z', 'y']);
+});
+check('a running agent with no digest is still running, not undated', () => {
+  const r = rankSessions([a('n', 0, 0, true)], 'prompt');
+  assert.deepEqual(ids(r.running), ['n']);
+  assert.deepEqual(r.undated, []);
+});
+check('an empty fleet gives three empty blocks', () => {
+  const r = rankSessions([], 'answer');
+  assert.deepEqual([r.running, r.dated, r.undated], [[], [], []]);
+});
+
+console.log('sortLabel');
+check('names what the block is sorted by', () => {
+  assert.equal(sortLabel('prompt'), 'by your last message');
+  assert.equal(sortLabel('answer'), 'by the last reply');
+  assert.equal(sortLabel('manual'), '');
+});
+
+console.log(failed ? `\n${failed} failed` : '\nall passed');
+process.exit(failed ? 1 : 0);