feat(tickets): conservation des tickets en sprint, affichage du statut & filtres (#37)

Les tickets restent rattachés à leur sprint ; SprintManager affiche le
statut et propose des filtres via useTicketSearch. Frontend / read-query.

QA vert : tsc --noEmit exit 0, vitest 62 fichiers / 623 tests passés.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/features/tickets/SprintManager.tsx

@@ -9,13 +9,22 @@
  *
  * Deleting a sprint UNASSIGNS its tickets (they fall back to the backlog); it
  * never deletes tickets — the confirmation says so explicitly.
+ *
+ * Ticket view (#37): the sprint tickets are read through this component's OWN
+ * {@link useTicketSearch} instance — independent of the main Tickets panel
+ * filter — so tickets stay visible once closed (no default `statuses` filter)
+ * and can be filtered/sorted per status/priority via the shared
+ * {@link TicketFacetsBar}. Rows show their {@link StatusBadge}/{@link
+ * PriorityBadge}. Grouping by sprint is done client-side on the returned rows.
  */
 
 import { useState } from "react";
 
 import { Button, Input } from "@/shared";
-import { TicketRef } from "./ticketMeta";
+import { PriorityBadge, StatusBadge, TicketRef } from "./ticketMeta";
+import { TicketFacetsBar } from "./TicketFacetsBar";
 import { TicketPicker } from "./TicketPicker";
+import { useTicketSearch } from "./useTicketSearch";
 import type { TicketsViewModel } from "./useTickets";
 
 export interface SprintManagerProps {
@@ -25,7 +34,11 @@ export interface SprintManagerProps {
 }
 
 export function SprintManager({ projectId, vm, onClose }: SprintManagerProps) {
-  const items = vm.list?.items ?? [];
+  // Own ticket query, independent of the main panel filter (#37). No default
+  // `statuses` → closed/done tickets remain visible; the facets bar below drives
+  // per-status/priority filtering + sort of the whole sprint view.
+  const search = useTicketSearch(projectId, { refreshOnEvents: true });
+  const items = search.rows;
   const sprints = [...vm.sprints].sort((a, b) => a.order - b.order);
 
   const [newName, setNewName] = useState("");
@@ -92,13 +105,37 @@ export function SprintManager({ projectId, vm, onClose }: SprintManagerProps) {
           </Button>
         </form>
 
+        {/* ── Sprint-ticket filters (#37) — independent of the main panel;
+            filters/sorts every sprint's tickets by status/priority/text. ── */}
+        <div className="mb-5">
+          <TicketFacetsBar
+            text={search.text}
+            onTextChange={search.setText}
+            statuses={search.statuses}
+            priorities={search.priorities}
+            onToggleStatus={search.toggleStatus}
+            onTogglePriority={search.togglePriority}
+            onClearFacets={search.clearFacets}
+            sort={search.sort}
+            onSortChange={search.setSort}
+          />
+        </div>
+
+        {search.error && (
+          <p
+            role="alert"
+            className="mb-4 rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-sm text-danger"
+          >
+            {search.error}
+          </p>
+        )}
+
         {sprints.length === 0 ? (
           <p className="text-sm text-muted">No sprints yet.</p>
         ) : (
           <ul className="flex flex-col gap-4">
             {sprints.map((sprint, index) => {
               const inSprint = items.filter((t) => t.sprintId === sprint.id);
-              const addable = items.filter((t) => t.sprintId !== sprint.id);
               const draft = renameDrafts[sprint.id] ?? sprint.name;
               return (
                 <li
@@ -180,7 +217,8 @@ export function SprintManager({ projectId, vm, onClose }: SprintManagerProps) {
                     </div>
                   </div>
 
-                  {/* ── Tickets in this sprint ── */}
+                  {/* ── Tickets in this sprint (with status/priority badges,
+                      #37; kept visible even once closed/done) ── */}
                   <div className="mt-3 flex flex-col gap-1">
                     {inSprint.length === 0 ? (
                       <p className="text-xs text-muted">No tickets in this sprint.</p>
@@ -195,6 +233,10 @@ export function SprintManager({ projectId, vm, onClose }: SprintManagerProps) {
                             <span className="min-w-0 flex-1 truncate text-content">
                               {t.title}
                             </span>
+                            <span className="flex shrink-0 items-center gap-1">
+                              <StatusBadge status={t.status} />
+                              <PriorityBadge priority={t.priority} />
+                            </span>
                             <Button
                               size="sm"
                               variant="ghost"
@@ -216,14 +258,12 @@ export function SprintManager({ projectId, vm, onClose }: SprintManagerProps) {
                         size="sm"
                         variant="ghost"
                         aria-label={`add ticket to sprint ${sprint.name}`}
-                        disabled={vm.busy || addable.length === 0}
+                        disabled={vm.busy}
                         onClick={() =>
                           setPickerSprint({ id: sprint.id, name: sprint.name })
                         }
                       >
-                        {addable.length === 0
-                          ? "No tickets to add"
-                          : "Ajouter des tickets"}
+                        Ajouter des tickets
                       </Button>
                     </div>
                   </div>
@@ -232,6 +272,20 @@ export function SprintManager({ projectId, vm, onClose }: SprintManagerProps) {
             })}
           </ul>
         )}
+
+        {/* More sprint tickets may exist beyond the first page (#37). */}
+        {search.hasMore && (
+          <div className="mt-4 flex justify-center">
+            <Button
+              size="sm"
+              variant="ghost"
+              loading={search.busy}
+              onClick={() => search.loadMore()}
+            >
+              Load more tickets
+            </Button>
+          </div>
+        )}
       </div>
 
       {/* ── Delete confirmation ── */}

frontend/src/features/tickets/tickets.test.tsx

@@ -955,4 +955,84 @@ describe("SprintManager (#11)", () => {
       expect(fresh.sprintId).toBeNull();
     });
   });
+
+  /** Seeds sprint "Holder" with one open and one closed ticket assigned. */
+  async function seedSprintWithOpenAndClosed(): Promise<void> {
+    ticket._seedSprint(PROJECT_ID, { id: "s1", order: 1, name: "Holder" });
+    const openT = await ticket.create(PROJECT_ID, {
+      title: "Open member",
+      priority: "high",
+    });
+    await ticket.setTicketSprint(PROJECT_ID, openT.ref, "s1", openT.version);
+    const closedT = await ticket.create(PROJECT_ID, {
+      title: "Closed member",
+      priority: "low",
+    });
+    const upd = await ticket.update(PROJECT_ID, closedT.ref, {
+      status: "closed",
+      expectedVersion: closedT.version,
+    });
+    await ticket.setTicketSprint(PROJECT_ID, closedT.ref, "s1", upd.version);
+  }
+
+  it("keeps closed tickets visible in the sprint with status/priority badges (#37)", async () => {
+    await seedSprintWithOpenAndClosed();
+    const dialog = await openManager();
+
+    const row = await within(dialog).findByLabelText("sprint row Holder");
+    // Both the open and the closed ticket are listed (closed is NOT hidden).
+    expect(within(row).getByText("Open member")).toBeTruthy();
+    expect(within(row).getByText("Closed member")).toBeTruthy();
+    // Each row carries its status + priority badge (scoped to the sprint row so
+    // the facet-bar labels don't collide).
+    expect(within(row).getByText("Closed")).toBeTruthy();
+    expect(within(row).getByText("Open")).toBeTruthy();
+    expect(within(row).getByText("High")).toBeTruthy();
+    expect(within(row).getByText("Low")).toBeTruthy();
+  });
+
+  it("filters the sprint tickets by status via its own facets bar (#37)", async () => {
+    await seedSprintWithOpenAndClosed();
+    const dialog = await openManager();
+
+    await within(dialog).findByText("Open member");
+    expect(within(dialog).getByText("Closed member")).toBeTruthy();
+
+    // Constrain the sprint view to Closed only → the open ticket drops out.
+    fireEvent.click(within(dialog).getByLabelText("filter status Closed"));
+    await waitFor(() =>
+      expect(within(dialog).queryByText("Open member")).toBeNull(),
+    );
+    expect(within(dialog).getByText("Closed member")).toBeTruthy();
+
+    // Clearing the facet brings the open ticket back.
+    fireEvent.click(within(dialog).getByLabelText("filter status Closed"));
+    await waitFor(() =>
+      expect(within(dialog).getByText("Open member")).toBeTruthy(),
+    );
+  });
+
+  it("sprint ticket view is independent of the main panel filter (#37)", async () => {
+    await seedSprintWithOpenAndClosed();
+
+    renderView(ticket, system, agent);
+    await waitFor(() =>
+      expect(
+        screen.getByRole("button", { name: "manage sprints" }),
+      ).toBeTruthy(),
+    );
+
+    // Constrain the MAIN Tickets panel to Open only → the closed ticket leaves
+    // the main list (there is a single main facets bar on screen at this point).
+    fireEvent.click(screen.getByLabelText("filter status Open"));
+    await waitFor(() => expect(screen.queryByText("Closed member")).toBeNull());
+
+    // Open the sprint manager: its own query ignores the main filter, so the
+    // closed ticket is still shown inside its sprint.
+    fireEvent.click(screen.getByRole("button", { name: "manage sprints" }));
+    const dialog = await screen.findByRole("dialog", { name: "manage sprints" });
+    const row = await within(dialog).findByLabelText("sprint row Holder");
+    expect(await within(row).findByText("Closed member")).toBeTruthy();
+    expect(within(row).getByText("Open member")).toBeTruthy();
+  });
 });

frontend/src/features/tickets/useTicketSearch.ts

@@ -27,6 +27,7 @@ import type {
   TicketStatus,
   TicketSummary,
 } from "@/domain";
+import { isSprintEvent, isTicketEvent } from "@/domain";
 import type { TicketListQuery, TicketListSort } from "@/ports";
 import { useGateways } from "@/app/di";
 
@@ -54,6 +55,13 @@ export interface UseTicketSearchOptions {
   excludeRefs?: TicketRef[];
   /** Debounce applied to the free-text search, in ms (default 200). */
   debounceMs?: number;
+  /**
+   * When true, subscribe to `Issue*`/`sprint*` domain events and re-fetch the
+   * first page on any ticket/sprint mutation. Off by default because the
+   * {@link TicketPicker} popup is short-lived and only reads; the sprint view
+   * (#37) enables it so its independent query stays in sync with add/remove.
+   */
+  refreshOnEvents?: boolean;
 }
 
 export interface TicketSearchViewModel {
@@ -78,6 +86,8 @@ export interface TicketSearchViewModel {
   hasMore: boolean;
   /** Loads and appends the next page (no-op when exhausted or busy). */
   loadMore: () => void;
+  /** Forces a first-page re-fetch (e.g. after an external mutation). */
+  refresh: () => void;
   /** Resolves a row's `#ref` to the full picker result (reads id + number). */
   resolve: (ref: TicketRef) => Promise<TicketPickerResult>;
 }
@@ -100,8 +110,9 @@ export function useTicketSearch(
   projectId: string,
   options: UseTicketSearchOptions = {},
 ): TicketSearchViewModel {
-  const { initialQuery, excludeRefs, debounceMs = 200 } = options;
-  const { ticket } = useGateways();
+  const { initialQuery, excludeRefs, debounceMs = 200, refreshOnEvents } =
+    options;
+  const { ticket, system } = useGateways();
 
   const [facets, setFacets] = useState<Facets>({
     statuses: initialQuery?.statuses,
@@ -118,6 +129,10 @@ export function useTicketSearch(
   const [cursor, setCursor] = useState<string | undefined>(undefined);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  // Bumped to force a first-page re-fetch without changing the query (used by
+  // `refresh` and the domain-event subscription).
+  const [reloadNonce, setReloadNonce] = useState(0);
+  const refresh = useCallback(() => setReloadNonce((n) => n + 1), []);
 
   const limit = initialQuery?.limit;
   // Stable set so identity only changes when the caller passes new refs.
@@ -190,8 +205,31 @@ export function useTicketSearch(
       });
     // `buildQuery`/`projectId`/`ticket` are captured via `queryKey`; listing
     // them would refetch on every render (fresh object identities).
+    // `reloadNonce` is an explicit refetch trigger (refresh / domain events).
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [queryKey, projectId, ticket]);
+  }, [queryKey, projectId, ticket, reloadNonce]);
+
+  // Optional live refresh: on any ticket/sprint mutation, re-fetch the first
+  // page so an externally-driven change (e.g. sprint add/remove) reflects here.
+  useEffect(() => {
+    if (!refreshOnEvents || !system) return;
+    let unsubscribe: (() => void) | undefined;
+    let cancelled = false;
+    void system
+      .onDomainEvent((event) => {
+        if (isTicketEvent(event) || isSprintEvent(event)) {
+          setReloadNonce((n) => n + 1);
+        }
+      })
+      .then((u) => {
+        if (cancelled) u();
+        else unsubscribe = u;
+      });
+    return () => {
+      cancelled = true;
+      unsubscribe?.();
+    };
+  }, [refreshOnEvents, system]);
 
   const loadMore = useCallback(() => {
     if (busy || !cursor) return;
@@ -277,6 +315,7 @@ export function useTicketSearch(
     setSort,
     hasMore: cursor !== undefined,
     loadMore,
+    refresh,
     resolve,
   };
 }