feat(sprints): surface frontend du modèle de sprints

Ticket #10 — volet frontend des sprints.

- Domaine et ports frontend étendus au modèle de sprints (domain/index.ts,
  ports/index.ts).
- Adaptateurs : ticket.ts et mock/index.ts câblent les opérations sprints.
- UI tickets : useTickets + TicketsPanel exposent le rattachement/gestion des
  sprints, avec tests Vitest associés.

Typecheck / vitest / build verts.

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

frontend/src/features/tickets/TicketsPanel.tsx

@@ -9,7 +9,12 @@
 
 import { useState } from "react";
 
-import type { TicketPriority, TicketStatus } from "@/domain";
+import type {
+  Sprint,
+  TicketPriority,
+  TicketStatus,
+  TicketSummary,
+} from "@/domain";
 import { Button, Input, Panel, Spinner, cn } from "@/shared";
 import { useTickets } from "./useTickets";
 import { useProjectAgents } from "./useProjectAgents";
@@ -44,6 +49,20 @@ export function TicketsPanel({ projectId, onOpen }: TicketsPanelProps) {
 
   const items = vm.list?.items ?? [];
 
+  // Group tickets by sprint (ticket #10): one ordered section per sprint that
+  // holds tickets, then a "Sans sprint" bucket. Tickets referencing an unknown
+  // sprint fall into the bucket so none are ever hidden.
+  const sprintIds = new Set(vm.sprints.map((s) => s.id));
+  const grouped = vm.sprints
+    .map((sprint) => ({
+      sprint,
+      tickets: items.filter((t) => t.sprintId === sprint.id),
+    }))
+    .filter((g) => g.tickets.length > 0);
+  const noSprint = items.filter(
+    (t) => !t.sprintId || !sprintIds.has(t.sprintId),
+  );
+
   async function submitCreate(e: React.FormEvent) {
     e.preventDefault();
     if (!newTitle.trim()) return;
@@ -196,7 +215,7 @@ export function TicketsPanel({ projectId, onOpen }: TicketsPanelProps) {
         </div>
       </div>
 
-      {/* ── List ── */}
+      {/* ── List, grouped by sprint (F2) ── */}
       {vm.busy && vm.list === null ? (
         <div className="flex items-center gap-2 text-sm text-muted">
           <Spinner size={14} />
@@ -205,33 +224,31 @@ export function TicketsPanel({ projectId, onOpen }: TicketsPanelProps) {
       ) : items.length === 0 ? (
         <p className="text-sm text-muted">No tickets.</p>
       ) : (
-        <ul className="flex flex-col divide-y divide-border">
-          {items.map((t) => (
-            <li key={t.ref} className="py-2 first:pt-0 last:pb-0">
-              <div className="flex items-start gap-2">
-                <TicketRef ticketRef={t.ref} onOpen={onOpen} className="mt-0.5" />
-                <button
-                  type="button"
-                  className="min-w-0 flex-1 text-left"
-                  onClick={() => onOpen(t.ref)}
-                >
-                  <span className="block truncate text-sm font-medium text-content hover:underline">
-                    {t.title}
-                  </span>
-                  {t.assignedAgentIds.length > 0 && (
-                    <span className="mt-0.5 block truncate text-xs text-muted">
-                      {t.assignedAgentIds.map(nameOf).join(", ")}
-                    </span>
-                  )}
-                </button>
-                <span className="flex shrink-0 flex-col items-end gap-1">
-                  <StatusBadge status={t.status} />
-                  <PriorityBadge priority={t.priority} />
-                </span>
-              </div>
-            </li>
+        <div className="flex flex-col gap-4">
+          {grouped.map((g) => (
+            <SprintSection
+              key={g.sprint.id}
+              heading={g.sprint.name}
+              count={g.tickets.length}
+              tickets={g.tickets}
+              sprints={vm.sprints}
+              onOpen={onOpen}
+              nameOf={nameOf}
+              onAssignSprint={vm.assignSprint}
+            />
           ))}
-        </ul>
+          {noSprint.length > 0 && (
+            <SprintSection
+              heading="Sans sprint"
+              count={noSprint.length}
+              tickets={noSprint}
+              sprints={vm.sprints}
+              onOpen={onOpen}
+              nameOf={nameOf}
+              onAssignSprint={vm.assignSprint}
+            />
+          )}
+        </div>
       )}
 
       {vm.list?.nextCursor && (
@@ -254,3 +271,81 @@ export function TicketsPanel({ projectId, onOpen }: TicketsPanelProps) {
     </Panel>
   );
 }
+
+/**
+ * One sprint section (F2): a heading with the ticket count and the grouped
+ * ticket rows. Each row carries a simple sprint selector wired to
+ * `onAssignSprint` (assignment only — creation/reorder is ticket #11).
+ */
+function SprintSection({
+  heading,
+  count,
+  tickets,
+  sprints,
+  onOpen,
+  nameOf,
+  onAssignSprint,
+}: {
+  heading: string;
+  count: number;
+  tickets: TicketSummary[];
+  sprints: Sprint[];
+  onOpen: (ref: string) => void;
+  nameOf: (id: string) => string;
+  onAssignSprint: (ref: string, sprintId: string | null) => void;
+}) {
+  return (
+    <section aria-label={`sprint section ${heading}`}>
+      <h3 className="mb-1 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted">
+        {heading}
+        <span className="rounded-full bg-raised px-1.5 text-[10px] font-medium text-muted">
+          {count}
+        </span>
+      </h3>
+      <ul className="flex flex-col divide-y divide-border">
+        {tickets.map((t) => (
+          <li key={t.ref} className="py-2 first:pt-0 last:pb-0">
+            <div className="flex items-start gap-2">
+              <TicketRef ticketRef={t.ref} onOpen={onOpen} className="mt-0.5" />
+              <button
+                type="button"
+                className="min-w-0 flex-1 text-left"
+                onClick={() => onOpen(t.ref)}
+              >
+                <span className="block truncate text-sm font-medium text-content hover:underline">
+                  {t.title}
+                </span>
+                {t.assignedAgentIds.length > 0 && (
+                  <span className="mt-0.5 block truncate text-xs text-muted">
+                    {t.assignedAgentIds.map(nameOf).join(", ")}
+                  </span>
+                )}
+              </button>
+              <span className="flex shrink-0 flex-col items-end gap-1">
+                <StatusBadge status={t.status} />
+                <PriorityBadge priority={t.priority} />
+              </span>
+            </div>
+            <div className="mt-1 pl-6">
+              <select
+                aria-label={`sprint for ${t.ref}`}
+                className={selectClass}
+                value={t.sprintId ?? ""}
+                onChange={(e) =>
+                  onAssignSprint(t.ref, e.target.value || null)
+                }
+              >
+                <option value="">— No sprint —</option>
+                {sprints.map((s) => (
+                  <option key={s.id} value={s.id}>
+                    {s.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}