48 implement cycle details page

ui/src/components/layout/Sidebar.tsx

@@ -21,6 +21,7 @@ import { moduleService } from '../../services/moduleService';
 import { cycleService } from '../../services/cycleService';
 import { viewService } from '../../services/viewService';
 import { slugify } from '../../lib/slug';
+import { cyclePathSegment } from '../../lib/cycle';
 import { ISSUE_VIEW_FAVORITES_CHANGED_EVENT } from '../../lib/issueViewFavoritesEvents';
 import { CYCLE_FAVORITES_CHANGED_EVENT } from '../../hooks/useCycleFavorites';
 
@@ -1189,7 +1190,7 @@ export function Sidebar() {
                       {favoriteCycles.map(({ projectId, cycle }) => (
                         <Link
                           key={`${projectId}:${cycle.id}`}
-                          to={`${baseUrl}/projects/${projectId}/cycles/${cycle.id}`}
+                          to={`${baseUrl}/projects/${projectId}/cycles/${cyclePathSegment(cycle)}`}
                           className="flex w-full items-center gap-2 rounded-(--radius-md) px-2 py-1.5 text-[13px] font-medium text-(--txt-secondary) hover:bg-(--bg-layer-transparent-hover) hover:text-(--txt-primary)"
                         >
                           <span className="flex size-4 shrink-0 items-center justify-center text-(--txt-icon-tertiary)">

ui/src/lib/cycle.ts

@@ -0,0 +1,16 @@
+import type { CycleApiResponse } from '../api/types';
+import { slugify } from './slug';
+
+export function cyclePathSegment(cycle: Pick<CycleApiResponse, 'name'>): string {
+  const s = slugify(cycle.name);
+  return s || 'cycle';
+}
+
+export function cycleMatchesPathSegment(
+  cycle: Pick<CycleApiResponse, 'id' | 'name'>,
+  segment: string,
+): boolean {
+  const key = segment.trim().toLowerCase();
+  if (!key) return false;
+  return cycle.id.toLowerCase() === key || cyclePathSegment(cycle) === key;
+}

ui/src/pages/CycleDetailPage.tsx

@@ -0,0 +1,167 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { Badge } from '../components/ui';
+import { workspaceService } from '../services/workspaceService';
+import { projectService } from '../services/projectService';
+import { cycleService } from '../services/cycleService';
+import { issueService } from '../services/issueService';
+import { stateService } from '../services/stateService';
+import { cycleMatchesPathSegment } from '../lib/cycle';
+import type {
+  CycleApiResponse,
+  IssueApiResponse,
+  ProjectApiResponse,
+  StateApiResponse,
+  WorkspaceApiResponse,
+} from '../api/types';
+import type { Priority } from '../types';
+import { parseISODateForDisplay } from '../lib/dateOnly';
+
+const priorityVariant: Record<Priority, 'danger' | 'warning' | 'default' | 'neutral'> = {
+  urgent: 'danger',
+  high: 'danger',
+  medium: 'warning',
+  low: 'default',
+  none: 'neutral',
+};
+
+function formatDate(iso: string | null | undefined): string {
+  const d = parseISODateForDisplay(iso);
+  if (!d) return '—';
+  return d.toLocaleDateString('en-US', { month: 'short', day: '2-digit', year: 'numeric' });
+}
+
+export function CycleDetailPage() {
+  const { workspaceSlug, projectId, cycleId } = useParams<{
+    workspaceSlug: string;
+    projectId: string;
+    cycleId: string;
+  }>();
+
+  const [loading, setLoading] = useState(() => Boolean(workspaceSlug && projectId && cycleId));
+  const [workspace, setWorkspace] = useState<WorkspaceApiResponse | null>(null);
+  const [project, setProject] = useState<ProjectApiResponse | null>(null);
+  const [cycle, setCycle] = useState<CycleApiResponse | null>(null);
+  const [issues, setIssues] = useState<IssueApiResponse[]>([]);
+  const [states, setStates] = useState<StateApiResponse[]>([]);
+
+  useEffect(() => {
+    if (!workspaceSlug || !projectId || !cycleId) {
+      return;
+    }
+    let cancelled = false;
+    queueMicrotask(() => {
+      if (!cancelled) setLoading(true);
+    });
+    Promise.all([
+      workspaceService.getBySlug(workspaceSlug),
+      projectService.get(workspaceSlug, projectId),
+      cycleService.list(workspaceSlug, projectId),
+      issueService.list(workspaceSlug, projectId, { limit: 500 }),
+      stateService.list(workspaceSlug, projectId),
+    ])
+      .then(([w, p, cycles, allIssues, st]) => {
+        if (cancelled) return;
+        setWorkspace(w ?? null);
+        setProject(p ?? null);
+        setCycle((cycles ?? []).find((c) => cycleMatchesPathSegment(c, cycleId)) ?? null);
+        setIssues(allIssues ?? []);
+        setStates(st ?? []);
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setWorkspace(null);
+        setProject(null);
+        setCycle(null);
+        setIssues([]);
+        setStates([]);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [workspaceSlug, projectId, cycleId]);
+
+  const cycleIssues = useMemo(() => {
+    if (!cycle) return [];
+    return issues.filter((i) => i.cycle_ids?.includes(cycle.id));
+  }, [issues, cycle]);
+
+  const stateName = (stateId: string | null | undefined) =>
+    stateId ? (states.find((s) => s.id === stateId)?.name ?? '—') : '—';
+
+  if (loading) {
+    return <div className="p-6 text-sm text-(--txt-tertiary)">Loading cycle…</div>;
+  }
+  if (!workspace || !project || !cycle) {
+    return <div className="p-6 text-sm text-(--txt-secondary)">Cycle not found.</div>;
+  }
+
+  const projectBase = `/${workspace.slug}/projects/${project.id}`;
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <Link
+          to={`${projectBase}/cycles`}
+          className="inline-flex items-center text-sm text-(--txt-secondary) hover:text-(--txt-primary)"
+        >
+          ← Back to cycles
+        </Link>
+        <h1 className="text-xl font-semibold text-(--txt-primary)">{cycle.name}</h1>
+        <p className="text-sm text-(--txt-secondary)">
+          {formatDate(cycle.start_date)} — {formatDate(cycle.end_date)} · {cycle.issue_count ?? 0}{' '}
+          work items
+        </p>
+      </div>
+
+      <div className="overflow-x-auto rounded-md border border-(--border-subtle) bg-(--bg-surface-1)">
+        <table className="w-full min-w-[720px] text-left text-sm">
+          <thead className="bg-(--bg-layer-1)">
+            <tr>
+              <th className="px-4 py-2 font-medium text-(--txt-secondary)">Work item</th>
+              <th className="px-4 py-2 font-medium text-(--txt-secondary)">Priority</th>
+              <th className="px-4 py-2 font-medium text-(--txt-secondary)">State</th>
+              <th className="px-4 py-2 font-medium text-(--txt-secondary)">Due date</th>
+            </tr>
+          </thead>
+          <tbody>
+            {cycleIssues.length === 0 ? (
+              <tr>
+                <td colSpan={4} className="px-4 py-8 text-center text-(--txt-tertiary)">
+                  No work items in this cycle.
+                </td>
+              </tr>
+            ) : (
+              cycleIssues.map((issue) => (
+                <tr key={issue.id} className="border-t border-(--border-subtle)">
+                  <td className="px-4 py-2">
+                    <Link
+                      to={`${projectBase}/issues/${issue.id}`}
+                      className="text-(--txt-primary) no-underline hover:text-(--txt-accent-primary)"
+                    >
+                      {issue.name}
+                    </Link>
+                  </td>
+                  <td className="px-4 py-2">
+                    <Badge variant={priorityVariant[(issue.priority as Priority) ?? 'none']}>
+                      {issue.priority ?? 'none'}
+                    </Badge>
+                  </td>
+                  <td className="px-4 py-2 text-(--txt-secondary)">
+                    {stateName(issue.state_id ?? undefined)}
+                  </td>
+                  <td className="px-4 py-2 text-(--txt-secondary)">
+                    {formatDate(issue.target_date)}
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

ui/src/pages/CyclesPage.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Link, useParams } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Avatar, Badge, Button, Modal } from '../components/ui';
 import { UpdateCycleModal } from '../components/UpdateCycleModal';
 import { workspaceService } from '../services/workspaceService';
@@ -24,6 +24,7 @@ import {
 } from '../lib/projectCyclesEvents';
 import { useCycleFavorites } from '../hooks/useCycleFavorites';
 import { parseISODateForDisplay, parseISODateLocal } from '../lib/dateOnly';
+import { cyclePathSegment } from '../lib/cycle';
 import { cn, getImageUrl } from '../lib/utils';
 
 function pad2(n: number): string {
@@ -320,6 +321,7 @@ export function CyclesPage() {
   const [ellipsisMenuOpenId, setEllipsisMenuOpenId] = useState<string | null>(null);
   const [editCycle, setEditCycle] = useState<CycleApiResponse | null>(null);
   const [deleteCycleId, setDeleteCycleId] = useState<string | null>(null);
+  const navigate = useNavigate();
 
   const { toggleFavorite, isFavorite } = useCycleFavorites(workspaceSlug, projectId);
 
@@ -563,7 +565,9 @@ export function CyclesPage() {
     return c.status === 'completed' ? 100 : 0;
   };
   const cyclePath = (c: CycleApiResponse) =>
-    workspace && project ? `/${workspace.slug}/projects/${project.id}/cycles/${c.id}` : '';
+    workspace && project
+      ? `/${workspace.slug}/projects/${project.id}/cycles/${cyclePathSegment(c)}`
+      : '';
   const baseUrl = workspace && project ? `/${workspace.slug}/projects/${project.id}` : '';
 
   const stateGroupMap: Record<
@@ -706,6 +710,15 @@ export function CyclesPage() {
       <div
         key={c.id}
         className="flex items-center gap-3 border-b border-(--border-subtle) last:border-b-0 px-4 py-2 hover:bg-(--bg-layer-1-hover)"
+        role="button"
+        tabIndex={0}
+        onClick={() => navigate(path)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            navigate(path);
+          }
+        }}
       >
         <CycleProgressCircle progress={progress} />
         <div className="min-w-0 flex-1">

ui/src/routes/index.tsx

@@ -80,6 +80,9 @@ const BoardPage = lazy(() =>
 const CyclesPage = lazy(() =>
   import('../pages/CyclesPage').then((m) => page({ CyclesPage: m.CyclesPage })),
 );
+const CycleDetailPage = lazy(() =>
+  import('../pages/CycleDetailPage').then((m) => page({ CycleDetailPage: m.CycleDetailPage })),
+);
 const ModulesPage = lazy(() =>
   import('../pages/ModulesPage').then((m) => page({ ModulesPage: m.ModulesPage })),
 );
@@ -522,6 +525,14 @@ const router = createBrowserRouter([
                           </Suspense>
                         ),
                       },
+                      {
+                        path: 'cycles/:cycleId',
+                        element: (
+                          <Suspense fallback={<PageFallback />}>
+                            <CycleDetailPage />
+                          </Suspense>
+                        ),
+                      },
                       {
                         path: 'modules',
                         element: (