feat: add stickysession selection box to select multiple sessions too be deleted (#286)

Author: huzky-v

app/modules/proxy/sticky_repository.py

@@ -4,7 +4,7 @@
 from dataclasses import dataclass
 from datetime import datetime, timedelta
 
-from sqlalchemy import delete, select
+from sqlalchemy import and_, delete, or_, select
 from sqlalchemy.dialects.postgresql import insert as pg_insert
 from sqlalchemy.dialects.sqlite import insert as sqlite_insert
 from sqlalchemy.ext.asyncio import AsyncSession
@@ -74,6 +74,18 @@ async def delete(self, key: str, *, kind: StickySessionKind) -> bool:
         await self._session.commit()
         return result.scalar_one_or_none() is not None
 
+    async def delete_entries(self, entries: Sequence[tuple[str, StickySessionKind]]) -> int:
+        targets = {(key, kind) for key, kind in entries if key}
+        if not targets:
+            return 0
+        statement = delete(StickySession).where(
+            or_(*(and_(StickySession.key == key, StickySession.kind == kind) for key, kind in targets))
+        )
+        result = await self._session.execute(statement.returning(StickySession.key))
+        deleted = len(result.scalars().all())
+        await self._session.commit()
+        return deleted
+
     async def list_entries(
         self,
         *,

app/modules/sticky_sessions/api.py

@@ -9,6 +9,8 @@
 from app.modules.sticky_sessions.schemas import (
     StickySessionDeleteResponse,
     StickySessionEntryResponse,
+    StickySessionsDeleteRequest,
+    StickySessionsDeleteResponse,
     StickySessionsListResponse,
     StickySessionsPurgeRequest,
     StickySessionsPurgeResponse,
@@ -58,6 +60,15 @@ async def purge_sticky_sessions(
     return StickySessionsPurgeResponse(deleted_count=deleted_count)
 
 
+@router.post("/delete", response_model=StickySessionsDeleteResponse)
+async def delete_sticky_sessions(
+    payload: StickySessionsDeleteRequest,
+    context: StickySessionsContext = Depends(get_sticky_sessions_context),
+) -> StickySessionsDeleteResponse:
+    deleted_count = await context.service.delete_entries([(entry.key, entry.kind) for entry in payload.sessions])
+    return StickySessionsDeleteResponse(deleted_count=deleted_count)
+
+
 @router.delete("/{kind}/{key:path}", response_model=StickySessionDeleteResponse)
 async def delete_sticky_session(
     kind: StickySessionKind,

app/modules/sticky_sessions/schemas.py

@@ -26,10 +26,23 @@ class StickySessionsListResponse(DashboardModel):
     has_more: bool = False
 
 
+class StickySessionIdentifier(DashboardModel):
+    key: str = Field(min_length=1)
+    kind: StickySessionKind
+
+
 class StickySessionDeleteResponse(DashboardModel):
     status: str
 
 
+class StickySessionsDeleteRequest(DashboardModel):
+    sessions: list[StickySessionIdentifier] = Field(min_length=1, max_length=500)
+
+
+class StickySessionsDeleteResponse(DashboardModel):
+    deleted_count: int
+
+
 class StickySessionsPurgeRequest(DashboardModel):
     stale_only: Literal[True] = True
 

app/modules/sticky_sessions/service.py

@@ -1,5 +1,6 @@
 from __future__ import annotations
 
+from collections.abc import Sequence
 from dataclasses import dataclass
 from datetime import datetime, timedelta
 
@@ -78,6 +79,9 @@ async def list_entries(
     async def delete_entry(self, key: str, *, kind: StickySessionKind) -> bool:
         return await self._repository.delete(key, kind=kind)
 
+    async def delete_entries(self, entries: Sequence[tuple[str, StickySessionKind]]) -> int:
+        return await self._repository.delete_entries(entries)
+
     async def purge_entries(self) -> int:
         settings = await self._settings_repository.get_or_create()
         cutoff = utcnow() - timedelta(seconds=settings.openai_cache_affinity_max_age_seconds)

frontend/src/features/sticky-sessions/api.ts

@@ -1,8 +1,9 @@
 import { del, get, post } from "@/lib/api-client";
 
 import {
-  StickySessionDeleteResponseSchema,
   StickySessionIdentifierSchema,
+  StickySessionsDeleteRequestSchema,
+  StickySessionsDeleteResponseSchema,
   StickySessionsListParamsSchema,
   StickySessionsListResponseSchema,
   StickySessionsPurgeRequestSchema,
@@ -23,10 +24,14 @@ export function listStickySessions(params: unknown) {
 
 export function deleteStickySession(payload: unknown) {
   const validated = StickySessionIdentifierSchema.parse(payload);
-  return del(
-    `${STICKY_SESSIONS_PATH}/${validated.kind}/${encodeURIComponent(validated.key)}`,
-    StickySessionDeleteResponseSchema,
-  );
+  return del(`${STICKY_SESSIONS_PATH}/${validated.kind}/${encodeURIComponent(validated.key)}`);
+}
+
+export function deleteStickySessions(payload: unknown) {
+  const validated = StickySessionsDeleteRequestSchema.parse(payload);
+  return post(`${STICKY_SESSIONS_PATH}/delete`, StickySessionsDeleteResponseSchema, {
+    body: validated,
+  });
 }
 
 export function purgeStickySessions(payload: unknown) {

frontend/src/features/sticky-sessions/components/sticky-sessions-section.test.tsx

@@ -16,7 +16,7 @@ describe("StickySessionsSection", () => {
     vi.clearAllMocks();
   });
 
-  it("renders rows and supports purge and remove actions", async () => {
+  it("renders rows and supports selection, purge, and remove actions", async () => {
     const user = userEvent.setup();
     const deleteMutation = {
       mutateAsync: vi.fn().mockResolvedValue(undefined),
@@ -83,6 +83,26 @@ describe("StickySessionsSection", () => {
     expect(screen.getByText("1")).toBeInTheDocument();
     expect(screen.getByText("1–2 of 2")).toBeInTheDocument();
 
+    await user.click(screen.getByRole("checkbox", { name: "Select all visible sticky sessions" }));
+    expect(screen.getByText("Selected")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Remove selected" })).toBeEnabled();
+
+    await user.click(screen.getByRole("button", { name: "Remove selected" }));
+    await user.click(screen.getByRole("button", { name: "Remove selected" }));
+
+    await waitFor(() => {
+      expect(deleteMutation.mutateAsync).toHaveBeenNthCalledWith(1, [
+        {
+          key: "session-1",
+          kind: "prompt_cache",
+        },
+        {
+          key: "session-2",
+          kind: "codex_session",
+        },
+      ]);
+    });
+
     await user.click(screen.getByRole("button", { name: "Purge stale" }));
     await user.click(screen.getByRole("button", { name: "Purge" }));
 
@@ -94,10 +114,12 @@ describe("StickySessionsSection", () => {
     await user.click(screen.getByRole("button", { name: "Remove" }));
 
     await waitFor(() => {
-      expect(deleteMutation.mutateAsync).toHaveBeenCalledWith({
-        key: "session-1",
-        kind: "prompt_cache",
-      });
+      expect(deleteMutation.mutateAsync).toHaveBeenNthCalledWith(2, [
+        {
+          key: "session-1",
+          kind: "prompt_cache",
+        },
+      ]);
     });
   });
 

frontend/src/features/sticky-sessions/components/sticky-sessions-section.tsx

@@ -1,11 +1,12 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { Pin } from "lucide-react";
 
 import { AlertMessage } from "@/components/alert-message";
 import { ConfirmDialog } from "@/components/confirm-dialog";
 import { EmptyState } from "@/components/empty-state";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import { SpinnerBlock } from "@/components/ui/spinner";
 import {
   Table,
@@ -17,7 +18,7 @@ import {
 } from "@/components/ui/table";
 import { PaginationControls } from "@/features/dashboard/components/filters/pagination-controls";
 import { useStickySessions } from "@/features/sticky-sessions/hooks/use-sticky-sessions";
-import type { StickySessionIdentifier, StickySessionKind } from "@/features/sticky-sessions/schemas";
+import type { StickySessionEntry, StickySessionIdentifier, StickySessionKind } from "@/features/sticky-sessions/schemas";
 import { useDialogState } from "@/hooks/use-dialog-state";
 import { getErrorMessageOrNull } from "@/utils/errors";
 import { formatTimeLong } from "@/utils/formatters";
@@ -33,10 +34,18 @@ function kindLabel(kind: StickySessionKind): string {
   }
 }
 
+function stickySessionRowId(entry: StickySessionIdentifier): string {
+  return `${entry.kind}:${entry.key}`;
+}
+
+const EMPTY_STICKY_SESSION_ENTRIES: StickySessionEntry[] = [];
+
 export function StickySessionsSection() {
   const { params, setLimit, setOffset, stickySessionsQuery, deleteMutation, purgeMutation } = useStickySessions();
   const deleteDialog = useDialogState<StickySessionIdentifier>();
+  const deleteSelectedDialog = useDialogState<StickySessionIdentifier[]>();
   const purgeDialog = useDialogState();
+  const [selectedRowIds, setSelectedRowIds] = useState<string[]>([]);
 
   const mutationError = useMemo(
     () =>
@@ -46,13 +55,40 @@ export function StickySessionsSection() {
     [stickySessionsQuery.error, deleteMutation.error, purgeMutation.error],
   );
 
-  const entries = stickySessionsQuery.data?.entries ?? [];
+  const entries = stickySessionsQuery.data?.entries ?? EMPTY_STICKY_SESSION_ENTRIES;
   const staleCount = stickySessionsQuery.data?.stalePromptCacheCount ?? 0;
   const total = stickySessionsQuery.data?.total ?? 0;
   const hasMore = stickySessionsQuery.data?.hasMore ?? false;
   const busy = deleteMutation.isPending || purgeMutation.isPending;
   const hasEntries = entries.length > 0;
   const hasAnyRows = total > 0;
+  const selectedRowIdSet = useMemo(() => new Set(selectedRowIds), [selectedRowIds]);
+  const selectedEntries = useMemo(
+    () =>
+      entries
+        .filter((entry) => selectedRowIdSet.has(stickySessionRowId(entry)))
+        .map(({ key, kind }) => ({ key, kind })),
+    [entries, selectedRowIdSet],
+  );
+  const selectedCount = selectedEntries.length;
+  const allVisibleSelected = hasEntries && selectedCount === entries.length;
+  const someVisibleSelected = selectedCount > 0 && !allVisibleSelected;
+  const selectedDeleteTargets = deleteSelectedDialog.data ?? [];
+  const selectedDeleteCount = selectedDeleteTargets.length;
+
+  const setSelected = (target: StickySessionIdentifier, checked: boolean) => {
+    const rowId = stickySessionRowId(target);
+    setSelectedRowIds((current) => {
+      if (checked) {
+        return current.includes(rowId) ? current : [...current, rowId];
+      }
+      return current.filter((value) => value !== rowId);
+    });
+  };
+
+  const setAllVisibleSelected = (checked: boolean) => {
+    setSelectedRowIds(checked ? entries.map((entry) => stickySessionRowId(entry)) : []);
+  };
 
   return (
     <section className="space-y-3 rounded-xl border bg-card p-5">
@@ -80,17 +116,35 @@ export function StickySessionsSection() {
             <span className="text-xs text-muted-foreground">Stale prompt-cache</span>
             <span className="text-sm font-medium tabular-nums">{staleCount}</span>
           </div>
+          {selectedCount > 0 ? (
+            <div className="flex items-center gap-1.5">
+              <span className="text-xs text-muted-foreground">Selected</span>
+              <span className="text-sm font-medium tabular-nums">{selectedCount}</span>
+            </div>
+          ) : null}
+        </div>
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+          <Button
+            type="button"
+            size="sm"
+            variant="destructive"
+            className="h-8 text-xs"
+            disabled={busy || selectedCount === 0}
+            onClick={() => deleteSelectedDialog.show(selectedEntries)}
+          >
+            Remove selected
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            className="h-8 text-xs"
+            disabled={busy || staleCount === 0}
+            onClick={() => purgeDialog.show()}
+          >
+            Purge stale
+          </Button>
         </div>
-        <Button
-          type="button"
-          size="sm"
-          variant="outline"
-          className="h-8 text-xs"
-          disabled={busy || staleCount === 0}
-          onClick={() => purgeDialog.show()}
-        >
-          Purge stale
-        </Button>
       </div>
 
       {stickySessionsQuery.isLoading && !stickySessionsQuery.data ? (
@@ -110,7 +164,15 @@ export function StickySessionsSection() {
               <Table className="table-fixed">
                 <TableHeader>
                   <TableRow>
-                    <TableHead className="w-[30%] min-w-[14rem] pl-4 text-[11px] uppercase tracking-wider text-muted-foreground/80">
+                    <TableHead className="w-[5%] min-w-[3rem] pl-4 text-[11px] uppercase tracking-wider text-muted-foreground/80">
+                      <Checkbox
+                        aria-label="Select all visible sticky sessions"
+                        checked={allVisibleSelected ? true : someVisibleSelected ? "indeterminate" : false}
+                        disabled={busy || !hasEntries}
+                        onCheckedChange={(checked) => setAllVisibleSelected(checked === true)}
+                      />
+                    </TableHead>
+                    <TableHead className="w-[25%] min-w-[14rem] text-[11px] uppercase tracking-wider text-muted-foreground/80">
                       Key
                     </TableHead>
                     <TableHead className="w-[14%] min-w-[8rem] text-[11px] uppercase tracking-wider text-muted-foreground/80">
@@ -134,9 +196,18 @@ export function StickySessionsSection() {
                   {entries.map((entry) => {
                     const updated = formatTimeLong(entry.updatedAt);
                     const expires = entry.expiresAt ? formatTimeLong(entry.expiresAt) : null;
+                    const selected = selectedRowIdSet.has(stickySessionRowId(entry));
                     return (
-                      <TableRow key={`${entry.kind}:${entry.key}`}>
-                        <TableCell className="max-w-[18rem] truncate pl-4 font-mono text-xs" title={entry.key}>
+                      <TableRow key={`${entry.kind}:${entry.key}`} data-state={selected ? "selected" : undefined}>
+                        <TableCell className="pl-4">
+                          <Checkbox
+                            aria-label={`Select sticky session ${entry.key}`}
+                            checked={selected}
+                            disabled={busy}
+                            onCheckedChange={(checked) => setSelected(entry, checked === true)}
+                          />
+                        </TableCell>
+                        <TableCell className="max-w-[18rem] truncate font-mono text-xs" title={entry.key}>
                           {entry.key}
                         </TableCell>
                         <TableCell>
@@ -207,12 +278,33 @@ export function StickySessionsSection() {
           if (!deleteDialog.data) {
             return;
           }
-          void deleteMutation.mutateAsync(deleteDialog.data).finally(() => {
+          void deleteMutation.mutateAsync([deleteDialog.data]).finally(() => {
             deleteDialog.hide();
           });
         }}
       />
 
+      <ConfirmDialog
+        open={deleteSelectedDialog.open}
+        title="Remove selected sticky sessions"
+        description={
+          selectedDeleteCount === 1
+            ? "The selected sticky session will stop pinning future requests."
+            : `${selectedDeleteCount} selected sticky sessions will stop pinning future requests.`
+        }
+        confirmLabel="Remove selected"
+        onOpenChange={deleteSelectedDialog.onOpenChange}
+        onConfirm={() => {
+          if (selectedDeleteTargets.length === 0) {
+            return;
+          }
+          void deleteMutation.mutateAsync(selectedDeleteTargets).finally(() => {
+            setSelectedRowIds([]);
+            deleteSelectedDialog.hide();
+          });
+        }}
+      />
+
       <ConfirmDialog
         open={purgeDialog.open}
         title="Purge stale prompt-cache mappings"