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>
This commit is contained in:
2026-07-05 10:57:38 +02:00
parent 48b652ff91
commit 69759d351c
7 changed files with 423 additions and 31 deletions

View File

@ -36,6 +36,7 @@ import type {
ResumableAgent,
Skill,
SkillScope,
Sprint,
Template,
TerminalSession,
Ticket,
@ -1813,12 +1814,14 @@ export class MockTicketGateway implements TicketGateway {
private tickets = new Map<string, Map<string, Ticket>>();
private carnets = new Map<string, Map<string, string>>();
private counters = new Map<string, number>();
private sprints = new Map<string, Map<string, Sprint>>();
constructor(private readonly system?: MockSystemGateway) {}
/** Seeds a ticket for deterministic tests; returns the stored clone. */
_seedTicket(projectId: string, ticket: Ticket): Ticket {
const stored = structuredClone(ticket);
if (stored.sprintId === undefined) stored.sprintId = null;
this.projectTickets(projectId).set(stored.ref, stored);
this.counters.set(
projectId,
@ -1827,6 +1830,41 @@ export class MockTicketGateway implements TicketGateway {
return structuredClone(stored);
}
/** Seeds a sprint for deterministic tests; returns the stored clone. */
_seedSprint(
projectId: string,
sprint: Pick<Sprint, "id" | "order" | "name"> &
Partial<Pick<Sprint, "status" | "ticketCount" | "version">>,
): Sprint {
const stored: Sprint = {
status: "planned",
ticketCount: 0,
version: 1,
...sprint,
};
this.projectSprints(projectId).set(stored.id, stored);
return structuredClone(stored);
}
private projectSprints(projectId: string): Map<string, Sprint> {
let map = this.sprints.get(projectId);
if (!map) {
map = new Map();
this.sprints.set(projectId, map);
}
return map;
}
/** Recomputes `ticketCount` for every sprint from the current tickets. */
private recountSprints(projectId: string): void {
const sprints = this.projectSprints(projectId);
const counts = new Map<string, number>();
for (const t of this.projectTickets(projectId).values()) {
if (t.sprintId) counts.set(t.sprintId, (counts.get(t.sprintId) ?? 0) + 1);
}
for (const s of sprints.values()) s.ticketCount = counts.get(s.id) ?? 0;
}
private projectTickets(projectId: string): Map<string, Ticket> {
let map = this.tickets.get(projectId);
if (!map) {
@ -1874,6 +1912,7 @@ export class MockTicketGateway implements TicketGateway {
description: input.description ?? "",
status: input.status ?? "open",
priority: input.priority ?? "medium",
sprintId: null,
links: [],
assignedAgentIds: [...(input.assignedAgentIds ?? [])],
createdBy: { kind: "user" },
@ -1930,6 +1969,7 @@ export class MockTicketGateway implements TicketGateway {
title: t.title,
status: t.status,
priority: t.priority,
sprintId: t.sprintId ?? null,
assignedAgentIds: [...t.assignedAgentIds],
updatedAt: t.updatedAt,
})),
@ -2066,6 +2106,41 @@ export class MockTicketGateway implements TicketGateway {
});
return structuredClone(ticket);
}
async listSprints(projectId: string): Promise<Sprint[]> {
this.recountSprints(projectId);
return [...this.projectSprints(projectId).values()]
.sort((a, b) => a.order - b.order)
.map((s) => structuredClone(s));
}
async setTicketSprint(
projectId: string,
ref: string,
sprintId: string | null,
expectedVersion: number,
): Promise<Ticket> {
const ticket = this.require(projectId, ref);
this.guard(ticket, expectedVersion);
if (sprintId !== null && !this.projectSprints(projectId).has(sprintId)) {
throw {
code: "NOT_FOUND",
message: `sprint ${sprintId} not found`,
} as GatewayError;
}
const from = ticket.sprintId ?? null;
ticket.sprintId = sprintId;
this.bump(ticket);
this.recountSprints(projectId);
this.system?.emit({
type: "issueSprintChanged",
issueRef: ref,
from,
to: sprintId,
version: ticket.version,
});
return structuredClone(ticket);
}
}
function mostRestrictive(

View File

@ -14,6 +14,7 @@ import { invoke } from "@tauri-apps/api/core";
import type {
GatewayError,
Sprint,
Ticket,
TicketCarnet,
TicketLinkKind,
@ -122,4 +123,29 @@ export class TauriTicketGateway implements TicketGateway {
request: { projectId, ref, agentId, assigned, expectedVersion },
});
}
async listSprints(projectId: string): Promise<Sprint[]> {
// `sprint_list` returns a `SprintListDto { items }`; unwrap to the array.
const list = await invoke<{ items: Sprint[] }>("sprint_list", {
request: { projectId },
});
return list.items;
}
async setTicketSprint(
projectId: string,
ref: string,
sprintId: string | null,
expectedVersion: number,
): Promise<Ticket> {
// Two backend commands: assign to a sprint, or unassign (clear membership).
if (sprintId === null) {
return invoke<Ticket>("ticket_unassign_sprint", {
request: { projectId, ref, expectedVersion },
});
}
return invoke<Ticket>("ticket_assign_sprint", {
request: { projectId, ref, sprintId, expectedVersion },
});
}
}

View File

@ -165,6 +165,28 @@ export type DomainEvent =
agentId: string;
version: number;
}
| {
/**
* A ticket changed sprint membership (ticket #10). Mirror of the backend
* `DomainEventDto::IssueSprintChanged`. `from`/`to` are sprint ids (`null`
* ⇒ no sprint). Starts with `issue`, so {@link isTicketEvent} matches it
* and ticket lists refresh automatically.
*/
type: "issueSprintChanged";
issueRef: string;
from: string | null;
to: string | null;
version: number;
}
| { type: "sprintCreated"; sprintId: string; order: number }
| { type: "sprintRenamed"; sprintId: string; name: string; version: number }
| {
type: "sprintReordered";
sprintId: string;
order: number;
version: number;
}
| { type: "sprintDeleted"; sprintId: string }
| {
/**
* An intermediate assistant announcement emitted **during** an inter-agent
@ -197,6 +219,17 @@ export function isTicketEvent(
return event.type.startsWith("issue");
}
/**
* Whether a domain event is a sprint lifecycle event (`sprint*`). Lets the
* ticket view-model re-fetch the sprint list when sprints are created, renamed,
* reordered or deleted (ticket #10).
*/
export function isSprintEvent(
event: DomainEvent,
): event is Extract<DomainEvent, { type: `sprint${string}` }> {
return event.type.startsWith("sprint");
}
/** Where a project physically lives (mirror of the backend `RemoteRef`). */
export type RemoteRef =
| { kind: "local" }
@ -865,6 +898,22 @@ export interface TicketLink {
kind: TicketLinkKind;
}
/** Lifecycle status of a sprint (mirror of the backend `SprintStatus`). */
export type SprintStatus = "planned" | "active" | "done";
/** A sprint bucket tickets can belong to (mirror of `SprintDto`). */
export interface Sprint {
id: string;
/** Reorderable position; sections are displayed by ascending `order`. */
order: number;
name: string;
status: SprintStatus;
/** How many tickets currently belong to this sprint. */
ticketCount: number;
/** Optimistic-concurrency version. */
version: number;
}
/** The full ticket, as returned by `ticket_read`/`ticket_create`/… . */
export interface Ticket {
id: string;
@ -874,6 +923,8 @@ export interface Ticket {
description: string;
status: TicketStatus;
priority: TicketPriority;
/** Sprint membership (`null` ⇒ no sprint). Additive (ticket #10). */
sprintId?: string | null;
/** Present only when the ticket was read with `includeCarnet`. */
carnet?: string;
links: TicketLink[];
@ -893,6 +944,8 @@ export interface TicketSummary {
title: string;
status: TicketStatus;
priority: TicketPriority;
/** Sprint membership (`null` ⇒ no sprint). Additive (ticket #10). */
sprintId?: string | null;
assignedAgentIds: string[];
updatedAt: number;
}

View File

@ -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>
);
}

View File

@ -347,6 +347,71 @@ describe("TicketsView", () => {
await waitFor(() => expect(onClose).toHaveBeenCalledTimes(1));
});
it("groups tickets by sprint with a « Sans sprint » bucket (#10)", async () => {
// Two ordered sprints + one ticket in each + one loose ticket.
ticket._seedSprint(PROJECT_ID, { id: "s1", order: 1, name: "Sprint One" });
ticket._seedSprint(PROJECT_ID, { id: "s2", order: 2, name: "Sprint Two" });
const t1 = await ticket.create(PROJECT_ID, { title: "In one" });
const t2 = await ticket.create(PROJECT_ID, { title: "In two" });
await ticket.create(PROJECT_ID, { title: "Loose" });
await ticket.setTicketSprint(PROJECT_ID, t1.ref, "s1", t1.version);
await ticket.setTicketSprint(PROJECT_ID, t2.ref, "s2", t2.version);
renderView(ticket, system, agent);
// Sections appear in sprint `order`, then the "Sans sprint" bucket last.
await screen.findByRole("region", { name: "sprint section Sprint One" });
const sections = screen
.getAllByRole("region")
.map((r) => r.getAttribute("aria-label"))
.filter((l) => l?.startsWith("sprint section"));
expect(sections).toEqual([
"sprint section Sprint One",
"sprint section Sprint Two",
"sprint section Sans sprint",
]);
// The loose ticket lives in the bucket, the others under their sprint.
const bucket = screen.getByRole("region", { name: "sprint section Sans sprint" });
expect(within(bucket).getByText("Loose")).toBeTruthy();
const one = screen.getByRole("region", { name: "sprint section Sprint One" });
expect(within(one).getByText("In one")).toBeTruthy();
});
it("assigns a ticket to a sprint via the row selector (#10)", async () => {
ticket._seedSprint(PROJECT_ID, { id: "s1", order: 1, name: "Sprint One" });
const t = await ticket.create(PROJECT_ID, { title: "Movable" });
renderView(ticket, system, agent);
// It starts in the "Sans sprint" bucket.
const bucket = await screen.findByRole("region", {
name: "sprint section Sans sprint",
});
expect(within(bucket).getByText("Movable")).toBeTruthy();
// Pick the sprint in the row selector → assign it.
fireEvent.change(screen.getByLabelText(`sprint for ${t.ref}`), {
target: { value: "s1" },
});
// The gateway recorded the membership…
await waitFor(async () => {
const fresh = await ticket.read(PROJECT_ID, t.ref);
expect(fresh.sprintId).toBe("s1");
});
// …and the UI regrouped it under Sprint One, emptying the bucket.
await waitFor(() => {
const one = screen.getByRole("region", {
name: "sprint section Sprint One",
});
expect(within(one).getByText("Movable")).toBeTruthy();
});
expect(
screen.queryByRole("region", { name: "sprint section Sans sprint" }),
).toBeNull();
});
it("copies a delegation context prompt (F7)", async () => {
const writeText = stubClipboard();
const t = await ticket.create(PROJECT_ID, { title: "Delegate me" });

View File

@ -5,22 +5,41 @@
* `Issue*` domain events (via {@link SystemGateway}) to refresh the list on any
* ticket mutation — including those made by agents through MCP. Filters/search
* are part of the query and drive a re-fetch when they change.
*
* Sprints (ticket #10): the hook also loads the project's sprints so the panel
* can group tickets by sprint, and exposes `assignSprint` to move a ticket into
* or out of a sprint. Sprint lifecycle events refresh the sprint list.
*/
import { useCallback, useEffect, useMemo, useState } from "react";
import { isTicketEvent, type GatewayError, type Ticket, type TicketList } from "@/domain";
import {
isSprintEvent,
isTicketEvent,
type GatewayError,
type Sprint,
type Ticket,
type TicketList,
} from "@/domain";
import type { CreateTicketInput, TicketListQuery } from "@/ports";
import { useGateways } from "@/app/di";
export interface TicketsViewModel {
list: TicketList | null;
/** The project's sprints, ordered by `order` (ticket #10). */
sprints: Sprint[];
error: string | null;
busy: boolean;
query: TicketListQuery;
setQuery: (next: TicketListQuery) => void;
refresh: () => Promise<void>;
create: (input: CreateTicketInput) => Promise<Ticket | null>;
/**
* Assigns a ticket to a sprint (or clears it with `sprintId === null`). Reads
* the ticket's current version first so the summary-based list needs no
* version column. Refreshes on the resulting `issueSprintChanged` event.
*/
assignSprint: (ref: string, sprintId: string | null) => Promise<boolean>;
}
function describe(e: unknown): string {
@ -33,6 +52,7 @@ function describe(e: unknown): string {
export function useTickets(projectId: string): TicketsViewModel {
const { ticket, system } = useGateways();
const [list, setList] = useState<TicketList | null>(null);
const [sprints, setSprints] = useState<Sprint[]>([]);
const [error, setError] = useState<string | null>(null);
const [busy, setBusy] = useState(false);
const [query, setQuery] = useState<TicketListQuery>({});
@ -55,6 +75,14 @@ export function useTickets(projectId: string): TicketsViewModel {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [projectId, ticket, queryKey]);
const refreshSprints = useCallback(async () => {
try {
setSprints(await ticket.listSprints(projectId));
} catch (e) {
setError(describe(e));
}
}, [projectId, ticket]);
const create = useCallback(
async (input: CreateTicketInput): Promise<Ticket | null> => {
setError(null);
@ -70,10 +98,32 @@ export function useTickets(projectId: string): TicketsViewModel {
[projectId, ticket, refresh],
);
const assignSprint = useCallback(
async (ref: string, sprintId: string | null): Promise<boolean> => {
setError(null);
try {
const current = await ticket.read(projectId, ref);
await ticket.setTicketSprint(projectId, ref, sprintId, current.version);
// The `issueSprintChanged` event refreshes the list; refresh the sprint
// counts too (and update immediately in case events are not wired).
await Promise.all([refresh(), refreshSprints()]);
return true;
} catch (e) {
setError(describe(e));
return false;
}
},
[projectId, ticket, refresh, refreshSprints],
);
useEffect(() => {
void refresh();
}, [refresh]);
useEffect(() => {
void refreshSprints();
}, [refreshSprints]);
useEffect(() => {
if (!system) return;
let unsubscribe: (() => void) | undefined;
@ -81,6 +131,11 @@ export function useTickets(projectId: string): TicketsViewModel {
void system
.onDomainEvent((event) => {
if (isTicketEvent(event)) void refresh();
// Sprint membership (`issueSprintChanged`) and sprint lifecycle events
// both change the grouping → refresh the sprint list.
if (isSprintEvent(event) || event.type === "issueSprintChanged") {
void refreshSprints();
}
})
.then((u) => {
if (cancelled) u();
@ -90,7 +145,17 @@ export function useTickets(projectId: string): TicketsViewModel {
cancelled = true;
unsubscribe?.();
};
}, [refresh, system]);
}, [refresh, refreshSprints, system]);
return { list, error, busy, query, setQuery, refresh, create };
return {
list,
sprints,
error,
busy,
query,
setQuery,
refresh,
create,
assignSprint,
};
}

View File

@ -39,6 +39,7 @@ import type {
ResumableAgent,
Skill,
SkillScope,
Sprint,
Template,
TerminalSession,
Ticket,
@ -794,6 +795,18 @@ export interface TicketGateway {
assigned: boolean,
expectedVersion: number,
): Promise<Ticket>;
/** Lists the project's sprints, ordered by `order` (ticket #10). */
listSprints(projectId: string): Promise<Sprint[]>;
/**
* Sets (or clears with `sprintId === null`) a ticket's sprint membership
* (ticket #10). Optimistic concurrency: `expectedVersion` must match.
*/
setTicketSprint(
projectId: string,
ref: string,
sprintId: string | null,
expectedVersion: number,
): Promise<Ticket>;
}
/**