Prioritize active threads in the recent threads list

badcuban · badcuban · commit 2c812d3e2c4a · 2026-07-23T02:28:39.000-04:00
- Show all in-flight threads before filling the list by recency
- Use shared in-flight status classification for sidebar status pills
- Add coverage for selection limits, archiving, and ordering
diff --git a/apps/web/src/components/RecentThreadsList.tsx b/apps/web/src/components/RecentThreadsList.tsx
@@ -5,8 +5,7 @@ import { useMemo } from "react";
 import { useShallow } from "zustand/react/shallow";
 
 import { useHandleNewThread } from "../hooks/useHandleNewThread";
-import { useSettings } from "../hooks/useSettings";
-import { sortThreads } from "../lib/threadSort";
+import { selectActiveAndRecentThreads } from "../lib/threadSort";
 import {
   selectGeneralChatsProjectAcrossEnvironments,
   selectSidebarThreadsAcrossEnvironments,
@@ -27,15 +26,10 @@ export function RecentThreadsList({ limit = 3, testId, className }: RecentThread
   const navigate = useNavigate();
   const { orderedProjects } = useHandleNewThread();
   const threads = useStore(useShallow(selectSidebarThreadsAcrossEnvironments));
-  const sidebarThreadSortOrder = useSettings((settings) => settings.sidebarThreadSortOrder);
   const generalChatsProject = useStore(selectGeneralChatsProjectAcrossEnvironments);
   const recentThreads = useMemo(
-    () =>
-      sortThreads(
-        threads.filter((thread) => thread.archivedAt === null),
-        sidebarThreadSortOrder,
-      ).slice(0, limit),
-    [limit, sidebarThreadSortOrder, threads],
+    () => selectActiveAndRecentThreads(threads, limit),
+    [limit, threads],
   );
   const projectByScopedKey = useMemo(
     () =>
@@ -55,7 +49,7 @@ export function RecentThreadsList({ limit = 3, testId, className }: RecentThread
   return (
     <div className={className}>
       <div className="mb-2 text-center text-[10px] font-medium uppercase tracking-wider text-muted-foreground/55">
-        Recent threads
+        Active and recent
       </div>
       <div className="flex flex-col divide-y divide-border/50">
         {recentThreads.map((thread) => {
diff --git a/apps/web/src/components/Sidebar.logic.ts b/apps/web/src/components/Sidebar.logic.ts
@@ -4,6 +4,7 @@ import type {
   SidebarThreadSortOrder,
 } from "@threadlines/contracts/settings";
 import {
+  getThreadInFlightStatus,
   getThreadSortTimestamp,
   sortThreads,
   toSortableTimestamp,
@@ -362,7 +363,9 @@ export function resolveThreadStatusPill(input: {
     };
   }
 
-  if (thread.session?.status === "running" || thread.session?.orchestrationStatus === "running") {
+  const inFlightStatus = getThreadInFlightStatus(thread);
+
+  if (inFlightStatus === "working") {
     return {
       label: "Working",
       colorClass: "text-primary-readable",
@@ -371,10 +374,7 @@ export function resolveThreadStatusPill(input: {
     };
   }
 
-  if (
-    thread.session?.status === "connecting" ||
-    thread.session?.orchestrationStatus === "starting"
-  ) {
+  if (inFlightStatus === "starting") {
     return {
       label: "Starting",
       colorClass: "text-primary-readable",
diff --git a/apps/web/src/lib/threadSort.test.ts b/apps/web/src/lib/threadSort.test.ts
@@ -3,11 +3,12 @@ import {
   DEFAULT_RUNTIME_MODE,
   EnvironmentId,
   ProjectId,
+  ProviderDriverKind,
   ProviderInstanceId,
   ThreadId,
 } from "@threadlines/contracts";
 import type { Thread } from "../types";
-import { getLatestThreadForProject, sortThreads } from "./threadSort";
+import { getLatestThreadForProject, selectActiveAndRecentThreads, sortThreads } from "./threadSort";
 
 const LOCAL_ENVIRONMENT_ID = EnvironmentId.make("environment-local");
 const PROJECT_ID = ProjectId.make("project-1");
@@ -236,3 +237,76 @@ describe("sortThreads", () => {
     expect(latestThread?.id).toBe(ThreadId.make("thread-3"));
   });
 });
+
+describe("selectActiveAndRecentThreads", () => {
+  it("shows every in-flight thread before filling the limit by true recency", () => {
+    const session = {
+      provider: ProviderDriverKind.make("codex"),
+      status: "running" as const,
+      orchestrationStatus: "running" as const,
+      createdAt: "2026-03-09T10:00:00.000Z",
+      updatedAt: "2026-03-09T10:00:00.000Z",
+    };
+    const makeTimestampedThread = (
+      id: string,
+      latestUserMessageAt: string,
+      overrides: Partial<Thread> = {},
+    ) =>
+      makeThread({
+        id: ThreadId.make(id),
+        updatedAt: latestUserMessageAt,
+        messages: [
+          {
+            id: `message-${id}` as never,
+            role: "user",
+            text: id,
+            createdAt: latestUserMessageAt,
+            streaming: false,
+            completedAt: latestUserMessageAt,
+          },
+        ],
+        ...overrides,
+      });
+
+    const threads = [
+      makeTimestampedThread("pinned-1", "2026-03-09T09:01:00.000Z", {
+        pinnedAt: "2026-03-09T10:11:00.000Z",
+      }),
+      makeTimestampedThread("pinned-2", "2026-03-09T09:02:00.000Z", {
+        pinnedAt: "2026-03-09T10:11:00.000Z",
+      }),
+      makeTimestampedThread("pinned-3", "2026-03-09T09:03:00.000Z", {
+        pinnedAt: "2026-03-09T10:11:00.000Z",
+      }),
+      makeTimestampedThread("pinned-4", "2026-03-09T09:04:00.000Z", {
+        pinnedAt: "2026-03-09T10:11:00.000Z",
+      }),
+      makeTimestampedThread("running-newer", "2026-03-09T10:10:00.000Z", { session }),
+      makeTimestampedThread("running-older", "2026-03-09T09:00:00.000Z", { session }),
+      makeTimestampedThread("recent-unpinned", "2026-03-09T10:05:00.000Z"),
+    ];
+    const selected = selectActiveAndRecentThreads(threads, 5);
+
+    expect(selected.map((thread) => thread.id)).toEqual([
+      ThreadId.make("running-newer"),
+      ThreadId.make("running-older"),
+      ThreadId.make("recent-unpinned"),
+      ThreadId.make("pinned-4"),
+      ThreadId.make("pinned-3"),
+    ]);
+    expect(selectActiveAndRecentThreads(threads, 1).map((thread) => thread.id)).toEqual([
+      ThreadId.make("running-newer"),
+      ThreadId.make("running-older"),
+    ]);
+  });
+
+  it("excludes archived threads and respects an empty limit", () => {
+    const archived = makeThread({
+      id: ThreadId.make("archived"),
+      archivedAt: "2026-03-09T10:00:00.000Z",
+    });
+
+    expect(selectActiveAndRecentThreads([archived], 5)).toEqual([]);
+    expect(selectActiveAndRecentThreads([makeThread()], 0)).toEqual([]);
+  });
+});
diff --git a/apps/web/src/lib/threadSort.ts b/apps/web/src/lib/threadSort.ts
@@ -11,6 +11,8 @@ export type ThreadSortInput = Pick<Thread, "createdAt" | "updatedAt"> & {
   pinnedAt?: string | null;
 };
 
+export type ThreadInFlightStatus = "working" | "starting";
+
 export function toSortableTimestamp(iso: string | undefined): number | null {
   if (!iso) return null;
   const ms = Date.parse(iso);
@@ -51,6 +53,19 @@ export function getThreadSortTimestamp(
   return getLatestUserMessageTimestamp(thread);
 }
 
+function compareThreadsByTimestamp<T extends Pick<Thread, "id"> & ThreadSortInput>(
+  left: T,
+  right: T,
+  sortOrder: SidebarThreadSortOrder,
+): number {
+  const rightTimestamp = getThreadSortTimestamp(right, sortOrder);
+  const leftTimestamp = getThreadSortTimestamp(left, sortOrder);
+  const byTimestamp =
+    rightTimestamp === leftTimestamp ? 0 : rightTimestamp > leftTimestamp ? 1 : -1;
+  if (byTimestamp !== 0) return byTimestamp;
+  return right.id.localeCompare(left.id);
+}
+
 export function sortThreads<T extends Pick<Thread, "id"> & ThreadSortInput>(
   threads: readonly T[],
   sortOrder: SidebarThreadSortOrder,
@@ -62,15 +77,42 @@ export function sortThreads<T extends Pick<Thread, "id"> & ThreadSortInput>(
       return rightPinned ? 1 : -1;
     }
 
-    const rightTimestamp = getThreadSortTimestamp(right, sortOrder);
-    const leftTimestamp = getThreadSortTimestamp(left, sortOrder);
-    const byTimestamp =
-      rightTimestamp === leftTimestamp ? 0 : rightTimestamp > leftTimestamp ? 1 : -1;
-    if (byTimestamp !== 0) return byTimestamp;
-    return right.id.localeCompare(left.id);
+    return compareThreadsByTimestamp(left, right, sortOrder);
   });
 }
 
+export function getThreadInFlightStatus(
+  thread: Pick<Thread, "session">,
+): ThreadInFlightStatus | null {
+  if (thread.session?.status === "running" || thread.session?.orchestrationStatus === "running") {
+    return "working";
+  }
+
+  if (
+    thread.session?.status === "connecting" ||
+    thread.session?.orchestrationStatus === "starting"
+  ) {
+    return "starting";
+  }
+
+  return null;
+}
+
+export function selectActiveAndRecentThreads<
+  T extends Pick<Thread, "id" | "archivedAt" | "session"> & ThreadSortInput,
+>(threads: readonly T[], limit: number): T[] {
+  if (limit <= 0) return [];
+
+  const byRecency = threads
+    .filter((thread) => thread.archivedAt === null)
+    .toSorted((left, right) => compareThreadsByTimestamp(left, right, "updated_at"));
+  const activeThreads = byRecency.filter((thread) => getThreadInFlightStatus(thread) !== null);
+  const recentThreads = byRecency.filter((thread) => getThreadInFlightStatus(thread) === null);
+  const remainingRecentThreadCount = Math.max(0, limit - activeThreads.length);
+
+  return [...activeThreads, ...recentThreads.slice(0, remainingRecentThreadCount)];
+}
+
 export function getLatestThreadForProject<
   T extends Pick<Thread, "id" | "projectId" | "archivedAt"> & ThreadSortInput,
 >(threads: readonly T[], projectId: ProjectId, sortOrder: SidebarThreadSortOrder): T | null {
