Merge branch 'main' into dependabot/npm_and_yarn/docs/npm_and_yarn-599c0cf0ef

Author: mergify[bot]

components/frontend/src/app/projects/[name]/sessions/[sessionName]/components/__tests__/sessions-sidebar.test.tsx

@@ -34,10 +34,23 @@ vi.mock('@/services/queries/use-project-access', () => ({
   useProjectAccess: () => ({ data: { userRole: 'admin' } }),
 }));
 
+const mockCurrentUser = vi.fn(() => ({ data: { authenticated: true, userId: 'user-1', displayName: 'Test User' } }));
+vi.mock('@/services/queries/use-auth', () => ({
+  useCurrentUser: () => mockCurrentUser(),
+}));
+
 vi.mock('@/services/queries/use-version', () => ({
   useVersion: () => ({ data: '1.0.0' }),
 }));
 
+const localStorageValues: Record<string, unknown> = {};
+vi.mock('@/hooks/use-local-storage', () => ({
+  useLocalStorage: (key: string, initial: unknown) => {
+    const value = key in localStorageValues ? localStorageValues[key] : initial;
+    return [value, vi.fn(), vi.fn()];
+  },
+}));
+
 vi.mock('@/components/session-status-dot', () => ({
   SessionStatusDot: ({ phase }: { phase: string }) => (
     <span data-testid="status-dot">{phase}</span>
@@ -49,7 +62,12 @@ vi.mock('date-fns', () => ({
   formatDistanceToNow: () => '2 hours',
 }));
 
-function makeSessions(count: number) {
+type MakeSessionsOptions = {
+  userId?: string;
+  phase?: string;
+};
+
+function makeSessions(count: number, options: MakeSessionsOptions = {}) {
   return Array.from({ length: count }, (_, i) => ({
     metadata: {
       name: `session-${i}`,
@@ -62,8 +80,9 @@ function makeSessions(count: number) {
       initialPrompt: 'test',
       llmSettings: { model: 'test', temperature: 0, maxTokens: 100 },
       timeout: 3600,
+      ...(options.userId ? { userContext: { userId: options.userId, displayName: 'User', groups: [] } } : {}),
     },
-    status: { phase: 'Running' as const },
+    status: { phase: options.phase ?? 'Running' },
   })) as unknown as AgenticSession[];
 }
 
@@ -76,6 +95,7 @@ describe('SessionsSidebar', () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
+    Object.keys(localStorageValues).forEach((k) => delete localStorageValues[k]);
     mockUseSessionsPaginated.mockReturnValue({
       data: { items: [] },
       isLoading: false,
@@ -184,4 +204,59 @@ describe('SessionsSidebar', () => {
     fireEvent.click(collapseBtn);
     expect(onCollapse).toHaveBeenCalled();
   });
+
+  it('renders filter chips', () => {
+    render(<SessionsSidebar {...defaultProps} />);
+    expect(screen.getByTestId('sidebar-filters')).toBeDefined();
+    expect(screen.getByTestId('filter-mine')).toBeDefined();
+    expect(screen.getByTestId('filter-running')).toBeDefined();
+    expect(screen.getByTestId('filter-completed')).toBeDefined();
+    expect(screen.getByTestId('filter-failed')).toBeDefined();
+  });
+
+  it('"Mine" filter chip has correct label', () => {
+    render(<SessionsSidebar {...defaultProps} />);
+    expect(screen.getByTestId('filter-mine').textContent).toContain('Mine');
+  });
+
+  it('shows "No matching sessions" when status filter excludes all sessions', () => {
+    localStorageValues['acp:sidebar:status:test-project'] = 'failed';
+    mockUseSessionsPaginated.mockReturnValue({
+      data: { items: makeSessions(3, { phase: 'Running' }) },
+      isLoading: false,
+    });
+
+    render(<SessionsSidebar {...defaultProps} />);
+    expect(screen.getByText('No matching sessions')).toBeDefined();
+  });
+
+  it('shows "No matching sessions" when "Mine" filter excludes all sessions', () => {
+    localStorageValues['acp:sidebar:mine:test-project'] = true;
+    mockCurrentUser.mockReturnValue({ data: { authenticated: true, userId: 'user-1', displayName: 'Test User' } });
+    mockUseSessionsPaginated.mockReturnValue({
+      data: { items: makeSessions(3, { userId: 'other-user' }) },
+      isLoading: false,
+    });
+
+    render(<SessionsSidebar {...defaultProps} />);
+    expect(screen.getByText('No matching sessions')).toBeDefined();
+  });
+
+  it('shows only matching sessions when status filter is active', () => {
+    localStorageValues['acp:sidebar:status:test-project'] = 'failed';
+    const runningSession = makeSessions(1, { phase: 'Running' })[0];
+    const failedSession = makeSessions(1, { phase: 'Failed' })[0];
+    failedSession.metadata.name = 'failed-1';
+    failedSession.metadata.uid = 'uid-failed-1';
+    failedSession.spec.displayName = 'Failed Session';
+
+    mockUseSessionsPaginated.mockReturnValue({
+      data: { items: [runningSession, failedSession] },
+      isLoading: false,
+    });
+
+    render(<SessionsSidebar {...defaultProps} />);
+    expect(screen.getByText('Failed Session')).toBeDefined();
+    expect(screen.queryByText('Session 0')).toBeNull();
+  });
 });

components/frontend/src/app/projects/[name]/sessions/[sessionName]/components/sessions-sidebar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { useMemo, useState, useCallback } from "react";
 import { useRouter, usePathname } from "next/navigation";
 import Link from "next/link";
 import { toast } from "sonner";
@@ -38,6 +38,7 @@ import {
   Square,
   ArrowRight,
   Trash2,
+  User,
 } from "lucide-react";
 import { formatDistanceToNow } from "date-fns";
 import {
@@ -48,10 +49,14 @@ import {
   useUpdateSessionDisplayName,
 } from "@/services/queries/use-sessions";
 import { useProjectAccess } from "@/services/queries/use-project-access";
+import { useCurrentUser } from "@/services/queries/use-auth";
 import { useVersion } from "@/services/queries/use-version";
+import { useLocalStorage } from "@/hooks/use-local-storage";
 import { cn } from "@/lib/utils";
 import type { AgenticSession } from "@/types/api";
 
+type StatusFilter = "all" | "running" | "completed" | "failed";
+
 type SessionsSidebarProps = {
   projectName: string;
   currentSessionName: string;
@@ -102,20 +107,59 @@ export function SessionsSidebar({
   const continueMutation = useContinueSession();
   const updateDisplayNameMutation = useUpdateSessionDisplayName();
 
+  const { data: currentUser } = useCurrentUser();
+
   const [editingSession, setEditingSession] = useState<{ name: string; displayName: string } | null>(null);
   const [deletingSessionName, setDeletingSessionName] = useState<string | null>(null);
+  const [mineOnly, setMineOnly] = useLocalStorage(`acp:sidebar:mine:${projectName}`, false);
+  const [statusFilter, setStatusFilter] = useLocalStorage<StatusFilter>(`acp:sidebar:status:${projectName}`, "all");
+
+  const toggleMineOnly = useCallback(() => setMineOnly((prev: boolean) => !prev), [setMineOnly]);
+  const toggleStatusFilter = useCallback(
+    (filter: StatusFilter) => setStatusFilter((prev: StatusFilter) => prev === filter ? "all" : filter),
+    [setStatusFilter],
+  );
 
   const sessions = useMemo(() => {
     const items = data?.items ?? [];
     return [...items].sort((a, b) => getActivityTime(b) - getActivityTime(a));
   }, [data?.items]);
 
+  const filteredSessions = useMemo(() => {
+    let result = sessions;
+
+    if (mineOnly && currentUser?.userId) {
+      result = result.filter(
+        (s) => s.spec.userContext?.userId === currentUser.userId,
+      );
+    }
+
+    if (statusFilter !== "all") {
+      result = result.filter((s) => {
+        const phase = s.status?.phase;
+        switch (statusFilter) {
+          case "running":
+            return phase === "Running" || phase === "Pending" || phase === "Creating";
+          case "completed":
+            return phase === "Completed" || phase === "Stopped";
+          case "failed":
+            return phase === "Failed";
+          default:
+            return true;
+        }
+      });
+    }
+
+    return result;
+  }, [sessions, mineOnly, currentUser?.userId, statusFilter]);
+
   const visibleSessions = useMemo(() => {
-    if (showAll) return sessions;
-    return sessions.slice(0, INITIAL_RECENTS_COUNT);
-  }, [sessions, showAll]);
+    if (showAll) return filteredSessions;
+    return filteredSessions.slice(0, INITIAL_RECENTS_COUNT);
+  }, [filteredSessions, showAll]);
 
-  const hasMore = sessions.length > INITIAL_RECENTS_COUNT && !showAll;
+  const hasMore = filteredSessions.length > INITIAL_RECENTS_COUNT && !showAll;
+  const isFiltered = mineOnly || statusFilter !== "all";
 
   const navItems: NavItem[] = useMemo(
     () => [
@@ -307,15 +351,49 @@ export function SessionsSidebar({
           <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
             Recents
           </span>
-          <button
-            type="button"
+          <Button
+            variant="ghost"
+            size="sm"
             onClick={() => refetch()}
             disabled={isFetching}
-            className="text-muted-foreground/60 hover:text-muted-foreground transition-colors disabled:opacity-50"
+            className="h-5 w-5 p-0 text-muted-foreground/60 hover:text-muted-foreground"
             title={dataUpdatedAt ? `Last updated ${formatDistanceToNow(new Date(dataUpdatedAt), { addSuffix: true })}` : "Refresh"}
           >
             <RefreshCw className="h-3 w-3" />
-          </button>
+          </Button>
+        </div>
+
+        {/* Filter chips */}
+        <div className="flex items-center gap-1 px-3 pb-1 flex-wrap" data-testid="sidebar-filters">
+          <Button
+            variant={mineOnly ? "default" : "secondary"}
+            size="sm"
+            onClick={toggleMineOnly}
+            className={cn(
+              "h-auto rounded-full px-2 py-0.5 text-[0.6875rem] font-medium gap-1",
+              !mineOnly && "text-muted-foreground",
+            )}
+            title="Show only my sessions"
+            data-testid="filter-mine"
+          >
+            <User className="h-3 w-3" />
+            Mine
+          </Button>
+          {(["running", "completed", "failed"] as const).map((filter) => (
+            <Button
+              key={filter}
+              variant={statusFilter === filter ? "default" : "secondary"}
+              size="sm"
+              onClick={() => toggleStatusFilter(filter)}
+              className={cn(
+                "h-auto rounded-full px-2 py-0.5 text-[0.6875rem] font-medium capitalize",
+                statusFilter !== filter && "text-muted-foreground",
+              )}
+              data-testid={`filter-${filter}`}
+            >
+              {filter}
+            </Button>
+          ))}
         </div>
 
         <div className="flex-1 overflow-y-auto">
@@ -325,9 +403,9 @@ export function SessionsSidebar({
                 <Skeleton key={i} className="h-10 w-full rounded-md" />
               ))}
             </div>
-          ) : sessions.length === 0 ? (
+          ) : filteredSessions.length === 0 ? (
             <div className="p-4 text-center text-sm text-muted-foreground">
-              No sessions yet
+              {isFiltered ? "No matching sessions" : "No sessions yet"}
             </div>
           ) : (
               <div className="space-y-0.5 p-1">